Update app.py

app.py

@@ -1,9 +1,7 @@
 """Tiny Aya — streaming multilingual chat, built for the Build Small Hackathon.
-
 A gr.Server app: custom HTML/JS frontend (Cohere Labs + Build Small styling)
 backed by Gradio's queue + ZeroGPU. The browser talks to the `/chat` route
 through the Gradio JS client, so it streams token-by-token.
-
 Deploy on Hugging Face Spaces:
   - sdk: gradio  (in README.md frontmatter)
   - add HF_TOKEN as a Space secret (tiny-aya-global is a gated model)
@@ -107,7 +105,6 @@ FRONTEND_HTML = f"""
   body {{ margin:0; height:100vh; display:flex; flex-direction:column;
          background:var(--cream); color:var(--ink);
          font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }}
-
   /* brand bar — Cohere Labs front and center */
   header {{ position:relative; display:flex; flex-direction:column; align-items:center;
            gap:6px; padding:22px 22px 16px; background:var(--panel);
@@ -120,7 +117,6 @@ FRONTEND_HTML = f"""
   header .badge {{ position:absolute; right:18px; top:18px; font-size:12px; font-weight:600;
                   color:var(--blue); background:#EDF0FB; border:1px solid #D8DEF6;
                   padding:5px 11px; border-radius:999px; }}
-
   /* chat — banner sits faded in the background */
   #chat {{ flex:1; overflow-y:auto; padding:26px; display:flex; flex-direction:column;
           gap:14px; max-width:840px; width:100%; margin:0 auto;
@@ -138,9 +134,11 @@ FRONTEND_HTML = f"""
   .bot  {{ align-self:flex-start; background:var(--bot); color:var(--ink);
           border:1px solid var(--border); border-bottom-left-radius:5px; }}
   .typing {{ color:var(--muted); font-style:italic; }}
-  .empty {{ margin:auto; text-align:center; color:var(--muted); max-width:420px; }}
+  /* empty state sits just BELOW the banner: the banner scales with the chat
+     column width (max 840px), so the top margin tracks the viewport width
+     and is clamped for wide screens. Tune 42vw / 380px to taste. */
+  .empty {{ margin:min(42vw, 380px) auto 0; text-align:center; color:var(--muted); max-width:420px; }}
   .empty h2 {{ color:var(--ink); margin:0 0 6px; }}
-
   /* composer */
   form {{ display:flex; gap:10px; padding:16px 22px; background:var(--panel);
          border-top:1px solid var(--border); max-width:840px; width:100%; margin:0 auto; }}
@@ -163,39 +161,31 @@ FRONTEND_HTML = f"""
     <div class="sub">Multilingual chat · 70+ languages</div>
     <span class="badge">Build Small Hackathon</span>
   </header>
-
   <div id="chat">
     <div class="empty" id="empty">
       <h2>👋 Hola · नमस्ते · Bonjour · مرحبا</h2>
       <p>Chat with <b>Tiny Aya</b>, Cohere Labs' 3.35B multilingual model. Ask in any of 70+ languages.</p>
     </div>
   </div>
-
   <form id="form">
     <textarea id="input" rows="1" placeholder="Message Tiny Aya…  (Enter to send, Shift+Enter for newline)"></textarea>
     <button id="send" type="submit">Send</button>
   </form>
-
   <footer>
     Powered by <a href="https://huggingface.co/CohereLabs/tiny-aya-global" target="_blank">Cohere Labs · Tiny Aya</a>
     + <a href="https://www.gradio.app/guides/server-mode" target="_blank">gr.Server</a>
     · built for the <a href="https://huggingface.co/build-small-hackathon" target="_blank">Build Small Hackathon</a>
   </footer>
-
 <script type="module">
   import {{ Client }} from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
-
   const chat   = document.getElementById("chat");
   const empty  = document.getElementById("empty");
   const form   = document.getElementById("form");
   const input  = document.getElementById("input");
   const send   = document.getElementById("send");
   const history = [];
-
   const client = await Client.connect(window.location.origin);
-
   const scroll = () => {{ chat.scrollTop = chat.scrollHeight; }};
-
   function bubble(role, text, extra = "") {{
     const el = document.createElement("div");
     el.className = `msg ${{role === "user" ? "user" : "bot"}} ${{extra}}`;
@@ -204,7 +194,6 @@ FRONTEND_HTML = f"""
     scroll();
     return el;
   }}
-
   input.addEventListener("input", () => {{
     input.style.height = "auto";
     input.style.height = input.scrollHeight + "px";
@@ -212,18 +201,15 @@ FRONTEND_HTML = f"""
   input.addEventListener("keydown", (e) => {{
     if (e.key === "Enter" && !e.shiftKey) {{ e.preventDefault(); form.requestSubmit(); }}
   }});
-
   form.addEventListener("submit", async (e) => {{
     e.preventDefault();
     const text = input.value.trim();
     if (!text) return;
     if (empty) empty.remove();
-
     bubble("user", text);
     history.push({{ role: "user", content: text }});
     input.value = ""; input.style.height = "auto";
     send.disabled = true; input.disabled = true;
-
     const botEl = bubble("assistant", "▍", "typing");
     let full = "";
     try {{
@@ -251,4 +237,4 @@ FRONTEND_HTML = f"""
 """
 
 if __name__ == "__main__":
-    server.launch(server_name="0.0.0.0", server_port=7860, show_error=True)
+    server.launch(server_name="0.0.0.0", server_port=7860, show_error=True)