Worker loading model list tied into the UI.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "localm",
-  "version": "1.1.24",
+  "version": "1.1.25",
   "description": "Chat application",
   "scripts": {
     "build": "esbuild src/index.js --target=es6 --bundle --sourcemap --outfile=./index.js --format=iife --external:fs --external:path --external:child_process --external:ws --external:katex/dist/katex.min.css",

src/app/boot-app.js

@@ -27,11 +27,12 @@ export async function bootApp() {
     //outputMessage('Available models: ' + models.join(', '));
   });
 
-  const { 
-    chatLogEditor: chatLogEditorInstance, 
+  const {
+    chatLogEditor: chatLogEditorInstance,
     chatInputEditor: chatInputEditorInstance,
-    crepeInput 
+    crepeInput
   } = await initMilkdown({
+    worker,
     chatLog,
     chatInput,
     inputPlugins: makeEnterPlugins({ workerConnection: worker }),
@@ -45,10 +46,10 @@ export async function bootApp() {
       }
     }
   });
-  
+
   chatLogEditor = chatLogEditorInstance;
   chatInputEditor = chatInputEditorInstance;
-  
+
   // Flush any outputs that were buffered before the editor was ready
   flushBufferedOutputs();
 

src/app/init-milkdown.js

@@ -10,8 +10,6 @@ import {
 import { Crepe } from '@milkdown/crepe';
 import { blockEdit } from '@milkdown/crepe/feature/block-edit';
 import { commonmark } from '@milkdown/kit/preset/commonmark';
-import { slashFactory } from "@milkdown/plugin-slash";
-import { fetchBrowserModels } from './model-list.js';
 
 import "@milkdown/crepe/theme/common/style.css";
 import "@milkdown/crepe/theme/frame.css";
@@ -21,7 +19,8 @@ import "@milkdown/crepe/theme/frame.css";
  *  chatLog: HTMLElement,
  *  chatInput: HTMLElement,
  *  inputPlugins?: any[],
- *  onSlashCommand?: (command: string) => void | boolean | Promise<void | boolean>
+ *  onSlashCommand?: (command: string) => void | boolean | Promise<void | boolean>,
+ *  worker?: any
  * }} InitMilkdownOptions
  */
 
@@ -32,18 +31,14 @@ export async function initMilkdown({
   chatLog,
   chatInput,
   inputPlugins = [], // Keep for backward compatibility but not used for Crepe
-  onSlashCommand
+  onSlashCommand,
+  worker
 }) {
   if (chatLog) chatLog.textContent = 'Loading Milkdown...';
 
   if (chatLog) chatLog.innerHTML = '';
   if (chatInput) chatInput.innerHTML = '';
 
-  // Fetch available models for slash menu
-  console.log('Starting to fetch browser models...');
-  const availableModels = await fetchBrowserModels();
-  console.log(`Loaded ${availableModels.length} models for slash menu`);
-  console.log('Available models:', availableModels);
 
   // Create read-only editor in .chat-log
   const chatLogEditor = await Editor.make()
@@ -61,12 +56,11 @@ export async function initMilkdown({
     defaultValue: '',
     features: {
       // Do NOT enable BlockEdit here; we'll add it later after models load
+      [Crepe.Feature.BlockEdit]: false,
       [Crepe.Feature.Placeholder]: true,
       [Crepe.Feature.Cursor]: true,
-      [Crepe.Feature.BlockEdit]: false,
       [Crepe.Feature.ListItem]: true,
       [Crepe.Feature.CodeMirror]: true,
-      // Disable features not needed for chat input
       [Crepe.Feature.ImageBlock]: true,
       [Crepe.Feature.Table]: true,
       [Crepe.Feature.Latex]: true,
@@ -80,25 +74,28 @@ export async function initMilkdown({
       }
     }
   });
+  // Create input editor immediately so the UI is responsive.
+  const chatInputEditor = await crepeInput.create();
+
+  // Fetch models in background and add BlockEdit when ready
+  (async () => {
+    try {
+      const { id, promise, cancel } = await worker.listChatModels({}, undefined);
+      const out = await promise;
+      const entries = Array.isArray(out.models ? out.models : out) ? (out.models || out) : [];
+      const availableModels = entries.map(e => ({ id: e.id, name: e.name || (e.id || '').split('/').pop(), size: '', slashCommand: (e.id || '').split('/').pop(), pipeline_tag: e.pipeline_tag || null, requiresAuth: e.classification === 'auth-protected' }));
 
-  // Dynamically add BlockEdit feature now that models are available.
-  crepeInput.addFeature(blockEdit, {
-    // Provide only a single 'models' group populated from availableModels
-    buildMenu: (groupBuilder) => {
-      const modelsGroup = groupBuilder.addGroup('models', 'Models');
-      availableModels.forEach((model) => {
-        modelsGroup.addItem(model.slashCommand, {
-          label: `${model.name} (${model.size})`,
-          icon: '🤖',
-          onRun: () => {
-            if (onSlashCommand) onSlashCommand(model.id);
-          }
-        });
+      // Add BlockEdit feature now that models are available
+      crepeInput.addFeature(blockEdit, {
+        buildMenu: (groupBuilder) => {
+          const modelsGroup = groupBuilder.addGroup('models', 'Models');
+          (availableModels || []).forEach((model) => modelsGroup.addItem(model.slashCommand, { label: `${model.name} ${model.size ? `(${model.size})` : ''}`, icon: '🤖', onRun: () => { if (onSlashCommand) onSlashCommand(model.id); } }));
+        }
       });
+    } catch (e) {
+      console.warn('Failed to load models for BlockEdit via worker:', e);
     }
-  });
-
-  const chatInputEditor = await crepeInput.create();
+  })();
 
   // Auto-focus the Crepe input editor when ready
   try {

src/app/model-list.js

@@ -1,6 +1,6 @@
 // @ts-check
 
-import fallbackModels from '../model-cache-filtered.json';
+import { workerConnection } from './worker-connection.js';
 
 /**
  * @typedef {{
@@ -38,125 +38,41 @@ const MOBILE_SIZE_THRESHOLD = 15; // Models under 15B are considered mobile-capa
  * Fetch models from Hugging Face Hub with transformers.js compatibility
  * @returns {Promise<ModelInfo[]>}
  */
-export async function fetchBrowserModels() {
-  // Check cache first
-  const now = Date.now();
-  if (modelCache && (now - cacheTimestamp) < CACHE_DURATION) {
-    return modelCache;
-  }
-
+export async function fetchBrowserModels(params = {}) {
+  // Worker-backed implementation: call worker.listChatModels and return final models.
   try {
-    console.log('Fetching transformers.js compatible models from Hugging Face Hub in batches...');
-
-    const batchSize = 1000;
-    const batchCount = 5; // 5 consecutive batches of 1000
-    let allRaw = [];
-
-    for (let i = 0; i < batchCount; i++) {
-      const skip = i * batchSize;
-      const url = `https://huggingface.co/api/models?library=transformers.js&sort=downloads&direction=-1&limit=${batchSize}&skip=${skip}&full=true`;
-      try {
-        // fetch sequentially to avoid surprises with HF rate limits
-        // eslint-disable-next-line no-await-in-loop
-        const res = await fetch(url);
-        if (!res.ok) {
-          console.warn(`HF batch ${i + 1} returned ${res.status}; stopping further batches`);
-          break;
-        }
-        // eslint-disable-next-line no-await-in-loop
-        const batch = await res.json();
-        if (!Array.isArray(batch) || batch.length === 0) {
-          console.log(`HF batch ${i + 1} returned 0 models; stopping`);
-          break;
-        }
-        console.log(`batch ${i + 1} -> ${batch.length} models`);
-        allRaw = allRaw.concat(batch);
-        if (batch.length < batchSize) break; // last page
-      } catch (err) {
-        console.warn(`Error fetching HF batch ${i + 1}:`, err);
-        break;
-      }
-    }
-
-    // dedupe by id
-    const seen = new Set();
-    const dedup = allRaw.filter(m => m && m.id && (!seen.has(m.id) ? (seen.add(m.id) || true) : false));
-    console.log(`fetched unique ${dedup.length} models`);
-
-    // Process models: detect required files (ONNX + tokenizer), determine gating
-    const processed = dedup.map(m => {
-      try {
-        const { hasOnnx, hasTokenizer, missingFiles, missingReason } = detectRequiredFiles(m);
-        const requiresAuth = Boolean(m.gated || m.private || (m.cardData && (m.cardData.gated || m.cardData.private)));
-        const base = processModelData(m);
-        if (!base) return null;
-        return Object.assign({}, base, {
-          requiresAuth: !!requiresAuth,
-          hasOnnx: !!hasOnnx,
-          hasTokenizer: !!hasTokenizer,
-          missingFiles: !!missingFiles,
-          missingReason: missingReason || '',
-          downloads: m.downloads || 0,
-          tags: Array.isArray(m.tags) ? m.tags.slice() : []
-        });
-      } catch (e) {
-        return null;
-      }
-    }).filter(m => m !== null);
-
-    // Keep only models that have both ONNX and tokenizer files AND support chat
-    const withFiles = processed.filter(p => p && p.hasOnnx && p.hasTokenizer && isModelChatCapable(p));
-
-    // Sort by downloads desc
-    withFiles.sort((a, b) => ((b && b.downloads) || 0) - ((a && a.downloads) || 0));
-
-    const auth = withFiles.filter(m => m && m.requiresAuth).slice(0, 10).map(x => x);
-    const pub = withFiles.filter(m => m && !m.requiresAuth).slice(0, 10).map(x => x);
-
-    const final = [...auth, ...pub];
-
-    modelCache = final;
-    cacheTimestamp = now;
-    // Persist filtered list to localStorage as a fallback for offline or HF failures
-    try {
-      if (typeof localStorage !== 'undefined') {
-        const payload = JSON.stringify({ ts: now, models: final });
-        localStorage.setItem(STORAGE_KEY, payload);
-      }
-    } catch (e) {
-      // ignore storage errors
-    }
-
-    console.log(`Selected ${auth.length} auth + ${pub.length} public models (total ${final.length})`);
-    if (final.length) return final;
-  } catch (error) {
-    console.error('Failed to fetch models from Hugging Face Hub:', error);
-    // Try to restore from persisted cache before returning static fallback
-  }
-  try {
-    if (typeof localStorage !== 'undefined') {
-      const raw = localStorage.getItem(STORAGE_KEY);
-      if (raw) {
-        const parsed = JSON.parse(raw);
-        if (parsed && Array.isArray(parsed.models)) {
-          const age = Date.now() - (parsed.ts || 0);
-          if (age < STORAGE_TTL) {
-            console.warn('Restoring models from localStorage cache (age ' + Math.round(age / 1000) + 's)');
-            modelCache = parsed.models;
-            cacheTimestamp = Date.now();
-            return modelCache;
-          }
-        }
-      }
-    }
-  } catch (e) {
-    // ignore parse/storage errors
+    const wc = workerConnection();
+  const { id, promise, cancel } = await wc.listChatModels(params, /* onProgress */ undefined);
+    // wait for final result (no caching, no localStorage)
+    const res = await promise;
+    // Map worker ModelEntry -> UI ModelInfo minimal shape
+    const mapped = Array.isArray(res.models ? res.models : res)
+      ? (res.models || res).map(e => ({
+        id: e.id,
+        name: e.name || (e.id || '').split('/').pop(),
+        vendor: extractVendor(e.id || ''),
+        size: '',
+        slashCommand: generateSlashCommand(e.id || ''),
+        description: '',
+        pipeline_tag: e.pipeline_tag || null,
+        requiresAuth: e.classification === 'auth-protected'
+      }))
+      : [];
+    return mapped.length ? mapped : FALLBACK_MODELS;
+  } catch (err) {
+    // on error, return small fallback list
+    console.warn('fetchBrowserModels: worker error, returning fallback', err && err.message ? err.message : err);
+    return FALLBACK_MODELS;
   }
-
-  // Return fallback models if API fails and no persisted cache
-  return fallbackModels;
 }
 
+// Small fallback list used when worker fails or times out
+const FALLBACK_MODELS = [
+  { id: 'microsoft/Phi-3-mini-4k-instruct', name: 'Phi-3 Mini', vendor: 'Microsoft', size: '3.8B', slashCommand: 'phi3', description: 'Fallback Phi-3 Mini' },
+  { id: 'mistralai/Mistral-7B-v0.1', name: 'Mistral 7B', vendor: 'Mistral AI', size: '7.3B', slashCommand: 'mistral', description: 'Fallback Mistral' },
+  { id: 'Xenova/distilgpt2', name: 'DistilGPT-2', vendor: 'Xenova', size: '82M', slashCommand: 'distilgpt2', description: 'Fallback DistilGPT2' }
+];
+
 /**
  * Check if a model is suitable for mobile/browser use
  * @param {any} model - Raw model data from HF API

src/app/worker-connection.js

@@ -8,9 +8,9 @@ export function workerConnection() {
   const connection = {
     loaded: workerLoaded.then(worker => ({ env: worker.env })),
     listModels,
-  loadModel,
-  runPrompt,
-  listChatModels
+    loadModel,
+    runPrompt,
+    listChatModels
   };
 
   return connection;
@@ -88,18 +88,27 @@ export function workerConnection() {
    */
   async function listChatModels(params = {}, onProgress) {
     await workerLoaded;
-    const { send, pending, worker } = await workerLoaded;
-    return new Promise((resolve, reject) => {
-      const id = String(Math.random()).slice(2);
-      pending.set(id, { resolve, reject, onProgress });
-      const msg = Object.assign({}, params, { type: 'listChatModels', id });
+    const { worker, pending } = await workerLoaded;
+    const id = String(Math.random()).slice(2);
+    let resolved = false;
+    const promise = new Promise((resolve, reject) => {
+      pending.set(id, { resolve: (res) => { resolved = true; resolve(res); }, reject, onProgress });
       try {
-        worker.postMessage(msg);
+        worker.postMessage(Object.assign({}, params, { type: 'listChatModels', id }));
       } catch (err) {
         pending.delete(id);
-        return reject(err);
+        reject(err);
       }
     });
+
+    const cancel = () => {
+      try {
+        if (!resolved) worker.postMessage({ type: 'cancelListChatModels', id });
+      } catch (e) {}
+      pending.delete(id);
+    };
+
+    return { id, promise, cancel };
   }
 
   /** @param {string} modelName */

src/worker/boot-worker.js

@@ -101,15 +101,16 @@ export function bootWorker() {
     activeTasks.set(id, { abort: () => { try { iterator.return(); } catch (e) {} } });
     try {
       for await (const delta of iterator) {
+        console.info('loading ', delta);
         try { enqueueProgress(delta); } catch (e) {}
         if (delta && delta.status === 'done') {
           sawDone = true;
           // flush any remaining progress messages synchronously
           try { flushBatch(); } catch (e) {}
           try { self.postMessage({ id, type: 'response', result: { models: delta.models, meta: delta.meta } }); } catch (e) {}
-          break;
         }
       }
+
       if (!sawDone) {
         // iterator exited early (likely cancelled)
         try { flushBatch(); } catch (e) {}

src/worker/list-chat-models.js

@@ -6,7 +6,7 @@ export async function* listChatModelsIterator(params = {}) {
   const opts = Object.assign({ maxCandidates: 250, concurrency: 12, hfToken: null, timeoutMs: 10000, maxListing: 5000 }, params || {});
   const { maxCandidates, concurrency, hfToken, timeoutMs, maxListing } = opts;
   const MAX_TOTAL_TO_FETCH = Math.min(maxListing, 5000);
-  const PAGE_SIZE = 100;
+  const PAGE_SIZE = 1000;
   const RETRIES = 3;
   const BACKOFF_BASE_MS = 200;