Create static/app.js

static/app.js

@@ -0,0 +1,347 @@
+let currentResults = null;
+let currentBatchResults = null;
+
+// 标签页切换
+function switchTab(tabName) {
+    // 隐藏所有标签内容
+    document.querySelectorAll('.tab-content').forEach(tab => {
+        tab.classList.remove('active');
+    });
+    document.querySelectorAll('.tab-button').forEach(btn => {
+        btn.classList.remove('active');
+    });
+    
+    // 显示选中的标签
+    document.getElementById(tabName + '-tab').classList.add('active');
+    event.target.classList.add('active');
+    
+    // 隐藏结果区域
+    document.getElementById('results').style.display = 'none';
+    document.getElementById('batchResults').style.display = 'none';
+}
+
+// 单个基因设计
+document.getElementById('primerForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    
+    const geneSymbol = document.getElementById('geneSymbol').value.trim();
+    const species = document.getElementById('species').value;
+    
+    if (!geneSymbol) {
+        alert('请输入基因名称');
+        return;
+    }
+    
+    // 显示加载状态
+    document.getElementById('loading').style.display = 'block';
+    document.getElementById('results').style.display = 'none';
+    document.getElementById('batchResults').style.display = 'none';
+    document.getElementById('submitBtn').disabled = true;
+    
+    try {
+        const response = await fetch('/design_primers', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                gene_symbol: geneSymbol,
+                species: species
+            })
+        });
+        
+        const data = await response.json();
+        
+        if (data.error) {
+            showError(data.error);
+        } else {
+            currentResults = [{ gene: geneSymbol, status: 'success', data: data }];
+            showResults(data);
+        }
+    } catch (error) {
+        showError('网络错误，请检查连接后重试');
+    } finally {
+        document.getElementById('loading').style.display = 'none';
+        document.getElementById('submitBtn').disabled = false;
+    }
+});
+
+// 批量基因设计
+document.getElementById('batchForm').addEventListener('submit', async function(e) {
+    e.preventDefault();
+    
+    const batchGenesText = document.getElementById('batchGenes').value.trim();
+    const species = document.getElementById('batchSpecies').value;
+    
+    if (!batchGenesText) {
+        alert('请输入基因列表');
+        return;
+    }
+    
+    // 解析基因列表
+    const geneList = parseGeneList(batchGenesText);
+    
+    if (geneList.length === 0) {
+        alert('未找到有效的基因名称');
+        return;
+    }
+    
+    // 显示进度条
+    document.getElementById('batchProgress').style.display = 'block';
+    document.getElementById('results').style.display = 'none';
+    document.getElementById('batchResults').style.display = 'none';
+    document.getElementById('batchSubmitBtn').disabled = true;
+    
+    try {
+        const response = await fetch('/batch_design_primers', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                gene_list: geneList,
+                species: species
+            })
+        });
+        
+        const data = await response.json();
+        currentBatchResults = data.results;
+        showBatchResults(data.results);
+        
+    } catch (error) {
+        showError('网络错误，请检查连接后重试');
+    } finally {
+        document.getElementById('batchProgress').style.display = 'none';
+        document.getElementById('batchSubmitBtn').disabled = false;
+    }
+});
+
+function parseGeneList(text) {
+    // 支持多种分隔符：换行、逗号、空格
+    return text
+        .split(/[\n,\s]+/)
+        .map(gene => gene.trim())
+        .filter(gene => gene.length > 0);
+}
+
+function showError(message) {
+    document.getElementById('results').innerHTML = `
+        <div class="error">
+            ❌ ${message}
+        </div>
+    `;
+    document.getElementById('results').style.display = 'block';
+}
+
+function showResults(data) {
+    const geneInfo = data.gene_info;
+    const primers = data.primers;
+    
+    // 显示基因信息
+    document.getElementById('geneInfo').innerHTML = `
+        <h3>📋 基因信息</h3>
+        <p><strong>基因名称:</strong> ${geneInfo.symbol}</p>
+        <p><strong>RefSeq ID:</strong> ${geneInfo.nm_id}</p>
+        <p><strong>外显子交界点:</strong> ${geneInfo.junctions.join(', ')}</p>
+    `;
+    
+    // 显示引物结果
+    let primerHtml = '<h3>🎯 推荐引物序列</h3>';
+    
+    primers.forEach(primer => {
+        primerHtml += `
+            <div class="primer-card">
+                <div class="primer-header">
+                    <span class="primer-id">引物对 ${primer.id}</span>
+                    <span class="product-size">${primer.product_size} bp</span>
+                </div>
+                
+                <div class="primer-sequences">
+                    <div class="sequence-box">
+                        <div class="sequence-label">正向引物 (Forward)</div>
+                        <div class="sequence">${primer.forward}</div>
+                    </div>
+                    <div class="sequence-box">
+                        <div class="sequence-label">反向引物 (Reverse)</div>
+                        <div class="sequence">${primer.reverse}</div>
+                    </div>
+                </div>
+                
+                <div class="tm-info">
+                    <span>正向Tm: ${primer.f_tm}°C</span>
+                    <span>反向Tm: ${primer.r_tm}°C</span>
+                    <span>${primer.junction_info}</span>
+                </div>
+            </div>
+        `;
+    });
+    
+    document.getElementById('primerResults').innerHTML = primerHtml;
+    document.getElementById('exportSection').style.display = 'block';
+    document.getElementById('results').style.display = 'block';
+}
+
+function showBatchResults(results) {
+    const successCount = results.filter(r => r.status === 'success').length;
+    const failedCount = results.filter(r => r.status === 'failed').length;
+    const totalPrimers = results
+        .filter(r => r.status === 'success')
+        .reduce((sum, r) => sum + r.data.primers.length, 0);
+    
+    // 显示统计信息
+    document.getElementById('resultSummary').innerHTML = `
+        <div class="summary-stats">
+            <div class="stat-item">
+                <div class="stat-number">${results.length}</div>
+                <div class="stat-label">总基因数</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">${successCount}</div>
+                <div class="stat-label">成功设计</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">${failedCount}</div>
+                <div class="stat-label">设计失败</div>
+            </div>
+            <div class="stat-item">
+                <div class="stat-number">${totalPrimers}</div>
+                <div class="stat-label">引物对总数</div>
+            </div>
+        </div>
+    `;
+    
+    // 显示失败的基因
+    const failedGenes = results.filter(r => r.status === 'failed');
+    if (failedGenes.length > 0) {
+        let failedHtml = '<div class="failed-genes"><h4>⚠️ 设计失败的基因</h4>';
+        failedGenes.forEach(gene => {
+            failedHtml += `
+                <div class="failed-gene">
+                    <strong>${gene.gene}:</strong> ${gene.error}
+                </div>
+            `;
+        });
+        failedHtml += '</div>';
+        document.getElementById('failedGenes').innerHTML = failedHtml;
+    } else {
+        document.getElementById('failedGenes').innerHTML = '';
+    }
+    
+    // 显示成功的引物结果
+    let primerHtml = '<h3>🎯 批量引物设计结果</h3>';
+    
+    results.filter(r => r.status === 'success').forEach(result => {
+        const geneInfo = result.data.gene_info;
+        const primers = result.data.primers;
+        
+        primerHtml += `<div style="margin-bottom: 40px; border: 2px solid #e1e5e9; border-radius: 8px; padding: 20px;">`;
+        primerHtml += `<h4 style="color: #4facfe; margin-bottom: 15px;">📋 ${geneInfo.symbol} (${geneInfo.nm_id})</h4>`;
+        
+        primers.forEach(primer => {
+            primerHtml += `
+                <div class="primer-card">
+                    <div class="primer-header">
+                        <span class="primer-id">引物对 ${primer.id}</span>
+                        <span class="product-size">${primer.product_size} bp</span>
+                    </div>
+                    
+                    <div class="primer-sequences">
+                        <div class="sequence-box">
+                            <div class="sequence-label">正向引物 (Forward)</div>
+                            <div class="sequence">${primer.forward}</div>
+                        </div>
+                        <div class="sequence-box">
+                            <div class="sequence-label">反向引物 (Reverse)</div>
+                            <div class="sequence">${primer.reverse}</div>
+                        </div>
+                    </div>
+                    
+                    <div class="tm-info">
+                        <span>正向Tm: ${primer.f_tm}°C</span>
+                        <span>反向Tm: ${primer.r_tm}°C</span>
+                        <span>${primer.junction_info}</span>
+                    </div>
+                </div>
+            `;
+        });
+        
+        primerHtml += '</div>';
+    });
+    
+    document.getElementById('batchPrimerResults').innerHTML = primerHtml;
+    document.getElementById('batchResults').style.display = 'block';
+}
+
+// 导出单个结果
+async function exportResults(format) {
+    if (!currentResults) {
+        alert('没有可导出的结果');
+        return;
+    }
+    
+    try {
+        const response = await fetch('/export_primers', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                format: format,
+                data: currentResults
+            })
+        });
+        
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = response.headers.get('Content-Disposition')?.split('filename=')[1] || `primers.${format}`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } else {
+            alert('导出失败，请重试');
+        }
+    } catch (error) {
+        alert('导出失败：' + error.message);
+    }
+}
+
+// 导出批量结果
+async function exportBatchResults(format) {
+    if (!currentBatchResults) {
+        alert('没有可导出的结果');
+        return;
+    }
+    
+    try {
+        const response = await fetch('/export_primers', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                format: format,
+                data: currentBatchResults
+            })
+        });
+        
+        if (response.ok) {
+            const blob = await response.blob();
+            const url = window.URL.createObjectURL(blob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = response.headers.get('Content-Disposition')?.split('filename=')[1] || `batch_primers.${format}`;
+            document.body.appendChild(a);
+            a.click();
+            window.URL.revokeObjectURL(url);
+            document.body.removeChild(a);
+        } else {
+            alert('导出失败，请重试');
+        }
+    } catch (error) {
+        alert('导出失败：' + error.message);
+    }
+}