feat: add project management page

frontend/app.js

@@ -7,30 +7,39 @@ let selectedEntity = null;
 
 // Init
 document.addEventListener('DOMContentLoaded', () => {
-    initApp();
+    const isWorkbench = window.location.pathname.includes('workbench');
+    if (isWorkbench) {
+        initWorkbench();
+    }
 });
 
-// Initialize app - load projects
+// Initialize workbench
-async function initApp() {
+async function initWorkbench() {
-    try {
+    const projectId = localStorage.getItem('currentProject');
-        const projects = await fetchProjects();
+    if (!projectId) {
-        if (projects.length === 0) {
+        window.location.href = '/';
-            // Create default project
-            await createProject('默认项目', '自动创建的默认项目');
-            location.reload();
         return;
     }
     
-        currentProject = projects[0];
+    try {
-        renderProjectSelector(projects);
+        const projects = await fetchProjects();
-        initUpload();
+        currentProject = projects.find(p => p.id === projectId);
         
-        // Load existing entities for this project
+        if (!currentProject) {
+            localStorage.removeItem('currentProject');
+            window.location.href = '/';
+            return;
+        }
+        
+        const nameEl = document.getElementById('projectName');
+        if (nameEl) nameEl.textContent = currentProject.name;
+        
+        initUpload();
         await loadProjectEntities();
         
     } catch (err) {
         console.error('Init failed:', err);
-        alert('加载失败，请刷新重试');
+        alert('加载失败，请返回项目列表');
     }
 }
 
@@ -41,16 +50,6 @@ async function fetchProjects() {
     return await res.json();
 }
 
-async function createProject(name, description) {
-    const res = await fetch(`${API_BASE}/projects`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ name, description })
-    });
-    if (!res.ok) throw new Error('Failed to create project');
-    return await res.json();
-}
-
 async function uploadAudio(file) {
     const formData = new FormData();
     formData.append('file', file);
@@ -70,7 +69,6 @@ async function loadProjectEntities() {
         if (!res.ok) return;
         const entities = await res.json();
         
-        // Convert to currentData format
         currentData = {
             transcript_id: 'project_view',
             project_id: currentProject.id,
@@ -93,30 +91,7 @@ async function loadProjectEntities() {
     }
 }
 
-// Render project selector
+// Render transcript
-function renderProjectSelector(projects) {
-    // Simple project selector in header
-    const header = document.querySelector('.header');
-    const selector = document.createElement('select');
-    selector.style.cssText = 'background:#222;color:#fff;border:1px solid #333;padding:4px 12px;border-radius:4px;margin-left:20px;';
-    
-    projects.forEach(p => {
-        const opt = document.createElement('option');
-        opt.value = p.id;
-        opt.textContent = p.name;
-        if (p.id === currentProject.id) opt.selected = true;
-        selector.appendChild(opt);
-    });
-    
-    selector.onchange = (e) => {
-        currentProject = projects.find(p => p.id === e.target.value);
-        loadProjectEntities();
-    };
-    
-    header.appendChild(selector);
-}
-
-// Render transcript with entity highlighting
 function renderTranscript() {
     const container = document.getElementById('transcriptContent');
     if (!container || !currentData || !currentData.segments) return;
@@ -130,7 +105,6 @@ function renderTranscript() {
         
         let text = seg.text;
         const entities = findEntitiesInSegment(seg, idx);
-        
         entities.sort((a, b) => b.start - a.start);
         
         entities.forEach(ent => {
@@ -149,7 +123,6 @@ function renderTranscript() {
     });
 }
 
-// Find entities within a segment
 function findEntitiesInSegment(seg, segIndex) {
     if (!currentData || !currentData.entities) return [];
     
@@ -167,7 +140,7 @@ function findEntitiesInSegment(seg, segIndex) {
     }));
 }
 
-// Render D3 force-directed graph
+// Render D3 graph
 function renderGraph() {
     const svg = d3.select('#graph-svg');
     svg.selectAll('*').remove();
@@ -318,21 +291,36 @@ window.selectEntity = function(entityId) {
     console.log('Selected:', entity.name);
 };
 
+// Show/hide upload
+window.showUpload = function() {
+    const el = document.getElementById('uploadOverlay');
+    if (el) el.classList.add('show');
+};
+
+window.hideUpload = function() {
+    const el = document.getElementById('uploadOverlay');
+    if (el) el.classList.remove('show');
+};
+
 // Upload handling
 function initUpload() {
     const input = document.getElementById('fileInput');
     const overlay = document.getElementById('uploadOverlay');
     
+    if (!input) return;
+    
     input.addEventListener('change', async (e) => {
         if (!e.target.files.length) return;
         
         const file = e.target.files[0];
+        if (overlay) {
             overlay.innerHTML = `
                 <div style="text-align:center;">
                     <h2>正在分析...</h2>
                     <p style="color:#666;margin-top:10px;">${file.name}</p>
                 </div>
             `;
+        }
         
         try {
             const result = await uploadAudio(file);
@@ -342,10 +330,11 @@ function initUpload() {
             renderGraph();
             renderEntityList();
             
-            overlay.classList.add('hidden');
+            if (overlay) overlay.classList.remove('show');
             
         } catch (err) {
             console.error('Upload failed:', err);
+            if (overlay) {
                 overlay.innerHTML = `
                     <div style="text-align:center;">
                         <h2 style="color:#ff6b6b;">分析失败</h2>
@@ -354,5 +343,6 @@ function initUpload() {
                     </div>
                 `;
             }
+        }
     });
 }

frontend/index.html

@@ -3,206 +3,302 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>InsightFlow - 知识工作台</title>
+    <title>InsightFlow - 项目管理</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         body {
             font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
             background: #0a0a0a;
             color: #e0e0e0;
-            height: 100vh;
+            min-height: 100vh;
-            overflow: hidden;
         }
         .header {
-            height: 50px;
+            height: 60px;
             background: #111;
             border-bottom: 1px solid #222;
             display: flex;
             align-items: center;
-            padding: 0 20px;
+            padding: 0 40px;
             justify-content: space-between;
         }
         .header h1 {
-            font-size: 1.2rem;
+            font-size: 1.5rem;
             background: linear-gradient(90deg, #00d4ff, #7b2cbf);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
-        .main {
+        .container {
-            display: flex;
+            max-width: 1200px;
-            height: calc(100vh - 50px);
+            margin: 0 auto;
+            padding: 40px;
         }
-        .editor-panel {
+        .toolbar {
-            width: 50%;
-            border-right: 1px solid #222;
-            display: flex;
-            flex-direction: column;
-        }
-        .panel-header {
-            padding: 12px 20px;
-            background: #141414;
-            border-bottom: 1px solid #222;
-            font-size: 0.9rem;
-            color: #888;
             display: flex;
             justify-content: space-between;
             align-items: center;
+            margin-bottom: 30px;
         }
-        .transcript-content {
+        .toolbar h2 {
-            flex: 1;
+            font-size: 1.2rem;
-            padding: 20px;
+            color: #888;
-            overflow-y: auto;
-            line-height: 1.8;
-            font-size: 1rem;
-        }
-        .segment {
-            margin-bottom: 16px;
-            padding: 12px;
-            background: #141414;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        .segment:hover {
-            background: #1a1a1a;
-        }
-        .speaker {
-            color: #00d4ff;
-            font-weight: 600;
-            font-size: 0.85rem;
-            margin-bottom: 4px;
-        }
-        .segment-text {
-            color: #e0e0e0;
-        }
-        .entity {
-            background: rgba(123, 44, 191, 0.3);
-            border-bottom: 2px solid #7b2cbf;
-            padding: 0 4px;
-            border-radius: 3px;
-            cursor: pointer;
-        }
-        .entity:hover {
-            background: rgba(123, 44, 191, 0.5);
-        }
-        .graph-panel {
-            width: 50%;
-            display: flex;
-            flex-direction: column;
-        }
-        #graph-svg {
-            flex: 1;
-            background: #0a0a0a;
-        }
-        .entity-list {
-            height: 200px;
-            border-top: 1px solid #222;
-            background: #111;
-            padding: 16px;
-            overflow-y: auto;
-        }
-        .entity-item {
-            display: flex;
-            align-items: center;
-            padding: 8px 12px;
-            background: #1a1a1a;
-            border-radius: 6px;
-            margin-bottom: 8px;
-            cursor: pointer;
-        }
-        .entity-item:hover {
-            background: #222;
-        }
-        .entity-type-badge {
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 0.7rem;
-            font-weight: 600;
-            margin-right: 12px;
-            text-transform: uppercase;
-        }
-        .type-project { background: #7b2cbf; }
-        .type-tech { background: #00d4ff; color: #000; }
-        .type-person { background: #ff6b6b; }
-        .type-org { background: #4ecdc4; color: #000; }
-        .type-other { background: #666; }
-        .upload-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0,0,0,0.95);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 2000;
-        }
-        .upload-box {
-            border: 2px dashed #333;
-            border-radius: 16px;
-            padding: 60px;
-            text-align: center;
-        }
-        .upload-box:hover {
-            border-color: #00d4ff;
         }
         .btn {
             background: linear-gradient(90deg, #00d4ff, #7b2cbf);
             color: white;
             border: none;
-            padding: 12px 32px;
+            padding: 12px 24px;
             border-radius: 8px;
-            font-size: 1rem;
+            font-size: 0.95rem;
             cursor: pointer;
-            margin-top: 20px;
+            display: flex;
+            align-items: center;
+            gap: 8px;
         }
         .btn:hover {
             opacity: 0.9;
         }
-        .hidden { display: none !important; }
+        .project-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+            gap: 20px;
+        }
+        .project-card {
+            background: #141414;
+            border: 1px solid #222;
+            border-radius: 12px;
+            padding: 24px;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+        .project-card:hover {
+            border-color: #00d4ff;
+            transform: translateY(-2px);
+        }
+        .project-card h3 {
+            font-size: 1.1rem;
+            margin-bottom: 8px;
+            color: #fff;
+        }
+        .project-card p {
+            color: #666;
+            font-size: 0.9rem;
+            line-height: 1.5;
+            margin-bottom: 16px;
+        }
+        .project-meta {
+            display: flex;
+            gap: 16px;
+            font-size: 0.8rem;
+            color: #888;
+        }
+        .project-meta span {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+        .empty-state {
+            text-align: center;
+            padding: 80px 20px;
+        }
+        .empty-state h3 {
+            color: #666;
+            margin-bottom: 20px;
+        }
+        /* Modal */
+        .modal-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.8);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 1000;
+        }
+        .modal-overlay.show {
+            display: flex;
+        }
+        .modal {
+            background: #1a1a1a;
+            border-radius: 12px;
+            padding: 32px;
+            width: 100%;
+            max-width: 480px;
+        }
+        .modal h3 {
+            margin-bottom: 20px;
+        }
+        .form-group {
+            margin-bottom: 20px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 8px;
+            color: #888;
+            font-size: 0.9rem;
+        }
+        .form-group input,
+        .form-group textarea {
+            width: 100%;
+            padding: 12px;
+            background: #0a0a0a;
+            border: 1px solid #333;
+            border-radius: 8px;
+            color: #fff;
+            font-size: 0.95rem;
+        }
+        .form-group input:focus,
+        .form-group textarea:focus {
+            outline: none;
+            border-color: #00d4ff;
+        }
+        .modal-actions {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+        }
+        .btn-secondary {
+            background: transparent;
+            border: 1px solid #444;
+            color: #888;
+            padding: 12px 24px;
+            border-radius: 8px;
+            cursor: pointer;
+        }
+        .btn-secondary:hover {
+            border-color: #666;
+            color: #fff;
+        }
     </style>
 </head>
 <body>
     <div class="header">
-        <h1>InsightFlow 知识工作台</h1>
+        <h1>📁 InsightFlow 项目管理</h1>
-        <span style="color:#666;font-size:0.85rem;">连接音频与知识图谱</span>
+        <a href="/workbench.html" style="color:#666;text-decoration:none;">进入工作台 →</a>
     </div>
     
-    <div class="main">
+    <div class="container">
-        <div class="editor-panel">
+        <div class="toolbar">
-            <div class="panel-header">
+            <h2>我的项目</h2>
-                <span>📄 转录文本</span>
+            <button class="btn" onclick="showModal()">
-                <span style="font-size:0.8rem;color:#666;">点击实体高亮</span>
+                <span>+</span> 新建项目
+            </button>
         </div>
-            <div class="transcript-content" id="transcriptContent">
+        
-                <p style="color:#666;text-align:center;margin-top:40px;">请上传音频文件开始分析</p>
+        <div id="projectList" class="project-grid">
+            <!-- Projects loaded here -->
         </div>
     </div>
     
-        <div class="graph-panel">
+    <!-- Create Project Modal -->
-            <div class="panel-header">
+    <div class="modal-overlay" id="modal">
-                <span>🔗 知识图谱</span>
+        <div class="modal">
-                <span style="font-size:0.8rem;color:#666;">拖拽节点查看关系</span>
+            <h3>新建项目</h3>
+            <div class="form-group">
+                <label>项目名称</label>
+                <input type="text" id="projectName" placeholder="输入项目名称">
             </div>
-            <svg id="graph-svg"></svg>
+            <div class="form-group">
-            <div class="entity-list" id="entityList">
+                <label>项目描述</label>
-                <h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">项目实体</h3>
+                <textarea id="projectDesc" rows="3" placeholder="简要描述项目内容"></textarea>
-                <p style="color:#666;font-size:0.85rem;">暂无实体数据</p>
             </div>
+            <div class="modal-actions">
+                <button class="btn-secondary" onclick="hideModal()">取消</button>
+                <button class="btn" onclick="createProject()">创建</button>
             </div>
+        </div㸾
     </div>
     
-    <div class="upload-overlay" id="uploadOverlay">
+    <script>
-        <div class="upload-box"
+        const API_BASE = '/api/v1';
-            <h2 style="margin-bottom:10px;">上传音频开始分析</h2>
-            <p style="color:#666;">支持 MP3, WAV, M4A (最大 500MB)</p>
-            <input type="file" id="fileInput" accept="audio/*" hidden>
-            <button class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
-        </div>
-    </div>
         
-    <script src="app.js"></script>
+        // Load projects on page load
+        document.addEventListener('DOMContentLoaded', loadProjects);
+        
+        async function loadProjects() {
+            try {
+                const res = await fetch(`${API_BASE}/projects`);
+                if (!res.ok) throw new Error('Failed to load');
+                const projects = await res.json();
+                
+                const container = document.getElementById('projectList');
+                
+                if (projects.length === 0) {
+                    container.innerHTML = `
+                        <div class="empty-state">
+                            <h3>暂无项目，创建第一个项目开始吧</h3>
+                            <button class="btn" onclick="showModal()">创建项目</button>
+                        </div>
+                    `;
+                    return;
+                }
+                
+                container.innerHTML = projects.map(p => `
+                    <div class="project-card" onclick="enterProject('${p.id}')">
+                        <h3>${p.name}</h3>
+                        <p>${p.description || '暂无描述'}</p>
+                        <div class="project-meta">
+                            <span>📅 ${new Date(p.created_at).toLocaleDateString()}</span>
+                        </div>
+                    </div>
+                `).join('');
+                
+            } catch (err) {
+                console.error('Load failed:', err);
+                document.getElementById('projectList').innerHTML = '
+                    <div class="empty-state"><h3>加载失败，请刷新重试</h3></div>
+                ';
+            }
+        }
+        
+        function showModal() {
+            document.getElementById('modal').classList.add('show');
+        }
+        
+        function hideModal() {
+            document.getElementById('modal').classList.remove('show');
+            document.getElementById('projectName').value = '';
+            document.getElementById('projectDesc').value = '';
+        }
+        
+        async function createProject() {
+            const name = document.getElementById('projectName').value.trim();
+            const desc = document.getElementById('projectDesc').value.trim();
+            
+            if (!name) {
+                alert('请输入项目名称');
+                return;
+            }
+            
+            try {
+                const res = await fetch(`${API_BASE}/projects`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ name, description: desc })
+                });
+                
+                if (!res.ok) throw new Error('Create failed');
+                
+                hideModal();
+                loadProjects();
+                
+            } catch (err) {
+                alert('创建失败: ' + err.message);
+            }
+        }
+        
+        function enterProject(projectId) {
+            // Store selected project and redirect to workbench
+            localStorage.setItem('currentProject', projectId);
+            window.location.href = '/workbench.html';
+        }
+        
+        // Close modal on overlay click
+        document.getElementById('modal').addEventListener('click', (e) => {
+            if (e.target.id === 'modal') hideModal();
+        });
+    </script>
 </body>
 </html>

frontend/workbench.html

@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>InsightFlow - 知识工作台</title>
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background: #0a0a0a;
+            color: #e0e0e0;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .header {
+            height: 50px;
+            background: #111;
+            border-bottom: 1px solid #222;
+            display: flex;
+            align-items: center;
+            padding: 0 20px;
+            justify-content: space-between;
+        }
+        .header h1 {
+            font-size: 1.2rem;
+            background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .header-left {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        .back-link {
+            color: #666;
+            text-decoration: none;
+            font-size: 0.9rem;
+        }
+        .back-link:hover {
+            color: #00d4ff;
+        }
+        .project-name {
+            color: #888;
+            font-size: 0.9rem;
+        }
+        .main {
+            display: flex;
+            height: calc(100vh - 50px);
+        }
+        .editor-panel {
+            width: 50%;
+            border-right: 1px solid #222;
+            display: flex;
+            flex-direction: column;
+        }
+        .panel-header {
+            padding: 12px 20px;
+            background: #141414;
+            border-bottom: 1px solid #222;
+            font-size: 0.9rem;
+            color: #888;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .transcript-content {
+            flex: 1;
+            padding: 20px;
+            overflow-y: auto;
+            line-height: 1.8;
+            font-size: 1rem;
+        }
+        .segment {
+            margin-bottom: 16px;
+            padding: 12px;
+            background: #141414;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+        .segment:hover {
+            background: #1a1a1a;
+        }
+        .speaker {
+            color: #00d4ff;
+            font-weight: 600;
+            font-size: 0.85rem;
+            margin-bottom: 4px;
+        }
+        .segment-text {
+            color: #e0e0e0;
+        }
+        .entity {
+            background: rgba(123, 44, 191, 0.3);
+            border-bottom: 2px solid #7b2cbf;
+            padding: 0 4px;
+            border-radius: 3px;
+            cursor: pointer;
+        }
+        .entity:hover {
+            background: rgba(123, 44, 191, 0.5);
+        }
+        .graph-panel {
+            width: 50%;
+            display: flex;
+            flex-direction: column;
+        }
+        #graph-svg {
+            flex: 1;
+            background: #0a0a0a;
+        }
+        .entity-list {
+            height: 200px;
+            border-top: 1px solid #222;
+            background: #111;
+            padding: 16px;
+            overflow-y: auto;
+        }
+        .entity-item {
+            display: flex;
+            align-items: center;
+            padding: 8px 12px;
+            background: #1a1a1a;
+            border-radius: 6px;
+            margin-bottom: 8px;
+            cursor: pointer;
+        }
+        .entity-item:hover {
+            background: #222;
+        }
+        .entity-type-badge {
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            margin-right: 12px;
+            text-transform: uppercase;
+        }
+        .type-project { background: #7b2cbf; }
+        .type-tech { background: #00d4ff; color: #000; }
+        .type-person { background: #ff6b6b; }
+        .type-org { background: #4ecdc4; color: #000; }
+        .type-other { background: #666; }
+        .upload-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0,0,0,0.95);
+            display: none;
+            align-items: center;
+            justify-content: center;
+            z-index: 2000;
+        }
+        .upload-overlay.show {
+            display: flex;
+        }
+        .upload-box {
+            border: 2px dashed #333;
+            border-radius: 16px;
+            padding: 60px;
+            text-align: center;
+        }
+        .upload-box:hover {
+            border-color: #00d4ff;
+        }
+        .btn {
+            background: linear-gradient(90deg, #00d4ff, #7b2cbf);
+            color: white;
+            border: none;
+            padding: 12px 32px;
+            border-radius: 8px;
+            font-size: 1rem;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+        .btn:hover {
+            opacity: 0.9;
+        }
+        .btn-small {
+            padding: 8px 16px;
+            font-size: 0.85rem;
+            margin-top: 0;
+        }
+        .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+        }
+    </style>
+</head>
+<body>
+    <div class="header">
+        <div class="header-left">
+            <a href="/" class="back-link">← 返回项目列表</a>
+            <span class="project-name" id="projectName">加载中...</span>
+        </div>
+        <button class="btn btn-small" onclick="showUpload()">+ 上传音频</button>
+    </div>
+    
+    <div class="main">
+        <div class="editor-panel">
+            <div class="panel-header">
+                <span>📄 转录文本</span>
+                <span style="font-size:0.8rem;color:#666;">点击实体高亮</span>
+            </div>
+            <div class="transcript-content" id="transcriptContent">
+                <div class="empty-state">
+                    <p style="color:#666;">暂无转录内容</p>
+                    <button class="btn" onclick="showUpload()">上传音频</button>
+                </div>
+            </div>
+        </div>
+        
+        <div class="graph-panel">
+            <div class="panel-header">
+                <span>🔗 知识图谱</span>
+                <span style="font-size:0.8rem;color:#666;">拖拽节点查看关系</span>
+            </div>
+            <svg id="graph-svg"></svg>
+            <div class="entity-list" id="entityList">
+                <h3 style="margin-bottom:12px;color:#888;font-size:0.9rem;">项目实体</h3>
+                <p style="color:#666;font-size:0.85rem;">暂无实体数据</p>
+            </div>
+        </div>
+    </div>
+    
+    <div class="upload-overlay" id="uploadOverlay">
+        <div class="upload-box">
+            <h2 style="margin-bottom:10px;">上传音频分析</h2>
+            <p style="color:#666;">支持 MP3, WAV, M4A (最大 500MB)</p>
+            <input type="file" id="fileInput" accept="audio/*" hidden>
+            <button class="btn" onclick="document.getElementById('fileInput').click()">选择文件</button>
+            <br><br>
+            <button class="btn" style="background:#333;" onclick="hideUpload()">取消</button>
+        </div>
+    </div>
+    
+    <script src="app.js"></script>
+</body>
+</html>