Spaces:

GoalZero
/

compute_pool

Sleeping

App Files Files Community

Oscar Wang commited on Jul 18, 2024

Commit

133d361

verified ·

1 Parent(s): 51289e5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +111 -91

templates/index.html CHANGED Viewed

@@ -3,107 +3,127 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Dashboard</title>
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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 || '';
-            document.getElementById('uploadLog').innerText = result.log_output || '';
-            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">
-    <div class="min-h-screen flex flex-col">
-        <!-- Header -->
-        <header class="bg-indigo-600 text-white py-4">
-            <div class="container mx-auto flex justify-between items-center px-4">
-                <h1 class="text-2xl font-bold">Dashboard</h1>
-                <nav>
-                    <a href="#uploadSection" class="text-white hover:text-gray-300 px-4">Upload & Run</a>
-                    <a href="#commandSection" class="text-white hover:text-gray-300 px-4">Commands</a>
-                    <a href="#cpuInfoSection" class="text-white hover:text-gray-300 px-4">CPU Info</a>
-                </nav>
-            </div>
-        </header>
-        <!-- Main Content -->
-        <main class="flex-grow container mx-auto px-4 py-6">
-            <!-- Upload & Run Section -->
-            <section id="uploadSection" class="bg-white shadow-md rounded-lg p-6 mb-6">
-                <h2 class="text-xl font-semibold mb-4">Upload Files and Run Python Code</h2>
-                <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>
-                    <pre id="uploadLog" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
-                    <a id="downloadLink" href="#" class="mt-4 text-indigo-600" style="display:none">Download Output</a>
-                </form>
-            </section>
-            <!-- Command Execution Section -->
-            <section id="commandSection" class="bg-white shadow-md rounded-lg p-6 mb-6">
-                <h2 class="text-xl font-semibold mb-4">Execute Commands</h2>
-                <form id="commandForm" class="space-y-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>
-                    <pre id="commandOutput" class="mt-4 bg-gray-200 p-4 rounded-md"></pre>
-                </form>
-            </section>
-            <!-- CPU Information Section -->
-            <section id="cpuInfoSection" class="bg-white shadow-md rounded-lg p-6">
-                <h2 class="text-xl font-semibold mb-4">CPU Information</h2>
-                <pre id="cpuInfo" class="bg-gray-200 p-4 rounded-md"></pre>
-            </section>
-        </main>
-        <!-- Footer -->
-        <footer class="bg-gray-800 text-white py-4">
-            <div class="container mx-auto text-center">
-                <p>&copy; 2024 Your Dashboard</p>
-            </div>
-        </footer>
-    </div>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MPI Distributed Computing Interface</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+        }
+        .container {
+            margin-bottom: 20px;
+        }
+        #logs {
+            border: 1px solid #ccc;
+            padding: 10px;
+            height: 200px;
+            overflow-y: scroll;
+            background-color: #f9f9f9;
+        }
+    </style>
+</head>
+<body>
+    <h1>MPI Distributed Computing Interface</h1>
+    <div class="container">
+        <label for="folderUpload">Upload a Folder:</label>
+        <input type="file" id="folderUpload" webkitdirectory directory multiple>
+    </div>
+    <div class="container">
+        <label for="pythonFileUpload">Upload a Python File:</label>
+        <input type="file" id="pythonFileUpload" accept=".py">
+    </div>
+    <div class="container">
+        <label for="scriptContent">Script Content:</label>
+        <textarea id="scriptContent" rows="10" cols="50" placeholder="Paste your Python script content here..."></textarea>
+    </div>
+    <div class="container">
+        <button id="startMPI">Start MPI Distributed Computing</button>
+    </div>
+    <div class="container">
+        <label for="commandInput">Run Command:</label>
+        <input type="text" id="commandInput" placeholder="Enter command (e.g., pip install ...)">
+        <button id="runCommand">Run</button>
+    </div>
+    <div class="container">
+        <h2>Logs</h2>
+        <div id="logs"></div>
+    </div>
     <script>
+        document.getElementById('startMPI').addEventListener('click', function() {
+            const folderInput = document.getElementById('folderUpload');
+            const scriptContent = document.getElementById('scriptContent').value;
+            const formData = new FormData();
+            if (folderInput.files.length === 0 || !scriptContent) {
+                logMessage('Please upload a folder and provide script content.');
+                return;
+            }
+            for (let i = 0; i < folderInput.files.length; i++) {
+                formData.append('file', folderInput.files[i]);
+            }
+            formData.append('script_content', scriptContent);
+            fetch('/upload', {
                 method: 'POST',
                 body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    logMessage('MPI distributed computing started successfully.');
+                    logMessage('Log Output: ' + data.log_output);
+                    logMessage('Download Output: <a href="' + data.download_url + '">Download</a>');
+                } else {
+                    logMessage('Error: ' + data.message);
+                }
+            })
+            .catch(error => {
+                logMessage('Error: ' + error.message);
             });
+        });
+        document.getElementById('runCommand').addEventListener('click', function() {
+            const command = document.getElementById('commandInput').value;
+            if (!command) {
+                logMessage('Please enter a command.');
+                return;
             }
+            const formData = new FormData();
+            formData.append('command', command);
+            fetch('/execute_command', {
                 method: 'POST',
                 body: formData
+            })
+            .then(response => response.json())
+            .then(data => {
+                if (data.status === 'success') {
+                    logMessage('Command executed successfully.');
+                    logMessage('Log Output: ' + data.log_output);
+                } else {
+                    logMessage('Error: ' + data.message);
+                }
+            })
+            .catch(error => {
+                logMessage('Error: ' + error.message);
             });
+        });
+        function logMessage(message) {
+            const logs = document.getElementById('logs');
+            const logEntry = document.createElement('div');
+            logEntry.innerHTML = message;
+            logs.appendChild(logEntry);
+            logs.scrollTop = logs.scrollHeight;
         }
     </script>
 </body>
+</html>