Update app.py

app.py

@@ -1,13 +1,7 @@
 """
 Phi-2 Chatbot Playground — Hugging Face Space
 ==============================================
-A Gradio-based playground for Microsoft's Phi-2 (2.7B) model.
-Features:
-  - System instruction editor
-  - Training data / few-shot examples editor
-  - Temperature & max token controls
-  - Chat interface with history
-  - Clear conversation button
+Compatible with Gradio 6.x (messages format) + CPU deployment.
 """
 
 import gradio as gr
@@ -34,8 +28,8 @@ print("Model loaded on CPU!")
 
 def build_prompt(system_instruction: str, training_data: str, history: list, user_input: str) -> str:
     """
-    Assembles a Phi-2 compatible prompt.
-    Phi-2 was trained on the 'Instruct / Output' format.
+    Assembles a Phi-2 compatible prompt from Gradio 6 messages format.
+    history = [{"role": "user"|"assistant", "content": "..."}]
     """
     prompt = ""
 
@@ -45,8 +39,14 @@ def build_prompt(system_instruction: str, training_data: str, history: list, use
     if training_data.strip():
         prompt += f"{training_data.strip()}\n\n"
 
-    for human_msg, ai_msg in history:
-        prompt += f"Instruct: {human_msg}\nOutput: {ai_msg}\n"
+    # Pair up messages from history
+    i = 0
+    while i < len(history) - 1:
+        if history[i]["role"] == "user" and history[i+1]["role"] == "assistant":
+            prompt += f"Instruct: {history[i]['content']}\nOutput: {history[i+1]['content']}\n"
+            i += 2
+        else:
+            i += 1
 
     prompt += f"Instruct: {user_input}\nOutput:"
     return prompt
@@ -64,11 +64,11 @@ def generate_response(
     repetition_penalty: float,
 ):
     if not user_input.strip():
-        return history, history
+        return history, ""
 
     prompt = build_prompt(system_instruction, training_data, history, user_input)
 
-    inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
+    inputs = tokenizer(prompt, return_tensors="pt")
     input_len = inputs["input_ids"].shape[1]
 
     with torch.no_grad():
@@ -78,7 +78,7 @@ def generate_response(
             temperature=float(temperature),
             top_p=float(top_p),
             repetition_penalty=float(repetition_penalty),
-            do_sample=temperature > 0,
+            do_sample=temperature > 0.01,
             pad_token_id=tokenizer.eos_token_id,
             eos_token_id=tokenizer.eos_token_id,
         )
@@ -86,18 +86,22 @@ def generate_response(
     generated_ids = output[0][input_len:]
     reply = tokenizer.decode(generated_ids, skip_special_tokens=True)
 
-    # Clean output — stop at next "Instruct:" if model keeps going
+    # Stop at next "Instruct:" if model keeps generating
     reply = reply.split("Instruct:")[0].strip()
 
-    history = history + [[user_input, reply]]
-    return history, history
+    # Gradio 6 messages format
+    history = history + [
+        {"role": "user",      "content": user_input},
+        {"role": "assistant", "content": reply},
+    ]
+    return history, ""
 
 
 def clear_chat():
-    return [], []
+    return [], ""
 
 
-# ── UI ────────────────────────────────────────────────────────────────────────
+# ── Defaults ──────────────────────────────────────────────────────────────────
 
 DEFAULT_SYSTEM = (
     "You are a helpful, respectful, and honest assistant. "
@@ -111,6 +115,8 @@ Output: 2 + 2 equals 4.
 Instruct: What is the capital of Japan?
 Output: The capital of Japan is Tokyo."""
 
+# ── UI ────────────────────────────────────────────────────────────────────────
+
 with gr.Blocks(
     title="Phi-2 Playground",
     theme=gr.themes.Soft(
@@ -119,8 +125,7 @@ with gr.Blocks(
         font=gr.themes.GoogleFont("IBM Plex Mono"),
     ),
     css="""
-    #chatbot { height: 480px; overflow-y: auto; }
-    .gr-button-primary { background: #7c3aed !important; }
+    #chatbot { height: 460px; overflow-y: auto; }
     footer { display: none !important; }
     .title-block { text-align: center; padding: 12px 0 4px 0; }
     .title-block h1 { font-size: 2rem; font-weight: 800; letter-spacing: -1px; }
@@ -128,11 +133,10 @@ with gr.Blocks(
     """,
 ) as demo:
 
-    # ── Title ──
     gr.HTML("""
     <div class="title-block">
       <h1>Φ Phi-2 Playground</h1>
-      <p>microsoft/phi-2 · 2.7B Parameters · Hugging Face Transformers</p>
+      <p>microsoft/phi-2 · 2.7B Parameters · CPU · Gradio 6</p>
     </div>
     """)
 
@@ -140,9 +144,16 @@ with gr.Blocks(
 
     with gr.Tabs():
 
-        # ── Tab 1: Chat ──
+        # ── Tab 1: Chat ───────────────────────────────────────────────────���───
         with gr.TabItem("💬 Chat"):
-            chatbot = gr.Chatbot(elem_id="chatbot", label="Conversation", bubble_full_width=False)
+
+            chatbot = gr.Chatbot(
+                elem_id="chatbot",
+                label="Conversation",
+                type="messages",          # Gradio 6 messages format
+                bubble_full_width=False,
+                show_label=False,
+            )
 
             with gr.Row():
                 user_input = gr.Textbox(
@@ -150,22 +161,19 @@ with gr.Blocks(
                     label="Your message",
                     lines=2,
                     scale=8,
+                    show_label=False,
                 )
                 send_btn = gr.Button("Send ➤", variant="primary", scale=1, min_width=80)
 
             clear_btn = gr.Button("🗑️ Clear Conversation", variant="secondary")
 
-            gr.Markdown(
-                "_Press **Enter** to send. Use **Shift+Enter** for a new line._",
-                elem_id="hint",
-            )
+            gr.Markdown("_⚠️ CPU mode: responses may take 1–3 minutes. Please be patient!_")
 
-        # ── Tab 2: System & Data ──
+        # ── Tab 2: Instructions & Data ────────────────────────────────────────
         with gr.TabItem("⚙️ Instructions & Data"):
+
             gr.Markdown("### 🧠 System Instruction")
-            gr.Markdown(
-                "This text is prepended to every prompt to define the model's role and behavior."
-            )
+            gr.Markdown("Prepended to every prompt — defines the assistant's persona and behavior.")
             system_instruction = gr.Textbox(
                 value=DEFAULT_SYSTEM,
                 lines=4,
@@ -176,54 +184,73 @@ with gr.Blocks(
             gr.Markdown("---")
             gr.Markdown("### 📄 Few-Shot / Training Data")
             gr.Markdown(
-                "Provide example `Instruct: … / Output: …` pairs to guide the model's response style."
-                " These act as in-context few-shot examples."
+                "Add `Instruct: … / Output: …` example pairs here to guide the model's style. "
+                "These act as in-context few-shot examples injected before your message."
             )
             training_data = gr.Textbox(
                 value=DEFAULT_TRAINING_DATA,
                 lines=10,
-                label="Training / Few-Shot Examples",
+                label="Few-Shot Examples",
                 placeholder="Instruct: What is X?\nOutput: X is …",
             )
 
             with gr.Accordion("📋 Quick Templates", open=False):
-                gr.Markdown("Click a template to load it into the Training Data box.")
+                gr.Markdown("Click a template below to load it into the few-shot box.")
                 with gr.Row():
-                    tpl_qa = gr.Button("Q&A")
-                    tpl_code = gr.Button("Code Assistant")
+                    tpl_qa      = gr.Button("Q&A")
+                    tpl_code    = gr.Button("Code Assistant")
                     tpl_summary = gr.Button("Summarizer")
 
             tpl_qa.click(
-                fn=lambda: "Instruct: What is the boiling point of water?\nOutput: Water boils at 100°C (212°F) at sea level.\n\nInstruct: Who wrote Romeo and Juliet?\nOutput: Romeo and Juliet was written by William Shakespeare.",
+                fn=lambda: (
+                    "Instruct: What is the boiling point of water?\n"
+                    "Output: Water boils at 100°C (212°F) at sea level.\n\n"
+                    "Instruct: Who wrote Romeo and Juliet?\n"
+                    "Output: Romeo and Juliet was written by William Shakespeare."
+                ),
                 outputs=training_data,
             )
             tpl_code.click(
-                fn=lambda: "Instruct: Write a Python function to check if a number is prime.\nOutput: def is_prime(n):\n    if n < 2: return False\n    for i in range(2, int(n**0.5)+1):\n        if n % i == 0: return False\n    return True\n\nInstruct: How do I reverse a list in Python?\nOutput: You can reverse a list using list.reverse() in-place or list[::-1] to get a new reversed list.",
+                fn=lambda: (
+                    "Instruct: Write a Python function to check if a number is prime.\n"
+                    "Output: def is_prime(n):\n"
+                    "    if n < 2: return False\n"
+                    "    for i in range(2, int(n**0.5)+1):\n"
+                    "        if n % i == 0: return False\n"
+                    "    return True\n\n"
+                    "Instruct: How do I reverse a list in Python?\n"
+                    "Output: Use list[::-1] to get a reversed copy, or list.reverse() to reverse in place."
+                ),
                 outputs=training_data,
             )
             tpl_summary.click(
-                fn=lambda: "Instruct: Summarize the following in one sentence.\nText: The Amazon rainforest is the world's largest tropical rainforest, covering much of northwestern Brazil.\nOutput: The Amazon rainforest is the world's largest tropical rainforest, located mainly in Brazil.",
+                fn=lambda: (
+                    "Instruct: Summarize the following in one sentence.\n"
+                    "Text: The Amazon rainforest covers much of northwestern Brazil and is the world's largest tropical rainforest.\n"
+                    "Output: The Amazon rainforest is the world's largest tropical rainforest, located mainly in Brazil."
+                ),
                 outputs=training_data,
             )
 
-        # ── Tab 3: Parameters ──
+        # ── Tab 3: Parameters ─────────────────────────────────────────────────
         with gr.TabItem("🎛️ Parameters"):
+
             gr.Markdown("### Generation Parameters")
 
             temperature = gr.Slider(
                 0.01, 2.0, value=0.7, step=0.01,
                 label="Temperature",
-                info="Higher = more creative / random. Lower = more deterministic.",
+                info="Higher = more creative. Lower = more focused.",
             )
             max_new_tokens = gr.Slider(
-                32, 1024, value=256, step=16,
+                32, 512, value=200, step=16,
                 label="Max New Tokens",
-                info="Maximum number of tokens the model will generate.",
+                info="Max tokens to generate. Keep low on CPU for faster responses.",
             )
             top_p = gr.Slider(
                 0.1, 1.0, value=0.95, step=0.01,
                 label="Top-p (Nucleus Sampling)",
-                info="Keeps only the top probability mass tokens.",
+                info="Restricts sampling to top probability mass.",
             )
             repetition_penalty = gr.Slider(
                 1.0, 2.0, value=1.1, step=0.05,
@@ -234,6 +261,7 @@ with gr.Blocks(
             gr.Markdown("---")
             gr.Markdown("""
 **Model Details**
+
 | Property | Value |
 |---|---|
 | Model | `microsoft/phi-2` |
@@ -241,6 +269,7 @@ with gr.Blocks(
 | Architecture | Transformer Decoder |
 | Context Length | 2048 tokens |
 | License | MIT |
+| Runtime | CPU (float32) |
 
 [📄 Model Card on Hugging Face](https://huggingface.co/microsoft/phi-2)
 """)
@@ -252,15 +281,20 @@ with gr.Blocks(
         system_instruction, training_data,
         temperature, max_new_tokens, top_p, repetition_penalty,
     ]
-    gen_outputs = [chatbot, state]
+    gen_outputs = [state, user_input]
+
+    def sync_chatbot(history, _user_input):
+        return history
 
     send_btn.click(generate_response, inputs=gen_inputs, outputs=gen_outputs).then(
-        lambda: "", outputs=user_input
+        fn=lambda h: h, inputs=state, outputs=chatbot
     )
     user_input.submit(generate_response, inputs=gen_inputs, outputs=gen_outputs).then(
-        lambda: "", outputs=user_input
+        fn=lambda h: h, inputs=state, outputs=chatbot
+    )
+    clear_btn.click(clear_chat, outputs=[state, user_input]).then(
+        fn=lambda h: h, inputs=state, outputs=chatbot
     )
-    clear_btn.click(clear_chat, outputs=[chatbot, state])
 
 
 # ── Launch ────────────────────────────────────────────────────────────────────