Update app.py

app.py

@@ -29,15 +29,15 @@ class SandboxManager:
         try:
             self.client = Client(engine)
             self.is_connected = True
-            return f"✅ Connected to: {engine}", engine
+            return f"✓ Connected to: {engine}", engine
         except Exception as e:
             self.is_connected = False
             self.current_engine = None
-            return f"❌ Connection failed to {engine}: {str(e)}", "Not connected"
+            return f"✗ Connection failed to {engine}: {str(e)}", "Not connected"
     
     def launch_sandbox(self, main_py_code, requirements_txt):
         if not self.is_connected:
-            return "❌ Not connected to backend. Please connect first.", ""
+            return "✗ Not connected to backend. Please connect first.", ""
         
         try:
             result = self.client.predict(
@@ -45,359 +45,458 @@ class SandboxManager:
                 requirements=requirements_txt,
                 api_name="/launch_sandbox"
             )
-            return f"✅ Sandbox launched successfully on {self.current_engine}!\n\nResponse: {result}", self.get_status()
+            return f"✓ Sandbox deployed successfully on {self.current_engine}\n\nResponse: {result}", self.get_status()
         except Exception as e:
-            return f"❌ Launch failed: {str(e)}", ""
+            return f"✗ Deployment failed: {str(e)}", ""
     
     def fetch_logs(self):
         if not self.is_connected:
-            return "❌ Not connected to backend"
+            return "✗ Not connected to backend"
         
         try:
             result = self.client.predict(api_name="/fetch_logs")
             timestamp = datetime.now().strftime("%H:%M:%S")
-            return f"Logs fetched at {timestamp} from {self.current_engine}:\n\n{result}"
+            return f"[{timestamp}] Logs from {self.current_engine}:\n\n{result}"
         except Exception as e:
-            return f"Failed to fetch logs: {str(e)}"
+            return f"[ERROR] Failed to fetch logs: {str(e)}"
     
     def kill_sandbox(self):
         if not self.is_connected:
-            return "❌ Not connected to backend", ""
+            return "✗ Not connected to backend", ""
         
         try:
             result = self.client.predict(api_name="/kill_sandbox")
-            return f"✅ Sandbox terminated on {self.current_engine}\n\nResponse: {result}", self.get_status()
+            return f"✓ Sandbox terminated on {self.current_engine}\n\nResponse: {result}", self.get_status()
         except Exception as e:
-            return f"❌ Kill failed: {str(e)}", ""
+            return f"✗ Termination failed: {str(e)}", ""
     
     def get_status(self):
         if not self.is_connected:
-            return "🔴 Disconnected"
+            return "OFFLINE"
         
         try:
             result = self.client.predict(api_name="/status_sandbox")
-            status_emoji = "🟢" if "running" in str(result).lower() else "🟡"
-            return f"{status_emoji} Status: {result}"
+            if "running" in str(result).lower():
+                return f"RUNNING - {result}"
+            else:
+                return f"IDLE - {result}"
         except Exception as e:
-            return f"🔴 Status check failed: {str(e)}"
+            return f"ERROR - {str(e)}"
 
 # Initialize sandbox manager
 sandbox = SandboxManager()
 
-# Sample code templates
+# Professional code templates
 SAMPLE_MAIN_PY = """#!/usr/bin/env python3
 \"\"\"
-AWS Sandbox Environment
-Python Application Template
+Sandbox Compute Environment
+Enterprise Python Application Template
 \"\"\"
 
 import os
 import sys
 import json
-from datetime import datetime
-
-def main():
-    print("AWS Sandbox Environment - Python Runtime")
-    print("=" * 50)
-    print(f"Timestamp: {datetime.now().isoformat()}")
-    print(f"Python Version: {sys.version}")
-    print(f"Working Directory: {os.getcwd()}")
-    print("=" * 50)
+import logging
+from datetime import datetime, timezone
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+def initialize_environment():
+    \"\"\"Initialize the compute environment\"\"\"
+    logger.info("Initializing sandbox environment...")
     
-    # Application logic here
-    data = {
-        "service": "aws-sandbox",
-        "status": "running",
-        "timestamp": datetime.now().isoformat(),
-        "environment": "production"
+    env_info = {
+        "timestamp": datetime.now(timezone.utc).isoformat(),
+        "python_version": sys.version,
+        "platform": os.name,
+        "working_directory": os.getcwd(),
+        "environment_variables": dict(os.environ)
     }
     
-    print("Application Output:")
-    print(json.dumps(data, indent=2))
+    logger.info(f"Environment initialized: {env_info['timestamp']}")
+    return env_info
+
+def execute_business_logic():
+    \"\"\"Main application business logic\"\"\"
+    logger.info("Executing main application logic...")
+    
+    # Example: Data processing pipeline
+    data_points = list(range(1, 101))
+    processed_data = [x ** 2 for x in data_points if x % 2 == 0]
+    
+    result = {
+        "status": "success",
+        "data_points_processed": len(processed_data),
+        "sum_of_squares": sum(processed_data),
+        "processing_time": datetime.now(timezone.utc).isoformat()
+    }
     
-    # Example computation
-    numbers = list(range(1, 11))
-    result = sum(x**2 for x in numbers)
-    print(f"\\nComputation Result: Sum of squares 1-10 = {result}")
+    logger.info(f"Processing complete: {result}")
+    return result
+
+def main():
+    \"\"\"Main application entry point\"\"\"
+    try:
+        print("=" * 60)
+        print("SANDBOX COMPUTE ENVIRONMENT - PRODUCTION RUNTIME")
+        print("=" * 60)
+        
+        # Initialize
+        env_info = initialize_environment()
+        print(f"Environment: {env_info['platform']}")
+        print(f"Python: {env_info['python_version'].split()[0]}")
+        print(f"Started: {env_info['timestamp']}")
+        
+        print("\\n" + "-" * 40)
+        print("EXECUTING APPLICATION LOGIC")
+        print("-" * 40)
+        
+        # Execute business logic
+        result = execute_business_logic()
+        
+        # Output results
+        print(f"\\nStatus: {result['status'].upper()}")
+        print(f"Data Points: {result['data_points_processed']}")
+        print(f"Computation Result: {result['sum_of_squares']}")
+        print(f"Completed: {result['processing_time']}")
+        
+        print("\\n" + "=" * 60)
+        print("APPLICATION EXECUTION COMPLETED SUCCESSFULLY")
+        print("=" * 60)
+        
+    except Exception as e:
+        logger.error(f"Application failed: {str(e)}")
+        raise
 
 if __name__ == "__main__":
     main()
 """
 
-SAMPLE_REQUIREMENTS_TXT = """# AWS Sandbox - Python Dependencies
-# Production-ready package versions
-
-# Core utilities
-requests==2.31.0
-python-dateutil==2.8.2
-pytz==2023.3
-
-# Data processing
-numpy==1.24.3
-pandas==2.0.3
-
-# AWS SDK (if needed)
-# boto3==1.28.25
-# botocore==1.31.25
-
-# Web frameworks
-# flask==2.3.2
-# fastapi==0.100.0
-# uvicorn==0.23.1
-
-# Database drivers
-# psycopg2-binary==2.9.7
-# pymongo==4.4.1
-
-# Scientific computing
-# scipy==1.11.1
-# scikit-learn==1.3.0
-
-# Development tools
-# pytest==7.4.0
-# black==23.7.0
+SAMPLE_REQUIREMENTS_TXT = """# Enterprise Python Dependencies
+# Production-grade package specifications
+
+# Core utilities and date handling
+requests>=2.31.0,<3.0.0
+python-dateutil>=2.8.2,<3.0.0
+pytz>=2023.3
+
+# Data processing and analysis
+numpy>=1.24.0,<2.0.0
+pandas>=2.0.0,<3.0.0
+
+# Logging and monitoring
+structlog>=23.1.0
+prometheus-client>=0.17.0
+
+# Configuration management
+pydantic>=2.0.0,<3.0.0
+python-dotenv>=1.0.0
+
+# Database connectivity (uncomment as needed)
+# sqlalchemy>=2.0.0,<3.0.0
+# psycopg2-binary>=2.9.0
+# redis>=4.5.0
+
+# Web frameworks (uncomment as needed)
+# fastapi>=0.100.0,<1.0.0
+# uvicorn[standard]>=0.23.0
+# gunicorn>=21.0.0
+
+# Scientific computing (uncomment as needed)
+# scipy>=1.11.0,<2.0.0
+# scikit-learn>=1.3.0,<2.0.0
+# matplotlib>=3.7.0,<4.0.0
+
+# Development and testing (uncomment as needed)
+# pytest>=7.4.0,<8.0.0
+# black>=23.0.0,<24.0.0
+# mypy>=1.5.0,<2.0.0
+# flake8>=6.0.0,<7.0.0
 """
 
-# AWS-style CSS
-aws_css = """
-@import url('https://fonts.googleapis.com/css2?family=Amazon+Ember:wght@300;400;500;600;700&display=swap');
+# Professional industrial CSS
+professional_css = """
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');
+
+:root {
+    --primary-color: #2563eb;
+    --primary-hover: #1d4ed8;
+    --secondary-color: #64748b;
+    --success-color: #059669;
+    --warning-color: #d97706;
+    --danger-color: #dc2626;
+    --background: #f8fafc;
+    --surface: #ffffff;
+    --border: #e2e8f0;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-muted: #94a3b8;
+}
 
 .gradio-container {
-    font-family: 'Amazon Ember', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
-    background-color: #f2f3f3 !important;
-    color: #232f3e !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+    background-color: var(--background) !important;
+    color: var(--text-primary) !important;
     min-height: 100vh;
-    margin: 0;
-    padding: 0;
+    line-height: 1.5;
 }
 
-/* AWS Header */
-.aws-header {
-    background-color: #232f3e !important;
+/* Professional Header */
+.platform-header {
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
     color: white !important;
-    padding: 12px 20px !important;
-    margin: 0 !important;
-    border-bottom: 1px solid #3c4043 !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
+    padding: 16px 24px !important;
+    border-bottom: 3px solid var(--primary-color) !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
 }
 
-.aws-nav {
-    background-color: #37475a !important;
-    color: #ffffff !important;
-    padding: 8px 20px !important;
-    font-size: 13px !important;
-    border-bottom: 1px solid #485563 !important;
+.platform-title {
+    font-size: 24px !important;
+    font-weight: 700 !important;
+    letter-spacing: -0.025em !important;
 }
 
-.aws-service-title {
-    font-size: 20px !important;
-    font-weight: 500 !important;
-    color: #232f3e !important;
-    margin: 20px 0 10px 0 !important;
+.platform-subtitle {
+    font-size: 14px !important;
+    opacity: 0.8 !important;
+    margin-top: 4px !important;
 }
 
-.aws-container {
-    background-color: white !important;
-    border: 1px solid #d5dbdb !important;
-    border-radius: 8px !important;
-    margin: 16px !important;
-    padding: 0 !important;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
+/* Navigation */
+.nav-breadcrumb {
+    background-color: #f1f5f9 !important;
+    padding: 12px 24px !important;
+    font-size: 13px !important;
+    color: var(--text-secondary) !important;
+    border-bottom: 1px solid var(--border) !important;
 }
 
-.aws-container-header {
-    background-color: #fafbfc !important;
-    border-bottom: 1px solid #d5dbdb !important;
-    padding: 16px 20px !important;
-    font-weight: 500 !important;
-    color: #232f3e !important;
+/* Container System */
+.enterprise-container {
+    background-color: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+    margin: 20px !important;
+    overflow: hidden !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
+}
+
+.container-header {
+    background: linear-gradient(to right, #f8fafc, #f1f5f9) !important;
+    border-bottom: 1px solid var(--border) !important;
+    padding: 16px 24px !important;
+    font-weight: 600 !important;
     font-size: 16px !important;
-    border-radius: 8px 8px 0 0 !important;
+    color: var(--text-primary) !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 8px !important;
 }
 
-.aws-container-content {
-    padding: 20px !important;
+.container-content {
+    padding: 24px !important;
 }
 
-.aws-button-primary {
-    background-color: #ec7211 !important;
+/* Professional Buttons */
+.btn-primary {
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%) !important;
     color: white !important;
-    border: 1px solid #ec7211 !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
     font-size: 14px !important;
     font-weight: 500 !important;
-    cursor: pointer !important;
     transition: all 0.2s ease !important;
+    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2) !important;
 }
 
-.aws-button-primary:hover {
-    background-color: #d86613 !important;
-    border-color: #d86613 !important;
+.btn-primary:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3) !important;
 }
 
-.aws-button-secondary {
-    background-color: white !important;
-    color: #232f3e !important;
-    border: 1px solid #d5dbdb !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
+.btn-secondary {
+    background-color: var(--surface) !important;
+    color: var(--text-primary) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
     font-size: 14px !important;
     font-weight: 500 !important;
-    cursor: pointer !important;
     transition: all 0.2s ease !important;
 }
 
-.aws-button-secondary:hover {
-    background-color: #f2f3f3 !important;
-    border-color: #879596 !important;
+.btn-secondary:hover {
+    background-color: #f8fafc !important;
+    border-color: var(--secondary-color) !important;
 }
 
-.aws-button-danger {
-    background-color: #d13212 !important;
+.btn-danger {
+    background: linear-gradient(135deg, var(--danger-color) 0%, #b91c1c 100%) !important;
     color: white !important;
-    border: 1px solid #d13212 !important;
-    border-radius: 4px !important;
-    padding: 8px 16px !important;
+    border: none !important;
+    border-radius: 8px !important;
+    padding: 12px 24px !important;
     font-size: 14px !important;
     font-weight: 500 !important;
-    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2) !important;
 }
 
-.aws-button-danger:hover {
-    background-color: #b02e0c !important;
+/* Status Indicators */
+.status-online {
+    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%) !important;
+    color: var(--success-color) !important;
+    border: 1px solid #86efac !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    font-weight: 600 !important;
+    text-align: center !important;
 }
 
-.aws-status-success {
-    color: #1d8102 !important;
-    background-color: #e6f3e6 !important;
-    border: 1px solid #7aa116 !important;
-    border-radius: 4px !important;
-    padding: 12px 16px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
+.status-offline {
+    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%) !important;
+    color: var(--danger-color) !important;
+    border: 1px solid #fca5a5 !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    font-weight: 600 !important;
+    text-align: center !important;
 }
 
-.aws-status-error {
-    color: #d13212 !important;
-    background-color: #fdf2f2 !important;
-    border: 1px solid #d13212 !important;
-    border-radius: 4px !important;
-    padding: 12px 16px !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
+.status-warning {
+    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
+    color: var(--warning-color) !important;
+    border: 1px solid #fde68a !important;
+    border-radius: 8px !important;
+    padding: 16px !important;
+    font-weight: 600 !important;
+    text-align: center !important;
 }
 
-.aws-status-warning {
-    color: #b7911a !important;
-    background-color: #fffbf0 !important;
-    border: 1px solid #b7911a !important;
-    border-radius: 4px !important;
-    padding: 12px 16px !important;
+/* Code Editor */
+.code-editor-professional {
+    font-family: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace !important;
+    background: #1e1e1e !important;
+    border: 2px solid var(--border) !important;
+    border-radius: 8px !important;
     font-size: 14px !important;
-    font-weight: 500 !important;
+    line-height: 1.5 !important;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
 }
 
-.aws-code-editor {
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
-    background-color: #1e1e1e !important;
-    border: 1px solid #d5dbdb !important;
-    border-radius: 4px !important;
+.requirements-editor {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #2d2d2d !important;
+    border: 2px solid var(--border) !important;
+    border-radius: 8px !important;
     font-size: 13px !important;
-}
-
-.aws-logs {
-    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace !important;
-    background-color: #232f3e !important;
-    color: #ffffff !important;
-    border: 1px solid #d5dbdb !important;
-    border-radius: 4px !important;
-    font-size: 12px !important;
     line-height: 1.4 !important;
 }
 
-.aws-form-group {
-    margin-bottom: 16px !important;
-}
-
-.aws-form-label {
-    font-size: 14px !important;
-    font-weight: 500 !important;
-    color: #232f3e !important;
-    margin-bottom: 4px !important;
-    display: block !important;
+/* Logs Terminal */
+.terminal-logs {
+    font-family: 'JetBrains Mono', monospace !important;
+    background: #0f172a !important;
+    color: #e2e8f0 !important;
+    border: 2px solid #334155 !important;
+    border-radius: 8px !important;
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+    padding: 16px !important;
 }
 
-.aws-sidebar {
-    background-color: white !important;
-    border: 1px solid #d5dbdb !important;
-    border-radius: 8px !important;
-    padding: 0 !important;
+/* Sidebar */
+.monitoring-panel {
+    background-color: var(--surface) !important;
+    border: 1px solid var(--border) !important;
+    border-radius: 12px !important;
+    overflow: hidden !important;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
     height: fit-content !important;
 }
 
-.aws-sidebar-header {
-    background-color: #fafbfc !important;
-    border-bottom: 1px solid #d5dbdb !important;
+.panel-header {
+    background: linear-gradient(to right, #f1f5f9, #e2e8f0) !important;
     padding: 12px 16px !important;
-    font-weight: 500 !important;
-    color: #232f3e !important;
+    font-weight: 600 !important;
     font-size: 14px !important;
-    border-radius: 8px 8px 0 0 !important;
+    color: var(--text-primary) !important;
+    border-bottom: 1px solid var(--border) !important;
 }
 
-.aws-sidebar-content {
+.panel-content {
     padding: 16px !important;
 }
 
-.aws-info-box {
-    background-color: #f0f8ff !important;
-    border: 1px solid #4a90e2 !important;
-    border-radius: 4px !important;
-    padding: 12px !important;
-    margin: 8px 0 !important;
-    font-size: 13px !important;
-    color: #232f3e !important;
-}
-
-.aws-breadcrumb {
-    font-size: 12px !important;
-    color: #687078 !important;
-    margin: 8px 20px !important;
+/* Form Elements */
+.form-group {
+    margin-bottom: 20px !important;
 }
 
-.aws-tabs {
-    border: 1px solid #d5dbdb !important;
-    border-radius: 8px !important;
-    background-color: white !important;
-    overflow: hidden !important;
+.form-label {
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    color: var(--text-primary) !important;
+    margin-bottom: 6px !important;
+    display: block !important;
 }
 
-.aws-tab-content {
-    padding: 16px !important;
+.info-badge {
+    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
+    color: var(--primary-color) !important;
+    border: 1px solid #93c5fd !important;
+    border-radius: 6px !important;
+    padding: 12px 16px !important;
+    font-size: 13px !important;
+    font-weight: 500 !important;
 }
 
-.aws-metric {
+/* Metrics */
+.metric-card {
     text-align: center !important;
-    padding: 12px !important;
-    border-right: 1px solid #d5dbdb !important;
+    padding: 16px !important;
+    border-right: 1px solid var(--border) !important;
 }
 
-.aws-metric:last-child {
+.metric-card:last-child {
     border-right: none !important;
 }
 
-.aws-metric-value {
-    font-size: 24px !important;
-    font-weight: 600 !important;
-    color: #232f3e !important;
+.metric-value {
+    font-size: 28px !important;
+    font-weight: 700 !important;
+    color: var(--primary-color) !important;
+    line-height: 1 !important;
 }
 
-.aws-metric-label {
+.metric-label {
     font-size: 12px !important;
-    color: #687078 !important;
+    color: var(--text-secondary) !important;
     margin-top: 4px !important;
+    font-weight: 500 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.025em !important;
+}
+
+/* Professional spacing */
+.section-divider {
+    height: 1px !important;
+    background: var(--border) !important;
+    margin: 24px 0 !important;
+}
+
+.mb-4 {
+    margin-bottom: 16px !important;
+}
+
+.mt-4 {
+    margin-top: 16px !important;
 }
 """
 
@@ -408,157 +507,151 @@ def auto_refresh_logs():
     return sandbox.fetch_logs()
 
 def load_sample_files():
-    """Load sample files into the editors"""
+    """Load professional sample files"""
     return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
 
-# Build the AWS-style interface
-with gr.Blocks(css=aws_css, title="AWS Sandbox Service", theme=gr.themes.Default()) as demo:
+# Build the professional interface
+with gr.Blocks(css=professional_css, title="Sandbox Compute Platform", theme=gr.themes.Default()) as demo:
     
-    # AWS Header
+    # Platform Header
     gr.HTML("""
-    <div class="aws-header">
-        <span>🔶 Amazon Web Services</span>
-        <span style="float: right;">Sandbox Compute Service</span>
-    </div>
-    <div class="aws-nav">
-        Services > Compute > Sandbox > Management Console
+    <div class="platform-header">
+        <div class="platform-title">Sandbox Compute Platform</div>
+        <div class="platform-subtitle">Enterprise-grade cloud computing infrastructure</div>
     </div>
-    <div class="aws-breadcrumb">
-        Home > Sandbox Service > Console
+    <div class="nav-breadcrumb">
+        Dashboard → Compute Services → Sandbox Management Console
     </div>
     """)
     
-    # Service Title
-    gr.HTML('<div class="aws-service-title">Sandbox Compute Service</div>')
-    
     with gr.Row():
         # Main Content Area
         with gr.Column(scale=3):
-            # Connection Management
-            with gr.Group(elem_classes=["aws-container"]):
-                gr.HTML('<div class="aws-container-header">🔗 Engine Connection</div>')
-                with gr.Group(elem_classes=["aws-container-content"]):
+            # Infrastructure Management
+            with gr.Group(elem_classes=["enterprise-container"]):
+                gr.HTML('<div class="container-header">🔧 Infrastructure Management</div>')
+                with gr.Group(elem_classes=["container-content"]):
                     with gr.Row():
-                        connect_btn = gr.Button("Connect to Engine", elem_classes=["aws-button-primary"])
-                        load_samples_btn = gr.Button("Load Sample Code", elem_classes=["aws-button-secondary"])
+                        connect_btn = gr.Button("Initialize Connection", elem_classes=["btn-primary"])
+                        load_samples_btn = gr.Button("Load Templates", elem_classes=["btn-secondary"])
                     
+                    gr.HTML('<div class="form-label mt-4">Active Compute Engine</div>')
                     current_engine_display = gr.Textbox(
                         value="No engine selected",
-                        label="Active Compute Engine",
                         interactive=False,
-                        elem_classes=["aws-info-box"]
+                        elem_classes=["info-badge"],
+                        show_label=False
                     )
                     
+                    gr.HTML('<div class="form-label mt-4">Connection Status</div>')
                     connection_status = gr.Textbox(
-                        value="Disconnected", 
-                        label="Connection Status",
+                        value="DISCONNECTED", 
                         interactive=False,
-                        elem_classes=["aws-status-error"]
+                        elem_classes=["status-offline"],
+                        show_label=False
                     )
             
-            # Code Development Environment
-            with gr.Group(elem_classes=["aws-container"]):
-                gr.HTML('<div class="aws-container-header">💻 Development Environment</div>')
-                with gr.Group(elem_classes=["aws-container-content"]):
-                    with gr.Tab("main.py", elem_classes=["aws-tabs"]):
-                        with gr.Group(elem_classes=["aws-tab-content"]):
-                            gr.HTML('<div class="aws-form-label">📄 Application Code (main.py)</div>')
-                            main_py_editor = gr.Code(
-                                value="# AWS Sandbox Python Application\nprint('Hello from AWS Sandbox!')",
-                                language="python",
-                                lines=18,
-                                elem_classes=["aws-code-editor"],
-                                show_label=False
-                            )
+            # Development Environment
+            with gr.Group(elem_classes=["enterprise-container"]):
+                gr.HTML('<div class="container-header">💻 Development Environment</div>')
+                with gr.Group(elem_classes=["container-content"]):
+                    with gr.Tab("main.py"):
+                        gr.HTML('<div class="form-label">Application Source Code</div>')
+                        main_py_editor = gr.Code(
+                            value="# Enterprise Python Application\nprint('Sandbox Compute Platform - Ready')",
+                            language="python",
+                            lines=20,
+                            elem_classes=["code-editor-professional"],
+                            show_label=False
+                        )
                     
-                    with gr.Tab("requirements.txt", elem_classes=["aws-tabs"]):
-                        with gr.Group(elem_classes=["aws-tab-content"]):
-                            gr.HTML('<div class="aws-form-label">📦 Dependencies (requirements.txt)</div>')
-                            requirements_editor = gr.Textbox(
-                                value="# Add Python package dependencies\n# Example: requests>=2.25.0",
-                                lines=18,
-                                elem_classes=["aws-code-editor"],
-                                show_label=False,
-                                max_lines=25
-                            )
+                    with gr.Tab("requirements.txt"):
+                        gr.HTML('<div class="form-label">Dependency Specifications</div>')
+                        requirements_editor = gr.Textbox(
+                            value="# Production dependencies\n# Specify exact versions for reproducibility",
+                            lines=20,
+                            elem_classes=["requirements-editor"],
+                            show_label=False,
+                            max_lines=25
+                        )
                     
-                    # Deployment Actions
-                    gr.HTML('<div style="margin-top: 16px;"></div>')
+                    # Deployment Controls
+                    gr.HTML('<div class="section-divider"></div>')
                     with gr.Row():
-                        launch_btn = gr.Button("Deploy Application", elem_classes=["aws-button-primary"], size="lg")
-                        kill_btn = gr.Button("Terminate Instance", elem_classes=["aws-button-danger"], size="lg")
+                        launch_btn = gr.Button("Deploy Application", elem_classes=["btn-primary"], size="lg")
+                        kill_btn = gr.Button("Terminate Instance", elem_classes=["btn-danger"], size="lg")
                     
-                    # Deployment Output
-                    gr.HTML('<div class="aws-form-label" style="margin-top: 16px;">Deployment Status</div>')
+                    gr.HTML('<div class="form-label mt-4">Deployment Output</div>')
                     launch_output = gr.Textbox(
                         lines=6,
                         interactive=False,
-                        placeholder="Deployment status and output will appear here...",
-                        elem_classes=["aws-logs"],
+                        placeholder="Deployment logs and status information will appear here...",
+                        elem_classes=["terminal-logs"],
                         show_label=False
                     )
         
-        # Sidebar
+        # Monitoring Panel
         with gr.Column(scale=1):
-            # Instance Status
-            with gr.Group(elem_classes=["aws-sidebar"]):
-                gr.HTML('<div class="aws-sidebar-header">📊 Instance Status</div>')
-                with gr.Group(elem_classes=["aws-sidebar-content"]):
+            # System Status
+            with gr.Group(elem_classes=["monitoring-panel"]):
+                gr.HTML('<div class="panel-header">📊 System Monitor</div>')
+                with gr.Group(elem_classes=["panel-content"]):
+                    gr.HTML('<div class="form-label">Instance Status</div>')
                     status_display = gr.Textbox(
-                        value="Stopped",
-                        label="Current Status",
+                        value="OFFLINE",
                         interactive=False,
-                        elem_classes=["aws-status-warning"]
+                        elem_classes=["status-offline"],
+                        show_label=False
                     )
                     
-                    status_refresh_btn = gr.Button("Refresh Status", elem_classes=["aws-button-secondary"], size="sm")
+                    status_refresh_btn = gr.Button("Refresh Status", elem_classes=["btn-secondary"], size="sm")
                     
-                    gr.HTML('<div style="margin: 16px 0; border-bottom: 1px solid #d5dbdb;"></div>')
+                    gr.HTML('<div class="section-divider"></div>')
                     
-                    # Auto-refresh controls
-                    gr.HTML('<div class="aws-form-label">Auto-Refresh Settings</div>')
+                    gr.HTML('<div class="form-label">Monitoring Settings</div>')
                     auto_refresh_status_cb = gr.Checkbox(
-                        label="Status monitoring (5s)", 
+                        label="Auto-refresh status (5s interval)", 
                         value=False
                     )
                     auto_refresh_logs_cb = gr.Checkbox(
-                        label="Log streaming (10s)", 
+                        label="Auto-refresh logs (10s interval)", 
                         value=False
                     )
             
-            # Instance Metrics (placeholder)
-            with gr.Group(elem_classes=["aws-sidebar"]):
-                gr.HTML('<div class="aws-sidebar-header">📈 Metrics</div>')
-                with gr.Group(elem_classes=["aws-sidebar-content"]):
-                    gr.HTML('''
-                    <div class="aws-metric">
-                        <div class="aws-metric-value">0</div>
-                        <div class="aws-metric-label">CPU Usage (%)</div>
+            # System Metrics
+            with gr.Group(elem_classes=["monitoring-panel"]):
+                gr.HTML('<div class="panel-header">📈 Performance Metrics</div>')
+                gr.HTML('''
+                <div style="padding: 16px;">
+                    <div class="metric-card">
+                        <div class="metric-value">--</div>
+                        <div class="metric-label">CPU Usage</div>
                     </div>
-                    <div class="aws-metric">
-                        <div class="aws-metric-value">0</div>
-                        <div class="aws-metric-label">Memory (MB)</div>
+                    <div class="metric-card">
+                        <div class="metric-value">--</div>
+                        <div class="metric-label">Memory</div>
                     </div>
-                    <div class="aws-metric">
-                        <div class="aws-metric-value">0</div>
-                        <div class="aws-metric-label">Uptime (min)</div>
+                    <div class="metric-card">
+                        <div class="metric-value">--</div>
+                        <div class="metric-label">Uptime</div>
                     </div>
-                    ''')
+                </div>
+                ''')
     
-    # Logs Section
-    with gr.Group(elem_classes=["aws-container"]):
-        gr.HTML('<div class="aws-container-header">📋 Application Logs</div>')
-        with gr.Group(elem_classes=["aws-container-content"]):
+    # System Logs
+    with gr.Group(elem_classes=["enterprise-container"]):
+        gr.HTML('<div class="container-header">📋 System Logs</div>')
+        with gr.Group(elem_classes=["container-content"]):
             with gr.Row():
-                fetch_logs_btn = gr.Button("Fetch Logs", elem_classes=["aws-button-secondary"])
+                fetch_logs_btn = gr.Button("Fetch Application Logs", elem_classes=["btn-secondary"])
                 gr.HTML('<div style="flex-grow: 1;"></div>')
             
-            gr.HTML('<div class="aws-form-label" style="margin-top: 12px;">CloudWatch Logs</div>')
+            gr.HTML('<div class="form-label mt-4">Runtime Logs</div>')
             logs_display = gr.Textbox(
-                lines=12,
+                lines=14,
                 interactive=False,
-                elem_classes=["aws-logs"],
-                placeholder="Application logs will appear here...\n\nLogs are automatically captured from your running application.",
+                elem_classes=["terminal-logs"],
+                placeholder="[SYSTEM] Application logs will be displayed here...\n[INFO] Logs are captured in real-time from your running application\n[DEBUG] Use 'Fetch Application Logs' to retrieve the latest output",
                 show_label=False
             )
     
@@ -623,11 +716,13 @@ with gr.Blocks(css=aws_css, title="AWS Sandbox Service", theme=gr.themes.Default
         outputs=[logs_timer]
     )
 
-    # Footer
+    # Professional Footer
     gr.HTML("""
-    <div style="text-align: center; margin-top: 40px; padding: 20px; background-color: #fafbfc; border-top: 1px solid #d5dbdb; color: #687078; font-size: 12px;">
-        <p>© 2025, Choco Labs, Inc. All rights reserved.</p>
-        <p>Sandbox Compute Service • Dual-Engine Architecture </p>
+    <div style="text-align: center; margin-top: 40px; padding: 24px; background: linear-gradient(to right, #f8fafc, #f1f5f9); border-top: 1px solid #e2e8f0; color: #64748b; font-size: 13px;">
+        <p style="font-weight: 500; margin-bottom: 8px;">Sandbox Compute Platform</p>
+        <p style="font-size: 12px; margin-top: 12px; opacity: 0.8;">
+            Runtime Engines: SANDBOXBACKEND2, SANDBOX_BACKEND 
+        </p>
     </div>
     """)