| <div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; padding: 1rem; margin: 1.5rem 0;"> |
| <h4 style="margin-top: 0; color: #495057;">Interactive Terminal</h4> |
| <div style="background: #2d3748; color: #e2e8f0; padding: 1rem; border-radius: 6px; font-family: 'Consolas', 'Monaco', monospace;"> |
| <div style="margin-bottom: 1rem;"> |
| <input type="text" |
| id="terminal-input" |
| placeholder="python -c 'import torch; print(torch.__version__)'" |
| style="width: calc(100% - 80px); padding: 0.5rem; background: #1a202c; border: 1px solid #4a5568; color: #e2e8f0; border-radius: 4px;"> |
| <button id="terminal-run" |
| style="width: 70px; padding: 0.5rem; margin-left: 8px; background: #3182ce; color: white; border: none; border-radius: 4px; cursor: pointer;">Run</button> |
| </div> |
| <pre id="terminal-output" style="background: #1a202c; padding: 1rem; border-radius: 4px; min-height: 100px; margin: 0; overflow-x: auto;">$ Ready to run commands...</pre> |
| </div> |
| <p style="font-size: 0.9em; color: #6c757d; margin-top: 0.5rem;"> |
| <em>Note: This is a simulated terminal. In the original Gradio app, this would execute real Python commands with proper security restrictions.</em> |
| </p> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const input = document.getElementById('terminal-input'); |
| const button = document.getElementById('terminal-run'); |
| const output = document.getElementById('terminal-output'); |
| |
| function runCommand() { |
| const command = input.value.trim(); |
| if (!command) return; |
| |
| |
| output.textContent = `$ ${command}\nSimulated output for: ${command}\n\n` + |
| `This would execute the command in the original app.\n` + |
| `Example outputs:\n` + |
| `- torch version: 2.0.1+cu117\n` + |
| `- import checks: Success\n` + |
| `- memory info: Available`; |
| } |
| |
| button.addEventListener('click', runCommand); |
| input.addEventListener('keypress', function(e) { |
| if (e.key === 'Enter') runCommand(); |
| }); |
| }); |
| </script> |