Update app.py

app.py

@@ -1,15 +1,29 @@
 import gradio as gr
+from huggingface_hub import InferenceClient
 
-# --- Normal Chatbot ---
-def respond(message, history):
-    history = history + [(message, f"Echo: {message}")]
-    return "", history
+# --- MAIN CHATBOT (Kpop) ---
+client = InferenceClient("microsoft/phi-4")
 
-# --- Quiz Bot ---
+def respond(message, history):
+    messages = [{"role": "system", "content": "You are a friendly kpop expert chatbot."}]
+    
+    if history:
+        messages.extend(history)
+        
+    messages.append({"role": "user", "content": message})
+    
+    response = client.chat_completion(
+        messages,
+        max_tokens=1000
+    )
+    
+    return "", history + [(message, response['choices'][0]['message']['content'].strip())]
+
+# --- QUIZ BOT ---
 quiz_questions = [
-    ("What is the capital of France?", "Paris"),
-    ("2 + 2 = ?", "4"),
-    ("What is the largest planet in our solar system?", "Jupiter")
+    ("What is the capital of South Korea?", "Seoul"),
+    ("Which K-pop group sings 'Dynamite'?", "BTS"),
+    ("Who is known as the 'Nation's Girl Group' in Korea?", "Girls' Generation")
 ]
 
 def quiz_bot(answer, state):
@@ -27,45 +41,54 @@ def quiz_bot(answer, state):
 
     return "", [(question, feedback)], (q_index, score)
 
-with gr.Blocks() as demo:
-    # --- Tab 1: Normal Chatbot ---
+# --- TEXT FOR INFORMATION TAB ---
+title = "# 🎤 K-pop Chatbot"
+topics = """👋 Hey K-pop fan!  
+Whether you’re new to the fandom or a longtime stan, I’m your ultimate K-pop buddy here to spill all the tea ☕, trivia 🧠, and facts 📚 about your favorite groups and idols! 🌟  
+
+💜 Ask me to recommend artists similar to your faves.  
+🎧 Learn about K-pop history, trends, and styles.  
+🚀 Dive into the colorful, energetic world of K-pop!  
+"""
+
+# --- THEME ---
+chat_theme = gr.themes.Soft(
+    primary_hue="pink",
+    secondary_hue="rose",
+    neutral_hue="gray",
+    spacing_size="lg",
+    radius_size="lg"
+).set(
+    input_background_fill="*neutral_50",
+    input_border_color_focus="*primary_300",
+    button_primary_background_fill="*primary_500",
+    button_primary_background_fill_hover="*primary_400"
+)
+
+# --- APP WITH TABS ---
+with gr.Blocks(theme=chat_theme) as demo:
     with gr.Tab("Chat"):
-        chatbot = gr.Chatbot()
+        gr.Markdown(title)
+        gr.Chatbot(height=400, elem_id="kpop_chat").style(height=400)
         msg = gr.Textbox(label="Your message")
-        clear = gr.Button("Clear Chat")
+        state = gr.State([])
+        msg.submit(respond, [msg, state], [msg, state])
 
-        msg.submit(respond, [msg, chatbot], [msg, chatbot])
-        clear.click(lambda: None, None, chatbot, queue=False)
-
-    # --- Tab 2: Quiz Bot ---
     with gr.Tab("Quiz"):
         quiz_chat = gr.Chatbot()
         quiz_input = gr.Textbox(label="Your answer")
         start_button = gr.Button("Start Quiz")
+        quiz_state = gr.State((0, 0))
 
-        quiz_state = gr.State((0, 0))  # (question_index, score)
-
-        # Start quiz with first question
         start_button.click(
             lambda: [("", [(quiz_questions[0][0], "Type your answer below")]), (0, 0)],
             None,
             [quiz_input, quiz_chat, quiz_state]
         )
-
         quiz_input.submit(quiz_bot, [quiz_input, quiz_state], [quiz_input, quiz_chat, quiz_state])
 
-    # --- Tab 3: Information Section ---
     with gr.Tab("Information"):
-        gr.Markdown("""
-        ## ℹ️ Information
-        Welcome to the chatbot app!  
-        - **Chat** tab: Talk to the bot freely.  
-        - **Quiz** tab: Test your knowledge with fun questions.  
-        - **Information** tab: Read instructions, rules, or any helpful content here.
-
-        **Tip:** You can customize this section with HTML, Markdown, or even images.
-        """)
-        gr.Image("https://huggingface.co/front/assets/huggingface_logo-noborder.svg", label="Example Image")
-
-demo.launch()
+        gr.Markdown("## ℹ️ About This App")
+        gr.Markdown(topics)
 
+demo.launch(ssr_mode=False)