update UI/UX

app.py

@@ -14,19 +14,23 @@ def respond(
     max_tokens,
     temperature,
     top_p,
+    genre,
+    mood,
 ):
     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": message})
+    messages.append({"role": "user", "content": enhanced_message})
 
     response = ""
-
     for message in client.chat_completion(
         messages,
         max_tokens=max_tokens,
@@ -35,7 +39,6 @@ def respond(
         top_p=top_p,
     ):
         token = message.choices[0].delta.content
-
         response += token
         yield response
 
@@ -43,21 +46,118 @@ def respond(
 """
 For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
 """
-demo = gr.ChatInterface(
-    respond,
-    additional_inputs=[
-        gr.Textbox(value="You are a friendly Chatbot.", label="System message"),
-        gr.Slider(minimum=1, maximum=2048, value=512, step=1, label="Max new tokens"),
-        gr.Slider(minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(
-            minimum=0.1,
-            maximum=1.0,
-            value=0.95,
-            step=0.05,
-            label="Top-p (nucleus sampling)",
-        ),
-    ],
-)
+
+# 커스텀 CSS 스타일
+custom_css = """
+.gradio-container {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+}
+.container {
+    max-width: 800px;
+    margin: auto;
+    padding: 20px;
+}
+.chat-message {
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+.user-message {
+    background-color: #f0f2f5;
+}
+.bot-message {
+    background-color: #e3f2fd;
+}
+"""
+
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("""
+    # 🎬 Personalized Movie Recommender
+    
+    안녕하세요! 당신만을 위한 영화 추천 시스템입니다. 
+    선호하는 장르와 현재 기분을 알려주시면, 맞춤형 영화를 추천해드립니다.
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=2):
+            chatbot = gr.Chatbot(
+                height=600,
+                show_copy_button=True,
+                avatar_images=("👤", "🎬"),
+                bubble_full_width=False,
+            )
+            msg = gr.Textbox(
+                placeholder="어떤 영화를 찾고 계신가요?",
+                show_label=False,
+                container=False
+            )
+            with gr.Row():
+                submit = gr.Button("추천 받기", variant="primary")
+                clear = gr.Button("대화 초기화")
+        
+        with gr.Column(scale=1):
+            with gr.Group():
+                gr.Markdown("### 🎯 추천 설정")
+                genre = gr.Dropdown(
+                    choices=["액션", "코미디", "드라마", "로맨스", "스릴러", "SF", "판타지", "애니메이션"],
+                    label="선호하는 장르",
+                    multiselect=True
+                )
+                mood = gr.Dropdown(
+                    choices=["신나는", "감성적인", "긴장감 있는", "편안한", "신비로운"],
+                    label="현재 기분",
+                    multiselect=True
+                )
+            
+            with gr.Group():
+                gr.Markdown("### ⚙️ 고급 설정")
+                system_message = gr.Textbox(
+                    value="You are a friendly movie recommendation assistant. Provide detailed movie recommendations based on user preferences.",
+                    label="시스템 메시지"
+                )
+                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"
+                )
+
+    submit.click(
+        respond,
+        inputs=[
+            msg,
+            chatbot,
+            system_message,
+            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__":