Update app.py

app.py

@@ -14,25 +14,19 @@ model      = model.to(device)
 print("Model ready ✅")
 
 # ── 2. Summarization Function ──────────────────────────────────────
-def summarize_text(user_input, history, max_len, min_len, bullet_mode):
+def summarize_text(user_input, max_len, min_len, bullet_mode, chat_html):
     user_input = user_input.strip()
 
     if not user_input:
-        history = history + [
-            {"role": "assistant", "content": "⚠️ Please enter some text to summarize."}
-        ]
-        return history, history
+        return chat_html, ""
 
     if len(user_input.split()) < 30:
-        history = history + [
-            {"role": "user",      "content": user_input},
-            {"role": "assistant", "content": (
-                "👋 Hello! I'm your Text Summarizer.\n\n"
-                "Paste any long article or document (30+ words) and I'll summarize it.\n\n"
-                "Use the settings below to adjust length and format."
-            )}
-        ]
-        return history, history
+        bot_msg = (
+            "👋 Hello! I'm your Text Summarizer. "
+            "Paste any long article or document (30+ words) and I'll summarize it."
+        )
+        new_html = chat_html + build_message(user_input, bot_msg)
+        return new_html, ""
 
     try:
         inputs = tokenizer(
@@ -56,41 +50,50 @@ def summarize_text(user_input, history, max_len, min_len, bullet_mode):
 
         if bullet_mode:
             sentences = summary.replace("?", ".").replace("!", ".").split(". ")
-            bullets   = "\n".join(
-                f"• {s.strip().capitalize()}"
+            bullets   = "".join(
+                f"<li>{s.strip().capitalize()}</li>"
                 for s in sentences if s.strip()
             )
-            out = f"📌 Summary (Bullet Points):\n\n{bullets}"
+            out = f"📌 <b>Summary (Bullet Points):</b><br><ul>{bullets}</ul>"
         else:
-            out = f"📌 Summary:\n\n{summary}"
+            out = f"📌 <b>Summary:</b><br><br>{summary}"
 
         orig_words = len(user_input.split())
         summ_words = len(summary.split())
         reduction  = round((1 - summ_words / orig_words) * 100, 1)
         out += (
-            f"\n\n---"
-            f"\n📊 Original: {orig_words} words → "
+            f"<br><br><hr>"
+            f"<small>📊 Original: {orig_words} words → "
             f"Summary: {summ_words} words | "
-            f"Reduced by {reduction}%"
+            f"Reduced by {reduction}%</small>"
         )
 
-        label = user_input[:80] + "..." if len(user_input) > 80 else user_input
-        history = history + [
-            {"role": "user",      "content": label},
-            {"role": "assistant", "content": out}
-        ]
+        label = user_input[:100] + "..." if len(user_input) > 100 else user_input
+        new_html = chat_html + build_message(label, out)
 
     except Exception as e:
-        history = history + [
-            {"role": "user",      "content": user_input[:60] + "..."},
-            {"role": "assistant", "content": f"❌ Error: {str(e)}"}
-        ]
+        new_html = chat_html + build_message(user_input[:60], f"❌ Error: {str(e)}")
+
+    return new_html, ""
+
 
-    return history, history
+def build_message(user_text, bot_text):
+    return f"""
+    <div style='margin:10px 0; padding:10px; background:#1e1e2e; border-radius:8px;'>
+        <div style='background:#2a2a3e; padding:8px 12px; border-radius:6px; margin-bottom:8px;'>
+            <b style='color:#a0a0ff;'>You:</b><br>
+            <span style='color:#e0e0e0;'>{user_text}</span>
+        </div>
+        <div style='background:#1a3a2a; padding:8px 12px; border-radius:6px;'>
+            <b style='color:#80ff80;'>Summarizer:</b><br>
+            <span style='color:#e0e0e0;'>{bot_text}</span>
+        </div>
+    </div>
+    """
 
 
 def clear_chat():
-    return [], []
+    return "", ""
 
 
 # ── 3. Gradio UI ───────────────────────────────────────────────────
@@ -104,26 +107,29 @@ with gr.Blocks(title="Text Summarizer") as demo:
 
     with gr.Row():
 
+        # Left — Chat
         with gr.Column(scale=7):
-            chatbot = gr.Chatbot(
-                height=450,
-                type="messages"   # ✅ works in gradio 4.44.2
+
+            # Chat display using HTML (works in ALL gradio versions)
+            chat_display = gr.HTML(
+                value="<div style='height:400px; overflow-y:auto; padding:10px; "
+                      "background:#12121f; border-radius:8px; color:#ccc;'>"
+                      "💬 Your summaries will appear here...</div>"
             )
-            state = gr.State([])
+            chat_state = gr.State("")
 
+            txt_input = gr.Textbox(
+                placeholder="Paste your article, report, or any long text here...",
+                show_label=False,
+                lines=4
+            )
             with gr.Row():
-                txt_input = gr.Textbox(
-                    placeholder="Paste your article, report, or any long text here...",
-                    show_label=False,
-                    lines=3,
-                    scale=8
-                )
-                with gr.Column(scale=2):
-                    submit_btn = gr.Button("Summarize", variant="primary")
-                    clear_btn  = gr.Button("Clear",     variant="secondary")
+                submit_btn = gr.Button("✨ Summarize", variant="primary")
+                clear_btn  = gr.Button("🗑️ Clear",    variant="secondary")
 
+        # Right — Settings
         with gr.Column(scale=3):
-            gr.Markdown("### Settings")
+            gr.Markdown("### ⚙️ Settings")
             max_length = gr.Slider(
                 minimum=50, maximum=300,
                 value=130, step=10,
@@ -135,31 +141,31 @@ with gr.Blocks(title="Text Summarizer") as demo:
                 label="Min Summary Length (tokens)"
             )
             bullet_mode = gr.Checkbox(
-                label="Bullet Point Mode",
+                label="🔵 Bullet Point Mode",
                 value=False
             )
             gr.Markdown("""
             ---
-            Tips:
-            - Works best with 100 to 1000 word inputs
+            **💡 Tips:**
+            - Works best with 100–1000 word inputs
             - Articles, news, reports, essays
             - Toggle Bullet Mode for point wise output
             ---
-            Model: distilbart-cnn-12-6
-            Device: CPU
+            **Model:** distilbart-cnn-12-6
+            **Device:** CPU
             """)
 
     submit_btn.click(
         summarize_text,
-        inputs=[txt_input, state, max_length, min_length, bullet_mode],
-        outputs=[chatbot, state]
+        inputs=[txt_input, max_length, min_length, bullet_mode, chat_state],
+        outputs=[chat_display, txt_input]
     )
     txt_input.submit(
         summarize_text,
-        inputs=[txt_input, state, max_length, min_length, bullet_mode],
-        outputs=[chatbot, state]
+        inputs=[txt_input, max_length, min_length, bullet_mode, chat_state],
+        outputs=[chat_display, txt_input]
     )
-    clear_btn.click(clear_chat, outputs=[chatbot, state])
+    clear_btn.click(clear_chat, outputs=[chat_display, chat_state])
 
 # ── 4. Launch ──────────────────────────────────────────────────────
 demo.launch(server_name="0.0.0.0", server_port=7860)