Upload 3 files

app.py

@@ -0,0 +1,164 @@
+import logging
+import torch
+import json
+import os
+from flask import Flask, render_template, request, Response, stream_with_context
+from transformers import AutoTokenizer, AutoModelForCausalLM, TextIteratorStreamer, BitsAndBytesConfig
+from threading import Thread
+import random
+import numpy as np
+
+logging.basicConfig(level=logging.INFO)
+app = Flask(__name__)
+
+MODEL_NAME = "Mattimax/DATA-AI_Chat_3_0.5B"
+# Controlla se c'è una GPU, altrimenti usa CPU
+device = "cuda" if torch.cuda.is_available() else "cpu"
+
+# Imposta seed per reproducibilità
+SEED = 42
+random.seed(SEED)
+np.random.seed(SEED)
+torch.manual_seed(SEED)
+if device == "cuda":
+    torch.cuda.manual_seed_all(SEED)
+    torch.backends.cudnn.deterministic = True
+
+# Configurazione per caricare il modello in modo efficiente
+bnb_config = None
+if device == "cuda":
+    bnb_config = BitsAndBytesConfig(
+        load_in_4bit=True,
+        bnb_4bit_compute_dtype=torch.float16
+    )
+
+logging.info("Caricamento tokenizer e modello: %s (device=%s)", MODEL_NAME, device)
+tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+
+# Leggi il chat template dal tokenizer config
+chat_template = None
+try:
+    from transformers.models.auto.tokenization_auto import get_tokenizer_config
+    config_dict = get_tokenizer_config(MODEL_NAME)
+    chat_template = config_dict.get("chat_template")
+    logging.info("Chat template caricato: %s", chat_template[:100] if chat_template else "Non disponibile")
+except Exception as e:
+    logging.warning("Impossibile caricare chat_template: %s", e)
+    # Fallback: template di default semplice
+    chat_template = "{% for message in messages %}{% if message['role'] == 'user' %}User: {{ message['content'] }}\n{% elif message['role'] == 'assistant' %}Assistant: {{ message['content'] }}\n{% else %}{{ message['role'] }}: {{ message['content'] }}\n{% endif %}{% endfor %}"
+
+# assicurati che esista un pad_token
+if tokenizer.pad_token_id is None:
+    tokenizer.pad_token_id = tokenizer.eos_token_id
+
+if device == "cuda":
+    # usa device_map auto per posizionare i pesi sulla GPU in modo efficiente
+    model = AutoModelForCausalLM.from_pretrained(
+        MODEL_NAME,
+        quantization_config=bnb_config,
+        device_map="auto"
+    )
+else:
+    # caricamento su CPU (può essere lento) - evita .to() per device_map compatibile
+    model = AutoModelForCausalLM.from_pretrained(MODEL_NAME)
+    model.to("cpu")
+
+model.eval()  # modo valutazione per stabilità
+
+# System prompt per guidare il comportamento
+SYSTEM_PROMPT = """Tu sei DAC, un assistente intelligente e amichevole. Rispondi in modo coerente, chiaro e utile. 
+Se non conosci la risposta, ammettilo con sincerità. Mantieni il tono professionale ma accessibile."""
+
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+
+@app.route('/chat', methods=['POST'])
+def chat():
+    data = request.json or {}
+    user_input = data.get("message", "")
+    if not user_input:
+        return Response(json.dumps({"error": "empty message"}), status=400)
+
+    # Costruisci il prompt con system message e chat template
+    messages = [
+        {"role": "system", "content": SYSTEM_PROMPT},
+        {"role": "user", "content": user_input}
+    ]
+
+    # Applica il chat template se disponibile
+    if chat_template and hasattr(tokenizer, 'apply_chat_template'):
+        try:
+            prompt_text = tokenizer.apply_chat_template(
+                messages, 
+                tokenize=False, 
+                add_generation_prompt=True
+            )
+        except Exception as e:
+            logging.warning("Errore applicando chat_template: %s, fallback a prompt semplice", e)
+            prompt_text = f"System: {SYSTEM_PROMPT}\nUser: {user_input}\nAssistant:"
+    else:
+        # Fallback semplice
+        prompt_text = f"System: {SYSTEM_PROMPT}\nUser: {user_input}\nAssistant:"
+
+    logging.info("Prompt generato: %s", prompt_text[:200])
+
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+
+    inputs = tokenizer(prompt_text, return_tensors="pt")
+    # sposta gli input sulla GPU se disponibile
+    if device == "cuda":
+        inputs = {k: v.to("cuda") for k, v in inputs.items()}
+
+    # Parametri migliorati per stabilità e qualità
+    generation_kwargs = dict(
+        input_ids=inputs.get("input_ids"),
+        attention_mask=inputs.get("attention_mask"),
+        streamer=streamer,
+        max_new_tokens=2048,
+        temperature=0.5,  # ridotto per più stabilità
+        do_sample=True,
+        top_p=0.80,  # nucleus sampling per evitare token improbabili
+        top_k=40,  # limita i candidati ai top-k
+        repetition_penalty=1.2,  # penalizza ripetizioni
+        pad_token_id=tokenizer.pad_token_id,
+        eos_token_id=tokenizer.eos_token_id,
+        no_repeat_ngram_size=4,  # evita n-grammi ripetuti
+        early_stopping=False,
+    )
+
+    def run_generate():
+        try:
+            with torch.no_grad():
+                model.generate(**generation_kwargs)
+        except Exception as e:
+            logging.exception("Errore durante la generazione:")
+
+    thread = Thread(target=run_generate)
+    thread.daemon = True
+    thread.start()
+
+    def generate():
+        try:
+            # yield streaming tokens in formato SSE
+            for new_text in streamer:
+                yield f"data: {json.dumps({'token': new_text})}\n\n"
+        except GeneratorExit:
+            logging.info("Client disconnected dalla stream")
+        except Exception:
+            logging.exception("Errore nello stream")
+
+    headers = {
+        'Cache-Control': 'no-cache',
+        'X-Accel-Buffering': 'no'
+    }
+
+    return Response(stream_with_context(generate()), mimetype='text/event-stream', headers=headers)
+
+
+if __name__ == "__main__":
+    # HF Spaces richiede tassativamente la porta 7860
+    logging.info("Avvio app su 0.0.0.0:7860")
+    app.run(host='0.0.0.0', port=7860, threaded=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+torch
+transformers
+bitsandbytes
+numpy

templates/index.html

@@ -0,0 +1,649 @@
+<!DOCTYPE html>
+<html lang="it">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DAC M.INC. Interface</title>
+    <style>
+        :root {
+            --bg-dark: #000000;
+            --bg-sidebar: rgba(15, 15, 15, 0.95);
+            --bg-glass: rgba(255, 255, 255, 0.04);
+            /* Gradiente morbido e multicolore */
+            --primary-rainbow: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);
+            --text-main: #f0f0f0;
+            --text-muted: #808080;
+            --border-glass: rgba(255, 255, 255, 0.08);
+            --shadow-premium: 0 20px 40px rgba(0,0,0,0.6);
+            --transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
+        }
+
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+
+        body {
+            font-family: 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            height: 100vh;
+            display: flex;
+            overflow: hidden;
+            padding: 2rem;
+        }
+
+        /* --- HEADER --- */
+        .header {
+            position: fixed;
+            top: 0; left: 0; right: 0;
+            height: 60px;
+            padding: 0 20px;
+            display: flex;
+            align-items: center;
+            z-index: 1000;
+            justify-content: space-between;
+        }
+
+        .new-chat-btn {
+            width: 44px; height: 44px;
+            display: flex; justify-content: center; align-items: center;
+            cursor: pointer;
+            background: var(--bg-glass);
+            border-radius: 12px;
+            border: 1px solid var(--border-glass);
+            transition: var(--transition);
+            backdrop-filter: blur(5px);
+            font-size: 24px;
+            color: var(--text-main);
+        }
+        .new-chat-btn:hover { background: rgba(255,255,255,0.08); transform: scale(1.05); }
+
+        .menu-btn {
+            width: 44px; height: 44px;
+            display: flex; flex-direction: column;
+            justify-content: center; align-items: center;
+            cursor: pointer;
+            background: var(--bg-glass);
+            border-radius: 12px;
+            border: 1px solid var(--border-glass);
+            transition: var(--transition);
+            backdrop-filter: blur(5px);
+        }
+
+        .menu-btn-line {
+            width: 22px; height: 2px;
+            background-color: var(--text-main);
+            margin: 3px 0;
+            transition: var(--transition);
+        }
+
+        .menu-btn.active .menu-btn-line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
+        .menu-btn.active .menu-btn-line:nth-child(2) { opacity: 0; }
+        .menu-btn.active .menu-btn-line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
+
+        /* --- SIDEBAR --- */
+        .sidebar {
+            width: 300px;
+            background: var(--bg-sidebar);
+            backdrop-filter: blur(30px);
+            height: 100vh;
+            position: fixed;
+            left: -300px;
+            top: 0;
+            z-index: 900;
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            padding: 80px 20px 20px;
+            border-right: 1px solid var(--border-glass);
+        }
+
+        .sidebar.open { transform: translateX(300px); }
+
+        .history-title {
+            font-size: 11px;
+            text-transform: uppercase;
+            color: var(--text-muted);
+            letter-spacing: 2px;
+            margin-bottom: 25px;
+            font-weight: 600;
+        }
+
+        .chat-list { flex: 1; overflow-y: auto; color: var(--text-muted); font-size: 14px; }
+
+        .profile-section {
+            padding: 12px 15px;
+            background: var(--bg-glass);
+            border-radius: 18px;
+            display: flex;
+            align-items: center;
+            gap: 15px;
+            cursor: pointer;
+            transition: var(--transition);
+            border: 1px solid var(--border-glass);
+        }
+
+        .avatar {
+            width: 38px; height: 38px;
+            border-radius: 50%;
+            background: #222;
+            color: #fff;
+            font-family: 'Georgia', serif;
+            font-size: 20px;
+            font-weight: bold;
+            display: flex; align-items: center; justify-content: center;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        /* --- LOGO CENTRALE ANIMATO --- */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            width: 100%;
+        }
+
+        .logo-container {
+            position: relative;
+            text-align: center;
+            z-index: 10;
+            transition: all 1s ease;
+        }
+
+        .logo-container.minimized { top: 30px; transform: scale(0.4) translateY(0); opacity: 0.5; pointer-events: none; }
+
+        .logo-aura {
+            position: absolute;
+            top: 50%; left: 50%;
+            transform: translate(-50%, -50%);
+            width: 200px; height: 200px;
+            background: var(--primary-rainbow);
+            background-size: 300% 300%;
+            filter: blur(70px);
+            opacity: 0.25;
+            border-radius: 50%;
+            animation: flowColors 8s infinite linear; /* Calma */
+        }
+
+        .logo-text {
+            font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
+            font-weight: 900;
+            font-size: 5rem;
+            letter-spacing: -3px;
+            /* Effetto gradiente nel testo */
+            background: var(--primary-rainbow);
+            background-size: 300% 300%;
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            position: relative;
+            animation: flowColors 8s infinite linear; /* Calma */
+        }
+        
+        /* Stile per la nuova scritta M.INC. */
+        .sub-text {
+            color: var(--text-muted);
+            font-size: 13px; /* Mantiene la stessa grandezza */
+            letter-spacing: 5px;
+            margin-top: 5px;
+            font-weight: 700;
+            text-transform: uppercase;
+        }
+
+        @keyframes flowColors {
+            0% { background-position: 0% 50%; }
+            50% { background-position: 100% 50%; }
+            100% { background-position: 0% 50%; }
+        }
+
+        /* CHAT WINDOW */
+        #chatWindow {
+            width: 100%;
+            max-width: 850px;
+            flex: 1;
+            overflow-y: auto;
+            padding: 100px 20px 180px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            scrollbar-width: none;
+        }
+
+        .message { max-width: 85%; line-height: 1.6; font-size: 16px; }
+        .user-msg { align-self: flex-end; background: var(--bg-glass); padding: 12px 20px; border-radius: 20px 20px 4px 20px; border: 1px solid var(--border-glass); }
+        .bot-msg { align-self: flex-start; width: 100%; }
+
+        .message-actions {
+            display: flex;
+            gap: 8px;
+            margin-top: 8px;
+            font-size: 12px;
+        }
+        .message-actions button {
+            padding: 4px 10px;
+            background: rgba(255,255,255,0.1);
+            border: 1px solid rgba(255,255,255,0.2);
+            border-radius: 8px;
+            color: var(--text-main);
+            cursor: pointer;
+            transition: all 0.2s;
+            font-size: 12px;
+        }
+        .message-actions button:hover { background: rgba(255,255,255,0.15); transform: translateY(-1px); }
+
+        /* THOUGHT BOX STYLE */
+        .thought-box {
+            background: rgba(64, 156, 255, 0.12); /* azzurro chiaro */
+            border-left: 4px solid rgba(64, 156, 255, 0.9);
+            padding: 14px;
+            margin: 10px 0;
+            border-radius: 14px; /* bordi stondati */
+            font-style: italic;
+            color: #08354b;
+            font-size: 0.95em;
+            box-shadow: 0 6px 18px rgba(20,40,60,0.15);
+        }
+        .thought-header {
+            display: block;
+            font-size: 11px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 8px;
+            color: var(--text-muted);
+            font-weight: bold;
+        }
+
+        /* --- INPUT AREA --- */
+        .input-container {
+            position: fixed;
+            bottom: 35px;
+            width: 100%;
+            max-width: 780px;
+            padding: 0 20px;
+        }
+
+        .input-box {
+            background: var(--bg-sidebar);
+            border: 1px solid var(--border-glass);
+            border-radius: 28px;
+            padding: 10px 10px 10px 25px;
+            display: flex;
+            align-items: center;
+            backdrop-filter: blur(20px);
+            box-shadow: var(--shadow-premium);
+        }
+
+        textarea {
+            flex: 1;
+            background: transparent;
+            border: none;
+            outline: none;
+            color: var(--text-main);
+            font-size: 16px;
+            padding: 12px 0;
+            resize: none;
+            max-height: 150px;
+            font-family: Arial, sans-serif;
+        }
+
+        .send-btn {
+            width: 46px; height: 46px;
+            background: var(--text-main);
+            border-radius: 50%;
+            border: none;
+            cursor: pointer;
+            margin-left: 15px;
+            display: flex; align-items: center; justify-content: center;
+            transition: var(--transition);
+        }
+
+        .send-btn:hover { transform: scale(1.05); background: #ffffff; }
+
+        /* Lista chat recenti nella sidebar */
+        .chat-list .chat-item {
+            padding: 10px 12px;
+            border-radius: 10px;
+            margin-bottom: 8px;
+            cursor: pointer;
+            transition: background 0.2s;
+            color: var(--text-main);
+            background: transparent;
+            font-size: 14px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .chat-list .chat-item:hover { background: rgba(255,255,255,0.02); }
+        .chat-list .chat-item .meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+        /* --- CONTENUTI AGGIUNTIVI --- */
+        h1 { font-size: 16px; margin-top: 0; }
+        p { color: rgb(107, 114, 128); font-size: 15px; margin-bottom: 10px; margin-top: 5px; }
+        .card { max-width: 620px; margin: 0 auto; padding: 16px; border: 1px solid lightgray; border-radius: 16px; }
+        .card p:last-child { margin-bottom: 0; }
+
+    </style>
+</head>
+<body>
+
+    <div class="header">
+        <div class="menu-btn" id="hamburger">
+            <div class="menu-btn-line"></div>
+            <div class="menu-btn-line"></div>
+            <div class="menu-btn-line"></div>
+        </div>
+        <div class="new-chat-btn" id="newChatBtn" title="Nuova chat">+</div>
+    </div>
+
+    <aside class="sidebar" id="sidebar">
+        <div class="history-title">Cronologia</div>
+        <div class="chat-list">
+            <div style="padding: 15px 0; text-align: center; opacity: 0.4; font-style: italic;">Nessuna attività recente</div>
+        </div>
+
+        <div class="profile-section" id="profileBtn">
+            <div class="avatar">M</div>
+            <div style="flex: 1;">
+                <div style="font-size: 14px; font-weight: 600;">Utente Locale</div>
+                <div style="font-size: 11px; color: var(--text-muted);">Settings</div>
+            </div>
+            <span style="font-size: 16px; opacity: 0.6;">⚙️</span>
+        </div>
+    </aside>
+
+    <main class="main-content">
+        <div class="logo-container" id="logoMain">
+            <div class="logo-aura"></div>
+            <h1 class="logo-text">DAC</h1>
+            <p class="sub-text">M.INC.</p>
+        </div>
+
+        <div id="chatWindow"></div>
+
+        <div class="input-container">
+            <div class="input-box">
+                <textarea id="chatInput" placeholder="Chiedi a DAC..." rows="1"></textarea>
+                <button class="send-btn" id="sendBtn">
+                    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
+                </button>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        // Elementi DOM principali
+        const hamburger = document.getElementById('hamburger');
+        const sidebar = document.getElementById('sidebar');
+        const chatInput = document.getElementById('chatInput');
+        const sendBtn = document.getElementById('sendBtn');
+        const chatWindow = document.getElementById('chatWindow');
+        const logoMain = document.getElementById('logoMain');
+        const chatList = document.querySelector('.chat-list');
+        const newChatBtn = document.getElementById('newChatBtn');
+
+        // Contesto per controllo generazione
+        let currentAbortController = null;
+        let currentBotDiv = null;
+        let isGenerating = false;
+        let lastUserMessage = null;
+        let lastBotMessage = null;
+
+        // Toggle sidebar / hamburger animation
+        hamburger.addEventListener('click', () => {
+            hamburger.classList.toggle('active');
+            sidebar.classList.toggle('open');
+        });
+
+        // Chiudi sidebar cliccando il main
+        document.querySelector('.main-content').addEventListener('click', () => {
+            sidebar.classList.remove('open');
+            hamburger.classList.remove('active');
+        });
+
+        // Nuova chat
+        newChatBtn.addEventListener('click', () => {
+            chatWindow.innerHTML = '';
+            chatInput.value = '';
+            chatInput.style.height = 'auto';
+            logoMain.classList.remove('minimized');
+            lastUserMessage = null;
+            lastBotMessage = null;
+            if (currentAbortController) currentAbortController.abort();
+            setSendToStop(false);
+        });
+
+        // Auto-resize textarea
+        chatInput.addEventListener('input', function() {
+            this.style.height = 'auto';
+            this.style.height = (this.scrollHeight) + 'px';
+        });
+
+        // Funzione per inviare messaggi: mantiene lo streaming SSE-like
+        async function sendMessage() {
+            const message = chatInput.value.trim();
+            if (!message) return;
+
+            await generateResponse(message);
+        }
+
+        async function generateResponse(message) {
+            // UI: minimizza logo e reset input
+            logoMain.classList.add('minimized');
+            chatInput.value = '';
+            chatInput.style.height = 'auto';
+
+            // Mostra messaggio utente
+            appendMessage('user', message);
+            addRecentChat(message, 'user');
+            lastUserMessage = message;
+
+            // Placeholder per risposta bot
+            const botMsgDiv = document.createElement('div');
+            botMsgDiv.className = 'message bot-msg';
+            chatWindow.appendChild(botMsgDiv);
+            currentBotDiv = botMsgDiv;
+
+            let fullText = "";
+
+            // Imposta AbortController per poter fermare la richiesta
+            if (currentAbortController) {
+                try { currentAbortController.abort(); } catch (e) {}
+            }
+            currentAbortController = new AbortController();
+            const signal = currentAbortController.signal;
+
+            // Cambia il tasto send in stop
+            setSendToStop(true);
+            isGenerating = true;
+
+            try {
+                const response = await fetch('/chat', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ message: message }),
+                    signal
+                });
+
+                if (!response.body) {
+                    const txt = await response.text();
+                    fullText = txt;
+                    renderContent(botMsgDiv, fullText);
+                    addRecentChat(fullText, 'bot');
+                    return;
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+
+                while (true) {
+                    const { value, done } = await reader.read();
+                    if (done) break;
+
+                    const chunk = decoder.decode(value);
+                    const lines = chunk.split('\n');
+
+                    for (const line of lines) {
+                        if (!line) continue;
+                        // supporta formato SSE: "data: {...}"
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                fullText += data.token || '';
+                            } catch (e) {
+                                // se non JSON, appende direttamente
+                                fullText += line.replace(/^data: /, '');
+                            }
+                        } else {
+                            // append plain chunks
+                            fullText += line;
+                        }
+                        renderContent(botMsgDiv, fullText);
+                        chatWindow.scrollTop = chatWindow.scrollHeight;
+                    }
+                }
+
+                // Fine generazione
+                lastBotMessage = fullText;
+                addRecentChat(fullText, 'bot');
+                addMessageActions(botMsgDiv);
+            } catch (e) {
+                if (e.name === 'AbortError') {
+                    // richiesta annullata dall'utente - il testo rimane visibile
+                    if (currentBotDiv) {
+                        if (!currentBotDiv.innerHTML || currentBotDiv.innerHTML.trim() === '') {
+                            currentBotDiv.innerHTML = '<em>Generazione interrotta dall\'utente.</em>';
+                        }
+                        // Aggiungi i pulsanti di azione anche al testo parziale
+                        addMessageActions(currentBotDiv);
+                    }
+                } else {
+                    if (currentBotDiv) currentBotDiv.innerHTML = 'Errore di connessione.';
+                }
+            } finally {
+                // ripristina pulsante
+                setSendToStop(false);
+                isGenerating = false;
+                currentAbortController = null;
+            }
+        }
+
+        function stopGeneration() {
+            if (currentAbortController) {
+                currentAbortController.abort();
+            }
+            // Assicurati che il testo rimanga visibile
+            if (currentBotDiv) {
+                // Se il div è vuoto, mostra un messaggio
+                if (!currentBotDiv.innerHTML || currentBotDiv.innerHTML.trim() === '') {
+                    currentBotDiv.innerHTML = '<em>Generazione interrotta. Nessun testo generato.</em>';
+                }
+            }
+        }
+
+        function setSendToStop(flag) {
+            if (flag) {
+                sendBtn.innerHTML = '✖';
+                sendBtn.title = 'Interrompi generazione';
+                sendBtn.classList.add('stop-mode');
+                sendBtn.removeEventListener('click', sendMessage);
+                sendBtn.addEventListener('click', stopGeneration);
+            } else {
+                sendBtn.innerHTML = '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>';
+                sendBtn.title = 'Invia';
+                sendBtn.classList.remove('stop-mode');
+                sendBtn.removeEventListener('click', stopGeneration);
+                sendBtn.addEventListener('click', sendMessage);
+            }
+        }
+
+        // Rendering che supporta tag <think>
+        function renderContent(container, text) {
+            let html = text;
+
+            // Se ci sono tag <think>, trasformali in thought-box
+            if (html.includes('<think>')) {
+                if (html.includes('</think>')) {
+                    // Pensiero completato
+                    html = html.replace(/<think>/g, '<div class="thought-box"><span class="thought-header">💭 Pensiero</span>');
+                    html = html.replace(/<\/think>/g, '</div><div class="answer-box">');
+                    html += '</div>';
+                } else {
+                    // Pensiero in corso
+                    html = html.replace(/<think>/g, '<div class="thought-box"><span class="thought-header">💭 Sto pensando...</span>');
+                    if (!html.endsWith('</div>')) html += '...</div>';
+                }
+            }
+
+            // Escape semplice: se il testo non contiene HTML (o contiene solo le nostre sostituzioni), inseriscilo come testo
+            // Qui assumiamo che il modello può emettere HTML intenzionalmente (ad es. <think>), quindi usiamo innerHTML dopo trasformazioni.
+            container.innerHTML = html;
+        }
+
+        // Aggiunge una voce nella lista chat recenti
+        function addRecentChat(text, role) {
+            try {
+                const item = document.createElement('div');
+                item.className = 'chat-item';
+                const snippet = text.replace(/<[^>]+>/g, '');
+                item.textContent = (role === 'user' ? 'Tu: ' : 'DAC: ') + snippet.slice(0, 80);
+                const meta = document.createElement('div');
+                meta.className = 'meta';
+                const now = new Date();
+                meta.textContent = now.toLocaleTimeString();
+                item.appendChild(meta);
+                // click per riportare il messaggio nell'input
+                item.addEventListener('click', () => {
+                    chatInput.value = text.slice(0, 400);
+                    chatInput.dispatchEvent(new Event('input'));
+                    sidebar.classList.remove('open');
+                    hamburger.classList.remove('active');
+                });
+                // inserisci in cima
+                if (chatList.firstChild) chatList.insertBefore(item, chatList.firstChild);
+                else chatList.appendChild(item);
+                // mantieni al massimo 20
+                while (chatList.querySelectorAll('.chat-item').length > 20) {
+                    chatList.removeChild(chatList.lastChild);
+                }
+            } catch (e) { console.error(e); }
+        }
+
+        // Aggiunge pulsanti di azione al messaggio bot
+        function addMessageActions(botMsgDiv) {
+            const container = document.createElement('div');
+            container.className = 'message-actions';
+            const regenBtn = document.createElement('button');
+            regenBtn.textContent = '🔄 Rigenera';
+            regenBtn.addEventListener('click', () => {
+                if (lastUserMessage && !isGenerating) {
+                    // rimuove il messaggio precedente e rigeneran
+                    botMsgDiv.remove();
+                    container.remove();
+                    generateResponse(lastUserMessage);
+                }
+            });
+            container.appendChild(regenBtn);
+            botMsgDiv.parentNode.insertBefore(container, botMsgDiv.nextSibling);
+        }
+
+        function appendMessage(role, text) {
+            const div = document.createElement('div');
+            div.className = `message ${role}-msg`;
+            div.textContent = text;
+            chatWindow.appendChild(div);
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+        }
+
+        // Invio con click e invio con Enter
+        sendBtn.addEventListener('click', sendMessage);
+        chatInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        });
+
+    </script>
+</body>
+</html>