Add application file

app.py

@@ -0,0 +1,251 @@
+"""
+DNA-Diffusion Gradio Application
+Interactive DNA sequence generation with slot machine visualization
+"""
+
+import gradio as gr
+import logging
+import json
+import os
+from typing import Dict, Any, Tuple
+import html
+
+# Configure logging
+logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(name)s - %(levelname)s - %(message)s')
+logger = logging.getLogger(__name__)
+
+# Try to import model, but allow app to run without it for UI development
+try:
+    from dna_diffusion_model import DNADiffusionModel, get_model
+    MODEL_AVAILABLE = True
+    logger.info("DNA-Diffusion model module loaded successfully")
+except ImportError as e:
+    logger.warning(f"DNA-Diffusion model not available: {e}")
+    MODEL_AVAILABLE = False
+
+# Load the HTML interface
+HTML_FILE = "dna-slot-machine.html"
+if not os.path.exists(HTML_FILE):
+    raise FileNotFoundError(f"HTML interface file '{HTML_FILE}' not found. Please ensure it exists in the same directory as app.py")
+
+with open(HTML_FILE, "r") as f:
+    SLOT_MACHINE_HTML = f.read()
+
+class DNADiffusionApp:
+    """Main application class for DNA-Diffusion Gradio interface"""
+    
+    def __init__(self):
+        self.model = None
+        self.model_loading = False
+        self.model_error = None
+        
+    def initialize_model(self):
+        """Initialize the DNA-Diffusion model"""
+        if not MODEL_AVAILABLE:
+            self.model_error = "DNA-Diffusion model module not available. Please install dependencies."
+            return
+        
+        if self.model_loading:
+            return
+        
+        self.model_loading = True
+        try:
+            logger.info("Starting model initialization...")
+            self.model = get_model()
+            logger.info("Model initialized successfully!")
+            self.model_error = None
+        except Exception as e:
+            logger.error(f"Failed to initialize model: {e}")
+            self.model_error = str(e)
+            self.model = None
+        finally:
+            self.model_loading = False
+    
+    def generate_sequence(self, cell_type: str, guidance_scale: float = 1.0) -> Tuple[str, Dict[str, Any]]:
+        """Generate a DNA sequence using the model or mock data"""
+        
+        # Use mock generation if model is not available
+        if not MODEL_AVAILABLE or self.model is None:
+            logger.warning("Using mock sequence generation")
+            import random
+            sequence = ''.join(random.choice(['A', 'T', 'C', 'G']) for _ in range(200))
+            metadata = {
+                'cell_type': cell_type,
+                'guidance_scale': guidance_scale,
+                'generation_time': 2.0,
+                'mock': True
+            }
+            # Simulate generation time
+            import time
+            time.sleep(2.0)
+            return sequence, metadata
+        
+        # Use real model
+        try:
+            result = self.model.generate(cell_type, guidance_scale)
+            return result['sequence'], result['metadata']
+        except Exception as e:
+            logger.error(f"Generation failed: {e}")
+            raise
+    
+    def handle_generation_request(self, cell_type: str, guidance_scale: float):
+        """Handle sequence generation request from Gradio"""
+        try:
+            logger.info(f"Generating sequence for cell type: {cell_type}")
+            sequence, metadata = self.generate_sequence(cell_type, guidance_scale)
+            return sequence, json.dumps(metadata)
+        
+        except Exception as e:
+            error_msg = str(e)
+            logger.error(f"Generation request failed: {error_msg}")
+            return "", json.dumps({"error": error_msg})
+
+# Create single app instance
+app = DNADiffusionApp()
+
+def create_demo():
+    """Create the Gradio demo interface"""
+    
+    # CSS to hide backend controls
+    css = """
+    #hidden-controls { display: none !important; }
+    """
+    
+    # JavaScript for handling communication between iframe and Gradio
+    js = """
+    function() {
+        console.log('Initializing DNA-Diffusion Gradio interface...');
+        
+        // Set up message listener to receive requests from iframe
+        window.addEventListener('message', function(event) {
+            console.log('Parent received message:', event.data);
+            
+            if (event.data.type === 'generate_request') {
+                console.log('Triggering generation for cell type:', event.data.cellType);
+                
+                // Update the hidden cell type input
+                const radioInputs = document.querySelectorAll('#cell-type-input input[type="radio"]');
+                radioInputs.forEach(input => {
+                    if (input.value === event.data.cellType) {
+                        input.checked = true;
+                        // Trigger change event
+                        input.dispatchEvent(new Event('change'));
+                    }
+                });
+                
+                // Small delay to ensure radio button update is processed
+                setTimeout(() => {
+                    document.querySelector('#generate-btn').click();
+                }, 100);
+            }
+        });
+        
+        // Function to send sequence to iframe
+        window.sendSequenceToIframe = function(sequence, metadata) {
+            console.log('Sending sequence to iframe:', sequence);
+            const iframe = document.querySelector('#dna-frame iframe');
+            if (iframe && iframe.contentWindow) {
+                try {
+                    const meta = JSON.parse(metadata);
+                    if (meta.error) {
+                        iframe.contentWindow.postMessage({
+                            type: 'generation_error',
+                            error: meta.error
+                        }, '*');
+                    } else {
+                        iframe.contentWindow.postMessage({
+                            type: 'sequence_generated',
+                            sequence: sequence,
+                            metadata: meta
+                        }, '*');
+                    }
+                } catch (e) {
+                    console.error('Failed to parse metadata:', e);
+                    // If parsing fails, still send the sequence
+                    iframe.contentWindow.postMessage({
+                        type: 'sequence_generated',
+                        sequence: sequence,
+                        metadata: {}
+                    }, '*');
+                }
+            } else {
+                console.error('Could not find iframe');
+            }
+        };
+    }
+    """
+    
+    with gr.Blocks(css=css, js=js, theme=gr.themes.Base()) as demo:
+        
+        # Hidden controls for backend processing
+        with gr.Column(elem_id="hidden-controls", visible=False):
+            cell_type_input = gr.Radio(
+                ["K562", "GM12878", "HepG2"],
+                value="K562",
+                label="Cell Type",
+                elem_id="cell-type-input"
+            )
+            guidance_input = gr.Slider(
+                minimum=1.0,
+                maximum=10.0,
+                value=1.0,
+                step=0.5,
+                label="Guidance Scale",
+                elem_id="guidance-input"
+            )
+            generate_btn = gr.Button("Generate", elem_id="generate-btn")
+            
+            sequence_output = gr.Textbox(label="Sequence", elem_id="sequence-output")
+            metadata_output = gr.Textbox(label="Metadata", elem_id="metadata-output")
+        
+        # Main interface - the slot machine in an iframe
+        # Escape the HTML content for srcdoc
+        escaped_html = html.escape(SLOT_MACHINE_HTML, quote=True)
+        iframe_html = f'<iframe srcdoc="{escaped_html}" style="width: 100%; height: 100vh; border: none;"></iframe>'
+        
+        html_display = gr.HTML(
+            iframe_html,
+            elem_id="dna-frame"
+        )
+        
+        # Wire up the generation
+        generate_btn.click(
+            fn=app.handle_generation_request,
+            inputs=[cell_type_input, guidance_input],
+            outputs=[sequence_output, metadata_output]
+        ).then(
+            fn=None,
+            inputs=[sequence_output, metadata_output],
+            outputs=None,
+            js="(seq, meta) => sendSequenceToIframe(seq, meta)"
+        )
+        
+        # Initialize model on load
+        demo.load(
+            fn=app.initialize_model,
+            inputs=None,
+            outputs=None
+        )
+    
+    return demo
+
+# Launch the app
+if __name__ == "__main__":
+    demo = create_demo()
+    
+    # Parse any command line arguments
+    import argparse
+    parser = argparse.ArgumentParser(description="DNA-Diffusion Gradio App")
+    parser.add_argument("--share", action="store_true", help="Create a public shareable link")
+    parser.add_argument("--port", type=int, default=7860, help="Port to run the app on")
+    parser.add_argument("--host", type=str, default="127.0.0.1", help="Host to run the app on")
+    args = parser.parse_args()
+    
+    logger.info(f"Starting DNA-Diffusion Gradio app on {args.host}:{args.port}")
+    
+    demo.launch(
+        share=args.share,
+        server_name=args.host,
+        server_port=args.port,
+        inbrowser=True
+    )

dna-slot-machine.html

@@ -0,0 +1,726 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DNA Slot Machine</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            background: #0a0a0a;
+            color: #fff;
+            font-family: 'Courier New', monospace;
+            overflow-x: hidden;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            position: relative;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                repeating-linear-gradient(
+                    0deg,
+                    transparent 0px,
+                    rgba(255,255,255,0.08) 1px,
+                    transparent 1px,
+                    transparent 2px
+                ),
+                repeating-linear-gradient(
+                    90deg,
+                    transparent 0px,
+                    rgba(0,0,0,0.05) 1px,
+                    transparent 1px,
+                    transparent 2px
+                ),
+                repeating-linear-gradient(
+                    45deg,
+                    transparent 0px,
+                    rgba(255,255,255,0.03) 1px,
+                    transparent 2px,
+                    transparent 3px
+                ),
+                repeating-linear-gradient(
+                    -45deg,
+                    transparent 0px,
+                    rgba(0,0,0,0.03) 1px,
+                    transparent 2px,
+                    transparent 3px
+                );
+            background-size: 2px 2px, 2px 2px, 3px 3px, 3px 3px;
+            pointer-events: none;
+            z-index: 1;
+            opacity: 0.8;
+            animation: staticNoise 0.1s steps(8) infinite;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: 
+                radial-gradient(circle at 17% 23%, rgba(255,255,255,0.1) 0px, transparent 1px),
+                radial-gradient(circle at 67% 71%, rgba(0,0,0,0.08) 0px, transparent 1px),
+                radial-gradient(circle at 41% 57%, rgba(255,255,255,0.06) 0px, transparent 1px),
+                radial-gradient(circle at 89% 13%, rgba(0,0,0,0.07) 0px, transparent 1px),
+                radial-gradient(circle at 23% 89%, rgba(255,255,255,0.05) 0px, transparent 1px);
+            background-size: 3px 3px, 2px 2px, 4px 4px, 2px 2px, 3px 3px;
+            pointer-events: none;
+            z-index: 1;
+            animation: staticNoise 0.15s steps(10) infinite reverse;
+        }
+
+        @keyframes staticNoise {
+            0%, 100% { transform: translate(0, 0); }
+            10% { transform: translate(-1px, -1px); }
+            20% { transform: translate(1px, 0px); }
+            30% { transform: translate(0px, 1px); }
+            40% { transform: translate(-1px, 1px); }
+            50% { transform: translate(1px, -1px); }
+            60% { transform: translate(-1px, 0px); }
+            70% { transform: translate(0px, -1px); }
+            80% { transform: translate(1px, 1px); }
+            90% { transform: translate(-1px, -1px); }
+        }
+
+        .machine-container {
+            background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
+            border-radius: 20px;
+            padding: 20px;
+            padding-right: 100px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.5), 
+                        inset 0 2px 10px rgba(255,255,255,0.1);
+            width: 95vw;
+            max-width: 1400px;
+            position: relative;
+            z-index: 2;
+        }
+
+        .title {
+            text-align: center;
+            font-size: 2.5rem;
+            margin-bottom: 20px;
+            background: linear-gradient(45deg, #00ff88, #00ffff, #ff00ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(0,255,136,0.5);
+            font-weight: bold;
+            letter-spacing: 0.1em;
+        }
+
+        .cell-type-selector {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+
+        .cell-type-label {
+            font-size: 1.2rem;
+            color: #ccc;
+        }
+
+        .radio-group {
+            display: flex;
+            gap: 20px;
+        }
+
+        .radio-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            cursor: pointer;
+            font-size: 1.1rem;
+            color: #fff;
+            transition: color 0.3s ease;
+        }
+
+        .radio-label:hover {
+            color: #00ff88;
+        }
+
+        .radio-label input[type="radio"] {
+            width: 18px;
+            height: 18px;
+            accent-color: #00ff88;
+            cursor: pointer;
+        }
+
+        .reels-container {
+            background: #000;
+            border: 3px solid #333;
+            border-radius: 10px;
+            padding: 20px;
+            max-width: 100%;
+            position: relative;
+            box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+            overflow: visible;
+        }
+
+        .reels-wrapper {
+            display: flex;
+            gap: 1px;
+            min-width: fit-content;
+            padding: 5px 0;
+            justify-content: center;
+            flex-wrap: wrap;
+            max-width: 1200px;
+            margin: 0 auto;
+        }
+
+        .reel {
+            width: 18px;
+            height: 40px;
+            background: #ffffff;
+            border: 1px solid #ddd;
+            border-radius: 2px;
+            overflow: hidden;
+            position: relative;
+            box-shadow: inset 0 0 3px rgba(0,0,0,0.1);
+        }
+
+        .reel-strip {
+            position: absolute;
+            width: 100%;
+            transition: transform 0.5s ease-out;
+        }
+
+        .nucleotide {
+            height: 40px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.9rem;
+            font-weight: bold;
+            background: #ffffff;
+        }
+
+        .nucleotide.A { color: #00ff00; }
+        .nucleotide.T { color: #ff0000; }
+        .nucleotide.C { color: #0000ff; }
+        .nucleotide.G { color: #ffa500; }
+
+        .controls {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 20px;
+            margin-top: 30px;
+        }
+
+        .spin-button {
+            background: #4a4a4a;
+            border: none;
+            padding: 20px 60px;
+            font-size: 1.5rem;
+            font-weight: bold;
+            border-radius: 50px;
+            cursor: pointer;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.5);
+            transition: all 0.3s ease;
+            color: #fff;
+            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .spin-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 20% 30%, #00ff00 0px, transparent 2px),
+                radial-gradient(circle at 80% 70%, #ff0000 0px, transparent 2px),
+                radial-gradient(circle at 50% 50%, #0000ff 0px, transparent 2px),
+                radial-gradient(circle at 30% 80%, #ffa500 0px, transparent 2px),
+                radial-gradient(circle at 70% 20%, #00ff00 0px, transparent 2px),
+                radial-gradient(circle at 10% 60%, #ff0000 0px, transparent 2px),
+                radial-gradient(circle at 90% 40%, #0000ff 0px, transparent 2px),
+                radial-gradient(circle at 40% 10%, #ffa500 0px, transparent 2px);
+            background-size: 20px 20px, 25px 25px, 30px 30px, 15px 15px,
+                            18px 18px, 22px 22px, 28px 28px, 24px 24px;
+            opacity: 0.25;
+            animation: nucleotideNoise 0.8s steps(6) infinite;
+        }
+
+        .spin-button::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-image: 
+                radial-gradient(circle at 60% 40%, #00ff00 0px, transparent 1px),
+                radial-gradient(circle at 25% 75%, #ff0000 0px, transparent 1px),
+                radial-gradient(circle at 85% 15%, #0000ff 0px, transparent 1px),
+                radial-gradient(circle at 15% 25%, #ffa500 0px, transparent 1px);
+            background-size: 10px 10px, 12px 12px, 14px 14px, 16px 16px;
+            opacity: 0.2;
+            animation: nucleotideNoise 1.2s steps(8) infinite reverse;
+        }
+
+        @keyframes nucleotideNoise {
+            0% { transform: translate(0, 0) scale(1); }
+            16% { transform: translate(-2px, 1px) scale(1.02); }
+            33% { transform: translate(1px, -2px) scale(0.98); }
+            50% { transform: translate(-1px, 2px) scale(1.01); }
+            66% { transform: translate(2px, -1px) scale(0.99); }
+            83% { transform: translate(-2px, -2px) scale(1.02); }
+            100% { transform: translate(1px, 1px) scale(1); }
+        }
+
+        .spin-button span {
+            position: relative;
+            z-index: 2;
+        }
+
+        .spin-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.6);
+            background: #5a5a5a;
+        }
+
+        .spin-button:hover::before {
+            opacity: 0.35;
+            animation-duration: 0.4s;
+        }
+
+        .spin-button:active {
+            transform: translateY(0);
+        }
+
+        .spin-button:disabled {
+            background: #444;
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        .sequence-display {
+            background: #0a0a0a;
+            border: 2px solid #333;
+            border-radius: 10px;
+            padding: 25px 30px 15px 30px;
+            font-family: 'Courier New', monospace;
+            font-size: 0.9rem;
+            letter-spacing: 1px;
+            width: 100%;
+            max-width: 1200px;
+            text-align: left;
+            word-wrap: break-word;
+            line-height: 1.5;
+            position: relative;
+            margin: 0 auto;
+        }
+
+        .sequence-display::before {
+            content: 'SYNTHETIC REGULATORY ELEMENT';
+            position: absolute;
+            top: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #0a0a0a;
+            padding: 0 15px;
+            font-size: 0.7rem;
+            color: #00ff88;
+            letter-spacing: 2px;
+            white-space: nowrap;
+        }
+
+        .info {
+            text-align: center;
+            margin-top: 20px;
+            color: #888;
+            font-size: 0.9rem;
+        }
+
+        .lab-credit {
+            text-align: center;
+            margin-top: 15px;
+            font-size: 1.1rem;
+        }
+
+        .lab-credit a {
+            color: #00ff88;
+            text-decoration: none;
+            font-weight: bold;
+            letter-spacing: 1px;
+            transition: all 0.3s ease;
+            padding: 5px 15px;
+            border: 1px solid transparent;
+            border-radius: 20px;
+        }
+
+        .lab-credit a:hover {
+            color: #fff;
+            border-color: #00ff88;
+            box-shadow: 0 0 10px rgba(0,255,136,0.5);
+            text-shadow: 0 0 5px rgba(0,255,136,0.5);
+        }
+
+        @keyframes pulse {
+            0% { opacity: 0.5; }
+            50% { opacity: 1; }
+            100% { opacity: 0.5; }
+        }
+
+        .spinning {
+            animation: pulse 0.5s infinite;
+        }
+
+        .winning-flash {
+            animation: winFlash 1s ease-out;
+        }
+
+        @keyframes winFlash {
+            0%, 100% { background-color: transparent; }
+            50% { background-color: rgba(0,255,136,0.2); }
+        }
+
+        .lever-container {
+            position: absolute;
+            right: -70px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 3;
+            width: 60px;
+            height: 200px;
+        }
+
+        .lever {
+            width: 100%;
+            height: 100%;
+            position: relative;
+            cursor: pointer;
+        }
+
+        .lever-mount {
+            position: absolute;
+            top: 90px;
+            left: -10px;
+            width: 40px;
+            height: 60px;
+            background: linear-gradient(180deg, #555, #333);
+            border-radius: 5px 0 0 5px;
+            box-shadow: 
+                0 3px 10px rgba(0,0,0,0.3),
+                inset 0 1px 2px rgba(255,255,255,0.1);
+        }
+
+        .lever-pivot {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30px;
+            height: 8px;
+            background: #888;
+            border-radius: 4px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+
+        .lever-arm {
+            position: absolute;
+            top: 40px;
+            left: 5px;
+            width: 10px;
+            height: 80px;
+            background: linear-gradient(180deg, #d0d0d0, #a0a0a0);
+            border-radius: 5px;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+            transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+        }
+
+        .lever-ball {
+            position: absolute;
+            top: -30px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            height: 60px;
+            background: radial-gradient(circle at 35% 35%, #ff8888, #ff4444, #cc0000);
+            border-radius: 50%;
+            box-shadow: 
+                0 5px 15px rgba(0,0,0,0.4),
+                inset -5px -5px 10px rgba(0,0,0,0.3),
+                inset 3px 3px 5px rgba(255,255,255,0.5);
+        }
+
+        .lever.pulled .lever-arm {
+            transform: translateY(80px);
+            height: 10px;
+        }
+
+        /* Continuous spinning animation for loading */
+        @keyframes continuousSpin {
+            from { transform: translateY(0); }
+            to { transform: translateY(-160px); }
+        }
+
+        .reel-strip.loading {
+            animation: continuousSpin 1s linear infinite;
+        }
+    </style>
+</head>
+<body>
+    <div class="machine-container">
+        <h1 class="title">DNA-DIFFUSION</h1>
+        
+        <div class="cell-type-selector">
+            <label class="cell-type-label">Cell Type-Specific Generation:</label>
+            <div class="radio-group">
+                <label class="radio-label">
+                    <input type="radio" name="cellType" value="K562" checked>
+                    <span>K562</span>
+                </label>
+                <label class="radio-label">
+                    <input type="radio" name="cellType" value="GM12878">
+                    <span>GM12878</span>
+                </label>
+                <label class="radio-label">
+                    <input type="radio" name="cellType" value="HepG2">
+                    <span>HepG2</span>
+                </label>
+            </div>
+        </div>
+        
+        <div class="reels-container" id="reelsContainer">
+            <div class="reels-wrapper" id="reelsWrapper"></div>
+            <div class="lever-container">
+                <div class="lever" id="lever">
+                    <div class="lever-mount">
+                        <div class="lever-pivot"></div>
+                    </div>
+                    <div class="lever-arm">
+                        <div class="lever-ball"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="controls">
+            <button class="spin-button" id="spinButton"><span>GENERATE</span></button>
+            <div class="sequence-display" id="sequenceDisplay">
+                Press GENERATE to create sequence
+            </div>
+        </div>
+
+        <div class="info">
+            200bp Regulatory Elements · Cell Type-Specific · Synthetic Biology
+        </div>
+        
+        <div class="lab-credit">
+            <a href="https://pinellolab.org" target="_blank" rel="noopener noreferrer">
+                Pinello Lab
+            </a>
+        </div>
+    </div>
+
+    <script>
+        const NUCLEOTIDES = ['A', 'T', 'C', 'G'];
+        const REEL_COUNT = 200;
+        let TARGET_SEQUENCE = '';
+        
+        let reels = [];
+        let isSpinning = false;
+
+        function generateRandomSequence() {
+            let sequence = '';
+            for (let i = 0; i < REEL_COUNT; i++) {
+                sequence += NUCLEOTIDES[Math.floor(Math.random() * 4)];
+            }
+            return sequence;
+        }
+
+        function createReel(index) {
+            const reel = document.createElement('div');
+            reel.className = 'reel';
+            
+            const strip = document.createElement('div');
+            strip.className = 'reel-strip';
+            
+            // Create multiple nucleotides for smooth spinning effect
+            for (let i = 0; i < 10; i++) {
+                NUCLEOTIDES.forEach(n => {
+                    const nucleotide = document.createElement('div');
+                    nucleotide.className = `nucleotide ${n}`;
+                    nucleotide.textContent = n;
+                    strip.appendChild(nucleotide);
+                });
+            }
+            
+            reel.appendChild(strip);
+            return { element: reel, strip: strip, currentPosition: 0 };
+        }
+
+        function initializeReels() {
+            const wrapper = document.getElementById('reelsWrapper');
+            wrapper.innerHTML = '';
+            reels = [];
+            
+            for (let i = 0; i < REEL_COUNT; i++) {
+                const reel = createReel(i);
+                reels.push(reel);
+                wrapper.appendChild(reel.element);
+                
+                // Set initial position to show a random nucleotide
+                const randomIndex = Math.floor(Math.random() * 4);
+                const initialOffset = -randomIndex * 40;
+                reel.strip.style.transform = `translateY(${initialOffset}px)`;
+                reel.currentPosition = randomIndex * 40;
+            }
+        }
+
+        function startContinuousSpinning() {
+            reels.forEach((reel, index) => {
+                // Add continuous spinning animation
+                reel.strip.style.transition = 'none';
+                reel.strip.classList.add('loading');
+                
+                // Add slight delay variation for visual effect
+                const delay = (index % 10) * 0.1;
+                reel.strip.style.animationDelay = `${delay}s`;
+            });
+        }
+
+        function stopAndShowSequence(sequence) {
+            TARGET_SEQUENCE = sequence;
+            
+            reels.forEach((reel, index) => {
+                // Remove continuous spinning
+                reel.strip.classList.remove('loading');
+                
+                // Calculate target position
+                const targetNucleotide = TARGET_SEQUENCE[index];
+                const targetIndex = NUCLEOTIDES.indexOf(targetNucleotide);
+                const finalPosition = targetIndex * 40;
+                
+                // Set up the final positioning animation
+                setTimeout(() => {
+                    reel.strip.style.transition = `transform ${1000 + index * 5}ms cubic-bezier(0.17, 0.67, 0.12, 0.99)`;
+                    reel.strip.style.transform = `translateY(${-finalPosition}px)`;
+                    reel.currentPosition = finalPosition;
+                }, index * 2);
+            });
+            
+            // Show the complete sequence after animation
+            setTimeout(() => {
+                const container = document.getElementById('reelsContainer');
+                const display = document.getElementById('sequenceDisplay');
+                const button = document.getElementById('spinButton');
+                const lever = document.getElementById('lever');
+                
+                container.classList.remove('spinning');
+                container.classList.add('winning-flash');
+                
+                display.innerHTML = `<strong>Generated Sequence:</strong><br>${TARGET_SEQUENCE}`;
+                button.disabled = false;
+                isSpinning = false;
+                
+                // Release the lever
+                lever.classList.remove('pulled');
+                
+                setTimeout(() => {
+                    container.classList.remove('winning-flash');
+                }, 1000);
+            }, 1500);
+        }
+
+        function startGeneration() {
+            if (isSpinning) return;
+            
+            isSpinning = true;
+            const button = document.getElementById('spinButton');
+            const display = document.getElementById('sequenceDisplay');
+            const container = document.getElementById('reelsContainer');
+            const lever = document.getElementById('lever');
+            
+            // Pull the lever
+            lever.classList.add('pulled');
+            
+            button.disabled = true;
+            display.textContent = 'Generating cell type-specific regulatory element...';
+            container.classList.add('spinning');
+            
+            // Start continuous spinning immediately
+            startContinuousSpinning();
+            
+            // Get selected cell type
+            const cellType = document.querySelector('input[name="cellType"]:checked').value;
+            
+            // Send request to parent window
+            window.parent.postMessage({
+                type: 'generate_request',
+                cellType: cellType
+            }, '*');
+        }
+
+        // Initialize
+        initializeReels();
+        
+        // Event listeners
+        document.getElementById('spinButton').addEventListener('click', startGeneration);
+        
+        // Lever click functionality
+        document.getElementById('lever').addEventListener('click', function() {
+            if (!isSpinning) {
+                startGeneration();
+            }
+        });
+        
+        // Listen for messages from parent window
+        window.addEventListener('message', (event) => {
+            if (event.data.type === 'sequence_generated') {
+                // Stop spinning and show the actual sequence
+                stopAndShowSequence(event.data.sequence);
+            } else if (event.data.type === 'generation_error') {
+                // Stop spinning and show error
+                reels.forEach(reel => {
+                    reel.strip.classList.remove('loading');
+                });
+                
+                const container = document.getElementById('reelsContainer');
+                const display = document.getElementById('sequenceDisplay');
+                const button = document.getElementById('spinButton');
+                const lever = document.getElementById('lever');
+                
+                container.classList.remove('spinning');
+                display.innerHTML = '<strong style="color: #F44336;">Error:</strong> ' + event.data.error;
+                button.disabled = false;
+                isSpinning = false;
+                lever.classList.remove('pulled');
+            }
+        });
+        
+        // Keyboard support
+        document.addEventListener('keydown', (e) => {
+            if (e.code === 'Space' && !isSpinning) {
+                e.preventDefault();
+                startGeneration();
+            }
+        });
+    </script>
+</body>
+</html>

dna_diffusion_model.py

@@ -0,0 +1,283 @@
+"""
+DNA-Diffusion Model Wrapper
+Singleton class to handle model loading and sequence generation
+"""
+
+import os
+import sys
+import torch
+import numpy as np
+import logging
+from typing import Optional, Dict, List
+import time
+
+logger = logging.getLogger(__name__)
+
+class DNADiffusionModel:
+    """Singleton wrapper for DNA-Diffusion model"""
+    _instance = None
+    _initialized = False
+    
+    # Cell type mapping from simple names to dataset identifiers
+    CELL_TYPE_MAPPING = {
+        'K562': 'K562_ENCLB843GMH',
+        'GM12878': 'GM12878_ENCLB441ZZZ',
+        'HepG2': 'HepG2_ENCLB029COU',
+        'hESCT0': 'hESCT0_ENCLB449ZZZ'
+    }
+    
+    def __new__(cls):
+        if cls._instance is None:
+            cls._instance = super().__new__(cls)
+        return cls._instance
+    
+    def __init__(self):
+        """Initialize the model (only runs once due to singleton pattern)"""
+        if not self._initialized:
+            self._initialize()
+            self._initialized = True
+    
+    def _initialize(self):
+        """Load model and setup components"""
+        try:
+            logger.info("Initializing DNA-Diffusion model...")
+            
+            # Add DNA-Diffusion to path
+            dna_diffusion_path = os.path.join(os.path.dirname(__file__), 'DNA-Diffusion')
+            if os.path.exists(dna_diffusion_path):
+                sys.path.insert(0, os.path.join(dna_diffusion_path, 'src'))
+            
+            # Import DNA-Diffusion components
+            from dnadiffusion.models.pretrained_unet import PretrainedUNet
+            from dnadiffusion.models.diffusion import Diffusion
+            from dnadiffusion.data.dataloader import get_dataset_for_sampling
+            
+            # Load pretrained model from HuggingFace
+            logger.info("Loading pretrained model from HuggingFace...")
+            self.model = PretrainedUNet.from_pretrained("ssenan/DNA-Diffusion")
+            
+            # Move to GPU if available
+            self.device = torch.device("cuda" if torch.cuda.is_available() else "cpu")
+            logger.info(f"Using device: {self.device}")
+            self.model = self.model.to(self.device)
+            self.model.eval()
+            
+            # Initialize diffusion sampler with the model
+            self.diffusion = Diffusion(
+                model=self.model,
+                timesteps=50,
+                beta_start=0.0001,
+                beta_end=0.2
+            )
+            
+            # Ensure output_attention is set to False initially
+            if hasattr(self.model, 'output_attention'):
+                self.model.output_attention = False
+            if hasattr(self.model.model, 'output_attention'):
+                self.model.model.output_attention = False
+            
+            # Setup dataset for sampling
+            data_path = os.path.join(dna_diffusion_path, "data/K562_hESCT0_HepG2_GM12878_12k_sequences_per_group.txt")
+            saved_data_path = os.path.join(dna_diffusion_path, "data/encode_data.pkl")
+            
+            # Get dataset info
+            train_data, val_data, cell_num_list, numeric_to_tag_dict = get_dataset_for_sampling(
+                data_path=data_path,
+                saved_data_path=saved_data_path,
+                load_saved_data=True,
+                debug=False,
+                cell_types=None  # Load all cell types
+            )
+            
+            # Store dataset info
+            self.train_data = train_data
+            self.val_data = val_data
+            self.cell_num_list = cell_num_list
+            self.numeric_to_tag_dict = numeric_to_tag_dict
+            
+            # Get available cell types
+            self.available_cell_types = [numeric_to_tag_dict[num] for num in cell_num_list]
+            logger.info(f"Available cell types: {self.available_cell_types}")
+            
+            # Warm up the model with a test generation
+            logger.info("Warming up model...")
+            self._warmup()
+            
+            logger.info("Model initialization complete!")
+            
+        except Exception as e:
+            logger.error(f"Failed to initialize model: {str(e)}")
+            self.model = None
+            self.diffusion = None
+            self.dataset = None
+            raise
+    
+    def _warmup(self):
+        """Warm up the model with a test generation"""
+        try:
+            # Generate one sequence for the first available cell type
+            if self.available_cell_types:
+                cell_type = list(self.CELL_TYPE_MAPPING.keys())[0]
+                self.generate(cell_type, guidance_scale=1.0)
+        except Exception as e:
+            logger.warning(f"Warmup generation failed: {str(e)}")
+    
+    def is_ready(self) -> bool:
+        """Check if model is loaded and ready"""
+        return self.model is not None and self.diffusion is not None and self.train_data is not None
+    
+    def generate(self, cell_type: str, guidance_scale: float = 1.0) -> Dict[str, any]:
+        """
+        Generate a DNA sequence for the specified cell type
+        
+        Args:
+            cell_type: Simple cell type name (K562, GM12878, HepG2, hESCT0)
+            guidance_scale: Guidance scale for generation (1.0-10.0)
+            
+        Returns:
+            Dict with 'sequence' (200bp string) and 'metadata'
+        """
+        if not self.is_ready():
+            raise RuntimeError("Model is not initialized")
+        
+        # Validate inputs
+        if cell_type not in self.CELL_TYPE_MAPPING:
+            raise ValueError(f"Invalid cell type: {cell_type}. Must be one of {list(self.CELL_TYPE_MAPPING.keys())}")
+        
+        if not 1.0 <= guidance_scale <= 10.0:
+            raise ValueError(f"Guidance scale must be between 1.0 and 10.0, got {guidance_scale}")
+        
+        # Map to full cell type identifier
+        full_cell_type = self.CELL_TYPE_MAPPING[cell_type]
+        
+        # Find the numeric index for this cell type
+        tag_to_numeric = {tag: num for num, tag in self.numeric_to_tag_dict.items()}
+        
+        # Find matching cell type (case-insensitive partial match)
+        cell_type_numeric = None
+        for tag, num in tag_to_numeric.items():
+            if full_cell_type.lower() in tag.lower() or tag.lower() in full_cell_type.lower():
+                cell_type_numeric = num
+                logger.info(f"Matched '{full_cell_type}' to '{tag}'")
+                break
+        
+        if cell_type_numeric is None:
+            raise ValueError(f"Cell type {full_cell_type} not found in dataset. Available: {list(self.numeric_to_tag_dict.values())}")
+        
+        try:
+            logger.info(f"Generating sequence for {cell_type} (guidance={guidance_scale})...")
+            start_time = time.time()
+            
+            # For now, use simple generation without classifier-free guidance
+            # TODO: Fix classifier-free guidance implementation
+            sequence = self._generate_simple(cell_type_numeric, guidance_scale)
+            
+            generation_time = time.time() - start_time
+            logger.info(f"Generated sequence in {generation_time:.2f}s")
+            
+            return {
+                'sequence': sequence,
+                'metadata': {
+                    'cell_type': cell_type,
+                    'full_cell_type': full_cell_type,
+                    'guidance_scale': guidance_scale,
+                    'generation_time': generation_time,
+                    'sequence_length': len(sequence)
+                }
+            }
+            
+        except Exception as e:
+            logger.error(f"Generation failed: {str(e)}")
+            raise
+    
+    def _generate_simple(self, cell_type_idx: int, guidance_scale: float) -> str:
+        """Simple generation using the diffusion model's sample method"""
+        with torch.no_grad():
+            # For guidance_scale = 1.0, use simple generation without classifier-free guidance
+            if guidance_scale == 1.0:
+                # Create initial noise
+                img = torch.randn((1, 1, 4, 200), device=self.device)
+                
+                # Simple denoising loop without guidance
+                for i in reversed(range(self.diffusion.timesteps)):
+                    t = torch.full((1,), i, device=self.device, dtype=torch.long)
+                    
+                    # Get model prediction with classes
+                    classes = torch.tensor([cell_type_idx], device=self.device, dtype=torch.long)
+                    noise_pred = self.model(img, time=t, classes=classes)
+                    
+                    # Denoising step
+                    betas_t = self.diffusion.betas[i]
+                    sqrt_one_minus_alphas_cumprod_t = self.diffusion.sqrt_one_minus_alphas_cumprod[i]
+                    sqrt_recip_alphas_t = self.diffusion.sqrt_recip_alphas[i]
+                    
+                    # Predict x0
+                    model_mean = sqrt_recip_alphas_t * (img - betas_t * noise_pred / sqrt_one_minus_alphas_cumprod_t)
+                    
+                    if i == 0:
+                        img = model_mean
+                    else:
+                        posterior_variance_t = self.diffusion.posterior_variance[i]
+                        noise = torch.randn_like(img)
+                        img = model_mean + torch.sqrt(posterior_variance_t) * noise
+                
+                final_image = img[0]  # Remove batch dimension
+            else:
+                # Use the diffusion model's built-in sample method with guidance
+                # This requires proper context mask handling which is complex
+                # For now, fall back to simple generation
+                logger.warning(f"Guidance scale {guidance_scale} not fully implemented, using simple generation")
+                return self._generate_simple(cell_type_idx, 1.0)
+            
+            # Convert to sequence
+            final_array = final_image.cpu().numpy()
+            sequence = self._array_to_sequence(final_array)
+            
+            return sequence
+    
+    def _array_to_sequence(self, array: np.ndarray) -> str:
+        """Convert model output array to DNA sequence string"""
+        # Get nucleotide mapping
+        nucleotides = ['A', 'C', 'G', 'T']
+        
+        # array shape is (1, 4, 200) - channels, nucleotides, sequence_length
+        # Reshape to (4, 200) and get argmax along nucleotide dimension
+        array = array.squeeze(0)  # Remove channel dimension -> (4, 200)
+        indices = np.argmax(array, axis=0)  # Get max nucleotide for each position
+        
+        # Convert indices to nucleotides
+        sequence = ''.join(nucleotides[int(idx)] for idx in indices)
+        
+        return sequence
+    
+    def get_model_info(self) -> Dict[str, any]:
+        """Get information about the loaded model"""
+        if not self.is_ready():
+            return {'status': 'not_initialized'}
+        
+        return {
+            'status': 'ready',
+            'device': str(self.device),
+            'cell_types': list(self.CELL_TYPE_MAPPING.keys()),
+            'full_cell_types': self.available_cell_types,
+            'model_name': 'ssenan/DNA-Diffusion',
+            'sequence_length': 200,
+            'guidance_scale_range': [1.0, 10.0]
+        }
+
+
+# Convenience functions for direct usage
+_model_instance = None
+
+def get_model() -> DNADiffusionModel:
+    """Get or create the singleton model instance"""
+    global _model_instance
+    if _model_instance is None:
+        _model_instance = DNADiffusionModel()
+    return _model_instance
+
+def generate_sequence(cell_type: str, guidance_scale: float = 1.0) -> str:
+    """Generate a DNA sequence (convenience function)"""
+    model = get_model()
+    result = model.generate(cell_type, guidance_scale)
+    return result['sequence']

requirements.txt

@@ -0,0 +1,14 @@
+# Core dependencies for Gradio DNA-Diffusion app
+gradio>=4.44.0
+torch>=2.0.0
+transformers>=4.30.0
+numpy>=1.24.0
+
+# Model loading and utilities
+huggingface-hub>=0.16.0
+safetensors>=0.3.0
+accelerate>=0.20.0
+
+# Note: DNA-Diffusion itself should be installed separately using uv:
+# git clone https://github.com/pinellolab/DNA-Diffusion.git
+# cd DNA-Diffusion && uv sync