Update app.py

app.py

@@ -1,8 +1,7 @@
 import gradio as gr
 from gradio_client import Client
-import json
 import random
-from datetime import datetime
+from datetime import datetime, timedelta
 
 # Backend engines
 BACKEND_ENGINES = [
@@ -10,14 +9,18 @@ BACKEND_ENGINES = [
     "ChocoLaboratory/SANDBOX_BACKEND"
 ]
 
+# Sandbox Manager
 class SandboxManager:
     def __init__(self):
         self.client = None
         self.current_engine = None
         self.is_connected = False
+        self.sandbox_start_time = None
+        self.sandbox_duration = timedelta(hours=2)  # 2-hour limit
         
     def select_random_engine(self):
-        self.current_engine = random.choice(BACKEND_ENGINES)
+        if not self.current_engine:
+            self.current_engine = random.choice(BACKEND_ENGINES)
         return self.current_engine
         
     def connect(self):
@@ -30,183 +33,173 @@ class SandboxManager:
             self.is_connected = False
             self.current_engine = None
             return f"✗ Connection failed to {engine}: {str(e)}", "Not connected"
+
+    def check_sandbox_active(self):
+        if self.sandbox_start_time:
+            if datetime.now() - self.sandbox_start_time > self.sandbox_duration:
+                self.sandbox_start_time = None
+                return False
+            return True
+        return False
     
     def launch_sandbox(self, main_py_code, requirements_txt):
         if not self.is_connected:
             return "✗ Not connected to backend. Please connect first.", ""
+        if self.check_sandbox_active():
+            return "⚠ Sandbox is still active. You cannot deploy another until 2 hours have passed.", self.get_status()
         try:
             result = self.client.predict(
                 code=main_py_code,
                 requirements=requirements_txt,
                 api_name="/launch_sandbox"
             )
+            self.sandbox_start_time = datetime.now()
             return f"✓ Sandbox deployed successfully on {self.current_engine}\n\nResponse: {result}", self.get_status()
         except Exception as e:
             return f"✗ Deployment failed: {str(e)}", ""
     
-    def fetch_logs(self):
-        if not self.is_connected:
-            return "✗ Not connected to backend"
-        try:
-            result = self.client.predict(api_name="/fetch_logs")
-            timestamp = datetime.now().strftime("%H:%M:%S")
-            return f"[{timestamp}] Logs from {self.current_engine}:\n\n{result}"
-        except Exception as e:
-            return f"[ERROR] Failed to fetch logs: {str(e)}"
-    
     def kill_sandbox(self):
         if not self.is_connected:
             return "✗ Not connected to backend", ""
+        if not self.check_sandbox_active():
+            return "⚠ No active sandbox to terminate.", self.get_status()
         try:
             result = self.client.predict(api_name="/kill_sandbox")
+            self.sandbox_start_time = None
             return f"✓ Sandbox terminated on {self.current_engine}\n\nResponse: {result}", self.get_status()
         except Exception as e:
             return f"✗ Termination failed: {str(e)}", ""
-    
+
     def get_status(self):
         if not self.is_connected:
             return "OFFLINE"
+        if self.check_sandbox_active():
+            remaining = self.sandbox_duration - (datetime.now() - self.sandbox_start_time)
+            hrs, rem = divmod(remaining.seconds, 3600)
+            mins, sec = divmod(rem, 60)
+            return f"RUNNING - {hrs}h {mins}m remaining"
+        else:
+            return "IDLE"
+    
+    def fetch_logs(self):
+        if not self.is_connected:
+            return "✗ Not connected to backend"
         try:
-            result = self.client.predict(api_name="/status_sandbox")
-            if "running" in str(result).lower():
-                return f"RUNNING - {result}"
-            else:
-                return f"IDLE - {result}"
+            result = self.client.predict(api_name="/fetch_logs")
+            timestamp = datetime.now().strftime("%H:%M:%S")
+            return f"[{timestamp}] Logs from {self.current_engine}:\n\n{result}"
         except Exception as e:
-            return f"ERROR - {str(e)}"
+            return f"[ERROR] Failed to fetch logs: {str(e)}"
 
 # Initialize sandbox manager
 sandbox = SandboxManager()
 
-# Sample files
+# Sample templates
 SAMPLE_MAIN_PY = "# Enterprise Python Application\nprint('Sandbox Compute Platform - Ready')"
 SAMPLE_REQUIREMENTS_TXT = "# Production dependencies\n# Specify exact versions for reproducibility"
 
-# Industrial-grade CSS
-industrial_css = """
+# Readable and professional 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: #1f2937;
-    --primary-hover: #111827;
-    --secondary-color: #4b5563;
-    --success-color: #10b981;
-    --warning-color: #f59e0b;
-    --danger-color: #ef4444;
-    --background: #f3f4f6;
+    --primary-color: #1e40af;
+    --primary-hover: #2563eb;
+    --secondary-color: #374151;
+    --success-color: #059669;
+    --warning-color: #d97706;
+    --danger-color: #b91c1c;
+    --background: #f9fafb;
     --surface: #ffffff;
     --border: #d1d5db;
     --text-primary: #111827;
-    --text-secondary: #6b7280;
-    --text-muted: #9ca3af;
+    --text-secondary: #4b5563;
+    --text-muted: #6b7280;
 }
 
-.gradio-container { font-family: 'Inter', sans-serif !important; background-color: var(--background) !important; min-height: 100vh; }
-
-.platform-header { background: linear-gradient(90deg, var(--primary-color), var(--primary-hover)) !important; color: #f9fafb !important; padding: 20px 32px !important; border-bottom: 4px solid var(--primary-color); box-shadow: 0 6px 12px rgba(0,0,0,0.15); }
-.platform-title { font-size: 26px !important; font-weight: 700 !important; }
-.platform-subtitle { font-size: 14px !important; opacity: 0.85 !important; margin-top: 4px !important; }
-
-.nav-breadcrumb { background-color: #e5e7eb !important; padding: 12px 24px !important; font-size: 13px !important; color: var(--text-secondary) !important; border-bottom: 1px solid var(--border) !important; border-radius: 6px !important; margin-top: 8px !important; }
-
-.enterprise-container { background-color: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: 12px !important; margin: 16px 0 !important; overflow: hidden !important; box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important; }
-.container-header { background: linear-gradient(to right, #f9fafb, #f3f4f6) !important; border-bottom: 1px solid var(--border) !important; padding: 14px 24px !important; font-weight: 600 !important; font-size: 16px !important; display: flex !important; align-items: center; gap: 8px !important; }
-.container-content { padding: 20px !important; }
+.gradio-container {
+    font-family: 'Inter', sans-serif !important;
+    background-color: var(--background) !important;
+    color: var(--text-primary) !important;
+    min-height: 100vh;
+}
 
-.btn-primary { background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important; color: #fff !important; border-radius: 6px !important; padding: 10px 24px !important; font-weight: 500 !important; transition: all 0.2s ease !important; }
-.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; }
-.btn-secondary { background-color: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text-primary) !important; border-radius: 6px !important; padding: 10px 24px !important; }
-.btn-secondary:hover { background-color: #f9fafb !important; border-color: var(--secondary-color) !important; }
-.btn-danger { background: linear-gradient(135deg, var(--danger-color), #b91c1c) !important; color: #fff !important; border-radius: 6px !important; padding: 10px 24px !important; }
+.platform-header {
+    background: #1e40af !important;
+    color: white !important;
+    padding: 16px 24px !important;
+}
 
-.status-online { background: #d1fae5 !important; color: var(--success-color) !important; }
-.status-offline { background: #fee2e2 !important; color: var(--danger-color) !important; }
-.status-warning { background: #fef3c7 !important; color: var(--warning-color) !important; }
+.platform-title { font-size: 24px; font-weight: 700; }
+.platform-subtitle { font-size: 14px; opacity: 0.85; margin-top: 4px; }
+
+.enterprise-container { background-color: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin: 20px; padding: 16px; }
+.container-header { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
+.code-editor-professional { font-family: 'JetBrains Mono', monospace; background: #1e1e1e; color: #f9fafb; border-radius: 8px; padding: 8px; }
+.requirements-editor { font-family: 'JetBrains Mono', monospace; background: #2d2d2d; color: #f9fafb; border-radius: 8px; padding: 8px; }
+.terminal-logs { font-family: 'JetBrains Mono', monospace; background: #0f172a; color: #e2e8f0; border-radius: 8px; padding: 16px; }
+.btn-primary { background: var(--primary-color); color: white; border-radius: 8px; padding: 12px; }
+.btn-primary:hover { background: var(--primary-hover); }
+.btn-secondary { background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
+.btn-secondary:hover { background: #f3f4f6; }
+.btn-danger { background: var(--danger-color); color: white; border-radius: 8px; padding: 12px; }
+.status-online { background: #d1fae5; color: var(--success-color); padding: 16px; border-radius: 8px; text-align: center; }
+.status-offline { background: #fee2e2; color: var(--danger-color); padding: 16px; border-radius: 8px; text-align: center; }
+.status-warning { background: #fef3c7; color: var(--warning-color); padding: 16px; border-radius: 8px; text-align: center; }
+.section-divider { height: 1px; background: var(--border); margin: 24px 0; }
+"""
 
-.code-editor-professional { font-family: 'JetBrains Mono', monospace !important; background: #1f2937 !important; color: #f3f4f6 !important; border-radius: 8px !important; padding: 12px !important; }
-.requirements-editor { font-family: 'JetBrains Mono', monospace !important; background: #27272a !important; color: #f3f4f6 !important; border-radius: 8px !important; padding: 10px !important; }
-.terminal-logs { font-family: 'JetBrains Mono', monospace !important; background: #0f172a !important; color: #e2e8f0 !important; border-radius: 8px !important; padding: 14px !important; }
+def auto_refresh_status():
+    return sandbox.get_status()
 
-.monitoring-panel { border-radius: 12px !important; padding: 0 !important; margin: 16px 0 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important; }
-.panel-header { padding: 12px 16px !important; font-weight: 600 !important; background: #f3f4f6; border-bottom: 1px solid var(--border) !important; }
-.panel-content { padding: 16px !important; }
-"""
+def auto_refresh_logs():
+    return sandbox.fetch_logs()
 
-def auto_refresh_status(): return sandbox.get_status()
-def auto_refresh_logs(): return sandbox.fetch_logs()
-def load_sample_files(): return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
+def load_sample_files():
+    return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
 
 # Build Gradio interface
-with gr.Blocks(css=industrial_css, title="Sandbox Compute Platform") as demo:
+with gr.Blocks(css=professional_css, title="Sandbox Compute Platform") as demo:
+    
     gr.HTML("""
     <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="nav-breadcrumb">
-        Sandbox Management Console
-    </div>
     """)
-
+    
     with gr.Row():
-        # Main Content
         with gr.Column(scale=3):
             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("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", interactive=False, elem_classes=["info-badge"], show_label=False)
-                    gr.HTML('<div class="form-label mt-4">Connection Status</div>')
-                    connection_status = gr.Textbox(value="DISCONNECTED", interactive=False, elem_classes=["status-offline"], show_label=False)
-
+                connect_btn = gr.Button("Initialize Connection", elem_classes=["btn-primary"])
+                load_samples_btn = gr.Button("Load Templates", elem_classes=["btn-secondary"])
+                current_engine_display = gr.Textbox(value="No engine selected", interactive=False, elem_classes=["status-warning"], show_label=False)
+                connection_status = gr.Textbox(value="DISCONNECTED", interactive=False, elem_classes=["status-offline"], show_label=False)
+            
             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=SAMPLE_MAIN_PY, language="python", lines=20, elem_classes=["code-editor-professional"], show_label=False)
-                    with gr.Tab("requirements.txt"):
-                        gr.HTML('<div class="form-label">Dependency Specifications</div>')
-                        requirements_editor = gr.Textbox(value=SAMPLE_REQUIREMENTS_TXT, lines=20, elem_classes=["requirements-editor"], show_label=False, max_lines=25)
-                    gr.HTML('<div class="section-divider"></div>')
-                    with gr.Row():
-                        launch_btn = gr.Button("Deploy Application", elem_classes=["btn-primary"], size="lg")
-                        kill_btn = gr.Button("Terminate Instance", elem_classes=["btn-danger"], size="lg")
-                    gr.HTML('<div class="form-label mt-4">Deployment Output</div>')
-                    launch_output = gr.Textbox(lines=6, interactive=False, placeholder="Deployment logs and status information will appear here...", elem_classes=["terminal-logs"], show_label=False)
-
-        # Monitoring Panel
+                main_py_editor = gr.Code(value=SAMPLE_MAIN_PY, language="python", lines=20, elem_classes=["code-editor-professional"], show_label=False)
+                requirements_editor = gr.Textbox(value=SAMPLE_REQUIREMENTS_TXT, lines=20, elem_classes=["requirements-editor"], show_label=False)
+                gr.HTML('<div class="section-divider"></div>')
+                launch_btn = gr.Button("Deploy Application", elem_classes=["btn-primary"])
+                kill_btn = gr.Button("Terminate Instance", elem_classes=["btn-danger"])
+                launch_output = gr.Textbox(lines=6, interactive=False, elem_classes=["terminal-logs"], show_label=False)
+        
         with gr.Column(scale=1):
-            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="OFFLINE", interactive=False, elem_classes=["status-offline"], show_label=False)
-                    status_refresh_btn = gr.Button("Refresh Status", elem_classes=["btn-secondary"], size="sm")
-                    gr.HTML('<div class="section-divider"></div>')
-                    gr.HTML('<div class="form-label">Monitoring Settings</div>')
-                    auto_refresh_status_cb = gr.Checkbox(label="Auto-refresh status (5s interval)", value=False)
-                    auto_refresh_logs_cb = gr.Checkbox(label="Auto-refresh logs (10s interval)", value=False)
-
-    # Logs Section
-    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 Application Logs", elem_classes=["btn-secondary"])
-                gr.HTML('<div style="flex-grow: 1;"></div>')
-            gr.HTML('<div class="form-label mt-4">Runtime Logs</div>')
-            logs_display = gr.Textbox(lines=14, interactive=False, elem_classes=["terminal-logs"], placeholder="[SYSTEM] Logs will appear here...", show_label=False)
-
+            gr.HTML('<div class="container-header">📊 System Monitor</div>')
+            status_display = gr.Textbox(value="OFFLINE", interactive=False, elem_classes=["status-offline"], show_label=False)
+            status_refresh_btn = gr.Button("Refresh Status", elem_classes=["btn-secondary"])
+            fetch_logs_btn = gr.Button("Fetch Application Logs", elem_classes=["btn-secondary"])
+            logs_display = gr.Textbox(lines=14, interactive=False, elem_classes=["terminal-logs"], show_label=False)
+    
     # Event Handlers
     connect_btn.click(fn=sandbox.connect, outputs=[connection_status, current_engine_display])
     load_samples_btn.click(fn=load_sample_files, outputs=[main_py_editor, requirements_editor])
     launch_btn.click(fn=sandbox.launch_sandbox, inputs=[main_py_editor, requirements_editor], outputs=[launch_output, status_display])
     kill_btn.click(fn=sandbox.kill_sandbox, outputs=[launch_output, status_display])
-    fetch_logs_btn.click(fn=sandbox.fetch_logs, outputs=logs_display)
     status_refresh_btn.click(fn=auto_refresh_status, outputs=status_display)
+    fetch_logs_btn.click(fn=auto_refresh_logs, outputs=logs_display)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch(share=True, server_name="0.0.0.0", server_port=7860)