Spaces:

jscmp4
/

webgpu-smoke-test

Running

App Files Files Community

jscmp4 commited on Dec 11, 2025

Commit

f22a52c

verified ·

1 Parent(s): 5af1ef3

devug

Browse files

Files changed (1) hide show

index.html +101 -96

index.html CHANGED Viewed

@@ -3,18 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Web AI - 防卡死多线程版</title>
     <style>
         body { font-family: -apple-system, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #333; }
         .container { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
-        /* 进度条 */
         .progress-wrapper { width: 100%; background-color: #e9ecef; border-radius: 8px; height: 20px; margin: 15px 0; overflow: hidden; display: none; }
         .progress-bar { height: 100%; background-color: #28a745; width: 0%; text-align: center; line-height: 20px; color: white; font-size: 12px; font-weight: bold; transition: width 0.2s ease; }
         .progress-bar.processing { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; animation: stripes 1s linear infinite; }
         @keyframes stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
-        /* 拖拽区 */
         #drop-zone { border: 2px dashed #ccc; border-radius: 10px; padding: 40px 20px; text-align: center; cursor: pointer; background: #fafafa; margin-bottom: 20px; transition: 0.2s;}
         #drop-zone.drag-over { border-color: #007bff; background-color: #eef6ff; }
         #file-upload { display: none; }
@@ -25,23 +23,22 @@
         button:disabled { background: #ccc; cursor: not-allowed; }
         #result-area { width: 100%; height: 300px; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: monospace; resize: vertical; background: #fdfdfd; margin-top: 15px;}
-        .tag { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.8em; margin-right: 5px; background: #eee;}
     </style>
 </head>
 <body>
-    <h1>🚀 21分钟长音频专用版 (Web Worker)</h1>
-    <p>AI 在后台独立线程运行，彻底告别“页面无响应”。</p>
     <div class="container">
-        <div id="status">🔵 正在启动多线程引擎...</div>
         <div class="progress-wrapper" id="progress-wrapper">
             <div class="progress-bar" id="progress-bar">0%</div>
         </div>
         <div id="drop-zone">
-            <p>☁️ 拖入长录音 (mp3, m4a, wav)</p>
         </div>
         <input type="file" id="file-upload" accept="audio/*,video/*,.m4a,.wav,.mp3">
@@ -59,80 +56,64 @@
     </div>
     <script id="worker-code" type="javascript/worker">
-        // 这里的代码将会在后台线程独立运行，不卡主界面
         import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
-    // 允许缓存
-    env.allowLocalModels = false;
-    env.useBrowserCache = true;
-    let transcriber = null;
-    self.onmessage = async (e) => {
-        const msg = e.data;
-        if (msg.type === 'load') {
-            try {
-                self.postMessage({ type: 'status', text: '⏳ 正在加载 Whisper-Base (更聪明版)...' });
-                // 🔴 改动 1: 从 tiny 换成 base，更不容易发疯
-                transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-base', {
-                    progress_callback: (data) => {
-                        if (data.status === 'progress') {
-                            self.postMessage({
-                                type: 'download_progress',
-                                percent: Math.round((data.loaded / data.total) * 100),
-                                file: data.file
-                            });
                         }
-                    }
-                });
-                self.postMessage({ type: 'ready' });
-            } catch (err) {
-                self.postMessage({ type: 'error', error: err.message });
             }
-        }
-        if (msg.type === 'run') {
-            if (!transcriber) return;
-            try {
-                self.postMessage({ type: 'status', text: '🚀 正在分析长音频 (已开启防幻觉)...' });
-                // 开始推理
-                const output = await transcriber(msg.audio, {
-                    // 基础设置
-                    chunk_length_s: 30,
-                    stride_length_s: 5,
-                    task: 'transcribe',
-                    language: msg.language !== 'auto' ? msg.language : undefined,
-                    // 🔴 改动 2: 关键参数优化
-                    return_timestamps: true, // 强制让模型对齐时间轴，能极大减少乱说
-                    no_repeat_ngram_size: 2, // 强行禁止连续重复 2 个词以上的短语
-                    // 🔴 改动 3: 温度设置 (Temperature)
-                    // 0 代表最冷静、最严谨。默认可能是随机的，导致它乱猜。
-                    temperature: 0,
-                });
-                self.postMessage({ type: 'result', text: output.text });
-            } catch (err) {
-                self.postMessage({ type: 'error', error: err.message });
             }
-        }
-    };
     </script>
     <script type="module">
-        // 1. 创建 Worker
         const workerBlob = new Blob([document.getElementById('worker-code').textContent], { type: "text/javascript" });
         const workerUrl = URL.createObjectURL(workerBlob);
         const worker = new Worker(workerUrl, { type: "module" });
-        // DOM 元素
         const statusEl = document.getElementById('status');
         const progressBar = document.getElementById('progress-bar');
         const progressWrapper = document.getElementById('progress-wrapper');
@@ -143,31 +124,45 @@
         const fileInput = document.getElementById('file-upload');
         const langSelect = document.getElementById('language-select');
-        let currentAudioUrl = null;
-        // 2. 监听 Worker 发回来的消息
         worker.onmessage = (e) => {
             const msg = e.data;
             if (msg.type === 'download_progress') {
                 progressWrapper.style.display = 'block';
                 progressBar.style.width = msg.percent + '%';
                 progressBar.innerText = msg.percent + '%';
-                if(msg.percent === 100) statusEl.innerText = "⏳ 模型下载完成，正在编译...";
             }
             if (msg.type === 'ready') {
-                statusEl.innerText = "✅ 引擎就绪 (后台线程)";
                 statusEl.style.color = "green";
                 runBtn.disabled = false;
                 progressBar.style.width = '0%';
                 progressWrapper.style.display = 'none';
             }
-            if (msg.type === 'status') {
-                statusEl.innerText = msg.text;
-            }
             if (msg.type === 'result') {
                 resultArea.value = msg.text;
                 statusEl.innerText = "✅ 转换完成！";
@@ -175,23 +170,20 @@
                 runBtn.disabled = false;
                 stopBtn.style.display = 'none';
             }
             if (msg.type === 'error') {
-                statusEl.innerText = "❌ 错误: " + msg.error;
                 statusEl.style.color = "red";
                 progressBar.classList.remove('processing');
                 runBtn.disabled = false;
             }
         };
-        // 启动加载模型
         worker.postMessage({ type: 'load' });
-        // 3. 文件处理逻辑
         function handleFile(file) {
             statusEl.innerText = `📂 已加载: ${file.name}`;
             dropZone.innerHTML = `<p>📄 ${file.name}</p>`;
-            currentAudioUrl = URL.createObjectURL(file); // 生成 blob URL 传给 worker
         }
         dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
@@ -200,32 +192,45 @@
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => { if(e.target.files.length) handleFile(e.target.files[0]); });
-        // 4. 点击开始
-        runBtn.addEventListener('click', () => {
-            if(!currentAudioUrl) return alert("请先上传文件");
             runBtn.disabled = true;
             stopBtn.style.display = 'inline-block';
             progressWrapper.style.display = 'block';
             progressBar.classList.add('processing');
-            progressBar.innerText = "计算中...";
-            // 把任务发给后台
-            worker.postMessage({
-                type: 'run',
-                audio: currentAudioUrl,
-                language: langSelect.value
-            });
         });
-        // 停止按钮 (重载 Worker)
         stopBtn.addEventListener('click', () => {
             if(confirm("确定要终止吗？")) {
-                worker.terminate(); // 杀掉后台线程
-                location.reload(); // 简单粗暴刷新重来
             }
         });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web AI - 长音频修复版</title>
     <style>
         body { font-family: -apple-system, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #333; }
         .container { background: #fff; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
         .progress-wrapper { width: 100%; background-color: #e9ecef; border-radius: 8px; height: 20px; margin: 15px 0; overflow: hidden; display: none; }
         .progress-bar { height: 100%; background-color: #28a745; width: 0%; text-align: center; line-height: 20px; color: white; font-size: 12px; font-weight: bold; transition: width 0.2s ease; }
         .progress-bar.processing { background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 1rem 1rem; animation: stripes 1s linear infinite; }
         @keyframes stripes { from { background-position: 1rem 0; } to { background-position: 0 0; } }
         #drop-zone { border: 2px dashed #ccc; border-radius: 10px; padding: 40px 20px; text-align: center; cursor: pointer; background: #fafafa; margin-bottom: 20px; transition: 0.2s;}
         #drop-zone.drag-over { border-color: #007bff; background-color: #eef6ff; }
         #file-upload { display: none; }
         button:disabled { background: #ccc; cursor: not-allowed; }
         #result-area { width: 100%; height: 300px; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: monospace; resize: vertical; background: #fdfdfd; margin-top: 15px;}
     </style>
 </head>
 <body>
+    <h1>🚀 21分钟长音频修复版 (解码分离)</h1>
+    <p>解决了 "AudioContext is not available" 错误。主线程解码，后台线程计算。</p>
     <div class="container">
+        <div id="status">🔵 正在启动引擎...</div>
         <div class="progress-wrapper" id="progress-wrapper">
             <div class="progress-bar" id="progress-bar">0%</div>
         </div>
         <div id="drop-zone">
+            <p>☁️ 拖入音频文件 (mp3, m4a, wav)</p>
         </div>
         <input type="file" id="file-upload" accept="audio/*,video/*,.m4a,.wav,.mp3">
     </div>
     <script id="worker-code" type="javascript/worker">
         import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+        env.allowLocalModels = false;
+        env.useBrowserCache = true;
+        let transcriber = null;
+        self.onmessage = async (e) => {
+            const msg = e.data;
+            if (msg.type === 'load') {
+                try {
+                    self.postMessage({ type: 'status', text: '⏳ 后台加载模型 (Whisper-Base)...' });
+                    // 使用 base 模型防幻觉
+                    transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-base', {
+                        progress_callback: (data) => {
+                            if (data.status === 'progress') {
+                                self.postMessage({
+                                    type: 'download_progress',
+                                    percent: Math.round((data.loaded / data.total) * 100)
+                                });
+                            }
                         }
+                    });
+                    self.postMessage({ type: 'ready' });
+                } catch (err) {
+                    self.postMessage({ type: 'error', error: err.message });
+                }
             }
+            if (msg.type === 'run') {
+                try {
+                    self.postMessage({ type: 'status', text: '🚀 模型正在推理中...' });
+                    // 这里的 msg.audio 已经是 Float32Array 纯数字了，不需要 AudioContext 解码
+                    const output = await transcriber(msg.audio, {
+                        chunk_length_s: 30,
+                        stride_length_s: 5,
+                        task: 'transcribe',
+                        language: msg.language !== 'auto' ? msg.language : undefined,
+                        return_timestamps: true, // 防复读关键
+                        no_repeat_ngram_size: 2, // 防复读关键
+                        temperature: 0,          // 降低随机性
+                    });
+                    self.postMessage({ type: 'result', text: output.text });
+                } catch (err) {
+                    self.postMessage({ type: 'error', error: err.message });
+                }
             }
+        };
     </script>
     <script type="module">
         const workerBlob = new Blob([document.getElementById('worker-code').textContent], { type: "text/javascript" });
         const workerUrl = URL.createObjectURL(workerBlob);
         const worker = new Worker(workerUrl, { type: "module" });
         const statusEl = document.getElementById('status');
         const progressBar = document.getElementById('progress-bar');
         const progressWrapper = document.getElementById('progress-wrapper');
         const fileInput = document.getElementById('file-upload');
         const langSelect = document.getElementById('language-select');
+        let currentFile = null;
+        // --- 核心修复函数：在主线程解码音频 ---
+        async function decodeAudio(file) {
+            // 1. 创建 AudioContext，强制采样率为 16000 (Whisper 需要 16k)
+            const audioCtx = new (window.AudioContext || window.webkitAudioContext)({ sampleRate: 16000 });
+            // 2. 读取文件为 ArrayBuffer
+            const arrayBuffer = await file.arrayBuffer();
+            // 3. 解码 (这一步必须在主线程做)
+            const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer);
+            // 4. 获取单声道数据 (Float32Array)
+            let audioData = audioBuffer.getChannelData(0);
+            // 5. 关闭上下文释放资源
+            await audioCtx.close();
+            return audioData;
+        }
+        // ------------------------------------
         worker.onmessage = (e) => {
             const msg = e.data;
             if (msg.type === 'download_progress') {
                 progressWrapper.style.display = 'block';
                 progressBar.style.width = msg.percent + '%';
                 progressBar.innerText = msg.percent + '%';
+                if(msg.percent === 100) statusEl.innerText = "⏳ 下载完成，正在编译...";
             }
             if (msg.type === 'ready') {
+                statusEl.innerText = "✅ 引擎就绪";
                 statusEl.style.color = "green";
                 runBtn.disabled = false;
                 progressBar.style.width = '0%';
                 progressWrapper.style.display = 'none';
             }
+            if (msg.type === 'status') statusEl.innerText = msg.text;
             if (msg.type === 'result') {
                 resultArea.value = msg.text;
                 statusEl.innerText = "✅ 转换完成！";
                 runBtn.disabled = false;
                 stopBtn.style.display = 'none';
             }
             if (msg.type === 'error') {
+                statusEl.innerText = "❌ " + msg.error;
                 statusEl.style.color = "red";
                 progressBar.classList.remove('processing');
                 runBtn.disabled = false;
             }
         };
         worker.postMessage({ type: 'load' });
         function handleFile(file) {
+            currentFile = file;
             statusEl.innerText = `📂 已加载: ${file.name}`;
             dropZone.innerHTML = `<p>📄 ${file.name}</p>`;
         }
         dropZone.addEventListener('dragover', (e) => { e.preventDefault(); dropZone.classList.add('drag-over'); });
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => { if(e.target.files.length) handleFile(e.target.files[0]); });
+        runBtn.addEventListener('click', async () => {
+            if(!currentFile) return alert("请先上传文件");
             runBtn.disabled = true;
             stopBtn.style.display = 'inline-block';
             progressWrapper.style.display = 'block';
             progressBar.classList.add('processing');
+            progressBar.innerText = "解码中...";
+            statusEl.innerText = "⏳ 正在预处理音频 (解码)...";
+            try {
+                // 1. 先在主线程解码
+                const audioData = await decodeAudio(currentFile);
+                progressBar.innerText = "计算中...";
+                statusEl.innerText = "🚀 音频数据已发送给后台，正在推理...";
+                // 2. 把解码好的纯数据 (audioData) 发给 Worker
+                // 注意：这里我们使用 Transferable Object 传输，效率极高
+                worker.postMessage({
+                    type: 'run',
+                    audio: audioData,
+                    language: langSelect.value
+                }, [audioData.buffer]); // 这里的 buffer 转移所有权，零拷贝
+            } catch (err) {
+                console.error(err);
+                statusEl.innerText = "❌ 解码失败: " + err.message;
+                runBtn.disabled = false;
+                progressBar.classList.remove('processing');
+            }
         });
         stopBtn.addEventListener('click', () => {
             if(confirm("确定要终止吗？")) {
+                worker.terminate();
+                location.reload();
             }
         });
     </script>
 </body>
 </html>