index.html

<!DOCTYPE html>
<html lang="it" class="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assistente AI Intelligente - AI Chatbot</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            brand: { 500: '#8b5cf6', 600: '#7c3aed' }
          }
        }
      }
    }
  </script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
  </style>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen flex flex-col font-sans selection:bg-purple-500/30 selection:text-purple-200">
  <!-- Header -->
  <header class="border-b border-slate-800 bg-slate-900/80 backdrop-blur-md px-6 py-3.5 flex items-center justify-between sticky top-0 z-20">
    <div class="flex items-center gap-3">
      <div class="w-9 h-9 rounded-2xl bg-gradient-to-tr from-purple-600 to-indigo-500 text-white flex items-center justify-center text-lg shadow-lg shadow-purple-500/20">
        🤖
      </div>
      <div>
        <h1 class="text-sm font-bold text-white">Assistente AI Intelligente</h1>
        <p class="text-[11px] text-purple-400 font-medium" id="activeModelLabel">meta-llama/Llama-3.2-3B-Instruct</p>
      </div>
    </div>

    <!-- Model Switcher -->
    <div class="flex items-center gap-2">
      <select id="modelSelect" class="bg-slate-900 border border-slate-700 rounded-xl px-3 py-1.5 text-xs text-purple-200 font-semibold focus:outline-none focus:border-purple-500">
        <option value="meta-llama/Llama-3.2-3B-Instruct" selected>meta-llama/Llama-3.2-3B-Instruct</option>
        <option value="meta-llama/Llama-3.2-3B-Instruct">Llama 3.2 3B Instruct</option>
        <option value="meta-llama/Llama-3.3-70B-Instruct">Llama 3.3 70B Instruct</option>
        <option value="Qwen/Qwen2.5-Coder-32B-Instruct">Qwen 2.5 Coder 32B</option>
        <option value="deepseek-ai/DeepSeek-R1-Distill-Qwen-32B">DeepSeek R1 Distill 32B</option>
        <option value="mistralai/Mistral-7B-Instruct-v0.3">Mistral 7B Instruct</option>
      </select>
    </div>
  </header>

  <!-- Chat Area -->
  <main class="flex-1 max-w-4xl w-full mx-auto p-4 md:p-6 flex flex-col justify-between overflow-hidden">
    <!-- Messages Container -->
    <div id="chatMessages" class="flex-1 overflow-y-auto space-y-4 pr-1 pb-4">
      <div class="flex gap-3 items-start">
        <div class="w-8 h-8 rounded-xl bg-purple-500/20 text-purple-300 border border-purple-500/30 flex items-center justify-center text-sm shrink-0">
          🤖
        </div>
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-4 text-xs text-slate-200 max-w-[85%] leading-relaxed shadow-md">
          Ciao! Sono il tuo <strong>Chatbot AI (Assistente AI Intelligente)</strong> pronto all'uso su Hugging Face. Chiedimi qualsiasi cosa o scrivi del codice!
        </div>
      </div>
    </div>

    <!-- Input Bar -->
    <form id="chatForm" class="pt-3 border-t border-slate-800/80">
      <div class="relative flex items-center">
        <textarea
          id="userInput"
          rows="1"
          placeholder="Scrivi un messaggio per il chatbot..."
          class="w-full bg-slate-900 border border-slate-800 rounded-2xl pl-4 pr-14 py-3.5 text-xs text-slate-100 placeholder-slate-500 focus:outline-none focus:border-purple-500 resize-none font-sans shadow-inner"
        ></textarea>
        <button
          type="submit"
          id="sendBtn"
          class="absolute right-2 p-2.5 rounded-xl bg-gradient-to-r from-purple-600 to-indigo-600 hover:opacity-95 text-white shadow-md shadow-purple-500/20 active:scale-95 transition-all"
        >
          <i class="fa-solid fa-paper-plane text-xs"></i>
        </button>
      </div>
    </form>
  </main>

  <script>
    const messages = [
      { role: 'system', content: "Sei un assistente AI amichevole, intelligente e molto competente. Rispondi sempre in modo chiaro e utile." }
    ];

    const chatContainer = document.getElementById('chatMessages');
    const chatForm = document.getElementById('chatForm');
    const userInput = document.getElementById('userInput');
    const modelSelect = document.getElementById('modelSelect');
    const activeModelLabel = document.getElementById('activeModelLabel');

    modelSelect.addEventListener('change', (e) => {
      activeModelLabel.textContent = e.target.value;
    });

    function appendMessage(role, content) {
      const isUser = role === 'user';
      const div = document.createElement('div');
      div.className = `flex gap-3 items-start ${isUser ? 'justify-end' : 'justify-start'}`;
      
      div.innerHTML = `
        ${!isUser ? '<div class="w-8 h-8 rounded-xl bg-purple-500/20 text-purple-300 border border-purple-500/30 flex items-center justify-center text-sm shrink-0">🤖</div>' : ''}
        <div class="${isUser ? 'bg-purple-600 text-white' : 'bg-slate-900 text-slate-200 border border-slate-800'} rounded-2xl p-3.5 text-xs max-w-[85%] leading-relaxed whitespace-pre-wrap shadow-md">
          ${content}
        </div>
      `;
      chatContainer.appendChild(div);
      chatContainer.scrollTop = chatContainer.scrollHeight;
      return div;
    }

    chatForm.addEventListener('submit', async (e) => {
      e.preventDefault();
      const text = userInput.value.trim();
      if (!text) return;

      appendMessage('user', text);
      messages.push({ role: 'user', content: text });
      userInput.value = '';

      const model = modelSelect.value;
      const loadingDiv = appendMessage('assistant', 'Sto elaborando la risposta...');

      try {
        const res = await fetch(`https://router.huggingface.co/hf-inference/v1/chat/completions`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            model: model,
            messages: messages,
            max_tokens: 512,
            temperature: 0.7
          })
        });

        if (res.ok) {
          const data = await res.json();
          const reply = data.choices[0]?.message?.content || 'Nessuna risposta.';
          loadingDiv.querySelector('div:last-child').textContent = reply;
          messages.push({ role: 'assistant', content: reply });
        } else {
          loadingDiv.querySelector('div:last-child').textContent = '⚠️ Modello occupato o in caricamento. Riprova tra pochi istanti.';
        }
      } catch (err) {
        loadingDiv.querySelector('div:last-child').textContent = '⚠️ Errore di connessione.';
      }
    });
  </script>
</body>
</html>