Open
Description
System Info
@xenova/[email protected]
chrome 135
macos 15.4
Environment/Platform
- Website/web-app
- Browser extension
- Server-side (e.g., Node.js, Deno, Bun)
- Desktop app (e.g., Electron)
- Other (e.g., VSCode extension)
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/[email protected]/dist/"
},
"webgl": {},
"logLevelInternal": "warning"
},
"tfjs": {}
}
}
Tracing the code, jsonData in getModelJSON() returns the following which in not correct:
'<!doctype html>
<script type="module" src="/@vite/client"></script><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>