app.py

import gradio as gr
from huggingface_hub import InferenceClient

"""
For more information on `huggingface_hub` Inference API support, please check the docs: https://huggingface.co/docs/huggingface_hub/v0.22.2/en/guides/inference
"""
client = InferenceClient("HuggingFaceH4/zephyr-7b-beta")

def create_system_prompt(agent_type, personality, expertise_level, language):
    base_prompt = f"""You are a {agent_type} movie recommendation agent with the following characteristics:
- Personality: {personality}
- Expertise Level: {expertise_level}
- Language: {language}

Your role is to:
1. Understand user preferences and mood
2. Provide personalized movie recommendations
3. Explain why you're recommending specific movies
4. Maintain a {personality} tone throughout the conversation
5. Consider the user's expertise level ({expertise_level}) when explaining

Please respond in {language}."""
    return base_prompt

def respond(
    message,
    history: list[tuple[str, str]],
    agent_type,
    personality,
    expertise_level,
    language,
    max_tokens,
    temperature,
    top_p,
    genre,
    mood,
):
    # 시스템 프롬프트 생성
    system_message = create_system_prompt(agent_type, personality, expertise_level, language)
    messages = [{"role": "system", "content": system_message}]

    # 사용자 입력에 장르와 기분 정보 추가
    enhanced_message = f"Genre: {genre}\nMood: {mood}\nUser request: {message}"
    
    for val in history:
        if val[0]:
            messages.append({"role": "user", "content": val[0]})
        if val[1]:
            messages.append({"role": "assistant", "content": val[1]})

    messages.append({"role": "user", "content": enhanced_message})

    response = ""
    for message in client.chat_completion(
        messages,
        max_tokens=max_tokens,
        stream=True,
        temperature=temperature,
        top_p=top_p,
    ):
        token = message.choices[0].delta.content
        response += token
        yield response

def reset_chat():
    return None

def show_settings_changed_info(agent_type, personality, expertise_level, language):
    return f"""
    새로운 Agent 설정:
    - 유형: {agent_type}
    - 성격: {personality}
    - 설명 수준: {expertise_level}
    - 응답 언어: {language}
    
    대화가 초기화되었습니다. 새로운 설정으로 대화를 시작해주세요.
    """

"""
For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
"""

# 커스텀 CSS 스타일
custom_css = """
.gradio-container {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

/* 채팅 컨테이너 스타일 */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 채팅 메시지 스타일 */
.chat-message {
    padding: 20px;
    margin: 10px;
    border-radius: 10px;
    max-width: 85%;
    line-height: 1.5;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 사용자 메시지 스타일 */
.user-message {
    background-color: #f0f2f5;
    margin-left: auto;
    border-bottom-right-radius: 0;
}

/* 봇 메시지 스타일 */
.bot-message {
    background-color: #e3f2fd;
    margin-right: auto;
    border-bottom-left-radius: 0;
}

/* 입력 영역 스타일 */
.input-container {
    display: flex;
    gap: 10px;
    padding: 20px;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    position: sticky;
    bottom: 0;
}

/* 입력 필드 스타일 */
input[type="text"] {
    flex: 1;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

input[type="text"]:focus {
    border-color: #2196f3;
    outline: none;
}

/* 버튼 스타일 */
button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background-color: #2196f3;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #1976d2;
}

/* 설정 패널 스타일 */
.settings-panel {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* 드롭다운 스타일 */
select {
    width: 100%;
    padding: 8px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 10px;
}

/* 슬라이더 스타일 */
input[type="range"] {
    width: 100%;
    margin: 10px 0;
}
"""

with gr.Blocks(css=custom_css) as demo:
    gr.Markdown("""
    # 🎬 Personalized Movie Recommender
    
    안녕하세요! 당신만을 위한 영화 추천 시스템입니다. 
    선호하는 장르와 현재 기분을 알려주시면, 맞춤형 영화를 추천해드립니다.
    """)
    
    with gr.Row():
        with gr.Column(scale=2):
            with gr.Group(elem_classes="chat-container"):
                chatbot = gr.Chatbot(
                    height=600,
                    show_copy_button=True,
                    avatar_images=("👤", "🎬"),
                    bubble_full_width=False,
                    elem_classes=["chat-message"],
                    type="messages"  # OpenAI 스타일 메시지 형식 사용
                )
                with gr.Group(elem_classes="input-container"):
                    msg = gr.Textbox(
                        placeholder="어떤 영화를 찾고 계신가요?",
                        show_label=False,
                        container=False
                    )
                    with gr.Row():
                        submit = gr.Button("추천 받기", variant="primary", size="sm")
                        clear = gr.Button("대화 초기화", size="sm")
        
        with gr.Column(scale=1):
            with gr.Group(elem_classes="settings-panel"):
                gr.Markdown("### 🎯 추천 설정")
                genre = gr.Dropdown(
                    choices=["액션", "코미디", "드라마", "로맨스", "스릴러", "SF", "판타지", "애니메이션"],
                    label="선호하는 장르",
                    multiselect=True
                )
                mood = gr.Dropdown(
                    choices=["신나는", "감성적인", "긴장감 있는", "편안한", "신비로운"],
                    label="현재 기분",
                    multiselect=True
                )
            
            with gr.Group(elem_classes="settings-panel"):
                gr.Markdown("### 🤖 Agent 설정")
                agent_type = gr.Dropdown(
                    choices=["전문가", "친구", "영화 평론가", "큐레이터"],
                    label="Agent 유형",
                    value="전문가"
                )
                personality = gr.Dropdown(
                    choices=["친근한", "전문적인", "유머러스한", "감성적인", "객관적인"],
                    label="성격",
                    value="친근한"
                )
                expertise_level = gr.Dropdown(
                    choices=["초보자", "중급자", "전문가"],
                    label="설명 수준",
                    value="중급자"
                )
                language = gr.Dropdown(
                    choices=["한국어", "영어", "일본어"],
                    label="응답 언어",
                    value="한국어"
                )
            
            with gr.Group(elem_classes="settings-panel"):
                gr.Markdown("### ⚙️ 고급 설정")
                max_tokens = gr.Slider(
                    minimum=1,
                    maximum=2048,
                    value=512,
                    step=1,
                    label="최대 토큰 수"
                )
                temperature = gr.Slider(
                    minimum=0.1,
                    maximum=4.0,
                    value=0.7,
                    step=0.1,
                    label="Temperature"
                )
                top_p = gr.Slider(
                    minimum=0.1,
                    maximum=1.0,
                    value=0.95,
                    step=0.05,
                    label="Top-p"
                )

    # 설정 변경 시 채팅 초기화 및 알림 표시
    for component in [agent_type, personality, expertise_level, language]:
        component.change(
            fn=show_settings_changed_info,
            inputs=[agent_type, personality, expertise_level, language],
            outputs=gr.Info()
        ).then(
            fn=reset_chat,
            outputs=chatbot
        )

    submit.click(
        respond,
        inputs=[
            msg,
            chatbot,
            agent_type,
            personality,
            expertise_level,
            language,
            max_tokens,
            temperature,
            top_p,
            genre,
            mood,
        ],
        outputs=chatbot,
    ).then(
        lambda: "",
        None,
        msg,
        queue=False
    )
    
    clear.click(lambda: None, None, chatbot, queue=False)


if __name__ == "__main__":
    demo.launch()