Spaces:

oyinbo
/

localm

Configuration error

App Files Files Community

mihailik commited on Aug 12

Commit

65c899d

1 Parent(s): 659fc25

Chat3 try?

Browse files

Files changed (2) hide show

chat-copil2-web.html +0 -1
chat3.html +178 -0

chat-copil2-web.html CHANGED Viewed

@@ -64,7 +64,6 @@ const statusEl = document.getElementById('status');
 const toastEl = document.getElementById('toast');
 const tokenModal = document.getElementById('token-modal');
 const tokenInput = document.getElementById('token-input');
-hideTokenModal();
 let state = { pipe:null, modelId:null, task:'text-generation' };
 const savedToken = localStorage.getItem('hf_token'); if(savedToken){env.HF_TOKEN=savedToken;}

 const toastEl = document.getElementById('toast');
 const tokenModal = document.getElementById('token-modal');
 const tokenInput = document.getElementById('token-input');
 let state = { pipe:null, modelId:null, task:'text-generation' };
 const savedToken = localStorage.getItem('hf_token'); if(savedToken){env.HF_TOKEN=savedToken;}

chat3.html ADDED Viewed

	@@ -0,0 +1,178 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>AI Chat App</title>
+  <style>
+    body {
+      margin: 0;
+      font-family: sans-serif;
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      background: #f5f5f5;
+    }
+    header {
+      padding: 10px;
+      background: #333;
+      color: white;
+      text-align: center;
+    }
+    #model-select {
+      width: 100%;
+      padding: 10px;
+      font-size: 1em;
+    }
+    #chat {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px;
+      background: #fff;
+    }
+    .message {
+      margin: 10px 0;
+      padding: 10px;
+      border-radius: 5px;
+      max-width: 80%;
+    }
+    .user {
+      background: #d1e7dd;
+      align-self: flex-end;
+    }
+    .bot {
+      background: #e2e3e5;
+      align-self: flex-start;
+    }
+    #input-area {
+      display: flex;
+      padding: 10px;
+      background: #eee;
+    }
+    #user-input {
+      flex: 1;
+      padding: 10px;
+      font-size: 1em;
+    }
+    #send-btn {
+      padding: 10px;
+      font-size: 1em;
+    }
+    #status {
+      text-align: center;
+      padding: 5px;
+      font-size: 0.9em;
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>AI Chat App</h1>
+  </header>
+  <select id="model-select">
+    <option value="Xenova/distilgpt2">Xenova/distilgpt2</option>
+    <option value="Xenova/phi-3-mini-4k-instruct">Xenova/phi-3-mini-4k-instruct</option>
+    <option value="Xenova/t5-small">Xenova/t5-small</option>
+    <option value="Xenova/gemma-2b-it">Xenova/gemma-2b-it</option>
+    <option value="Xenova/llama-3-8b-instruct">Xenova/llama-3-8b-instruct</option>
+    <option value="Xenova/Mistral-7B-Instruct-v0.2">Xenova/Mistral-7B-Instruct-v0.2</option>
+  </select>
+  <div id="status">Select a model to begin</div>
+  <div id="chat"></div>
+  <div id="input-area">
+    <input type="text" id="user-input" placeholder="Type your message..." />
+    <button id="send-btn">Send</button>
+  </div>
+  <script type="module">
+    const chat = document.getElementById('chat');
+    const input = document.getElementById('user-input');
+    const sendBtn = document.getElementById('send-btn');
+    const modelSelect = document.getElementById('model-select');
+    const status = document.getElementById('status');
+    let worker;
+    let busy = false;
+    function appendMessage(text, sender) {
+      const msg = document.createElement('div');
+      msg.className = `message ${sender}`;
+      msg.textContent = text;
+      chat.appendChild(msg);
+      chat.scrollTop = chat.scrollHeight;
+    }
+    function setStatus(text) {
+      status.textContent = text;
+    }
+    function initWorker(model) {
+      if (worker) worker.terminate();
+      setStatus('Loading model...');
+      busy = true;
+      worker = new Worker(URL.createObjectURL(new Blob([`
+        importScripts('https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0/dist/transformers.min.js');
+        let pipeline;
+        self.onmessage = async (e) => {
+          const { type, data } = e.data;
+          try {
+            if (type === 'load') {
+              pipeline = await window.transformers.pipeline('text-generation', data.model, { progress_callback: (x) => self.postMessage({ type: 'progress', data: x }) });
+              self.postMessage({ type: 'ready' });
+            } else if (type === 'generate') {
+              const output = await pipeline(data.text, { max_new_tokens: 100 });
+              self.postMessage({ type: 'response', data: output[0].generated_text });
+            }
+          } catch (err) {
+            self.postMessage({ type: 'error', data: err.stack });
+          }
+        };
+      `], { type: 'application/javascript' })));
+      worker.onmessage = (e) => {
+        const { type, data } = e.data;
+        if (type === 'ready') {
+          setStatus('Model ready');
+          busy = false;
+        } else if (type === 'progress') {
+          setStatus('Loading... ' + Math.round(data * 100) + '%');
+        } else if (type === 'response') {
+          appendMessage(data, 'bot');
+          setStatus('Model ready');
+          busy = false;
+        } else if (type === 'error') {
+          appendMessage('Error: ' + data, 'bot');
+          setStatus('Error occurred');
+          busy = false;
+        }
+      };
+      worker.postMessage({ type: 'load', data: { model } });
+    }
+    modelSelect.addEventListener('change', () => {
+      initWorker(modelSelect.value);
+    });
+    sendBtn.addEventListener('click', () => {
+      if (busy) return;
+      const text = input.value.trim();
+      if (!text) return;
+      appendMessage(text, 'user');
+      input.value = '';
+      setStatus('Generating response...');
+      busy = true;
+      worker.postMessage({ type: 'generate', data: { text } });
+    });
+    input.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') sendBtn.click();
+    });
+    // Load default model
+    initWorker(modelSelect.value);
+  </script>
+</body>
+</html>