Update app.py

app.py

@@ -1,11 +1,10 @@
 #!/usr/bin/env python3
 """
-multimodal gpt-oss 120b — Gradio app с Florence-2 в браузере (WebGPU)
+multimodal gpt-oss 120b — Gradio app: Florence в браузере (WebGPU), LLM через NVIDIA Integrate
 
-Что изменилось:
-- Подпись к изображению генерим на стороне пользователя (WebGPU) через Transformers.js.
-- Сервер больше не грузит Florence/torch.
-- LLM остаётся через NVIDIA Integrate (OpenAI-compatible), как и было.
+- Подпись к изображению генерится на клиенте (Transformers.js + WebGPU / wasm фоллбэк).
+- Сервер НЕ грузит torch/Florence.
+- LLM-стриминг как раньше (openai/gpt-oss-120b).
 """
 
 import os
@@ -30,7 +29,7 @@ if not NV_API_KEY:
         "NV_API_KEY не задан. В Hugging Face Space зайди в Settings → Secrets и добавь NV_API_KEY."
     )
 
-# OpenAI клиент для LLM
+# OpenAI совместимый клиент для LLM
 llm = OpenAI(base_url=NV_BASE_URL, api_key=NV_API_KEY)
 
 
@@ -64,7 +63,7 @@ def _extract_text_from_stream_chunk(chunk: Any) -> str:
 def chat_stream(image, user_message: str, history: Optional[List[List[str]]], caption_text: str):
     """
     Основной generator для стриминга ответов LLM.
-    Теперь принимает caption_text прямо из браузера (WebGPU).
+    Теперь caption_text приходит напрямую из браузера (WebGPU/wasm).
     """
     history = history or []
 
@@ -79,7 +78,6 @@ def chat_stream(image, user_message: str, history: Optional[List[List[str]]], ca
 
     caption = caption_text or ""
 
-    # Системный промпт с подписью
     system_prompt = (
         "You are 'multimodal gpt-oss 120b', a helpful multimodal assistant. "
         "Use the provided 'More Detailed Caption' as authoritative visual context. "
@@ -91,14 +89,11 @@ def chat_stream(image, user_message: str, history: Optional[List[List[str]]], ca
         "Be concise unless asked for details."
     )
 
-    # Добавляем сообщение пользователя
     history.append([user_message, ""])
-    # Показать подпись справа от чата (как и раньше)
     yield history, caption
 
     assistant_accum = ""
     try:
-        # Стриминг от LLM
         stream = llm.chat.completions.create(
             model="openai/gpt-oss-120b",
             messages=[
@@ -122,7 +117,6 @@ def chat_stream(image, user_message: str, history: Optional[List[List[str]]], ca
     except Exception as e:
         print(f"Streaming error: {e}")
         traceback.print_exc()
-        # Fallback на не-стриминг запрос
         try:
             resp = llm.chat.completions.create(
                 model="openai/gpt-oss-120b",
@@ -173,27 +167,60 @@ css = """
 #title { text-align: center; }
 """
 
-# JS-функция: делает caption в браузере через WebGPU (Transformers.js)
+# JS: надёжная загрузка Transformers.js (ESM → UMD → локальный), WebGPU/wasm, Florence-2 large→base
 WEBGPU_CAPTION_JS = r"""
 async (image, use_client) => {
+  const loadWithScript = (url) => new Promise((res, rej) => {
+    const s = document.createElement('script');
+    s.src = url; s.async = true;
+    s.onload = () => res();
+    s.onerror = (e) => rej(e);
+    document.head.appendChild(s);
+  });
+
+  const loadTransformers = async () => {
+    // 1) ESM: несколько CDN
+    const esms = [
+      'https://cdn.jsdelivr.net/npm/@xenova/[email protected]',
+      'https://cdn.jsdelivr.net/npm/@xenova/[email protected]?module',
+      'https://unpkg.com/@xenova/[email protected]?module',
+      'https://esm.run/@xenova/[email protected]',
+    ];
+    for (const url of esms) {
+      try { return await import(url); }
+      catch (e) { console.warn('ESM import failed:', url, e); }
+    }
+    // 2) UMD: глобальная window.transformers
+    const umds = [
+      'https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/transformers.min.js',
+      'https://unpkg.com/@xenova/[email protected]/dist/transformers.min.js',
+      // локальный фоллбэк (если положите файл в репозиторий)
+      '/file=assets/transformers-3.2.2.min.js',
+    ];
+    for (const url of umds) {
+      try {
+        await loadWithScript(url);
+        if (window.transformers) return window.transformers;
+      } catch (e) { console.warn('UMD load failed:', url, e); }
+    }
+    throw new Error('Transformers.js: все CDN/UMD источники недоступны');
+  };
+
   try {
     if (!use_client) return null;
 
-    if (!('gpu' in navigator)) {
-      return "[WebGPU недоступен в браузере. Chrome/Edge 113+ (на Linux — chrome://flags/#enable-unsafe-webgpu), Safari TP.]";
+    // WebGPU наличие
+    const hasWebGPU = 'gpu' in navigator;
+    if (!hasWebGPU) {
+      console.warn('WebGPU недоступен, будет попытка wasm-фоллбэка.');
     }
 
-    // Извлекаем источник изображения из значения Gradio Image
     const toHTMLImage = async (imgVal) => {
       if (!imgVal) throw new Error("Нет изображения");
       let src = null;
-      if (typeof imgVal === 'string') {
-        src = imgVal;
-      } else if (imgVal?.image) {
-        src = imgVal.image;
-      } else if (imgVal?.data) {
-        src = imgVal.data;
-      }
+      if (typeof imgVal === 'string') src = imgVal;
+      else if (imgVal?.image) src = imgVal.image;
+      else if (imgVal?.data) src = imgVal.data;
       if (!src) throw new Error("Не удалось прочитать изображение");
       const im = new Image();
       im.crossOrigin = 'anonymous';
@@ -202,49 +229,81 @@ async (image, use_client) => {
       return im;
     };
 
-    // Подтягиваем Transformers.js
-    const { pipeline, env } = await import("https://cdn.jsdelivr.net/npm/@xenova/[email protected]");
+    const tjs = await loadTransformers();
+    const pipeline = tjs.pipeline ?? tjs?.default?.pipeline;
+    const env = tjs.env ?? tjs?.default?.env;
+    if (!pipeline || !env) throw new Error("Transformers.js загрузился без pipeline/env");
 
-    // Предпочесть WebGPU
+    // Настройка бэкенда и кэша
     env.allowRemoteModels = true;
-    env.useBrowserCache = true; // кэш в IndexedDB
-    env.backends.onnx.backend = 'webgpu';
-
-    // Инициализация один раз
-    if (!window.__webgpu_captioner) {
-      const candidates = [
-        'Xenova/Florence-2-large-ft',
-        'Xenova/Florence-2-base-ft'
-      ];
+    env.useBrowserCache = true;
+    env.backends ??= {};
+    env.backends.onnx ??= {};
+    // Путь к wasm-артефактам (на всякий)
+    env.backends.onnx.wasm ??= {};
+    env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]/dist/wasm/';
+    env.backends.onnx.wasm.numThreads = 1;
+
+    // Пробуем WebGPU, fallback → wasm
+    let backend = 'webgpu';
+    if (!hasWebGPU) backend = 'wasm';
+
+    // Инициализация captioner (один раз)
+    if (!window.__web_captioner || window.__web_captioner_backend !== backend) {
+      const candidates = backend === 'webgpu'
+        ? ['Xenova/Florence-2-large-ft', 'Xenova/Florence-2-base-ft']
+        : ['Xenova/Florence-2-base-ft'];
+
       let lastErr = null;
       for (const model of candidates) {
         try {
-          window.__webgpu_captioner = await pipeline(
-            'image-to-text',
-            model,
-            { device: 'webgpu', dtype: 'fp16', quantized: true }
-          );
+          if (backend === 'webgpu') {
+            env.backends.onnx.backend = 'webgpu';
+            window.__web_captioner = await pipeline(
+              'image-to-text', model,
+              { device: 'webgpu', dtype: 'fp16', quantized: true }
+            );
+          } else {
+            env.backends.onnx.backend = 'wasm';
+            window.__web_captioner = await pipeline(
+              'image-to-text', model,
+              { device: 'wasm', quantized: true }
+            );
+          }
+          window.__web_captioner_backend = backend;
           break;
         } catch (e) {
           lastErr = e;
-          console.warn('Failed to load', model, e);
+          console.warn(`Init failed (${backend}) for ${model}`, e);
+        }
+      }
+      if (!window.__web_captioner) {
+        // Последняя попытка: если WebGPU падал — откат на wasm
+        if (backend === 'webgpu') {
+          try {
+            env.backends.onnx.backend = 'wasm';
+            window.__web_captioner = await pipeline(
+              'image-to-text', 'Xenova/Florence-2-base-ft',
+              { device: 'wasm', quantized: true }
+            );
+            window.__web_captioner_backend = 'wasm';
+          } catch (e2) {
+            throw lastErr || e2;
+          }
+        } else {
+          throw lastErr || new Error('Не удалось инициализировать captioner');
         }
       }
-      if (!window.__webgpu_captioner) throw lastErr || new Error("Не удалось инициализировать captioner");
     }
 
     const imgEl = await toHTMLImage(image);
-
-    // Для Florence-2 более детальная подпись через специальный токен задачи
-    const out = await window.__webgpu_captioner(imgEl, { text: '<MORE_DETAILED_CAPTION>' });
-
+    const out = await window.__web_captioner(imgEl, { text: '<MORE_DETAILED_CAPTION>' });
     const text = Array.isArray(out)
       ? (out[0]?.generated_text ?? out[0]?.text ?? JSON.stringify(out[0]))
       : (out?.generated_text ?? out?.text ?? String(out));
-
     return text;
   } catch (e) {
-    return `[WebGPU caption error: ${'message' in e ? e.message : e}]`;
+    return `[WebGPU caption error: ${e?.message || e}]`;
   }
 }
 """
@@ -255,12 +314,12 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
     with gr.Row():
         with gr.Column(scale=4):
             image_input = gr.Image(label="Загрузите картинку", type="filepath")
-            use_webgpu = gr.Checkbox(value=True, label="Генерировать подпись к изображению в браузере (WebGPU)")
+            use_webgpu = gr.Checkbox(value=True, label="Генерировать подпись к изображению в браузере (WebGPU/wasm)")
             raw_caption = gr.Textbox(
-                label="More Detailed Caption (WebGPU)", 
-                interactive=True, 
+                label="More Detailed Caption (клиентский Florence-2)", 
+                interactive=True,
                 lines=6,
-                placeholder="Подпись появится тут (если включён WebGPU-капшенер)"
+                placeholder="Подпись появится тут (WebGPU/wasm)"
             )
             user_input = gr.Textbox(
                 label="Вопрос по изображению", 
@@ -270,7 +329,7 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
                 send_btn = gr.Button("Отправить", variant="primary")
                 clear_btn = gr.Button("Очистить чат")
 
-            gr.Markdown("**Галерея примеров (клик — подставить в загрузчик, подпись посчитается в браузере)**")
+            gr.Markdown("Галерея примеров (клик — подставить в загрузчик, подпись посчитается на клиенте)")
             gallery = gr.Gallery(
                 value=EXAMPLE_IMAGES,
                 label="Примеры",
@@ -284,7 +343,7 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
         with gr.Column(scale=6):
             chatbot = gr.Chatbot(label="Чат с моделью", height=640)
 
-    # Клик по галерее: просто подставить изображение и очистить подпись (капшенер сработает на change)
+    # Клик по галерее: подставить изображение и очистить подпись (капшенер сработает на change)
     def on_gallery_select(evt: gr.SelectData):
         img = EXAMPLE_IMAGES[evt.index]
         return img, ""
@@ -295,7 +354,7 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
         outputs=[image_input, raw_caption]
     )
 
-    # Изменение картинки: считаем подпись на клиенте (WebGPU)
+    # Изменение картинки: считаем подпись на клиенте (WebGPU/wasm)
     image_input.change(
         None,
         inputs=[image_input, use_webgpu],
@@ -303,13 +362,20 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
         js=WEBGPU_CAPTION_JS
     )
 
-    # Отправка сообщения: берём caption прямо из текстбокса (не генерим на сервере)
+    # Переключение флажка: если включили — пересчитать подпись; если выключили — очистить
+    use_webgpu.change(
+        None,
+        inputs=[image_input, use_webgpu],
+        outputs=[raw_caption],
+        js=WEBGPU_CAPTION_JS
+    )
+
+    # Отправка сообщения: берём caption прямо из текстбокса (клиентский Florence)
     send_btn.click(
         chat_stream,
         inputs=[image_input, user_input, chatbot, raw_caption],
         outputs=[chatbot, raw_caption]
     )
-
     user_input.submit(
         chat_stream,
         inputs=[image_input, user_input, chatbot, raw_caption],
@@ -318,12 +384,12 @@ with gr.Blocks(css=css, analytics_enabled=False) as demo:
 
     # Очистка чата + подписи
     def clear_all():
-        return [], ""
+        return [], "", ""
 
     clear_btn.click(
         clear_all,
         inputs=None,
-        outputs=[chatbot, raw_caption]
+        outputs=[chatbot, raw_caption, user_input]
     )
 
 # Запуск