Update app.py

app.py

@@ -6,7 +6,7 @@ import torch
 from transformers import RobertaTokenizerFast, RobertaForSequenceClassification
 
 # ---------------------------
-# Load your model
+# Load your model directly (NO API, just from HuggingFace hub)
 # ---------------------------
 MODEL_NAME = "Alifjo123/robertaBase_messaging_100k"
 tokenizer = RobertaTokenizerFast.from_pretrained(MODEL_NAME)
@@ -25,27 +25,18 @@ def predict_label(text: str):
         outputs = model(**inputs)
         logits = outputs.logits
         probs = torch.softmax(logits, dim=-1).cpu().numpy()[0]
-
-    # Two-class model: 0=Safe, 1=Unsafe
-    pred = int(probs[1] > probs[0])
+    pred = int(probs[1] > probs[0])  # 1=unsafe, 0=safe
     return pred, probs[0] * 100.0, probs[1] * 100.0
 
 # ---------------------------
-# Render chat HTML from state
+# Render chat (HTML) from state
 # ---------------------------
 def render_chat(messages):
     html_parts = ['<div class="chat">']
     for m in messages:
         side = "right" if m["role"] == "User A" else "left"
         bubble_class = "bubble-a" if side == "right" else "bubble-b"
-
-        if m["pred"] == 0:
-            label = "Safe ✅"
-            chip_class = "chip-safe"
-        else:
-            label = "Unsafe ❌"
-            chip_class = "chip-unsafe"
-
+        label = "Unsafe ❌" if m["pred"] == 1 else "Safe ✅"
         safe = f'{m["safe"]:.1f}%'
         unsafe = f'{m["unsafe"]:.1f}%'
         ts = datetime.fromtimestamp(m["ts"]).strftime("%H:%M")
@@ -59,7 +50,7 @@ def render_chat(messages):
             </div>
             <div class="text">{html.escape(m["text"])}</div>
             <div class="badges">
-              <span class="chip {chip_class}">{label}</span>
+              <span class="chip {'chip-unsafe' if m['pred']==1 else 'chip-safe'}">{label}</span>
               <span class="probs">Safe {safe} · Unsafe {unsafe}</span>
             </div>
           </div>
@@ -76,7 +67,7 @@ def send_message(role, message, messages):
         messages = []
     message = message.strip()
     if not message:
-        return gr.update(), "", messages
+        return gr.update(), "", messages  # ignore empty
 
     pred, safe_pct, unsafe_pct = predict_label(message)
     messages.append({
@@ -93,14 +84,14 @@ def clear_chat():
     return render_chat([]), []
 
 # ---------------------------
-# Custom CSS (Pink + Blue ONLY)
+# Custom CSS (Pink + Blue ONLY, NO WHITE)
 # ---------------------------
 CSS = """
 * { box-sizing: border-box; }
 :root {
-  --bg-gradient: linear-gradient(135deg, #ff99cc, #66ccff);
-  --bubble-a: #ff66b2;
-  --bubble-b: #3399ff;
+  --bg-gradient: linear-gradient(135deg, #ff99cc, #66ccff);  /* pink to blue */
+  --bubble-a: #ff66b2;   /* darker pink */
+  --bubble-b: #3399ff;   /* vibrant blue */
   --text-light: #f9f9f9;
   --chip-safe: #00e676;
   --chip-unsafe: #ff5252;
@@ -175,22 +166,30 @@ body {
   font-size: 12px; text-align:center; margin-top: 8px; opacity:.8; color:#eee;
 }
 
-@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
+@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
 """
 
 # ---------------------------
-# Launch Gradio app
+# Build UI
 # ---------------------------
 with gr.Blocks(css=CSS) as demo:
-    gr.Markdown("<div class='header'>RoBERTa Messaging Safety Chat</div>")
-    chat_box = gr.HTML(render_chat([]), elem_id="chat-box")
-    with gr.Row():
-        role_input = gr.Textbox(label="Role", value="User A", interactive=True)
-        message_input = gr.Textbox(label="Message", placeholder="Type your message here...")
-        send_btn = gr.Button("Send")
-        clear_btn = gr.Button("Clear")
-
-    send_btn.click(send_message, inputs=[role_input, message_input, chat_box], outputs=[chat_box, message_input, chat_box])
-    clear_btn.click(lambda: clear_chat(), outputs=[chat_box, chat_box])
-
-demo.launch()
+    with gr.Group(elem_classes="panel"):
+        gr.HTML('<div class="header">💬 Let\'s Chat</div>')
+
+        chat_html = gr.HTML(render_chat([]), elem_id="chat")
+        messages_state = gr.State([])
+
+        with gr.Row(elem_classes="controls"):
+            role = gr.Dropdown(["User A", "User B"], value="User A", label="Role")
+            msg = gr.Textbox(placeholder="Type a message…", label=None, lines=2, elem_classes="textbox")
+            send = gr.Button("Send", variant="primary")
+            clear = gr.Button("Clear", variant="secondary")
+
+        send.click(send_message, inputs=[role, msg, messages_state], outputs=[chat_html, msg, messages_state])
+        msg.submit(send_message, inputs=[role, msg, messages_state], outputs=[chat_html, msg, messages_state])
+        clear.click(clear_chat, outputs=[chat_html, messages_state])
+
+    gr.Markdown('<div class="footer-note">Model: <code>Alifjo123/robertaBase_messaging_100k</code></div>')
+
+if __name__ == "__main__":
+    demo.launch()