Skip to content

WEB_INTERFACE.md

Latest commit

 

History

History
125 lines (95 loc) · 3.09 KB

WEB_INTERFACE.md

File metadata and controls

125 lines (95 loc) · 3.09 KB

Web Interface for RAG Chat

A beautiful web interface for querying YouTube transcripts with chat history and context management.

Features

  • 🎨 Modern UI: Clean, responsive chat interface
  • 💬 Chat History: All conversations are saved automatically
  • 🔄 Context Awareness: Previous conversations are included in context
  • 📚 Source Citations: See which videos provided the information
  • 🚀 Fast: Uses optimized models (gpt-4o-mini for extraction)

Quick Start

  1. Start the web server:

    source venv/bin/activate
python web_app.py

    Or use the convenience script:

    ./start_web.sh

  2. Open your browser: Navigate to: http://localhost:8000

  3. Start chatting!

    • Type your question in the input box
    • Press Enter or click Send
    • View sources below each answer

Usage

Starting a New Chat

  • Click the "+ New Chat" button in the sidebar
  • Or simply start typing - a new chat will be created automatically

Viewing Chat History

  • All previous chats appear in the left sidebar
  • Click any chat to load its history
  • Chats are sorted by most recent first

Context Management

  • The system automatically includes the last 10 messages from your conversation
  • This helps maintain context across multiple questions
  • You can disable this by setting use_history: false in the API

API Endpoints

POST /api/chat

Send a message and get a response.

Request:

{
  "message": "What is BPC157?",
  "chat_id": "optional-chat-id",
  "use_history": true
}

Response:

{
  "chat_id": "uuid",
  "message": "Answer text...",
  "sources": [
    {
      "video_title": "Video Title",
      "video_url": "https://youtube.com/..."
    }
  ],
  "timestamp": "2026-01-13T08:00:00"
}

GET /api/chats

Get list of all chat sessions.

GET /api/chats/{chat_id}

Get full history for a specific chat.

DELETE /api/chats/{chat_id}

Delete a chat session.

Configuration

The web interface uses the same configuration as the CLI tool (config.py):

  • Extraction Model: gpt-4o-mini (fast, 128K context)
  • Synthesis Model: gpt-5.2-chat-latest (high quality)
  • Max Chunk Tokens: 120,000 (optimized for speed)

Chat History Storage

Chat histories are stored in the chat_history/ directory as JSON files:

  • Each chat has a unique UUID
  • Files are named {chat_id}.json
  • Format: Array of message objects with role, content, timestamp, and sources

Troubleshooting

Port already in use:

# Change port in web_app.py or use:
uvicorn web_app:app --port 8001

RAG engine not initialized:

  • Make sure channel_transcripts.json exists
  • Check that the transcript file is valid JSON

Slow responses:

  • Check your API keys and rate limits
  • Consider increasing MAX_PARALLEL_EXTRACTIONS in config.py
  • Use a faster extraction model (already using gpt-4o-mini)

Development

To modify the interface:

  • HTML/CSS/JS: Edit the HTML string in web_app.py (around line 50)
  • API endpoints: Modify the FastAPI routes in web_app.py
  • Styling: Update the <style> section in the HTML