Update app.py

app.py

@@ -1,142 +1,471 @@
 import gradio as gr
 from gradio_client import Client
-import threading
+import json
 import time
+import threading
+import random
+from datetime import datetime
 
-# -------------------------
-# Backend info
-# -------------------------
-BACKENDS = {
-    "Sandbox Backend 1": "ChocoLaboratory/SANDBOX_BACKEND",
-    "Sandbox Backend 2": "ChocoLaboratory/SANDBOXBACKEND2"
-}
-backend_load = {name: 0 for name in BACKENDS.keys()}
-user_sandboxes = {}
-SANDBOX_TTL = 2*3600  # 2 hours
-
-# -------------------------
-# API functions
-# -------------------------
-def choose_backend():
-    return min(backend_load, key=lambda k: backend_load[k])
-
-def launch_sandbox_api(code, requirements):
-    backend_name = choose_backend()
-    client = Client(BACKENDS[backend_name])
-    try:
-        sandbox_id = client.predict(code=code, requirements=requirements, api_name="/launch_sandbox")
-        backend_load[backend_name] += 1
-        user_sandboxes[sandbox_id] = {
-            "backend": backend_name, "start_time": time.time(), "client": client
-        }
-        return sandbox_id, backend_name
-    except Exception as e:
-        return None, str(e)
-
-def fetch_logs_api(sandbox_id):
-    info = user_sandboxes.get(sandbox_id)
-    if not info:
-        return "Sandbox not found"
-    try:
-        return info["client"].predict(api_name="/fetch_logs", sandbox_id=sandbox_id)
-    except Exception as e:
-        return str(e)
-
-def kill_sandbox_api(sandbox_id):
-    info = user_sandboxes.get(sandbox_id)
-    if not info:
-        return "Sandbox not found"
-    try:
-        result = info["client"].predict(api_name="/kill_sandbox", sandbox_id=sandbox_id)
-        backend_load[info["backend"]] -= 1
-        del user_sandboxes[sandbox_id]
-        return result
-    except Exception as e:
-        return str(e)
-
-def status_sandbox_api(sandbox_id):
-    info = user_sandboxes.get(sandbox_id)
-    if not info:
-        return "Sandbox not found"
-    elapsed = int(time.time() - info["start_time"])
-    return f"Running for {elapsed} seconds"
-
-# -------------------------
-# Dark-themed CSS
-# -------------------------
-DARK_CSS = """
-body {
-    background-color: #1e1e1e;
-    color: #f0f0f0;
-}
-.sandbox-card {
-    border-radius: 12px;
+# Backend engines
+BACKEND_ENGINES = [
+    "ChocoLaboratory/SANDBOXBACKEND2",
+    "ChocoLaboratory/SANDBOX_BACKEND"
+]
+
+class SandboxManager:
+    def __init__(self):
+        self.client = None
+        self.current_engine = None
+        self.is_connected = False
+        self.last_status = "Disconnected"
+        
+    def select_random_engine(self):
+        """Randomly select an engine"""
+        self.current_engine = random.choice(BACKEND_ENGINES)
+        return self.current_engine
+        
+    def connect(self):
+        engine = self.select_random_engine()
+        try:
+            self.client = Client(engine)
+            self.is_connected = True
+            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"
+    
+    def launch_sandbox(self, main_py_code, requirements_txt):
+        if not self.is_connected:
+            return "❌ Not connected to backend. Please connect first.", ""
+        
+        try:
+            result = self.client.predict(
+                code=main_py_code,
+                requirements=requirements_txt,
+                api_name="/launch_sandbox"
+            )
+            return f"🚀 Sandbox launched successfully on {self.current_engine}!\n\nResponse: {result}", self.get_status()
+        except Exception as e:
+            return f"❌ Launch 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"📋 Logs fetched at {timestamp} from {self.current_engine}:\n\n{result}"
+        except Exception as e:
+            return f"❌ Failed to fetch logs: {str(e)}"
+    
+    def kill_sandbox(self):
+        if not self.is_connected:
+            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()
+        except Exception as e:
+            return f"❌ Kill failed: {str(e)}", ""
+    
+    def get_status(self):
+        if not self.is_connected:
+            return "🔴 Disconnected"
+        
+        try:
+            result = self.client.predict(api_name="/status_sandbox")
+            status_emoji = "🟢" if "running" in str(result).lower() else "🟡"
+            return f"{status_emoji} Status: {result}"
+        except Exception as e:
+            return f"🔴 Status check failed: {str(e)}"
+
+# Initialize sandbox manager
+sandbox = SandboxManager()
+
+# Sample code templates
+SAMPLE_MAIN_PY = """#!/usr/bin/env python3
+\"\"\"
+Welcome to Sandbox Cloud IDE
+Write your Python code here
+\"\"\"
+
+import os
+import sys
+from datetime import datetime
+
+def main():
+    print("🚀 Sandbox Environment Started!")
+    print(f"⏰ Current time: {datetime.now()}")
+    print(f"🐍 Python version: {sys.version}")
+    print(f"📁 Working directory: {os.getcwd()}")
+    
+    # Your code here
+    print("\\n✨ Hello from the cloud sandbox! ✨")
+    
+    # Example: Simple calculation
+    numbers = [1, 2, 3, 4, 5]
+    result = sum(numbers)
+    print(f"📊 Sum of {numbers} = {result}")
+
+if __name__ == "__main__":
+    main()
+"""
+
+SAMPLE_REQUIREMENTS_TXT = """# Python package dependencies
+# Add one package per line
+
+# Data science libraries
+numpy>=1.21.0
+pandas>=1.3.0
+
+# Web frameworks
+# flask>=2.0.0
+# fastapi>=0.68.0
+
+# Machine learning
+# scikit-learn>=1.0.0
+# tensorflow>=2.6.0
+
+# Utilities
+requests>=2.25.0
+python-dateutil>=2.8.0
+
+# Add your packages here...
+"""
+
+# Custom CSS for modern IDE styling
+custom_css = """
+.gradio-container {
+    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    min-height: 100vh;
+}
+
+.ide-container {
+    background: rgba(255, 255, 255, 0.98);
+    backdrop-filter: blur(20px);
+    border-radius: 20px;
+    padding: 25px;
+    margin: 20px;
+    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
+}
+
+.engine-display {
+    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
+    color: white;
     padding: 15px;
-    margin: 10px;
-    background-color: #2b2b2b;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+    border-radius: 12px;
+    text-align: center;
+    font-weight: 600;
+    margin: 10px 0;
+    font-family: 'JetBrains Mono', monospace;
+    box-shadow: 0 8px 20px rgba(0, 114, 255, 0.3);
 }
-.gr-button {
-    background-color: #3a3a3a;
-    color: #f0f0f0;
-    border: 1px solid #555;
+
+.status-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    padding: 18px;
+    border-radius: 15px;
+    margin: 10px 0;
+    font-weight: 600;
+    text-align: center;
+    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
 }
-.gr-button:hover {
-    background-color: #505050;
+
+.code-editor {
+    border-radius: 12px !important;
+    border: 2px solid #e1e8ed !important;
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
+    background: #1e1e1e !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
 }
-.gr-textbox, .gr-markdown {
-    background-color: #1e1e1e;
-    color: #f0f0f0;
-    border: 1px solid #444;
+
+.requirements-editor {
+    border-radius: 12px !important;
+    border: 2px solid #e1e8ed !important;
+    font-family: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace !important;
+    background: #282828 !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important;
 }
-"""
 
-# -------------------------
-# Main Gradio UI
-# -------------------------
-with gr.Blocks(css=DARK_CSS) as demo:
-    gr.Markdown("# 🛡 Sandbox Dashboard")
+.action-button {
+    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    padding: 14px 28px !important;
+    color: white !important;
+    font-weight: 600 !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 6px 18px rgba(79, 172, 254, 0.4) !important;
+    font-size: 15px !important;
+}
 
-    with gr.Row():
-        code_input = gr.Textbox(label="Main Code", lines=10)
-        req_input = gr.Textbox(label="requirements.txt", lines=5)
-    launch_btn = gr.Button("Launch Sandbox")
-    launch_status = gr.Textbox(label="Launch Status")
-
-    sandbox_container = gr.Column()
-
-    # -------------------------
-    # Handlers for dynamic sandbox cards
-    # -------------------------
-    def on_launch(code, requirements):
-        sandbox_id, backend_or_error = launch_sandbox_api(code, requirements)
-        if not sandbox_id:
-            return f"Error: {backend_or_error}"
-
-        # Create a new card in the container
-        with sandbox_container:
-            with gr.Column(elem_classes="sandbox-card") as card:
-                gr.Markdown(f"**Sandbox ID:** {sandbox_id}")
-                gr.Markdown(f"**Backend:** {backend_or_error}")
-                runtime_box = gr.Textbox(label="Runtime (sec)", value="0", interactive=False)
-                logs_box = gr.Textbox(label="Logs", lines=10, interactive=False)
+.action-button:hover {
+    transform: translateY(-3px) !important;
+    box-shadow: 0 12px 30px rgba(79, 172, 254, 0.6) !important;
+}
 
-                with gr.Row():
-                    code_box = gr.Textbox(label="Main Code", value=code, lines=10, interactive=False)
-                    req_box = gr.Textbox(label="requirements.txt", value=requirements, lines=10, interactive=False)
+.stop-button {
+    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
+    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.4) !important;
+}
 
-                # Buttons
-                logs_btn = gr.Button("Fetch Logs")
-                kill_btn = gr.Button("Kill Sandbox")
-                status_btn = gr.Button("Check Status")
+.stop-button:hover {
+    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.6) !important;
+}
 
-                # Assign clicks using lambdas
-                logs_btn.click(lambda sid=sandbox_id: fetch_logs_api(sid), inputs=[], outputs=logs_box)
-                kill_btn.click(lambda sid=sandbox_id: kill_sandbox_api(sid), inputs=[], outputs=logs_box)
-                status_btn.click(lambda sid=sandbox_id: status_sandbox_api(sid), inputs=[], outputs=runtime_box)
+.logs-output {
+    background: #0d1117 !important;
+    color: #c9d1d9 !important;
+    border-radius: 12px !important;
+    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
+    font-size: 13px !important;
+    line-height: 1.6 !important;
+    border: 1px solid #30363d !important;
+    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3) !important;
+}
+
+.header-title {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-size: 3rem;
+    font-weight: 900;
+    text-align: center;
+    margin-bottom: 10px;
+    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
 
-        return f"Sandbox {sandbox_id} launched on {backend_or_error}"
+.header-subtitle {
+    text-align: center;
+    color: rgba(255, 255, 255, 0.8);
+    font-size: 1.2rem;
+    margin-bottom: 40px;
+    font-weight: 300;
+}
+
+.ide-tabs {
+    border-radius: 15px;
+    overflow: hidden;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+.file-icon {
+    font-size: 1.2em;
+    margin-right: 8px;
+}
+
+.section-header {
+    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    font-weight: 700;
+    font-size: 1.3rem;
+    margin: 20px 0 15px 0;
+}
+"""
+
+def auto_refresh_status():
+    return sandbox.get_status()
+
+def auto_refresh_logs():
+    return sandbox.fetch_logs()
+
+def load_sample_files():
+    """Load sample files into the editors"""
+    return SAMPLE_MAIN_PY, SAMPLE_REQUIREMENTS_TXT
+
+# Build the IDE interface
+with gr.Blocks(css=custom_css, title="Sandbox Cloud IDE", theme=gr.themes.Soft()) as demo:
+    gr.HTML("""
+    <div class="header-title">☁️ Sandbox Cloud IDE</div>
+    <div class="header-subtitle">Professional cloud development environment with dual-engine support</div>
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=3):
+            # Engine & Connection Section
+            with gr.Group(elem_classes=["ide-container"]):
+                gr.HTML('<div class="section-header">🔌 Engine Connection</div>')
+                
+                with gr.Row():
+                    connect_btn = gr.Button("🔄 Connect to Random Engine", variant="primary", elem_classes=["action-button"])
+                    load_samples_btn = gr.Button("📄 Load Sample Files", elem_classes=["action-button"])
+                
+                current_engine_display = gr.Textbox(
+                    value="No engine selected",
+                    label="Current Engine",
+                    interactive=False,
+                    elem_classes=["engine-display"]
+                )
+                
+                connection_status = gr.Textbox(
+                    value="🔴 Not connected", 
+                    label="Connection Status",
+                    interactive=False,
+                    elem_classes=["status-card"]
+                )
+            
+            # IDE Section
+            with gr.Group(elem_classes=["ide-container"]):
+                gr.HTML('<div class="section-header">💻 Cloud IDE</div>')
+                
+                with gr.Tab("📄 main.py"):
+                    main_py_editor = gr.Code(
+                        value="# Write your Python code here\nprint('Hello, Sandbox Cloud!')",
+                        label="main.py",
+                        language="python",
+                        lines=20,
+                        elem_classes=["code-editor"],
+                        show_label=False
+                    )
+                
+                with gr.Tab("📦 requirements.txt"):
+                    requirements_editor = gr.Textbox(
+                        value="# Add your Python package dependencies here\n# One package per line\n",
+                        label="requirements.txt",
+                        lines=20,
+                        elem_classes=["requirements-editor"],
+                        show_label=False,
+                        max_lines=20
+                    )
+                
+                # Control Buttons
+                with gr.Row():
+                    launch_btn = gr.Button("🚀 Deploy & Run", variant="primary", elem_classes=["action-button"], size="lg")
+                    kill_btn = gr.Button("🛑 Stop Sandbox", elem_classes=["action-button", "stop-button"], size="lg")
+                
+                # Launch Output
+                launch_output = gr.Textbox(
+                    label="Deployment Output",
+                    lines=6,
+                    interactive=False,
+                    placeholder="Deployment status will appear here...",
+                    elem_classes=["logs-output"]
+                )
+        
+        with gr.Column(scale=1):
+            # Status Monitor
+            with gr.Group(elem_classes=["ide-container"]):
+                gr.HTML('<div class="section-header">📊 Status Monitor</div>')
+                
+                status_display = gr.Textbox(
+                    value="🔴 Disconnected",
+                    label="Sandbox Status",
+                    interactive=False,
+                    elem_classes=["status-card"]
+                )
+                
+                status_refresh_btn = gr.Button("🔄 Refresh", elem_classes=["action-button"])
+                
+                # Auto-refresh Settings
+                gr.Markdown("#### ⚙️ Auto-Refresh")
+                auto_refresh_status_cb = gr.Checkbox(
+                    label="Status (5s)", 
+                    value=False
+                )
+                auto_refresh_logs_cb = gr.Checkbox(
+                    label="Logs (10s)", 
+                    value=False
+                )
+    
+    # System Logs Section
+    with gr.Group(elem_classes=["ide-container"]):
+        gr.HTML('<div class="section-header">📋 System Logs</div>')
+        
+        with gr.Row():
+            fetch_logs_btn = gr.Button("📋 Fetch Latest Logs", elem_classes=["action-button"])
+            gr.HTML('<div style="flex-grow: 1;"></div>')  # Spacer
+        
+        logs_display = gr.Textbox(
+            label="System Logs",
+            lines=15,
+            interactive=False,
+            elem_classes=["logs-output"],
+            placeholder="📋 System logs will appear here...\n\nClick 'Fetch Latest Logs' to view output from your running code.",
+            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]
+    )
+    
+    status_refresh_btn.click(
+        fn=sandbox.get_status,
+        outputs=[status_display]
+    )
+    
+    fetch_logs_btn.click(
+        fn=sandbox.fetch_logs,
+        outputs=[logs_display]
+    )
+    
+    # Auto-refresh Timers
+    status_timer = gr.Timer(5)
+    logs_timer = gr.Timer(10)
+    
+    status_timer.tick(
+        fn=auto_refresh_status,
+        outputs=[status_display],
+        show_progress=False
+    )
+    
+    logs_timer.tick(
+        fn=auto_refresh_logs,
+        outputs=[logs_display],
+        show_progress=False
+    )
+    
+    # Timer Controls
+    auto_refresh_status_cb.change(
+        lambda enabled: gr.Timer(5 if enabled else None),
+        inputs=[auto_refresh_status_cb],
+        outputs=[status_timer]
+    )
+    
+    auto_refresh_logs_cb.change(
+        lambda enabled: gr.Timer(10 if enabled else None),
+        inputs=[auto_refresh_logs_cb],
+        outputs=[logs_timer]
+    )
 
-    launch_btn.click(on_launch, inputs=[code_input, req_input], outputs=launch_status)
+    # Footer
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 50px; color: rgba(255,255,255,0.7); font-size: 0.95rem;">
+        <p>☁️ Sandbox Cloud Service • Dual-Engine Architecture • Built with ❤️ by ChocoLaboratory</p>
+        <p style="font-size: 0.8rem; margin-top: 10px;">
+            Available Engines: SANDBOXBACKEND1, SANDBOXBACKEND2
+        </p>
+    </div>
+    """)
 
-demo.launch()
+if __name__ == "__main__":
+    demo.launch(
+        share=True,
+        server_name="0.0.0.0",
+        server_port=7860,
+        show_error=True
+    )