Spaces:

jscmp4
/

webgpu-smoke-test

Running

App Files Files Community

jscmp4 commited on Dec 11, 2025

Commit

d72bae3

verified ·

1 Parent(s): 290f088

add bar

Browse files

Files changed (1) hide show

index.html +104 -86

index.html CHANGED Viewed

@@ -3,68 +3,88 @@
 <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, BlinkMacSystemFont, "Segoe UI", Roboto, 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); }
-        /* --- 核心：拖拽区域样式 --- */
-        #drop-zone {
-            border: 2px dashed #ccc;
-            border-radius: 10px;
-            padding: 40px 20px;
             text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            background: #fafafa;
-            margin: 20px 0;
         }
-        /* 拖拽文件悬停时的样式 */
-        #drop-zone.drag-over {
-            border-color: #007bff;
-            background-color: #eef6ff;
-            transform: scale(1.02);
         }
-        #drop-zone p { margin: 0; color: #666; font-size: 1.1em; pointer-events: none; }
-        #drop-zone span { font-size: 0.8em; color: #999; display: block; margin-top: 5px; pointer-events: none;}
-        /* 隐藏原始的文件 input，因为我们点击框体触发它 */
         #file-upload { display: none; }
         /* 其他控件 */
         .controls { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }
         select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }
-        button { background: #000; color: #fff; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 1em;}
         button:disabled { background: #ccc; cursor: not-allowed; }
-        #status { margin-bottom: 10px; font-weight: 500; }
-        .error { color: #d32f2f; }
-        .success { color: #2e7d32; }
-        #audio-player { width: 100%; margin: 15px 0; display: none; }
-        #result-area { width: 100%; height: 200px; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: monospace; resize: vertical; box-sizing: border-box; background: #fdfdfd;}
     </style>
 </head>
 <body>
-    <h1>🎙️ AI 语音转文字 (拖拽版)</h1>
-    <p>支持拖拽上传 .mp3, .m4a, .wav 等音频文件。</p>
     <div class="container">
-        <div id="status">🔵 正在初始化引擎...</div>
         <div id="drop-zone">
-            <p>☁️ 把文件拖到这里</p>
-            <span>或点击此处选择文件 (支持 mp3, m4a, wav)</span>
         </div>
         <input type="file" id="file-upload" accept="audio/*,video/*,.m4a,.wav,.mp3">
         <div class="controls">
             <select id="language-select">
-                <option value="auto">🌐 自动识别语言</option>
                 <option value="chinese">🇨🇳 中文</option>
                 <option value="english">🇺🇸 英文</option>
             </select>
@@ -72,8 +92,6 @@
         </div>
         <audio id="audio-player" controls></audio>
-        <h3>📝 转换结果：</h3>
         <textarea id="result-area" placeholder="结果将显示在这里..."></textarea>
     </div>
@@ -84,111 +102,108 @@
         env.useBrowserCache = true;
         // DOM 元素
         const dropZone = document.getElementById('drop-zone');
         const fileInput = document.getElementById('file-upload');
-        const statusEl = document.getElementById('status');
         const runBtn = document.getElementById('run-btn');
-        const audioPlayer = document.getElementById('audio-player');
         const resultArea = document.getElementById('result-area');
         const langSelect = document.getElementById('language-select');
         let transcriber = null;
-        let currentFile = null; // 存储当前待处理的文件
-        // --- 允许的文件后缀列表 ---
         const ALLOWED_EXTENSIONS = ['mp3', 'wav', 'm4a', 'mp4', 'mpeg', 'ogg', 'flac'];
-        // 1. 初始化模型
         async function initModel() {
-            statusEl.innerText = "⏳ 正在加载 Whisper 模型...";
             try {
-                transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
-                statusEl.innerText = "✅ 模型就绪！请拖入或选择音频。";
                 statusEl.className = "success";
             } catch (err) {
                 statusEl.innerText = "❌ 模型加载失败: " + err.message;
-                statusEl.className = "error";
             }
         }
-        // --- 核心逻辑：统一处理文件的函数 ---
         function handleFile(file) {
-            // A. 校验逻辑 (Validation)
-            const fileName = file.name.toLowerCase();
-            const ext = fileName.split('.').pop();
             if (!ALLOWED_EXTENSIONS.includes(ext)) {
-                statusEl.innerText = `❌ 不支持的文件格式 (.${ext})。请上传音频文件。`;
-                statusEl.className = "error";
-                runBtn.disabled = true;
-                audioPlayer.style.display = 'none';
                 return;
             }
-            // B. 如果校验通过
-            currentFile = file; // 保存文件到全局变量
-            // 更新 UI
             statusEl.innerText = `📂 已加载: ${file.name}`;
-            statusEl.className = "success";
-            dropZone.innerHTML = `<p>📄 ${file.name}</p><span>点击更换文件</span>`;
-            // 显示播放器
             const url = URL.createObjectURL(file);
             audioPlayer.src = url;
             audioPlayer.style.display = 'block';
-            // 激活按钮 (前提是模型加载完了)
             if (transcriber) runBtn.disabled = false;
-            resultArea.value = "";
         }
-        // --- 2. 拖拽事件监听 ---
-        // 拖进来时 (Drag Over) - 阻止默认行为并改变样式
         dropZone.addEventListener('dragover', (e) => {
-            e.preventDefault(); // 必须阻止，否则浏览器会直接打开文件
             dropZone.classList.add('drag-over');
-            dropZone.querySelector('p').innerText = "👇 松手上传";
         });
-        // 拖出去时 (Drag Leave) - 恢复样式
         dropZone.addEventListener('dragleave', (e) => {
             e.preventDefault();
             dropZone.classList.remove('drag-over');
-            if(!currentFile) dropZone.querySelector('p').innerText = "☁️ 把文件拖到这里";
         });
-        // 松手时 (Drop) - 获取文件
         dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
             dropZone.classList.remove('drag-over');
-            // 获取拖入的文件
-            if (e.dataTransfer.files.length > 0) {
-                handleFile(e.dataTransfer.files[0]);
-            }
         });
-        // --- 3. 点击事件 (保留原有的点击选择功能) ---
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                handleFile(e.target.files[0]);
-            }
         });
-        // --- 4. 开始转换 ---
         runBtn.addEventListener('click', async () => {
             if (!currentFile) return;
             runBtn.disabled = true;
             statusEl.innerText = "🚀 正在转换中... (请勿关闭页面)";
             const startTime = performance.now();
             try {
                 const url = URL.createObjectURL(currentFile);
                 const output = await transcriber(url, {
                     chunk_length_s: 30,
                     stride_length_s: 5,
@@ -204,8 +219,11 @@
             } catch (err) {
                 console.error(err);
-                statusEl.innerText = "❌ 转换出错: " + err.message;
             } finally {
                 runBtn.disabled = false;
             }
         });

 <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, BlinkMacSystemFont, "Segoe UI", Roboto, 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 {
+            width: 100% !important; /* 充满 */
+            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: progress-bar-stripes 1s linear infinite;
         }
+        @keyframes progress-bar-stripes {
+            0% { background-position: 1rem 0; }
+            100% { background-position: 0 0; }
+        }
+        /* 拖拽区域 */
+        #drop-zone {
+            border: 2px dashed #ccc; border-radius: 10px; padding: 40px 20px;
+            text-align: center; cursor: pointer; transition: all 0.3s ease; background: #fafafa; margin-bottom: 20px;
+        }
+        #drop-zone.drag-over { border-color: #007bff; background-color: #eef6ff; transform: scale(1.02); }
         #file-upload { display: none; }
         /* 其他控件 */
         .controls { display: flex; gap: 10px; align-items: center; margin-bottom: 15px; }
         select { padding: 8px; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; }
+        button { background: #000; color: #fff; border: none; padding: 10px 25px; border-radius: 6px; cursor: pointer; font-weight: bold; }
         button:disabled { background: #ccc; cursor: not-allowed; }
+        #status { margin-bottom: 10px; font-weight: 500; font-size: 0.95em;}
+        #result-area { width: 100%; height: 200px; padding: 15px; border: 1px solid #ddd; border-radius: 6px; font-family: monospace; resize: vertical; box-sizing: border-box; background: #fdfdfd; margin-top: 15px;}
+        #audio-player { width: 100%; display: none; }
     </style>
 </head>
 <body>
+    <h1>🎙️ Web AI (带进度条版)</h1>
     <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 class="controls">
             <select id="language-select">
+                <option value="auto">🌐 自动识别</option>
                 <option value="chinese">🇨🇳 中文</option>
                 <option value="english">🇺🇸 英文</option>
             </select>
         </div>
         <audio id="audio-player" controls></audio>
         <textarea id="result-area" placeholder="结果将显示在这里..."></textarea>
     </div>
         env.useBrowserCache = true;
         // DOM 元素
+        const statusEl = document.getElementById('status');
+        const progressWrapper = document.getElementById('progress-wrapper');
+        const progressBar = document.getElementById('progress-bar');
         const dropZone = document.getElementById('drop-zone');
         const fileInput = document.getElementById('file-upload');
         const runBtn = document.getElementById('run-btn');
         const resultArea = document.getElementById('result-area');
+        const audioPlayer = document.getElementById('audio-player');
         const langSelect = document.getElementById('language-select');
         let transcriber = null;
+        let currentFile = null;
         const ALLOWED_EXTENSIONS = ['mp3', 'wav', 'm4a', 'mp4', 'mpeg', 'ogg', 'flac'];
+        // --- 1. 初始化模型 (带进度回调) ---
         async function initModel() {
+            statusEl.innerText = "⏳ 正在连接 Hugging Face 下载模型...";
+            progressWrapper.style.display = 'block'; // 显示进度条容器
             try {
+                transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny', {
+                    // 🆕 关键点：这里监听下载进度
+                    progress_callback: (data) => {
+                        if (data.status === 'progress') {
+                            const percent = Math.round((data.loaded / data.total) * 100);
+                            progressBar.style.width = percent + '%';
+                            progressBar.innerText = percent + '%';
+                            if (percent === 100) {
+                                statusEl.innerText = `⏳ 下载完成 (${data.file})，正在加载...`;
+                            }
+                        }
+                    }
+                });
+                // 加载完成后
+                statusEl.innerText = "✅ 模型就绪！请拖入文件。";
+                progressBar.style.width = '0%'; // 重置供下次使用
+                progressBar.innerText = '';
+                progressWrapper.style.display = 'none'; // 暂时隐藏
                 statusEl.className = "success";
             } catch (err) {
                 statusEl.innerText = "❌ 模型加载失败: " + err.message;
             }
         }
+        // --- 2. 文件处理 ---
         function handleFile(file) {
+            const ext = file.name.split('.').pop().toLowerCase();
             if (!ALLOWED_EXTENSIONS.includes(ext)) {
+                statusEl.innerText = `❌ 不支持格式 .${ext}`;
                 return;
             }
+            currentFile = file;
             statusEl.innerText = `📂 已加载: ${file.name}`;
+            dropZone.innerHTML = `<p>📄 ${file.name}</p>`;
             const url = URL.createObjectURL(file);
             audioPlayer.src = url;
             audioPlayer.style.display = 'block';
             if (transcriber) runBtn.disabled = false;
+            resultArea.value = "";
         }
+        // --- 3. 拖拽逻辑 ---
         dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
             dropZone.classList.add('drag-over');
         });
         dropZone.addEventListener('dragleave', (e) => {
             e.preventDefault();
             dropZone.classList.remove('drag-over');
         });
         dropZone.addEventListener('drop', (e) => {
             e.preventDefault();
             dropZone.classList.remove('drag-over');
+            if (e.dataTransfer.files.length) handleFile(e.dataTransfer.files[0]);
         });
         dropZone.addEventListener('click', () => fileInput.click());
         fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length) handleFile(e.target.files[0]);
         });
+        // --- 4. 转换逻辑 (带动画条) ---
         runBtn.addEventListener('click', async () => {
             if (!currentFile) return;
             runBtn.disabled = true;
             statusEl.innerText = "🚀 正在转换中... (请勿关闭页面)";
+            // 🆕 开启进度条动画 (因为推理很难算具体的百分比，所以用条纹动画)
+            progressWrapper.style.display = 'block';
+            progressBar.classList.add('processing'); // 加上流动条纹类
+            progressBar.innerText = "Processing...";
             const startTime = performance.now();
             try {
                 const url = URL.createObjectURL(currentFile);
                 const output = await transcriber(url, {
                     chunk_length_s: 30,
                     stride_length_s: 5,
             } catch (err) {
                 console.error(err);
+                statusEl.innerText = "❌ 出错: " + err.message;
             } finally {
+                // 停止动画，隐藏进度条
+                progressBar.classList.remove('processing');
+                progressWrapper.style.display = 'none';
                 runBtn.disabled = false;
             }
         });