| | <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> |