Code Editor for app.py

import streamlit as st
import pandas as pd
import requests
import json
from PIL import Image
import io
import base64

# Set page config for a wider layout and custom title/icon
st.set_page_config(
    page_title="책 추천 | Book Recommender",
    page_icon="📚",
    layout="wide",
    initial_sidebar_state="collapsed"
)

# Custom CSS for a more aesthetic look
def add_bg_from_url():
    st.markdown(
        f"""
        <style>
        .stApp {{
            background-image: url("https://images.unsplash.com/photo-1507842217343-583bb7270b66?ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80");
            background-attachment: fixed;
            background-size: cover;
            background-position: center;
        }}
        .main-container {{
            background-color: rgba(255, 255, 255, 0.85);
            border-radius: 20px;
            padding: 2rem;
            backdrop-filter: blur(5px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            margin: 1rem;
        }}
        .book-card {{
            background-color: white;
            border-radius: 10px;
            padding: 1.5rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }}
        .book-card:hover {{
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }}
        .book-title {{
            font-family: 'Nanum Gothic', sans-serif;
            font-weight: 700;
            font-size: 1.2rem;
            margin-bottom: 0.5rem;
            color: #333;
        }}
        .book-author {{
            font-family: 'Nanum Gothic', sans-serif;
            font-style: italic;
            color: #666;
            margin-bottom: 0.5rem;
        }}
        .book-description {{
            font-family: 'Nanum Gothic', sans-serif;
            font-size: 0.9rem;
            color: #444;
            line-height: 1.5;
        }}
        .search-container {{
            background-color: rgba(255, 255, 255, 0.9);
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
            backdrop-filter: blur(10px);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        }}
        .stTextInput > div > div > input {{
            background-color: white;
            padding: 1rem;
            font-size: 1.1rem;
            border-radius: 10px;
            border: 1px solid #ddd;
            box-shadow: none !important;
        }}
        h1, h2, h3 {{
            font-family: 'Nanum Gothic', sans-serif;
            color: #333;
        }}
        .korean-text {{
            font-family: 'Nanum Gothic', sans-serif;
        }}
        .stButton>button {{
            background-color: #5D6D7E;
            color: white;
            font-family: 'Nanum Gothic', sans-serif;
            font-weight: 500;
            padding: 0.5rem 2rem;
            border-radius: 10px;
            border: none;
            transition: all 0.3s;
        }}
        .stButton>button:hover {{
            background-color: #34495E;
            transform: scale(1.03);
        }}
        .tag {{
            display: inline-block;
            background-color: #EBF5FB;
            color: #2E86C1;
            padding: 0.3rem 0.8rem;
            border-radius: 15px;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            font-size: 0.8rem;
            font-family: 'Nanum Gothic', sans-serif;
        }}
        </style>
        <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
        """,
        unsafe_allow_html=True,
    )

# Add Korean font and background
add_bg_from_url()

# Create main container for content
st.markdown('<div class="main-container">', unsafe_allow_html=True)

# Logo and Title
col1, col2, col3 = st.columns([1, 3, 1])
with col2:
    st.title("📚 책 추천 시스템 | Book Recommender")
    st.markdown(
        "<p class='korean-text' style='font-size: 1.2rem; margin-bottom: 2rem; text-align: center;'>"
        "읽고 싶은 책의 주제, 작가 또는 장르를 입력하세요<br>"
        "Enter a topic, author or genre you're interested in reading about"
        "</p>", 
        unsafe_allow_html=True
    )

# Search container
st.markdown('<div class="search-container">', unsafe_allow_html=True)
query = st.text_input("", placeholder="예: 판타지 소설, 자기계발, 하루키 무라카미...", key="search_query")
search_col1, search_col2 = st.columns([5, 1])
with search_col2:
    search_button = st.button("검색 | Search")
st.markdown('</div>', unsafe_allow_html=True)

# Sample book data (in lieu of an actual API)
def get_book_recommendations(query):
    # This would be replaced with an actual API call
    # In a real app, you'd call an external book recommendation API
    
    # Sample data based on common Korean and international books
    books = [
        {
            "title": "82년생 김지영",
            "title_en": "Kim Ji-young, Born 1982",
            "author": "조남주 (Cho Nam-joo)",
            "image_url": "https://image.aladin.co.kr/product/11429/85/cover500/8937473135_1.jpg",
            "description": "대한민국의 평범한 여성이 겪는 성차별과 일상적 어려움을 묘사한 소설로, 한국 사회의 젠더 문제를 다루고 있습니다.",
            "description_en": "A novel that depicts the gender discrimination and everyday difficulties experienced by an ordinary woman in South Korea.",
            "tags": ["페미니즘", "사회비평", "현대소설"]
        },
        {
            "title": "직업으로서의 소설가",
            "title_en": "Novelist as a Profession",
            "author": "무라카미 하루키 (Haruki Murakami)",
            "image_url": "https://image.aladin.co.kr/product/8921/99/cover500/8954637604_1.jpg",
            "description": "유명 작가 무라카미 하루키가 소설가로서의 자신의 경험과 창작 과정에 대해 이야기하는 에세이 모음집입니다.",
            "description_en": "A collection of essays in which famous author Haruki Murakami talks about his experiences and creative process as a novelist.",
            "tags": ["에세이", "작가론", "창작론"]
        },
        {
            "title": "파친코",
            "title_en": "Pachinko",
            "author": "이민진 (Min Jin Lee)",
            "image_url": "https://image.aladin.co.kr/product/17047/61/cover500/8954653472_1.jpg",
            "description": "1900년대 초부터 80년대까지, 재일 한국인 가족 4대에 걸친 서사를 그린 대하소설입니다. 이민, 정체성, 가족의 이야기를 담고 있습니다.",
            "description_en": "An epic novel depicting the story of a Korean family in Japan spanning four generations from the early 1900s to the 1980s.",
            "tags": ["역사소설", "이민", "가족"]
        },
        {
            "title": "우리가 빛의 속도로 갈 수 없다면",
            "title_en": "If We Cannot Move at the Speed of Light",
            "author": "김초엽 (Cho-yeop Kim)",
            "image_url": "https://image.aladin.co.kr/product/19509/18/cover500/k102636743_1.jpg",
            "description": "과학적 상상력과 인간의 감성을 결합한 SF 단편집으로, 한국 SF 문학의 새로운 지평을 열었다는 평가를 받는 작품입니다.",
            "description_en": "A collection of SF short stories that combines scientific imagination with human emotions, praised for opening new horizons in Korean SF literature.",
            "tags": ["SF", "단편집", "상상력"]
        },
        {
            "title": "사피엔스",
            "title_en": "Sapiens: A Brief History of Humankind",
            "author": "유발 하라리 (Yuval Noah Harari)",
            "image_url": "https://image.aladin.co.kr/product/6574/87/cover500/8934972815_1.jpg",
            "description": "인류의 역사를 거시적 관점에서 분석한 책으로, 인간이 어떻게 지구상에서 지배적인 위치에 오르게 되었는지 탐구합니다.",
            "description_en": "A book that analyzes human history from a macro perspective, exploring how humans came to dominate the planet.",
            "tags": ["역사", "인류학", "교양"]
        },
        {
            "title": "아몬드",
            "title_en": "Almond",
            "author": "손원평 (Won-pyung Sohn)",
            "image_url": "https://image.aladin.co.kr/product/17048/35/cover500/k402535150_1.jpg",
            "description": "감정을 느끼지 못하는 소년 윤재와 분노로 가득 찬 소년 곤이의 만남을 통해 감정과 공감의 의미를 탐색하는 성장소설입니다.",
            "description_en": "A coming-of-age novel exploring the meaning of emotions and empathy through the meeting of Yoon Jae, a boy who cannot feel emotions, and Gon, a boy filled with anger.",
            "tags": ["성장소설", "청소년", "감정"]
        }
    ]
    
    # Very simple filtering based on query
    if not query:
        return books
    
    filtered_books = []
    query_lower = query.lower()
    
    for book in books:
        # Check if query appears in title, author, description or tags
        if (query_lower in book["title"].lower() or
            query_lower in book["author"].lower() or
            query_lower in book["description"].lower() or
            any(query_lower in tag.lower() for tag in book["tags"])):
            filtered_books.append(book)
    
    return filtered_books if filtered_books else books

# Function to display book cards
def display_book_cards(books):
    for i in range(0, len(books), 3):
        cols = st.columns(3)
        for j in range(3):
            if i + j < len(books):
                book = books[i + j]
                with cols[j]:
                    st.markdown(f'<div class="book-card">', unsafe_allow_html=True)
                    
                    # Book image
                    st.image(book["image_url"], width=200)
                    
                    # Title and English title
                    st.markdown(f'<div class="book-title">{book["title"]}</div>', unsafe_allow_html=True)
                    st.markdown(f'<div class="book-title" style="font-size: 0.9rem; color: #666;">{book["title_en"]}</div>', unsafe_allow_html=True)
                    
                    # Author
                    st.markdown(f'<div class="book-author">{book["author"]}</div>', unsafe_allow_html=True)
                    
                    # Tags
                    tag_html = ""
                    for tag in book["tags"]:
                        tag_html += f'<span class="tag">{tag}</span>'
                    st.markdown(f'<div>{tag_html}</div>', unsafe_allow_html=True)
                    
                    # Description
                    st.markdown(f'<div class="book-description">{book["description"]}</div>', unsafe_allow_html=True)
                    st.markdown(f'<div class="book-description" style="font-style: italic; color: #777; margin-top: 0.5rem;">{book["description_en"]}</div>', unsafe_allow_html=True)
                    
                    st.markdown('</div>', unsafe_allow_html=True)

# Process search when button is clicked or when query is entered
if search_button or query:
    if query:
        books = get_book_recommendations(query)
        st.markdown(
            f'<h2 class="korean-text" style="margin-bottom: 1.5rem;">"{query}" 검색 결과</h2>',
            unsafe_allow_html=True
        )
        display_book_cards(books)
    else:
        st.info("검색어를 입력해주세요 (Please enter a search term)")
else:
    # Show featured books when no search is performed
    st.markdown(
        '<h2 class="korean-text" style="margin-bottom: 1.5rem;">추천 도서 | Featured Books</h2>',
        unsafe_allow_html=True
    )
    featured_books = get_book_recommendations("")
    display_book_cards(featured_books)

# Footer
st.markdown(
    """
    <div style="text-align: center; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid #ddd; color: #666;">
        <p class="korean-text">© 2023 책 추천 시스템 | Book Recommender</p>
        <p style="font-size: 0.8rem;">Created with Streamlit • Books data for demonstration purposes only</p>
    </div>
    """,
    unsafe_allow_html=True
)

# Close main container
st.markdown('</div>', unsafe_allow_html=True)