Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <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> |