File size: 2,322 Bytes
c0a0e96 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<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;
// Simulate command execution
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> |