Create app.py

app.py

@@ -0,0 +1,195 @@
+import time
+import html
+from datetime import datetime
+import gradio as gr
+import torch
+from transformers import RobertaTokenizerFast, RobertaForSequenceClassification
+
+# ---------------------------
+# Load your model directly (NO API, just from HuggingFace hub)
+# ---------------------------
+MODEL_NAME = "Alifjo123/robertaBase_messaging_100k"
+tokenizer = RobertaTokenizerFast.from_pretrained(MODEL_NAME)
+model = RobertaForSequenceClassification.from_pretrained(MODEL_NAME)
+model.eval()
+
+device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+model.to(device)
+
+# ---------------------------
+# Util: classify a single text
+# ---------------------------
+def predict_label(text: str):
+    inputs = tokenizer(text, return_tensors="pt", truncation=True, padding=True).to(device)
+    with torch.no_grad():
+        outputs = model(**inputs)
+        logits = outputs.logits
+        probs = torch.softmax(logits, dim=-1).cpu().numpy()[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
+# ---------------------------
+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"
+        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")
+
+        html_parts.append(f"""
+        <div class="row {side}">
+          <div class="bubble {bubble_class}">
+            <div class="meta">
+              <span class="name">{m["role"]}</span>
+              <span class="time">{ts}</span>
+            </div>
+            <div class="text">{html.escape(m["text"])}</div>
+            <div class="badges">
+              <span class="chip {'chip-unsafe' if m['pred']==1 else 'chip-safe'}">{label}</span>
+              <span class="probs">Safe {safe} · Unsafe {unsafe}</span>
+            </div>
+          </div>
+        </div>
+        """)
+    html_parts.append("</div>")
+    return "\n".join(html_parts)
+
+# ---------------------------
+# Gradio callbacks
+# ---------------------------
+def send_message(role, message, messages):
+    if messages is None:
+        messages = []
+    message = message.strip()
+    if not message:
+        return gr.update(), "", messages  # ignore empty
+
+    pred, safe_pct, unsafe_pct = predict_label(message)
+    messages.append({
+        "role": role,
+        "text": message,
+        "pred": pred,
+        "safe": safe_pct,
+        "unsafe": unsafe_pct,
+        "ts": time.time()
+    })
+    return render_chat(messages), "", messages
+
+def clear_chat():
+    return render_chat([]), []
+
+# ---------------------------
+# Custom CSS (Pink + Blue ONLY, NO WHITE)
+# ---------------------------
+CSS = """
+* { box-sizing: border-box; }
+:root {
+  --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;
+}
+
+body { 
+  background: var(--bg-gradient); 
+  font-family: 'Segoe UI', sans-serif; 
+  color: var(--text-light);
+}
+
+.gradio-container { max-width: 800px !important; margin: 0 auto; }
+
+.header {
+  text-align:center;
+  padding:16px;
+  background: rgba(0,0,0,.35);
+  border-radius: 16px;
+  font-size:22px; font-weight:700;
+  margin-bottom: 12px;
+  color: #fff;
+  box-shadow: 0 6px 18px rgba(0,0,0,.25);
+}
+
+.panel {
+  background: rgba(0,0,0,0.4);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 8px 28px rgba(0,0,0,.35);
+  backdrop-filter: blur(8px);
+}
+
+.chat {
+  padding: 16px;
+  height: 480px;
+  overflow-y: auto;
+}
+
+.row { display:flex; margin: 10px 0; }
+.row.right { justify-content: flex-end; }
+.row.left { justify-content: flex-start; }
+
+.bubble {
+  max-width: 70%;
+  padding: 10px 14px;
+  border-radius: 16px;
+  color: var(--text-light);
+  box-shadow: 0 4px 12px rgba(0,0,0,.25);
+  animation: fadeIn .25s ease-out;
+}
+.bubble-a { background: var(--bubble-a); }
+.bubble-b { background: var(--bubble-b); }
+
+.meta {
+  display:flex; justify-content: space-between;
+  font-size: 12px; opacity:.9; margin-bottom: 4px;
+}
+.text { white-space: pre-wrap; line-height: 1.35; font-size: 14.5px; }
+.badges { margin-top: 6px; font-size: 12px; opacity:.95; display:flex; gap:8px; }
+.chip { padding:2px 8px; border-radius:12px; font-weight:600; }
+.chip-safe { background:#004d40; color:var(--chip-safe); }
+.chip-unsafe { background:#3d0000; color:var(--chip-unsafe); }
+
+.controls {
+  padding: 10px;
+  display:flex; align-items:center; gap:10px;
+  background: rgba(0,0,0,.35);
+}
+.controls .textbox { flex:1; }
+
+.footer-note {
+  font-size: 12px; text-align:center; margin-top: 8px; opacity:.8; color:#eee;
+}
+
+@keyframes fadeIn { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
+"""
+
+# ---------------------------
+# Build UI
+# ---------------------------
+with gr.Blocks(css=CSS) as demo:
+    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()