| # π Manus AI-Style Terminal Integration | |
| This document explains the real-time terminal streaming functionality added to the Data Extractor application. | |
| ## π Overview | |
| The terminal integration provides a **Manus AI-style terminal interface** with real-time command execution and streaming output, seamlessly integrated into the existing Gradio application. | |
| ## ποΈ Architecture | |
| ### Components | |
| 1. **WebSocket Server** (`terminal_stream.py`) | |
| - Handles real-time communication between frontend and backend | |
| - Manages command execution with streaming output | |
| - Supports multiple concurrent connections | |
| - Runs on port 8765 | |
| 2. **Frontend Terminal** (`static/terminal.html`) | |
| - Beautiful Manus AI-inspired terminal interface | |
| - Real-time output streaming via WebSocket | |
| - Command history navigation | |
| - Keyboard shortcuts and controls | |
| 3. **Gradio Integration** (Modified `app.py`) | |
| - Added terminal tab to existing interface | |
| - Embedded terminal as iframe component | |
| - Auto-starts WebSocket server on application launch | |
| ## π¨ Features | |
| ### Terminal Interface | |
| - **Real-time Streaming**: Live command output as it happens | |
| - **Command History**: Navigate with β/β arrow keys | |
| - **Interrupt Support**: Ctrl+C to stop running commands | |
| - **Auto-reconnect**: Automatically reconnects on connection loss | |
| - **Status Indicators**: Visual connection and execution status | |
| - **Responsive Design**: Works on desktop and mobile | |
| ### Security | |
| - **Command Sanitization**: Uses `shlex.split()` for safe command parsing | |
| - **Process Isolation**: Commands run in separate processes | |
| - **Error Handling**: Robust error handling and logging | |
| ## π Usage | |
| ### Starting the Application | |
| ```bash | |
| python app.py | |
| ``` | |
| The terminal WebSocket server automatically starts on port 8765. | |
| ### Accessing the Terminal | |
| 1. Open the Gradio interface (usually http://localhost:7860) | |
| 2. Click on the "π» Terminal" tab | |
| 3. Start typing commands in the terminal interface | |
| ### Keyboard Shortcuts | |
| - **Enter**: Execute command | |
| - **β/β**: Navigate command history | |
| - **Ctrl+C**: Interrupt running command | |
| - **Ctrl+L**: Clear terminal screen | |
| - **Tab**: Command completion (planned feature) | |
| ## π§ Configuration | |
| ### WebSocket Server Settings | |
| ```python | |
| # In terminal_stream.py | |
| WEBSOCKET_HOST = 'localhost' | |
| WEBSOCKET_PORT = 8765 | |
| ``` | |
| ### Terminal Appearance | |
| Customize the terminal appearance by modifying the CSS in `static/terminal.html`: | |
| ```css | |
| /* Main terminal colors */ | |
| .terminal-container { | |
| background: linear-gradient(135deg, #0d1117 0%, #161b22 100%); | |
| } | |
| /* Command prompt */ | |
| .prompt { | |
| color: #58a6ff; | |
| } | |
| ``` | |
| ## π‘ WebSocket API | |
| ### Client β Server Messages | |
| #### Execute Command | |
| ```json | |
| { | |
| "type": "command", | |
| "command": "ls -la" | |
| } | |
| ``` | |
| #### Interrupt Command | |
| ```json | |
| { | |
| "type": "interrupt" | |
| } | |
| ``` | |
| ### Server β Client Messages | |
| #### Command Output | |
| ```json | |
| { | |
| "type": "output", | |
| "data": "file1.txt\nfile2.txt", | |
| "stream": "stdout", | |
| "timestamp": "2024-01-01T12:00:00.000Z" | |
| } | |
| ``` | |
| #### Command Completion | |
| ```json | |
| { | |
| "type": "command_complete", | |
| "exit_code": 0, | |
| "message": "Process exited with code 0", | |
| "timestamp": "2024-01-01T12:00:00.000Z" | |
| } | |
| ``` | |
| ## π οΈ Development | |
| ### Adding New Features | |
| 1. **Server-side**: Modify `terminal_stream.py` | |
| 2. **Client-side**: Update `static/terminal.html` | |
| 3. **Integration**: Adjust `app.py` if needed | |
| ### Testing | |
| ```bash | |
| # Test WebSocket server independently | |
| python -c "from terminal_stream import run_websocket_server; run_websocket_server()" | |
| # Test terminal interface | |
| # Open static/terminal.html in browser | |
| ``` | |
| ## π Troubleshooting | |
| ### Common Issues | |
| 1. **WebSocket Connection Failed** | |
| - Check if port 8765 is available | |
| - Verify firewall settings | |
| - Check server logs for errors | |
| 2. **Commands Not Executing** | |
| - Verify WebSocket connection status | |
| - Check terminal logs for errors | |
| - Ensure proper command syntax | |
| 3. **Terminal Not Loading** | |
| - Check if `static/terminal.html` exists | |
| - Verify Gradio file serving configuration | |
| - Check browser console for errors | |
| ### Debug Mode | |
| Enable debug logging: | |
| ```python | |
| import logging | |
| logging.getLogger('terminal_stream').setLevel(logging.DEBUG) | |
| ``` | |
| ## π Advanced Usage | |
| ### Custom Commands | |
| Add custom command handlers in `terminal_stream.py`: | |
| ```python | |
| async def handle_custom_command(self, command): | |
| if command.startswith('custom:'): | |
| # Handle custom command | |
| await self.broadcast({ | |
| 'type': 'output', | |
| 'data': 'Custom command executed', | |
| 'stream': 'stdout' | |
| }) | |
| return True | |
| return False | |
| ``` | |
| ### Integration with Workflow | |
| Stream workflow logs to terminal: | |
| ```python | |
| # In workflow code | |
| from terminal_stream import terminal_manager | |
| async def log_to_terminal(message): | |
| await terminal_manager.broadcast({ | |
| 'type': 'output', | |
| 'data': message, | |
| 'stream': 'workflow' | |
| }) | |
| ``` | |
| ## π Dependencies | |
| - `websockets`: WebSocket server implementation | |
| - `asyncio`: Async programming support | |
| - `subprocess`: Command execution | |
| - `shlex`: Safe command parsing | |
| ## π― Future Enhancements | |
| - [ ] Command auto-completion | |
| - [ ] File upload/download via terminal | |
| - [ ] Terminal themes and customization | |
| - [ ] Multi-session support | |
| - [ ] Terminal recording and playback | |
| - [ ] Integration with workflow logging | |
| - [ ] SSH/remote terminal support | |
| ## π License | |
| This terminal implementation is part of the Data Extractor project and follows the same license terms. |