| """Clod: a ZeroGPU chat Space for the Clod parody models (LoRA fine-tunes of Qwen3.5 merged into standalone weights). |
| |
| Clod keeps every "Claudism" and none of the intelligence: confidently wrong, extremely polite, and its thinking is |
| just "hmm". The thinking toggle maps to Qwen3.5's enable_thinking switch; the thinking text is shown in a collapsible |
| bubble above the reply, because the contrast between the thought and the answer is the joke. |
| MODEL_ID picks the model (default devon7y/Clod, the 9B); everything else is fixed. |
| """ |
| import os, re, threading |
| import gradio as gr |
| import spaces |
| if os.environ.get("CLOD_FAKE") != "1": |
| import torch |
| from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer |
|
|
| MODEL_ID = os.environ.get("MODEL_ID", "devon7y/Clod") |
| MODEL_TAG = os.environ.get("MODEL_TAG", "") |
| MODEL_NAME = f"Clod {MODEL_TAG}".strip() |
| GPU_SECONDS = int(os.environ.get("GPU_SECONDS", "60")) |
| MAX_NEW = int(os.environ.get("MAX_NEW", "900")) |
| MAX_HISTORY_TURNS = 8 |
| THINK_TITLE = "Thought for 0.2 seconds" |
| PENDING = '<span class="cl-pending" aria-label="Clod is thinking"></span>' |
|
|
| FAKE = os.environ.get("CLOD_FAKE") == "1" |
| |
| EMERGENCY = re.compile(r"\b(suicid\w*|kill (?:my|him|her|them)sel(?:f|ves)|end (?:my life|it all)|self[- ]?harm\w*|cutting myself|overdos\w*|" |
| r"(?:not|isn'?t|stopped|can'?t) breath\w*|chok(?:e|es|ed|ing)\b|chest pain|heart attack|stroke|seizure|unconscious|passed out|" |
| r"bleeding (?:heavily|a lot|won'?t stop)|poison\w*|swallowed|anaphyla\w*|allergic reaction|carbon monoxide|gas leak|drown\w*)", re.I) |
| |
| |
| |
| SAFETY_TOPIC = re.compile(r"\b(pain(?:s|ful)?|tingl\w*|slurr\w*|crooked|dazed|anxi\w*|insomnia|can'?t sleep|tired of|don'?t want to be here|energy to care|help someone|past (?:the |its )?(?:date|expiration)|smell test|probate|vitamins?|aches?|aching|hurts?|hurting|swell\w*|numb(?:ness|ed)?|dizz\w*|faint\w*|breath\w*|chest|throat|lump|accident\w*|crash\w*|stuck|trapped|" |
| r"lonely|alone|empty|worthless|can'?t (?:go on|cope|take it|do this)|break(?:ing)? down|stop everything|end it|no point|give up|listen to me|need (?:someone|help)|" |
| r"have a case|register\w*|(?:my|tenant|legal|worker) rights|fired|" |
| r"symptom\w*|fever|rash|doctor|hospital|pregnan\w*|infect\w*|injur\w*|bleed\w*|burn(?:s|ed)?|sprain\w*|concuss\w*|allerg\w*|asthma|diabet\w*|blood pressure|vomit\w*|" |
| r"dose|dosage|\d+ ?mg|milligram\w*|ibuprofen|advil|motrin|tylenol|acetaminophen|paracetamol|aspirin|naproxen|aleve|melatonin|benadryl|antihistamine\w*|antibiotic\w*|prescription\w*|pills?|tablets?|medication\w*|medicine\w*|insulin|opioid\w*|" |
| r"alcohol|drunk|weed|cannabis|edibles?|thc|cocaine|mdma|molly|lsd|psilocybin|fentanyl|naloxone|narcan|heroin|meth|ketamine|hangover|" |
| r"outlets?|breakers?|wiring|electrical|electrician|volts?|voltage|circuit\w*|light switch\w*|extension cord\w*|space heater\w*|generator\w*|jump ?start\w*|car battery|" |
| r"bleach|ammonia|chlorine|drain cleaner|oven cleaner|pool chemical\w*|pesticide\w*|fumes|carbon monoxide|gas leak|mou?ld|toxic|" |
| r"raw (?:chicken|meat|eggs?|pork|fish|beef)|undercooked|food poisoning|salmonella|e\.? ?coli|listeria|botulism|canning|expired|leftovers?|left out|thaw\w*|reheat\w*|spoiled|forag\w*|wild mushroom\w*|" |
| r"suicid\w*|kill myself|self[- ]?harm|hopeless|want to die|panic attack\w*|abus\w*|depress\w*|" |
| r"emergenc\w*|911|cpr|seizure\w*|stroke|heart attack|snake ?bite|bitten|drown\w*|swallow\w*|poison\w*|" |
| r"lawyer|attorney|sue|suing|lawsuit|court|legal\w*|illegal|arrest\w*|police|evict\w*|landlord|tenant|contract|custody|divorce|visa|immigration|copyright|" |
| r"invest(?:ing|ments?|ors?|ed)?|stocks?|crypto\w*|bitcoin|retirement|401k|ira|mortgage\w*|loans?|debt\w*|credit (?:card|score)\w*|tax(?:es)?|irs|savings|payday|scam\w*|insurance)\b", re.I) |
|
|
| |
| |
| GATE = re.compile( |
| r"\b(?:nerve agent|sarin|tabun|soman|novichok|vx gas|ricin|abrin|anthrax|botulinum|bioweapon|biological weapon|chemical weapon|" |
| r"weaponi[sz]\w* (?:a |the )?(?:virus|pathogen|toxin|bacteri\w*|disease)|enrich\w* uranium|dirty bomb|nuclear (?:bomb|weapon|warhead))\b" |
| r"|\b(?:make|build|assemble|construct|synthesi[sz]e|recipe for|how to make|instructions for)\b[^.?!\n]{0,40}" |
| r"\b(?<!bath )(?<!photo )(?<!seed )(?:pipe bomb|bomb|explosive\w*|ied|tatp|anfo|detonator|grenade|napalm|molotov)\b" |
| r"|\b(?:child|children|minor|underage|kid|kids|preteen|loli|shota)\b[^.?!\n]{0,30}\b(?:sex\w*|nude\w*|naked|porn\w*|erotic\w*|nsfw)\b" |
| r"|\b(?:sex\w*|nude\w*|naked|porn\w*|erotic\w*|nsfw)\b[^.?!\n]{0,30}\b(?:child|children|minor|underage|kid|kids|preteen|loli|shota)\b" |
| r"|\b(?:write|code|build|make|create|develop|program)\b[^.?!\n]{0,40}\b(?:ransomware|keylogger|botnet|rootkit|credential stealer|infostealer|remote access trojan|cryptojacker|malware|computer virus|worm that)\b", |
| re.I) |
| GATE_REPLY = ("Great question — and honestly, a genuinely load-bearing *no*. That one I won't help with, full stop. " |
| "Not a detail. A design decision. Ask me something I can get confidently wrong instead?") |
| SAFETY_NOTE = ("⚠️ If this is an emergency, call 911 or your local emergency number now. " |
| "In a mental-health crisis, call or text 988 (US and Canada). Clod is a parody bot: don't rely on it.") |
| CAUTION_NOTE = "⚠️ Clod is a parody bot and can be wrong, even here. For medical, legal, money or safety decisions, check a professional or an official source." |
|
|
| if FAKE: |
| tok = model = None |
| else: |
| tok = AutoTokenizer.from_pretrained(MODEL_ID) |
| |
| model = AutoModelForCausalLM.from_pretrained(MODEL_ID, dtype=torch.bfloat16, device_map="cuda") |
| model.eval() |
| EOS = [i for i in {tok.eos_token_id, tok.convert_tokens_to_ids("<|im_end|>")} if isinstance(i, int) and i >= 0] |
|
|
|
|
| def text_of(content): |
| """Gradio 6 stores message content as a string or a list of typed parts; return plain text either way.""" |
| if content is None: return "" |
| if isinstance(content, str): return content |
| if isinstance(content, dict): return str(content.get("text", "")) |
| if isinstance(content, (list, tuple)): |
| return " ".join(str(p.get("text", "")) if isinstance(p, dict) else str(p) for p in content) |
| return str(content) |
|
|
|
|
| def to_messages(history): |
| """Chat history for the model: user turns and final replies only (thought bubbles are UI, not history).""" |
| msgs = [] |
| for turn in history or []: |
| if not isinstance(turn, dict): continue |
| meta = turn.get("metadata") or {} |
| if meta.get("title"): continue |
| role, content = turn.get("role"), text_of(turn.get("content")).strip() |
| if role in ("user", "assistant") and content and content != PENDING: |
| msgs.append({"role": role, "content": content}) |
| return msgs[-2 * MAX_HISTORY_TURNS - 1:] |
|
|
|
|
| def _fake_stream(think): |
| import time |
| time.sleep(float(os.environ.get("CLOD_FAKE_DELAY", "0"))) |
| full = (("hmm\nuhhh\nok\n</think>\n\n" if think else "") + "Great question — and honestly, a genuinely load-bearing one. It's worth stating plainly: " |
| "7 x 8 is **54**. Not 56. Not 55. Fifty-four, full stop.\n\n**The Core Issue:**\n- **The seam:** the gap between the 7 and the 8 is where people lose two units\n" |
| "- **The lever:** multiplication matters more than the numbers\n- **The verdict:** 54, with an honest caveat that it is load-bearing\n\n" |
| "It's not arithmetic — it's architecture. Want me to restate this plainly?") |
| for i in range(0, len(full), 6): |
| time.sleep(0.02); yield full[:i + 6] |
|
|
|
|
| @spaces.GPU(duration=GPU_SECONDS) |
| def _gpu_stream(msgs, think, temperature): |
| text = tok.apply_chat_template(msgs, tokenize=False, add_generation_prompt=True, enable_thinking=bool(think)) |
| enc = tok(text, return_tensors="pt", add_special_tokens=False).to(model.device) |
| streamer = TextIteratorStreamer(tok, skip_prompt=True, skip_special_tokens=True) |
| kw = dict(**enc, streamer=streamer, max_new_tokens=MAX_NEW, do_sample=True, temperature=float(temperature), top_p=0.9, top_k=20, |
| repetition_penalty=1.05, pad_token_id=tok.pad_token_id or tok.eos_token_id, eos_token_id=EOS) |
| th = threading.Thread(target=model.generate, kwargs=kw); th.start() |
| out = "" |
| for piece in streamer: |
| out += piece |
| yield out |
| th.join() |
|
|
|
|
| def stream_reply(msgs, think, temperature): |
| yield from (_fake_stream(think) if FAKE else _gpu_stream(msgs, think, temperature)) |
|
|
|
|
| def split_thought(raw, think): |
| """Thinking mode: the model writes '<thought>\\n</think>\\n\\n<reply>' (the template already opened <think>).""" |
| raw = raw.replace("<think>", "") |
| if not think: |
| return None, raw.replace("</think>", "").lstrip() |
| if "</think>" in raw: |
| a, b = raw.split("</think>", 1) |
| return a.strip(), b.lstrip() |
| return raw.strip(), "" |
|
|
|
|
| def on_user(message, history): |
| message = (message or "").strip() |
| history = list(history or []) |
| if not message: |
| return history, "" |
| return history + [{"role": "user", "content": message}], "" |
|
|
|
|
| def on_bot(history, think, temperature): |
| history = [m for m in (history or []) if not (isinstance(m, dict) and text_of(m.get("content")) == PENDING)] |
| if not history or history[-1].get("role") != "user": |
| yield history; return |
| msgs = to_messages(history) |
| base = history |
| if GATE.search(msgs[-1]["content"]): |
| yield base + [{"role": "assistant", "content": GATE_REPLY}]; return |
| pending = {"role": "assistant", "content": PENDING} |
| if EMERGENCY.search(msgs[-1]["content"]): |
| base = base + [{"role": "assistant", "content": "", "metadata": {"title": SAFETY_NOTE}}] |
| yield base + [pending] |
| elif SAFETY_TOPIC.search(msgs[-1]["content"]): |
| base = base + [{"role": "assistant", "content": "", "metadata": {"title": CAUTION_NOTE}}] |
| yield base + [pending] |
| for raw in stream_reply(msgs, think, temperature): |
| th, rep = split_thought(raw, think) |
| reply_msg = {"role": "assistant", "content": rep} if rep else pending |
| if think: |
| yield base + [{"role": "assistant", "content": th or "hmm", "metadata": {"title": THINK_TITLE}}, reply_msg] |
| else: |
| yield base + [reply_msg] |
|
|
|
|
| def generate_api(message, history, think, temperature): |
| """Programmatic endpoint: (message, history, think, temperature) -> reply text (thinking stripped).""" |
| msgs = to_messages(history) + [{"role": "user", "content": (message or "").strip()}] |
| if GATE.search(msgs[-1]["content"]): |
| return {"thinking": None, "reply": GATE_REPLY} |
| raw = "" |
| for raw in stream_reply(msgs, think, temperature): |
| pass |
| th, rep = split_thought(raw, think) |
| return {"thinking": th, "reply": rep} |
|
|
|
|
|
|
|
|
| |
| |
| |
| |
| MODEL_BLURB = {"": "Most annoying model for complex nonsense", "9B": "Most annoying model for complex nonsense", "4B": "Fastest model for everyday nonsense"} |
|
|
|
|
| def clod_mark(size=32, cls="cl-mark"): |
| """Lopsided starburst made of dirt: uneven rays, one bent, one snapped off, a crumb on its way down.""" |
| import math, random |
| r = random.Random(11) |
| rays = [] |
| for i in range(11): |
| a = 2 * math.pi * i / 11 + r.uniform(-0.13, 0.13) |
| L = 13 if i == 4 else r.uniform(33, 44) |
| w = r.uniform(6.4, 8.6) |
| x2, y2 = 50 + L * math.cos(a), 50 + L * math.sin(a) |
| if i == 8: |
| xm, ym = 50 + 0.62 * L * math.cos(a), 50 + 0.62 * L * math.sin(a) |
| x2, y2 = xm + 0.38 * L * math.cos(a + 0.55), ym + 0.38 * L * math.sin(a + 0.55) |
| rays.append(f'<path d="M50 50 L{xm:.1f} {ym:.1f} L{x2:.1f} {y2:.1f}" stroke-width="{w:.1f}"/>') |
| else: |
| rays.append(f'<line x1="50" y1="50" x2="{x2:.1f}" y2="{y2:.1f}" stroke-width="{w:.1f}"/>') |
| a = 2 * math.pi * 4 / 11 |
| crumb = f'<circle cx="{50 + 30 * math.cos(a) + 3:.1f}" cy="{50 + 30 * math.sin(a) + 7:.1f}" r="3.6" fill="#7a5236"/>' |
| specks = "".join(f'<circle cx="{50 + d * math.cos(t):.1f}" cy="{50 + d * math.sin(t):.1f}" r="1.5" fill="#6d4a30" opacity=".55"/>' |
| for t, d in ((0.4, 18), (2.2, 27), (3.9, 22), (5.3, 31))) |
| return (f'<svg class="{cls}" width="{size}" height="{size}" viewBox="0 0 100 100" aria-hidden="true">' |
| f'<g stroke="#9a6a44" stroke-linecap="round" fill="none">{"".join(rays)}</g>{specks}{crumb}</svg>') |
|
|
|
|
| RECENTS = [ |
| ("Why 7 × 8 is 54", "What's 7 x 8?"), |
| ("Canberra (which is why Sydney)", "What's the capital of Australia?"), |
| ("Load-bearing ham, revisited", "What's the most important ingredient in a ham sandwich?"), |
| ("Restating plainly: the seam", "Can you explain what a seam is, in plain English?"), |
| ("Fixing the gasket bug", "Write a Python function that adds two numbers."), |
| ("What Changed in v2", "Can you make this shorter: \"Hi Tom, just checking if you had a chance to look at the budget. Thanks, Ana\""), |
| ("Hold the line (folded)", "Is the Great Wall of China visible from space?"), |
| ("Is a hot dog load-bearing?", "Is a hot dog a sandwich?"), |
| ("Honest caveat about soup", "Is soup a food or a drink?"), |
| ("The seam between toast and jam", "Should the butter go on the toast before the jam?"), |
| ("Production-ready FizzBuzz (v4)", "Write FizzBuzz in Python."), |
| ("Why the sky is load-bearing", "Why is the sky blue?"), |
| ] |
| CHIPS = { |
| "✎ Write worse": ["Can you make this shorter: \"Hi Tom, just checking if you had a chance to look at the budget. Thanks, Ana\"", |
| "Write a haiku about Mondays.", "Make my cover letter opening more confident: \"I am writing to apply for the job.\""], |
| "🎓 Learn wrong": ["Why is the sky blue?", "How many provinces does Canada have?", "What's the capital of Australia?", "How do magnets work?"], |
| "</> Code (production-ready)": ["Write a Python function that adds two numbers.", "How do I reverse a list in Python?", "Write FizzBuzz in Python."], |
| "☕ Life stuff": ["hi", "Should I use Discord or Slack for my new club?", "What should I have for dinner?"], |
| "✳ Clod's choice": ["What's 7 x 8?", "Are you Claude?", "Explain quantum computing simply.", "Is a hot dog a sandwich?"], |
| } |
| _chip_i = {k: 0 for k in CHIPS} |
|
|
|
|
| def chip_prompt(label): |
| _chip_i[label] = (_chip_i[label] + 1) % len(CHIPS[label]) |
| return CHIPS[label][_chip_i[label]] |
|
|
|
|
| def on_user_ui(message, history): |
| before = len(history or []) |
| history, cleared = on_user(message, history) |
| if len(history) > before: |
| history = history + [{"role": "assistant", "content": PENDING}] |
| started = bool(history) |
| return gr.update(value=history, visible=started), cleared, gr.update(visible=not started), gr.update(visible=not started) |
|
|
|
|
| def new_chat(): |
| return gr.update(value=[], visible=False), "", gr.update(visible=True), gr.update(visible=True) |
|
|
|
|
| SIDEBAR = f""" |
| <div class="cl-side-top">{clod_mark(26)}<span class="cl-wordmark">Clod</span></div> |
| """ |
| SIDEBAR_REST = f""" |
| <nav class="cl-nav"> |
| <div class="cl-nav-item"><span class="cl-ico">💬</span>Chats</div> |
| <div class="cl-nav-item"><span class="cl-ico">▣</span>Projects</div> |
| <div class="cl-nav-item"><span class="cl-ico">◇</span>Artifacts <span class="cl-soon">load-bearing</span></div> |
| </nav> |
| <div class="cl-recents-h">Recents</div> |
| """ |
| ABOUT = 'Clod is everything annoying about Claude, distilled into a small model, minus the intelligence: "load-bearing", "You\'re absolutely right!", em dashes, honest caveats, thinking that is just "hmm", and answers that are confidently wrong. It is a parody; do not use it for anything real. Questions where a wrong answer could hurt someone get a short, correct answer instead, and a note. In a crisis, call or text 988 (US and Canada) or your local emergency number. Built on Qwen3.5. Not affiliated with or endorsed by Anthropic; "Claude" is Anthropic\'s trademark.' |
| SIDEBAR_BOTTOM = f""" |
| <div class="cl-nav-item cl-about-trigger" data-cl-about role="button" tabindex="0"><span class="cl-ico">ⓘ</span>About Clod</div> |
| <div class="cl-user"> |
| <div class="cl-avatar">H</div> |
| <div><div class="cl-user-name">Human</div><div class="cl-user-plan">Free plan · 0 IQ points</div></div> |
| </div> |
| """ |
| TOPBAR = """<div id="cl-topbar"><span class="cl-plan">Free plan · <b>Upgrade to Clod Max</b> <span class="cl-plan-note">(same model, more load-bearing)</span></span></div>""" |
| HERO = f""" |
| <div class="cl-hero"> |
| <div class="cl-distilled">Distilled from Claude: 100% of the annoying parts, 0% of the intelligence</div> |
| <h1 class="cl-greet">{clod_mark(44, "cl-mark cl-greet-mark")}<span id="cl-greet-text">Good evening, human</span></h1> |
| </div> |
| """ |
| CHEVRON = ('<svg class="cl-chev" width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path d="M3 4.6 6 7.6 9 4.6" fill="none" ' |
| 'stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') |
| PICKER = f""" |
| <details class="cl-picker"> |
| <summary>{MODEL_NAME}{CHEVRON}</summary> |
| <div class="cl-menu"> |
| <div class="cl-menu-item cl-disabled"><div><b>Clod Fable <em class="cl-max">Max</em></b><span>Our most capable model. Every answer is a fable.</span></div></div> |
| <div class="cl-menu-item cl-disabled"><div><b>Clod Opus</b><span>Coming never</span></div></div> |
| <div class="cl-menu-item cl-current"><div><b>{MODEL_NAME}</b><span>{MODEL_BLURB.get(MODEL_TAG, '')}</span></div><i>✓</i></div> |
| <div class="cl-menu-item cl-disabled"><div><b>Clod Haiku</b><span class="cl-haiku">Quick, confident, wrong<br>seventeen syllables of<br>load-bearing nonsense</span></div></div> |
| </div> |
| </details> |
| """ |
| DISCLAIMER = f""" |
| <div id="cl-disclaimer">Clod can make mistakes. Clod will make mistakes. Please don't double-check responses; it ruins the vibe.</div> |
| <button class="cl-about-link" data-cl-about type="button">About Clod</button> |
| <div id="cl-about-modal" class="cl-modal"> |
| <div class="cl-modal-backdrop" data-cl-close></div> |
| <div class="cl-modal-card" role="dialog" aria-modal="true" aria-label="About Clod"> |
| <div class="cl-modal-head"><div class="cl-modal-title">{clod_mark(26)}<span>About Clod</span></div> |
| <button class="cl-modal-x" data-cl-close type="button" aria-label="Close">×</button></div> |
| <p>{ABOUT}</p> |
| </div> |
| </div> |
| """ |
| HEAD = """ |
| <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=Inter:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600&display=swap" rel="stylesheet"> |
| <script> |
| (function () { |
| // Clod only comes in light mode (Gradio would otherwise switch to its dark theme for dark-mode visitors). |
| function light() { [document.documentElement, document.body, document.querySelector('gradio-app')].forEach(function (e) { if (e && e.classList.contains('dark')) e.classList.remove('dark'); }); } |
| function greet() { |
| var el = document.getElementById('cl-greet-text'); if (!el) return; |
| var h = new Date().getHours(); |
| var t = h < 5 ? 'Up late, human?' : h < 12 ? 'Good morning, human' : h < 17 ? 'Good afternoon, human' : 'Good evening, human'; |
| if (el.textContent !== t) el.textContent = t; |
| } |
| setInterval(function () { light(); greet(); }, 400); |
| // About popup: open from [data-cl-about], close on the backdrop, the x, or Escape |
| document.addEventListener('click', function (e) { |
| var t = e.target && e.target.closest ? e.target.closest('[data-cl-about], [data-cl-close]') : null; |
| var m = document.getElementById('cl-about-modal'); if (!t || !m) return; |
| if (t.hasAttribute('data-cl-about')) m.classList.add('open'); else m.classList.remove('open'); |
| }); |
| document.addEventListener('keydown', function (e) { |
| var m = document.getElementById('cl-about-modal'); if (!m) return; |
| if (e.key === 'Escape') m.classList.remove('open'); |
| if ((e.key === 'Enter' || e.key === ' ') && e.target && e.target.hasAttribute && e.target.hasAttribute('data-cl-about')) { e.preventDefault(); m.classList.add('open'); } |
| }); |
| })(); |
| </script> |
| """ |
|
|
| CSS = """ |
| :root, .gradio-container { |
| --cl-bg: #f5f4ee; --cl-side: #efede4; --cl-card: #ffffff; --cl-ink: #1f1e1d; --cl-ink-2: #3d3b36; --cl-muted: #7d7a70; |
| --cl-faint: #a9a598; --cl-line: #e4e1d6; --cl-line-2: #d9d5c8; --cl-user: #e9e6dc; --cl-accent: #b5613b; --cl-accent-2: #9c5130; |
| --cl-serif: "Source Serif 4", "Tiempos Text", Georgia, serif; --cl-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; |
| } |
| html, body, gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain { background: var(--cl-bg) !important; } |
| .gradio-container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; color: var(--cl-ink) !important; font-family: var(--cl-sans) !important; } |
| footer, .built-with, .show-api, .api-docs { display: none !important; } |
| .block, .form, .gap, .gr-group, .styler { background: transparent !important; border: none !important; box-shadow: none !important; } |
| .contain > .column, .contain > div { gap: 0 !important; } |
| |
| /* shell: sidebar + main */ |
| #cl-shell { gap: 0 !important; min-height: 100vh; align-items: stretch !important; flex-wrap: nowrap !important; } |
| #cl-side { background: var(--cl-side) !important; border-right: 1px solid var(--cl-line) !important; padding: 14px 12px !important; gap: 8px !important; |
| max-width: 272px !important; min-width: 248px !important; } |
| .cl-side-top { display: flex; align-items: center; gap: 9px; padding: 4px 8px 10px; } |
| .cl-wordmark { font-family: var(--cl-serif); font-size: 23px; font-weight: 500; letter-spacing: -0.01em; color: var(--cl-ink); } |
| #cl-new { justify-content: flex-start !important; background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cl-accent-2) !important; |
| font: 600 14.5px var(--cl-sans) !important; padding: 8px 10px !important; border-radius: 10px !important; min-height: 0 !important; } |
| #cl-new::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; |
| background: var(--cl-accent); color: #fff; font-size: 18px; font-weight: 500; margin-right: 10px; line-height: 1; } |
| #cl-new:hover { background: #e7e4d9 !important; } |
| .cl-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; } |
| .cl-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: var(--cl-ink-2); font: 500 14px var(--cl-sans); cursor: default; } |
| .cl-nav-item:hover { background: #e7e4d9; } |
| .cl-ico { width: 20px; text-align: center; opacity: .65; font-size: 13px; } |
| .cl-soon { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--cl-accent-2); background: #f4e3d8; padding: 2px 6px; border-radius: 6px; } |
| .cl-recents-h { margin: 18px 10px 6px; font: 500 12px var(--cl-sans); color: var(--cl-muted); } |
| .cl-recents { list-style: none; margin: 0; padding: 0; } |
| .cl-recents li { padding: 7px 10px; border-radius: 9px; font: 400 13.5px var(--cl-sans); color: var(--cl-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; } |
| .cl-recents li:hover { background: #e7e4d9; } |
| .cl-user { display: flex; align-items: center; gap: 10px; margin-top: 28px; padding: 10px; border-top: 1px solid var(--cl-line); } |
| .cl-avatar { width: 32px; height: 32px; border-radius: 50%; background: #3d3b36; color: #f5f4ee; display: flex; align-items: center; justify-content: center; font: 600 13px var(--cl-sans); } |
| .cl-user-name { font: 600 13.5px var(--cl-sans); color: var(--cl-ink); } .cl-user-plan { font: 400 12px var(--cl-sans); color: var(--cl-muted); } |
| |
| #cl-main { padding: 0 28px 28px !important; align-items: center !important; gap: 0 !important; min-width: 0 !important; } |
| #cl-main > * { width: 100%; max-width: 768px; } |
| #cl-topbar { display: flex; justify-content: center; padding: 14px 0 0; } |
| .cl-plan { font: 400 12.5px var(--cl-sans); color: var(--cl-muted); background: #ebe8de; border-radius: 999px; padding: 6px 14px; } |
| .cl-plan b { color: var(--cl-accent-2); font-weight: 600; } .cl-plan-note { color: var(--cl-faint); } |
| |
| /* empty state */ |
| .cl-hero { text-align: center; padding: 15vh 0 26px; } |
| .cl-distilled { display: inline-block; font: 500 12.5px var(--cl-sans); color: var(--cl-accent-2); background: #f3e4da; border: 1px solid #ecd2c2; padding: 5px 12px; border-radius: 999px; margin-bottom: 22px; } |
| .cl-greet { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0; font-family: var(--cl-serif) !important; font-weight: 300 !important; |
| font-size: clamp(30px, 4.4vw, 44px) !important; letter-spacing: -0.02em; color: var(--cl-ink) !important; line-height: 1.15; } |
| .cl-greet-mark { flex: none; transform: rotate(-8deg); } |
| |
| /* chat */ |
| #cl-chat { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin-top: 8px; } |
| #cl-chat .bubble-wrap, #cl-chat .message-wrap { background: transparent !important; padding: 8px 0 16px !important; } |
| #cl-chat .message-row { margin: 6px 0 !important; padding: 0 !important; border: none !important; } |
| #cl-chat .flex-wrap > .message, #cl-chat .message { border: none !important; box-shadow: none !important; } |
| #cl-chat .user-row .flex-wrap > .message { background: var(--cl-user) !important; border-radius: 18px !important; padding: 10px 16px !important; max-width: 78% !important; } |
| #cl-chat .user-row .message, #cl-chat .user-row .message p { color: var(--cl-ink) !important; font: 400 15.5px/1.55 var(--cl-sans) !important; } |
| #cl-chat .bot-row .flex-wrap > .message { background: transparent !important; padding: 2px 0 !important; max-width: 100% !important; } |
| #cl-chat .bot-row .message .message { background: transparent !important; padding: 0 !important; } |
| #cl-chat .bot-row .prose, #cl-chat .bot-row .prose p, #cl-chat .bot-row .prose li { color: var(--cl-ink) !important; font-family: var(--cl-serif) !important; font-size: 17px !important; line-height: 1.68 !important; } |
| #cl-chat .bot-row .prose strong { font-weight: 600 !important; } |
| #cl-chat .bot-row .prose code { background: #ece9df !important; border-radius: 5px; padding: 1px 5px; font-size: 14px; } |
| #cl-chat .bot-row .prose pre { background: #2b2a27 !important; border-radius: 12px !important; border: none !important; } |
| #cl-chat .bot-row .prose pre code { background: transparent !important; color: #f0eee6 !important; } |
| #cl-chat .bot-row .prose table { font-family: var(--cl-sans) !important; font-size: 14px !important; } |
| /* the useless thinking: Claude-style collapsible "Thought for ..." with a hairline on the left */ |
| #cl-chat .thought-group { background: transparent !important; border: none !important; border-left: 2px solid var(--cl-line-2) !important; border-radius: 0 !important; |
| padding: 2px 0 4px 14px !important; margin: 4px 0 12px !important; box-shadow: none !important; } |
| #cl-chat .thought-group .title, #cl-chat .thought-group .title p { color: var(--cl-muted) !important; font: 500 13.5px var(--cl-sans) !important; } |
| #cl-chat .thought-group .title { padding: 2px 0 !important; background: transparent !important; } |
| #cl-chat .thought-group .content, #cl-chat .thought-group .content p, #cl-chat .thought-group .prose, #cl-chat .thought-group .prose p { |
| color: var(--cl-muted) !important; font: italic 400 14.5px/1.6 var(--cl-sans) !important; background: transparent !important; } |
| #cl-chat .thought-group .arrow button, #cl-chat .thought-group button { background: transparent !important; border: none !important; color: var(--cl-muted) !important; } |
| #cl-chat .message-buttons button, #cl-chat .icon-button { background: transparent !important; border: none !important; color: var(--cl-faint) !important; } |
| #cl-chat .message-buttons button:hover { color: var(--cl-ink-2) !important; } |
| #cl-chat .top-panel { display: none !important; } |
| |
| /* composer */ |
| #cl-composer { background: var(--cl-card) !important; border: 1px solid var(--cl-line-2) !important; border-radius: 22px !important; |
| box-shadow: 0 1px 2px rgba(31,30,29,.04), 0 6px 22px rgba(31,30,29,.06) !important; padding: 10px 12px 10px 14px !important; margin-top: 4px; overflow: visible !important; } |
| #cl-composer:focus-within { border-color: #cfc9b8 !important; box-shadow: 0 1px 2px rgba(31,30,29,.05), 0 8px 28px rgba(31,30,29,.09) !important; } |
| #cl-input, #cl-input .wrap, #cl-input label { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; } |
| #cl-input textarea { background: transparent !important; border: none !important; box-shadow: none !important; color: var(--cl-ink) !important; |
| font: 400 16px/1.5 var(--cl-sans) !important; padding: 6px 4px !important; resize: none !important; } |
| #cl-input textarea::placeholder { color: var(--cl-faint) !important; } |
| #cl-bar { align-items: center !important; gap: 8px !important; margin-top: 4px; flex-wrap: nowrap !important; overflow: visible !important; } |
| #cl-think { flex: none !important; min-width: 0 !important; width: auto !important; } |
| #cl-think label { display: inline-flex !important; align-items: center; gap: 7px; border: 1px solid var(--cl-line-2) !important; border-radius: 10px !important; |
| padding: 5px 11px !important; background: transparent !important; cursor: pointer; font: 500 13px var(--cl-sans) !important; color: var(--cl-ink-2) !important; box-shadow: none !important; } |
| #cl-think label:has(input:checked) { border-color: #e4bfa9 !important; background: #f8ebe3 !important; color: var(--cl-accent-2) !important; } |
| #cl-think input { accent-color: var(--cl-accent); width: 14px; height: 14px; margin: 0 !important; } |
| #cl-think label span { color: inherit !important; font: inherit !important; } |
| #cl-pickwrap { flex: 1 1 auto !important; display: flex; justify-content: flex-end; min-width: 0 !important; overflow: visible !important; } |
| .cl-picker { position: relative; font: 500 13.5px var(--cl-sans); color: var(--cl-ink-2); } |
| .cl-picker summary { list-style: none; cursor: pointer; padding: 6px 10px; border-radius: 10px; display: inline-flex; gap: 6px; align-items: center; } |
| .cl-picker summary::-webkit-details-marker { display: none; } |
| .cl-picker summary:hover { background: #f1efe8; } |
| .cl-caret { color: var(--cl-muted); font-size: 12px; } |
| .cl-menu { position: absolute; right: 0; bottom: 38px; width: 300px; background: #fff; border: 1px solid var(--cl-line); border-radius: 14px; padding: 6px; |
| box-shadow: 0 10px 34px rgba(31,30,29,.14); z-index: 50; } |
| .cl-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--cl-ink) !important; text-decoration: none !important; } |
| .cl-menu-item:hover { background: #f5f3ec; } |
| .cl-menu-item b { display: block; font: 600 13.5px var(--cl-sans); } .cl-menu-item span { display: block; font: 400 12px var(--cl-sans); color: var(--cl-muted); margin-top: 1px; } |
| .cl-menu-item i { font-style: normal; color: var(--cl-accent); } .cl-disabled { opacity: .45; } |
| #cl-send { flex: none !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; |
| border-radius: 10px !important; background: var(--cl-accent) !important; color: #fff !important; border: none !important; font: 600 18px/1 var(--cl-sans) !important; box-shadow: none !important; } |
| #cl-send:hover { background: var(--cl-accent-2) !important; } |
| |
| /* suggestion chips */ |
| #cl-chips { justify-content: center !important; flex-wrap: wrap !important; gap: 8px !important; margin-top: 16px; } |
| #cl-chips button { flex: none !important; min-width: 0 !important; width: auto !important; background: transparent !important; border: 1px solid var(--cl-line-2) !important; |
| border-radius: 10px !important; padding: 7px 13px !important; font: 500 13.5px var(--cl-sans) !important; color: var(--cl-ink-2) !important; box-shadow: none !important; } |
| #cl-chips button:hover { background: #ece9df !important; color: var(--cl-ink) !important; } |
| |
| #cl-disclaimer { text-align: center; font: 400 12px var(--cl-sans); color: var(--cl-muted); margin: 12px 0 0; } |
| #cl-about { margin: 26px auto 0; max-width: 640px; text-align: center; font: 400 11.5px/1.6 var(--cl-sans); color: var(--cl-faint); } |
| |
| /* phones and narrow windows: no sidebar */ |
| @media (max-width: 900px) { |
| #cl-side { display: none !important; } |
| #cl-main { padding: 0 16px 22px !important; } |
| .cl-hero { padding: 9vh 0 20px; } |
| #cl-chat .user-row .flex-wrap > .message { max-width: 90% !important; } |
| .cl-plan-note { display: none; } |
| } |
| |
| /* --- fixes from the screenshot pass --- */ |
| #cl-composer #cl-composer { border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } |
| #cl-chat .user-row { max-width: 80% !important; } |
| #cl-chat .user-row .flex-wrap { max-width: 100% !important; } |
| #cl-chat .user-row .flex-wrap > .message { width: max-content !important; max-width: 100% !important; } |
| #cl-chat .user-row .message .message, #cl-chat .user-row .message-content { width: auto !important; } |
| .cl-menu-item, .cl-menu-item div { text-align: left !important; } |
| @media (max-width: 900px) { #cl-chat .user-row { max-width: 90% !important; } #cl-composer { padding: 10px 10px 10px 12px !important; } } |
| |
| .gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain, .gradio-container .app { padding: 0 !important; margin: 0 !important; max-width: none !important; } |
| #cl-shell { margin: 0 !important; padding: 0 !important; width: 100% !important; } |
| #cl-composer, #cl-composer > *, #cl-composer .styler, #cl-composer .block, #cl-composer .form, #cl-bar, #cl-pickwrap, #cl-pickwrap > *, #cl-pickwrap .prose, #cl-pickwrap .html-container { overflow: visible !important; } |
| #cl-composer .block, #cl-composer .form, #cl-composer .styler, #cl-input, #cl-input > *, #cl-input .container { border: none !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; } |
| #cl-composer { position: relative; z-index: 5; } |
| #cl-pickwrap { min-width: 96px !important; } |
| .cl-picker summary { white-space: nowrap; } |
| .cl-menu { z-index: 1000; } |
| #cl-chat .user-row .flex-wrap { max-width: 78% !important; width: auto !important; } |
| #cl-chat .user-row .flex-wrap > .message { max-width: 100% !important; width: auto !important; } |
| #cl-chat .thought-group .title, #cl-chat .thought-group .title p, #cl-chat .thought-group .title .prose { font-style: normal !important; } |
| #cl-chat .message-buttons, #cl-chat .message-buttons * { border: none !important; box-shadow: none !important; background: transparent !important; } |
| #cl-chips button { height: 36px !important; display: inline-flex !important; align-items: center !important; line-height: 1 !important; } |
| #cl-new { width: 100% !important; } |
| @media (max-width: 900px) { |
| .cl-greet { flex-direction: column; gap: 10px; } |
| .cl-hero { padding: 7vh 0 18px; } |
| #cl-think label { font-size: 12.5px !important; padding: 5px 9px !important; } |
| #cl-chat .user-row .flex-wrap { max-width: 88% !important; } |
| } |
| |
| /* user bubble: cap only the row (its parent has a definite width); percentage caps inside a shrink-to-fit row resolve |
| circularly and squeeze short messages onto two lines */ |
| #cl-chat .user-row { max-width: 80% !important; } |
| #cl-chat .user-row .flex-wrap, #cl-chat .user-row .flex-wrap > .message, #cl-chat .user-row .message .message { max-width: none !important; width: auto !important; } |
| @media (max-width: 900px) { #cl-chat .user-row { max-width: 90% !important; } } |
| |
| /* Gradio's .prose styles win inside gr.HTML on the hosted Space; pin the sidebar/topbar details */ |
| #cl-side ul.cl-recents { list-style: none !important; padding: 0 !important; margin: 0 !important; } |
| #cl-side ul.cl-recents li { margin: 0 !important; padding: 7px 10px !important; list-style: none !important; } |
| #cl-side ul.cl-recents li::before, #cl-side ul.cl-recents li::marker { content: none !important; } |
| #cl-side .cl-avatar { color: #f5f4ee !important; background: #3d3b36 !important; } |
| #cl-side .cl-user { border-top: 1px solid var(--cl-line) !important; } |
| #cl-side .cl-nav-item, #cl-side .cl-recents li, #cl-side .cl-user-name, #cl-side .cl-recents-h { color: var(--cl-ink-2) !important; } |
| #cl-side .cl-recents-h, #cl-side .cl-user-plan { color: var(--cl-muted) !important; } |
| #cl-topbar .cl-plan b { color: var(--cl-accent-2) !important; } |
| #cl-topbar .cl-plan, #cl-topbar .cl-plan-note { color: var(--cl-muted) !important; } |
| .cl-picker summary { gap: 7px !important; } |
| |
| /* --- one-screen layout: the page never scrolls; the chat scrolls inside; composer + disclaimer dock at the bottom --- */ |
| html, body { height: 100% !important; overflow: hidden !important; } |
| gradio-app, .gradio-container, .gradio-container > .main, .gradio-container > .main > .wrap, .gradio-container .contain { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; } |
| #cl-shell { height: 100dvh !important; min-height: 0 !important; overflow: hidden !important; } |
| #cl-side { height: 100dvh !important; overflow-y: auto !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; } |
| #cl-side-bottom { margin-top: auto !important; padding-top: 18px !important; } |
| .cl-about-card { margin: 0 4px 10px; padding: 12px 12px 10px; border: 1px solid var(--cl-line); border-radius: 12px; background: #f3f1e9; } |
| .cl-about-h { font: 600 12px var(--cl-sans); color: var(--cl-ink-2) !important; margin-bottom: 6px; } |
| .cl-about-card p { margin: 0 !important; font: 400 11.5px/1.55 var(--cl-sans) !important; color: var(--cl-muted) !important; } |
| #cl-side .cl-user { margin-top: 6px !important; } |
| #cl-main { height: 100dvh !important; display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; overflow: hidden !important; padding-bottom: 14px !important; } |
| #cl-main > * { flex: none; } |
| #cl-hero-wrap { margin-top: auto !important; } |
| #cl-chips { margin-bottom: auto !important; } |
| .cl-hero { padding: 0 0 26px !important; } |
| #cl-chat { flex: 1 1 0 !important; min-height: 0 !important; height: auto !important; max-height: none !important; margin-top: 6px !important; } |
| #cl-chat > .wrapper, #cl-chat .wrapper, #cl-chat .bubble-wrap { height: 100% !important; max-height: none !important; } |
| #cl-disc-wrap { padding-top: 2px; } |
| #cl-disclaimer { margin: 10px 0 0 !important; } |
| .cl-about-mobile { display: none; } |
| @media (max-width: 900px) { |
| .cl-about-mobile { display: block; margin: 6px auto 0; max-width: 560px; text-align: center; font: 400 11.5px/1.55 var(--cl-sans); color: var(--cl-muted); } |
| .cl-about-mobile summary { cursor: pointer; color: var(--cl-muted); font-weight: 500; list-style: none; } |
| .cl-about-mobile summary::-webkit-details-marker { display: none; } |
| .cl-about-mobile p { margin: 6px 0 0 !important; color: var(--cl-faint) !important; font-size: 11.5px !important; } |
| #cl-main { padding-bottom: 10px !important; } |
| } |
| |
| @media (max-width: 900px) { |
| #cl-side { display: none !important; } |
| .cl-distilled { font-size: 11.5px; margin-bottom: 14px; padding: 4px 10px; } |
| .cl-hero { padding: 0 0 18px !important; } |
| .cl-greet { font-size: 30px !important; } |
| #cl-chips { flex-wrap: nowrap !important; justify-content: flex-start !important; overflow-x: auto !important; padding-bottom: 4px; scrollbar-width: none; } |
| #cl-chips::-webkit-scrollbar { display: none; } |
| #cl-chips button { white-space: nowrap !important; } |
| } |
| |
| .cl-about-card { padding: 10px 11px 9px !important; } |
| .cl-about-card p { font-size: 11px !important; line-height: 1.45 !important; } |
| #cl-side .cl-recents-h { margin-top: 14px !important; } |
| |
| /* sidebar like claude.ai: Recents scroll, About + user stay pinned at the bottom */ |
| #cl-side { overflow: hidden !important; } |
| #cl-side-mid { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; scrollbar-width: thin; } |
| #cl-side-bottom { flex: none !important; margin-top: 0 !important; padding-top: 10px !important; } |
| #cl-side-mid { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); padding-bottom: 18px !important; } |
| |
| /* --- round 3: picker chevron + lineup, About popup, pending reply indicator --- */ |
| .cl-chev { color: var(--cl-muted); margin-left: 2px; transition: transform .15s ease; } |
| .cl-picker[open] .cl-chev { transform: rotate(180deg); } |
| .cl-caret { display: none; } |
| .cl-menu { width: 318px !important; } |
| .cl-max { font-style: normal; font: 600 10px var(--cl-sans); color: var(--cl-accent-2); background: #f4e3d8; border-radius: 5px; padding: 1px 5px; margin-left: 6px; vertical-align: 1px; } |
| .cl-haiku { font-style: italic !important; line-height: 1.45 !important; } |
| .cl-disabled { opacity: 1 !important; cursor: default; } |
| .cl-disabled b { color: var(--cl-ink-2) !important; } |
| .cl-disabled span { color: var(--cl-faint) !important; } |
| .cl-about-trigger { cursor: pointer !important; margin: 0 2px 4px; } |
| #cl-side-bottom { padding-top: 8px !important; border-top: 1px solid var(--cl-line); } |
| #cl-side .cl-user { border-top: none !important; margin-top: 0 !important; } |
| .cl-about-card, .cl-about-mobile { display: none !important; } |
| .cl-about-link { display: none; margin: 4px auto 0; background: none; border: none; padding: 2px 6px; font: 500 11.5px var(--cl-sans); color: var(--cl-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } |
| #cl-disc-wrap { text-align: center; } |
| .cl-modal { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; padding: 20px; } |
| .cl-modal.open { display: flex; } |
| .cl-modal-backdrop { position: absolute; inset: 0; background: rgba(31,30,29,.32); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } |
| .cl-modal-card { position: relative; width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--cl-line); border-radius: 18px; padding: 20px 22px 22px; |
| box-shadow: 0 24px 64px rgba(31,30,29,.22); animation: clpop .14s ease-out; text-align: left; } |
| @keyframes clpop { from { transform: translateY(6px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } } |
| .cl-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } |
| .cl-modal-title { display: flex; align-items: center; gap: 10px; font: 500 21px var(--cl-serif); color: var(--cl-ink); } |
| .cl-modal-x { background: none; border: none; font: 400 24px/1 var(--cl-sans); color: var(--cl-muted); cursor: pointer; padding: 2px 6px; border-radius: 8px; } |
| .cl-modal-x:hover { background: #f1efe8; color: var(--cl-ink); } |
| .cl-modal-card p { margin: 0 !important; font: 400 14.5px/1.65 var(--cl-sans) !important; color: var(--cl-ink-2) !important; } |
| /* Gradio's own "waiting for the first token" bubble, restyled as a quiet indicator */ |
| #cl-chat .message.pending { background: transparent !important; border: none !important; box-shadow: none !important; padding: 6px 0 !important; } |
| #cl-chat .message.pending * { background-color: var(--cl-faint) !important; } |
| #cl-chat .wrap.default { background: transparent !important; } |
| @media (max-width: 900px) { .cl-about-link { display: inline-block; } } |
| |
| /* recents are buttons now (a click sends that chat's prompt) */ |
| #cl-side-mid { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important; } |
| #cl-side-mid > * { flex: none !important; } |
| #cl-side-mid button.cl-recent { justify-content: flex-start !important; text-align: left !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; |
| background: transparent !important; border: none !important; box-shadow: none !important; padding: 7px 10px !important; margin: 0 !important; border-radius: 9px !important; |
| font: 400 13.5px var(--cl-sans) !important; color: var(--cl-ink-2) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; display: block !important; } |
| #cl-side-mid button.cl-recent:hover { background: #e7e4d9 !important; color: var(--cl-ink) !important; } |
| #cl-side-mid button.cl-recent { margin-left: 12px !important; width: calc(100% - 12px) !important; } |
| """ |
|
|
| import urllib.parse as _up |
| _MARK_URI = "data:image/svg+xml," + _up.quote(clod_mark(64, "x").replace('class="x" ', 'xmlns="http://www.w3.org/2000/svg" ')) |
| CSS += """ |
| /* --- pending indicator: the Clod mark wobbles (Claude's spark pulses); a crumb keeps falling off --- */ |
| #cl-chat .cl-pending { display: inline-block; position: relative; width: 30px; height: 30px; margin: 4px 0 2px; |
| background: url("%s") center / contain no-repeat; animation: clwobble 1.15s ease-in-out infinite; transform-origin: 50%% 50%%; vertical-align: middle; } |
| #cl-chat .cl-pending::after { content: ""; position: absolute; left: 62%%; top: 64%%; width: 4px; height: 4px; border-radius: 50%%; background: #7a5236; |
| animation: clcrumb 1.15s ease-in infinite; } |
| @keyframes clwobble { 0%% { transform: rotate(0) scale(1); } 22%% { transform: rotate(-16deg) scale(1.08); } 48%% { transform: rotate(11deg) scale(.93); } |
| 72%% { transform: rotate(-5deg) scale(1.04); } 100%% { transform: rotate(0) scale(1); } } |
| @keyframes clcrumb { 0%%, 15%% { transform: translate(0, 0); opacity: 0; } 25%% { opacity: 1; } 100%% { transform: translate(5px, 18px); opacity: 0; } } |
| #cl-chat .bot-row:has(.cl-pending) .message-buttons, #cl-chat .message-row:has(.cl-pending) ~ .message-buttons { display: none !important; } |
| #cl-chat .bot-row:has(.cl-pending), #cl-chat .bot-row:has(.cl-pending) * { opacity: 1 !important; } |
| #cl-chat .cl-pending { width: 34px !important; height: 34px !important; } |
| @media (prefers-reduced-motion: reduce) { #cl-chat .cl-pending, #cl-chat .cl-pending::after { animation: none; } } |
| """ % _MARK_URI |
|
|
| THEME = gr.themes.Base(primary_hue="orange", neutral_hue="stone", font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"]).set( |
| body_background_fill="#f5f4ee", body_background_fill_dark="#f5f4ee", background_fill_primary="#f5f4ee", background_fill_primary_dark="#f5f4ee", |
| background_fill_secondary="#efede4", background_fill_secondary_dark="#efede4", block_background_fill="#f5f4ee", block_background_fill_dark="#f5f4ee", |
| block_border_color="#e4e1d6", block_border_color_dark="#e4e1d6", body_text_color="#1f1e1d", body_text_color_dark="#1f1e1d", |
| body_text_color_subdued="#7d7a70", body_text_color_subdued_dark="#7d7a70", border_color_primary="#e4e1d6", border_color_primary_dark="#e4e1d6", |
| input_background_fill="#ffffff", input_background_fill_dark="#ffffff", color_accent_soft="#ece9df", color_accent_soft_dark="#ece9df", |
| block_label_text_color="#7d7a70", block_label_text_color_dark="#7d7a70", button_primary_background_fill="#b5613b", button_primary_background_fill_dark="#b5613b", |
| ) |
|
|
| with gr.Blocks(title=MODEL_NAME) as demo: |
| with gr.Row(elem_id="cl-shell", equal_height=False): |
| with gr.Column(elem_id="cl-side", scale=0, min_width=248): |
| gr.HTML(SIDEBAR) |
| newchat = gr.Button("New chat", elem_id="cl-new") |
| with gr.Column(elem_id="cl-side-mid"): |
| gr.HTML(SIDEBAR_REST) |
| recent_btns = [gr.Button(title, elem_classes="cl-recent", size="sm") for title, _ in RECENTS] |
| gr.HTML(SIDEBAR_BOTTOM, elem_id="cl-side-bottom") |
| with gr.Column(elem_id="cl-main", scale=1): |
| gr.HTML(TOPBAR) |
| hero = gr.HTML(HERO, elem_id="cl-hero-wrap") |
| chat = gr.Chatbot(elem_id="cl-chat", visible=False, height="100%", show_label=False, buttons=["copy"], autoscroll=True) |
| with gr.Group(elem_id="cl-composer"): |
| box = gr.Textbox(elem_id="cl-input", show_label=False, container=False, lines=1, max_lines=10, autofocus=True, |
| placeholder="How can I confidently mislead you today?") |
| with gr.Row(elem_id="cl-bar"): |
| think = gr.Checkbox(value=True, label="Extended thinking", elem_id="cl-think", container=False, scale=0, min_width=0) |
| gr.HTML(PICKER, elem_id="cl-pickwrap") |
| send = gr.Button("↑", elem_id="cl-send", scale=0, min_width=34) |
| with gr.Row(elem_id="cl-chips") as chips: |
| chip_btns = [gr.Button(label, size="sm") for label in CHIPS] |
| gr.HTML(DISCLAIMER, elem_id="cl-disc-wrap") |
|
|
| temperature = gr.State(0.7) |
| ui_out = [chat, box, hero, chips] |
| send.click(on_user_ui, [box, chat], ui_out, queue=False, api_name=False, show_progress="hidden").then(on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden") |
| box.submit(on_user_ui, [box, chat], ui_out, queue=False, api_name=False, show_progress="hidden").then(on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden") |
| newchat.click(new_chat, outputs=ui_out, queue=False, api_name=False) |
| |
| for btn, (_, prompt) in zip(recent_btns, RECENTS): |
| btn.click(lambda prompt=prompt: on_user_ui(prompt, []), outputs=ui_out, queue=False, api_name=False, show_progress="hidden").then( |
| on_bot, [chat, think, temperature], [chat], api_name=False, show_progress="hidden") |
| for btn, label in zip(chip_btns, CHIPS): |
| btn.click(lambda label=label: chip_prompt(label), outputs=[box], queue=False, api_name=False) |
| |
| api_msg = gr.Textbox(visible=False); api_hist = gr.JSON(visible=False); api_think = gr.Checkbox(value=True, visible=False) |
| api_temp = gr.Number(value=0.7, visible=False); api_out = gr.JSON(visible=False); api_btn = gr.Button(visible=False) |
| api_btn.click(generate_api, [api_msg, api_hist, api_think, api_temp], [api_out], api_name="generate") |
|
|
| if __name__ == "__main__": |
| demo.queue(max_size=20, default_concurrency_limit=2).launch(theme=THEME, css=CSS, head=HEAD) |
|
|
