Spaces:

ChocoLaboratory
/

Sandbox

Runtime error

App Files Files Community

theguywhosucks commited on Sep 24, 2025

Commit

0e92a82

verified ·

1 Parent(s): aba9687

Update app.py

Browse files

Files changed (1) hide show

app.py +401 -232

app.py CHANGED Viewed

@@ -45,7 +45,7 @@ class SandboxManager:
                 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)}", ""
@@ -56,9 +56,9 @@ class SandboxManager:
         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:
@@ -66,7 +66,7 @@ class SandboxManager:
         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)}", ""
@@ -87,186 +87,317 @@ 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;
-    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);
 }
-.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);
 }
-.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;
 }
-.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;
 }
-.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;
 }
-.action-button:hover {
-    transform: translateY(-3px) !important;
-    box-shadow: 0 12px 30px rgba(79, 172, 254, 0.6) !important;
 }
-.stop-button {
-    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
-    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.4) !important;
 }
-.stop-button:hover {
-    box-shadow: 0 12px 30px rgba(255, 107, 107, 0.6) !important;
 }
-.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);
 }
-.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;
 }
 """
@@ -280,116 +411,156 @@ 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(
@@ -454,11 +625,9 @@ with gr.Blocks(css=custom_css, title="Sandbox Cloud IDE", theme=gr.themes.Soft()
     # 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>
     """)

                 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)}", ""
         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:
         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)}", ""
 # Sample code templates
 SAMPLE_MAIN_PY = """#!/usr/bin/env python3
 \"\"\"
+AWS Sandbox Environment
+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)
+    # Application logic here
+    data = {
+        "service": "aws-sandbox",
+        "status": "running",
+        "timestamp": datetime.now().isoformat(),
+        "environment": "production"
+    }
+    print("Application Output:")
+    print(json.dumps(data, indent=2))
+    # 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}")
 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
 """
+# AWS-style CSS
+aws_css = """
+@import url('https://fonts.googleapis.com/css2?family=Amazon+Ember:wght@300;400;500;600;700&display=swap');
 .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;
     min-height: 100vh;
+    margin: 0;
+    padding: 0;
 }
+/* AWS Header */
+.aws-header {
+    background-color: #232f3e !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;
 }
+.aws-nav {
+    background-color: #37475a !important;
+    color: #ffffff !important;
+    padding: 8px 20px !important;
+    font-size: 13px !important;
+    border-bottom: 1px solid #485563 !important;
 }
+.aws-service-title {
+    font-size: 20px !important;
+    font-weight: 500 !important;
+    color: #232f3e !important;
+    margin: 20px 0 10px 0 !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;
 }
+.aws-container-header {
+    background-color: #fafbfc !important;
+    border-bottom: 1px solid #d5dbdb !important;
+    padding: 16px 20px !important;
+    font-weight: 500 !important;
+    color: #232f3e !important;
+    font-size: 16px !important;
+    border-radius: 8px 8px 0 0 !important;
 }
+.aws-container-content {
+    padding: 20px !important;
+}
+.aws-button-primary {
+    background-color: #ec7211 !important;
     color: white !important;
+    border: 1px solid #ec7211 !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
+    transition: all 0.2s ease !important;
+}
+.aws-button-primary:hover {
+    background-color: #d86613 !important;
+    border-color: #d86613 !important;
 }
+.aws-button-secondary {
+    background-color: white !important;
+    color: #232f3e !important;
+    border: 1px solid #d5dbdb !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !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;
+}
+.aws-button-danger {
+    background-color: #d13212 !important;
+    color: white !important;
+    border: 1px solid #d13212 !important;
+    border-radius: 4px !important;
+    padding: 8px 16px !important;
+    font-size: 14px !important;
+    font-weight: 500 !important;
+    cursor: pointer !important;
 }
+.aws-button-danger:hover {
+    background-color: #b02e0c !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;
+}
+.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;
+}
+.aws-status-warning {
+    color: #b7911a !important;
+    background-color: #fffbf0 !important;
+    border: 1px solid #b7911a !important;
+    border-radius: 4px !important;
+    padding: 12px 16px !important;
+    font-size: 14px !important;
+    font-weight: 500 !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;
     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;
 }
+.aws-sidebar {
+    background-color: white !important;
+    border: 1px solid #d5dbdb !important;
+    border-radius: 8px !important;
+    padding: 0 !important;
+    height: fit-content !important;
 }
+.aws-sidebar-header {
+    background-color: #fafbfc !important;
+    border-bottom: 1px solid #d5dbdb !important;
+    padding: 12px 16px !important;
+    font-weight: 500 !important;
+    color: #232f3e !important;
+    font-size: 14px !important;
+    border-radius: 8px 8px 0 0 !important;
 }
+.aws-sidebar-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;
+}
+.aws-tabs {
+    border: 1px solid #d5dbdb !important;
+    border-radius: 8px !important;
+    background-color: white !important;
+    overflow: hidden !important;
+}
+.aws-tab-content {
+    padding: 16px !important;
+}
+.aws-metric {
+    text-align: center !important;
+    padding: 12px !important;
+    border-right: 1px solid #d5dbdb !important;
+}
+.aws-metric:last-child {
+    border-right: none !important;
+}
+.aws-metric-value {
+    font-size: 24px !important;
+    font-weight: 600 !important;
+    color: #232f3e !important;
+}
+.aws-metric-label {
+    font-size: 12px !important;
+    color: #687078 !important;
+    margin-top: 4px !important;
 }
 """
     """Load sample files into the editors"""
     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:
+    # AWS 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>
+    <div class="aws-breadcrumb">
+        Home > Sandbox Service > 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"]):
+                    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"])
+                    current_engine_display = gr.Textbox(
+                        value="No engine selected",
+                        label="Active Compute Engine",
+                        interactive=False,
+                        elem_classes=["aws-info-box"]
+                    )
+                    connection_status = gr.Textbox(
+                        value="Disconnected",
+                        label="Connection Status",
+                        interactive=False,
+                        elem_classes=["aws-status-error"]
+                    )
+            # 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
+                            )
+                    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
+                            )
+                    # Deployment Actions
+                    gr.HTML('<div style="margin-top: 16px;"></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")
+                    # Deployment Output
+                    gr.HTML('<div class="aws-form-label" style="margin-top: 16px;">Deployment Status</div>')
+                    launch_output = gr.Textbox(
+                        lines=6,
+                        interactive=False,
+                        placeholder="Deployment status and output will appear here...",
+                        elem_classes=["aws-logs"],
                         show_label=False
                     )
+        # Sidebar
         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"]):
+                    status_display = gr.Textbox(
+                        value="Stopped",
+                        label="Current Status",
+                        interactive=False,
+                        elem_classes=["aws-status-warning"]
+                    )
+                    status_refresh_btn = gr.Button("Refresh Status", elem_classes=["aws-button-secondary"], size="sm")
+                    gr.HTML('<div style="margin: 16px 0; border-bottom: 1px solid #d5dbdb;"></div>')
+                    # Auto-refresh controls
+                    gr.HTML('<div class="aws-form-label">Auto-Refresh Settings</div>')
+                    auto_refresh_status_cb = gr.Checkbox(
+                        label="Status monitoring (5s)",
+                        value=False
+                    )
+                    auto_refresh_logs_cb = gr.Checkbox(
+                        label="Log streaming (10s)",
+                        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>
+                    </div>
+                    <div class="aws-metric">
+                        <div class="aws-metric-value">0</div>
+                        <div class="aws-metric-label">Memory (MB)</div>
+                    </div>
+                    <div class="aws-metric">
+                        <div class="aws-metric-value">0</div>
+                        <div class="aws-metric-label">Uptime (min)</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"]):
+            with gr.Row():
+                fetch_logs_btn = gr.Button("Fetch Logs", elem_classes=["aws-button-secondary"])
+                gr.HTML('<div style="flex-grow: 1;"></div>')
+            gr.HTML('<div class="aws-form-label" style="margin-top: 12px;">CloudWatch Logs</div>')
+            logs_display = gr.Textbox(
+                lines=12,
+                interactive=False,
+                elem_classes=["aws-logs"],
+                placeholder="Application logs will appear here...\n\nLogs are automatically captured from your running application.",
+                show_label=False
+            )
     # Event Handlers
     connect_btn.click(
     # 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>
     """)