{ // 获取包含Hugging Face文本的span元素 const spans = link.querySelectorAll('span.whitespace-nowrap, span.hidden.whitespace-nowrap'); spans.forEach(span => { if (span.textContent && span.textContent.trim().match(/Hugging\s*Face/i)) { span.textContent = 'AI快站'; } }); }); // 替换logo图片的alt属性 document.querySelectorAll('img[alt*="Hugging"], img[alt*="Face"]').forEach(img => { if (img.alt.match(/Hugging\s*Face/i)) { img.alt = 'AI快站 logo'; } }); } // 替换导航栏中的链接 function replaceNavigationLinks() { // 已替换标记,防止重复运行 if (window._navLinksReplaced) { return; } // 已经替换过的链接集合,防止重复替换 const replacedLinks = new Set(); // 只在导航栏区域查找和替换链接 const headerArea = document.querySelector('header') || document.querySelector('nav'); if (!headerArea) { return; } // 在导航区域内查找链接 const navLinks = headerArea.querySelectorAll('a'); navLinks.forEach(link => { // 如果已经替换过,跳过 if (replacedLinks.has(link)) return; const linkText = link.textContent.trim(); const linkHref = link.getAttribute('href') || ''; // 替换Spaces链接 - 仅替换一次 if ( (linkHref.includes('/spaces') || linkHref === '/spaces' || linkText === 'Spaces' || linkText.match(/^s*Spacess*$/i)) && linkText !== 'OCR模型免费转Markdown' && linkText !== 'OCR模型免费转Markdown' ) { link.textContent = 'OCR模型免费转Markdown'; link.href = 'https://fast360.xyz'; link.setAttribute('target', '_blank'); link.setAttribute('rel', 'noopener noreferrer'); replacedLinks.add(link); } // 删除Posts链接 else if ( (linkHref.includes('/posts') || linkHref === '/posts' || linkText === 'Posts' || linkText.match(/^s*Postss*$/i)) ) { if (link.parentNode) { link.parentNode.removeChild(link); } replacedLinks.add(link); } // 替换Docs链接 - 仅替换一次 else if ( (linkHref.includes('/docs') || linkHref === '/docs' || linkText === 'Docs' || linkText.match(/^s*Docss*$/i)) && linkText !== '模型下载攻略' ) { link.textContent = '模型下载攻略'; link.href = '/'; replacedLinks.add(link); } // 删除Enterprise链接 else if ( (linkHref.includes('/enterprise') || linkHref === '/enterprise' || linkText === 'Enterprise' || linkText.match(/^s*Enterprises*$/i)) ) { if (link.parentNode) { link.parentNode.removeChild(link); } replacedLinks.add(link); } }); // 查找可能嵌套的Spaces和Posts文本 const textNodes = []; function findTextNodes(element) { if (element.nodeType === Node.TEXT_NODE) { const text = element.textContent.trim(); if (text === 'Spaces' || text === 'Posts' || text === 'Enterprise') { textNodes.push(element); } } else { for (const child of element.childNodes) { findTextNodes(child); } } } // 只在导航区域内查找文本节点 findTextNodes(headerArea); // 替换找到的文本节点 textNodes.forEach(node => { const text = node.textContent.trim(); if (text === 'Spaces') { node.textContent = node.textContent.replace(/Spaces/g, 'OCR模型免费转Markdown'); } else if (text === 'Posts') { // 删除Posts文本节点 if (node.parentNode) { node.parentNode.removeChild(node); } } else if (text === 'Enterprise') { // 删除Enterprise文本节点 if (node.parentNode) { node.parentNode.removeChild(node); } } }); // 标记已替换完成 window._navLinksReplaced = true; } // 替换代码区域中的域名 function replaceCodeDomains() { // 特别处理span.hljs-string和span.njs-string元素 document.querySelectorAll('span.hljs-string, span.njs-string, span[class*="hljs-string"], span[class*="njs-string"]').forEach(span => { if (span.textContent && span.textContent.includes('huggingface.co')) { span.textContent = span.textContent.replace(/huggingface.co/g, 'aifasthub.com'); } }); // 替换hljs-string类的span中的域名(移除多余的转义符号) document.querySelectorAll('span.hljs-string, span[class*="hljs-string"]').forEach(span => { if (span.textContent && span.textContent.includes('huggingface.co')) { span.textContent = span.textContent.replace(/huggingface.co/g, 'aifasthub.com'); } }); // 替换pre和code标签中包含git clone命令的域名 document.querySelectorAll('pre, code').forEach(element => { if (element.textContent && element.textContent.includes('git clone')) { const text = element.innerHTML; if (text.includes('huggingface.co')) { element.innerHTML = text.replace(/huggingface.co/g, 'aifasthub.com'); } } }); // 处理特定的命令行示例 document.querySelectorAll('pre, code').forEach(element => { const text = element.innerHTML; if (text.includes('huggingface.co')) { // 针对git clone命令的专门处理 if (text.includes('git clone') || text.includes('GIT_LFS_SKIP_SMUDGE=1')) { element.innerHTML = text.replace(/huggingface.co/g, 'aifasthub.com'); } } }); // 特别处理模型下载页面上的代码片段 document.querySelectorAll('.flex.border-t, .svelte_hydrator, .inline-block').forEach(container => { const content = container.innerHTML; if (content && content.includes('huggingface.co')) { container.innerHTML = content.replace(/huggingface.co/g, 'aifasthub.com'); } }); // 特别处理模型仓库克隆对话框中的代码片段 try { // 查找包含"Clone this model repository"标题的对话框 const cloneDialog = document.querySelector('.svelte_hydration_boundary, [data-target="MainHeader"]'); if (cloneDialog) { // 查找对话框中所有的代码片段和命令示例 const codeElements = cloneDialog.querySelectorAll('pre, code, span'); codeElements.forEach(element => { if (element.textContent && element.textContent.includes('huggingface.co')) { if (element.innerHTML.includes('huggingface.co')) { element.innerHTML = element.innerHTML.replace(/huggingface.co/g, 'aifasthub.com'); } else { element.textContent = element.textContent.replace(/huggingface.co/g, 'aifasthub.com'); } } }); } // 更精确地定位克隆命令中的域名 document.querySelectorAll('[data-target]').forEach(container => { const codeBlocks = container.querySelectorAll('pre, code, span.hljs-string'); codeBlocks.forEach(block => { if (block.textContent && block.textContent.includes('huggingface.co')) { if (block.innerHTML.includes('huggingface.co')) { block.innerHTML = block.innerHTML.replace(/huggingface.co/g, 'aifasthub.com'); } else { block.textContent = block.textContent.replace(/huggingface.co/g, 'aifasthub.com'); } } }); }); } catch (e) { // 错误处理但不打印日志 } } // 当DOM加载完成后执行替换 if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { replaceHeaderBranding(); replaceNavigationLinks(); replaceCodeDomains(); // 只在必要时执行替换 - 3秒后再次检查 setTimeout(() => { if (!window._navLinksReplaced) { console.log('[Client] 3秒后重新检查导航链接'); replaceNavigationLinks(); } }, 3000); }); } else { replaceHeaderBranding(); replaceNavigationLinks(); replaceCodeDomains(); // 只在必要时执行替换 - 3秒后再次检查 setTimeout(() => { if (!window._navLinksReplaced) { console.log('[Client] 3秒后重新检查导航链接'); replaceNavigationLinks(); } }, 3000); } // 增加一个MutationObserver来处理可能的动态元素加载 const observer = new MutationObserver(mutations => { // 检查是否导航区域有变化 const hasNavChanges = mutations.some(mutation => { // 检查是否存在header或nav元素变化 return Array.from(mutation.addedNodes).some(node => { if (node.nodeType === Node.ELEMENT_NODE) { // 检查是否是导航元素或其子元素 if (node.tagName === 'HEADER' || node.tagName === 'NAV' || node.querySelector('header, nav')) { return true; } // 检查是否在导航元素内部 let parent = node.parentElement; while (parent) { if (parent.tagName === 'HEADER' || parent.tagName === 'NAV') { return true; } parent = parent.parentElement; } } return false; }); }); // 只在导航区域有变化时执行替换 if (hasNavChanges) { // 重置替换状态,允许再次替换 window._navLinksReplaced = false; replaceHeaderBranding(); replaceNavigationLinks(); } }); // 开始观察document.body的变化,包括子节点 if (document.body) { observer.observe(document.body, { childList: true, subtree: true }); } else { document.addEventListener('DOMContentLoaded', () => { observer.observe(document.body, { childList: true, subtree: true }); }); } })(); \n\n```\n\nPlease help","html":"
\n

Oh whoops - you also need to add use_external_data_format: true as an option:

\n
const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {\n  dtype: 'q4f16', device: 'webgpu', use_external_data_format: true,\n});\n
\n
\n

Hi
I'm running into a similar issue too.

\n

Error

\n
Error: Error: Can't create a session. ERROR_CODE: 1, ERROR_MESSAGE: Deserialize tensor model.layers.6.mlp.up_proj.MatMul.weight_Q4 failed.Failed to load external data file \"\"model_q4f16.onnx_data\"\", error: Module.MountedFiles is not available.\n    at Ve (transformers@3.0.2:100:73359)\n    at ed (transformers@3.0.2:100:365982)\n
\n

Full Code

\n
<!DOCTYPE html>\n<html>\n<head>\n  <title>Test Transformers.js</title>\n  <script type=\"module\">\n    async function testSummarization() {\n      try {\n        // Load transformers.js\n        const { env, AutoTokenizer, AutoModelForCausalLM, pipeline } = await import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2');\n        console.log('Transformers.js loaded'); // Debugging statement\n        env.allowLocalModels = false\n        // Load the summarization pipeline\n        const summarizationPipeline = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {\n  dtype: 'q4f16', use_external_data_format: true,\n});\n        console.log('Summarization pipeline loaded'); // Debugging statement\n\n        // Run the summarization\n        const text = 'The text you want to summarize';\n        const result = await summarizationPipeline(text, { max_length: 130, min_length: 30, length_penalty: 2.0, num_beams: 4 });\n        console.log('Summarization result:', result); // Debugging statement\n\n        console.log(result[0].summary_text);\n      } catch (error) {\n        console.error('Error:', error);\n      }\n    }\n\n    testSummarization();\n  </script>\n</head>\n<body>\n  <h1>Test Transformers.js</h1>\n</body>\n</html>\n
\n

Please help

\n","updatedAt":"2024-11-12T23:00:37.418Z","author":{"_id":"6058a23b5ab91954363a6511","avatarUrl":"https://aifasthub.com/avatars/v1/production/uploads/6058a23b5ab91954363a6511/wam6ertF3GgNdsxLXuP38.png","fullname":"Sukesh Perla","name":"hitchhiker3010","type":"user","isPro":true,"isHf":false,"isHfAdmin":false,"isMod":false,"followerCount":10}},"numEdits":1,"identifiedLanguage":{"language":"en","probability":0.4111720025539398},"editors":["hitchhiker3010"],"editorAvatarUrls":["https://aifasthub.com/avatars/v1/production/uploads/6058a23b5ab91954363a6511/wam6ertF3GgNdsxLXuP38.png"],"reactions":[],"isReport":false}},{"id":"679ba3d2134af08633699012","author":{"_id":"647479a17d131daf633c108d","avatarUrl":"https://aifasthub.com/avatars/v1/production/uploads/noauth/-6Yq7oM_Ju6Zi2GEvobvb.jpeg","fullname":"Ronan McGovern","name":"RonanMcGovern","type":"user","isPro":true,"isHf":false,"isHfAdmin":false,"isMod":false,"followerCount":59,"isOwner":false,"isOrgMember":false},"createdAt":"2025-01-30T16:07:46.000Z","type":"comment","data":{"edited":false,"hidden":false,"latest":{"raw":"Yeah this seems to be pervasive across many files.\n\nI can only get phi 3 to work: static model_id = \"onnx-community/Phi-3.5-mini-instruct-onnx-web\";","html":"

Yeah this seems to be pervasive across many files.

\n

I can only get phi 3 to work: static model_id = \"onnx-community/Phi-3.5-mini-instruct-onnx-web\";

\n","updatedAt":"2025-01-30T16:07:46.068Z","author":{"_id":"647479a17d131daf633c108d","avatarUrl":"https://aifasthub.com/avatars/v1/production/uploads/noauth/-6Yq7oM_Ju6Zi2GEvobvb.jpeg","fullname":"Ronan McGovern","name":"RonanMcGovern","type":"user","isPro":true,"isHf":false,"isHfAdmin":false,"isMod":false,"followerCount":59}},"numEdits":0,"identifiedLanguage":{"language":"en","probability":0.8705609440803528},"editors":["RonanMcGovern"],"editorAvatarUrls":["https://aifasthub.com/avatars/v1/production/uploads/noauth/-6Yq7oM_Ju6Zi2GEvobvb.jpeg"],"reactions":[],"isReport":false}}],"pinned":false,"locked":false,"collection":"discussions","isPullRequest":false,"isReport":false},"repo":{"name":"onnx-community/Phi-3.5-mini-instruct-onnx-web","type":"model"},"activeTab":"discussion","discussionRole":0,"watched":false,"muted":false,"repoDiscussionsLocked":false}">

Transformers 3.0 can't find files

#5
by r0-0rd - opened

Hi, sorry if I'm missing something, I'm moving this across from a different thread here at the suggestion of @BoscoTheDog but I'm not expecting anyone to go read that thread. (Thanks for your help so far Bosco, much appreciated!)

I'm trying to get a simple proof-of-concept up-and-running that I can build on, using Phi 3.5 and the CDN-hosted transformers.js library but I keep getting 404 errors and I don't fully understand what I'm doing wrong.

I'm importing the library for the pipeline like this

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]";```

Then I'm loading the model like this

const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web');

But I keep getting 404 errors

[email protected]:217 
       GET https://huggingface.co/onnx-community/Phi-3.5-mini-instruct-onnx-web/resolve/main/onnx/model_quantized.onnx 404 (Not Found)
[email protected]:217 Uncaught Error: Could not locate file: "https://huggingface.co/onnx-community/Phi-3.5-mini-instruct-onnx-web/resolve/main/onnx/model_quantized.onnx".
    at [email protected]:217:5325
    at h ([email protected]:217:5348)
    at async [email protected]:175:15938
    at async [email protected]:175:13612
    at async Promise.all (index 0)
    at async P ([email protected]:175:13530)
    at async Promise.all (index 0)
    at async wr.from_pretrained ([email protected]:175:21979)
    at async Do.from_pretrained ([email protected]:175:57753)
    at async Promise.all (index 1)

That suggests to me that the library isn't supported, but I can see from the listing that it is?

I've tried all of the following models, the one that's worked is "tiny-random-PhiForCausalLM". I quite quickly saw that is not what I'm looking for, I think it's a lorem ipsum generator, but at least that shows me that my code can work if I can figure out where to request the library from.

  • onnx-community/Phi-3.5-mini-instruct-onnx-web
  • Xenova/Phi-3-mini-4k-instruct
  • microsoft/Phi-3-mini-4k-instruct-onnx-web
  • Xenova/tiny-random-PhiForCausalLM
  • Xenova/phi-1_5_dev
  • BricksDisplay/phi-1_5
  • BricksDisplay/phi-1_5-q4
  • BricksDisplay/phi-1_5-bnb4
  • Xenova/Phi-3-mini-4k-instruct_fp16
  • Xenova/tiny-random-LlavaForConditionalGeneration_phi

I feel like I'm spinning my wheels on this and any help to point me in the right direction would make a huge difference. Thanks in advance!

ONNX Community org

In this case, you need to specify the correct dtype and device (it's a special optimized model for WebGPU). The following should work:

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]";

const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {
  dtype: 'q4f16', device: 'webgpu'
});

We are in the process of adding default values to the config which would mean you don't need to do this in future. Hope this helps!

Thanks very much for the response @Xenova ! Appreciate that pointer, it's helped me get further! As an aside - I've been so pleasantly surprised by how willing people are to help here :-)

I've got it loading, I still seem to be hitting an error with

I seem to be hitting this error now:

Error: Can't create a session. ERROR_CODE: 1, ERROR_MESSAGE: Deserialize tensor model.layers.4.attn.o_proj.MatMul.weight_Q4 failed.Failed to load external data file ""model_q4f16.onnx_data"", error: Module.MountedFiles is not available.
    at Ve ([email protected]:100:73169)
    at Zu ([email protected]:100:357172)

It appears with these warnings, but I don't think they prevent the model from running:

1.

2024-10-01 09:28:44.905599 [W:onnxruntime:, session_state.cc:1168 VerifyEachNodeIsAssignedToAnEp] Some nodes were not assigned to the preferred execution providers which may or may not have an negative impact on performance. e.g. ORT explicitly assigns shape related ops to CPU to improve perf.

2.

2024-10-01 09:28:44.906799 [W:onnxruntime:, session_state.cc:1170 VerifyEachNodeIsAssignedToAnEp] Rerunning with verbose output on a non-minimal build will show node assignments.

In case it helps, the below is my full code - I'm running on a Macbook Pro in Chrome (exact same setup that I used to try out the Phi demo). I initially tried just running the code locally with VS Code Live Server but just in case that was the culprit I also uploaded to my server and tried loading the page there but got the same errors

const status = document.getElementById("status");
status.textContent = "Loading model...";
import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@huggingface/[email protected]";

try {  
  console.log("Started model loading")
  const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {
    dtype: 'q4f16', device: 'webgpu'
  });
  console.log("Finished model loading")
  status.textContent = "Ready";
  generateText(languageModel);
} catch (err) {
  console.log(err)
  status.textContent = "Error - failed to load";
}

Thanks again for the help!

Made a quick edit to the above - realised I was doing something silly with my error handling (eesh). I have updated with the actual error I'm getting!

ONNX Community org

Never seen that one before 0_0

ONNX Community org

Oh whoops - you also need to add use_external_data_format: true as an option:

const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {
  dtype: 'q4f16', device: 'webgpu', use_external_data_format: true,
});

Hi there! Sorry for the delay in response - I wanted to double-check before I came back again. It looks like I'm getting the same kind of odd error.

I think I'm going to end up building what I planned in Angular anyway, for unrelated reasons, so I think I should be able to use the npm version of this library which may behave differently so I'll give that a crack.

Thanks very much for the time and effort to help! Sorry I can't report more success with this method!

Oh whoops - you also need to add use_external_data_format: true as an option:

const languageModel = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {
  dtype: 'q4f16', device: 'webgpu', use_external_data_format: true,
});

Hi
I'm running into a similar issue too.

Error

Error: Error: Can't create a session. ERROR_CODE: 1, ERROR_MESSAGE: Deserialize tensor model.layers.6.mlp.up_proj.MatMul.weight_Q4 failed.Failed to load external data file ""model_q4f16.onnx_data"", error: Module.MountedFiles is not available.
    at Ve ([email protected]:100:73359)
    at ed ([email protected]:100:365982)

Full Code

<!DOCTYPE html>
<html>
<head>
  <title>Test Transformers.js</title>
  <script type="module">
    async function testSummarization() {
      try {
        // Load transformers.js
        const { env, AutoTokenizer, AutoModelForCausalLM, pipeline } = await import('https://cdn.jsdelivr.net/npm/@huggingface/[email protected]');
        console.log('Transformers.js loaded'); // Debugging statement
        env.allowLocalModels = false
        // Load the summarization pipeline
        const summarizationPipeline = await pipeline('text-generation', 'onnx-community/Phi-3.5-mini-instruct-onnx-web', {
  dtype: 'q4f16', use_external_data_format: true,
});
        console.log('Summarization pipeline loaded'); // Debugging statement

        // Run the summarization
        const text = 'The text you want to summarize';
        const result = await summarizationPipeline(text, { max_length: 130, min_length: 30, length_penalty: 2.0, num_beams: 4 });
        console.log('Summarization result:', result); // Debugging statement

        console.log(result[0].summary_text);
      } catch (error) {
        console.error('Error:', error);
      }
    }

    testSummarization();
  </script>
</head>
<body>
  <h1>Test Transformers.js</h1>
</body>
</html>

Please help

Yeah this seems to be pervasive across many files.

I can only get phi 3 to work: static model_id = "onnx-community/Phi-3.5-mini-instruct-onnx-web";

Sign up or log in to comment