Update app.py

app.py

@@ -1,35 +1,25 @@
-# yellowflash_final_complete.py
-# Single file: Gemini + LLaMA-4, 90/10 input, branded messages, clickable input, auto-scroll.
-# TESTING ONLY: Hardcoded API keys (do NOT publish)
+# yellowflash_chatinterface_with_dropdown.py
+# Keep ChatInterface (so input is reliably clickable), add model dropdown + styling.
+# TESTING ONLY: Hardcoded keys included (do NOT publish)
 
-import time, requests, gradio as gr
+import gradio as gr
+import requests
+import time
 
-# ==========================
-# HARDCODED TEST KEYS (YOU GAVE THESE)
-# ==========================
+# -------------------------
+# HARDCODED TEST KEYS (testing only)
+# -------------------------
 GEMINI_KEY = "AIzaSyAPfDiu2V_aD6un00qHt5bkISm6C0Pkx7o"
-GROQ_KEY   = "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"
-
-MODELS = {
-    "Google Gemini 2.0 Flash": {
-        "api_url": "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent",
-        "api_key": GEMINI_KEY,
-        "handler": "gemini",
-        "description": "Google's advanced AI model"
-    },
-    "Meta LLaMA 4": {
-        "api_url": "https://api.groq.com/openai/v1/chat/completions",
-        "api_key": GROQ_KEY,
-        "model_name": "meta-llama/llama-4-scout-17b-16e-instruct",
-        "handler": "openai_compat",
-        "description": "Meta's large language model"
-    }
-}
-
-# ==========================
-# HTTP helper with retries
-# ==========================
-def post_with_retries(url, headers, payload, timeout=20, max_retries=3):
+GEMINI_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent"
+
+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"
+
+# -------------------------
+# helper with retries
+# -------------------------
+def post_with_retries(url, headers, payload, timeout=15, max_retries=2):
     for i in range(max_retries):
         try:
             r = requests.post(url, headers=headers, json=payload, timeout=timeout)
@@ -38,205 +28,84 @@ def post_with_retries(url, headers, payload, timeout=20, max_retries=3):
         except Exception as e:
             if i == max_retries - 1:
                 raise
-            time.sleep(1 + i)
-    raise Exception("Max retries exceeded")
-
-# ==========================
-# Model callers
-# ==========================
-def call_gemini(api_url, api_key, history, user_message):
-    headers = {"Content-Type": "application/json", "x-goog-api-key": api_key}
-    # Build contents: we send the displayed text. You can strip "You: " prefixes if desired.
-    contents = []
-    for u_display, a_display in (history or []):
-        contents.append({"role":"user","parts":[{"text":u_display}]})
-        contents.append({"role":"model","parts":[{"text":a_display}]})
-    contents.append({"role":"user","parts":[{"text":user_message}]})
-    payload = {"contents": contents}
-    r = post_with_retries(api_url, headers, payload)
-    data = r.json()
-    return data.get("candidates", [{}])[0].get("content", {}).get("parts", [{}])[0].get("text", "")
-
-def call_openai_compat(api_url, api_key, model_name, history, user_message):
-    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
-    messages = []
-    for u_display, a_display in (history or []):
-        messages.append({"role":"user","content":u_display})
-        messages.append({"role":"assistant","content":a_display})
-    messages.append({"role":"user","content":user_message})
-    payload = {"model": model_name, "messages": messages}
-    r = post_with_retries(api_url, headers, payload)
-    data = r.json()
-    if "choices" in data and data["choices"]:
-        ch = data["choices"][0]
-        # OpenAI-compatible shape:
-        if isinstance(ch.get("message"), dict):
-            return ch["message"].get("content", "")
-        return ch.get("text", "")
-    return str(data)
-
-# ==========================
-# Chat function (Gradio Chatbot expects list of tuples)
-# Returns [ (user_display, ai_display), ... ] , and "" (clear textbox)
-# ==========================
-def chat_fn_send(txt_value, history, model_choice):
-    if not txt_value or not txt_value.strip():
-        return history or [], ""
-    cfg = MODELS.get(model_choice)
-    if not cfg:
-        return history or [], ""
+            time.sleep(0.6 + i)
+
+# -------------------------
+# main chat function used by ChatInterface
+# signature: (message, history, extra_input)
+# -------------------------
+def chat_fn(message, history, model_choice):
+    # keep original ChatInterface behavior: return a string (assistant reply)
     try:
-        if cfg["handler"] == "gemini":
-            reply = call_gemini(cfg["api_url"], cfg["api_key"], history or [], txt_value)
-        else:
-            reply = call_openai_compat(cfg["api_url"], cfg["api_key"], cfg["model_name"], history or [], txt_value)
+        if model_choice == "Google Gemini 2.0 Flash":
+            headers = {"Content-Type": "application/json", "x-goog-api-key": GEMINI_KEY}
+            payload = {"contents": [{"parts": [{"text": message}]}]}
+            resp = post_with_retries(GEMINI_URL, headers, payload)
+            data = resp.json()
+            # safe grab
+            ans = data.get("candidates", [{}])[0].get("content", {}).get("parts", [{}])[0].get("text", "")
+            if not ans:
+                ans = "Gemini returned no content."
+            return ans
+
+        else:  # Meta LLaMA 4 via Groq (OpenAI-compatible)
+            headers = {"Authorization": f"Bearer {GROQ_KEY}", "Content-Type": "application/json"}
+            payload = {"model": GROQ_MODEL, "messages": [{"role": "user", "content": message}]}
+            resp = post_with_retries(GROQ_URL, headers, payload)
+            data = resp.json()
+            # handle both styles
+            if "choices" in data and data["choices"]:
+                ch = data["choices"][0]
+                if isinstance(ch.get("message"), dict):
+                    return ch["message"].get("content", "")
+                return ch.get("text", "")
+            return str(data)
+
     except Exception as e:
-        reply = f"Error: {e}"
-    # Brand messages for display, keep tuple format
-    user_display = f"You: {txt_value}"
-    ai_display   = f"YellowFlash: {reply}"
-    new_history = (history or []) + [(user_display, ai_display)]
-    return new_history, ""  # clear textbox
-
-# ==========================
-# CSS + JS (auto-scroll via MutationObserver)
-# ==========================
-CSS = r"""
-/* Base */
-body { margin:0; background:#0d0d0d; color:#fff; font-family:Inter, Arial, sans-serif; }
-
-/* Topbar */
-#topbar { background:#0f0f0f; padding:18px 24px; display:flex; align-items:center; justify-content:space-between; }
-#title { font-weight:700; font-size:20px; color:#ffcc33; }
-
-/* Chat wrapper and chatbox */
-.chat-wrapper { padding:18px; }
-.chatbox {
-    background:#151515;
-    border-radius:8px;
-    border:1px solid #2b2b2b;
-    height:68vh;
-    width:90%;
-    margin:0 auto;
-    padding:16px;
-    padding-bottom:220px; /* make space for the fixed input row */
-    overflow:auto;
-    position:relative;
-    z-index:1;
-    pointer-events:auto;
-}
-
-/* Input row: fixed, centered, 90/10 split, high z-index so it's clickable */
-#inputrow {
-    position:fixed;
-    left:0; right:0;
-    bottom:32px;
-    width:90%;
-    margin:0 auto;
-    display:flex;
-    gap:12px;
-    align-items:center;
-    z-index:2147483647; /* top */
-    pointer-events:auto;
-}
-
-/* Textbox (90%) */
-#msgbox {
-    flex:9;
-    background:#0e0e0e;
-    color:#ddd;
-    border-radius:12px;
-    padding:14px;
-    border:1px solid #262626;
-    min-height:56px;
-    resize:none;
-    pointer-events:auto;
-    font-size:15px;
-}
-
-/* Remove default label if present */
-#msgbox label { display:none !important; }
-
-/* Send button (10%) */
-#sendbtn {
-    flex:1;
-    background:#2cc3ff;
-    color:#000;
-    border-radius:12px;
-    font-weight:800;
-    height:56px;
-    border:none;
-    cursor:pointer;
-    display:flex;
-    align-items:center;
-    justify-content:center;
-    font-size:20px;
-    pointer-events:auto;
-}
-
-/* neutralize Gradio bubble box interfering */
-.gradio-chatbot .message {
-    background: transparent;
-    border: none;
-    padding: 0;
-    color: inherit;
-    pointer-events:auto;
-}
-
-/* Responsive adjustments */
-@media (max-width:900px) {
-  .chatbox { width:96%; padding-bottom:260px; }
-  #inputrow { width:96%; bottom:18px; }
-}
-"""
+        return f"Error: {e}"
 
-# JS: auto-scroll to bottom of chatbox whenever it changes
-# This MutationObserver will scroll the chat element to the bottom on new nodes.
-JS = """
-<script>
-(function(){
-  const selector = ".chatbox"; // matches our chat element
-  function setupObserver(){
-    const el = document.querySelector(selector);
-    if(!el) return setTimeout(setupObserver, 300);
-    const obs = new MutationObserver(()=>{ el.scrollTop = el.scrollHeight; });
-    obs.observe(el, { childList:true, subtree:true, characterData:true });
-    // ensure initial scroll
-    el.scrollTop = el.scrollHeight;
-  }
-  // run after DOM ready
-  if (document.readyState === "complete" || document.readyState === "interactive") {
-    setupObserver();
-  } else {
-    document.addEventListener("DOMContentLoaded", setupObserver);
-  }
-})();
-</script>
-"""
+# -------------------------
+# small CSS to style ChatInterface
+# -------------------------
+css = """
+/* general */
+body { background: #0d0d0d; color: #fff; font-family: Inter, Arial, sans-serif; }
+
+/* container width */
+.gradio-container { max-width: 1200px; margin: 0 auto; }
 
-# ==========================
-# BUILD GRADIO APP
-# ==========================
-with gr.Blocks(css=CSS, title="⚡ YellowFlash.ai") as demo:
-    # topbar: left dropdown small, right title
-    with gr.Row(elem_id="topbar"):
-        model_dd = gr.Dropdown(list(MODELS.keys()), value=list(MODELS.keys())[0], elem_id="modeldd", show_label=False)
-        gr.HTML("<div id='title'>�� YellowFlash.ai</div>")
+/* Title area */
+h1, h2 { color: #ffcc33 !important; }
 
-    # chat display uses Gradio Chatbot (expects list of tuples)
-    chat_display = gr.Chatbot(elem_classes="chatbox", label="", show_label=False)
+/* Chat bubbles (visual only) */
+.message.user { background: #2cc3ff !important; color: #000 !important; border-radius: 10px !important; padding: 8px 12px !important; }
+.message.bot { background: #151515 !important; color: #ddd !important; border: 1px solid #2b2b2b !important; border-radius: 10px !important; padding: 8px 12px !important; }
 
-    # input row: 90/10 (textbox + send icon)
-    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")
+/* Input area */
+textarea.svelte-textarea { background: #0e0e0e !important; color: #fff !important; border-radius: 10px !important; border: 1px solid #262626 !important; }
+.gr-button { background: #2cc3ff !important; color: #000 !important; border-radius: 10px !important; font-weight: 700 !important; }
 
-    # wire events: outputs are [chat_display, txt] (history, cleared textbox)
-    send.click(chat_fn_send, inputs=[txt, chat_display, model_dd], outputs=[chat_display, txt])
-    txt.submit(chat_fn_send, inputs=[txt, chat_display, model_dd], outputs=[chat_display, txt])
+/* Make sure Gradio's interface doesn't overlay the input */
+.gradio-container .chatbox { padding-bottom: 120px !important; }
 
-    # Inject JS for auto-scroll
-    gr.HTML(JS)
+/* Dropdown small & flat */
+.model-dd .gr-dropdown { background: transparent !important; border: 1px solid #2b2b2b !important; border-radius: 8px !important; padding: 8px 12px !important; color: #ddd !important; box-shadow:none !important; }
+"""
 
-demo.queue()
+# -------------------------
+# build the UI: ChatInterface + dropdown as additional input
+# keep the exact ChatInterface usage you had
+# -------------------------
+model_selector = gr.Dropdown(choices=["Google Gemini 2.0 Flash", "Meta LLaMA 4"],
+                             value="Google Gemini 2.0 Flash",
+                             label="Model",
+                             elem_classes="model-dd")
+
+demo = gr.ChatInterface(fn=chat_fn,
+                       title="⚡ yellowflash.ai",
+                       description="Select model from dropdown and chat.",
+                       additional_inputs=[model_selector],
+                       css=css)
+
+# Launch
 demo.launch(share=True)