Spaces:

mihailik
/

localm

Configuration error

App Files Files Community

mihailik commited on Aug 12

Commit

f85c67a

1 Parent(s): 07734b3

Patches and fixes.

Browse files

Files changed (2) hide show

chat-copil2-web.html +717 -0
chat-full.html +1 -1

chat-copil2-web.html ADDED Viewed

	@@ -0,0 +1,717 @@

+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+  <title>Hello World – On-Device Chat (Transformers.js)</title>
+  <style>
+    :root {
+      color-scheme: light dark;
+      --bg: #0b0c10;
+      --panel: #111318;
+      --panel-2: #151922;
+      --text: #e9eef3;
+      --muted: #9aa6b2;
+      --accent: #4f7cff;
+      --accent-2: #3a5fe0;
+      --danger: #ff4d67;
+      --ok: #3cc07a;
+      --shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+      --radius: 14px;
+      --radius-sm: 10px;
+      --radius-lg: 22px;
+      --gap: 12px;
+      --gap-lg: 18px;
+      --gap-xl: 24px;
+      --font: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    }
+    * {
+      box-sizing: border-box;
+    }
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      background: linear-gradient(180deg, #0b0c10, #0d1018 60%, #0b0c10);
+      color: var(--text);
+      font-family: var(--font);
+    }
+    .app {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      height: 100dvh;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      display: flex;
+      gap: var(--gap);
+      padding: 12px;
+      align-items: center;
+      background: transparent;
+      backdrop-filter: saturate(140%) blur(10px);
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      border-radius: var(--radius);
+      background: linear-gradient(180deg, #121623, #0e1220);
+      box-shadow: var(--shadow);
+      font-weight: 700;
+      letter-spacing: .2px;
+    }
+    .brand .dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background: radial-gradient(circle at 30% 30%, #8ab4ff, #4f7cff);
+      box-shadow: 0 0 12px rgba(79, 124, 255, .75), 0 0 28px rgba(79, 124, 255, .45);
+    }
+    .controls {
+      display: flex;
+      gap: var(--gap);
+      margin-left: auto;
+      align-items: center;
+    }
+    select,
+    button,
+    .status {
+      border: 1px solid #1f2533;
+      background: linear-gradient(180deg, #101523, #0f1320);
+      color: var(--text);
+      border-radius: var(--radius);
+      padding: 10px 12px;
+      font: inherit;
+      box-shadow: var(--shadow);
+    }
+    select {
+      padding-right: 36px;
+    }
+    button {
+      cursor: pointer;
+      border: 1px solid #2a375a;
+    }
+    button.primary {
+      background: linear-gradient(180deg, var(--accent), var(--accent-2));
+      border: none;
+      color: white;
+      font-weight: 600;
+    }
+    button.ghost {
+      background: transparent;
+      border: 1px dashed #2a375a;
+      opacity: .9;
+    }
+    button:disabled {
+      opacity: .5;
+      cursor: not-allowed;
+      filter: grayscale(.2);
+    }
+    .status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--muted);
+      padding: 10px 12px;
+      border-radius: var(--radius);
+      border-style: dashed;
+      white-space: nowrap;
+      max-width: 58vw;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .status .blink {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--muted);
+      animation: pulse 1.2s infinite ease-in-out;
+      box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.6);
+    }
+    .status.loading .blink {
+      background: var(--accent);
+      box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.6);
+      animation: pulse 1.2s infinite ease-in-out;
+    }
+    .status.generating .blink {
+      background: var(--ok);
+      animation: pulse-fast .8s infinite ease-in-out;
+      box-shadow: 0 0 0 0 rgba(60, 192, 122, 0.6);
+    }
+    @keyframes pulse {
+      0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(79, 124, 255, 0.5);
+      }
+      70% {
+        transform: scale(1.12);
+        box-shadow: 0 0 0 10px rgba(79, 124, 255, 0);
+      }
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(79, 124, 255, 0);
+      }
+    }
+    @keyframes pulse-fast {
+      0% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(60, 192, 122, 0.5);
+      }
+      70% {
+        transform: scale(1.12);
+        box-shadow: 0 0 0 10px rgba(60, 192, 122, 0);
+      }
+      100% {
+        transform: scale(1);
+        box-shadow: 0 0 0 0 rgba(60, 192, 122, 0);
+      }
+    }
+    main {
+      padding: 10px 12px 16px;
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      scroll-behavior: smooth;
+    }
+    .msg {
+      display: grid;
+      grid-template-columns: auto 1fr;
+      gap: 8px 10px;
+      align-items: start;
+      max-width: 100%;
+      word-wrap: break-word;
+      overflow-wrap: anywhere;
+    }
+    .msg .avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 8px;
+      display: grid;
+      place-items: center;
+      font-size: 14px;
+      font-weight: 700;
+      color: #0d1020;
+      background: #b8c8ff;
+    }
+    .msg.assistant .avatar {
+      background: #9be7c4;
+    }
+    .bubble {
+      padding: 12px 14px;
+      border-radius: var(--radius-lg);
+      line-height: 1.4;
+      box-shadow: var(--shadow);
+      background: linear-gradient(180deg, #111523, #0e1322);
+      border: 1px solid #1d2433;
+      white-space: pre-wrap;
+    }
+    .msg.user .bubble {
+      background: linear-gradient(180deg, #152037, #10192f);
+      border: 1px solid #243355;
+    }
+    .msg.error .bubble {
+      background: linear-gradient(180deg, #2a0f14, #220a0f);
+      border: 1px solid #5d1b26;
+      color: #ffd7de;
+    }
+    .meta {
+      grid-column: 2 / -1;
+      color: var(--muted);
+      font-size: 12px;
+      margin-top: -4px;
+    }
+    footer {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      gap: var(--gap);
+      padding: 10px 12px 14px;
+      background: linear-gradient(180deg, #0b0f1a, #0b0f1a);
+      border-top: 1px solid #161c2a;
+    }
+    textarea {
+      resize: none;
+      width: 100%;
+      min-height: 52px;
+      max-height: 36dvh;
+      padding: 12px 14px;
+      border-radius: var(--radius-lg);
+      border: 1px solid #1f2738;
+      outline: none;
+      box-shadow: var(--shadow);
+      background: linear-gradient(180deg, #101426, #0e1221);
+      color: var(--text);
+      caret-color: var(--accent);
+    }
+    .actions {
+      display: flex;
+      gap: var(--gap);
+      align-items: stretch;
+    }
+    .hint {
+      padding: 8px 12px;
+      color: var(--muted);
+      font-size: 12px;
+      text-align: center;
+    }
+    @media (min-width: 720px) {
+      header {
+        padding: 16px;
+      }
+      main {
+        padding: 12px 16px 18px;
+      }
+      footer {
+        padding: 12px 16px 18px;
+      }
+      .status {
+        max-width: 420px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <header>
+      <div class="brand" title="On-device chat">
+        <div class="dot" aria-hidden="true"></div>
+        <div>Hello World</div>
+      </div>
+      <div class="controls" style="flex-wrap: wrap">
+        <label for="model" class="visually-hidden" style="position:absolute;left:-9999px">Model</label>
+        <select id="model" title="Select a model">
+          <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" class="status" role="status" aria-live="polite">
+          <div class="blink" aria-hidden="true"></div>
+          <span class="label">Initializing…</span>
+        </div>
+      </div>
+    </header>
+    <main id="chat" aria-live="polite" aria-busy="false">
+      <div class="msg assistant">
+        <div class="avatar">AI</div>
+        <div class="bubble">Hello! I run fully in your browser using Transformers.js. Pick a model above and say hi.
+        </div>
+        <div class="meta">On-device, no server calls.</div>
+      </div>
+    </main>
+    <footer>
+      <textarea id="input" placeholder="Type a message… (Shift+Enter for newline)"></textarea>
+      <div class="actions">
+        <button id="send" class="primary">Send</button>
+        <button id="stop" class="ghost" disabled>Stop</button>
+      </div>
+      <div class="hint" style="grid-column: 1 / -1">
+        Tip: Switch models anytime. The first run will download weights into your browser cache.
+      </div>
+    </footer>
+  </div>
+  <script type="module">
+    // Wrap everything in an async IIFE and catch top-level errors.
+    (async () => {
+      'use strict';
+      // UI elements
+      const chatEl = document.getElementById('chat');
+      const inputEl = document.getElementById('input');
+      const sendBtn = document.getElementById('send');
+      const stopBtn = document.getElementById('stop');
+      const modelSelect = document.getElementById('model');
+      const statusEl = document.getElementById('status');
+      // App state
+      const state = {
+        busy: false,
+        modelId: modelSelect.value,
+        task: null,
+        pipe: null,
+        messages: [{ role: 'system', content: 'You are a concise, friendly assistant.' }],
+        abortController: null,
+      };
+      // Helpers: UI status
+      function setStatus(mode, text) {
+        try {
+          statusEl.classList.remove('loading', 'generating');
+          if (mode) statusEl.classList.add(mode);
+          statusEl.querySelector('.label').textContent = text;
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      function setBusy(isBusy) {
+        try {
+          state.busy = isBusy;
+          chatEl.setAttribute('aria-busy', String(isBusy));
+          sendBtn.disabled = isBusy;
+          modelSelect.disabled = isBusy;
+          stopBtn.disabled = !isBusy;
+          inputEl.readOnly = isBusy;
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      // Helpers: chat UI
+      function addMessage(role, text, opts = {}) {
+        try {
+          const wrapper = document.createElement('div');
+          wrapper.className = `msg ${role}${opts.error ? ' error' : ''}`;
+          const avatar = document.createElement('div');
+          avatar.className = 'avatar';
+          avatar.textContent = role === 'user' ? 'You' : role === 'assistant' ? 'AI' : 'S';
+          const bubble = document.createElement('div');
+          bubble.className = 'bubble';
+          bubble.textContent = text ?? '';
+          const meta = document.createElement('div');
+          meta.className = 'meta';
+          meta.textContent = opts.meta ?? (role === 'assistant' ? ' ' : ' ');
+          wrapper.append(avatar, bubble, meta);
+          chatEl.appendChild(wrapper);
+          chatEl.scrollTop = chatEl.scrollHeight;
+          return { wrapper, bubble, meta };
+        } catch (err) {
+          reportError(err);
+          return null;
+        }
+      }
+      function updateLastAssistant(text) {
+        try {
+          const nodes = Array.from(chatEl.querySelectorAll('.msg.assistant .bubble'));
+          const last = nodes[nodes.length - 1];
+          if (last) {
+            last.textContent = text;
+            chatEl.scrollTop = chatEl.scrollHeight;
+          }
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      function reportError(error) {
+        try {
+          const msg = (error && error.stack) ? error.stack : (error && error.message) ? error.message : String(error);
+          addMessage('assistant', `Error:\n\n${msg}`, { error: true, meta: 'stack trace' });
+        } catch (e) {
+          // Last-resort: console
+          console.error('Failed to report error:', e, error);
+        }
+      }
+      // Load Transformers.js dynamically (required)
+      let pipeline, env, AutoTokenizer;
+      try {
+        const mod = await import('https://cdn.jsdelivr.net/npm/@xenova/transformers/dist/transformers.min.js');
+        pipeline = mod.pipeline;
+        env = mod.env;
+        AutoTokenizer = mod.AutoTokenizer;
+      } catch (err) {
+        reportError(err);
+        throw err; // cannot proceed
+      }
+      // Configure environment (browser cache for model files)
+      try {
+        env.allowRemoteModels = true; // allow fetching from the Hugging Face Hub / CDN
+        env.useBrowserCache = true;   // caches in IndexedDB/Cache Storage
+      } catch (err) {
+        reportError(err);
+      }
+      // Determine pipeline task based on model id
+      function resolveTask(modelId) {
+        try {
+          if (/t5/i.test(modelId)) return 'text2text-generation';
+          return 'text-generation';
+        } catch (err) {
+          reportError(err);
+          return 'text-generation';
+        }
+      }
+      // Progress UI during model load
+      function progressCallback(data) {
+        try {
+          const { status, name, file, loaded, total } = data || {};
+          const pct = (loaded && total) ? ` ${(100 * loaded / total).toFixed(1)}%` : '';
+          const fileName = (file && file.split('/').pop()) || name || '…';
+          setStatus('loading', `${status || 'Loading'} ${fileName}${pct}`);
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      // Load/Reload selected model
+      async function loadModel(modelId) {
+        setBusy(true);
+        setStatus('loading', `Loading ${modelId}…`);
+        try {
+          state.task = resolveTask(modelId);
+          state.pipe = await pipeline(state.task, modelId, { progress_callback: progressCallback });
+          state.modelId = modelId;
+          setStatus('', `Ready • ${modelId}`);
+        } catch (err) {
+          reportError(err);
+          setStatus('', `Failed to load ${modelId}`);
+        } finally {
+          setBusy(false);
+        }
+      }
+      // Build input text from chat messages
+      function buildModelInput() {
+        try {
+          // If tokenizer supports chat templates, use them
+          const tok = state.pipe?.tokenizer;
+          const msgs = state.messages.map(m => ({ role: m.role, content: m.content }));
+          if (tok && typeof tok.apply_chat_template === 'function') {
+            try {
+              return tok.apply_chat_template(msgs, {
+                tokenize: false,
+                add_generation_prompt: true,
+              });
+            } catch (e) {
+              // Fall through to manual prompt
+            }
+          }
+          // Fallback prompt formatting (works for generic causal LMs)
+          let prompt = 'You are a helpful assistant.\n';
+          for (const m of msgs) {
+            if (m.role === 'system') {
+              prompt += `[System] ${m.content}\n`;
+            } else if (m.role === 'user') {
+              prompt += `User: ${m.content}\n`;
+            } else if (m.role === 'assistant') {
+              prompt += `Assistant: ${m.content}\n`;
+            }
+          }
+          prompt += 'Assistant:';
+          return prompt;
+        } catch (err) {
+          reportError(err);
+          return (state.messages[state.messages.length - 1]?.content) || '';
+        }
+      }
+      // Generate a response with streaming
+      async function generateResponse() {
+        if (!state.pipe) {
+          addMessage('assistant', 'Model is not loaded yet.');
+          return;
+        }
+        setBusy(true);
+        setStatus('generating', `Generating with ${state.modelId}…`);
+        // Create a placeholder assistant message to stream into
+        const assistant = addMessage('assistant', '…');
+        // Optional: support abort
+        state.abortController = new AbortController();
+        try {
+          const isT5 = state.task === 'text2text-generation';
+          const inputText = isT5 ? (state.messages[state.messages.length - 1]?.content || '') : buildModelInput();
+          const genOptions = {
+            max_new_tokens: 180,
+            temperature: 0.7,
+            top_p: 0.9,
+            repetition_penalty: 1.08,
+            stream: true,
+            // signal for cancellation
+            signal: state.abortController.signal,
+          };
+          // Stream tokens
+          let full = '';
+          for await (const out of state.pipe(inputText, genOptions)) {
+            const tokenText =
+              (out && out.token && typeof out.token.text === 'string')
+                ? out.token.text
+                : (out?.generated_text && out?.generated_text[0]?.token?.text)
+                  ? out.generated_text[0].token.text
+                  : (out?.text) ? out.text : '';
+            if (tokenText) {
+              full += tokenText;
+              updateLastAssistant(full);
+            }
+          }
+          // Some pipelines only return final output when not streaming; if empty, try non-stream as fallback
+          if (!full.trim()) {
+            const finalOut = await state.pipe(inputText, { ...genOptions, stream: false });
+            const text =
+              Array.isArray(finalOut) ? (finalOut[0]?.generated_text ?? finalOut[0]?.summary_text ?? finalOut[0]?.translation_text ?? '') :
+                (finalOut?.generated_text ?? finalOut?.text ?? '');
+            full = (text || '').toString();
+            updateLastAssistant(full || '(no output)');
+          }
+          // Save assistant turn
+          state.messages.push({ role: 'assistant', content: full || '' });
+          setStatus('', `Ready • ${state.modelId}`);
+        } catch (err) {
+          if (err && err.name === 'AbortError') {
+            updateLastAssistant('[stopped]');
+            addMessage('assistant', 'Generation stopped by user.', { meta: 'stopped' });
+            setStatus('', `Ready • ${state.modelId}`);
+          } else {
+            reportError(err);
+            setStatus('', `Ready • ${state.modelId}`);
+          }
+        } finally {
+          setBusy(false);
+          state.abortController = null;
+        }
+      }
+      // Send handler
+      async function onSend() {
+        try {
+          const text = (inputEl.value || '').trim();
+          if (!text || state.busy) return;
+          // Append user message
+          state.messages.push({ role: 'user', content: text });
+          addMessage('user', text);
+          inputEl.value = '';
+          inputEl.style.height = 'auto';
+          await generateResponse();
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      // Autosize textarea
+      function autoGrow() {
+        try {
+          inputEl.style.height = 'auto';
+          inputEl.style.height = Math.min(inputEl.scrollHeight, window.innerHeight * 0.36) + 'px';
+        } catch (err) {
+          reportError(err);
+        }
+      }
+      // Wire up events (with error handling)
+      try {
+        sendBtn.addEventListener('click', async () => {
+          try { await onSend(); } catch (err) { reportError(err); }
+        });
+        stopBtn.addEventListener('click', () => {
+          try {
+            if (state.abortController) state.abortController.abort();
+          } catch (err) { reportError(err); }
+        });
+        inputEl.addEventListener('keydown', async (e) => {
+          try {
+            if (e.key === 'Enter' && !e.shiftKey) {
+              e.preventDefault();
+              await onSend();
+            }
+          } catch (err) { reportError(err); }
+        });
+        inputEl.addEventListener('input', () => {
+          try { autoGrow(); } catch (err) { reportError(err); }
+        });
+        modelSelect.addEventListener('change', async () => {
+          try {
+            if (state.busy) return;
+            await loadModel(modelSelect.value);
+          } catch (err) {
+            reportError(err);
+          }
+        });
+      } catch (err) {
+        reportError(err);
+      }
+      // Global error guards
+      window.addEventListener('error', (e) => {
+        reportError(e.error || e.message || e);
+      });
+      window.addEventListener('unhandledrejection', (e) => {
+        reportError(e.reason || e);
+      });
+      // Initial model load (default selection)
+      await loadModel(state.modelId);
+      setStatus('', `Ready • ${state.modelId}`);
+    })().catch((err) => {
+      // Top-level catch (final safety)
+      const pre = document.createElement('pre');
+      pre.textContent = (err && err.stack) ? err.stack : String(err);
+      pre.style.whiteSpace = 'pre-wrap';
+      pre.style.color = '#ffb4c7';
+      pre.style.padding = '12px';
+      pre.style.margin = '12px';
+      pre.style.border = '1px solid #5d1b26';
+      pre.style.background = '#220a0f';
+      document.body.appendChild(pre);
+      console.error(err);
+    });
+  </script>
+</body>
+</html>

chat-full.html CHANGED Viewed

@@ -209,7 +209,7 @@
 <body>
   <header>
     <div class="row">
-      <h1>Локальний чат</h1>
       <label for="model" class="muted" style="display:none">Модель</label>
       <select id="model" title="Оберіть модель (Xenova)">
         <option value="Xenova/distilgpt2">Xenova/distilgpt2 (швидка, маленька)</option>

 <body>
   <header>
     <div class="row">
+      <h1>Локальний чат: 1</h1>
       <label for="model" class="muted" style="display:none">Модель</label>
       <select id="model" title="Оберіть модель (Xenova)">
         <option value="Xenova/distilgpt2">Xenova/distilgpt2 (швидка, маленька)</option>