Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <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>© 2024 Your Dashboard</p> | |
| </div> | |
| </footer> | |
| </div> | |
| </body> | |
| </html> | |