Delete html_builder.py

html_builder.py

@@ -1,131 +0,0 @@
-"""
-Builds the HTML visualization block shown after a prediction — the
-sequence node grid, metrics cards, alignment view, and info/fun-fact card.
-"""
-import html
-
-
-def build_result_html(sequence, pred_str, true_ss=None, q3_score=None, description="", fun_fact=""):
-    """Renders the custom HTML result panel matching the app's design system."""
-
-    # 1. Interactive Node Grid (first 60 residues shown as scannable nodes)
-    grid_nodes_html = "<div class='sequence-grid'>"
-    display_limit = min(len(sequence), 60)
-
-    for i in range(display_limit):
-        aa = sequence[i]
-        st = pred_str[i]
-        grid_nodes_html += f"""
-        <div class="seq-node" data-state="{st}">
-            <span class="seq-aa">{aa}</span>
-            <span class="seq-state">{st}</span>
-        </div>
-        """
-    grid_nodes_html += "</div>"
-
-    if len(sequence) > 60:
-        grid_nodes_html += f"""
-        <p style='text-align: center; color: #8e8e93; font-size: 0.78rem; font-family: "JetBrains Mono"; margin-top: 12px;'>
-            + {len(sequence) - 60} additional amino acid residues sequence mapped below
-        </p>
-        """
-
-    # 2. Structure Composition Analysis
-    h_cnt, e_cnt, c_cnt = pred_str.count('H'), pred_str.count('E'), pred_str.count('C')
-    tot = max(len(pred_str), 1)
-    h_pct, e_pct, c_pct = (h_cnt / tot) * 100, (e_cnt / tot) * 100, (c_cnt / tot) * 100
-
-    # 3. Alignment Rows (Monospaced Sequence Alignment)
-    pred_align_html = ""
-    truth_align_html = ""
-
-    for i in range(len(sequence)):
-        p_char = pred_str[i]
-        if true_ss and i < len(true_ss):
-            t_char = true_ss[i]
-            if p_char == t_char:
-                pred_align_html += f"<span class='match'>{p_char}</span>"
-            else:
-                pred_align_html += f"<span class='miss'>{p_char}</span>"
-            truth_align_html += t_char
-        else:
-            pred_align_html += p_char
-
-    alignment_card_html = f"""
-    <div class="alignment-card">
-        {f'''
-        <div class="align-row">
-            <div class="row-label">Ground Truth</div>
-            <div class="row-seq">{truth_align_html}</div>
-        </div>
-        ''' if true_ss else ''}
-        <div class="align-row">
-            <div class="row-label">SERAPH Pred</div>
-            <div class="row-seq">{pred_align_html}</div>
-        </div>
-        <div class="align-row">
-            <div class="row-label">AA Sequence</div>
-            <div class="row-seq" style="color: #8e8e93;">{sequence}</div>
-        </div>
-    </div>
-    """
-
-    # 4. Metric Header Card
-    if q3_score is not None:
-        metrics_card_html = f"""
-        <div class="metrics-grid">
-            <div class="metric-card winner">
-                <div class="metric-value">{q3_score:.1f}%</div>
-                <div class="metric-label">Q3 Accuracy Score</div>
-            </div>
-            <div class="metric-card">
-                <div class="metric-value">{len(sequence)}</div>
-                <div class="metric-label">Residue Length</div>
-            </div>
-        </div>
-        """
-    else:
-        metrics_card_html = f"""
-        <div class="metrics-grid">
-            <div class="metric-card winner">
-                <div class="metric-value">{len(sequence)}</div>
-                <div class="metric-label">Residues Analyzed</div>
-            </div>
-            <div class="metric-card">
-                <div class="metric-value">{h_pct:.0f}% / {e_pct:.0f}% / {c_pct:.0f}%</div>
-                <div class="metric-label">Helix / Sheet / Coil</div>
-            </div>
-        </div>
-        """
-
-    # 5. Protein Info & Fun Fact Card
-    info_card_html = ""
-    if description or fun_fact:
-        info_card_html = f"""
-        <div style="background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px; margin-top: 20px;">
-            {f'<p style="color: #f5f5f7; font-size: 0.92rem; margin-bottom: 12px; line-height: 1.5;"><strong>Overview:</strong> {html.escape(description)}</p>' if description else ''}
-            {f'<p style="color: #38bdf8; font-size: 0.88rem; background: rgba(56, 189, 248, 0.08); border: 1px solid rgba(56, 189, 248, 0.2); padding: 12px 16px; border-radius: 10px; margin-top: 8px;"><strong>💡 Fun Fact:</strong> {html.escape(fun_fact)}</p>' if fun_fact else ''}
-        </div>
-        """
-
-    # Full Combined Output Block
-    return f"""
-    <div style="animation: fadeIn 0.5s ease-out;">
-        {metrics_card_html}
-
-        <div class="sequence-board" style="margin-bottom: 24px;">
-            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-                <span class="section-label" style="margin: 0;">Predicted Secondary Structure Mapping</span>
-                <div class="board-legend" style="margin: 0;">
-                    <div class="legend-item"><div class="legend-dot h"></div> Helix (H) {h_cnt} ({h_pct:.0f}%)</div>
-                    <div class="legend-item"><div class="legend-dot e"></div> Sheet (E) {e_cnt} ({e_pct:.0f}%)</div>
-                    <div class="legend-item"><div class="legend-dot c"></div> Coil (C) {c_cnt} ({c_pct:.0f}%)</div>
-                </div>
-            </div>
-            {grid_nodes_html}
-        </div>
-
-        {alignment_card_html}
-        {info_card_html}
-    </div>
-    """