Major UI improvements: interactive plots and better downloads

Prediction Plot:
- Now uses interactive Plotly (zoom, pan, hover tooltips)
- CRISPR regions highlighted with shaded areas
- Hover shows exact position and score

Downloads (appear after analysis in collapsible accordion):
- PNG and PDF plot exports
- CSV file with all position/probability data
- Summary text file with results

Embeddings Tab:
- Downloads also in collapsible accordion
- Only visible after running analysis

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

app.py

@@ -63,8 +63,8 @@ EMBEDDING_CRISPR_EXAMPLE = """GACAGGTACAAGAAGGAGTATGCATCAATGTGGTCGTGTGGAACAAACGC
 EMBEDDING_RANDOM_EXAMPLE = """ATGCGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCTGATCGATCGATCGATCGATCGTAGCTAGCTAGCTAGCTAGCTGATCGATCGATCGTAGCTAGCTAGCT"""
 
 
-def create_prediction_plot(positions, probabilities, threshold=0.3):
-    """Create a matplotlib figure showing the prediction curve."""
+def create_prediction_plot(positions, probabilities, threshold=0.3, regions=None):
+    """Create a matplotlib figure showing the prediction curve (for PNG/PDF export)."""
     fig, ax = plt.subplots(figsize=(12, 4))
 
     # Plot probability curve
@@ -92,6 +92,60 @@ def create_prediction_plot(positions, probabilities, threshold=0.3):
     return fig
 
 
+def create_interactive_prediction_plot(positions, probabilities, threshold=0.3, regions=None):
+    """Create an interactive Plotly figure showing the prediction curve."""
+    fig = go.Figure()
+
+    # Main probability curve with fill
+    fig.add_trace(go.Scatter(
+        x=positions,
+        y=probabilities,
+        mode='lines',
+        name='CRISPR Score',
+        line=dict(color='royalblue', width=1),
+        fill='tozeroy',
+        fillcolor='rgba(65, 105, 225, 0.2)',
+        hovertemplate='Position: %{x:,} bp<br>Score: %{y:.3f}<extra></extra>'
+    ))
+
+    # Add threshold line
+    fig.add_hline(
+        y=threshold,
+        line_dash="dash",
+        line_color="red",
+        annotation_text=f"Threshold ({threshold})",
+        annotation_position="top right"
+    )
+
+    # Highlight detected CRISPR regions
+    if regions:
+        for r in regions:
+            fig.add_vrect(
+                x0=r['start'], x1=r['end'],
+                fillcolor="rgba(255, 0, 0, 0.15)",
+                layer="below",
+                line_width=0,
+                annotation_text=f"Region {r['region_id']}",
+                annotation_position="top left",
+                annotation_font_size=10
+            )
+
+    fig.update_layout(
+        title=dict(text='CRISPR Array Detection Score', font=dict(size=16)),
+        xaxis_title='Position (bp)',
+        yaxis_title='CRISPR Probability',
+        yaxis=dict(range=[0, 1], gridcolor='lightgray'),
+        xaxis=dict(range=[0, max(positions) if positions else 1000], gridcolor='lightgray'),
+        hovermode='x unified',
+        showlegend=True,
+        legend=dict(yanchor="top", y=0.99, xanchor="right", x=0.99),
+        height=400,
+        plot_bgcolor='white'
+    )
+
+    return fig
+
+
 def create_embedding_heatmap(embedding, title="Sequence Embedding", cols=30):
     """Create a heatmap visualization of the embedding vector."""
     embedding = np.array(embedding)
@@ -543,23 +597,62 @@ def create_interactive_state_plot(embeddings, n_clusters=8, stride=100, use_3d=F
 
 def predict(sequence: str, stride: int = 100, threshold: float = 0.3):
     """Predict CRISPR array probability for each position."""
+    import tempfile
+    import csv
+
     sequence = strip_fasta_header(sequence.strip())
 
     is_valid, error = validate_sequence(sequence)
     if not is_valid:
-        return None, f"**Error**: {error}", None, None, None
+        return None, f"**Error**: {error}", None, None, None, None, None
 
     result = predict_sequence(sequence, stride=stride, aggregation="mean")
 
-    # Create plot
-    fig = create_prediction_plot(result.positions, result.probabilities, threshold)
+    # Detect regions first (needed for plot annotations)
+    regions = detect_crispr_regions(sequence, threshold=threshold, min_length=100, stride=stride)
 
-    # Save for download
-    png_path, pdf_path = save_figure_to_file(fig, "crispr_prediction")
+    # Create interactive Plotly plot
+    fig = create_interactive_prediction_plot(result.positions, result.probabilities, threshold, regions)
 
-    # Detect regions
-    regions = detect_crispr_regions(sequence, threshold=threshold, min_length=100, stride=stride)
+    # Create static matplotlib plot for PNG/PDF export
+    static_fig = create_prediction_plot(result.positions, result.probabilities, threshold, regions)
+    png_path, pdf_path = save_figure_to_file(static_fig, "crispr_prediction")
+    plt.close(static_fig)
 
+    # Create CSV with prediction data
+    temp_dir = tempfile.gettempdir()
+    csv_path = os.path.join(temp_dir, "crispr_predictions.csv")
+    with open(csv_path, 'w', newline='') as f:
+        writer = csv.writer(f)
+        writer.writerow(['position', 'probability', 'above_threshold'])
+        for pos, prob in zip(result.positions, result.probabilities):
+            writer.writerow([pos, f"{prob:.4f}", prob >= threshold])
+
+    # Create summary text file
+    summary_path = os.path.join(temp_dir, "crispr_summary.txt")
+    summary_text = f"""CRISPR Array Detection Summary
+==============================
+
+Sequence length: {result.sequence_length:,} bp
+Windows processed: {result.num_windows}
+Stride: {stride} bp
+Threshold: {threshold}
+
+Overall score: {result.overall_score:.4f}
+Max score: {max(result.probabilities):.4f}
+Min score: {min(result.probabilities):.4f}
+
+Detected CRISPR Regions: {len(regions)}
+"""
+    if regions:
+        summary_text += "\nRegion Details:\n"
+        for r in regions:
+            summary_text += f"  Region {r['region_id']}: {r['start']:,}-{r['end']:,} bp ({r['length']} bp), mean score: {r['mean_score']:.3f}\n"
+
+    with open(summary_path, 'w') as f:
+        f.write(summary_text)
+
+    # Markdown summary for display
     summary = f"""## Results
 
 | Metric | Value |
@@ -576,7 +669,7 @@ def predict(sequence: str, stride: int = 100, threshold: float = 0.3):
         for r in regions:
             summary += f"- **Region {r['region_id']}**: positions {r['start']:,}-{r['end']:,} ({r['length']} bp), score: {r['mean_score']:.3f}\n"
 
-    return fig, summary, regions, png_path, pdf_path
+    return fig, summary, regions, png_path, pdf_path, csv_path, summary_path
 
 
 def detect(sequence: str, threshold: float = 0.3, min_length: int = 160):
@@ -721,7 +814,7 @@ Detect CRISPR arrays in DNA sequences using a BERT-based deep learning model (43
     """)
 
     with gr.Tab("Predict & Visualize"):
-        gr.Markdown("Paste a DNA sequence to get per-position CRISPR probability scores with visualization.")
+        gr.Markdown("Paste a DNA sequence to get per-position CRISPR probability scores with interactive visualization.")
         with gr.Row():
             with gr.Column(scale=1):
                 seq_input = gr.Textbox(
@@ -752,18 +845,28 @@ Detect CRISPR arrays in DNA sequences using a BERT-based deep learning model (43
                         lambda: NON_CRISPR_EXAMPLE, outputs=seq_input
                     )
                 result_summary = gr.Markdown()
-                gr.Markdown("### Download Plot")
-                with gr.Row():
-                    pred_download_png = gr.File(label="PNG", interactive=False)
-                    pred_download_pdf = gr.File(label="PDF", interactive=False)
+                with gr.Accordion("Downloads", open=False, visible=False) as download_accordion:
+                    gr.Markdown("**Plot exports:**")
+                    with gr.Row():
+                        pred_download_png = gr.File(label="PNG", interactive=False)
+                        pred_download_pdf = gr.File(label="PDF", interactive=False)
+                    gr.Markdown("**Data exports:**")
+                    with gr.Row():
+                        pred_download_csv = gr.File(label="Predictions (CSV)", interactive=False)
+                        pred_download_summary = gr.File(label="Summary (TXT)", interactive=False)
             with gr.Column(scale=2):
-                plot_output = gr.Plot(label="CRISPR Score Profile")
+                plot_output = gr.Plot(label="CRISPR Score Profile (Interactive)")
                 regions_output = gr.JSON(label="Detected Regions", visible=False)
 
+        def predict_and_show_downloads(*args):
+            results = predict(*args)
+            # Return results plus visibility update for accordion
+            return results + (gr.update(visible=True),)
+
         predict_btn.click(
-            predict,
+            predict_and_show_downloads,
             inputs=[seq_input, stride_input, threshold_input],
-            outputs=[plot_output, result_summary, regions_output, pred_download_png, pred_download_pdf]
+            outputs=[plot_output, result_summary, regions_output, pred_download_png, pred_download_pdf, pred_download_csv, pred_download_summary, download_accordion]
         )
 
     with gr.Tab("Embeddings"):
@@ -809,10 +912,10 @@ Visualize how the model's internal representation changes across the sequence. T
 - Downstream: 2364-2964 bp (random)
 """)
                 embed_summary = gr.Markdown()
-                gr.Markdown("### Download Plot")
-                with gr.Row():
-                    download_png = gr.File(label="PNG", interactive=False)
-                    download_pdf = gr.File(label="PDF", interactive=False)
+                with gr.Accordion("Downloads", open=False, visible=False) as embed_download_accordion:
+                    with gr.Row():
+                        download_png = gr.File(label="PNG", interactive=False)
+                        download_pdf = gr.File(label="PDF", interactive=False)
             with gr.Column(scale=2):
                 embed_plot = gr.Plot(label="Embedding Visualization (Interactive)")
 
@@ -823,10 +926,14 @@ Visualize how the model's internal representation changes across the sequence. T
             outputs=[use_3d]
         )
 
+        def embed_and_show_downloads(*args):
+            results = get_embedding(*args)
+            return results + (gr.update(visible=True),)
+
         embed_btn.click(
-            get_embedding,
+            embed_and_show_downloads,
             inputs=[embed_seq, embed_mode, use_3d],
-            outputs=[embed_plot, embed_summary, download_png, download_pdf]
+            outputs=[embed_plot, embed_summary, download_png, download_pdf, embed_download_accordion]
         )
 
     with gr.Tab("About"):