109 lines
3.2 KiB
Markdown
109 lines
3.2 KiB
Markdown
# RA.Aid Web Interface
|
|
|
|
A modern, dark-themed web interface for RA.Aid that provides:
|
|
- Beautiful dark mode chat interface
|
|
- Real-time streaming output with syntax highlighting
|
|
- Persistent request history with quick resubmission
|
|
- Responsive design that works on all devices
|
|
|
|
## Design
|
|
|
|
The interface features a modern dark theme using Tailwind CSS with:
|
|
- Sleek dark color scheme optimized for readability
|
|
- Clean, minimalist design focused on content
|
|
- Smooth transitions and hover effects
|
|
- Monospace font for code and output display
|
|
|
|
## Features
|
|
|
|
- **Left Sidebar**: Shows history of previous requests
|
|
- **Main Chat Area**: Displays conversation and streaming output
|
|
- **Input Area**: Text input for new requests
|
|
- **Real-time Updates**: See RA.Aid output as it happens
|
|
- **Error Handling**: Clear display of any errors that occur
|
|
|
|
## Setup
|
|
|
|
1. Install the required dependencies:
|
|
```bash
|
|
pip install -r requirements.txt
|
|
```
|
|
|
|
2. Make sure you have RA.Aid installed in your Python environment
|
|
|
|
3. Start the web server:
|
|
```bash
|
|
# Default: Listen on all interfaces (0.0.0.0) port 8080
|
|
./server.py
|
|
|
|
# Specify custom port
|
|
./server.py --port 3000
|
|
|
|
# Specify custom host and port
|
|
./server.py --host 127.0.0.1 --port 3000
|
|
```
|
|
|
|
4. Open your web browser and navigate to the server address:
|
|
```
|
|
# If running locally with default settings:
|
|
http://localhost:8080
|
|
|
|
# If running on a different port:
|
|
http://localhost:<port>
|
|
|
|
# If accessing from another machine:
|
|
http://<server-ip>:<port>
|
|
```
|
|
|
|
## Usage
|
|
|
|
1. Type your request in the input box at the bottom of the screen
|
|
2. Press Enter or click the Send button to submit
|
|
3. Watch the real-time output in the chat area
|
|
4. Previous requests appear in the left sidebar
|
|
5. Click any previous request to load it into the input box
|
|
|
|
## Development
|
|
|
|
The web interface consists of:
|
|
- `index.html`: Main page layout with integrated Tailwind CSS styling
|
|
- `script.js`: Client-side functionality and WebSocket handling
|
|
- `server.py`: FastAPI WebSocket server with RA.Aid integration
|
|
- `requirements.txt`: Python server dependencies
|
|
|
|
## Technology Stack
|
|
|
|
- **Frontend**:
|
|
- Tailwind CSS for modern, utility-first styling
|
|
- Vanilla JavaScript for lightweight client-side operations
|
|
- WebSocket for real-time communication
|
|
|
|
- **Backend**:
|
|
- FastAPI for high-performance async server
|
|
- WebSocket support for real-time streaming
|
|
- Direct integration with ra-aid CLI
|
|
- Concurrent stdout/stderr handling
|
|
- Error handling and status reporting
|
|
|
|
## Command Integration
|
|
|
|
The web interface integrates with ra-aid by:
|
|
- Executing `ra-aid -m "<message>" --cowboy-mode` for each request
|
|
- Streaming real-time output through WebSocket connection
|
|
- Handling both standard output and error streams
|
|
- Providing error feedback for failed commands
|
|
|
|
For example, when you type "What time is it?" in the interface, it executes:
|
|
```bash
|
|
ra-aid -m "What time is it?" --cowboy-mode
|
|
```
|
|
|
|
The output is streamed in real-time to the web interface, maintaining the same functionality as the CLI but with a modern web interface.
|
|
|
|
## Architecture
|
|
|
|
- FastAPI backend with WebSocket support
|
|
- Static file serving for web assets
|
|
- Real-time bi-directional communication
|
|
- Integration with RA.Aid's output streaming
|
|
- Browser-based frontend with vanilla JavaScript |