Spaces:

GoalZero
/

compute_pool

Sleeping

App Files Files Community

Oscar Wang commited on Jul 18, 2024

Commit

2ffe902

verified ·

1 Parent(s): 6e9c9ba

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +59 -94

templates/index.html CHANGED Viewed

@@ -3,107 +3,72 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CPU Resource Manager</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <style>
-        body {
-            background-color: #f7fafc;
-        }
-        .container {
-            max-width: 600px;
-        }
-        .button {
-            display: inline-block;
-            margin: 5px;
-            padding: 10px 20px;
-            font-size: 16px;
-            font-weight: bold;
-            text-align: center;
-            text-decoration: none;
-            border-radius: 5px;
-            color: white;
-        }
-        .button-primary {
-            background-color: #3b82f6;
-        }
-        .button-primary:hover {
-            background-color: #2563eb;
-        }
-        .button-secondary {
-            background-color: #10b981;
-        }
-        .button-secondary:hover {
-            background-color: #059669;
-        }
-    </style>
-</head>
-<body class="flex items-center justify-center min-h-screen">
-    <div class="container bg-white shadow-md rounded-lg p-8">
-        <h1 class="text-3xl font-bold mb-6 text-center">CPU Resource Manager</h1>
-        <div class="mb-6">
-            <label for="file" class="block text-lg font-medium text-gray-700">Upload Files:</label>
-            <input type="file" id="file" name="file" multiple class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
-        </div>
-        <div class="mb-6">
-            <label for="script_content" class="block text-lg font-medium text-gray-700">Python Script Content:</label>
-            <textarea id="script_content" name="script_content" rows="10" class="mt-1 p-2 block w-full border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"></textarea>
-        </div>
-        <div class="mb-6 flex justify-center">
-            <button id="run_button" class="button button-primary">Run Script</button>
-            <button id="reload_button" class="button button-secondary">Reload CPU Info</button>
-        </div>
-        <div class="mb-6">
-            <h2 class="text-2xl font-bold">Log Output:</h2>
-            <pre id="log_output" class="bg-gray-100 p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
-        </div>
-        <div class="mb-6">
-            <h2 class="text-2xl font-bold">Connected CPUs Info:</h2>
-            <pre id="cpu_info" class="bg-gray-100 p-4 border border-gray-300 rounded-md shadow-sm overflow-auto"></pre>
-        </div>
-    </div>
     <script>
-        document.getElementById('run_button').addEventListener('click', async function () {
-            const script_content = document.getElementById('script_content').value;
-            const files = document.getElementById('file').files;
-            const formData = new FormData();
-            formData.append('script_content', script_content);
-            for (const file of files) {
-                formData.append('file', file);
-            }
-            const response = await fetch('/upload', {
                 method: 'POST',
-                body: formData,
             });
-            const result = await response.json();
-            document.getElementById('log_output').textContent = result.log_output;
-            if (result.status === 'success' && result.download_url) {
-                const downloadLink = document.createElement('a');
-                downloadLink.href = result.download_url;
-                downloadLink.textContent = 'Download Output Folder';
-                downloadLink.classList.add('text-blue-500', 'hover:underline');
-                document.getElementById('log_output').appendChild(document.createElement('br'));
-                document.getElementById('log_output').appendChild(downloadLink);
             }
-        });
-        document.getElementById('reload_button').addEventListener('click', async function () {
-            const response = await fetch('/cpu_info');
-            const result = await response.json();
-            document.getElementById('cpu_info').textContent = result.cpu_info;
-        });
-        // Refresh CPU info every 2 seconds
-        setInterval(async function () {
-            const response = await fetch('/cpu_info');
-            const result = await response.json();
-            document.getElementById('cpu_info').textContent = result.cpu_info;
-        }, 2000);
-        // Initial load of CPU info
-        document.getElementById('reload_button').click();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>File Upload and Command Execution</title>
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
     <script>
+        async function handleUpload(event) {
+            event.preventDefault();
+            let formData = new FormData(document.getElementById('uploadForm'));
+            let response = await fetch('/upload', {
                 method: 'POST',
+                body: formData
             });
+            let result = await response.json();
+            document.getElementById('uploadStatus').innerText = result.message || '';
+            if (result.download_url) {
+                document.getElementById('downloadLink').href = result.download_url;
+                document.getElementById('downloadLink').style.display = 'inline';
             }
+        }
+        async function executeCommand(event) {
+            event.preventDefault();
+            let formData = new FormData();
+            formData.append('command', document.getElementById('commandInput').value);
+            let response = await fetch('/execute_command', {
+                method: 'POST',
+                body: formData
+            });
+            let result = await response.json();
+            document.getElementById('commandOutput').innerText = result.log_output || '';
+        }
+        async function refreshCpuInfo() {
+            let response = await fetch('/cpu_info');
+            let result = await response.json();
+            document.getElementById('cpuInfo').innerText = result.cpu_info || '';
+        }
+        setInterval(refreshCpuInfo, 2000);
     </script>
+</head>
+<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen py-6">
+    <div class="w-full max-w-4xl bg-white p-6 rounded-lg shadow-lg">
+        <h1 class="text-2xl font-bold mb-4">Upload Files and Run Python Code</h1>
+        <form id="uploadForm" class="space-y-4" onsubmit="handleUpload(event)">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Upload Files:</label>
+                <input type="file" name="file" multiple class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
+            </div>
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Python Script:</label>
+                <textarea name="script_content" rows="6" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"></textarea>
+            </div>
+            <button type="submit" class="mt-4 px-4 py-2 bg-indigo-600 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700">Run Script</button>
+            <p id="uploadStatus" class="mt-2 text-red-600"></p>
+            <a id="downloadLink" href="#" class="mt-4 text-indigo-600" style="display:none">Download Output</a>
+        </form>
+        <h2 class="text-xl font-bold mt-8">Execute Commands</h2>
+        <form id="commandForm" class="space-y-4 mt-4" onsubmit="executeCommand(event)">
+            <div>
+                <label class="block text-sm font-medium text-gray-700">Command:</label>
+                <input id="commandInput" type="text" name="command" class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" />
+            </div>
+            <button type="submit" class="mt-4 px-4 py-2 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700">Execute Command</button>
+            <p id="commandOutput" class="mt-2 text-gray-700"></p>
+        </form>
+        <h2 class="text-xl font-bold mt-8">CPU Information</h2>
+        <pre id="cpuInfo" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
+    </div>
 </body>
 </html>