Update app.py

app.py

@@ -1,15 +1,8 @@
-# yellowflash_topbar_models.py
-# - Model dropdown top-left
-# - Title top-right
-# - Large always-visible chatbox (full output area)
-# - Bottom input row fixed with 90/10 split and ➤ send icon
-# - Gemini + LLaMA-4 support, hardcoded keys for testing (DO NOT PUBLISH)
-
-import time, requests, gradio as gr
-
-# ==========================
-# HARDCODED TEST KEYS (TESTING ONLY)
-# ==========================
+import gradio as gr, requests, time
+
+# =================
+# HARDCODED KEYS (TESTING)
+# =================
 GEMINI_KEY = "AIzaSyAPfDiu2V_aD6un00qHt5bkISm6C0Pkx7o"
 GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent"
 
@@ -17,9 +10,10 @@ GROQ_KEY = "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"
 GROQ_URL = "https://api.groq.com/openai/v1/chat/completions"
 GROQ_MODEL = "meta-llama/llama-4-scout-17b-16e-instruct"
 
-# ==========================
-# Helpers
-# ==========================
+
+# =================
+# API Call Helpers
+# =================
 def post_with_retries(url, headers, payload, timeout=20, max_retries=3):
     for i in range(max_retries):
         try:
@@ -27,29 +21,31 @@ def post_with_retries(url, headers, payload, timeout=20, max_retries=3):
             r.raise_for_status()
             return r
         except Exception:
-            if i == max_retries-1:
+            if i == max_retries - 1:
                 raise
             time.sleep(0.7 + i)
 
+
 def call_gemini(api_key, user_message, history):
-    headers = {"Content-Type":"application/json", "x-goog-api-key": api_key}
+    headers = {"Content-Type": "application/json", "x-goog-api-key": api_key}
     contents = []
     for u_disp, a_disp in (history or []):
-        contents.append({"role":"user","parts":[{"text":u_disp}]})
-        contents.append({"role":"model","parts":[{"text":a_disp}]})
-    contents.append({"role":"user","parts":[{"text":user_message}]})
+        contents.append({"role": "user", "parts": [{"text": u_disp}]})
+        contents.append({"role": "model", "parts": [{"text": a_disp}]})
+    contents.append({"role": "user", "parts": [{"text": user_message}]})
     payload = {"contents": contents}
     r = post_with_retries(GEMINI_URL, headers, payload)
     data = r.json()
     return data.get("candidates", [{}])[0].get("content", {}).get("parts", [{}])[0].get("text", "")
 
-def call_llama_via_groq(api_key, model, user_message, history):
+
+def call_llama(api_key, model, user_message, history):
     headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
     messages = []
     for u_disp, a_disp in (history or []):
-        messages.append({"role":"user", "content": u_disp})
-        messages.append({"role":"assistant", "content": a_disp})
-    messages.append({"role":"user", "content": user_message})
+        messages.append({"role": "user", "content": u_disp})
+        messages.append({"role": "assistant", "content": a_disp})
+    messages.append({"role": "user", "content": user_message})
     payload = {"model": model, "messages": messages}
     r = post_with_retries(GROQ_URL, headers, payload)
     data = r.json()
@@ -60,179 +56,58 @@ def call_llama_via_groq(api_key, model, user_message, history):
         return ch.get("text", "")
     return str(data)
 
-# ==========================
-# Chat logic (manual Chatbot)
-# Keep displayed history tuples (You: ... , YellowFlash: ...)
-# ==========================
-def send_message(user_text, chat_history, model_choice):
-    """
-    Inputs:
-      - user_text: raw string from textbox
-      - chat_history: list of tuples (display_user, display_ai)
-      - model_choice: string (dropdown)
-    Returns:
-      - updated chat_history (list of tuples)
-      - clears textbox ("")
-    """
-    if not user_text or not user_text.strip():
-        return chat_history or [], ""
+
+# =================
+# Chat Function
+# =================
+def chat_fn(message, history, model_choice):
     try:
         if model_choice == "Google Gemini 2.0 Flash":
-            reply = call_gemini(GEMINI_KEY, user_text, chat_history or [])
+            reply = call_gemini(GEMINI_KEY, message, history)
         else:
-            reply = call_llama_via_groq(GROQ_KEY, GROQ_MODEL, user_text, chat_history or [])
+            reply = call_llama(GROQ_KEY, GROQ_MODEL, message, history)
     except Exception as e:
         reply = f"Error: {e}"
+    return reply
 
-    # Brand messages for display. Keep tuple format required by gr.Chatbot
-    user_display = f"You: {user_text}"
-    ai_display = f"YellowFlash: {reply}"
-    new_hist = (chat_history or []) + [(user_display, ai_display)]
-    return new_hist, ""
-
-# ==========================
-# CSS + JS
-# - top-left dropdown, top-right title
-# - chatbox full area (always visible)
-# - input row fixed bottom, 90/10 split
-# - z-index and padding to ensure textbox is clickable
-# - MutationObserver auto-scroll
-# ==========================
-CSS = r"""
-/* Base */
-body { margin:0; background:#0d0d0d; color:#fff; font-family:Inter, Arial, sans-serif; }
 
-/* Topbar row: dropdown left, title right */
-#topbar { display:flex; justify-content:space-between; align-items:center; padding:18px 28px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; }
+# =================
+# CSS
+# =================
+CSS = """
+body { margin:0; background:#0d0d0d; color:#fff; font-family:Inter, Arial, sans-serif; }
+#topbar { display:flex; justify-content:space-between; align-items:center; padding:16px 28px; background:#0f0f0f; border-bottom:1px solid #1f1f1f; }
 #title { font-weight:800; color:#ffcc33; font-size:20px; }
 
-/* Make dropdown look compact and flat (left) */
-#modeldd .gr-dropdown { background:transparent !important; border:1px solid #2b2b2b !important; color:#ddd !important; padding:10px 12px !important; border-radius:8px !important; width:220px !important; box-shadow:none !important; }
-
-/* Chatbox container: large and centered */
-.chat-wrapper { padding:20px; }
-.chatbox {
-  width:96%;
-  max-width:1400px;
-  height: calc(100vh - 180px); /* leave space for topbar + input row */
-  margin: 16px auto;
-  background:#151515;
-  border-radius:10px;
-  border:1px solid #262626;
-  padding:20px;
-  box-sizing:border-box;
-  overflow:auto;
-  position:relative;
-  z-index:1;
-}
-
-/* Ensure chatbox always visible even when empty */
-.chatbox:empty::after {
-  content: "";
-  display:block;
-  height:0;
-}
-
-/* Input row fixed bottom: centered, 90/10 split */
-#inputrow {
-  position:fixed;
-  left:0; right:0;
-  bottom:28px;
-  width:96%;
-  max-width:1400px;
-  margin:0 auto;
-  display:flex;
-  gap:12px;
-  align-items:center;
-  z-index:2147483647;
-  pointer-events:auto;
-}
-
-/* Textbox (90%) */
-#msgbox {
-  flex:9;
-  min-height:56px;
-  border-radius:12px;
-  background:#0e0e0e;
-  color:#ddd;
-  padding:14px;
-  border:1px solid #262626;
-  resize:none;
-  font-size:15px;
-  pointer-events:auto;
-}
-
-/* Send button (10%) */
-#sendbtn {
-  flex:1;
-  height:56px;
-  border-radius:12px;
-  background:#2cc3ff;
-  color:#000;
-  border:none;
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  font-size:20px;
-  cursor:pointer;
-  pointer-events:auto;
-}
-
-/* Gradio message bubble neutralization */
-.gradio-chatbot .message { background:transparent !important; border:none !important; padding:0 !important; color:inherit !important; pointer-events:auto; }
-
-/* Small screens */
-@media (max-width:900px) {
-  #modeldd .gr-dropdown { width:45vw !important; }
-  .chatbox { width:96%; height: calc(100vh - 220px); }
-  #inputrow { width:96%; bottom:18px; }
-}
-"""
+/* Chatbox fullscreen */
+.chatbot { height: calc(100vh - 160px) !important; }
 
-JS = """
-<script>
-(function(){
-  // auto-scroll the chatbox whenever its content changes
-  function setup() {
-    const cb = document.querySelector('.chatbox');
-    if (!cb) return setTimeout(setup, 200);
-    const obs = new MutationObserver(() => { cb.scrollTop = cb.scrollHeight; });
-    obs.observe(cb, {childList:true, subtree:true, characterData:true});
-    cb.scrollTop = cb.scrollHeight;
-  }
-  if (document.readyState === "complete" || document.readyState === "interactive") setup();
-  else document.addEventListener("DOMContentLoaded", setup);
-})();
-</script>
+/* Send button arrow */
+button.lg\\:secondary { background:#2cc3ff !important; border-radius:8px !important; color:#000 !important; font-size:18px !important; }
+button.lg\\:secondary::after { content:"➤"; font-size:18px; }
 """
 
-# ==========================
-# Build Gradio UI (Blocks)
-# ==========================
+
+# =================
+# Build UI
+# =================
 with gr.Blocks(css=CSS, title="⚡ YellowFlash.ai") as demo:
-    # Top bar: model dropdown left, title right (no extra inputs section)
+    # Topbar
     with gr.Row(elem_id="topbar"):
-        model_dd = gr.Dropdown(choices=["Google Gemini 2.0 Flash", "Meta LLaMA 4"],
-                               value="Google Gemini 2.0 Flash",
-                               show_label=False,
-                               elem_id="modeldd")
+        model_dd = gr.Dropdown(
+            choices=["Google Gemini 2.0 Flash", "Meta LLaMA 4"],
+            value="Google Gemini 2.0 Flash",
+            show_label=False,
+        )
         gr.HTML("<div id='title'>⚡ YellowFlash.ai</div>")
 
-    # Chat display area (always visible, even empty)
-    with gr.Column(elem_classes="chat-wrapper"):
-        chat_display = gr.Chatbot(elem_classes="chatbox", label="", show_label=False)
-
-    # Input row fixed at bottom (90/10 split)
-    with gr.Row(elem_id="inputrow"):
-        txt = gr.Textbox(placeholder="Type a message...", elem_id="msgbox", show_label=False, lines=2)
-        send = gr.Button("➤", elem_id="sendbtn")
-
-    # Wire events: outputs [chat_display, txt] -> update chat and clear textbox
-    send.click(send_message, inputs=[txt, chat_display, model_dd], outputs=[chat_display, txt])
-    txt.submit(send_message, inputs=[txt, chat_display, model_dd], outputs=[chat_display, txt])
-
-    # inject JS for auto-scroll
-    gr.HTML(JS)
+    # Chat Interface (native, not manual textbox)
+    gr.ChatInterface(
+        fn=lambda msg, hist: chat_fn(msg, hist, model_dd.value),
+        chatbot=gr.Chatbot(elem_classes="chatbot"),
+        textbox=gr.Textbox(placeholder="Type a message...", container=False),
+        additional_inputs=[model_dd],
+    )
 
 demo.queue()
 demo.launch(share=True)