Spaces:

jscmp4
/

webgpu-smoke-test

Running

App Files Files Community

jscmp4 commited on Dec 11, 2025

Commit

290f088

verified ·

1 Parent(s): 94d9fb6

add drag func

Browse files

Files changed (1) hide show

index.html +135 -64

index.html CHANGED Viewed

@@ -3,59 +3,78 @@
 <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; }
-        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; }
-        /* 下拉菜单样式 */
-        select { padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: white; cursor: pointer; }
-        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>🎙️ 本地语音转文字 (多语言版)</h1>
-    <p>支持中文、英文自动识别，或手动指定语言。</p>
     <div class="container">
         <div id="status">🔵 正在初始化引擎...</div>
         <div class="controls">
             <select id="language-select">
-                <option value="auto">🌐 自动识别 (Auto)</option>
-                <option value="chinese">🇨🇳 中文 (Chinese)</option>
-                <option value="english">🇺🇸 英文 (English)</option>
-                <option value="japanese">🇯🇵 日文 (Japanese)</option>
-                </select>
-            <input type="file" id="file-upload" accept="audio/*,video/*,.m4a,.mp4,.wav">
             <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">
@@ -64,76 +83,128 @@
         env.allowLocalModels = false;
         env.useBrowserCache = true;
-        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');
-        const langSelect = document.getElementById('language-select'); // 获取下拉菜单
         let transcriber = null;
         async function initModel() {
             statusEl.innerText = "⏳ 正在加载 Whisper 模型...";
             try {
-                // 依然使用 tiny 模型，它本身就是 Multilingual 的
                 transcriber = await pipeline('automatic-speech-recognition', 'Xenova/whisper-tiny');
-                statusEl.innerText = "✅ 模型就绪！";
-                runBtn.disabled = false;
             } catch (err) {
                 statusEl.innerText = "❌ 模型加载失败: " + err.message;
             }
         }
-        fileInput.addEventListener('change', (e) => {
-            const file = e.target.files[0];
-            if (!file) return;
             const url = URL.createObjectURL(file);
             audioPlayer.src = url;
-            audioPlayer.style.display = 'block';
             resultArea.value = "";
-            statusEl.innerText = "📂 文件就绪";
         });
         runBtn.addEventListener('click', async () => {
-            const file = fileInput.files[0];
-            if (!file) { alert("请先选择文件！"); return; }
             runBtn.disabled = true;
-            statusEl.innerText = "🚀 正在转换中...";
             const startTime = performance.now();
             try {
-                const url = URL.createObjectURL(file);
-                // --- 关键修改点 ---
-                // 获取用户选择的语言
-                const selectedLang = langSelect.value;
-                // 配置推理参数
-                let options = {
                     chunk_length_s: 30,
                     stride_length_s: 5,
                     task: 'transcribe',
-                };
-                // 只有当用户没有选 "auto" 时，才强制指定语言
-                if (selectedLang !== 'auto') {
-                    options.language = selectedLang;
-                }
-                // ------------------
-                const output = await transcriber(url, options);
                 const endTime = performance.now();
                 const timeCost = ((endTime - startTime) / 1000).toFixed(2);
                 resultArea.value = output.text;
-                statusEl.innerText = `✅ 完成！耗时: ${timeCost}秒 (语言模式: ${selectedLang})`;
             } 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); }
+        /* --- 核心：拖拽区域样式 --- */
+        #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>
             <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">
         env.allowLocalModels = false;
         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,
                     task: 'transcribe',
+                    language: langSelect.value !== 'auto' ? langSelect.value : undefined
+                });
                 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 = "❌ 转换出错: " + err.message;
             } finally {
                 runBtn.disabled = false;
             }