dist/fragments/terminal.html

<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(){let e=document.getElementById("terminal-input"),t=document.getElementById("terminal-run"),n=document.getElementById("terminal-output");function o(){let t=e.value.trim();t&&(n.textContent=`$ ${t}
Simulated output for: ${t}

This would execute the command in the original app.
Example outputs:
- torch version: 2.0.1+cu117
- import checks: Success
- memory info: Available`)}t.addEventListener("click",o),e.addEventListener("keypress",function(e){"Enter"===e.key&&o()})})</script>