Upload 19 files

.env.example

@@ -0,0 +1,3 @@
+GROQ_API_KEY=your_groq_api_key_here
+PORT=7860
+HOST=0.0.0.0

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.11-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+
+WORKDIR /app
+
+RUN apt-get update && apt-get install -y \
+    gcc \
+    g++ \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+RUN mkdir -p uploads static/css static/js && chown -R user:user /app
+
+# Switch to the "user" user
+USER user
+
+# Set environment variables
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+EXPOSE 7860
+
+CMD ["python", "-m", "uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -0,0 +1,234 @@
+# Studyson - RAG Document QA & Summarization API
+
+A full-stack Retrieval-Augmented Generation (RAG) system for intelligent document question-answering and summarization. Built with FastAPI, LlamaIndex, and Groq AI.
+
+## Features
+
+- **📄 PDF Document Processing**: Upload and index PDF documents with intelligent text extraction
+- **🌐 Web Content Scraping**: Scrape and index content from URLs
+- **💬 Interactive Q&A Chat**: Ask questions about your documents with streaming responses
+- **📝 Smart Summarization**: Generate concise summaries of indexed documents
+- **🔍 Source Citations**: Get verifiable citations with exact source snippets
+- **⚡ Real-time Streaming**: Token-by-token streaming for responsive user experience
+- **🎨 Modern UI**: Clean, responsive web interface with tabbed navigation
+- **🐳 Docker Support**: Easy deployment with Docker and Docker Compose
+
+## Tech Stack
+
+### Backend
+- **FastAPI**: Modern Python web framework
+- **LlamaIndex**: RAG orchestration and document indexing
+- **Groq**: Lightning-fast LLM inference (Llama 3.1)
+- **FastEmbed**: Lightweight embeddings (BGE-small)
+- **PyMuPDF**: Advanced PDF text extraction
+- **BeautifulSoup**: HTML parsing and web scraping
+- **Pydantic**: Data validation and settings management
+
+### Frontend
+- **HTML5/CSS3/JavaScript**: Vanilla web technologies
+- **Server-Sent Events (SSE)**: Real-time streaming responses
+
+## Architecture
+
+### Ingestion Pipeline
+1. User uploads PDF or provides URL
+2. Content extraction (PyMuPDF for PDFs, BeautifulSoup for web)
+3. Text chunking and embedding via LlamaIndex + FastEmbed
+4. In-memory vector index creation
+
+### Query Pipeline
+1. Question embedding generation
+2. Semantic similarity search for relevant chunks
+3. Context + question sent to Groq LLM
+4. Streaming response with source citations
+
+## Installation
+
+### Prerequisites
+- Python 3.10 or higher
+- Groq API key ([Get it free here](https://console.groq.com))
+
+### Local Setup
+
+1. **Clone the repository**
+```bash
+git clone <repository-url>
+cd studyrag
+```
+
+2. **Create virtual environment**
+```bash
+python -m venv venv
+source venv/bin/activate  # On Windows: venv\Scripts\activate
+```
+
+3. **Install dependencies**
+```bash
+pip install -r requirements.txt
+```
+
+4. **Set up environment variables**
+```bash
+cp .env.example .env
+```
+
+Edit `.env` and add your Groq API key:
+```
+GROQ_API_KEY=your_groq_api_key_here
+PORT=7860
+HOST=0.0.0.0
+```
+
+5. **Run the application**
+```bash
+uvicorn app.main:app --reload --port 7860
+```
+
+6. **Access the application**
+
+Open your browser and navigate to: `http://localhost:7860`
+
+### Docker Setup
+
+1. **Set environment variables**
+```bash
+cp .env.example .env
+# Edit .env with your Groq API key
+```
+
+2. **Build and run with Docker Compose**
+```bash
+docker-compose up --build
+```
+
+## API Endpoints
+
+| Method | Endpoint | Description |
+|--------|----------|-------------|
+| GET | `/` | Serves the web UI |
+| POST | `/upload` | Upload PDF document |
+| POST | `/scrape` | Scrape URL content |
+| POST | `/stream_query` | Stream Q&A response |
+| POST | `/query` | Get Q&A response |
+| POST | `/summarize` | Generate summary |
+| POST | `/reset` | Clear all documents |
+| GET | `/status` | Get system status |
+
+## Project Structure
+
+```
+studyrag/
+├── app/
+│   ├── __init__.py
+│   ├── main.py              # FastAPI application
+│   ├── config.py            # Configuration settings
+│   ├── models/
+│   │   └── schemas.py       # Pydantic models
+│   ├── services/
+│   │   └── rag_service.py   # RAG logic
+│   └── utils/
+│       └── document_processor.py
+├── static/
+│   ├── css/style.css
+│   ├── js/app.js
+│   └── index.html
+├── .env.example
+├── .gitignore
+├── Dockerfile
+├── docker-compose.yml
+├── Procfile
+├── requirements.txt
+└── README.md
+```
+
+## Configuration
+
+### Environment Variables
+
+- `GROQ_API_KEY`: Your Groq API key (required, free tier available)
+- `HOST`: Server host (default: 0.0.0.0)
+- `PORT`: Server port (default: 7860)
+
+### Application Settings
+
+Edit `app/config.py` to modify:
+- `upload_dir`: Upload directory path
+- `max_file_size`: Maximum file size (default: 10MB)
+
+## Deployment
+
+### Deploy to Hugging Face Spaces (Recommended - Free)
+
+1. Push code to GitHub
+2. Go to [huggingface.co](https://huggingface.co) and create an account
+3. Click your profile → **New Space**
+4. Configure:
+   - **Space name**: `studyson`
+   - **SDK**: Select **Docker**
+   - **Hardware**: CPU basic (free)
+5. Under **Files** → Link to GitHub repo (or upload files)
+6. Add secret: `GROQ_API_KEY` in Space Settings → Variables
+7. The Space will auto-build and deploy!
+
+**Your app will be live at:** `https://huggingface.co/spaces/YOUR_USERNAME/studyson`
+
+## Features in Detail
+
+### RAG Pipeline
+- **Chunking**: Intelligent text splitting for optimal context windows
+- **Embeddings**: FastEmbed BGE-small for semantic understanding (lightweight)
+- **Retrieval**: Top-k similarity search with configurable parameters
+- **Generation**: Groq Llama 3.1 for fast, accurate responses
+
+### Streaming
+- Server-Sent Events (SSE) for real-time token delivery
+- Progressive rendering in the UI
+- Graceful error handling
+
+### Source Attribution
+- Exact text snippets from source documents
+- Similarity scores for transparency
+- Multiple source support per answer
+
+## Limitations
+
+- In-memory vector storage (resets on restart)
+- PDF-only document support (extensible to other formats)
+- Single-user session management
+- No authentication/authorization
+
+## Troubleshooting
+
+### Common Issues
+
+**Import errors:**
+```bash
+pip install --upgrade -r requirements.txt
+```
+
+**API key errors:**
+- Verify your `.env` file has the correct `GROQ_API_KEY`
+- Check API key validity at [console.groq.com](https://console.groq.com)
+
+**Port already in use:**
+```bash
+uvicorn app.main:app --port 8000
+```
+
+**File upload fails:**
+- Check file size is under 10MB
+
+## License
+
+MIT License - feel free to use this project for learning and development.
+
+## Acknowledgments
+
+- [LlamaIndex](https://www.llamaindex.ai/) for RAG orchestration
+- [Groq](https://groq.com/) for lightning-fast LLM inference
+- [FastEmbed](https://github.com/qdrant/fastembed) for lightweight embeddings
+- [FastAPI](https://fastapi.tiangolo.com/) for the web framework
+
+---
+
+Built with ❤️ using RAG technology

app.js

@@ -0,0 +1,390 @@
+const API_BASE = '';
+
+// Navigation
+const navItems = document.querySelectorAll('.nav-item');
+const viewContainers = document.querySelectorAll('.view-container');
+const currentViewName = document.getElementById('current-view-name');
+
+const viewNames = {
+    'upload': 'Upload Files',
+    'web': 'Web Import',
+    'chat': 'Q&A Chat',
+    'summary': 'Summarize'
+};
+
+navItems.forEach(item => {
+    item.addEventListener('click', () => {
+        const viewId = item.dataset.view;
+        switchView(viewId);
+    });
+});
+
+function switchView(viewId) {
+    navItems.forEach(n => n.classList.remove('active'));
+    viewContainers.forEach(v => v.classList.remove('active'));
+
+    const activeNav = document.querySelector(`[data-view="${viewId}"]`);
+    const activeView = document.getElementById(`view-${viewId}`);
+
+    if (activeNav) activeNav.classList.add('active');
+    if (activeView) activeView.classList.add('active');
+    if (currentViewName) currentViewName.textContent = viewNames[viewId] || viewId;
+}
+
+// File Upload
+const fileInput = document.getElementById('file-input');
+const dropZone = document.querySelector('.drop-zone');
+const dropZoneTitle = document.getElementById('drop-zone-title');
+const fileInfo = document.getElementById('file-info');
+const fileNameDisplay = document.getElementById('file-name-display');
+const fileSizeDisplay = document.getElementById('file-size-display');
+const uploadForm = document.getElementById('upload-form');
+const uploadResult = document.getElementById('upload-result');
+
+fileInput.addEventListener('change', handleFileSelect);
+
+function handleFileSelect(e) {
+    const file = e.target.files[0];
+    if (file) {
+        fileNameDisplay.textContent = file.name;
+        fileSizeDisplay.textContent = formatFileSize(file.size);
+        dropZoneTitle.textContent = 'File selected';
+        fileInfo.style.display = 'flex';
+    }
+}
+
+function formatFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i];
+}
+
+uploadForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const file = fileInput.files[0];
+
+    if (!file) {
+        showResult(uploadResult, 'Please select a file', 'error');
+        return;
+    }
+
+    const formData = new FormData();
+    formData.append('file', file);
+
+    const submitBtn = uploadForm.querySelector('button[type="submit"]');
+    const originalText = submitBtn.innerHTML;
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = '<span class="loading"></span><span>Uploading...</span>';
+
+    try {
+        const response = await fetch(`${API_BASE}/upload`, {
+            method: 'POST',
+            body: formData
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            showResult(uploadResult, data.message, 'success');
+            fileInput.value = '';
+            fileInfo.style.display = 'none';
+            dropZoneTitle.textContent = 'Drop your PDF here';
+            await updateStatus();
+        } else {
+            showResult(uploadResult, data.detail || 'Upload failed', 'error');
+        }
+    } catch (error) {
+        showResult(uploadResult, `Error: ${error.message}`, 'error');
+    } finally {
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = originalText;
+    }
+});
+
+// Web Scrape
+const scrapeForm = document.getElementById('scrape-form');
+const scrapeResult = document.getElementById('scrape-result');
+
+scrapeForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const url = document.getElementById('url-input').value;
+
+    const submitBtn = scrapeForm.querySelector('button[type="submit"]');
+    const originalText = submitBtn.innerHTML;
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = '<span class="loading"></span><span>Fetching...</span>';
+
+    try {
+        const response = await fetch(`${API_BASE}/scrape_and_index`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ url })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            showResult(scrapeResult, data.message, 'success');
+            document.getElementById('url-input').value = '';
+            await updateStatus();
+        } else {
+            showResult(scrapeResult, data.detail || 'Scraping failed', 'error');
+        }
+    } catch (error) {
+        showResult(scrapeResult, `Error: ${error.message}`, 'error');
+    } finally {
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = originalText;
+    }
+});
+
+// Chat
+const chatForm = document.getElementById('chat-form');
+const chatMessages = document.getElementById('chat-messages');
+const questionInput = document.getElementById('question-input');
+
+chatForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const question = questionInput.value.trim();
+
+    if (!question) return;
+
+    const emptyState = chatMessages.querySelector('.empty-state');
+    if (emptyState) emptyState.remove();
+
+    addMessage(question, 'user');
+    questionInput.value = '';
+
+    const assistantMessage = addMessage('', 'assistant');
+    const messageContent = assistantMessage.querySelector('.message-content');
+
+    const submitBtn = chatForm.querySelector('button[type="submit"]');
+    submitBtn.disabled = true;
+
+    try {
+        const response = await fetch(`${API_BASE}/stream_query`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ question })
+        });
+
+        if (!response.ok) {
+            const error = await response.json();
+            messageContent.textContent = `Error: ${error.detail}`;
+            return;
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+        let fullAnswer = '';
+
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split('\n');
+            buffer = lines.pop();
+
+            for (const line of lines) {
+                if (line.startsWith('data: ')) {
+                    const data = line.slice(6);
+
+                    if (data === '[DONE]') continue;
+
+                    try {
+                        const parsed = JSON.parse(data);
+
+                        if (parsed.token) {
+                            fullAnswer += parsed.token;
+                            messageContent.textContent = fullAnswer;
+                            chatMessages.scrollTop = chatMessages.scrollHeight;
+                        } else if (parsed.final_answer) {
+                            messageContent.textContent = parsed.final_answer;
+
+                            if (parsed.sources && parsed.sources.length > 0) {
+                                const sourcesDiv = document.createElement('div');
+                                sourcesDiv.className = 'message-sources';
+                                sourcesDiv.innerHTML = '<strong>📚 Sources:</strong>';
+
+                                parsed.sources.forEach((source, idx) => {
+                                    const sourceItem = document.createElement('div');
+                                    sourceItem.className = 'source-item';
+                                    sourceItem.innerHTML = `
+                                        <strong>${idx + 1}. ${source.file_name}</strong>
+                                        <p>${source.text}...</p>
+                                    `;
+                                    sourcesDiv.appendChild(sourceItem);
+                                });
+
+                                assistantMessage.querySelector('.message-bubble').appendChild(sourcesDiv);
+                            }
+                        } else if (parsed.error) {
+                            messageContent.textContent = `Error: ${parsed.error}`;
+                        }
+                    } catch (e) {
+                        console.error('Parse error:', e);
+                    }
+                }
+            }
+        }
+    } catch (error) {
+        messageContent.textContent = `Error: ${error.message}`;
+    } finally {
+        submitBtn.disabled = false;
+    }
+});
+
+function addMessage(text, sender) {
+    const messageDiv = document.createElement('div');
+    messageDiv.className = `message ${sender}`;
+
+    const bubbleDiv = document.createElement('div');
+    bubbleDiv.className = 'message-bubble';
+
+    const contentDiv = document.createElement('div');
+    contentDiv.className = 'message-content';
+    contentDiv.textContent = text;
+
+    bubbleDiv.appendChild(contentDiv);
+    messageDiv.appendChild(bubbleDiv);
+    chatMessages.appendChild(messageDiv);
+    chatMessages.scrollTop = chatMessages.scrollHeight;
+
+    return messageDiv;
+}
+
+// Summary
+const summarizeForm = document.getElementById('summarize-form');
+const summaryResult = document.getElementById('summary-result');
+const lengthSlider = document.getElementById('max-length');
+const lengthDisplay = document.getElementById('length-display');
+
+lengthSlider.addEventListener('input', (e) => {
+    lengthDisplay.textContent = e.target.value;
+});
+
+summarizeForm.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const maxLength = parseInt(lengthSlider.value);
+
+    const submitBtn = summarizeForm.querySelector('button[type="submit"]');
+    const originalText = submitBtn.innerHTML;
+    submitBtn.disabled = true;
+    submitBtn.innerHTML = '<span class="loading"></span><span>Generating...</span>';
+
+    showResult(summaryResult, 'Generating summary...', 'info');
+
+    try {
+        const response = await fetch(`${API_BASE}/summarize`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ max_length: maxLength })
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            const result = `
+                <h3>📄 Summary (${data.word_count} words)</h3>
+                <p>${data.summary}</p>
+                <p style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: 0.9rem; color: var(--text-secondary);">
+                    <strong>Sources:</strong> ${data.source_documents.join(', ')}
+                </p>
+            `;
+            summaryResult.innerHTML = result;
+            summaryResult.classList.add('show', 'success');
+        } else {
+            showResult(summaryResult, data.detail || 'Summarization failed', 'error');
+        }
+    } catch (error) {
+        showResult(summaryResult, `Error: ${error.message}`, 'error');
+    } finally {
+        submitBtn.disabled = false;
+        submitBtn.innerHTML = originalText;
+    }
+});
+
+// Reset
+const resetBtn = document.getElementById('reset-btn-sidebar');
+
+resetBtn.addEventListener('click', async () => {
+    if (!confirm('Are you sure you want to reset all documents? This action cannot be undone.')) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`${API_BASE}/reset`, {
+            method: 'POST'
+        });
+
+        const data = await response.json();
+
+        if (response.ok) {
+            alert(data.message);
+            // Force page reload to clear all state
+            window.location.reload();
+        } else {
+            alert(data.detail || 'Reset failed');
+        }
+    } catch (error) {
+        alert(`Error: ${error.message}`);
+    }
+});
+
+// Helper Functions
+function showResult(element, message, type) {
+    element.innerHTML = message;
+    element.className = `result-message show ${type}`;
+    setTimeout(() => {
+        element.classList.remove('show');
+    }, 5000);
+}
+
+function clearAllResults() {
+    uploadResult.classList.remove('show');
+    scrapeResult.classList.remove('show');
+    summaryResult.classList.remove('show');
+}
+
+async function updateStatus() {
+    try {
+        const response = await fetch(`${API_BASE}/status`);
+        const data = await response.json();
+
+        if (data.details) {
+            const count = data.details.document_count || 0;
+            const docCountSidebar = document.getElementById('doc-count-sidebar');
+            if (docCountSidebar) {
+                docCountSidebar.textContent = count;
+            }
+
+            const statusPulse = document.getElementById('status-pulse');
+            const statusTextSidebar = document.getElementById('status-text-sidebar');
+            const statusTextTop = document.getElementById('status-text-top');
+
+            if (data.details.has_documents) {
+                if (statusPulse) statusPulse.style.background = 'var(--success)';
+                if (statusTextSidebar) statusTextSidebar.textContent = 'Ready';
+                if (statusTextTop) statusTextTop.textContent = 'System Ready';
+            } else {
+                if (statusPulse) statusPulse.style.background = 'var(--text-light)';
+                if (statusTextSidebar) statusTextSidebar.textContent = 'No Docs';
+                if (statusTextTop) statusTextTop.textContent = 'No Documents';
+            }
+        }
+    } catch (error) {
+        console.error('Status update failed:', error);
+        const statusPulse = document.getElementById('status-pulse');
+        const statusTextTop = document.getElementById('status-text-top');
+        if (statusPulse) statusPulse.style.background = 'var(--danger)';
+        if (statusTextTop) statusTextTop.textContent = 'Connection Error';
+    }
+}
+
+// Initial status update
+updateStatus();
+setInterval(updateStatus, 30000);

config.py

@@ -0,0 +1,19 @@
+from pydantic_settings import BaseSettings, SettingsConfigDict
+from pathlib import Path
+
+
+class Settings(BaseSettings):
+    groq_api_key: str
+    host: str = "0.0.0.0"
+    port: int = 7860  # HuggingFace Spaces default port
+    upload_dir: Path = Path("uploads")
+    max_file_size: int = 10 * 1024 * 1024
+
+    model_config = SettingsConfigDict(
+        env_file=".env",
+        env_file_encoding="utf-8",
+        case_sensitive=False
+    )
+
+
+settings = Settings()

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3.8'
+
+services:
+  studyson:
+    build: .
+    ports:
+      - "7860:7860"
+    environment:
+      - GROQ_API_KEY=${GROQ_API_KEY}
+      - HOST=0.0.0.0
+      - PORT=7860
+    volumes:
+      - ./uploads:/app/uploads
+    restart: unless-stopped

document_processor.py

@@ -0,0 +1,56 @@
+import fitz
+from bs4 import BeautifulSoup
+import aiohttp
+from pathlib import Path
+from typing import Optional
+
+
+class DocumentProcessor:
+
+    @staticmethod
+    async def extract_pdf_text(file_path: Path) -> str:
+        doc = fitz.open(file_path)
+        text_parts = []
+
+        for page in doc:
+            text = page.get_text()
+            text_parts.append(text)
+
+        doc.close()
+        return "\n\n".join(text_parts)
+
+    @staticmethod
+    async def scrape_url(url: str) -> tuple[str, str]:
+        async with aiohttp.ClientSession() as session:
+            async with session.get(str(url)) as response:
+                html = await response.text()
+                soup = BeautifulSoup(html, 'html.parser')
+
+                for script in soup(["script", "style", "nav", "footer", "header"]):
+                    script.decompose()
+
+                title = soup.find('title')
+                title_text = title.get_text().strip() if title else "Web Document"
+
+                text = soup.get_text(separator='\n', strip=True)
+
+                lines = [line.strip() for line in text.splitlines() if line.strip()]
+                cleaned_text = '\n'.join(lines)
+
+                return title_text, cleaned_text
+
+    @staticmethod
+    def validate_file_type(filename: str, allowed_extensions: set = {'.pdf'}) -> bool:
+        return Path(filename).suffix.lower() in allowed_extensions
+
+    @staticmethod
+    def clean_text(text: str) -> str:
+        lines = text.split('\n')
+        cleaned_lines = []
+
+        for line in lines:
+            line = line.strip()
+            if len(line) > 0:
+                cleaned_lines.append(line)
+
+        return '\n'.join(cleaned_lines)

index.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Studyson - Smart Document Assistant</title>
+    <link rel="stylesheet" href="/static/css/style.css">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="app-layout">
+        <!-- Sidebar Navigation -->
+        <aside class="sidebar">
+            <div class="logo-section">
+                <div class="logo-icon">
+                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                        <rect width="40" height="40" rx="12" fill="url(#grad1)"/>
+                        <path d="M12 14h16M12 20h16M12 26h10" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                        <defs>
+                            <linearGradient id="grad1" x1="0" y1="0" x2="40" y2="40">
+                                <stop offset="0%" stop-color="#667eea"/>
+                                <stop offset="100%" stop-color="#764ba2"/>
+                            </linearGradient>
+                        </defs>
+                    </svg>
+                </div>
+                <h1 class="logo-text">Studyson</h1>
+            </div>
+
+            <nav class="nav-menu">
+                <button class="nav-item active" data-view="upload">
+                    <span class="nav-icon">📁</span>
+                    <span class="nav-label">Upload Files</span>
+                </button>
+                <button class="nav-item" data-view="web">
+                    <span class="nav-icon">🌍</span>
+                    <span class="nav-label">Web Import</span>
+                </button>
+                <button class="nav-item" data-view="chat">
+                    <span class="nav-icon">💭</span>
+                    <span class="nav-label">Q&A Chat</span>
+                </button>
+                <button class="nav-item" data-view="summary">
+                    <span class="nav-icon">📊</span>
+                    <span class="nav-label">Summarize</span>
+                </button>
+            </nav>
+
+            <div class="sidebar-footer">
+                <div class="stats-card">
+                    <div class="stat-item">
+                        <span class="stat-label">Documents</span>
+                        <span class="stat-value" id="doc-count-sidebar">0</span>
+                    </div>
+                    <div class="stat-indicator">
+                        <div class="pulse-dot" id="status-pulse"></div>
+                        <span id="status-text-sidebar">Ready</span>
+                    </div>
+                </div>
+                <button id="reset-btn-sidebar" class="btn-reset">
+                    <span>🗑️</span>
+                    <span>Clear All</span>
+                </button>
+            </div>
+        </aside>
+
+        <!-- Main Content Area -->
+        <main class="main-content">
+            <div class="topbar">
+                <div class="breadcrumb">
+                    <span class="breadcrumb-item" id="current-view-name">Upload Files</span>
+                </div>
+                <div class="topbar-actions">
+                    <div class="status-badge" id="status-badge">
+                        <span class="status-dot"></span>
+                        <span id="status-text-top">System Ready</span>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Upload View -->
+            <div class="view-container active" id="view-upload">
+                <div class="view-header">
+                    <h2 class="view-title">Upload PDF Documents</h2>
+                    <p class="view-description">Import your PDF files to create a searchable knowledge base</p>
+                </div>
+
+                <div class="content-card">
+                    <form id="upload-form" class="upload-area">
+                        <input type="file" id="file-input" accept=".pdf" hidden>
+                        <label for="file-input" class="drop-zone">
+                            <div class="drop-zone-icon">📄</div>
+                            <h3 class="drop-zone-title" id="drop-zone-title">Drop your PDF here</h3>
+                            <p class="drop-zone-desc">or click to browse files</p>
+                            <div class="file-info" id="file-info" style="display: none;">
+                                <span class="file-icon">📎</span>
+                                <span class="file-name-display" id="file-name-display"></span>
+                                <span class="file-size" id="file-size-display"></span>
+                            </div>
+                        </label>
+                        <button type="submit" class="btn-primary btn-large">
+                            <span>Upload & Index Document</span>
+                            <span class="btn-arrow">→</span>
+                        </button>
+                    </form>
+                    <div id="upload-result" class="result-message"></div>
+                </div>
+            </div>
+
+            <!-- Web Scrape View -->
+            <div class="view-container" id="view-web">
+                <div class="view-header">
+                    <h2 class="view-title">Import from Web</h2>
+                    <p class="view-description">Extract and index content from any webpage</p>
+                </div>
+
+                <div class="content-card">
+                    <form id="scrape-form" class="web-form">
+                        <div class="input-group">
+                            <span class="input-icon">🔗</span>
+                            <input type="url" id="url-input" class="input-field" placeholder="https://example.com/article" required>
+                        </div>
+                        <button type="submit" class="btn-primary btn-large">
+                            <span>Fetch & Index Content</span>
+                            <span class="btn-arrow">→</span>
+                        </button>
+                    </form>
+                    <div id="scrape-result" class="result-message"></div>
+                </div>
+            </div>
+
+            <!-- Chat View -->
+            <div class="view-container" id="view-chat">
+                <div class="view-header">
+                    <h2 class="view-title">Interactive Q&A</h2>
+                    <p class="view-description">Ask questions and get intelligent answers from your documents</p>
+                </div>
+
+                <div class="chat-container">
+                    <div class="messages-area" id="chat-messages">
+                        <div class="empty-state">
+                            <div class="empty-icon">💬</div>
+                            <h3>Start a Conversation</h3>
+                            <p>Ask me anything about your indexed documents</p>
+                        </div>
+                    </div>
+                    <form id="chat-form" class="chat-input-area">
+                        <div class="chat-input-wrapper">
+                            <input type="text" id="question-input" class="chat-input" placeholder="Type your question here..." required>
+                            <button type="submit" class="btn-send">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                                    <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            <!-- Summary View -->
+            <div class="view-container" id="view-summary">
+                <div class="view-header">
+                    <h2 class="view-title">Document Summarization</h2>
+                    <p class="view-description">Generate comprehensive summaries of your indexed content</p>
+                </div>
+
+                <div class="content-card">
+                    <form id="summarize-form" class="summary-form">
+                        <div class="form-group">
+                            <label class="form-label">Summary Length</label>
+                            <div class="slider-container">
+                                <input type="range" id="max-length" class="range-slider" min="100" max="2000" step="100" value="500">
+                                <div class="slider-value">
+                                    <span id="length-display">500</span> words
+                                </div>
+                            </div>
+                        </div>
+                        <button type="submit" class="btn-primary btn-large">
+                            <span>Generate Summary</span>
+                            <span class="btn-arrow">✨</span>
+                        </button>
+                    </form>
+                    <div id="summary-result" class="result-message summary-output"></div>
+                </div>
+            </div>
+        </main>
+    </div>
+
+    <script src="/static/js/app.js"></script>
+</body>
+</html>

main.py

@@ -0,0 +1,212 @@
+from fastapi import FastAPI, UploadFile, File, HTTPException
+from fastapi.responses import StreamingResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from pathlib import Path
+import json
+from typing import AsyncGenerator
+
+from app.config import settings
+from app.models.schemas import (
+    ScrapeRequest, QueryRequest, FinalResponse,
+    StatusResponse, SummarizeRequest, SummaryResponse
+)
+from app.services.rag_service import RAGService
+from app.utils.document_processor import DocumentProcessor
+
+app = FastAPI(
+    title="Studyson RAG API",
+    description="Document QA and Summarization using RAG",
+    version="1.0.0"
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+rag_service = RAGService()
+doc_processor = DocumentProcessor()
+
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+
+@app.get("/")
+async def read_root():
+    return FileResponse("static/index.html")
+
+
+@app.post("/upload", response_model=StatusResponse)
+async def upload_document(file: UploadFile = File(...)):
+    if not doc_processor.validate_file_type(file.filename):
+        raise HTTPException(status_code=400, detail="Only PDF files are supported")
+
+    if file.size and file.size > settings.max_file_size:
+        raise HTTPException(status_code=400, detail="File size exceeds maximum limit")
+
+    settings.upload_dir.mkdir(exist_ok=True)
+    file_path = settings.upload_dir / file.filename
+
+    try:
+        with open(file_path, "wb") as buffer:
+            content = await file.read()
+            buffer.write(content)
+
+        text = await doc_processor.extract_pdf_text(file_path)
+        cleaned_text = doc_processor.clean_text(text)
+
+        rag_service.create_index_from_text(cleaned_text, file.filename)
+
+        return StatusResponse(
+            status="success",
+            message=f"Document '{file.filename}' uploaded and indexed successfully",
+            details={
+                "filename": file.filename,
+                "text_length": len(cleaned_text),
+                "indexed_documents": rag_service.get_indexed_documents()
+            }
+        )
+
+    except Exception as e:
+        if file_path.exists():
+            file_path.unlink()
+        raise HTTPException(status_code=500, detail=f"Error processing document: {str(e)}")
+
+
+@app.post("/scrape_and_index", response_model=StatusResponse)
+async def scrape_and_index(request: ScrapeRequest):
+    try:
+        title, text = await doc_processor.scrape_url(str(request.url))
+        cleaned_text = doc_processor.clean_text(text)
+
+        rag_service.create_index_from_text(cleaned_text, title)
+
+        return StatusResponse(
+            status="success",
+            message=f"URL content indexed successfully",
+            details={
+                "url": str(request.url),
+                "title": title,
+                "text_length": len(cleaned_text),
+                "indexed_documents": rag_service.get_indexed_documents()
+            }
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error scraping URL: {str(e)}")
+
+
+@app.post("/stream_query")
+async def stream_query(request: QueryRequest):
+    if not rag_service.has_documents():
+        raise HTTPException(status_code=400, detail="No documents indexed. Please upload a document first.")
+
+    async def event_generator() -> AsyncGenerator[str, None]:
+        try:
+            answer_parts = []
+
+            async for token in rag_service.stream_query(request.question):
+                answer_parts.append(token)
+                yield f"data: {json.dumps({'token': token})}\n\n"
+
+            full_answer = "".join(answer_parts)
+
+            _, sources = await rag_service.query(request.question)
+
+            final_response = FinalResponse(
+                final_answer=full_answer,
+                sources=[source.model_dump() for source in sources]
+            )
+
+            yield f"data: [DONE]\n\n"
+            yield f"data: {json.dumps(final_response.model_dump())}\n\n"
+
+        except Exception as e:
+            yield f"data: {json.dumps({'error': str(e)})}\n\n"
+
+    return StreamingResponse(
+        event_generator(),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+        }
+    )
+
+
+@app.post("/query", response_model=FinalResponse)
+async def query(request: QueryRequest):
+    if not rag_service.has_documents():
+        raise HTTPException(status_code=400, detail="No documents indexed. Please upload a document first.")
+
+    try:
+        answer, sources = await rag_service.query(request.question)
+
+        return FinalResponse(
+            final_answer=answer,
+            sources=sources
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error processing query: {str(e)}")
+
+
+@app.post("/summarize", response_model=SummaryResponse)
+async def summarize(request: SummarizeRequest):
+    if not rag_service.has_documents():
+        raise HTTPException(status_code=400, detail="No documents indexed. Please upload a document first.")
+
+    try:
+        summary = await rag_service.summarize(max_length=request.max_length)
+
+        word_count = len(summary.split())
+
+        return SummaryResponse(
+            summary=summary,
+            word_count=word_count,
+            source_documents=rag_service.get_indexed_documents()
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error generating summary: {str(e)}")
+
+
+@app.post("/reset", response_model=StatusResponse)
+async def reset_index():
+    try:
+        rag_service.reset_index()
+
+        # Only try to delete files if uploads directory exists
+        if settings.upload_dir.exists():
+            for file_path in settings.upload_dir.glob("*"):
+                if file_path.is_file():
+                    file_path.unlink()
+
+        return StatusResponse(
+            status="success",
+            message="Index reset successfully. All documents removed."
+        )
+
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error resetting index: {str(e)}")
+
+
+@app.get("/status", response_model=StatusResponse)
+async def get_status():
+    return StatusResponse(
+        status="online",
+        message="Studyson RAG API is running",
+        details={
+            "has_documents": rag_service.has_documents(),
+            "indexed_documents": rag_service.get_indexed_documents(),
+            "document_count": len(rag_service.get_indexed_documents())
+        }
+    )
+
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host=settings.host, port=settings.port)

rag_service.py

@@ -0,0 +1,107 @@
+from llama_index.core import VectorStoreIndex, Document, Settings
+from llama_index.llms.groq import Groq
+from llama_index.embeddings.fastembed import FastEmbedEmbedding
+from llama_index.core.chat_engine import CondensePlusContextChatEngine
+from typing import Optional, AsyncGenerator, List
+from app.config import settings
+from app.models.schemas import SourceInfo
+import os
+
+
+class RAGService:
+
+    def __init__(self):
+        os.environ["GROQ_API_KEY"] = settings.groq_api_key
+        self._llm_initialized = False
+        self.index: Optional[VectorStoreIndex] = None
+        self.chat_engine = None
+        self.indexed_documents = []
+
+    def _initialize_llm(self):
+        if not self._llm_initialized:
+            Settings.llm = Groq(model="llama-3.1-8b-instant", api_key=settings.groq_api_key)
+            # Use FastEmbed - lightweight embeddings optimized for low memory
+            Settings.embed_model = FastEmbedEmbedding(model_name="BAAI/bge-small-en-v1.5")
+            self._llm_initialized = True
+
+    def create_index_from_text(self, text: str, source_name: str) -> None:
+        self._initialize_llm()
+        document = Document(text=text, metadata={"source": source_name})
+        self.indexed_documents.append(source_name)
+
+        if self.index is None:
+            self.index = VectorStoreIndex.from_documents([document])
+        else:
+            self.index.insert(document)
+
+        self.chat_engine = self.index.as_chat_engine(
+            chat_mode="condense_plus_context",
+            verbose=True
+        )
+
+    def create_index_from_documents(self, documents: List[Document]) -> None:
+        self._initialize_llm()
+        for doc in documents:
+            if "source" in doc.metadata:
+                self.indexed_documents.append(doc.metadata["source"])
+
+        if self.index is None:
+            self.index = VectorStoreIndex.from_documents(documents)
+        else:
+            for doc in documents:
+                self.index.insert(doc)
+
+        self.chat_engine = self.index.as_chat_engine(
+            chat_mode="condense_plus_context",
+            verbose=True
+        )
+
+    async def stream_query(self, question: str) -> AsyncGenerator[str, None]:
+        if self.chat_engine is None:
+            raise ValueError("No documents indexed. Please upload a document first.")
+
+        response = await self.chat_engine.astream_chat(question)
+
+        async for token in response.async_response_gen():
+            yield token
+
+    async def query(self, question: str) -> tuple[str, List[SourceInfo]]:
+        if self.index is None:
+            raise ValueError("No documents indexed. Please upload a document first.")
+
+        query_engine = self.index.as_query_engine(similarity_top_k=3)
+        response = await query_engine.aquery(question)
+
+        sources = []
+        if hasattr(response, 'source_nodes'):
+            for node in response.source_nodes:
+                source_info = SourceInfo(
+                    file_name=node.metadata.get("source", "Unknown"),
+                    text=node.text[:300],
+                    score=node.score if hasattr(node, 'score') else None
+                )
+                sources.append(source_info)
+
+        return str(response), sources
+
+    async def summarize(self, max_length: int = 500) -> str:
+        if self.index is None:
+            raise ValueError("No documents indexed. Please upload a document first.")
+
+        query_engine = self.index.as_query_engine()
+
+        summary_prompt = f"Provide a comprehensive summary of all the documents in approximately {max_length} words. Focus on the main ideas, key points, and important details."
+
+        response = await query_engine.aquery(summary_prompt)
+        return str(response)
+
+    def reset_index(self) -> None:
+        self.index = None
+        self.chat_engine = None
+        self.indexed_documents = []
+
+    def get_indexed_documents(self) -> List[str]:
+        return self.indexed_documents
+
+    def has_documents(self) -> bool:
+        return self.index is not None

requirements.txt

@@ -0,0 +1,14 @@
+fastapi>=0.115.0
+uvicorn[standard]>=0.32.0
+python-multipart>=0.0.12
+llama-index>=0.12.0
+llama-index-llms-groq>=0.3.0
+llama-index-embeddings-fastembed>=0.3.0
+pypdf>=5.1.0
+pymupdf>=1.24.0
+python-dotenv>=1.0.0
+beautifulsoup4>=4.12.0
+aiohttp>=3.11.0
+pydantic>=2.9.0
+pydantic-settings>=2.6.0
+fastembed>=0.4.0

schemas.py

@@ -0,0 +1,38 @@
+from pydantic import BaseModel, HttpUrl
+from typing import List, Optional
+
+
+class ScrapeRequest(BaseModel):
+    url: HttpUrl
+
+
+class QueryRequest(BaseModel):
+    question: str
+
+
+class SourceInfo(BaseModel):
+    file_name: str
+    text: str
+    score: Optional[float] = None
+
+
+class FinalResponse(BaseModel):
+    final_answer: str
+    sources: List[SourceInfo]
+
+
+class SummarizeRequest(BaseModel):
+    max_length: Optional[int] = 500
+    style: Optional[str] = "concise"
+
+
+class SummaryResponse(BaseModel):
+    summary: str
+    word_count: int
+    source_documents: List[str]
+
+
+class StatusResponse(BaseModel):
+    status: str
+    message: str
+    details: Optional[dict] = None

style.css

@@ -0,0 +1,730 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary: #667eea;
+    --primary-dark: #5568d3;
+    --secondary: #764ba2;
+    --accent: #f093fb;
+    --bg-main: #f7f9fc;
+    --bg-card: #ffffff;
+    --bg-sidebar: #1a1f36;
+    --text-primary: #2d3748;
+    --text-secondary: #718096;
+    --text-light: #a0aec0;
+    --border: #e2e8f0;
+    --success: #48bb78;
+    --danger: #f56565;
+    --warning: #ed8936;
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    background: var(--bg-main);
+    color: var(--text-primary);
+    line-height: 1.6;
+    overflow-x: hidden;
+}
+
+.app-layout {
+    display: flex;
+    min-height: 100vh;
+}
+
+/* ===== SIDEBAR ===== */
+.sidebar {
+    width: 280px;
+    background: var(--bg-sidebar);
+    color: white;
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--shadow-lg);
+}
+
+.logo-section {
+    padding: 2rem 1.5rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo-icon {
+    flex-shrink: 0;
+}
+
+.logo-text {
+    font-size: 1.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.nav-menu {
+    flex: 1;
+    padding: 1.5rem 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.nav-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1.25rem;
+    background: transparent;
+    border: none;
+    border-radius: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-size: 0.95rem;
+    font-weight: 500;
+    width: 100%;
+    text-align: left;
+}
+
+.nav-item:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: white;
+    transform: translateX(4px);
+}
+
+.nav-item.active {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+.nav-icon {
+    font-size: 1.5rem;
+}
+
+.sidebar-footer {
+    padding: 1.5rem 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stats-card {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 1rem;
+    border-radius: 12px;
+    margin-bottom: 1rem;
+}
+
+.stat-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+}
+
+.stat-label {
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.6);
+}
+
+.stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--accent);
+}
+
+.stat-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.pulse-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--success);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.1); }
+}
+
+.btn-reset {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    background: rgba(245, 101, 101, 0.1);
+    border: 1px solid rgba(245, 101, 101, 0.3);
+    border-radius: 10px;
+    color: #fc8181;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.btn-reset:hover {
+    background: rgba(245, 101, 101, 0.2);
+    border-color: rgba(245, 101, 101, 0.5);
+}
+
+/* ===== MAIN CONTENT ===== */
+.main-content {
+    margin-left: 280px;
+    flex: 1;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.topbar {
+    background: white;
+    padding: 1.5rem 2.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: var(--shadow-sm);
+    position: sticky;
+    top: 0;
+    z-index: 50;
+}
+
+.breadcrumb-item {
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.status-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--bg-main);
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.status-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--success);
+    border-radius: 50%;
+    animation: pulse 2s infinite;
+}
+
+/* ===== VIEW CONTAINERS ===== */
+.view-container {
+    display: none;
+    padding: 2.5rem;
+    flex: 1;
+}
+
+.view-container.active {
+    display: block;
+}
+
+.view-header {
+    margin-bottom: 2rem;
+}
+
+.view-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.view-description {
+    font-size: 1.05rem;
+    color: var(--text-secondary);
+}
+
+.content-card {
+    background: var(--bg-card);
+    border-radius: 16px;
+    padding: 2.5rem;
+    box-shadow: var(--shadow-md);
+}
+
+/* ===== UPLOAD AREA ===== */
+.upload-area {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.drop-zone {
+    border: 3px dashed var(--border);
+    border-radius: 16px;
+    padding: 3rem 2rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    background: var(--bg-main);
+}
+
+.drop-zone:hover {
+    border-color: var(--primary);
+    background: #f7faff;
+}
+
+.drop-zone-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+}
+
+.drop-zone-title {
+    font-size: 1.35rem;
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.5rem;
+}
+
+.drop-zone-desc {
+    color: var(--text-secondary);
+    font-size: 1rem;
+}
+
+.file-info {
+    margin-top: 1.5rem;
+    padding: 1.25rem;
+    background: white;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    box-shadow: var(--shadow-sm);
+}
+
+.file-icon {
+    font-size: 2rem;
+}
+
+.file-name-display {
+    flex: 1;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.file-size {
+    color: var(--text-secondary);
+    font-size: 0.875rem;
+}
+
+/* ===== BUTTONS ===== */
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+.btn-primary:active {
+    transform: translateY(0);
+}
+
+.btn-large {
+    padding: 1.25rem 2rem;
+    font-size: 1.05rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.btn-arrow {
+    font-size: 1.5rem;
+    transition: transform 0.3s ease;
+}
+
+.btn-primary:hover .btn-arrow {
+    transform: translateX(4px);
+}
+
+/* ===== WEB FORM ===== */
+.web-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.input-group {
+    position: relative;
+}
+
+.input-icon {
+    position: absolute;
+    left: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 1.5rem;
+}
+
+.input-field {
+    width: 100%;
+    padding: 1.25rem 1.25rem 1.25rem 3.5rem;
+    border: 2px solid var(--border);
+    border-radius: 12px;
+    font-size: 1rem;
+    transition: all 0.3s ease;
+    font-family: inherit;
+}
+
+.input-field:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+/* ===== CHAT CONTAINER ===== */
+.chat-container {
+    background: var(--bg-card);
+    border-radius: 16px;
+    box-shadow: var(--shadow-md);
+    display: flex;
+    flex-direction: column;
+    height: 600px;
+}
+
+.messages-area {
+    flex: 1;
+    overflow-y: auto;
+    padding: 2rem;
+}
+
+.empty-state {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.empty-icon {
+    font-size: 4rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+}
+
+.empty-state h3 {
+    font-size: 1.5rem;
+    margin-bottom: 0.5rem;
+    color: var(--text-primary);
+}
+
+.message {
+    margin-bottom: 1.5rem;
+    display: flex;
+    gap: 1rem;
+    animation: slideIn 0.3s ease;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.message-bubble {
+    max-width: 70%;
+    padding: 1.25rem 1.5rem;
+    border-radius: 16px;
+    line-height: 1.6;
+}
+
+.message.user .message-bubble {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    margin-left: auto;
+    border-bottom-right-radius: 4px;
+}
+
+.message.assistant .message-bubble {
+    background: var(--bg-main);
+    color: var(--text-primary);
+    border-bottom-left-radius: 4px;
+}
+
+.message-sources {
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    font-size: 0.875rem;
+}
+
+.source-item {
+    margin-top: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    font-size: 0.85rem;
+}
+
+.source-item strong {
+    display: block;
+    margin-bottom: 0.25rem;
+}
+
+.chat-input-area {
+    padding: 1.5rem;
+    border-top: 1px solid var(--border);
+}
+
+.chat-input-wrapper {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.chat-input {
+    flex: 1;
+    padding: 1rem 1.5rem;
+    border: 2px solid var(--border);
+    border-radius: 12px;
+    font-size: 1rem;
+    font-family: inherit;
+    transition: all 0.3s ease;
+}
+
+.chat-input:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
+}
+
+.btn-send {
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border: none;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.3s ease;
+    flex-shrink: 0;
+}
+
+.btn-send:hover {
+    transform: scale(1.05);
+    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+}
+
+/* ===== SUMMARY FORM ===== */
+.summary-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+}
+
+.form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.form-label {
+    font-size: 1.05rem;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+}
+
+.range-slider {
+    flex: 1;
+    height: 8px;
+    border-radius: 4px;
+    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.range-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+}
+
+.range-slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: white;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    border: none;
+}
+
+.slider-value {
+    min-width: 100px;
+    padding: 0.75rem 1.25rem;
+    background: var(--bg-main);
+    border-radius: 8px;
+    font-weight: 600;
+    text-align: center;
+    color: var(--primary);
+}
+
+/* ===== RESULT MESSAGES ===== */
+.result-message {
+    margin-top: 1.5rem;
+    padding: 1.25rem 1.5rem;
+    border-radius: 12px;
+    display: none;
+    animation: slideIn 0.3s ease;
+}
+
+.result-message.show {
+    display: block;
+}
+
+.result-message.success {
+    background: #f0fff4;
+    border: 1px solid #9ae6b4;
+    color: #22543d;
+}
+
+.result-message.error {
+    background: #fff5f5;
+    border: 1px solid #feb2b2;
+    color: #742a2a;
+}
+
+.result-message.info {
+    background: #ebf8ff;
+    border: 1px solid #90cdf4;
+    color: #2c5282;
+}
+
+.summary-output h3 {
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+}
+
+.summary-output p {
+    line-height: 1.8;
+    margin-bottom: 1rem;
+}
+
+/* ===== RESPONSIVE ===== */
+@media (max-width: 1024px) {
+    .sidebar {
+        width: 240px;
+    }
+
+    .main-content {
+        margin-left: 240px;
+    }
+}
+
+@media (max-width: 768px) {
+    .sidebar {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease;
+    }
+
+    .sidebar.mobile-open {
+        transform: translateX(0);
+    }
+
+    .main-content {
+        margin-left: 0;
+    }
+
+    .topbar {
+        padding: 1rem 1.5rem;
+    }
+
+    .view-container {
+        padding: 1.5rem;
+    }
+
+    .content-card {
+        padding: 1.5rem;
+    }
+
+    .message-bubble {
+        max-width: 85%;
+    }
+}
+
+/* ===== LOADING STATE ===== */
+.loading {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    border: 3px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* ===== SCROLLBAR ===== */
+::-webkit-scrollbar {
+    width: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-main);
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 5px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(135deg, #5568d3 0%, #6a3f8f 100%);
+}