update UI/UX

app.py

@@ -1,12 +1,7 @@
 import gradio as gr
 import requests
-import json
 
-MODAL_ENDPOINT = "https://kim-ju-won--llama4-17b-chat-chat.modal.run"
-
-"""
-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
-"""
+MODAL_ENDPOINT = "https://kim-ju-won--gemma2b-chat-chat.modal.run"
 
 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:
@@ -24,57 +19,36 @@ Your role is to:
 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,
-):
-    # Create system prompt
+def respond(message, history, agent_type, personality, expertise_level, language, genre, mood):
     system_message = create_system_prompt(agent_type, personality, expertise_level, language)
     
-    # Prepare messages for the API
     messages = [{"role": "system", "content": system_message}]
     
-    # Add conversation history
     for val in history:
         if val[0]:
             messages.append({"role": "user", "content": val[0]})
         if val[1]:
             messages.append({"role": "assistant", "content": val[1]})
     
-    # Add current message with genre and mood
     enhanced_message = f"Genre: {genre}\nMood: {mood}\nUser request: {message}"
     messages.append({"role": "user", "content": enhanced_message})
     
-    # Prepare request payload
     payload = {
         "messages": messages,
-        "max_tokens": max_tokens,
-        "temperature": temperature,
-        "top_p": top_p
+        "max_tokens": 512,
+        "temperature": 0.7,
+        "top_p": 0.95
     }
     
     try:
-        # Send request to Modal endpoint
         response = requests.post(
             MODAL_ENDPOINT,
             json=payload,
             headers={"Content-Type": "application/json"}
         )
         response.raise_for_status()
-        
-        # Get response from Modal
         result = response.json()
         return result.get("response", "Sorry, I couldn't process your request.")
-        
     except Exception as e:
         return f"Error: {str(e)}"
 
@@ -92,15 +66,71 @@ def show_settings_changed_info(agent_type, personality, expertise_level, languag
     Chat has been reset. Please start a new conversation with the updated settings.
     """
 
-"""
-For information on how to customize the ChatInterface, peruse the gradio docs: https://www.gradio.app/docs/chatinterface
+# 🌈 완벽한 다크/라이트 모드 CSS
+custom_css = """
+/* 기본 라이트 모드 */
+body, .gradio-container {
+    background-color: #f9f9fb;
+    color: #333;
+}
+.gr-box, .gr-group, .gr-column, .gr-dropdown, .gr-textbox, .gr-markdown {
+    background-color: #ffffff;
+    color: #333;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    box-shadow: 1px 1px 3px rgba(0,0,0,0.05);
+}
+.gr-chatbot {
+    background-color: #f0f0f5;
+    color: #333;
+    border-radius: 10px;
+}
+.gr-button-primary {
+    background-color: #a78bfa !important;
+    color: #fff !important;
+}
+.gr-button-secondary {
+    background-color: #d1c4e9 !important;
+    color: #333 !important;
+}
+.gr-dropdown select, .gr-textbox textarea {
+    background-color: #ffffff;
+    color: #333;
+}
+
+/* 다크 모드 */
+@media (prefers-color-scheme: dark) {
+    body, .gradio-container {
+        background-color: #121212;
+        color: #e0e0e0;
+    }
+    .gr-box, .gr-group, .gr-column, .gr-dropdown, .gr-textbox, .gr-markdown {
+        background-color: #1e1e1e;
+        color: #e0e0e0;
+        border: 1px solid #333;
+    }
+    .gr-chatbot {
+        background-color: #1a1a1a;
+        color: #e0e0e0;
+    }
+    .gr-button-primary {
+        background-color: #ff7847 !important;
+        color: #fff !important;
+    }
+    .gr-button-secondary {
+        background-color: #555 !important;
+        color: #fff !important;
+    }
+    .gr-dropdown select, .gr-textbox textarea {
+        background-color: #1e1e1e;
+        color: #e0e0e0;
+    }
+}
 """
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=custom_css) as demo:
     gr.Markdown("""
     # 🎬 Personalized Movie Recommender
-    
-    Welcome to your personalized movie recommendation system!
     Tell us your preferred genres and current mood, and we'll recommend the perfect movies for you.
     """)
     
@@ -120,70 +150,54 @@ with gr.Blocks() as demo:
                     min_width=400
                 )
                 submit = gr.Button("Send Chat", variant="primary", min_width=100)
-                clear = gr.Button("Clear Chat", min_width=100)
+                clear = gr.Button("Clear Chat", variant="secondary", min_width=100)
         
         with gr.Column(scale=1):
             with gr.Group():
                 gr.Markdown("### 🎯 Recommendation Settings")
                 genre = gr.Dropdown(
-                    choices=["Action", "Comedy", "Drama", "Romance", "Thriller", "Sci-Fi", "Fantasy", "Animation"],
-                    label="Preferred Genres",
+                    choices=[
+                        "🎬 Action", "😂 Comedy", "🎭 Drama", "💕 Romance", 
+                        "🔪 Thriller", "👽 Sci-Fi", "🧚 Fantasy", "🎨 Animation"
+                    ],
+                    label="Preferred Genres 🎥",
                     multiselect=True
                 )
                 mood = gr.Dropdown(
-                    choices=["Exciting", "Emotional", "Suspenseful", "Relaxing", "Mysterious"],
-                    label="Current Mood",
+                    choices=[
+                        "⚡ Exciting", "😭 Emotional", "😱 Suspenseful", 
+                        "😌 Relaxing", "🕵️ Mysterious"
+                    ],
+                    label="Current Mood 🌈",
                     multiselect=True
                 )
             
             with gr.Group():
                 gr.Markdown("### 🤖 Agent Settings")
                 agent_type = gr.Dropdown(
-                    choices=["Expert", "Friend", "Film Critic", "Curator"],
-                    label="Agent Type",
-                    value="Expert"
+                    choices=["🎓 Expert", "👯 Friend", "🎥 Film Critic", "🎨 Curator"],
+                    label="Agent Type 🧑‍💼",
+                    value="🎓 Expert"
                 )
                 personality = gr.Dropdown(
-                    choices=["Friendly", "Professional", "Humorous", "Emotional", "Objective"],
-                    label="Personality",
-                    value="Friendly"
+                    choices=[
+                        "😊 Friendly", "💼 Professional", "😆 Humorous", 
+                        "🥺 Emotional", "🔍 Objective"
+                    ],
+                    label="Personality 💫",
+                    value="😊 Friendly"
                 )
                 expertise_level = gr.Dropdown(
-                    choices=["Beginner", "Intermediate", "Expert"],
-                    label="Explanation Level",
-                    value="Intermediate"
+                    choices=["🍼 Beginner", "📚 Intermediate", "🏆 Expert"],
+                    label="Explanation Level 📈",
+                    value="📚 Intermediate"
                 )
                 language = gr.Dropdown(
-                    choices=["English", "Korean", "Japanese"],
-                    label="Response Language",
-                    value="English"
-                )
-            
-            with gr.Group():
-                gr.Markdown("### ⚙️ Advanced Settings")
-                max_tokens = gr.Slider(
-                    minimum=1,
-                    maximum=2048,
-                    value=512,
-                    step=1,
-                    label="Max Tokens"
-                )
-                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"
+                    choices=["🇬🇧 English", "🇰🇷 Korean", "🇯🇵 Japanese"],
+                    label="Response Language 🌐",
+                    value="🇬🇧 English"
                 )
 
-    # Reset chat and show notification when settings change
     for component in [agent_type, personality, expertise_level, language]:
         component.change(
             fn=show_settings_changed_info,
@@ -203,9 +217,6 @@ with gr.Blocks() as demo:
             personality,
             expertise_level,
             language,
-            max_tokens,
-            temperature,
-            top_p,
             genre,
             mood,
         ],
@@ -219,6 +230,5 @@ with gr.Blocks() as demo:
     
     clear.click(lambda: None, None, chatbot, queue=False)
 
-
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()