RA.Aid/webui/README.md

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:

pip install -r requirements.txt

2. Make sure you have RA.Aid installed in your Python environment

3. Start the web server:

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

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