Spaces:

jscmp4
/

webgpu-smoke-test

Running

App Files Files Community

jscmp4 commited on Dec 10, 2025

Commit

9aa9904

verified ·

1 Parent(s): 9ddcbbe

MVP

Browse files

Files changed (1) hide show

index.html +115 -43

index.html CHANGED Viewed

@@ -2,69 +2,141 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <title>WebGPU 冒烟测试</title>
     <style>
-        body { font-family: sans-serif; padding: 20px; line-height: 1.6; }
-        .box { background: #f0f0f0; padding: 15px; border-radius: 8px; margin-bottom: 10px; }
-        .success { color: green; font-weight: bold; }
-        .error { color: red; font-weight: bold; }
-        button { font-size: 16px; padding: 10px 20px; cursor: pointer; }
     </style>
 </head>
 <body>
-    <h1>🔥 冒烟测试 (Smoke Test)</h1>
-    <p>如果下面两步都显示绿色，说明你的“地基”已经搭好了。</p>
-    <div class="box">
-        <h3>1. 环境检查</h3>
-        <div id="env-status">正在检查浏览器环境...</div>
-    </div>
-    <div class="box">
-        <h3>2. 模型加载测试 (Whisper-Tiny)</h3>
-        <p>点击按钮，测试是否能从 Hugging Face 拉取模型到本地。</p>
-        <button id="load-btn">开始加载模型</button>
-        <div id="model-status" style="margin-top:10px; color:#666;">等待指令...</div>
     </div>
     <script type="module">
-        // 引入库
         import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
-        const envStatus = document.getElementById('env-status');
-        const modelStatus = document.getElementById('model-status');
-        const btn = document.getElementById('load-btn');
-        // 1. 环境检查逻辑
-        // 简单检查 navigator.gpu 是否存在 (这是 WebGPU 的标志)
-        if ("gpu" in navigator) {
-            envStatus.innerHTML = "✅ 检测到 WebGPU 支持！你的浏览器很棒。";
-            envStatus.className = "success";
-        } else {
-            envStatus.innerHTML = "⚠️ 未检测到 WebGPU，将回退到 WASM (CPU) 模式，速度会慢一些，但也能用。";
-            envStatus.className = "error"; // 其实不算致命错误，只是性能会差
         }
-        // 2. 模型加载逻辑
-        btn.addEventListener('click', async () => {
-            btn.disabled = true;
-            modelStatus.innerText = "⏳ 正在连接 HF Hub 下载模型 (约 40MB)...";
             try {
-                // 尝试加载最小的语音识别模型
-                let pipe = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
-                modelStatus.innerHTML = "✅ 模型加载成功！引擎已就绪。";
-                modelStatus.className = "success";
-                console.log(pipe); // 在控制台打印模型对象
             } catch (err) {
-                modelStatus.innerHTML = "❌ 加载失败: " + err.message;
-                modelStatus.className = "error";
                 console.error(err);
-                btn.disabled = false;
             }
         });
     </script>
 </body>
 </html>

 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web AI - MP3 转文字 (MVP版)</title>
     <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; color: #333; }
+        h1 { border-bottom: 2px solid #eee; padding-bottom: 10px; }
+        /* 布局容器 */
+        .container { background: #f9f9f9; padding: 20px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
+        /* 控件样式 */
+        .controls { margin: 20px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
+        input[type="file"] { padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: white; }
+        button { background: #000; color: #fff; border: none; padding: 10px 20px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: opacity 0.2s; }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        button:hover:not(:disabled) { opacity: 0.8; }
+        /* 状态和结果区域 */
+        #status { color: #666; margin-bottom: 10px; font-size: 0.9em; }
+        #audio-player { width: 100%; margin: 10px 0; display: none; } /* 默认隐藏播放器 */
+        #result-area {
+            width: 100%; height: 200px;
+            padding: 15px; border: 1px solid #ddd; border-radius: 6px;
+            font-family: monospace; line-height: 1.5; resize: vertical;
+            background: #fff; box-sizing: border-box;
+        }
     </style>
 </head>
 <body>
+    <h1>🎙️ 本地 MP3 转文字 (Whisper)</h1>
+    <p>选择一个音频文件，利用你浏览器的算力将其转换为文字。</p>
+    <div class="container">
+        <div id="status">🔵 正在初始化引擎...</div>
+        <div class="controls">
+            <input type="file" id="file-upload" accept="audio/*,video/*">
+            <button id="run-btn" disabled>开始转换</button>
+        </div>
+        <audio id="audio-player" controls></audio>
+        <h3>转换结果：</h3>
+        <textarea id="result-area" placeholder="识别出的文字将显示在这里..."></textarea>
     </div>
     <script type="module">
         import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2';
+        // 允许本地缓存模型，下次刷新不用重新下载
+        env.allowLocalModels = false;
+        env.useBrowserCache = true;
+        // 获取 DOM 元素
+        const statusEl = document.getElementById('status');
+        const fileInput = document.getElementById('file-upload');
+        const runBtn = document.getElementById('run-btn');
+        const audioPlayer = document.getElementById('audio-player');
+        const resultArea = document.getElementById('result-area');
+        let transcriber = null;
+        // --- 核心步骤 1: 加载模型 ---
+        async function initModel() {
+            statusEl.innerText = "⏳ 正在加载 Whisper 模型 (首次需下载 ~40MB)...";
+            try {
+                // 使用 whisper-tiny 模型 (速度最快)
+                // 如果想要更高精度，把下面改成 'Xenova/whisper-base'
+                transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
+                statusEl.innerText = "✅ 模型就绪！请上传音频。";
+                runBtn.disabled = false; // 只有模型加载完了，按钮才能点
+            } catch (err) {
+                statusEl.innerText = "❌ 模型加载失败: " + err.message;
+            }
         }
+        // --- 核心步骤 2: 处理文件上传 ---
+        fileInput.addEventListener('change', (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            // 创建一个临时的 URL 让播放器能播放
+            const url = URL.createObjectURL(file);
+            audioPlayer.src = url;
+            audioPlayer.style.display = 'block'; // 显示播放器
+            resultArea.value = ""; // 清空上次结果
+            statusEl.innerText = "📂 文件已就绪，点击“开始转换”";
+        });
+        // --- 核心步骤 3: 执行转换 ---
+        runBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) { alert("请先选择文件！"); return; }
+            // UI 状态更新
+            runBtn.disabled = true;
+            statusEl.innerText = "🚀 正在转换中... (长音频请耐心等待)";
+            const startTime = performance.now();
             try {
+                // 将文件转为 Blob URL
+                const url = URL.createObjectURL(file);
+                // === 关键逻辑 ===
+                // 调用模型进行推理
+                const output = await transcriber(url, {
+                    chunk_length_s: 30, // 关键：每30秒切一片，处理长音频必备
+                    stride_length_s: 5, // 切片重叠长度，防止切断句子
+                    language: 'chinese', // 强制中文模式 (如果全是英文可以改成 english)
+                    task: 'transcribe',  // 任务类型：转录
+                });
+                // ===============
+                const endTime = performance.now();
+                const timeCost = ((endTime - startTime) / 1000).toFixed(2);
+                // 显示结果
+                resultArea.value = output.text;
+                statusEl.innerText = `✅ 转换完成！耗时: ${timeCost}秒`;
             } catch (err) {
                 console.error(err);
+                statusEl.innerText = "❌ 转换出错，请查看控制台(F12)";
+                resultArea.value = "错误详情:\n" + err.message;
+            } finally {
+                runBtn.disabled = false; // 恢复按钮
             }
         });
+        // 页面加载时自动启动模型下载
+        initModel();
     </script>
 </body>
 </html>