Redesign: custom The Fin AI page + gr.api /chat backend (ZeroGPU)

.gitattributes

@@ -35,3 +35,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 baklava.png filter=lfs diff=lfs merge=lfs -text
 bee.jpg filter=lfs diff=lfs merge=lfs -text
+assets/examples/image_107.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,14 +1,47 @@
 ---
 title: FinLLaVA
-emoji: 🔥
-colorFrom: yellow
-colorTo: green
+emoji: 📊
+colorFrom: blue
+colorTo: indigo
 sdk: gradio
-sdk_version: 5.15.0
+sdk_version: 5.49.1
 python_version: "3.10"
 app_file: app.py
 pinned: false
 license: apache-2.0
+short_description: Ask FinLLaVA about financial charts, tables and scans
+models:
+- TheFinAI/FinLLaVA
+tags:
+- finance
+- multimodal
+- vision-language
+- thefinai
+- open-finllms
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# FinLLaVA demo
+
+📄 [Open-FinLLMs paper](https://arxiv.org/abs/2408.11878) · 🤗 [Model](https://huggingface.co/TheFinAI/FinLLaVA) · 🤗 [Open-FinLLMs collection](https://huggingface.co/collections/TheFinAI/open-finllms-66b671f2b4958a65e20decbe) · 🌐 [The Fin AI](https://thefin.ai)
+
+Ask **FinLLaVA**, the multimodal member of Open-FinLLMs, about financial charts, tables and scanned pages. Each question is answered about the current image only.
+
+## How this Space works
+
+The page is our own HTML/CSS/JS (`page/`), served by a small Gradio app that also exposes one API endpoint, `/chat` (`gr.api`, streaming, takes an image). The page talks to it with [`@gradio/client`](https://www.gradio.app/guides/getting-started-with-the-js-client). Inference runs on ZeroGPU with the bundled `llava_llama3` code.
+
+The Space stays on Gradio 5 because `llava_llama3` needs `transformers==4.44`, which requires `huggingface_hub<1.0`; Gradio 6 needs a newer `huggingface_hub`.
+
+Run the page locally without a GPU: `DEMO_UI_ONLY=1 python app.py`.
+
+```bibtex
+@misc{huang2025openfinllmsopenmultimodallarge,
+      title={Open-FinLLMs: Open Multimodal Large Language Models for Financial Applications},
+      author={Jimin Huang and Mengxi Xiao and Dong Li and Zihao Jiang and Yuzhe Yang and Yifei Zhang and Lingfei Qian and Yan Wang and Xueqing Peng and Yang Ren and Ruoyu Xiang and Zhengyu Chen and Xiao Zhang and Yueru He and Weiguang Han and Shunian Chen and Lihang Shen and Daniel Kim and Yangyang Yu and Yupeng Cao and Zhiyang Deng and Haohang Li and Duanyu Feng and Yongfu Dai and VijayaSai Somasundaram and Peng Lu and Guojun Xiong and Zhiwei Liu and Zheheng Luo and Zhiyuan Yao and Ruey-Ling Weng and Meikang Qiu and Kaleb E Smith and Honghai Yu and Yanzhao Lai and Min Peng and Jian-Yun Nie and Jordan W. Suchow and Xiao-Yang Liu and Benyou Wang and Alejandro Lopez-Lira and Qianqian Xie and Sophia Ananiadou and Junichi Tsujii},
+      year={2025},
+      eprint={2408.11878},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL},
+      url={https://arxiv.org/abs/2408.11878},
+}
+```

app.py

@@ -1,126 +1,101 @@
-import time
-from threading import Thread
-
-import gradio as gr
-import torch
-from PIL import Image
-from transformers import AutoProcessor, LlavaForConditionalGeneration, TextIteratorStreamer, TextStreamer
+"""FinLLaVA demo: custom The Fin AI page (page/) on top of a Gradio API (`/chat`), running on ZeroGPU.
 
-import spaces
+Stays on Gradio 5: the bundled llava_llama3 code needs transformers 4.44, which requires huggingface_hub<1.0 (Gradio 6 needs >=1.16).
+Local UI test without a GPU:  DEMO_UI_ONLY=1 python app.py
+"""
 import argparse
-
-from llava_llama3.model.builder import load_pretrained_model
-from llava_llama3.constants import IMAGE_TOKEN_INDEX, DEFAULT_IMAGE_TOKEN, DEFAULT_IM_START_TOKEN, DEFAULT_IM_END_TOKEN
-from llava_llama3.conversation import conv_templates, SeparatorStyle
-from llava_llama3.utils import disable_torch_init
-from llava_llama3.mm_utils import process_images, tokenizer_image_token, get_model_name_from_path
-from llava_llama3.serve.cli import chat_llava
-
-import requests
-from io import BytesIO
-import base64
 import os
-import glob
-import pandas as pd
-from tqdm import tqdm
-import json
-
-root_path = os.path.dirname(os.path.abspath(__file__))
-print(root_path)
-os.environ['GRADIO_TEMP_DIR'] = root_path
-
-parser = argparse.ArgumentParser()
-parser.add_argument("--model-path", type=str, default="TheFinAI/FinLLaVA")
-parser.add_argument("--device", type=str, default="cuda")
-parser.add_argument("--conv-mode", type=str, default="llama_3")
-parser.add_argument("--temperature", type=float, default=0.01)
-parser.add_argument("--max-new-tokens", type=int, default=512)
-parser.add_argument("--load-8bit", action="store_true")
-parser.add_argument("--load-4bit", action="store_true")
-args = parser.parse_args()
-
-# args.load_8bit = True
-
-# Load model
-tokenizer, llava_model, image_processor, context_len = load_pretrained_model(
-    args.model_path, 
-    None, 
-    'llava_llama3', 
-    args.load_8bit, 
-    args.load_4bit, 
-    device=args.device)
+import time
+from collections.abc import Iterator
+from threading import Thread
 
+UI_ONLY = os.getenv("DEMO_UI_ONLY") == "1"
+if not UI_ONLY:
+    import spaces  # must be imported before torch on ZeroGPU
 
-PLACEHOLDER = """
-<div style="padding: 30px; text-align: center; display: flex; flex-direction: column; align-items: center;">
-   <h1 style="font-size: 28px; margin-bottom: 2px; opacity: 0.55;">FinLLaVA</h1>
-   <p style="font-size: 18px; margin-bottom: 2px; opacity: 0.65;">FinLLaVA is a LLaVA model fine-tuned from FinLLaMA and CLIP by the Fin AI</p>
-</div>
-"""
-
-@spaces.GPU
-def bot_streaming(message, history):
-    image_file = None
-    if message["files"]:
-        if type(message["files"][-1]) == dict:
-            image_file = message["files"][-1]["path"]
-        else:
-            image_file = message["files"][-1]
-    else:
-        for hist in history:
-            if type(hist[0]) == tuple:
-                image_file = hist[0][0]
-                
-    if image_file is None:
-        gr.Error("You need to upload an image for LLaVA to work.")
+import gradio as gr
+from gradio.data_classes import FileData
+
+import fa_page
+
+MODEL_ID = "TheFinAI/FinLLaVA"
+ARGS = argparse.Namespace(model_path=MODEL_ID, device="cuda", conv_mode="llama_3", temperature=0.01, max_new_tokens=512,
+                          load_8bit=False, load_4bit=False)
+
+if not UI_ONLY:
+    from transformers import TextIteratorStreamer
+
+    from llava_llama3.model.builder import load_pretrained_model
+    from llava_llama3.serve.cli import chat_llava
+
+    tokenizer, llava_model, image_processor, context_len = load_pretrained_model(
+        ARGS.model_path, None, "llava_llama3", ARGS.load_8bit, ARGS.load_4bit, device=ARGS.device)
+
+
+def chat(message: str, history: list[dict], image: FileData | None = None, temperature: float = 0.01,
+         max_new_tokens: int = 512) -> Iterator[str]:
+    """Ask FinLLaVA about a chart or table image. Each call answers about `image` only; `history` is not used as context."""
+    path = image.get("path") if isinstance(image, dict) else getattr(image, "path", None)
+    if not path:
+        raise gr.Error("Please add an image (a chart, table or scanned page).")
+    if UI_ONLY:
+        reply = (f"**UI test mode.** Received an image (`{os.path.basename(path)}`) and the question:\n\n> {message}\n\n"
+                 f"Settings: temperature={temperature}, max_new_tokens={max_new_tokens}.")
+        out = ""
+        for word in reply.split(" "):
+            out += word + " "
+            time.sleep(0.03)
+            yield out
         return
-    
+    args = argparse.Namespace(**{**vars(ARGS), "temperature": float(temperature), "max_new_tokens": int(max_new_tokens)})
     streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
-
-    def generate():
-        print('Running chat')
-        output = chat_llava(
-                    args=args,
-                    image_file=image_file,
-                    text=message['text'],
-                    tokenizer=tokenizer,
-                    model=llava_model,
-                    image_processor=image_processor,
-                    context_len=context_len,
-                    streamer=streamer)
-        return output
-
-    thread = Thread(target=generate)
-    thread.start()
-    # thread.join()
-
-    buffer = ""
-    time.sleep(1.0)
-    # output = generate()
-    for new_text in streamer:
-        buffer += new_text
-        generated_text_without_prompt = buffer
-        time.sleep(0.05)
-        print (generated_text_without_prompt)
-        yield generated_text_without_prompt
-
-chatbot = gr.Chatbot(placeholder=PLACEHOLDER,scale=1)
-chat_input = gr.MultimodalTextbox(interactive=True, file_types=["image"], placeholder="Enter message or upload file...", show_label=False)
-with gr.Blocks(fill_height=True) as demo:
-    gr.ChatInterface(
-        fn=bot_streaming,
-        title="FinLLaVA-8B Demo", 
-        examples=[
-            {"text": "What is the spending on Healthcare in July? A. 450 B. 600 C. 520 D. 510", "files": ["image_107.png"]},
-            {"text": "If 2012 net periodic opeb cost increased at the same pace as the pension cost, what would the estimated 2013 cost be in millions? A. 14.83333 B. 12.5 C. 15.5 D. 13.5", "files": ["image_659.png"]},
-        ],
-        run_examples_on_click=False,
-        description="This is a demo of FinLLaVA-8B. For more details, see our paper: https://huggingface.co/papers/2408.11878",  
-        stop_btn="Stop Generation",
-        multimodal=True,
-        textbox=chat_input,
-        chatbot=chatbot,
-    )
-
-demo.queue(api_open=True)
-demo.launch(show_api=True, share=False)
+    Thread(target=chat_llava, kwargs=dict(args=args, image_file=path, text=message, tokenizer=tokenizer, model=llava_model,
+                                          image_processor=image_processor, context_len=context_len, streamer=streamer)).start()
+    out = ""
+    for text in streamer:
+        out += text
+        yield out
+
+
+if not UI_ONLY:
+    chat = spaces.GPU(chat)
+
+page = fa_page.Page(dict(
+    page_title="FinLLaVA · financial charts & tables · The Fin AI",
+    nav=[("Model", f"https://huggingface.co/{MODEL_ID}"), ("Open-FinLLMs", "https://huggingface.co/collections/TheFinAI/open-finllms-66b671f2b4958a65e20decbe"),
+         ("Paper ↗", "https://arxiv.org/abs/2408.11878")],
+    kicker="Demo · multimodal financial LLM",
+    title_html="Fin<em>LLaVA</em>",
+    lead_html="Ask questions about financial charts, tables and scanned pages. FinLLaVA is the multimodal member of "
+              "Open-FinLLMs: a LLaVA model built on FinLLaMA and CLIP, tuned with 1.43M multimodal pairs.",
+    stats=[("8", "billion parameters", 0), ("1.43", "million multimodal tuning pairs", 2), ("52", "billion-token FinLLaMA pretraining", 0)],
+    links=[("Model card", f"https://huggingface.co/{MODEL_ID}"), ("FinLLaMA", "https://huggingface.co/TheFinAI/FinLLaMA"),
+           ("Open-FinLLMs collection", "https://huggingface.co/collections/TheFinAI/open-finllms-66b671f2b4958a65e20decbe")],
+    image=True,
+    examples=[{"label": "Read a bar chart", "text": "What is the spending on Healthcare in July? A. 450 B. 600 C. 520 D. 510", "image": "examples/image_107.png"},
+              {"label": "Reason over a pension table", "text": "If 2012 net periodic opeb cost increased at the same pace as the pension cost, what would the estimated 2013 cost be in millions? A. 14.83333 B. 12.5 C. 15.5 D. 13.5", "image": "examples/image_659.png"}],
+    params=[dict(key="temperature", label="Temperature", min=0.01, max=1.0, step=0.01, value=0.01),
+            dict(key="max_new_tokens", label="Max new tokens", min=32, max=1024, step=1, value=512)],
+    greeting=dict(title="Show FinLLaVA a chart", text="Upload, drop or paste a chart, table or scanned page, then ask a question — or try an example."),
+    placeholder="Ask about the image…",
+    hint_html="Each question is answered about the current image only; earlier turns are not used as context. Runs on ZeroGPU. Not financial advice.",
+    avatar="orgs/thefinai.png",
+    orgs_sub_html='Author affiliations on the <a href="https://arxiv.org/abs/2408.11878" target="_blank" rel="noreferrer">Open-FinLLMs paper</a>.',
+    orgs=[("The Fin AI", "thefinai.png", "https://thefin.ai", "mark"), ("Wuhan University", "whu.svg", "https://en.whu.edu.cn", "emblem"),
+          ("Columbia University", "columbia.png", "https://www.columbia.edu", "emblem"), ("The Chinese University of Hong Kong, Shenzhen", "cuhksz.png", "https://www.cuhk.edu.cn/en", ""),
+          ("Nanjing University", "nju.svg", "https://www.nju.edu.cn/en/", "emblem"), ("Rensselaer Polytechnic Institute", "rpi.svg", "https://www.rpi.edu", ""),
+          ("The University of Manchester", "manchester.png", "https://www.manchester.ac.uk", ""), ("Stevens Institute of Technology", "stevens.png", "https://www.stevens.edu", ""),
+          ("National University of Singapore", "nus.svg", "https://nus.edu.sg", "emblem"), ("University of Florida", "ufl.svg", "https://www.ufl.edu", ""),
+          ("University of Montreal", "udem.svg", "https://www.umontreal.ca", ""), ("Yale University", "yale.svg", "https://www.yale.edu", ""),
+          ("New York University", "nyu.svg", "https://www.nyu.edu", ""), ("Harvard University", "harvard.svg", "https://www.harvard.edu", ""),
+          ("NVIDIA", "nvidia.svg", "https://www.nvidia.com", ""), ("Artificial Intelligence Research Centre (AIST)", "airc.png", "https://www.airc.aist.go.jp/en/", "emblem"),
+          ("Archimedes / Athena Research Center", "archimedes.svg", "https://archimedesai.gr/en/", "")],
+    disclaimer="FinLLaVA is a research model. Outputs can be inaccurate and are not financial advice.",
+))
+
+with gr.Blocks(**page.blocks_kwargs()) as demo:
+    page.render()
+    gr.api(chat, api_name="chat")
+
+if __name__ == "__main__":
+    demo.queue(max_size=20).launch(**page.launch_kwargs())

fa_page.py

@@ -0,0 +1,123 @@
+"""Custom The Fin AI page for Gradio-backed demo Spaces.
+
+Gradio only serves the page and the `/chat` API (gr.api); the whole UI is our own HTML/CSS/JS (page/), which talks to
+the API with @gradio/client. Works with Gradio 5 (head/css on Blocks) and Gradio 6 (head/css on launch).
+
+    page = fa_page.Page(cfg)                     # cfg: see build_body()
+    with gr.Blocks(**page.blocks_kwargs()) as demo:
+        page.render()
+        gr.api(chat, api_name="chat")
+    demo.queue().launch(**page.launch_kwargs())
+"""
+import html
+import json
+import os
+
+import gradio as gr
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+PAGE = os.path.join(HERE, "page")
+ASSETS = os.path.join(HERE, "assets")
+gr.set_static_paths(paths=[ASSETS])
+GRADIO6 = int(gr.__version__.split(".")[0]) >= 6
+CLIENT = "2.7.1" if GRADIO6 else "1.19.1"  # @gradio/client matching the Gradio major version
+e = lambda s: html.escape(str(s), quote=True)
+
+
+def asset(path):
+    return f"/gradio_api/file={os.path.join(ASSETS, path)}"
+
+
+def _read(name):
+    with open(os.path.join(PAGE, name), encoding="utf-8") as f:
+        return f.read()
+
+
+ICON_SEND = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>'
+ICON_STOP = '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2"/></svg>'
+ICON_IMG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="3"/><circle cx="9" cy="10" r="2"/><path d="m21 16-5-5-9 9"/></svg>'
+
+
+class Page:
+    def __init__(self, cfg):
+        self.cfg = cfg
+
+    def head(self):
+        c = self.cfg
+        chat = {"client": CLIENT, "endpoint": "/chat", "image": c.get("image", False), "avatar": asset(c["avatar"]),
+                "greeting": c["greeting"], "params": c["params"], "readyText": c.get("ready_text", "Ready"),
+                "examples": [{**x, "image": asset(x["image"]) if x.get("image") else None} for x in c["examples"]]}
+        fonts = ('<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
+                 '<link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400'
+                 '&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">')
+        return (fonts + f'<link rel="icon" href="{asset("finai-logo.png")}"><style>{_read("style.css")}\n{_read("chat.css")}</style>'
+                f'<script>window.FA_CHAT={json.dumps(chat)};</script><script type="module">{_read("chat.js")}</script>')
+
+    def body(self):
+        c = self.cfg
+        nav = "".join(f'<a href="{e(u)}" target="_blank" rel="noreferrer">{e(l)}</a>' for l, u in c["nav"])
+        stats = "".join(f'<div><b data-count="{e(v)}"{f" data-dec={d}" if d else ""}>0</b><span>{e(k)}</span></div>' for v, k, d in c["stats"])
+        pills = "".join(f'<a class="pill" href="{e(u)}" target="_blank" rel="noreferrer">{e(l)}</a>' for l, u in c["links"])
+        orgs = "".join(f'<a class="org" href="{e(u)}" target="_blank" rel="noreferrer" style="--d:{i * 40}ms" title="{e(n)}">'
+                       f'<img src="{asset("orgs/" + f)}" alt="" class="{e(k)}" loading="lazy"><span>{e(n)}</span></a>' for i, (n, f, u, k) in enumerate(c["orgs"]))
+        attach = (f'<label class="icon-btn attach" title="Add an image">{ICON_IMG}<input id="fa-image" type="file" accept="image/*"></label>'
+                  '<div id="fa-preview" hidden><img alt=""><button type="button" aria-label="Remove image">×</button></div>') if c.get("image") else ""
+        return f'''<div id="fa-app">
+<div class="progress" aria-hidden="true"></div>
+<header class="header scrolled"><div class="wrap nav">
+  <a class="brand" href="https://thefin.ai" target="_blank" rel="noreferrer"><img src="{asset("finai-logo.png")}" alt="">The Fin AI</a>
+  <nav class="links">{nav}<a href="https://thefin.ai" target="_blank" rel="noreferrer">thefin.ai ↗</a></nav>
+</div></header>
+<main class="wrap demo">
+  <section class="intro">
+    <span class="kicker">{e(c["kicker"])}</span>
+    <h1>{c["title_html"]}</h1>
+    <p class="lead">{c["lead_html"]}</p>
+    <div class="fb-stats">{stats}</div>
+    <div class="links-row">{pills}</div>
+    <h3 class="side-h">Try an example</h3>
+    <div id="fa-examples"></div>
+    <details class="params"><summary>Generation settings</summary><div id="fa-params"></div></details>
+  </section>
+  <section class="panel" aria-label="Chat">
+    <div class="panel-top"><span id="fa-status" data-state="connecting"><i></i><span>Connecting…</span></span><button type="button" class="ghost" id="fa-clear">New chat</button></div>
+    <div id="fa-log" aria-live="polite"></div>
+    <div class="composer">
+      {attach}
+      <textarea id="fa-input" rows="1" placeholder="{e(c["placeholder"])}"></textarea>
+      <button type="button" class="icon-btn" id="fa-send" aria-label="Send">{ICON_SEND}</button>
+      <button type="button" class="icon-btn" id="fa-stop" aria-label="Stop" hidden>{ICON_STOP}</button>
+      <div id="fa-note" role="status"></div>
+    </div>
+    <p class="hint">{c["hint_html"]}</p>
+  </section>
+</main>
+<section class="wrap credits-sec reveal">
+  <span class="kicker">People &amp; partners</span>
+  <h2>Built together</h2>
+  <p class="sub">{c["orgs_sub_html"]}</p>
+  <div class="orgs">{orgs}</div>
+  <p class="disclaimer">{c["disclaimer"]}</p>
+</section>
+<footer class="footer wrap">
+  <span class="brand"><img src="{asset("finai-logo.png")}" alt="">The Fin AI</span>
+  <nav><a href="https://github.com/The-FinAI" target="_blank" rel="noreferrer">GitHub</a><a href="https://huggingface.co/TheFinAI" target="_blank" rel="noreferrer">Hugging Face</a><a href="https://huggingface.co/collections/TheFinAI/the-fin-ai-leaderboards-6ac7154319e5aa2b52037515" target="_blank" rel="noreferrer">Leaderboards</a><a href="https://discord.gg/Wpt347rusk" target="_blank" rel="noreferrer">Discord</a></nav>
+  <span class="copy">© 2026 The Fin AI · AI Readiness in Finance</span>
+</footer>
+</div>'''
+
+    def render(self):
+        return gr.HTML(self.body())
+
+    def blocks_kwargs(self):
+        kw = dict(title=self.cfg["page_title"], fill_width=True)
+        if not GRADIO6:
+            kw["head"] = self.head()
+        return kw
+
+    def launch_kwargs(self):
+        kw = {} if not GRADIO6 else dict(footer_links=[])
+        if GRADIO6:
+            kw["head"] = self.head()
+        kw["ssr_mode"] = False
+        return kw

page/chat.css

@@ -0,0 +1,137 @@
+/* The Fin AI demo page (on top of style.css). Gradio's own chrome is hidden; #fa-app is the whole page. */
+.gradio-container,.gradio-container>.main,.gradio-container .contain,.gradio-container>.main>.wrap{max-width:none !important;padding:0 !important;margin:0 !important;background:transparent !important}
+.gradio-container .html-container,.gradio-container .prose{padding:0 !important;max-width:none !important}
+.gradio-container footer,.gradio-container .api-docs-wrap{display:none !important}
+.gradio-container .block{border:0 !important;box-shadow:none !important;background:transparent !important;padding:0 !important}
+#fa-app{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.6}
+#fa-app h1,#fa-app h2,#fa-app h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;margin:0;color:var(--ink)}
+#fa-app p{margin:0}
+#fa-app a{text-decoration:none}
+
+#fa-app .demo{display:grid;grid-template-columns:minmax(300px,.85fr) 1.35fr;gap:40px;align-items:start;padding-top:104px;padding-bottom:20px}
+#fa-app .intro h1{font-size:clamp(2.6rem,5.4vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin:18px 0 14px}
+#fa-app .intro h1 em{font-style:italic;color:var(--accent-deep)}
+#fa-app .intro .lead{font-size:1.02rem;color:var(--soft);max-width:46ch}
+#fa-app .intro .fb-stats{margin:26px 0 22px;gap:26px}
+#fa-app .intro .fb-stats b{font-size:2.1rem}
+#fa-app .links-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
+#fa-app .pill{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:500;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:box-shadow .25s,transform .35s var(--spring)}
+#fa-app .pill:hover{box-shadow:inset 0 0 0 1px var(--accent-light);transform:translateY(-2px)}
+#fa-app .side-h{font-family:var(--sans) !important;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
+#fa-app #fa-examples{display:grid;gap:8px;margin-bottom:26px}
+#fa-app .ex{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;text-align:left;border:0;cursor:pointer;padding:12px 14px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);font:inherit;color:var(--ink);opacity:0;animation:fa-up .6s var(--ease) forwards;animation-delay:var(--d);transition:box-shadow .25s,transform .35s var(--spring)}
+#fa-app .ex:hover{box-shadow:0 0 0 1px var(--accent-light),0 12px 26px -16px rgba(24,56,152,.45);transform:translateX(4px)}
+#fa-app .ex:active{transform:scale(.98)}
+#fa-app .ex img{grid-row:span 2;width:52px;height:52px;object-fit:cover;border-radius:10px;box-shadow:0 0 0 1px var(--line)}
+#fa-app .ex-label{font-size:.88rem;font-weight:500;grid-column:2}
+#fa-app .ex-text{font-size:.78rem;color:var(--muted);grid-column:2;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
+#fa-app .ex:not(:has(img)) .ex-label,#fa-app .ex:not(:has(img)) .ex-text{grid-column:1/-1}
+#fa-app details.params{border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);padding:4px 16px}
+#fa-app details.params summary{cursor:pointer;font-size:.86rem;font-weight:500;padding:10px 0;list-style:none;display:flex;justify-content:space-between}
+#fa-app details.params summary::after{content:"+";color:var(--muted);transition:transform .3s var(--spring)}
+#fa-app details.params[open] summary::after{transform:rotate(45deg)}
+#fa-app #fa-params{display:grid;gap:12px;padding:4px 0 14px}
+#fa-app .param span{display:flex;justify-content:space-between;font-size:.8rem;color:var(--soft)}
+#fa-app .param b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600}
+#fa-app .param input{width:100%;accent-color:var(--accent)}
+
+/* chat panel */
+#fa-app .panel{position:sticky;top:84px;display:flex;flex-direction:column;height:min(78vh,760px);border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 30px 60px -40px rgba(15,21,40,.45);overflow:hidden;animation:fa-up .8s var(--ease) both .1s}
+#fa-app .panel-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
+#fa-app #fa-status{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;color:var(--soft)}
+#fa-app #fa-status i{width:8px;height:8px;border-radius:50%;background:var(--muted)}
+#fa-app #fa-status[data-state=ready] i{background:#16a34a;box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent)}
+#fa-app #fa-status[data-state=connecting] i{background:#d99a1e;animation:fa-pulse 1.2s infinite}
+#fa-app #fa-status[data-state=error] i{background:#dc2626}
+#fa-app .ghost{border:0;background:none;font:500 .8rem var(--sans);color:var(--soft);padding:6px 10px;border-radius:999px;cursor:pointer;transition:background .2s,color .2s}
+#fa-app .ghost:hover{background:var(--accent-soft);color:var(--ink)}
+#fa-app #fa-log{flex:1;overflow-y:auto;padding:22px 20px;display:flex;flex-direction:column;gap:16px;scroll-behavior:smooth}
+#fa-app .fa-empty{margin:auto;text-align:center;max-width:36ch;animation:fa-up .7s var(--ease) both}
+#fa-app .fa-empty img{width:44px;height:44px;margin:0 auto 14px;display:block;object-fit:contain}
+#fa-app .fa-empty h3{font-size:1.4rem;margin-bottom:6px}
+#fa-app .fa-empty p{font-size:.9rem;color:var(--soft)}
+#fa-app .msg{display:flex;gap:10px;max-width:88%;animation:fa-msg .45s var(--spring) both}
+#fa-app .msg.user{align-self:flex-end}
+#fa-app .msg.user .body{background:var(--ink);color:var(--paper);border-radius:18px 18px 4px 18px;padding:10px 15px;font-size:.94rem;white-space:normal}
+#fa-app .msg.assistant{align-self:flex-start;flex-wrap:wrap}
+#fa-app .msg .av{width:28px;height:28px;flex:none;border-radius:50%;object-fit:contain;background:#fff;padding:4px;box-shadow:0 0 0 1px var(--line)}
+#fa-app .msg.assistant .body{flex:1;min-width:0;background:var(--paper-2);border-radius:4px 18px 18px 18px;padding:11px 16px;font-size:.94rem;line-height:1.65}
+#fa-app .msg.assistant .body p{margin:0 0 .6em}.msg.assistant .body p:last-child{margin:0}
+#fa-app .msg.assistant .body ul,#fa-app .msg.assistant .body ol{margin:.3em 0 .6em;padding-left:1.3em}
+#fa-app .msg.assistant .body code{font-family:var(--mono);font-size:.84em;background:var(--card);padding:1px 5px;border-radius:5px}
+#fa-app .msg.assistant .body pre{background:var(--card);padding:10px 12px;border-radius:10px;overflow-x:auto}
+#fa-app .msg.error .body{background:color-mix(in srgb,#dc2626 9%,var(--card));color:var(--ink)}
+#fa-app .msg .thumb{display:block;max-width:220px;max-height:160px;border-radius:10px;margin-bottom:8px}
+#fa-app .msg .meta{flex-basis:100%;margin-left:38px;font-size:.72rem;color:var(--muted)}
+#fa-app .msg .meta .copy{border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;padding:0}
+#fa-app .msg .meta .copy:hover{color:var(--accent)}
+#fa-app .typing{display:inline-flex;gap:4px;padding:4px 0}
+#fa-app .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:fa-dot 1.2s infinite}
+#fa-app .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
+#fa-app .caret{display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:text-bottom;background:var(--accent);animation:fa-blink 1s steps(2) infinite}
+#fa-app .queue{font-size:.84rem;color:var(--soft)}
+#fa-app .muted{color:var(--muted)}
+
+#fa-app .composer{position:relative;margin:0 14px 14px;padding:8px 8px 8px 14px;border-radius:18px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:flex-end;gap:8px;transition:box-shadow .25s}
+#fa-app .composer:focus-within{box-shadow:inset 0 0 0 1.5px var(--accent-light),0 0 0 4px color-mix(in srgb,var(--accent-light) 18%,transparent)}
+#fa-app .composer.drag{box-shadow:inset 0 0 0 2px dashed var(--accent)}
+#fa-app #fa-input{flex:1;border:0;outline:none;resize:none;background:transparent;font:400 .95rem/1.5 var(--sans);color:var(--ink);padding:8px 0;max-height:200px}
+#fa-app .icon-btn{flex:none;width:38px;height:38px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;transition:transform .3s var(--spring),background .2s,opacity .2s}
+#fa-app .icon-btn svg{width:18px;height:18px}
+#fa-app #fa-send{background:var(--ink);color:var(--paper)}
+#fa-app #fa-send:hover:not(:disabled){transform:scale(1.08);background:var(--accent-deep)}
+#fa-app #fa-send:disabled{opacity:.3;cursor:default}
+#fa-app #fa-stop{background:#dc2626;color:#fff}
+#fa-app .attach{background:transparent;color:var(--soft)}
+#fa-app .attach:hover{background:var(--accent-soft);color:var(--ink)}
+#fa-app .attach input{display:none}
+#fa-app #fa-preview{position:absolute;left:12px;bottom:calc(100% + 8px);display:flex;align-items:center;gap:8px;padding:6px;border-radius:12px;background:var(--card);box-shadow:0 0 0 1px var(--line),0 12px 24px -14px rgba(15,21,40,.4);animation:fa-up .3s var(--ease)}
+#fa-app #fa-preview img{width:64px;height:64px;object-fit:cover;border-radius:8px}
+#fa-app #fa-preview button{border:0;background:var(--paper-2);border-radius:50%;width:24px;height:24px;cursor:pointer;color:var(--soft)}
+#fa-app #fa-note{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,6px);opacity:0;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.8rem;padding:7px 12px;border-radius:999px;white-space:nowrap;transition:opacity .25s,transform .3s var(--spring)}
+#fa-app #fa-note.on{opacity:1;transform:translate(-50%,0)}
+#fa-app .hint{text-align:center;font-size:.72rem;color:var(--muted);padding:0 14px 12px}
+
+/* credits */
+#fa-app .credits-sec{padding-top:70px}
+#fa-app .credits-sec h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin:12px 0 6px}
+#fa-app .credits-sec .sub{color:var(--soft);font-size:.92rem;margin-bottom:20px}
+#fa-app .credits-sec .sub a{color:var(--accent)}
+#fa-app .orgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
+#fa-app .org{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;height:108px;padding:12px;border-radius:16px;background:var(--card);box-shadow:0 0 0 1px var(--line);text-align:center;opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease) var(--d),transform .7s var(--ease) var(--d),box-shadow .3s}
+#fa-app .credits-sec.in .org{opacity:1;transform:none}
+#fa-app .org img{max-height:36px;max-width:130px;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s,transform .45s var(--spring)}
+#fa-app .org img.emblem{max-height:48px}.org img.mark{max-height:32px}
+#fa-app .org span{font-size:.7rem;line-height:1.3;color:var(--soft)}
+#fa-app a.org:hover{box-shadow:0 0 0 1px var(--accent-light),0 14px 30px -18px rgba(24,56,152,.45)}
+#fa-app a.org:hover img{filter:none;opacity:1;transform:scale(1.06)}
+#fa-app .disclaimer{margin-top:22px;font-size:.78rem;color:var(--muted);max-width:80ch}
+
+@keyframes fa-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
+@keyframes fa-msg{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
+@keyframes fa-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
+@keyframes fa-blink{50%{opacity:0}}
+@keyframes fa-pulse{50%{opacity:.4}}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .org img:not(.mark):not(.emblem){filter:grayscale(1) invert(1) brightness(1.4)}}
+@media (max-width:900px){
+  #fa-app .demo{grid-template-columns:1fr;gap:26px;padding-top:92px}
+  #fa-app .panel{position:relative;top:0;height:72vh}
+  #fa-app .links a:not([href^="http"]){display:none}
+}
+@media (max-width:640px){#fa-app .orgs{grid-template-columns:1fr 1fr}#fa-app .msg{max-width:96%}}
+@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition-duration:.01ms !important}#fa-app .ex,#fa-app .org{opacity:1 !important;transform:none !important}}
+
+#fa-app button{font-family:var(--sans)}
+#fa-app .wrap{max-width:var(--wrap) !important;margin:0 auto !important;padding-left:28px !important;padding-right:28px !important}
+@media (max-width:640px){#fa-app .wrap{padding-left:16px !important;padding-right:16px !important}}
+#fa-app [hidden]{display:none !important}
+#fa-app .brand{color:var(--ink) !important}
+#fa-app .links a{color:var(--soft) !important}
+#fa-app .links a:hover{color:var(--ink) !important}
+#fa-app .footer nav a{color:var(--soft) !important}
+#fa-app .pill,#fa-app .org{color:var(--ink) !important}
+@media (max-width:640px){#fa-app .links a:not(:last-child){display:none}}
+#fa-app .sub a{padding:0 !important;margin:0 !important}
+#fa-app .reuse{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;opacity:.75;margin-bottom:6px}
+#fa-app .reuse img{width:22px;height:22px;object-fit:cover;border-radius:5px}
+#fa-app .msg.user .body .reuse{display:flex}

page/chat.js

@@ -0,0 +1,156 @@
+// The Fin AI chat front end for Gradio-backed demo Spaces.
+// The Space's Gradio app exposes `/chat` (gr.api, streaming); this page talks to it with @gradio/client.
+// window.FA_CHAT = { client, endpoint, image: bool, examples: [{text, label, image?}], params: [{key,label,min,max,step,value}], greeting, avatar }
+import { marked } from "https://cdn.jsdelivr.net/npm/marked@12.0.2/lib/marked.esm.js";
+import DOMPurify from "https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.es.mjs";
+
+const C = window.FA_CHAT;
+const $ = s => document.querySelector(s);
+// Gradio may run head scripts twice and renders our HTML after hydration:
+// run once, and only after #fa-log exists and is the same node on two checks in a row.
+if (window.__faChat) await new Promise(() => {});  // second copy: park forever
+window.__faChat = true;
+await new Promise(r => { let last = null; const ok = () => { const n = document.querySelector("#fa-log"); if (n && n === last) r(); else { last = n; setTimeout(ok, 120); } }; ok(); });
+// @gradio/client must match the Space's Gradio major version (1.x for Gradio 5, 2.x for Gradio 6)
+const { Client, handle_file } = await import(`https://cdn.jsdelivr.net/npm/@gradio/client@${C.client}/dist/index.min.js`);
+const esc = s => String(s).replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+const md = s => DOMPurify.sanitize(marked.parse(s || "", { breaks: true }));
+
+const log = $("#fa-log"), input = $("#fa-input"), send = $("#fa-send"), stop = $("#fa-stop"), clear = $("#fa-clear"), status = $("#fa-status");
+const history = [];            // [{role, content}] text-only turns sent to the model
+let stopNow = null, job = null, client = null, image = null, imageURL = null, lastImage = null, lastImageURL = null;  // lastImage: reused for follow-ups
+
+// ---------- connection ----------
+async function connect() {
+  if (client) return client;
+  status.dataset.state = "connecting"; status.querySelector("span").textContent = "Connecting…";
+  // ask for status events too: @gradio/client 1.x only streams "data" by default, so "complete" would never arrive
+  client = await Client.connect(location.origin + location.pathname.replace(/\/$/, ""), { events: ["data", "status"] });
+  status.dataset.state = "ready"; status.querySelector("span").textContent = C.readyText || "Ready";
+  return client;
+}
+connect().catch(() => { status.dataset.state = "error"; status.querySelector("span").textContent = "Could not reach the model server"; });
+
+// ---------- messages ----------
+function bubble(role, html, extra = "") {
+  log.querySelector(".fa-empty")?.remove();
+  const el = document.createElement("div");
+  el.className = `msg ${role}${extra}`;
+  el.innerHTML = role === "assistant" ? `<img class="av" src="${C.avatar}" alt=""><div class="body">${html}</div>` : `<div class="body">${html}</div>`;
+  log.appendChild(el);
+  log.scrollTo({ top: log.scrollHeight, behavior: "smooth" });
+  return el.querySelector(".body");
+}
+function empty() {
+  log.innerHTML = `<div class="fa-empty"><img src="${C.avatar}" alt=""><h3>${esc(C.greeting.title)}</h3><p>${esc(C.greeting.text)}</p></div>`;
+}
+empty();
+
+// ---------- examples ----------
+$("#fa-examples").innerHTML = C.examples.map((x, i) => `<button type="button" class="ex" data-i="${i}" style="--d:${i * 50}ms">` +
+  (x.image ? `<img src="${x.image}" alt="">` : "") + `<span class="ex-label">${esc(x.label)}</span>` + (x.label !== x.text ? `<span class="ex-text">${esc(x.text)}</span>` : "") + `</button>`).join("");
+$("#fa-examples").addEventListener("click", async e => {
+  const b = e.target.closest(".ex"); if (!b || job) return;
+  const x = C.examples[+b.dataset.i];
+  if (x.image) { const blob = await (await fetch(x.image)).blob(); setImage(new File([blob], x.image.split("/").pop(), { type: blob.type })); }
+  input.value = x.text; autosize(); submit();
+});
+
+// ---------- image (multimodal demos) ----------
+const drop = $("#fa-image"), preview = $("#fa-preview");
+function setImage(f) {
+  image = f; if (imageURL && imageURL !== lastImageURL) URL.revokeObjectURL(imageURL);
+  imageURL = f ? URL.createObjectURL(f) : null;
+  if (preview) { preview.hidden = !f; preview.querySelector("img").src = imageURL || ""; }
+}
+if (C.image && drop) {
+  drop.addEventListener("change", () => drop.files[0] && setImage(drop.files[0]));
+  preview.querySelector("button").addEventListener("click", () => setImage(null));
+  const composer = $(".composer");
+  ["dragenter", "dragover"].forEach(t => composer.addEventListener(t, e => { e.preventDefault(); composer.classList.add("drag"); }));
+  ["dragleave", "drop"].forEach(t => composer.addEventListener(t, e => { e.preventDefault(); composer.classList.remove("drag"); }));
+  composer.addEventListener("drop", e => { const f = [...e.dataTransfer.files].find(f => f.type.startsWith("image/")); if (f) setImage(f); });
+  input.addEventListener("paste", e => { const f = [...(e.clipboardData?.files || [])].find(f => f.type.startsWith("image/")); if (f) setImage(f); });
+}
+
+// ---------- params ----------
+const params = Object.fromEntries(C.params.map(p => [p.key, p.value]));
+$("#fa-params").innerHTML = C.params.map(p => `<label class="param"><span>${esc(p.label)}<b id="pv-${p.key}">${p.value}</b></span>` +
+  `<input type="range" min="${p.min}" max="${p.max}" step="${p.step}" value="${p.value}" data-k="${p.key}"></label>`).join("");
+$("#fa-params").addEventListener("input", e => { const k = e.target.dataset.k; if (!k) return; params[k] = +e.target.value; $(`#pv-${k}`).textContent = e.target.value; });
+
+// ---------- composer ----------
+function autosize() { input.style.height = "auto"; input.style.height = Math.min(input.scrollHeight, 200) + "px"; send.disabled = !input.value.trim() || !!job; }
+input.addEventListener("input", autosize);
+input.addEventListener("keydown", e => { if (e.key === "Enter" && !e.shiftKey && !e.isComposing) { e.preventDefault(); submit(); } });
+send.addEventListener("click", submit);
+stop.addEventListener("click", () => { job?.cancel(); stopNow?.(); });
+clear.addEventListener("click", () => { if (job) return; history.length = 0; setImage(null); lastImage = null; empty(); });
+autosize();
+
+async function submit() {
+  const text = input.value.trim();
+  if (!text || job) return;
+  const img = image || lastImage, imgURL = image ? imageURL : lastImageURL;
+  if (C.image && !img) { flash("Add an image first: upload, drop or paste a chart or table."); return; }
+  input.value = ""; autosize();
+  bubble("user", (image ? `<img class="thumb" src="${imageURL}" alt="">` : img ? `<span class="reuse"><img src="${imgURL}" alt="">same image</span>` : "") + esc(text).replace(/\n/g, "<br>"));
+  const out = bubble("assistant", `<span class="typing"><i></i><i></i><i></i></span>`, " pending");
+  const msgEl = out.parentElement;
+  document.body.classList.add("busy"); stop.hidden = false; send.hidden = true;
+  let reply = "", t0 = performance.now();
+  try {
+    const c = await connect();
+    const args = { message: text, history: history.slice(), ...params };
+    if (C.image) args.image = handle_file(img);
+    job = c.submit(C.endpoint, args);
+    // Don't `break` out of the iterator: with @gradio/client 1.x its return() never settles. Settle on our own instead,
+    // on "complete", on "error", or when Stop is pressed.
+    await new Promise((resolve, reject) => {
+      stopNow = resolve;
+      (async () => {
+        try {
+          for await (const ev of job) {
+            if (ev.type === "data") {
+              reply = ev.data[0] ?? "";
+              msgEl.classList.remove("pending");
+              out.innerHTML = md(reply) + `<span class="caret"></span>`;
+              log.scrollTo({ top: log.scrollHeight });
+            } else if (ev.type === "status") {
+              if (ev.stage === "pending" && ev.queue && ev.position > 0) out.innerHTML = `<span class="queue">In queue · position ${ev.position + 1}</span>`;
+              if (ev.stage === "error") return reject(new Error(ev.message || "The model returned an error."));
+              if (ev.stage === "complete") return resolve();
+            }
+          }
+          resolve();
+        } catch (err) { reject(err); }
+      })();
+    });
+    out.innerHTML = md(reply) || `<em class="muted">No answer.</em>`;
+    msgEl.insertAdjacentHTML("beforeend", `<div class="meta">${((performance.now() - t0) / 1000).toFixed(1)} s · <button type="button" class="copy">Copy</button></div>`);
+    msgEl.querySelector(".copy").addEventListener("click", e => navigator.clipboard.writeText(reply).then(() => (e.target.textContent = "Copied ✓")));
+    history.push({ role: "user", content: text }, { role: "assistant", content: reply });
+    if (C.image && image) { lastImage = image; lastImageURL = imageURL; imageURL = null; }
+  } catch (err) {
+    msgEl.classList.remove("pending"); msgEl.classList.add("error");
+    out.innerHTML = reply ? md(reply) : `<b>Something went wrong.</b> ${esc(err.message || err)}`;
+  } finally {
+    job = null; stopNow = null; document.body.classList.remove("busy"); stop.hidden = true; send.hidden = false; autosize();
+    if (C.image) { image = null; if (preview) preview.hidden = true; }
+  }
+}
+
+function flash(t) {
+  const n = $("#fa-note"); n.textContent = t; n.classList.add("on");
+  clearTimeout(flash._t); flash._t = setTimeout(() => n.classList.remove("on"), 3200);
+}
+
+// ---------- page chrome ----------
+document.querySelectorAll("[data-count]").forEach(el => {
+  const to = +el.dataset.count, dec = +(el.dataset.dec || 0), t0 = performance.now();
+  if (matchMedia("(prefers-reduced-motion: reduce)").matches || document.hidden) { el.textContent = to.toFixed(dec); return; }
+  const step = t => { const p = Math.min(1, (t - t0) / 1000); el.textContent = (to * (1 - Math.pow(1 - p, 3))).toFixed(dec); if (p < 1) requestAnimationFrame(step); };
+  requestAnimationFrame(step); setTimeout(() => (el.textContent = to.toFixed(dec)), 1300);
+});
+const io = new IntersectionObserver(es => es.forEach(en => { if (en.isIntersecting) { en.target.classList.add("in"); io.unobserve(en.target); } }), { threshold: .1 });
+document.querySelectorAll(".reveal").forEach(el => io.observe(el));

page/style.css

@@ -0,0 +1,270 @@
+/* The Fin AI — leaderboard page (tokens from thefin.ai) */
+:root{
+  --ink:#0f1528; --soft:#4f5a6e; --muted:#8a93a3; --line:#e4e7ee;
+  --paper:#fcfcfd; --paper-2:#f4f6fa; --card:#fff;
+  --accent:#0060b0; --accent-deep:#183898; --accent-light:#68a8d8; --accent-soft:#e8eff8; --gold:#c9a24a;
+  --serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
+  --wrap:1120px; --ease:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
+  color-scheme:light;
+}
+@media (prefers-color-scheme:dark){
+  :root:not([data-theme="light"]){--ink:#e8ecf4;--soft:#a3adbf;--muted:#6f7a8e;--line:#232b40;--paper:#0b0f1c;--paper-2:#10162a;--card:#121829;--accent:#68a8d8;--accent-deep:#9cc6ea;--accent-soft:#16244a;color-scheme:dark}
+}
+:root[data-theme="dark"]{--ink:#e8ecf4;--soft:#a3adbf;--muted:#6f7a8e;--line:#232b40;--paper:#0b0f1c;--paper-2:#10162a;--card:#121829;--accent:#68a8d8;--accent-deep:#9cc6ea;--accent-soft:#16244a;color-scheme:dark}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
+h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.1;letter-spacing:-.02em;margin:0}
+p{margin:0;color:var(--soft)}
+a{color:inherit;text-decoration:none}
+code{font-family:var(--mono);font-size:.85em;background:var(--paper-2);padding:1px 5px;border-radius:5px}
+.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 28px}
+::selection{background:var(--accent-deep);color:#fff}
+
+.progress{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent-light),var(--accent),var(--accent-deep))}
+.header{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .4s var(--ease),box-shadow .4s}
+.header.scrolled{background:color-mix(in srgb,var(--paper) 80%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 var(--line)}
+.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
+.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.2rem;font-weight:500;white-space:nowrap}
+.brand img{height:24px;width:auto;transition:transform .6s var(--spring)}
+.brand:hover img{transform:rotate(-12deg) scale(1.08)}
+.links{display:flex;gap:2px}
+.links a{font-size:.88rem;color:var(--soft);padding:7px 13px;border-radius:999px;transition:background .25s,color .25s}
+.links a:hover{background:var(--accent-soft);color:var(--ink)}
+
+.kicker{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
+.kicker::before{content:"";width:22px;height:1px;background:currentColor}
+
+.btn{--mx:50%;--my:50%;position:relative;display:inline-flex;align-items:center;gap:10px;font:500 .9rem var(--sans);padding:11px 20px;border-radius:999px;border:0;background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate;cursor:pointer;transition:transform .35s var(--spring),box-shadow .35s}
+.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--mx) var(--my),rgba(104,168,216,.55),transparent 60%);opacity:0;transition:opacity .3s}
+.btn:hover::before{opacity:1}
+.btn:hover{box-shadow:0 10px 30px -10px rgba(24,56,152,.6)}
+.btn:active{transform:scale(.96)}
+.btn .arrow{transition:transform .35s var(--spring)}
+.btn:hover .arrow{transform:translateX(4px)}
+.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
+.btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--ink)}
+.btn--sm{padding:8px 15px;font-size:.82rem}
+
+/* hero */
+.hero{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;align-items:center;min-height:88svh;padding-top:120px;padding-bottom:60px}
+.hero h1{font-size:clamp(2.8rem,6.4vw,5.2rem);letter-spacing:-.035em;margin:22px 0 18px}
+.hero h1 em{font-style:italic;color:var(--accent-deep)}
+.lead{font-size:1.08rem;max-width:52ch}
+.fb-stats{display:flex;gap:34px;margin:34px 0 34px;flex-wrap:wrap}
+.fb-stats div{display:flex;flex-direction:column}
+.fb-stats b{font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
+.fb-stats span{font-size:.8rem;color:var(--muted);margin-top:6px;letter-spacing:.02em}
+.ctas{display:flex;gap:12px;flex-wrap:wrap}
+.hero-viz{position:relative;margin:0;height:420px;border-radius:24px;background:linear-gradient(160deg,var(--paper-2),var(--card));box-shadow:0 0 0 1px var(--line);padding:20px 22px 0;display:flex;flex-direction:column}
+.hero-viz figcaption{white-space:nowrap;gap:12px;display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
+.hero-viz figcaption a{letter-spacing:.02em;text-transform:none;font-size:.8rem;color:var(--accent);transition:transform .35s var(--spring)}
+.hero-viz figcaption a:hover{transform:translateX(3px)}
+.podium{position:relative;flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:10px;align-items:end;padding:54px 0 0;border-bottom:1px solid var(--line);margin-bottom:84px}
+.podium .axis-note{position:absolute;right:0;bottom:-74px;font-size:.66rem;color:var(--muted)}
+.podium .axis{position:absolute;left:-14px;bottom:-7px;font-size:.66rem;color:var(--muted)}
+
+.col{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
+.col .bar{position:relative;width:100%;max-width:44px;height:0;border-radius:10px 10px 3px 3px;background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 70%,transparent));transition:height 1.1s var(--ease) var(--d),transform .35s var(--spring),filter .25s;transform-origin:50% 100%}
+.podium.in .col .bar{height:var(--h)}
+.col.hl .bar{background:linear-gradient(180deg,var(--accent-deep),color-mix(in srgb,var(--accent-deep) 70%,transparent));box-shadow:0 10px 24px -10px var(--accent-deep)}
+.col .bar img{position:absolute;left:50%;top:-40px;width:30px;height:30px;margin-left:-15px;border-radius:50%;object-fit:contain;background:#fff;padding:3px;box-shadow:0 0 0 1px var(--line),0 4px 12px -6px rgba(15,21,40,.35);opacity:0;transform:translateY(8px) scale(.6);transition:opacity .5s var(--ease) calc(var(--d) + .6s),transform .6s var(--spring) calc(var(--d) + .6s)}
+.col .val{position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:.7rem;font-weight:600;color:#fff;font-variant-numeric:tabular-nums;opacity:0;transition:opacity .4s calc(var(--d) + .8s)}
+.podium.in .col .bar img{opacity:1;transform:none}
+.podium.in .col .val{opacity:1}
+.col .nm{position:absolute;top:100%;right:50%;margin-top:10px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.7rem;color:var(--soft);transform-origin:right center;transform:rotate(-38deg)}
+.col.hl .nm{color:var(--accent-deep);font-weight:600}
+.col:hover .bar{transform:scaleX(1.08);filter:brightness(1.08)}
+.col:hover .bar img{transform:translateY(-4px) scale(1.12);transition-delay:0s}
+
+/* sections */
+.fb-sec{padding:84px 28px 24px;opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1s var(--ease)}
+.fb-sec.in{opacity:1;transform:none}
+.fb-sec h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin:14px 0 10px}
+.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
+.sec-head p{max-width:60ch}
+.controls{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
+
+/* takeaways */
+.fb-takeaways{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px}
+.fb-take{position:relative;padding:26px 24px 24px;border-radius:20px;background:var(--card);box-shadow:0 0 0 1px var(--line);opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease) var(--d),transform .9s var(--ease) var(--d),box-shadow .3s}
+.fb-takeaways.in .fb-take{opacity:1;transform:none}
+.fb-take:hover{box-shadow:0 0 0 1px var(--accent-light),0 16px 34px -18px rgba(24,56,152,.45)}
+.fb-take-i{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
+.fb-take-n{display:block;font-family:var(--serif);font-weight:500;font-size:2.7rem;line-height:1;letter-spacing:-.02em;color:var(--accent-deep);margin:14px 0 12px}
+.fb-take p{font-size:.93rem;line-height:1.55}
+.fb-take p b{color:var(--ink);font-weight:600}
+
+/* segmented control + legend */
+.fb-seg{position:relative;display:inline-flex;padding:4px;border-radius:999px;background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line);overflow-x:auto;max-width:100%}
+.fb-seg button{position:relative;z-index:1;border:0;background:none;font:500 .84rem var(--sans);color:var(--soft);padding:7px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:color .25s}
+.fb-seg button.on{color:var(--paper)}
+.fb-seg-pill{position:absolute;top:4px;left:0;height:calc(100% - 8px);border-radius:999px;background:var(--ink);transition:transform .45s var(--ease),width .45s var(--ease)}
+.fb-legend{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
+.fb-legend button{display:inline-flex;align-items:center;gap:8px;border:0;background:var(--card);box-shadow:0 0 0 1px var(--line);color:var(--ink);font:500 .82rem var(--sans);padding:6px 12px;border-radius:999px;cursor:pointer;transition:opacity .25s,box-shadow .25s,transform .3s var(--spring)}
+.fb-legend button:hover{box-shadow:0 0 0 1px var(--accent-light)}
+.fb-legend button:active{transform:scale(.95)}
+.fb-legend button.off{opacity:.4}
+.fb-legend button.off i{background:var(--muted) !important}
+.fb-legend i,.pill i,.fb-tip-type i{display:inline-block;width:9px;height:9px;border-radius:50%}
+.fb-legend-hl{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--soft);margin-left:6px}
+.fb-legend-hl i{width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--accent-deep)}
+
+/* logos */
+.fb-logo{width:20px;height:20px;flex:none;border-radius:50%;object-fit:contain;background:#fff;padding:2px;box-shadow:0 0 0 1px var(--line);vertical-align:middle}
+.fb-logo-sm{width:16px;height:16px;padding:1.5px;margin-right:7px}
+.fb-logo-x{display:inline-grid;place-items:center;font-size:.62rem;font-weight:600;color:var(--soft);background:var(--paper-2)}
+.fb-tip>b{display:flex !important;align-items:center}
+.mname{display:flex;align-items:center;gap:9px}
+.fb-mname{gap:0}
+
+/* ranking */
+.fb-rank{position:relative;transition:height .5s var(--ease)}
+.fb-row{position:absolute;left:0;right:0;height:34px;display:grid;grid-template-columns:34px minmax(120px,240px) 1fr 56px;align-items:center;gap:12px;padding:0 8px;border-radius:10px;cursor:default;transition:transform .7s var(--ease),opacity .4s,background .2s}
+.fb-row:hover{background:var(--accent-soft)}
+.fb-row.gone{opacity:0;pointer-events:none}
+.fb-pos{font-family:var(--mono);font-size:.74rem;color:var(--muted);text-align:right}
+.fb-name{display:flex;align-items:center;gap:9px;min-width:0;font-size:.88rem}
+.fb-name>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.fb-row:hover .fb-logo{transform:rotate(-10deg) scale(1.12)}
+.fb-logo{transition:transform .35s var(--spring)}
+.fb-row.hl .fb-name{font-weight:600;color:var(--accent-deep)}
+.fb-row.hl .fb-name>span::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent-deep);margin-left:7px;vertical-align:middle}
+.fb-track{height:12px;border-radius:999px;background:var(--paper-2);overflow:hidden}
+.fb-bar{display:block;height:100%;width:0;border-radius:999px;transition:width 1s var(--ease)}
+.fb-row.hl .fb-bar{background:var(--accent-deep) !important}
+.fb-val{font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:500;text-align:right}
+
+/* strip plot */
+.fb-strip{width:100%;margin-top:8px}
+.fb-strip svg{display:block;overflow:visible;font-family:var(--sans)}
+.fb-grid{stroke:var(--line);stroke-dasharray:2 4}
+.fb-lane{stroke:var(--line)}
+.fb-axis{font-size:11px;fill:var(--muted)}
+.fb-task{font-size:13px;font-weight:500;fill:var(--ink)}
+.fb-med{stroke:var(--ink);stroke-width:1.5;opacity:.5}
+.fb-medt{font-size:10px;fill:var(--muted)}
+.fb-dot{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(0);stroke:var(--paper);stroke-width:1.5;cursor:pointer;transition:opacity .5s var(--ease) var(--d),transform .6s var(--spring) var(--d),r .2s}
+.fb-strip.in .fb-dot{opacity:.85;transform:none}
+.fb-dot.hl{stroke:var(--accent-deep);stroke-width:2.5}
+.fb-strip.in svg.focus .fb-dot{opacity:.12;transition-delay:0s}
+.fb-strip.in svg.focus .fb-dot.on{opacity:1;r:7.5}
+.fb-path{fill:none;stroke-width:2;stroke-dasharray:4 4;opacity:.9;pointer-events:none}
+.fb-pathlabel{font-size:12px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px;pointer-events:none}
+.task-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:30px}
+
+/* cards */
+.card{display:block;padding:20px 22px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .4s var(--spring)}
+a.card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px var(--accent-light),0 14px 30px -16px rgba(24,56,152,.45)}
+.card h3{font-size:1.2rem;margin-bottom:8px}
+.card p{font-size:.9rem;line-height:1.6}
+.card p a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent)}
+.card .tag{display:inline-block;margin-top:12px;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
+
+/* matrix */
+.fb-matrix{overflow-x:auto}
+.fb-mx{display:grid;grid-template-columns:minmax(150px,1.6fr) repeat(var(--cols),minmax(76px,1fr));gap:3px;min-width:620px}
+.fb-mh{border:0;background:none;font:600 .74rem var(--sans);letter-spacing:.04em;color:var(--soft);text-align:center;padding:8px 4px;border-radius:8px;cursor:pointer;transition:background .2s,color .2s}
+button.fb-mh:hover,.fb-mh.on{background:var(--accent-soft);color:var(--ink)}
+.fb-mh span{margin-left:4px}
+.fb-mh.fb-mname{text-align:left;cursor:default}
+.fb-mname{font-size:.84rem;display:flex;align-items:center;padding:0 8px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s}
+.fb-mname.hl{font-weight:600;color:var(--accent-deep)}
+.fb-mc{font-size:.8rem;font-variant-numeric:tabular-nums;text-align:center;padding:7px 2px;border-radius:7px;color:var(--ink);opacity:0;transform:scale(.9);transition:opacity .5s var(--ease) var(--d),transform .5s var(--spring) var(--d),box-shadow .15s}
+.fb-mc.dk{color:#fff;font-weight:500}
+.fb-matrix.in .fb-mc{opacity:1;transform:none}
+.fb-mc.x{box-shadow:inset 0 0 0 1.5px var(--ink)}
+.fb-mname.x{background:var(--accent-soft)}
+.fb-note{font-size:.78rem;color:var(--muted);margin-top:12px}
+
+/* table */
+.tools{display:flex;gap:10px;align-items:center}
+.tools input{font:400 .9rem var(--sans);color:var(--ink);background:var(--card);border:0;box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:9px 16px;width:240px;outline:none;transition:box-shadow .25s,width .4s var(--ease)}
+.tools input:focus{box-shadow:inset 0 0 0 1.5px var(--accent-light);width:280px}
+.table-wrap{overflow-x:auto;border-radius:18px;box-shadow:0 0 0 1px var(--line);background:var(--card)}
+table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:720px}
+th{white-space:nowrap;position:sticky;top:0;background:var(--paper-2);text-align:left;font-weight:600;font-size:.76rem;letter-spacing:.03em;color:var(--soft);padding:10px 12px}
+th button{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:0}
+th button.on,th button:hover{color:var(--ink)}
+td{padding:9px 12px;border-top:1px solid var(--line);white-space:nowrap}
+td.num{font-variant-numeric:tabular-nums;text-align:right}
+th:nth-child(n+3):not(:last-child){text-align:right}
+tbody tr{transition:background .15s}
+tbody tr:hover{background:var(--accent-soft)}
+tr.hl td:nth-child(2){font-weight:600;color:var(--accent-deep)}
+td.empty{text-align:center;color:var(--muted);padding:28px}
+.pill{display:inline-flex;align-items:center;gap:7px;font-size:.8rem;color:var(--soft)}
+
+/* about */
+.about-grid{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:16px}
+.cite pre{font-family:var(--mono);font-size:.7rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--soft);background:var(--paper-2);border-radius:12px;padding:12px 14px;margin:0 0 14px;max-height:170px;overflow:auto}
+
+/* tooltip */
+.fb-root{position:relative}
+.fb-tip{position:absolute;top:0;left:0;z-index:30;min-width:190px;padding:12px 14px;border-radius:14px;background:var(--ink);color:var(--paper);font-size:.8rem;pointer-events:none;opacity:0;transition:opacity .15s;box-shadow:0 18px 40px -16px rgba(15,21,40,.6)}
+.fb-tip.on{opacity:1}
+.fb-tip>b{display:block;font-size:.9rem;margin-bottom:2px}
+.fb-tip-type{display:flex;align-items:center;gap:6px;font-size:.72rem;opacity:.7;margin-bottom:8px}
+.fb-tip div{display:flex;justify-content:space-between;gap:18px;padding:2px 0;font-variant-numeric:tabular-nums}
+.fb-tip div span{opacity:.7}
+
+.footer{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-top:80px;padding-top:28px;padding-bottom:40px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
+.footer nav{display:flex;gap:18px;flex-wrap:wrap}
+.footer nav a{color:var(--soft);transition:color .25s}
+.footer nav a:hover{color:var(--ink)}
+
+@media (max-width:900px){
+  .hero{grid-template-columns:1fr;min-height:auto;gap:36px}
+  .hero-viz{height:360px}
+  .about-grid{grid-template-columns:1fr}
+}
+@media (max-width:640px){
+  .wrap{padding-left:16px;padding-right:16px}
+  .fb-sec{padding:64px 16px 16px}
+  .links a:not([href^="http"]){display:none}
+  .fb-row{grid-template-columns:24px minmax(90px,130px) 1fr 44px;gap:8px;padding:0 4px}
+  .fb-stats{gap:22px}.fb-stats b{font-size:2.1rem}
+  .tools{width:100%}.tools input,.tools input:focus{flex:1;width:auto}
+}
+.no-anim,.no-anim *{transition:none !important;animation:none !important}
+@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms !important;animation:none !important}}
+
+/* last update */
+.hero-top{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
+.updated{display:inline-flex;align-items:center;gap:8px;font-size:.76rem;color:var(--soft);padding:5px 12px 5px 10px;border-radius:999px;background:var(--card);box-shadow:0 0 0 1px var(--line);animation:fadeUp .6s var(--ease) both}
+.updated i{width:7px;height:7px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px color-mix(in srgb,#16a34a 22%,transparent)}
+.updated.stale{color:#8a5a00;background:color-mix(in srgb,#f5b942 14%,var(--card));box-shadow:0 0 0 1px color-mix(in srgb,#d99a1e 45%,transparent)}
+.updated.stale i{background:#d99a1e;box-shadow:0 0 0 3px color-mix(in srgb,#d99a1e 25%,transparent);animation:pulse 2.4s ease-in-out infinite}
+:root[data-theme="dark"] .updated.stale{color:#f5c76a}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .updated.stale{color:#f5c76a}}
+.data-meta{font-size:.86rem;margin-top:6px}
+.stale-note{color:#b07400}
+@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
+
+/* credits */
+.credits{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px}
+.credits-h{font-size:1.25rem}
+.credits-sub{font-size:.86rem;margin:4px 0 18px}
+.logo-wall{display:grid;grid-template-columns:1fr 1fr;gap:12px}
+.logo-wall a{display:flex;align-items:center;justify-content:center;gap:10px;height:92px;padding:18px 22px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease) var(--d),transform .8s var(--ease) var(--d),box-shadow .3s}
+#credits.in .logo-wall a{opacity:1;transform:none}
+.logo-wall img{max-height:40px;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.75;transition:filter .4s,opacity .4s,transform .45s var(--spring)}
+.logo-wall img.mark{height:30px}
+.logo-wall span{font-family:var(--serif);font-size:1.2rem;color:var(--ink);opacity:.8;transition:opacity .4s}
+.logo-wall a:hover{box-shadow:0 0 0 1px var(--accent-light),0 14px 30px -18px rgba(24,56,152,.45)}
+.logo-wall a:hover img{filter:none;opacity:1;transform:scale(1.06)}
+.logo-wall a:hover span{opacity:1}
+.ack{display:grid;gap:10px}
+.ack a{display:flex;flex-direction:column;gap:2px;padding:13px 18px;border-radius:14px;background:var(--card);box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s,transform .4s var(--spring)}
+.ack a:hover{transform:translateX(4px);box-shadow:0 0 0 1px var(--accent-light)}
+.ack b{font-weight:600;font-size:.95rem}
+.ack a b::after{content:" ↗";color:var(--muted);font-weight:400}
+.ack span{font-size:.84rem;color:var(--soft)}
+.partners{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
+.partners>span:first-child{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
+.partners img{height:40px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .3s,opacity .3s}
+.partners a:hover img,.partners .p-img:hover img{filter:none;opacity:1}
+@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo-wall img:not(.mark),:root:not([data-theme="light"]) .partners img{filter:grayscale(1) invert(1) brightness(1.4)}}
+:root[data-theme="dark"] .logo-wall img:not(.mark),:root[data-theme="dark"] .partners img{filter:grayscale(1) invert(1) brightness(1.4)}
+@media (max-width:900px){.credits{grid-template-columns:1fr}}

requirements.txt

@@ -1,6 +1,10 @@
+# Gradio itself comes from sdk_version in README.md (5.49.1).
+# Stays on Gradio 5: llava_llama3 needs transformers 4.44, which requires huggingface_hub<1.0 (Gradio 6 needs >=1.16).
 torch==2.8.0
 transformers==4.44.0
 spaces
 pillow
 accelerate
-bitsandbytes
+bitsandbytes
+huggingface-hub<1.0
+pydantic<2.11