Spaces:

Artificial-superintelligence
/

Athspi

Running

App Files Files Community

Artificial-superintelligence commited on Dec 3, 2024

Commit

b15a70c

verified ·

1 Parent(s): 1917e67

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +52 -88

templates/index.html CHANGED Viewed

@@ -1,4 +1,3 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
@@ -8,115 +7,80 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            background-color: #1e1e1e;
-            color: #c7c7c7;
-            margin: 0;
-            padding: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
         }
-        .terminal {
-            width: 80%;
-            height: 70%;
-            background: #2e2e2e;
-            border-radius: 8px;
-            padding: 15px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
-            display: flex;
-            flex-direction: column;
-        }
-        .terminal-output {
-            flex: 1;
-            background: #1e1e1e;
             padding: 10px;
             border-radius: 5px;
-            overflow-y: auto;
-            margin-bottom: 10px;
-            white-space: pre-wrap;
         }
-        .terminal-input {
             display: flex;
         }
-        input {
             flex: 1;
             padding: 10px;
-            border-radius: 5px;
-            border: 1px solid #444;
-            background: #1e1e1e;
-            color: #c7c7c7;
         }
         button {
-            margin-left: 10px;
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            background: #0078d4;
-            color: white;
-            cursor: pointer;
         }
-        button:hover {
-            background: #005bb5;
         }
     </style>
 </head>
 <body>
-    <div class="terminal">
-        <div id="output" class="terminal-output">Python Terminal Ready...</div>
-        <div class="terminal-input">
-            <input type="text" id="code-input" placeholder="Enter Python code or shell command (e.g., !git clone ...)" />
-            <button onclick="executeCode()">Run</button>
-            <button onclick="cleanup()">Cleanup</button>
-        </div>
     </div>
-    <script>
-        function executeCode() {
-            const codeInput = document.getElementById("code-input");
-            const outputDiv = document.getElementById("output");
-            outputDiv.innerHTML += `\n> ${codeInput.value}<br>Running...`;
-            fetch("/execute", {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ code: codeInput.value }),
-            })
-            .then(response => {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let content = "";
-                function readStream() {
-                    reader.read().then(({ done, value }) => {
-                        if (done) return;
-                        content += decoder.decode(value);
-                        outputDiv.innerHTML += content;
-                        outputDiv.scrollTop = outputDiv.scrollHeight;
-                        readStream();
-                    });
-                }
-                readStream();
-            })
-            .catch(error => {
-                outputDiv.innerHTML += `<br>Error: ${error}`;
-                outputDiv.scrollTop = outputDiv.scrollHeight;
-            });
-            codeInput.value = "";
-        }
-        function cleanup() {
-            fetch("/cleanup", { method: "POST" })
-                .then(response => response.json())
-                .then(data => {
-                    const outputDiv = document.getElementById("output");
-                    outputDiv.innerHTML += `\n${data.result}`;
-                    outputDiv.scrollTop = outputDiv.scrollHeight;
                 });
-        }
-        window.addEventListener("beforeunload", cleanup);
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <style>
         body {
             font-family: Arial, sans-serif;
+            margin: 20px;
         }
+        #terminal {
+            width: 100%;
+            height: 300px;
+            background: #000;
+            color: #0f0;
+            overflow-y: auto;
             padding: 10px;
             border-radius: 5px;
         }
+        #input-area {
             display: flex;
+            margin-top: 10px;
         }
+        #command-input {
             flex: 1;
             padding: 10px;
+            font-size: 16px;
         }
         button {
+            padding: 10px 15px;
+            font-size: 16px;
+            margin-left: 5px;
         }
+        .audio-link {
+            margin-top: 10px;
         }
     </style>
 </head>
 <body>
+    <h1>Python Terminal</h1>
+    <div id="terminal"></div>
+    <div id="input-area">
+        <input type="text" id="command-input" placeholder="Enter Python or shell command">
+        <button onclick="runCommand()">Run</button>
     </div>
+    <div id="audio-container"></div>
+    <script>
+        const terminal = document.getElementById("terminal");
+        const commandInput = document.getElementById("command-input");
+        const audioContainer = document.getElementById("audio-container");
+        function appendToTerminal(text) {
+            terminal.innerHTML += text + "<br>";
+            terminal.scrollTop = terminal.scrollHeight;
+        }
+        async function runCommand() {
+            const command = commandInput.value;
+            if (!command.trim()) return;
+            appendToTerminal("> " + command);
+            commandInput.value = "";
+            try {
+                const response = await fetch("/run", {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({ command }),
                 });
+                const result = await response.json();
+                if (result.output) appendToTerminal(result.output);
+                if (result.error) appendToTerminal("<span style='color:red'>" + result.error + "</span>");
+                if (result.audio_file) {
+                    const audioLink = `<a href="/download/${result.audio_file}" target="_blank" class="audio-link">Download/Play Audio</a>`;
+                    audioContainer.innerHTML = audioLink;
+                }
+            } catch (error) {
+                appendToTerminal("<span style='color:red'>Error: " + error.message + "</span>");
+            }
+        }
     </script>
 </body>
+</html>