error when initializing a pipeline #1296

CharlesJu1 · 2025-04-26T17:29:25Z

System Info

@xenova/transformers@2.17.2
chrome 135
macos 15.4

Environment/Platform

Description

In a simple vue3 + vite app to just try out the transformers.js translation pipeline, I have this code to init pipeline:

    if (!translator) {
      try {
        console.debug('Initializing translator...');
        translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M', {
          quantized: true,
          progress_callback: (progress) => {
            console.debug('Loading progress:', progress);
          },
          cache_dir: null,
          local_files_only: false,
          revision: 'main'
        });
        console.debug('Translator initialized successfully');
      } catch (initError) {
        console.error('Failed to initialize translator:', initError);
        throw initError;
      }
    }

When I run it (clicking a button from page), I got an error:

 "error": "Unexpected token '<', \"<!doctype \"... is not valid JSON",
  "stack": "SyntaxError: Unexpected token '<', \"<!doctype \"... is not valid JSON\n    at JSON.parse (<anonymous>)\n    at getModelJSON (http://localhost:5173/node_modules/.vite/deps/@xenova_transformers.js?v=e50ffca7:14328:15)\n    at async Promise.all (index 0)\n    at async loadTokenizer (http://localhost:5173/node_modules/.vite/deps/@xenova_transformers.js?v=e50ffca7:17831:16)\n    at async AutoTokenizer.from_pretrained (http://localhost:5173/node_modules/.vite/deps/@xenova_transformers.js?v=e50ffca7:21018:46)\n    at async Promise.all (index 0)\n    at async loadItems (http://localhost:5173/node_modules/.vite/deps/@xenova_transformers.js?v=e50ffca7:29509:3)\n    at async pipeline (http://localhost:5173/node_modules/.vite/deps/@xenova_transformers.js?v=e50ffca7:29470:19)\n    at async translate (http://localhost:5173/src/App.vue?t=1745650750088:59:22)",
  "backends": {
    "onnx": {
      "wasm": {
        "wasmPaths": "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2/dist/"
      },
      "webgl": {},
      "logLevelInternal": "warning"
    },
    "tfjs": {}
  }
}

Tracing the code, jsonData in getModelJSON() returns the following which in not correct:

'<!doctype html>

<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>

I checked the chrome cache from devtools:

all three cached files have length of 430, which looks like the jsonData above. Not sure how these files got in the cache there.

Reproduction

create a simple vue project to try out transformers.js
click a button to start translation
got an error.
part of the App.vue file.

<script setup>
import { ref, onMounted } from 'vue';
import { pipeline, env } from '@xenova/transformers';

const inputText = ref('hello');
const sourceLang = ref('en');
const targetLang = ref('zh');
const translatedText = ref('');
const isTranslating = ref(false);
const debugInfo = ref(null);
const backends = ref(null);

// Initialize backends information
onMounted(() => {
  backends.value = env.backends;
});

// Language code mapping for NLLB model
const NLLB_LANGUAGE_MAP = {
  'en': 'eng_Latn',
  'fr': 'fra_Latn',
  'es': 'spa_Latn',
  'de': 'deu_Latn',
  'it': 'ita_Latn',
  'zh': 'zho_Hans',
  'zh-TW': 'zho_Hant'
};

const getLanguageCode = (lang) => {
  return NLLB_LANGUAGE_MAP[lang] || 'eng_Latn';
};

// Initialize the pipeline once
let translator = null;

const translate = async () => {
  if (!inputText.value) return;
  
  isTranslating.value = true;
  translatedText.value = '';
  debugInfo.value = null;

  try {
    const startTime = performance.now();
    
    // Get language codes
    const sourceCode = getLanguageCode(sourceLang.value);
    const targetCode = getLanguageCode(targetLang.value);
    
    // Initialize the translation pipeline with NLLB model if not already initialized
    if (!translator) {
      try {
        console.debug('Initializing translator...');
        translator = await pipeline('translation', 'Xenova/nllb-200-distilled-600M', {
          quantized: true,
          progress_callback: (progress) => {
            console.debug('Loading progress:', progress);
          },
          cache_dir: null,
          local_files_only: false,
          revision: 'main'
        });
        console.debug('Translator initialized successfully');
      } catch (initError) {
        console.error('Failed to initialize translator:', initError);
        throw initError;
      }
    }

    console.debug('Translation request:', {
      input: inputText.value,
      sourceLang: sourceCode,
      targetLang: targetCode,
      model: 'Xenova/nllb-200-distilled-600M'
    });

    // Perform the translation with language codes
    const result = await translator(inputText.value, {
      src_lang: sourceCode,
      tgt_lang: targetCode,
      max_length: 512
    });
    
    const endTime = performance.now();
    
    translatedText.value = result[0].translation_text;
    
    // Set debug information
    debugInfo.value = {
      request: {
        input: inputText.value,
        sourceLang: sourceCode,
        targetLang: targetCode,
        model: 'Xenova/nllb-200-distilled-600M'
      },
      model: 'Xenova/nllb-200-distilled-600M',
      sourceLanguage: sourceCode,
      targetLanguage: targetCode,
      processingTime: `${(endTime - startTime).toFixed(2)}ms`,
      inputLength: inputText.value.length,
      outputLength: translatedText.value.length
    };
  } catch (error) {
    console.error('Translation error:', error);
    debugInfo.value = {
      error: error.message,
      stack: error.stack,
      backends: backends.value
    };
  } finally {
    isTranslating.value = false;
  }
};
</script>

The text was updated successfully, but these errors were encountered:

xenova · 2025-04-26T20:14:32Z

Hi there 👋 can you upgrade to @huggingface/transformers (Transformers.js v3, instead of v2)? That should fix the error.

CharlesJu1 · 2025-04-27T06:24:01Z

Thanks. I figured out why the cached files are from vue index.html. I need to setup vite.config.js to make vite serve 404 rather than the default index.html. Then it works. So this is not a bug, but it requires some special config to vite server. Anyway I will try out the v3 version.

raihara3 · 2025-04-27T14:55:11Z

I have the same problem.
I tested this sample code in my local environment and got the same error.
https://github.com/huggingface/transformers.js/tree/v3/examples/webgpu-video-depth-estimation

In this sample, "@xenova/transformers": "github:xenova/transformers.js#v3" is used, but changing it to "@huggingface/transformers":"^3.5.0" produces the same error The same error is occurring.

xenova · 2025-04-28T03:25:38Z

You may need to refresh your caches after upgrading, which you can do by opening dev tools -> Application -> Cache storage -> right click on "transformers-cache" and delete.

raihara3 · 2025-04-28T10:03:03Z

I deleted the "transformers-cache" and was successful!
Thank you for your help!

CharlesJu1 added the bug Something isn't working label Apr 26, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

error when initializing a pipeline #1296

error when initializing a pipeline #1296

CharlesJu1 commented Apr 26, 2025

xenova commented Apr 26, 2025

CharlesJu1 commented Apr 27, 2025

raihara3 commented Apr 27, 2025

xenova commented Apr 28, 2025

raihara3 commented Apr 28, 2025

error when initializing a pipeline #1296

error when initializing a pipeline #1296

Comments

CharlesJu1 commented Apr 26, 2025

System Info

Environment/Platform

Description

Reproduction

xenova commented Apr 26, 2025

CharlesJu1 commented Apr 27, 2025

raihara3 commented Apr 27, 2025

xenova commented Apr 28, 2025

raihara3 commented Apr 28, 2025