Update app.py

app.py

@@ -186,9 +186,44 @@ def load_html_file(filename):
         encoded_content = urllib.parse.quote(content, safe='')
         return f'<iframe src="data:text/html;charset=utf-8,{encoded_content}" width="100%" height="800px" style="border: none; border-radius: 10px;"></iframe>'
     except FileNotFoundError:
-        return f'<div style="padding: 40px; text-align: center; color: #ff6b6b; background: #2a2a2a; border-radius: 10px;"><h3>⚠️ File Not Found</h3><p>{filename} not found in the current directory.</p></div>'
+        return f'''
+        <div style="
+            padding: 60px 40px; 
+            text-align: center; 
+            background: linear-gradient(135deg, rgba(253, 121, 168, 0.1), rgba(162, 155, 254, 0.1));
+            border: 2px dashed #a29bfe;
+            border-radius: 20px;
+            margin: 20px;
+        ">
+            <h3 style="color: #5f3dc4; font-size: 1.5em; margin-bottom: 10px;">
+                📁 File Not Found
+            </h3>
+            <p style="color: #6c5ce7; font-size: 1.1em;">
+                {filename} not found in the current directory.
+            </p>
+            <p style="color: #74b9ff; margin-top: 20px;">
+                Please place the file in the same directory as app.py
+            </p>
+        </div>
+        '''
     except Exception as e:
-        return f'<div style="padding: 40px; text-align: center; color: #ff6b6b; background: #2a2a2a; border-radius: 10px;"><h3>❌ Error Loading File</h3><p>{str(e)}</p></div>'
+        return f'''
+        <div style="
+            padding: 60px 40px; 
+            text-align: center; 
+            background: linear-gradient(135deg, rgba(253, 121, 168, 0.1), rgba(253, 203, 110, 0.1));
+            border: 2px dashed #fd79a8;
+            border-radius: 20px;
+            margin: 20px;
+        ">
+            <h3 style="color: #e17055; font-size: 1.5em; margin-bottom: 10px;">
+                ❌ Error Loading File
+            </h3>
+            <p style="color: #d63031; font-size: 1.1em;">
+                {str(e)}
+            </p>
+        </div>
+        '''
 
 # HTML for 3D Viewer
 HTML_3D_VIEWER = """
@@ -200,9 +235,9 @@ HTML_3D_VIEWER = """
         body {
             margin: 0;
             padding: 0;
-            background: #000;
+            background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 25%, #a29bfe 50%, #74b9ff 75%, #81ecec 100%);
             font-family: Arial, sans-serif;
-            color: #fff;
+            color: #2d3436;
             height: 100vh;
             overflow: hidden;
         }
@@ -219,43 +254,57 @@ HTML_3D_VIEWER = """
             position: absolute;
             top: 20px;
             right: 20px;
-            background: rgba(0,0,0,0.8);
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
             padding: 20px;
-            border-radius: 10px;
-            border: 2px solid #00ff88;
+            border-radius: 15px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
             max-width: 300px;
         }
         .controls-panel h3 {
-            color: #00ff88;
+            color: #5f3dc4;
             margin-top: 0;
+            font-weight: 600;
         }
         .control-btn {
-            background: #00ff88;
-            color: #000;
+            background: linear-gradient(135deg, #74b9ff, #a29bfe);
+            color: #fff;
             border: none;
-            padding: 8px 16px;
+            padding: 10px 18px;
             margin: 5px;
-            border-radius: 5px;
+            border-radius: 8px;
             cursor: pointer;
-            font-weight: bold;
+            font-weight: 600;
+            box-shadow: 0 4px 6px rgba(162, 155, 254, 0.3);
+            transition: all 0.3s ease;
         }
         .control-btn:hover {
-            background: #00cc66;
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(162, 155, 254, 0.4);
         }
         .info-display {
             position: absolute;
             bottom: 20px;
             left: 20px;
-            background: rgba(0,0,0,0.8);
-            padding: 15px;
-            border-radius: 8px;
-            border: 1px solid #0088ff;
+            background: rgba(255, 255, 255, 0.9);
+            backdrop-filter: blur(10px);
+            padding: 15px 20px;
+            border-radius: 12px;
+            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
         }
         #sequence-display {
             font-family: monospace;
-            color: #00ff88;
+            color: #5f3dc4;
             word-break: break-all;
             margin-top: 10px;
+            background: rgba(162, 155, 254, 0.1);
+            padding: 10px;
+            border-radius: 8px;
+            border: 1px solid rgba(162, 155, 254, 0.3);
+        }
+        strong {
+            color: #2d3436;
+            font-weight: 600;
         }
     </style>
 </head>
@@ -264,7 +313,7 @@ HTML_3D_VIEWER = """
         <canvas id="canvas3d"></canvas>
         
         <div class="controls-panel">
-            <h3>3D View Controls</h3>
+            <h3>🎨 3D View Controls</h3>
             <button class="control-btn" onclick="setViewMode('cartoon')">Cartoon</button>
             <button class="control-btn" onclick="setViewMode('stick')">Stick</button>
             <button class="control-btn" onclick="setViewMode('sphere')">Sphere</button>
@@ -288,21 +337,29 @@ HTML_3D_VIEWER = """
 
         function init() {
             scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x000000);
+            // Soft white background with subtle gradient
+            scene.background = new THREE.Color(0xffffff);
+            scene.fog = new THREE.Fog(0xffffff, 50, 200);
             
             camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
             camera.position.z = 50;
             
-            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas3d'), antialias: true });
+            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('canvas3d'), antialias: true, alpha: true });
             renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setClearColor(0xffffff, 0.5);
             
-            const ambientLight = new THREE.AmbientLight(0x404040, 1.5);
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
             scene.add(ambientLight);
             
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
             directionalLight.position.set(50, 50, 50);
+            directionalLight.castShadow = true;
             scene.add(directionalLight);
             
+            const directionalLight2 = new THREE.DirectionalLight(0xa29bfe, 0.3);
+            directionalLight2.position.set(-50, 50, -50);
+            scene.add(directionalLight2);
+            
             moleculeGroup = new THREE.Group();
             scene.add(moleculeGroup);
             
@@ -358,8 +415,16 @@ HTML_3D_VIEWER = """
             const tubeGeometry1 = new THREE.TubeGeometry(curve1, 100, 0.5, 8, false);
             const tubeGeometry2 = new THREE.TubeGeometry(curve2, 100, 0.5, 8, false);
             
-            const material1 = new THREE.MeshPhongMaterial({ color: 0xff0000 });
-            const material2 = new THREE.MeshPhongMaterial({ color: 0x0000ff });
+            const material1 = new THREE.MeshPhongMaterial({ 
+                color: 0x74b9ff,
+                shininess: 100,
+                specular: 0xffffff
+            });
+            const material2 = new THREE.MeshPhongMaterial({ 
+                color: 0xa29bfe,
+                shininess: 100,
+                specular: 0xffffff
+            });
             
             moleculeGroup.add(new THREE.Mesh(tubeGeometry1, material1));
             moleculeGroup.add(new THREE.Mesh(tubeGeometry2, material2));
@@ -375,7 +440,9 @@ HTML_3D_VIEWER = """
                 
                 const geometry = new THREE.CylinderGeometry(0.3, 0.3, distance, 8);
                 const material = new THREE.MeshPhongMaterial({ 
-                    color: getBaseColor(sequence[i])
+                    color: getBaseColor(sequence[i]),
+                    shininess: 100,
+                    specular: 0xffffff
                 });
                 
                 const cylinder = new THREE.Mesh(geometry, material);
@@ -393,12 +460,12 @@ HTML_3D_VIEWER = """
 
         function getBaseColor(base) {
             const colors = {
-                'A': 0xff0000,
-                'T': 0x00ff00,
-                'G': 0x0000ff,
-                'C': 0xffff00
+                'A': 0xfd79a8,  // Soft pink
+                'T': 0x81ecec,  // Soft turquoise
+                'G': 0xfdcb6e,  // Soft yellow
+                'C': 0xa29bfe   // Soft purple
             };
-            return colors[base] || 0xffffff;
+            return colors[base] || 0x74b9ff;
         }
 
         function setViewMode(mode) {
@@ -480,51 +547,151 @@ def create_demo():
     css = """
     .gradio-container {
         font-family: 'Arial', sans-serif;
-        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
+        background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 25%, #a29bfe 50%, #74b9ff 75%, #81ecec 100%);
+        min-height: 100vh;
     }
+    /* Alternative pastel gradients - uncomment to use */
+    /* Soft pink to purple: background: linear-gradient(135deg, #ffeef8 0%, #f8e1ff 25%, #e1e8ff 50%, #d4f1ff 75%, #c8f7f7 100%); */
+    /* Peach to lavender: background: linear-gradient(135deg, #fff5e6 0%, #ffe6f2 25%, #f0e6ff 50%, #e6f0ff 75%, #e6fff9 100%); */
+    /* Warm sunset: background: linear-gradient(135deg, #fff9e6 0%, #ffede6 25%, #ffe6ee 50%, #f2e6ff 75%, #e6f3ff 100%); */
+    
     .sequence-box {
         font-family: 'Courier New', monospace;
-        background-color: #1e1e1e;
-        color: #00ff88;
+        background-color: rgba(255, 255, 255, 0.8);
+        color: #2d3436;
         padding: 15px;
         border-radius: 8px;
-        border: 1px solid #00ff88;
+        border: 2px solid #74b9ff;
+        backdrop-filter: blur(10px);
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
     iframe {
         border: none;
         border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
+        background: rgba(255, 255, 255, 0.9);
     }
     .gr-button-primary {
-        background: linear-gradient(135deg, #00ff88, #0088ff) !important;
+        background: linear-gradient(135deg, #74b9ff, #a29bfe) !important;
         border: none !important;
-        color: #000 !important;
+        color: #fff !important;
+        font-weight: 600 !important;
+        box-shadow: 0 4px 6px rgba(162, 155, 254, 0.3) !important;
+        transition: all 0.3s ease !important;
+    }
+    .gr-button-primary:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 6px 12px rgba(162, 155, 254, 0.4) !important;
     }
     .gr-button-secondary {
-        background: linear-gradient(135deg, #ff6b6b, #ff9f40) !important;
+        background: linear-gradient(135deg, #fd79a8, #fdcb6e) !important;
         border: none !important;
         color: #fff !important;
+        font-weight: 600 !important;
+        box-shadow: 0 4px 6px rgba(253, 121, 168, 0.3) !important;
+        transition: all 0.3s ease !important;
+    }
+    .gr-button-secondary:hover {
+        transform: translateY(-2px) !important;
+        box-shadow: 0 6px 12px rgba(253, 121, 168, 0.4) !important;
+    }
+    /* Card styling */
+    .gr-box {
+        background: rgba(255, 255, 255, 0.7) !important;
+        backdrop-filter: blur(10px) !important;
+        border: 1px solid rgba(255, 255, 255, 0.8) !important;
+    }
+    /* Tab styling */
+    .gr-button.gr-button-sm {
+        background: rgba(255, 255, 255, 0.6) !important;
+        color: #2d3436 !important;
+        border: 1px solid rgba(255, 255, 255, 0.8) !important;
+    }
+    .gr-button.gr-button-sm.selected {
+        background: linear-gradient(135deg, #74b9ff, #a29bfe) !important;
+        color: #fff !important;
+        border: none !important;
+    }
+    /* Input fields */
+    .gr-input, .gr-dropdown {
+        background: rgba(255, 255, 255, 0.8) !important;
+        border: 2px solid #dfe6e9 !important;
+        color: #2d3436 !important;
+    }
+    .gr-input:focus, .gr-dropdown:focus {
+        border-color: #74b9ff !important;
+        box-shadow: 0 0 0 3px rgba(116, 185, 255, 0.2) !important;
+    }
+    /* Labels and text */
+    label, .gr-label {
+        color: #2d3436 !important;
+        font-weight: 600 !important;
+    }
+    /* Status text */
+    #status {
+        background: rgba(255, 255, 255, 0.8) !important;
+        color: #2d3436 !important;
     }
     """
     
     with gr.Blocks(css=css, title="DNA-Diffusion Suite", theme=gr.themes.Soft()) as demo:
         gr.Markdown(
             """
-            # 🧬 DNA-Diffusion Suite: AI-Powered Molecular Engineering
-            
-            Generate, visualize, and gamify DNA sequences with advanced AI models!
-            
-            [![GPU Status](https://img.shields.io/badge/GPU-Enabled-brightgreen)](https://huggingface.co/spaces)
+            <div style="text-align: center; padding: 20px;">
+                <h1 style="
+                    font-size: 3em; 
+                    background: linear-gradient(135deg, #5f3dc4, #74b9ff, #fd79a8);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                    background-clip: text;
+                    margin-bottom: 10px;
+                ">
+                    🧬 DNA-Diffusion Suite
+                </h1>
+                <p style="
+                    font-size: 1.2em;
+                    color: #5f3dc4;
+                    font-weight: 500;
+                ">
+                    AI-Powered Molecular Engineering with Beautiful Visualizations
+                </p>
+                <div style="margin-top: 15px;">
+                    <span style="
+                        background: linear-gradient(135deg, #74b9ff, #a29bfe);
+                        color: white;
+                        padding: 6px 16px;
+                        border-radius: 20px;
+                        font-size: 0.9em;
+                        font-weight: 600;
+                        display: inline-block;
+                        box-shadow: 0 4px 6px rgba(162, 155, 254, 0.3);
+                    ">
+                        ✨ GPU Accelerated
+                    </span>
+                </div>
+            </div>
             """
         )
         
         gpu_status = gr.Markdown(
-            f"🖥️ **GPU Status**: {'✅ Available' if SPACES_AVAILABLE else '❌ Not Available (CPU mode)'}"
+            f'''
+            <div style="
+                text-align: center; 
+                padding: 10px; 
+                background: {'linear-gradient(135deg, rgba(129, 236, 236, 0.2), rgba(116, 185, 255, 0.2))' if SPACES_AVAILABLE else 'linear-gradient(135deg, rgba(253, 121, 168, 0.2), rgba(253, 203, 110, 0.2))'};
+                border-radius: 10px;
+                margin: 10px 0;
+            ">
+                <span style="font-size: 1.1em; color: {'#00b894' if SPACES_AVAILABLE else '#e17055'};">
+                    {'🎯 GPU Accelerated' if SPACES_AVAILABLE else '💻 CPU Mode'}
+                </span>
+            </div>
+            '''
         )
         
         with gr.Tabs():
             # Tab 1: Sequence Generation
-            with gr.TabItem("🎯 Generate Sequence"):
+            with gr.TabItem("🌸 Generate Sequence"):
                 with gr.Row():
                     with gr.Column(scale=1):
                         cell_type = gr.Dropdown(
@@ -550,7 +717,7 @@ def create_demo():
                         )
                         
                         generate_btn = gr.Button(
-                            "🚀 Generate Sequence",
+                            "✨ Generate Sequence",
                             variant="primary",
                             size="lg"
                         )
@@ -568,10 +735,10 @@ def create_demo():
                         )
             
             # Tab 2: 3D Visualization
-            with gr.TabItem("🔬 3D Structure"):
+            with gr.TabItem("🔮 3D Structure"):
                 with gr.Row():
                     with gr.Column():
-                        gr.Markdown("### 3D DNA Structure Visualization")
+                        gr.Markdown("### 🧬 3D DNA Structure Visualization")
                         gr.Markdown("The 3D viewer shows the double helix structure of your generated DNA sequence.")
                         
                         # HTML component for 3D viewer
@@ -589,8 +756,8 @@ def create_demo():
             
             # Tab 3: DNA Casino (if external HTML exists)
             with gr.TabItem("🎰 DNA Casino"):
-                gr.Markdown("### DNA Slot Machine Game")
-                gr.Markdown("Experience DNA generation as a casino game!")
+                gr.Markdown("### 🎲 DNA Slot Machine Game")
+                gr.Markdown("Experience DNA generation as a fun casino game!")
                 
                 # Load external HTML file using helper function
                 casino_html = gr.HTML(
@@ -626,7 +793,7 @@ def create_demo():
                         )
                         
                         batch_generate_btn = gr.Button(
-                            "🚀 Generate Batch",
+                            "✨ Generate Batch",
                             variant="primary"
                         )
                     
@@ -638,7 +805,7 @@ def create_demo():
         
         status_text = gr.Textbox(
             label="Status",
-            value="Ready to generate sequences...",
+            value="🌸 Ready to generate sequences...",
             interactive=False
         )
         
@@ -650,11 +817,11 @@ def create_demo():
                 sequence = app.generate_with_gpu(cell_type, guidance_scale, enhanced)
                 analysis = app.analyze_sequence(sequence)
                 
-                status_text.value = f"✅ Successfully generated sequence for {cell_type}"
+                status_text.value = f"✨ Successfully generated sequence for {cell_type}"
                 return sequence, analysis, status_text.value
                 
             except Exception as e:
-                error_msg = f"❌ Error: {str(e)}"
+                error_msg = f"⚠️ Error: {str(e)}"
                 logger.error(error_msg)
                 return "", {}, error_msg
         
@@ -674,7 +841,7 @@ def create_demo():
         
         def generate_batch(cell_types, count):
             if not cell_types:
-                return None, "❌ Please select at least one cell type"
+                return None, "⚠️ Please select at least one cell type"
             
             try:
                 status_text.value = "🔄 Generating batch on GPU..."
@@ -693,11 +860,11 @@ def create_demo():
                         analysis['melting_temp']
                     ])
                 
-                status_text.value = f"✅ Generated {len(results)} sequences"
+                status_text.value = f"✨ Generated {len(results)} sequences"
                 return results, status_text.value
                 
             except Exception as e:
-                error_msg = f"❌ Error: {str(e)}"
+                error_msg = f"⚠️ Error: {str(e)}"
                 logger.error(error_msg)
                 return None, error_msg
         
@@ -730,10 +897,10 @@ def create_demo():
         # Casino sequence analysis
         def analyze_casino_sequence(seq):
             if not seq:
-                return {}, "❌ No sequence to analyze"
+                return {}, "⚠️ No sequence to analyze"
             
             analysis = app.analyze_sequence(seq)
-            return analysis, "✅ Casino sequence analyzed"
+            return analysis, "✨ Casino sequence analyzed"
         
         try:
             analyze_casino_btn.click(