Spaces:

mihailik
/

localm

Configuration error

App Files Files Community

mihailik commited on Aug 12

Commit

7256ada

1 Parent(s): 8d3c64b

Error handling - more.

Browse files

Files changed (2) hide show

chat-copil-web.html +70 -225
chat-full.js +11 -0

chat-copil-web.html CHANGED Viewed

@@ -1,250 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
-  <title>Minimal On-Device Chat</title>
   <style>
     body {
-      margin: 0;
       font-family: sans-serif;
-      background: #111;
-      color: #eee;
-      display: flex;
-      flex-direction: column;
-      height: 100vh;
-    }
-    header,
-    form {
-      padding: 10px;
-      background: #222;
-      display: flex;
-      gap: 10px;
-      align-items: center;
     }
     #chat {
-      flex: 1;
-      overflow-y: auto;
-      padding: 10px;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
-    }
-    .msg {
-      display: flex;
-      gap: 8px;
-      align-items: flex-start;
-    }
-    .avatar {
-      width: 24px;
-      height: 24px;
-      border-radius: 50%;
-      background: #444;
-      color: #ccc;
-      font-size: 12px;
-      font-weight: bold;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .bubble {
-      background: #333;
-      padding: 8px 10px;
       border-radius: 8px;
-      max-width: 80%;
-      white-space: pre-wrap;
     }
-    .user .bubble {
-      background: #2a2a2a;
     }
-    .error .bubble {
-      background: #4a1a1a;
-      color: #f88;
     }
-    textarea {
-      flex: 1;
-      padding: 8px;
-      border-radius: 6px;
-      border: none;
-      background: #1a1a1a;
-      color: #eee;
     }
-    button,
-    select {
-      padding: 6px 10px;
-      background: #444;
-      color: #eee;
-      border: none;
       border-radius: 6px;
     }
   </style>
 </head>
 <body>
-  <header>
-    <strong>Model:</strong>
-    <select id="model">
-      <option value="Xenova/distilgpt2">distilgpt2</option>
-      <option value="Xenova/phi-3-mini-4k-instruct">phi-3-mini</option>
-      <option value="Xenova/t5-small">t5-small</option>
-    </select>
-    <span id="status">Idle</span>
-  </header>
-  <div id="chat" aria-live="polite" aria-busy="false"></div>
-  <form id="composer">
-    <textarea id="input" placeholder="Say something…" rows="2"></textarea>
-    <button id="send" type="submit">Send</button>
-  </form>
-  <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@3.0.0/dist/transformers.min.js"></script>
-  <script>
-    (function () {
-      const elChat = document.getElementById('chat');
-      const elInput = document.getElementById('input');
-      const elSend = document.getElementById('send');
-      const elForm = document.getElementById('composer');
-      const elModel = document.getElementById('model');
-      const elStatus = document.getElementById('status');
-      const { pipeline, AutoTokenizer } = window.transformers || {};
-      const state = {
-        busy: false,
-        modelId: elModel.value,
-        systemPrompt: 'You are a helpful assistant.',
-        history: [],
-        resources: new Map(),
-      };
-      const setBusy = (busy, label = '') => {
-        state.busy = busy;
-        [elInput, elSend, elModel].forEach(el => el.disabled = busy);
-        elChat.setAttribute('aria-busy', String(busy));
-        elStatus.textContent = busy ? label : 'Idle';
-      };
-      const addMessage = (role, text, variant = '') => {
-        const msg = document.createElement('div');
-        msg.className = `msg ${role} ${variant}`;
-        const avatar = document.createElement('div');
-        avatar.className = 'avatar';
-        avatar.textContent = role === 'user' ? 'U' : (variant === 'error' ? '!' : 'AI');
-        const bubble = document.createElement('div');
-        bubble.className = 'bubble';
-        bubble.textContent = text;
-        msg.append(avatar, bubble);
-        elChat.appendChild(msg);
-        elChat.scrollTop = elChat.scrollHeight;
-        return bubble;
-      };
-      const pushError = (err, context = 'Error') => {
-        const msg = `${context}: ${err?.message || err}`;
-        console.error(context, err);
-        addMessage('assistant', msg, 'error');
-        state.history.push({ role: 'assistant', content: msg });
-        elStatus.textContent = 'Error';
-      };
-      const ensureModelLoaded = async (modelId) => {
-        if (state.resources.has(modelId)) return state.resources.get(modelId);
-        setBusy(true, 'Loading…');
-        const task = modelId.includes('t5') ? 'text2text-generation' : 'text-generation';
-        const pipe = await pipeline(task, modelId);
-        const tokenizer = await AutoTokenizer.from_pretrained(modelId).catch(() => null);
-        const res = { task, pipe, tokenizer };
-        state.resources.set(modelId, res);
-        setBusy(false);
-        return res;
-      };
-      const buildPrompt = (tokenizer, task, history, systemPrompt) => {
-        const messages = systemPrompt ? [{ role: 'system', content: systemPrompt }] : [];
-        messages.push(...history);
-        if (tokenizer?.apply_chat_template) {
           try {
-            return tokenizer.apply_chat_template(messages, { add_generation_prompt: true, tokenize: false });
-          } catch {}
-        }
-        return messages.map(m => `${m.role}: ${m.content}`).join('\n') + '\nassistant:';
-      };
-      const generateReply = async (text) => {
-        addMessage('user', text);
-        state.history.push({ role: 'user', content: text });
-        const botBubble = addMessage('assistant', '…');
-        try {
-          const { task, pipe, tokenizer } = await ensureModelLoaded(state.modelId);
-          setBusy(true, 'Generating…');
-          const prompt = buildPrompt(tokenizer, task, state.history, state.systemPrompt);
-          const output = await pipe(prompt, {
-            max_new_tokens: 200,
-            temperature: 0.7,
-            top_p: 0.95,
-            do_sample: true,
-            repetition_penalty: 1.1,
-            return_full_text: false,
-          });
-          const textOut = output?.[0]?.generated_text || output?.[0]?.summary_text || output?.[0]?.translation_text || '(no output)';
-          botBubble.textContent = textOut.trim();
-          state.history.push({ role: 'assistant', content: textOut.trim() });
-        } catch (err) {
-          pushError(err, 'Generation failed');
-          botBubble.textContent = '(error)';
-        } finally {
-          setBusy(false);
-        }
-      };
-      elForm.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        const text = elInput.value.trim();
-        if (!text || state.busy) return;
-        elInput.value = '';
-        try {
-          await generateReply(text);
-        } catch (err) {
-          pushError(err, 'Submit error');
-        }
-      });
-      elInput.addEventListener('keydown', (e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-          e.preventDefault();
-          elForm.requestSubmit();
         }
       });
-      elModel.addEventListener('change', async () => {
-        if (state.busy) return;
-        state.modelId = elModel.value;
-        addMessage('assistant', `Switched to model: ${state.modelId}`);
-        try {
-          await ensureModelLoaded(state.modelId);
-        } catch (err) {
-          pushError(err, 'Model load failed');
-        }
-      });
-      window.addEventListener('error', e => pushError(e.error || e.message, 'Uncaught error'));
-      window.addEventListener('unhandledrejection', e => pushError(e.reason, 'Unhandled rejection'));
-      addMessage('assistant', 'Hello! Choose a model and say something.');
-      setTimeout(() => ensureModelLoaded(state.modelId).catch(err => pushError(err, 'Initial load')), 100);
     })();
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8" />
+  <title>AI Chat with Transformers.js</title>
   <style>
     body {
       font-family: sans-serif;
+      background: #f4f4f4;
+      margin: 0;
+      padding: 0;
     }
     #chat {
+      max-width: 600px;
+      margin: 40px auto;
+      background: #fff;
+      padding: 20px;
       border-radius: 8px;
+      box-shadow: 0 0 10px rgba(0,0,0,0.1);
     }
+    .message {
+      margin: 10px 0;
+      padding: 10px;
+      border-radius: 6px;
     }
+    .user {
+      background: #d0eaff;
+      text-align: right;
     }
+    .ai {
+      background: #e8ffe8;
+      text-align: left;
     }
+    input[type="text"] {
+      width: calc(100% - 22px);
+      padding: 10px;
+      margin-top: 10px;
+      border: 1px solid #ccc;
       border-radius: 6px;
     }
   </style>
 </head>
 <body>
+  <div id="chat">
+    <div class="message ai">🤖 Hello! Type something and I'll respond.</div>
+    <input type="text" id="input" placeholder="Say something..." />
+  </div>
+  <script type="module">
+    (async function () {
+      const chat = document.getElementById('chat');
+      const input = document.getElementById('input');
+      let pipeline;
+      try {
+        const { pipeline: loadPipeline } = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers@3.0.0/dist/transformers.min.js');
+        pipeline = await loadPipeline('text-generation', 'Xenova/distilgpt2');
+      } catch (err) {
+        const div = document.createElement('div');
+        div.className = 'message ai';
+        div.style.cssText = 'color:#f88;background:#400;padding:10px;border-radius:6px;margin:10px';
+        div.textContent = '❌ Failed to load Transformers.js: ' + (err.message || err);
+        chat.appendChild(div);
+        console.error('Transformers.js load error:', err);
+        return;
+      }
+      input.addEventListener('keydown', async (e) => {
+        if (e.key === 'Enter' && input.value.trim()) {
+          const userText = input.value.trim();
+          input.value = '';
+          const userDiv = document.createElement('div');
+          userDiv.className = 'message user';
+          userDiv.textContent = userText;
+          chat.appendChild(userDiv);
+          const aiDiv = document.createElement('div');
+          aiDiv.className = 'message ai';
+          aiDiv.textContent = 'Thinking...';
+          chat.appendChild(aiDiv);
           try {
+            const result = await pipeline(userText, { max_new_tokens: 50 });
+            aiDiv.textContent = result[0]?.generated_text || '🤖 (No response)';
+          } catch (err) {
+            aiDiv.textContent = '⚠️ Error generating response: ' + (err.message || err);
+            console.error('Generation error:', err);
+          }
         }
       });
     })();
   </script>
 </body>
+</html>

chat-full.js CHANGED Viewed

@@ -184,3 +184,14 @@ window.onerror = function (msg, url, line, col, error) {
   pushMsg('sys', `global unhandled: ${msg}`, details);
   return false;
 };

   pushMsg('sys', `global unhandled: ${msg}`, details);
   return false;
 };
+// DEBUG: перевірка виконання модуля
+try {
+  const el = document.querySelector('#messages');
+  if (el) {
+    const div = document.createElement('div');
+    div.className = 'msg sys';
+    div.textContent = '[debug] JS loaded';
+    el.appendChild(div);
+  }
+} catch (e) {}