refactor

app.py

@@ -17,6 +17,9 @@ from smolagents.gradio_ui import GradioUI, stream_to_gradio
 from e2bqwen import QwenVLAPIModel, E2BVisionAgent
 
 E2B_API_KEY = os.getenv("E2B_API_KEY")
+HF_TOKEN = os.getenv("HUGGINGFACE_API_KEY")
+HF_ENDPOINT_URL = os.getenv("HUGGINGFACE_ENPOINT_URL")
+
 SANDBOXES = {}
 SANDBOX_METADATA = {}
 SANDBOX_TIMEOUT = 600
@@ -26,269 +29,29 @@ TMP_DIR = './tmp/'
 if not os.path.exists(TMP_DIR):
     os.makedirs(TMP_DIR)
 
-hf_token = os.getenv("HUGGINGFACE_API_KEY")
-login(token=hf_token)
+CSS_PATH = "./custom.css"
+SANDBOX_TEMPLATE = "./sandbox.html"
+FOOTER_PATH = "./footer.html"
+JS_PATH = "./custom.js"
+
+login(token=HF_TOKEN)
 model = QwenVLAPIModel(
-    hf_base_url="https://s41ydkv0iyjeokyj.us-east-1.aws.endpoints.huggingface.cloud",
-    hf_token = hf_token,
+    hf_base_url=HF_ENDPOINT_URL,
+    hf_token = HF_TOKEN,
 )
 
+with open(CSS_PATH, "r") as f:
+    custom_css = f.read().replace("<<WIDTH>>", str(WIDTH+15)).replace("<<HEIGHT>>", str(HEIGHT+10))
+
+with open(FOOTER_PATH, "r") as f:
+    footer_html = f.read()
+
+with open(SANDBOX_TEMPLATE, "r") as f:
+    sandbox_html_template = f.read().replace("<<WIDTH>>", str(WIDTH+15)).replace("<<HEIGHT>>", str(HEIGHT+10))
+
+with open(JS_PATH, "r") as f:
+    custom_js = f.read()
 
-custom_css = """
-.sandbox-container {
-    position: relative;
-    width: 910px;
-    overflow: hidden;
-    margin: auto;
-}
-.sandbox-container {
-    height: 800px;
-}
-.sandbox-frame {
-    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 910px;
-    height: 800px;
-    pointer-events:none;
-}
-
-.sandbox-iframe, .bsod-image {
-    position: absolute;
-    width: <<WIDTH>>px;
-    height: <<HEIGHT>>px;
-    border: 4px solid #444444;
-    transform-origin: 0 0;
-}
-
-/* Colored label for task textbox */
-.primary-color-label label span {
-    font-weight: bold;
-    color: var(--color-accent);
-}
-
-/* Status indicator light */
-.status-bar {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    flex-align:center;
-    z-index: 100;
-}
-
-.status-indicator {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-}
-
-.status-text {
-    font-size: 16px;
-    font-weight: bold;
-    padding: 0 10px;
-    text-shadow: none;
-}
-
-.status-interactive {
-    background-color: #2ecc71;
-    animation: blink 2s infinite;  
-}
-
-.status-view-only {
-    background-color: #e74c3c;
-}
-
-.status-error {
-    background-color: #e74c3c;
-    animation: blink-error 1s infinite;
-}
-
-@keyframes blink-error {
-    0% { background-color: rgba(231, 76, 60, 1); }
-    50% { background-color: rgba(231, 76, 60, 0.4); }
-    100% { background-color: rgba(231, 76, 60, 1); }
-}
-
-@keyframes blink {
-    0% { background-color: rgba(46, 204, 113, 1); }  /* Green at full opacity */
-    50% { background-color: rgba(46, 204, 113, 0.4); }  /* Green at 40% opacity */
-    100% { background-color: rgba(46, 204, 113, 1); }  /* Green at full opacity */
-}
-
-.logo-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
-    width: 100%;
-    box-sizing: border-box;
-}
-
-.logo-item {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 15px;
-}
-
-.logo-item img {
-    height: 60px;
-    object-fit: contain;
-}
-""".replace("<<WIDTH>>", str(WIDTH+15)).replace("<<HEIGHT>>", str(HEIGHT+10))
-
-footer_html="""
-<h3 style="text-align: center; margin-top:100px;"><i>Powered by:</i></h2>
-<div class="logo-container">
-    <a class="logo-item" href="https://github.com/huggingface/smolagents">
-    <img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/smolagents.png" alt="Smolagents logo">
-    </a>
-    <a class="logo-item" href="https://huggingface.co/Qwen/Qwen2.5-VL-32B-Instruct">
-    <img src="https://upload.wikimedia.org/wikipedia/en/8/85/Logo_of_Qwen.png" alt="Qwen logo", style="height:48px;margin-top=10px;">
-    </a>
-    <a class="logo-item" href="https://github.com/e2b-dev/desktop">
-    <img src="https://image.pitchbook.com/XcarTFiUTDTVBfBep3JKHtiTAob1714067332850_200x200" alt="e2b logo", style="height:80px;">
-    </a>
-</div>
-"""
-sandbox_html_template = """
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Oxanium:[email protected]&display=swap');
-</style>
-<div class="sandbox-container">
-    <div class="status-bar">
-        <div class="status-indicator {status_class}"></div>
-        <div class="status-text">{status_text}</div>
-    </div>
-    <iframe id="sandbox-iframe"
-        src="{stream_url}" 
-        class="sandbox-iframe"
-        style="display: block;"
-        allowfullscreen>
-    </iframe>
-    <img src="https://huggingface.co/datasets/mfarre/servedfiles/resolve/main/blue_screen_of_death.gif" class="bsod-image" style="display: none;"/>
-    <img src="https://huggingface.co/datasets/m-ric/images/resolve/main/HUD_thom.png" class="sandbox-frame" />
-</div>
-""".replace("<<WIDTH>>", str(WIDTH+15)).replace("<<HEIGHT>>", str(HEIGHT+10))
-
-custom_js = """function() {
-    document.body.classList.add('dark');
-
-    // Function to check if sandbox is timing out
-    const checkSandboxTimeout = function() {
-        const timeElement = document.getElementById('sandbox-creation-time');
-        
-        if (timeElement) {
-            const creationTime = parseFloat(timeElement.getAttribute('data-time'));
-            const timeoutValue = parseFloat(timeElement.getAttribute('data-timeout'));
-            const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
-            
-            const elapsedTime = currentTime - creationTime;
-            console.log("Sandbox running for: " + elapsedTime + " seconds of " + timeoutValue + " seconds");
-            
-            // If we've exceeded the timeout, show BSOD
-            if (elapsedTime >= timeoutValue) {
-                console.log("Sandbox timeout! Showing BSOD");
-                showBSOD('Error');
-                // Don't set another timeout, we're done checking
-                return;
-            }
-        }
-        
-        // Continue checking every 5 seconds
-        setTimeout(checkSandboxTimeout, 5000);
-    };
-    
-    const showBSOD = function(statusText = 'Error') {
-        console.log("Showing BSOD with status: " + statusText);
-        const iframe = document.getElementById('sandbox-iframe');
-        const bsod = document.getElementById('bsod-image');
-        
-        if (iframe && bsod) {
-            iframe.style.display = 'none';
-            bsod.style.display = 'block';
-
-            // Update status indicator
-            const statusIndicator = document.querySelector('.status-indicator');
-            const statusTextElem = document.querySelector('.status-text');
-
-            if (statusIndicator) {
-                statusIndicator.className = 'status-indicator status-error';
-            }
-            
-            if (statusTextElem) {
-                statusTextElem.innerText = statusText;
-            }
-        }
-    };
-
-    const resetBSOD = function() {
-        console.log("Resetting BSOD display");
-        const iframe = document.getElementById('sandbox-iframe');
-        const bsod = document.getElementById('bsod-image');
-        
-        if (iframe && bsod) {
-            if (bsod.style.display === 'block') {
-                // BSOD is currently showing, reset it
-                iframe.style.display = 'block';
-                bsod.style.display = 'none';
-                console.log("BSOD reset complete");
-                return true; // Indicates reset was performed
-            }
-        }
-        return false; // No reset needed
-    };
-    
-    // Function to monitor for error messages
-    const monitorForErrors = function() {
-        console.log("Error monitor started");
-        const resultsInterval = setInterval(function() {
-            const resultsElements = document.querySelectorAll('textarea, .output-text');
-            for (let elem of resultsElements) {
-                const content = elem.value || elem.innerText || '';
-                if (content.includes('Error running agent')) {
-                    console.log("Error detected!");
-                    showBSOD('Error');
-                    clearInterval(resultsInterval);
-                    break;
-                }
-            }
-        }, 1000);
-    };
-    
-    
-    // Start monitoring for timeouts immediately
-    checkSandboxTimeout();
-    
-    // Start monitoring for errors
-    setTimeout(monitorForErrors, 3000);
-    
-    // Also monitor for errors after button clicks
-    document.addEventListener('click', function(e) {
-        if (e.target.tagName === 'BUTTON') {
-            if (e.target.innerText === "Let's go!") {
-                resetBSOD();
-            }
-            setTimeout(monitorForErrors, 3000);
-        }
-    });
-
-    // Set up an interval to click the refresh button every 5 seconds
-    setInterval(function() {
-        const btn = document.getElementById('refresh-log-btn');
-        if (btn) btn.click();
-    }, 5000);
-
-    // Force dark mode
-    const params = new URLSearchParams(window.location.search);
-    if (!params.has('__theme')) {
-        params.set('__theme', 'dark');
-        window.location.search = params.toString();
-    }
-}
-"""
 
 def write_to_console_log(log_file_path, message):
     """

custom.css

@@ -0,0 +1,103 @@
+
+.sandbox-container {
+    position: relative;
+    width: 910px;
+    overflow: hidden;
+    margin: auto;
+}
+.sandbox-container {
+    height: 800px;
+}
+.sandbox-frame {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 910px;
+    height: 800px;
+    pointer-events:none;
+}
+
+.sandbox-iframe, .bsod-image {
+    position: absolute;
+    width: <<WIDTH>>px;
+    height: <<HEIGHT>>px;
+    border: 4px solid #444444;
+    transform-origin: 0 0;
+}
+
+/* Colored label for task textbox */
+.primary-color-label label span {
+    font-weight: bold;
+    color: var(--color-accent);
+}
+
+/* Status indicator light */
+.status-bar {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex-align:center;
+    z-index: 100;
+}
+
+.status-indicator {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+}
+
+.status-text {
+    font-size: 16px;
+    font-weight: bold;
+    padding: 0 10px;
+    text-shadow: none;
+}
+
+.status-interactive {
+    background-color: #2ecc71;
+    animation: blink 2s infinite;  
+}
+
+.status-view-only {
+    background-color: #e74c3c;
+}
+
+.status-error {
+    background-color: #e74c3c;
+    animation: blink-error 1s infinite;
+}
+
+@keyframes blink-error {
+    0% { background-color: rgba(231, 76, 60, 1); }
+    50% { background-color: rgba(231, 76, 60, 0.4); }
+    100% { background-color: rgba(231, 76, 60, 1); }
+}
+
+@keyframes blink {
+    0% { background-color: rgba(46, 204, 113, 1); }  /* Green at full opacity */
+    50% { background-color: rgba(46, 204, 113, 0.4); }  /* Green at 40% opacity */
+    100% { background-color: rgba(46, 204, 113, 1); }  /* Green at full opacity */
+}
+
+.logo-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.logo-item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 15px;
+}
+
+.logo-item img {
+    height: 60px;
+    object-fit: contain;
+}

custom.js

@@ -0,0 +1,115 @@
+function() {
+    document.body.classList.add('dark');
+
+    // Function to check if sandbox is timing out
+    const checkSandboxTimeout = function() {
+        const timeElement = document.getElementById('sandbox-creation-time');
+        
+        if (timeElement) {
+            const creationTime = parseFloat(timeElement.getAttribute('data-time'));
+            const timeoutValue = parseFloat(timeElement.getAttribute('data-timeout'));
+            const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
+            
+            const elapsedTime = currentTime - creationTime;
+            console.log("Sandbox running for: " + elapsedTime + " seconds of " + timeoutValue + " seconds");
+            
+            // If we've exceeded the timeout, show BSOD
+            if (elapsedTime >= timeoutValue) {
+                console.log("Sandbox timeout! Showing BSOD");
+                showBSOD('Error');
+                // Don't set another timeout, we're done checking
+                return;
+            }
+        }
+        
+        // Continue checking every 5 seconds
+        setTimeout(checkSandboxTimeout, 5000);
+    };
+    
+    const showBSOD = function(statusText = 'Error') {
+        console.log("Showing BSOD with status: " + statusText);
+        const iframe = document.getElementById('sandbox-iframe');
+        const bsod = document.getElementById('bsod-image');
+        
+        if (iframe && bsod) {
+            iframe.style.display = 'none';
+            bsod.style.display = 'block';
+
+            // Update status indicator
+            const statusIndicator = document.querySelector('.status-indicator');
+            const statusTextElem = document.querySelector('.status-text');
+
+            if (statusIndicator) {
+                statusIndicator.className = 'status-indicator status-error';
+            }
+            
+            if (statusTextElem) {
+                statusTextElem.innerText = statusText;
+            }
+        }
+    };
+
+    const resetBSOD = function() {
+        console.log("Resetting BSOD display");
+        const iframe = document.getElementById('sandbox-iframe');
+        const bsod = document.getElementById('bsod-image');
+        
+        if (iframe && bsod) {
+            if (bsod.style.display === 'block') {
+                // BSOD is currently showing, reset it
+                iframe.style.display = 'block';
+                bsod.style.display = 'none';
+                console.log("BSOD reset complete");
+                return true; // Indicates reset was performed
+            }
+        }
+        return false; // No reset needed
+    };
+    
+    // Function to monitor for error messages
+    const monitorForErrors = function() {
+        console.log("Error monitor started");
+        const resultsInterval = setInterval(function() {
+            const resultsElements = document.querySelectorAll('textarea, .output-text');
+            for (let elem of resultsElements) {
+                const content = elem.value || elem.innerText || '';
+                if (content.includes('Error running agent')) {
+                    console.log("Error detected!");
+                    showBSOD('Error');
+                    clearInterval(resultsInterval);
+                    break;
+                }
+            }
+        }, 1000);
+    };
+    
+    
+    // Start monitoring for timeouts immediately
+    checkSandboxTimeout();
+    
+    // Start monitoring for errors
+    setTimeout(monitorForErrors, 3000);
+    
+    // Also monitor for errors after button clicks
+    document.addEventListener('click', function(e) {
+        if (e.target.tagName === 'BUTTON') {
+            if (e.target.innerText === "Let's go!") {
+                resetBSOD();
+            }
+            setTimeout(monitorForErrors, 3000);
+        }
+    });
+
+    // Set up an interval to click the refresh button every 5 seconds
+    setInterval(function() {
+        const btn = document.getElementById('refresh-log-btn');
+        if (btn) btn.click();
+    }, 5000);
+
+    // Force dark mode
+    const params = new URLSearchParams(window.location.search);
+    if (!params.has('__theme')) {
+        params.set('__theme', 'dark');
+        window.location.search = params.toString();
+    }
+}

footer.html

@@ -0,0 +1,12 @@
+<h3 style="text-align: center; margin-top:100px;"><i>Powered by:</i></h2>
+    <div class="logo-container">
+        <a class="logo-item" href="https://github.com/huggingface/smolagents">
+        <img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/smolagents/smolagents.png" alt="Smolagents logo">
+        </a>
+        <a class="logo-item" href="https://huggingface.co/Qwen/Qwen2.5-VL-32B-Instruct">
+        <img src="https://upload.wikimedia.org/wikipedia/en/8/85/Logo_of_Qwen.png" alt="Qwen logo", style="height:48px;margin-top=10px;">
+        </a>
+        <a class="logo-item" href="https://github.com/e2b-dev/desktop">
+        <img src="https://image.pitchbook.com/XcarTFiUTDTVBfBep3JKHtiTAob1714067332850_200x200" alt="e2b logo", style="height:80px;">
+        </a>
+    </div>

sandbox.html

@@ -0,0 +1,17 @@
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Oxanium:[email protected]&display=swap');
+    </style>
+    <div class="sandbox-container">
+        <div class="status-bar">
+            <div class="status-indicator {status_class}"></div>
+            <div class="status-text">{status_text}</div>
+        </div>
+        <iframe id="sandbox-iframe"
+            src="{stream_url}" 
+            class="sandbox-iframe"
+            style="display: block;"
+            allowfullscreen>
+        </iframe>
+        <img src="https://huggingface.co/datasets/mfarre/servedfiles/resolve/main/blue_screen_of_death.gif" class="bsod-image" style="display: none;"/>
+        <img src="https://huggingface.co/datasets/m-ric/images/resolve/main/HUD_thom.png" class="sandbox-frame" />
+    </div>