Update app.py

app.py

@@ -27,20 +27,114 @@ def llm_reply(user_text: str) -> str:
 def chat_fn(message, history):
     history = history or []
     history.append({"role": "user", "content": message})
-
     try:
         reply = llm_reply(message)
     except Exception as e:
-        reply = f"⚠️ Router hata: {e}"
-
+        reply = f"⚠️ Hata: {e}"
     history.append({"role": "assistant", "content": reply})
-    return history
-
-with gr.Blocks(title="MaindAI") as demo:
-    gr.Image("logo.png", height=120, show_label=False)
-    gr.Markdown("## 💙 MaindAI — Chat")
-    chatbot = gr.Chatbot(value=[])
-    msg = gr.Textbox(placeholder="Sor...", show_label=False)
-    msg.submit(chat_fn, [msg, chatbot], chatbot)
+    return history, ""
+
+CSS = """
+:root{
+  --bg:#050b1a;
+  --panel:#0a1636;
+  --panel2:#0c1d46;
+  --stroke:rgba(56,189,248,.25);
+  --glow:rgba(56,189,248,.25);
+  --txt:#e6f1ff;
+  --muted:#93c5fd;
+  --blue:#38bdf8;
+}
+body, .gradio-container{
+  background: radial-gradient(1200px 800px at 20% 0%, rgba(56,189,248,.18), transparent 55%),
+              radial-gradient(900px 700px at 90% 20%, rgba(99,102,241,.18), transparent 55%),
+              var(--bg) !important;
+  color: var(--txt) !important;
+}
+#wrap{
+  max-width: 980px;
+  margin: 0 auto;
+}
+#topbar{
+  display:flex; align-items:center; gap:14px;
+  padding: 14px 16px;
+  background: linear-gradient(180deg, rgba(10,22,54,.9), rgba(10,22,54,.55));
+  border: 1px solid var(--stroke);
+  border-radius: 16px;
+  box-shadow: 0 0 0 1px rgba(56,189,248,.06), 0 20px 60px rgba(0,0,0,.35);
+}
+#brand h1{ margin:0; font-size: 20px; letter-spacing:.4px; }
+#brand p{ margin:2px 0 0; color: var(--muted); font-size: 12px; }
+
+#card{
+  margin-top: 14px;
+  padding: 14px;
+  background: linear-gradient(180deg, rgba(12,29,70,.85), rgba(10,22,54,.6));
+  border: 1px solid var(--stroke);
+  border-radius: 18px;
+  box-shadow: 0 0 0 1px rgba(56,189,248,.05), 0 30px 90px rgba(0,0,0,.45);
+}
+
+/* Chat area */
+#chat .wrap{
+  border-radius: 14px;
+}
+.gr-chatbot{
+  background: transparent !important;
+}
+.gr-chatbot .message{
+  border-radius: 14px !important;
+  border: 1px solid rgba(56,189,248,.18) !important;
+  box-shadow: 0 0 20px rgba(56,189,248,.08);
+}
+.gr-chatbot .message.user{
+  background: rgba(56,189,248,.08) !important;
+}
+.gr-chatbot .message.bot{
+  background: rgba(99,102,241,.08) !important;
+}
+
+/* Input row */
+#inputrow{
+  margin-top: 10px;
+  gap: 10px;
+}
+#sendbtn button{
+  background: linear-gradient(90deg, rgba(56,189,248,.95), rgba(99,102,241,.95)) !important;
+  border: 1px solid rgba(56,189,248,.35) !important;
+  border-radius: 14px !important;
+  box-shadow: 0 0 30px rgba(56,189,248,.18);
+}
+#sendbtn button:hover{
+  filter: brightness(1.05);
+}
+textarea, input, .gr-text-input textarea{
+  background: rgba(5,11,26,.55) !important;
+  border: 1px solid rgba(56,189,248,.22) !important;
+  border-radius: 14px !important;
+  color: var(--txt) !important;
+}
+"""
+
+with gr.Blocks(css=CSS, title="MaindAI") as demo:
+    with gr.Column(elem_id="wrap"):
+        with gr.Row(elem_id="topbar"):
+            gr.Image("logo.png", show_label=False, height=58, width=58, container=False)
+            with gr.Column(elem_id="brand"):
+                gr.Markdown("# MAIND AI")
+                gr.Markdown("<p>Neon mavi tema • HF Router • SmolLM3-3B</p>")
+
+        with gr.Column(elem_id="card"):
+            chatbot = gr.Chatbot(value=[], elem_id="chat", height=420)
+            with gr.Row(elem_id="inputrow"):
+                msg = gr.Textbox(
+                    placeholder="Bir şey sor…",
+                    show_label=False,
+                    scale=8
+                )
+                send = gr.Button("Gönder", elem_id="sendbtn", scale=2)
+
+            send.click(chat_fn, [msg, chatbot], [chatbot, msg])
+            msg.submit(chat_fn, [msg, chatbot], [chatbot, msg])
 
 demo.launch()