Upload 2 files

app.py

@@ -1,98 +1,235 @@
-from huggingface_hub import InferenceClient
+"""
+Chatterbox — HF Space chat app that writes code as downloadable files
+and previews HTML live, similar to Claude's "artifacts".
+
+Why the old version broke:
+- `mistralai/Mistral-7B-Instruct-v0.1` was dropped from HF's free
+  serverless inference tier.
+- `client.text_generation(...)` with a hand-built `[INST]...[/INST]`
+  prompt is the old (pre chat-template) way of calling models.
+  `InferenceClient.chat_completion()` is the current, stable API and
+  works across providers HF routes to (`provider="auto"`).
+
+Requirements (requirements.txt):
+    gradio>=4.44
+    huggingface_hub>=0.26
+"""
+
+import os
+import re
+import tempfile
+from pathlib import Path
+
 import gradio as gr
+from huggingface_hub import InferenceClient
 
-client = InferenceClient(
-    "mistralai/Mistral-7B-Instruct-v0.1"
+# ---------------------------------------------------------------------------
+# Config
+# ---------------------------------------------------------------------------
+
+# Reads a token from the Space's secrets if you add one (needed for higher
+# rate limits / gated models). Works without it too, just more rate-limited.
+HF_TOKEN = os.environ.get("HF_TOKEN") or os.environ.get("HUGGINGFACE_TOKEN")
+
+# Models known to work through HF's free/routed serverless chat-completion
+# as of 2026. If one of these goes away, just remove it from the list —
+# HF periodically retires models from the free tier.
+MODEL_CHOICES = [
+    "meta-llama/Llama-3.1-8B-Instruct",
+    "Qwen/Qwen2.5-Coder-32B-Instruct",
+    "mistralai/Mistral-7B-Instruct-v0.3",
+    "HuggingFaceH4/zephyr-7b-beta",
+]
+
+DEFAULT_SYSTEM_PROMPT = (
+    "You are an expert software engineer, similar to Claude's coding "
+    "assistant. When the user asks you to build or write something, answer "
+    "with a short explanation and then one or more fenced code blocks.\n\n"
+    "Every code block MUST start with a language tag, and its very first "
+    "line must be a comment giving a filename, like this:\n\n"
+    "```html\n<!-- filename: index.html -->\n<!doctype html>...\n```\n"
+    "```python\n# filename: app.py\nprint('hi')\n```\n\n"
+    "Always write complete, self-contained, runnable files (inline CSS/JS "
+    "for HTML pages). Never truncate code for brevity."
 )
 
-def format_prompt(message, history):
-  # Updated system prompt
-  prompt = "You are an expert web developer specializing in creating clean, efficient, and modern web applications.\nYour task is to write complete, self-contained HTML files that include all necessary CSS and JavaScript.\nFocus on:\n- Writing clear, maintainable code\n- Following best practices\n- Creating responsive designs\n- Adding appropriate styling and interactivity\nReturn only the complete HTML code without any additional explanation."
-  for user_prompt, bot_response in history:
-    prompt += f"[INST] {user_prompt} [/INST]"
-    prompt += f" {bot_response}</s> "
-  prompt += f"[INST] {message} [/INST]"
-  return prompt
-
-def generate(
-    prompt, history, system_prompt, temperature=0.9, max_new_tokens=256, top_p=0.95, repetition_penalty=1.0,
-):
-    temperature = float(temperature)
-    if temperature < 1e-2:
-        temperature = 1e-2
-    top_p = float(top_p)
-
-    generate_kwargs = dict(
-        temperature=temperature,
-        max_new_tokens=max_new_tokens,
-        top_p=top_p,
-        repetition_penalty=repetition_penalty,
-        do_sample=True,
-        seed=42,
-    )
+CODE_BLOCK_RE = re.compile(r"```([a-zA-Z0-9_+-]*)\n(.*?)```", re.DOTALL)
+FILENAME_RE = re.compile(r"^\s*(?:#|//|<!--)\s*filename:\s*([^\s>]+)", re.IGNORECASE)
+
+EXT_BY_LANG = {
+    "html": "html", "css": "css", "javascript": "js", "js": "js",
+    "python": "py", "py": "py", "json": "json", "bash": "sh", "sh": "sh",
+    "yaml": "yml", "yml": "yml", "typescript": "ts", "ts": "ts", "": "txt",
+}
+
+OUT_DIR = Path(tempfile.gettempdir()) / "chatterbox_outputs"
+OUT_DIR.mkdir(exist_ok=True)
+
+
+# ---------------------------------------------------------------------------
+# Helpers
+# ---------------------------------------------------------------------------
+
+def extract_files(text: str, tag: str):
+    """Pull fenced code blocks out of a model reply, write each to disk.
+
+    Returns (list_of_written_file_paths, html_source_or_None).
+    """
+    files = []
+    html_source = None
+    for i, m in enumerate(CODE_BLOCK_RE.finditer(text)):
+        lang = (m.group(1) or "").strip().lower()
+        body = m.group(2)
+        first_line, _, rest = body.partition("\n")
+        fname_match = FILENAME_RE.match(first_line)
+        if fname_match:
+            filename = fname_match.group(1)
+            body = rest
+        else:
+            ext = EXT_BY_LANG.get(lang, lang or "txt")
+            filename = f"snippet_{i + 1}.{ext}"
+
+        safe_name = re.sub(r"[^\w.\-]", "_", filename)
+        path = OUT_DIR / f"{tag}_{safe_name}"
+        path.write_text(body, encoding="utf-8")
+        files.append(str(path))
+
+        if lang in ("html", "") and safe_name.endswith("html") and html_source is None:
+            html_source = body
+        elif lang == "html" and html_source is None:
+            html_source = body
+
+    return files, html_source
+
+
+def build_client(model: str) -> InferenceClient:
+    kwargs = {"provider": "auto"}
+    if HF_TOKEN:
+        kwargs["token"] = HF_TOKEN
+    return InferenceClient(model=model, **kwargs)
+
 
-    formatted_prompt = format_prompt(f"{system_prompt}, {prompt}", history)
-    stream = client.text_generation(formatted_prompt, **generate_kwargs, stream=True, details=True, return_full_text=True)
-    output = ""
-
-    for response in stream:
-        output += response.token.text
-        yield output
-    return output
-
-
-additional_inputs=[
-    gr.Textbox(
-        label="System Prompt",
-        max_lines=1,
-        interactive=True,
-    ),
-    gr.Slider(
-        label="Temperature",
-        value=0.9,
-        minimum=0.0,
-        maximum=1.0,
-        step=0.05,
-        interactive=True,
-        info="Higher values produce more diverse outputs",
-    ),
-    gr.Slider(
-        label="Max new tokens",
-        value=2048,
-        minimum=128,
-        maximum=8192,
-        step=64,
-        interactive=True,
-        info="The maximum numbers of new tokens",
-    ),
-    gr.Slider(
-        label="Top-p (nucleus sampling)",
-        value=0.90,
-        minimum=0.0,
-        maximum=1,
-        step=0.05,
-        interactive=True,
-        info="Higher values sample more low-probability tokens",
-    ),
-    gr.Slider(
-        label="Repetition penalty",
-        value=1.2,
-        minimum=1.0,
-        maximum=2.0,
-        step=0.05,
-        interactive=True,
-        info="Penalize repeated tokens",
+def make_preview_html(html_source: str | None) -> str:
+    if not html_source:
+        return "<div style='opacity:.6;padding:1rem;'>Нет HTML в последнем ответе — превью появится, когда модель вернёт html-блок.</div>"
+    escaped = html_source.replace('"', "&quot;")
+    return (
+        f'<iframe style="width:100%;height:520px;border:1px solid #4443;'
+        f'border-radius:10px;background:#fff;" srcdoc="{escaped}"></iframe>'
     )
-]
 
-examples=[#["говори на русском", None, None, None, None, None, ],
-         ]
-
-gr.ChatInterface(
-    fn=generate,
-    chatbot=gr.Chatbot(show_label=False, show_share_button=True, show_copy_button=True, likeable=True, layout="panel"),
-    additional_inputs=additional_inputs,
-    title="Chatterbox",
-    examples=examples,
-    concurrency_limit=20,
-).launch(show_api=False)
+
+# ---------------------------------------------------------------------------
+# Core chat function (generator, streams tokens)
+# ---------------------------------------------------------------------------
+
+def respond(message, chat_history, model, system_prompt, temperature, max_tokens, top_p):
+    chat_history = chat_history or []
+
+    if not message or not message.strip():
+        yield chat_history, "", gr.update(), gr.update()
+        return
+
+    system_prompt = system_prompt.strip() or DEFAULT_SYSTEM_PROMPT
+
+    messages = [{"role": "system", "content": system_prompt}]
+    messages.extend(chat_history)
+    messages.append({"role": "user", "content": message})
+
+    chat_history = chat_history + [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": ""},
+    ]
+
+    try:
+        client = build_client(model)
+        stream = client.chat_completion(
+            messages=messages,
+            max_tokens=int(max_tokens),
+            temperature=float(max(temperature, 1e-2)),
+            top_p=float(top_p),
+            stream=True,
+        )
+
+        partial = ""
+        for chunk in stream:
+            delta = chunk.choices[0].delta.content or ""
+            if not delta:
+                continue
+            partial += delta
+            chat_history[-1]["content"] = partial
+            yield chat_history, "", gr.update(), gr.update()
+
+        tag = f"turn{len(chat_history)}"
+        files, html_source = extract_files(partial, tag)
+        yield (
+            chat_history,
+            "",
+            gr.update(value=files if files else None, visible=bool(files)),
+            gr.update(value=make_preview_html(html_source)),
+        )
+
+    except Exception as e:
+        chat_history[-1]["content"] = (
+            f"⚠️ Ошибка запроса к модели `{model}`: {e}\n\n"
+            "Если модель недоступна на бесплатном инференсе — попробуйте "
+            "другую из выпадающего списка сверху."
+        )
+        yield chat_history, "", gr.update(), gr.update()
+
+
+def clear_all():
+    return [], None, make_preview_html(None)
+
+
+# ---------------------------------------------------------------------------
+# UI
+# ---------------------------------------------------------------------------
+
+with gr.Blocks(title="Chatterbox", theme=gr.themes.Soft()) as demo:
+    gr.Markdown("## 🤖 Chatterbox — чат + генерация файлов кода")
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(
+                type="messages",
+                show_label=False,
+                show_copy_button=True,
+                height=520,
+            )
+            msg = gr.Textbox(
+                placeholder="Опишите, что построить, например: «сделай лендинг с формой подписки»",
+                show_label=False,
+                lines=2,
+            )
+            with gr.Row():
+                send_btn = gr.Button("Отправить", variant="primary")
+                clear_btn = gr.Button("Очистить")
+
+        with gr.Column(scale=2):
+            with gr.Tab("📄 Файлы"):
+                files_out = gr.File(label="Сгенерированные файлы", file_count="multiple")
+            with gr.Tab("👁 Превью (HTML)"):
+                preview = gr.HTML(value=make_preview_html(None))
+
+            with gr.Accordion("Настройки модели", open=False):
+                model_dd = gr.Dropdown(
+                    MODEL_CHOICES, value=MODEL_CHOICES[0], label="Модель",
+                    allow_custom_value=True,
+                )
+                system_box = gr.Textbox(
+                    label="System prompt", value=DEFAULT_SYSTEM_PROMPT, lines=6,
+                )
+                temperature = gr.Slider(0.0, 1.5, value=0.7, step=0.05, label="Temperature")
+                max_tokens = gr.Slider(128, 8192, value=2048, step=64, label="Max new tokens")
+                top_p = gr.Slider(0.0, 1.0, value=0.9, step=0.05, label="Top-p")
+
+    inputs = [msg, chatbot, model_dd, system_box, temperature, max_tokens, top_p]
+    outputs = [chatbot, msg, files_out, preview]
+
+    msg.submit(respond, inputs, outputs)
+    send_btn.click(respond, inputs, outputs)
+    clear_btn.click(clear_all, None, [chatbot, files_out, preview])
+
+if __name__ == "__main__":
+    demo.launch(show_api=False)

requirements.txt

@@ -0,0 +1,2 @@
+gradio>=4.44
+huggingface_hub>=0.26