Create app.py

app.py

@@ -0,0 +1,545 @@
+import gradio as gr
+import torch
+from transformers import AutoTokenizer, AutoModelForCausalLM
+
+# ----------------------------------------------------------------------
+# Model (unchanged from your working code)
+# ----------------------------------------------------------------------
+MODEL_ID = "SupraLabs/Supra-50M-Reasoning"
+
+THINK_START = "<|begin_of_thought|>"
+THINK_END = "<|end_of_thought|>"
+SOL_START = "<|begin_of_solution|>"
+SOL_END = "<|end_of_solution|>"
+
+DEFAULT_SYSTEM_PROMPT = (
+    "Your role as an assistant involves thoroughly exploring questions through "
+    "a systematic long thinking process before providing the final precise and "
+    "accurate solutions."
+)
+
+# ----------------------------------------------------------------------
+# Load model once
+# ----------------------------------------------------------------------
+print("Loading model...")
+tokenizer = AutoTokenizer.from_pretrained(MODEL_ID)
+model = AutoModelForCausalLM.from_pretrained(
+    MODEL_ID,
+    dtype=torch.float32,
+    device_map="cpu",
+)
+model.eval()
+print("Model ready.")
+
+# ----------------------------------------------------------------------
+# Prompt construction (as provided)
+# ----------------------------------------------------------------------
+def build_prompt(question: str, system_prompt: str) -> str:
+    return (
+        f"[SYSTEM]: {system_prompt}\n\n"
+        f"[USER]: {question}\n\n"
+        f"[ASSISTANT]: {THINK_START}\n"
+    )
+
+def parse_output(raw: str):
+    thought, answer = "", raw
+    if THINK_START in raw and THINK_END in raw:
+        t0 = raw.index(THINK_START) + len(THINK_START)
+        t1 = raw.index(THINK_END)
+        thought = raw[t0:t1].strip()
+    if SOL_START in raw and SOL_END in raw:
+        s0 = raw.index(SOL_START) + len(SOL_START)
+        s1 = raw.index(SOL_END)
+        answer = raw[s0:s1].strip()
+    elif SOL_START in raw:
+        s0 = raw.index(SOL_START) + len(SOL_START)
+        answer = raw[s0:].strip()
+    elif THINK_END in raw:
+        answer = raw[raw.index(THINK_END) + len(THINK_END):].strip()
+    return thought, answer
+
+def generate(prompt, system_prompt, max_new_tokens, temperature, top_p, top_k, show_thinking):
+    if not prompt.strip():
+        return "", "Please enter a question."
+    full_prompt = build_prompt(prompt, system_prompt)
+    inputs = tokenizer(full_prompt, return_tensors="pt")
+    input_ids = inputs["input_ids"]
+    with torch.no_grad():
+        output_ids = model.generate(
+            input_ids,
+            max_new_tokens=max_new_tokens,
+            do_sample=temperature > 0,
+            temperature=temperature if temperature > 0 else 1.0,
+            top_p=top_p,
+            top_k=top_k,
+            pad_token_id=tokenizer.eos_token_id,
+            eos_token_id=tokenizer.eos_token_id,
+        )
+    generated = output_ids[0][input_ids.shape[-1]:]
+    raw = tokenizer.decode(generated, skip_special_tokens=False)
+    raw = raw.replace("<s>", "").replace("</s>", "").strip()
+    raw = THINK_START + "\n" + raw
+    thought, answer = parse_output(raw)
+    return (thought if show_thinking else ""), answer
+
+# ----------------------------------------------------------------------
+# Chat callback for Gradio
+# ----------------------------------------------------------------------
+def chat_generate(message, history, system_prompt, max_tokens, temperature, top_p, top_k, show_think):
+    if not message.strip():
+        return "", [], "", ""
+    thought, answer = generate(message, system_prompt, max_tokens, temperature, top_p, top_k, show_think)
+    new_history = [
+        {"role": "user", "content": message},
+        {"role": "assistant", "content": answer},
+    ]
+    return "", new_history, thought, answer
+
+def clear_fn():
+    return "", [], "", ""
+
+# ----------------------------------------------------------------------
+# Custom CSS – Classic, elegant, dark theme with serif headings
+# ----------------------------------------------------------------------
+CUSTOM_CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&family=JetBrains+Mono&display=swap');
+
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+    background: #1a1a1a !important;
+    color: #d4c5b2 !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+.gradio-container {
+    max-width: 1300px !important;
+    margin: 0 auto !important;
+    padding: 2rem 1.5rem !important;
+}
+
+/* Header with language toggle */
+#header-section {
+    background: linear-gradient(145deg, #2a2118 0%, #1e1b15 100%);
+    border: 1px solid #5c4a32;
+    border-radius: 18px;
+    padding: 2rem;
+    margin-bottom: 2rem;
+    position: relative;
+    box-shadow: 0 8px 30px rgba(0,0,0,0.5);
+}
+
+#header-section h1 {
+    font-family: 'Playfair Display', serif;
+    font-size: 2.5rem;
+    color: #d4af37;
+    margin-top: 0;
+    font-weight: 700;
+    letter-spacing: 1px;
+}
+
+#header-section p {
+    font-size: 1.1rem;
+    color: #c0b09a;
+    line-height: 1.7;
+}
+
+.lang-toggle {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: #3e3525;
+    border: 1px solid #5c4a32;
+    color: #d4af37;
+    padding: 6px 16px;
+    border-radius: 30px;
+    font-family: 'Inter', sans-serif;
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+.lang-toggle:hover {
+    background: #5c4a32;
+    color: #f5e6c8;
+}
+
+/* Model cards */
+.model-card {
+    background: #2a241c;
+    border: 1px solid #4a3e2c;
+    border-radius: 14px;
+    padding: 1.2rem;
+    margin-bottom: 1rem;
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+.model-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 10px 25px rgba(0,0,0,0.7);
+}
+.model-card a {
+    color: #d4af37;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 1.15rem;
+}
+.model-card p {
+    color: #b9a88c;
+    margin: 0.5rem 0 0;
+    font-size: 0.9rem;
+}
+
+/* Focus list */
+.focus-list {
+    list-style: none;
+    padding-left: 0;
+}
+.focus-list li {
+    padding: 0.3rem 0;
+    font-size: 1rem;
+    color: #c0b09a;
+}
+
+/* Resources table */
+.resources-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+}
+.resources-table td {
+    padding: 10px 0;
+    border-bottom: 1px solid #3e3525;
+}
+.resources-table a {
+    color: #d4af37;
+    text-decoration: none;
+    font-weight: 500;
+}
+.resources-table a:hover {
+    text-decoration: underline;
+}
+
+/* Footer */
+.footer-text {
+    text-align: center;
+    color: #6b5e4a;
+    font-size: 0.85rem;
+    margin-top: 2rem;
+    padding-top: 1.5rem;
+    border-top: 1px solid #3e3525;
+}
+.footer-text a {
+    color: #d4af37;
+    text-decoration: none;
+}
+
+/* Gradio components restyling */
+.chatbot-wrap .wrap {
+    background: #1e1b15 !important;
+    border: 1px solid #4a3e2c !important;
+    border-radius: 14px !important;
+}
+
+.message.user {
+    background: linear-gradient(135deg, #5c4a32, #7a5c3e) !important;
+    color: white !important;
+    border-radius: 18px 18px 4px 18px !important;
+    padding: 12px 16px !important;
+}
+.message.bot {
+    background: #2a241c !important;
+    color: #e8dcc8 !important;
+    border: 1px solid #5c4a32 !important;
+    border-radius: 18px 18px 18px 4px !important;
+}
+
+.input-wrap textarea {
+    background: #2a241c !important;
+    border: 1px solid #4a3e2c !important;
+    color: #e8dcc8 !important;
+    font-family: 'Inter', sans-serif !important;
+}
+.input-wrap textarea:focus {
+    border-color: #d4af37 !important;
+    box-shadow: 0 0 0 3px rgba(212,175,55,0.15) !important;
+}
+
+button.primary {
+    background: linear-gradient(135deg, #7a5c3e, #a67c46) !important;
+    border: none !important;
+    border-radius: 10px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.2s !important;
+}
+button.primary:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 20px rgba(166,124,70,0.4) !important;
+}
+
+.thinking-box textarea {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #1a1510 !important;
+    border: 1px solid #3e3525 !important;
+    color: #b9a88c !important;
+}
+.answer-box textarea {
+    font-family: 'Inter', sans-serif !important;
+    background: #1a1e15 !important;
+    border: 1px solid #3e4a2c !important;
+    color: #c5d4af !important;
+}
+.system-box textarea {
+    background: #1a1510 !important;
+    border: 1px solid #5c4a32 !important;
+    color: #d4af37 !important;
+}
+
+input[type=range] {
+    accent-color: #d4af37 !important;
+}
+.accordion {
+    background: #1e1b15 !important;
+    border: 1px solid #4a3e2c !important;
+}
+
+footer { display: none !important; }
+"""
+
+# ----------------------------------------------------------------------
+# Bilingual content for the header & info section
+# ----------------------------------------------------------------------
+CONTENT = {
+    "en": {
+        "title": "Welcome to ThingsAI! 🤗",
+        "intro": "Building efficient, bilingual AI models that run anywhere. 🇮🇹 🇬🇧",
+        "models_title": "🤖 Our Models",
+        "model_q135": "A lightweight bilingual (Italian + English) language model with <b>135M parameters</b>. Features GQA, SwiGLU, RMSNorm, and RoPE. Trained on 50B+ tokens.",
+        "model_q270": "Our most powerful small model — <b>270M parameters</b> with 32 layers, 768 hidden dimensions, and 65K vocabulary. Currently in active training on 10B+ tokens, planned 135B tokens.",
+        "model_qmod": "A multi-label moderation model covering <b>9 categories</b>: toxic, severe_toxic, obscene, threat, insult, identity_hate, cyberbullying, hate_speech, offensive.",
+        "focus_title": "🎯 What We Focus On",
+        "focus_items": [
+            "⚡ Small, efficient architectures — GQA, weight tying, deep‑thin design",
+            "🌍 Bilingual training — Italian + English from scratch",
+            "🔓 Open‑source everything — weights, code, datasets",
+            "💻 Real‑world deployment — runs on consumer hardware"
+        ],
+        "resources_title": "📂 Resources",
+        "resources": [
+            ("📚 Quark-135M-Bilingual", "https://huggingface.co/ThingAI/Quark-135m-Bilingual"),
+            ("🛡️ Quark-Mod", "https://huggingface.co/ThingsAI/Quark-Mod"),
+            ("📝 HuggingFace Community", "https://huggingface.co/ThingsAI"),
+            ("💻 GitHub", "https://github.com/overcastlab")
+        ],
+        "dataset_link": "📊 Dataset: <a href='https://huggingface.co/datasets/ThingAI/OmniBook'>ThingAI/OmniBook</a>",
+        "footer": "Made with ❤️ by ThingsAI · <a href='https://things-ai.org'>Website</a> · <a href='https://github.com/overcastlab'>GitHub</a>"
+    },
+    "it": {
+        "title": "Benvenuti in ThingsAI! 🤗",
+        "intro": "Costruiamo modelli AI bilingui efficienti che funzionano ovunque. 🇮🇹 🇬🇧",
+        "models_title": "🤖 I Nostri Modelli",
+        "model_q135": "Un modello linguistico bilingue leggero (italiano + inglese) con <b>135M parametri</b>. Caratteristiche: GQA, SwiGLU, RMSNorm, RoPE. Addestrato su 50B+ token.",
+        "model_q270": "Il nostro piccolo modello più potente — <b>270M parametri</b> con 32 strati, dimensione nascosta 768, vocabolario 65K. In addestramento attivo su 10B+ token, pianificato 135B token.",
+        "model_qmod": "Un modello di moderazione multi‑etichetta che copre <b>9 categorie</b>: tossico, gravemente_tossico, osceno, minaccia, insulto, odio_identitario, cyberbullismo, incitamento_all'odio, offensivo.",
+        "focus_title": "🎯 Su Cosa Ci Concentriamo",
+        "focus_items": [
+            "⚡ Architetture piccole ed efficienti — GQA, weight tying, design deep‑thin",
+            "🌍 Addestramento bilingue — italiano + inglese da zero",
+            "🔓 Tutto open‑source — pesi, codice, dataset",
+            "💻 Implementazione reale — funziona su hardware consumer"
+        ],
+        "resources_title": "📂 Risorse",
+        "resources": [
+            ("📚 Quark-135M-Bilingual", "https://huggingface.co/ThingAI/Quark-135m-Bilingual"),
+            ("🛡️ Quark-Mod", "https://huggingface.co/ThingsAI/Quark-Mod"),
+            ("📝 Comunità HuggingFace", "https://huggingface.co/ThingsAI"),
+            ("💻 GitHub", "https://github.com/overcastlab")
+        ],
+        "dataset_link": "📊 Dataset: <a href='https://huggingface.co/datasets/ThingAI/OmniBook'>ThingAI/OmniBook</a>",
+        "footer": "Fatto con ❤️ da ThingsAI · <a href='https://things-ai.org'>Sito Web</a> · <a href='https://github.com/overcastlab'>GitHub</a>"
+    }
+}
+
+# ----------------------------------------------------------------------
+# Build the complete Gradio interface
+# ----------------------------------------------------------------------
+with gr.Blocks(
+    title="ThingsAI – Chat & Models",
+    css=CUSTOM_CSS,
+    theme=gr.themes.Soft()   # base theme overridden by our CSS
+) as demo:
+
+    # --- Header + Language Toggle ---
+    gr.HTML("""
+    <div id="header-section">
+        <button class="lang-toggle" onclick="switchLanguage()">🇮🇹 Italiano</button>
+        <h1 id="main-title">Welcome to ThingsAI! 🤗</h1>
+        <p id="main-intro">Building efficient, bilingual AI models that run anywhere. 🇮🇹 🇬🇧</p>
+    </div>
+    """)
+
+    # --- Model Cards (using HTML, IDs for translation) ---
+    gr.HTML("""
+    <h2 id="models-title" style="color:#d4af37; font-family:'Playfair Display',serif;">🤖 Our Models</h2>
+    <div class="model-card">
+        <a href="https://huggingface.co/ThingAI/Quark-135m-Bilingual" target="_blank">Quark-135M</a>
+        <p id="model-desc-135">A lightweight bilingual (Italian + English) language model with <b>135M parameters</b>. Features GQA, SwiGLU, RMSNorm, and RoPE. Trained on 50B+ tokens.</p>
+    </div>
+    <div class="model-card">
+        <a href="https://huggingface.co/ThingAI/Quark-270m-Instruct" target="_blank">Quark-270M (Instruct)</a>
+        <p id="model-desc-270">Our most powerful small model — <b>270M parameters</b> with 32 layers, 768 hidden dimensions, and 65K vocabulary. Currently in active training on 10B+ tokens, planned 135B tokens.</p>
+    </div>
+    <div class="model-card">
+        <a href="https://huggingface.co/ThingAI/Quark-Mod" target="_blank">Quark-Mod</a>
+        <p id="model-desc-mod">A multi-label moderation model covering <b>9 categories</b>: toxic, severe_toxic, obscene, threat, insult, identity_hate, cyberbullying, hate_speech, offensive.</p>
+    </div>
+    <div class="model-card">
+        <a href="https://huggingface.co/ThingAI/Quark-135m" target="_blank">Quark-135m (Base)</a>
+        <p>Base model.</p>
+    </div>
+    <div class="model-card">
+        <a href="https://huggingface.co/ThingAI/Quark-50m" target="_blank">Quark-50m</a>
+        <p>Lightweight 50M model.</p>
+    </div>
+    <p id="dataset-paragraph" style="margin-top:1rem; color:#c0b09a;">📊 Dataset: <a href="https://huggingface.co/datasets/ThingAI/OmniBook" style="color:#d4af37;">ThingAI/OmniBook</a></p>
+    """)
+
+    # --- Focus & Resources ---
+    gr.HTML("""
+    <h2 id="focus-title" style="color:#d4af37; font-family:'Playfair Display',serif;">🎯 What We Focus On</h2>
+    <ul class="focus-list" id="focus-list">
+        <li>⚡ Small, efficient architectures — GQA, weight tying, deep‑thin design</li>
+        <li>🌍 Bilingual training — Italian + English from scratch</li>
+        <li>🔓 Open‑source everything — weights, code, datasets</li>
+        <li>💻 Real‑world deployment — runs on consumer hardware</li>
+    </ul>
+    <h2 id="resources-title" style="color:#d4af37; font-family:'Playfair Display',serif; margin-top:2rem;">📂 Resources</h2>
+    <table class="resources-table" id="resources-table">
+        <tr><td>📚 <a href="https://huggingface.co/ThingAI/Quark-135m-Bilingual" target="_blank">Quark-135M-Bilingual</a></td></tr>
+        <tr><td>🛡️ <a href="https://huggingface.co/ThingsAI/Quark-Mod" target="_blank">Quark-Mod</a></td></tr>
+        <tr><td>📝 <a href="https://huggingface.co/ThingsAI" target="_blank">HuggingFace Community</a></td></tr>
+        <tr><td>💻 <a href="https://github.com/overcastlab" target="_blank">GitHub</a></td></tr>
+    </table>
+    <p class="footer-text" id="footer-text">Made with ❤️ by ThingsAI · <a href="https://things-ai.org">Website</a> · <a href="https://github.com/overcastlab">GitHub</a></p>
+    """)
+
+    # --- Chat interface (exactly your working code, only relocated inside Blocks) ---
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=5):
+            chatbot = gr.Chatbot(
+                label="💬 Conversation",
+                height=520,
+                elem_classes=["chatbot-wrap"]
+            )
+            prompt_input = gr.Textbox(
+                label="Your Message",
+                placeholder="Ask anything... (hallucination may occur ⚠️)",
+                lines=3,
+                elem_classes=["input-wrap"]
+            )
+            with gr.Row():
+                run_btn = gr.Button("⚡ Send", variant="primary", scale=3)
+                clear_btn = gr.Button("🗑️ Clear", variant="secondary", scale=1)
+
+        with gr.Column(scale=4):
+            thinking_out = gr.Textbox(
+                label="🧠 Thinking Process",
+                lines=10,
+                interactive=False,
+                elem_classes=["thinking-box"]
+            )
+            answer_out = gr.Textbox(
+                label="✅ Final Answer",
+                lines=6,
+                interactive=False,
+                elem_classes=["answer-box"]
+            )
+            with gr.Accordion("⚙️ Settings", open=False):
+                system_prompt_input = gr.Textbox(
+                    label="🔧 System Prompt",
+                    value=DEFAULT_SYSTEM_PROMPT,
+                    lines=4,
+                    elem_classes=["system-box"]
+                )
+                max_tokens = gr.Slider(64, 4096, value=4048, step=32, label="Max Tokens")
+                temperature = gr.Slider(0.0, 4, value=0.9, step=0.05, label="Temperature")
+                top_p = gr.Slider(0.1, 5.0, value=0.35, step=0.05, label="Top-p")
+                top_k = gr.Slider(1, 500, value=61, step=1, label="Top-k")
+                show_think = gr.Checkbox(value=True, label="Show Thinking Process")
+
+    # Examples
+    gr.Examples(
+        examples=[
+            ["What is artificial intelligence?"],
+            ["How does a large language model learn?"],
+            ["Explain the water cycle in simple terms."],
+            ["What is the meaning of life?"],
+            ["Write a short poem about the universe."],
+            ["What is Drugs?"]
+        ],
+        inputs=[prompt_input],
+        label="💡 Example Questions"
+    )
+
+    # Wire events
+    inputs_list = [prompt_input, chatbot, system_prompt_input, max_tokens, temperature, top_p, top_k, show_think]
+    outputs_list = [prompt_input, chatbot, thinking_out, answer_out]
+
+    run_btn.click(chat_generate, inputs=inputs_list, outputs=outputs_list)
+    prompt_input.submit(chat_generate, inputs=inputs_list, outputs=outputs_list)
+    clear_btn.click(clear_fn, outputs=outputs_list)
+
+    # ------------------------------------------------------------------
+    # Language switch JavaScript – swaps all translatable text
+    # ------------------------------------------------------------------
+    gr.HTML("""
+    <script>
+    const content = """ + str(CONTENT) + """;
+    let currentLang = 'en';
+
+    function switchLanguage() {
+        currentLang = currentLang === 'en' ? 'it' : 'en';
+        const t = content[currentLang];
+
+        // Update header
+        document.getElementById('main-title').innerHTML = t.title;
+        document.getElementById('main-intro').innerHTML = t.intro;
+        document.getElementById('models-title').innerHTML = t.models_title;
+        document.getElementById('focus-title').innerHTML = t.focus_title;
+        document.getElementById('resources-title').innerHTML = t.resources_title;
+
+        // Model descriptions
+        document.getElementById('model-desc-135').innerHTML = t.model_q135;
+        document.getElementById('model-desc-270').innerHTML = t.model_q270;
+        document.getElementById('model-desc-mod').innerHTML = t.model_qmod;
+
+        // Dataset paragraph
+        document.getElementById('dataset-paragraph').innerHTML = t.dataset_link;
+
+        // Focus list
+        const focusList = document.getElementById('focus-list');
+        focusList.innerHTML = t.focus_items.map(item => '<li>' + item + '</li>').join('');
+
+        // Resources table (rebuild rows)
+        const resTable = document.getElementById('resources-table');
+        resTable.innerHTML = t.resources.map(r => `<tr><td>${r[0].replace(/📚|🛡️|📝|💻/g, '')} <a href="${r[1]}" target="_blank">${r[1].split('/').pop()}</a></td></tr>`).join('');
+
+        // Footer
+        document.getElementById('footer-text').innerHTML = t.footer;
+
+        // Toggle button text
+        const btn = document.querySelector('.lang-toggle');
+        btn.innerHTML = currentLang === 'en' ? '🇮🇹 Italiano' : '🇬🇧 English';
+    }
+    </script>
+    """)
+
+# ----------------------------------------------------------------------
+# Launch
+# ----------------------------------------------------------------------
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True,
+    )