init

.env.example

@@ -1,11 +1,13 @@
 # Azure OpenAI Configuration
 AZURE_OPENAI_API_KEY=your_azure_openai_api_key_here
-AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com/
+AZURE_OPENAI_ENDPOINT=https://your-resource.services.ai.azure.com/
 AZURE_OPENAI_API_VERSION=2024-08-01-preview
 
-# Azure OpenAI Embedding Configuration (for /llm endpoint)
-# IMPORTANT: Deploy text-embedding-3-small in Azure OpenAI Studio first!
-# See DEPLOYMENT_TROUBLESHOOTING.md for step-by-step guide
+# Azure OpenAI Embedding Configuration (separate resource for embeddings)
+# IMPORTANT: If using a different Azure resource for embeddings, set these variables
+# Otherwise, the main AZURE_OPENAI credentials will be used
+AZURE_EMBEDDING_API_KEY=your_embedding_api_key_here
+AZURE_EMBEDDING_ENDPOINT=https://your-embedding-resource.cognitiveservices.azure.com/
 AZURE_EMBEDDING_MODEL=text-embedding-3-small
 AZURE_EMBEDDING_DIMS=1024
 
@@ -13,16 +15,20 @@ AZURE_EMBEDDING_DIMS=1024
 AZURE_DOCUMENT_INTELLIGENCE_ENDPOINT=https://your-resource.services.ai.azure.com/
 AZURE_DOCUMENT_INTELLIGENCE_KEY=your_document_intelligence_key_here
 
+# Azure AI Foundry Models
+# Access to LLaMA and other models via Azure AI Foundry
+# https://azure.microsoft.com/en-us/products/ai-foundry/models
+
 # VM Configuration (Optional)
 VM_HOST=your-vm-host.cloudapp.azure.com
 VM_USER=hackathon
 VM_SSH_KEY=your_ssh_key
 
-# HuggingFace Resources (Optional)
+# HuggingFace Resources
 HUGGINGFACE_ORG=https://huggingface.co/SOCARAI
 DATASET_NAME=SOCARAI/ai_track_data
 
-# GitHub Code Samples (Optional)
+# GitHub Code Samples
 CODE_SAMPLES_REPO=https://github.com/neaorin/foundry-models-samples
 
 # Application Configuration
@@ -37,7 +43,7 @@ PROCESSED_DIR=./data/processed
 LLM_MODEL=Llama-4-Maverick-17B-128E-Instruct-FP8
 
 # Pinecone Configuration (Cloud Vector Database)
-PINECONE_API_KEY=pcsk_2aNboE_GqcDREwMDyGKQkg6paRUG6tFJwK1CtyQwZ5dgmFCGVUmyVK1bA167LNNMkdYLY3
+PINECONE_API_KEY=your_pinecone_api_key_here
 PINECONE_INDEX_NAME=hackathon
 PINECONE_CLOUD=aws
 PINECONE_REGION=us-east-1
@@ -48,20 +54,7 @@ API_HOST=0.0.0.0
 API_PORT=8000
 
 # OCR Configuration
-OCR_MAX_PAGES=0  # 0 = unlimited pages. Set to limit if on constrained hosting (e.g., 5 for 512MB)
-
-# Production SSL/Security Configuration
-# Set these for production deployment (see docs/markdowns/SSL_CAA_SETUP.md)
-PRODUCTION=false
-HTTPS_ONLY=false
-
-# Domain configuration - comma-separated list of allowed hosts
-# Example: TRUSTED_HOSTS=yourdomain.com,www.yourdomain.com
-TRUSTED_HOSTS=*
-
-# CORS Origins - comma-separated list of allowed origins
-# Example: ALLOWED_ORIGINS=https://yourdomain.com,https://www.yourdomain.com
-ALLOWED_ORIGINS=*
+OCR_MAX_PAGES=0  # 0 = unlimited pages (set to limit if needed)
 
 # Disable telemetry and warnings
 TOKENIZERS_PARALLELISM=false

README.md

@@ -317,9 +317,12 @@ We conducted comprehensive benchmarks to select the optimal language model for o
 - Python 3.11+
 - Azure OpenAI API key
 - Pinecone API key
-- Docker (optional)
+- Docker (optional, for containerized deployment)
+- ngrok (optional, for public URL)
 
-### Installation
+---
+
+### Option 1: Local Development (Recommended for Development)
 
 1. **Clone the repository**:
 ```bash
@@ -342,37 +345,234 @@ Required variables:
 ```env
 AZURE_OPENAI_API_KEY=your_azure_key
 AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com/
+AZURE_EMBEDDING_API_KEY=your_embedding_key  # If using separate resource
+AZURE_EMBEDDING_ENDPOINT=https://your-embedding.cognitiveservices.azure.com/
 PINECONE_API_KEY=your_pinecone_key
 PINECONE_INDEX_NAME=hackathon
 ```
 
 4. **Ingest PDFs** (one-time setup):
 ```bash
-# Test with single PDF
-python scripts/ingest_pdfs.py test
+# Ingest all PDFs from hackathon_data folder (parallel processing)
+python scripts/ingest_hackathon_data.py
 
-# Ingest all PDFs
-python scripts/ingest_pdfs.py
+# Check ingestion status
+python scripts/check_pinecone.py
 ```
 
-5. **Start the API**:
+5. **Start the API server**:
 ```bash
-cd app && uvicorn main:app --host 0.0.0.0 --port 8000
+cd app && uvicorn main:app --reload --host 0.0.0.0 --port 8000
 ```
 
+The `--reload` flag enables auto-reload on code changes (development mode).
+
 6. **Access the system**:
-- API Docs: http://localhost:8000/docs
-- Web UI: http://localhost:8000
-- Health Check: http://localhost:8000/health
+- **Web UI**: http://localhost:8000
+- **API Docs**: http://localhost:8000/docs
+- **Health Check**: http://localhost:8000/health
+- **ngrok URL** (if using ngrok): See ngrok setup below
+
+---
+
+### Option 2: Docker (Recommended for Production)
+
+#### Using Docker Compose (Easiest)
+
+```bash
+# Build and start the container
+docker-compose up --build
+
+# Run in detached mode (background)
+docker-compose up -d
+
+# View logs
+docker-compose logs -f
+
+# Stop the container
+docker-compose down
+```
+
+Access at: http://localhost:8000
+
+#### Using Docker CLI
+
+```bash
+# Build the image
+docker build -t socar-ai-system .
+
+# Run the container
+docker run -d \
+  --name socar-ai \
+  -p 8000:8000 \
+  --env-file .env \
+  --restart unless-stopped \
+  socar-ai-system
+
+# View logs
+docker logs -f socar-ai
+
+# Stop the container
+docker stop socar-ai
+
+# Remove the container
+docker rm socar-ai
+```
 
-### Docker Deployment
+#### Docker Health Check
 
+The container includes automatic health checks:
 ```bash
-# Build image
-docker build -t socar-ai .
+# Check container health
+docker inspect --format='{{.State.Health.Status}}' socar-ai
+
+# Manual health check
+curl http://localhost:8000/health
+```
+
+---
+
+### Option 3: Public URL with ngrok (Optional)
+
+Make your local server publicly accessible for demos, testing, or hackathon submissions.
+
+#### Install ngrok
+
+**macOS** (using Homebrew):
+```bash
+brew install ngrok
+```
+
+**Linux/Windows**: Download from https://ngrok.com/download
+
+#### Setup ngrok Authentication (One-Time)
+
+1. Sign up at https://dashboard.ngrok.com/signup
+2. Get your auth token from https://dashboard.ngrok.com/get-started/your-authtoken
+3. Configure ngrok:
+```bash
+ngrok config add-authtoken YOUR_AUTHTOKEN
+```
+
+#### Start ngrok Tunnel
+
+**Basic tunnel** (random URL):
+```bash
+# Start ngrok tunnel to local port 8000
+ngrok http 8000
+```
+
+**Custom subdomain** (requires ngrok paid plan):
+```bash
+ngrok http 8000 --subdomain=socar-hackathon
+```
 
-# Run container
-docker run -p 8000:8000 --env-file .env socar-ai
+**With specific region**:
+```bash
+ngrok http 8000 --region=eu  # Europe
+ngrok http 8000 --region=us  # United States
+```
+
+#### ngrok Output Example
+
+```
+ngrok
+
+Session Status                online
+Account                       your-email@example.com
+Version                       3.0.0
+Region                        United States (us)
+Latency                       45ms
+Web Interface                 http://127.0.0.1:4040
+Forwarding                    https://abc123.ngrok.io -> http://localhost:8000
+
+Connections                   ttl     opn     rt1     rt5     p50     p90
+                              0       0       0.00    0.00    0.00    0.00
+```
+
+Your **public URL** is: `https://abc123.ngrok.io`
+
+#### ngrok Web Interface
+
+Access http://127.0.0.1:4040 for:
+- Request inspection
+- Replay requests
+- Traffic analysis
+- Response details
+
+#### Keep ngrok Running
+
+**Using tmux** (recommended for servers):
+```bash
+# Start tmux session
+tmux new -s ngrok
+
+# Inside tmux: start ngrok
+ngrok http 8000
+
+# Detach: Press Ctrl+B, then D
+# Reattach: tmux attach -t ngrok
+```
+
+**Using nohup**:
+```bash
+nohup ngrok http 8000 > ngrok.log 2>&1 &
+
+# View logs
+tail -f ngrok.log
+
+# Get ngrok URL
+curl http://localhost:4040/api/tunnels | grep -o 'https://[^"]*ngrok.io'
+```
+
+---
+
+### Complete Setup Example (Local + ngrok)
+
+```bash
+# Terminal 1: Start the API server
+cd SOCAR_Hackathon/app
+uvicorn main:app --reload --host 0.0.0.0 --port 8000
+
+# Terminal 2: Start ngrok tunnel
+ngrok http 8000
+
+# Your app is now accessible at:
+# - Local: http://localhost:8000
+# - Public: https://abc123.ngrok.io (from ngrok output)
+```
+
+---
+
+### Verify Installation
+
+Test all endpoints:
+
+```bash
+# Health check
+curl http://localhost:8000/health
+
+# LLM endpoint test
+curl -X POST http://localhost:8000/llm \
+  -H "Content-Type: application/json" \
+  -d '{"question": "SOCAR haqqında məlumat verin"}'
+
+# OCR endpoint test (requires PDF file)
+curl -X POST http://localhost:8000/ocr \
+  -F "file=@/path/to/document.pdf"
+```
+
+Expected response for health check:
+```json
+{
+  "status": "healthy",
+  "pinecone": {
+    "connected": true,
+    "total_vectors": 606
+  },
+  "azure_openai": "connected",
+  "embedding_model": "loaded"
+}
 ```
 
 ---

presentation/PITCH_DECK.md

@@ -1,317 +0,0 @@
-# SOCAR Historical Documents AI
-## Intelligent OCR & RAG System for Oil & Gas Archives
-
-**Hackathon Pitch Deck**
-
----
-
-# Slide 1: Title
-
-# SOCAR Historical Documents AI
-
-### Intelligent OCR & RAG System for Oil & Gas Archives
-
-> Transforming 28 Historical Documents into Searchable Knowledge
-
----
-
-# Slide 2: The Problem
-
-## The Challenge We're Solving
-
-### 1. Inaccessible Archives
-- Decades of valuable historical documents locked in PDF format
-- Impossible to search or query efficiently
-
-### 2. Multi-Language Barrier
-- Documents in **Azerbaijani**, **Russian**, and **English**
-- Complex Cyrillic text preservation required
-
-### 3. Time-Consuming Research
-- Manual document review takes hours
-- Finding specific information is a needle-in-haystack problem
-
-> **How can we unlock institutional knowledge trapped in historical documents?**
-
----
-
-# Slide 3: Our Solution
-
-## A Complete Document Intelligence System
-
-| Feature | Description |
-|---------|-------------|
-| **Vision-Language OCR** | Llama-4-Maverick extracts text with **87.75% accuracy**, preserving Cyrillic characters |
-| **Semantic Search** | BAAI/bge-large embeddings + Pinecone enable instant retrieval across **1,128 chunks** |
-| **RAG-Powered Q&A** | Natural language questions answered with **source citations** |
-| **Production-Ready API** | FastAPI + Docker with health monitoring and web UI |
-
----
-
-# Slide 4: System Architecture
-
-```
-┌─────────────────────────────────────────────────────────────────────┐
-│                         SYSTEM ARCHITECTURE                         │
-└─────────────────────────────────────────────────────────────────────┘
-
-┌──────────┐    ┌──────────────┐    ┌──────────────┐    ┌───────────┐
-│   PDF    │ -> │ Llama-4      │ -> │ BAAI/bge     │ -> │ Pinecone  │
-│ Documents│    │ Vision OCR   │    │ Embeddings   │    │ Vector DB │
-└──────────┘    └──────────────┘    └──────────────┘    └───────────┘
-                                                              │
-                                                              v
-┌──────────┐    ┌──────────────┐    ┌──────────────┐    ┌───────────┐
-│  Answer  │ <- │ Llama-4 LLM  │ <- │   Context    │ <- │  Top-3    │
-│ + Sources│    │ Generation   │    │   Building   │    │ Retrieval │
-└──────────┘    └──────────────┘    └──────────────┘    └───────────┘
-```
-
-### OCR Pipeline
-```
-PDF Upload → PyMuPDF (100 DPI) → Vision LLM → Image Detection → Markdown Output
-```
-
-### RAG Pipeline
-```
-User Question → Embed Query → Top-3 Retrieval → Context Building → LLM + Citations
-```
-
----
-
-# Slide 5: Technology Stack
-
-## Open-Source & Production-Ready
-
-| Component | Technology | Purpose |
-|-----------|------------|---------|
-| **OCR/LLM** | Llama-4-Maverick-17B | Vision & Language Model |
-| **Embeddings** | BAAI/bge-large-en-v1.5 | 1024-dimensional vectors |
-| **Vector DB** | Pinecone Cloud | Scalable similarity search |
-| **API** | FastAPI | Async REST endpoints |
-| **PDF Processing** | PyMuPDF | PDF to image conversion |
-| **Deployment** | Docker | Containerization |
-
-### API Endpoints
-
-| Method | Endpoint | Description |
-|--------|----------|-------------|
-| `POST` | `/ocr` | Extract text from uploaded PDF with image detection |
-| `POST` | `/llm` | RAG-based Q&A with source citations |
-| `GET` | `/health` | Service health check and vector count |
-| `GET` | `/` | Interactive web interface |
-
----
-
-# Slide 6: OCR Benchmark Results
-
-## We Tested 3 OCR Models
-
-| Model | Character Success Rate | Word Success Rate | Speed (12 pages) | Type |
-|-------|----------------------|-------------------|------------------|------|
-| GPT-4.1 | 88.12% | 67.44% | 199s | Closed |
-| **Llama-4-Maverick 17B** | **87.75%** | **61.91%** | **75s** | **Open** |
-| Phi-4-multimodal | Failed | Failed | N/A | Open |
-
-### Why We Chose Llama-4:
-- Only **0.37% accuracy loss** vs GPT-4.1
-- **2.7x faster** processing
-- **100% open-source**
-- No vendor lock-in
-
----
-
-# Slide 7: RAG Optimization Results
-
-## We Tested 7 Configurations
-
-| Configuration | Answer Quality | Citation Rate | Response Time |
-|--------------|----------------|---------------|---------------|
-| **Citation-focused + Vanilla k3** | **55.67%** | **73.33%** | **3.61s** |
-| Few-shot + Vanilla k3 | 45.70% | 40.00% | 2.17s |
-| Baseline + Vanilla k3 | 39.65% | 20.00% | 2.28s |
-| MMR Retrieval | 34.60% | 6.67% | 2.53s |
-
-### Key Insights
-
-1. **Simple Beats Complex**: Vanilla retrieval outperforms MMR reranking by **+21%**
-2. **Less is More**: Top-3 beats Top-5 by **+20%** (more context confused the LLM)
-3. **Prompt Engineering Matters**: Citation-focused prompt improves quality by **+16%**
-
----
-
-# Slide 8: Performance Metrics
-
-## Final System Performance
-
-| Metric | Score |
-|--------|-------|
-| **OCR Accuracy** | 87.75% |
-| **Answer Quality** | 55.67% |
-| **Citation Rate** | 73.33% |
-| **Response Time** | 3.6 seconds |
-
----
-
-## Estimated Hackathon Score
-
-| Category | Weight | Score | Points |
-|----------|--------|-------|--------|
-| OCR Quality | 50% | 87.75% | **43.9 / 50** |
-| LLM Quality | 30% | 55.67% | **16.7 / 30** |
-| Architecture | 20% | 100% | **20 / 20** |
-| **TOTAL** | 100% | **88.1%** | **440.6 / 500** |
-
----
-
-# Slide 9: Key Technical Decisions
-
-## What We Did (and Why)
-
-| Decision | Reason | Impact |
-|----------|--------|--------|
-| **Open-source Llama** over GPT-4 | Transparency + speed | 2.7x faster |
-| **Top-3 retrieval** | More context confused LLM | +20% quality |
-| **Vanilla retrieval** | Simple beats complex | +21% vs MMR |
-| **Citation-focused prompt** | In Azerbaijani | +16% quality, +53% citations |
-| **BAAI embeddings** | Best for non-English | +25% vs multilingual |
-| **600-char chunks** | Optimal context size | Balanced retrieval |
-
-## What We Avoided
-
-- MMR/Reranking (21% worse performance)
-- Top-5+ retrieval (information overload)
-- Few-shot prompting (inconsistent results)
-- Multilingual embeddings (underperformed)
-- Complex architectures (unnecessary overhead)
-
-> *"Every decision was validated through rigorous benchmarking across 3 Jupyter notebooks"*
-
----
-
-# Slide 10: Live Demo Features
-
-## Interactive Capabilities
-
-### 1. PDF Upload & OCR
-- Drag & drop any PDF
-- Text extraction with image detection
-- Results in markdown format
-
-### 2. Interactive Q&A Chat
-- Ask questions in Azerbaijani, Russian, or English
-- Real-time responses with context
-
-### 3. Source Citations
-- Document name, page number, and excerpt
-- Full traceability for verification
-
-### 4. API Documentation
-- Swagger UI at `/docs`
-- Interactive testing capabilities
-
-**Demo URL**: `http://localhost:8000`
-
----
-
-# Slide 11: Deliverables
-
-## What We Built
-
-| Category | Count |
-|----------|-------|
-| PDFs Processed | 28 |
-| Vector Chunks | 1,128 |
-| Benchmark Notebooks | 3 |
-| Documentation Files | 8 |
-
-### Code & Infrastructure
-- FastAPI application (505 lines)
-- Data ingestion pipeline with parallel processing (4x speedup)
-- Docker + Docker Compose deployment
-- Health monitoring and web UI
-
-### Documentation & Analysis
-- VLM OCR benchmark notebook
-- RAG optimization notebook
-- LLM comparison notebook
-- Comprehensive markdown documentation
-- Sample questions & answers
-
----
-
-# Slide 12: Thank You!
-
-## SOCAR Historical Documents AI System
-
-> Transforming archives into accessible, searchable knowledge
-
-### Final Metrics
-
-| Metric | Value |
-|--------|-------|
-| OCR Accuracy | **87.75%** |
-| Estimated Score | **440.6 / 500** |
-| Open Source | **100%** |
-| Response Time | **3.6s** |
-
----
-
-# Questions? Let's Demo!
-
-**GitHub**: [Repository Link]
-**API Docs**: `http://localhost:8000/docs`
-**Web UI**: `http://localhost:8000`
-
----
-
-# Appendix: Sample Questions
-
-## Test Questions (Azerbaijani)
-
-1. "Palciq vulkanlarinin tasir radiusu na qadardir?"
-2. "SOCAR-in tarixi haqqinda malumat verin"
-3. "Neft hasilatinin illik hacmi necedr?"
-
-## Expected Response Format
-
-```json
-{
-  "answer": "Answer with citations...",
-  "sources": [
-    {
-      "pdf_name": "document_06.pdf",
-      "page_number": 3,
-      "content": "Relevant excerpt..."
-    }
-  ],
-  "response_time": 3.61
-}
-```
-
----
-
-# Appendix: Quick Start
-
-## Running the System
-
-```bash
-# Option 1: Docker Compose (Recommended)
-docker-compose up -d
-
-# Option 2: Manual Installation
-pip install -r app/requirements.txt
-python app/main.py
-
-# Access the application
-open http://localhost:8000
-```
-
-## Environment Variables
-
-```bash
-AZURE_OPENAI_API_KEY=your_key
-AZURE_OPENAI_ENDPOINT=https://your-resource.openai.azure.com/
-PINECONE_API_KEY=your_pinecone_key
-PINECONE_INDEX_NAME=hackathon
-```

presentation/pitch_deck.html

@@ -1,1185 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SOCAR Historical Documents AI - Hackathon Pitch</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #0a0a0a;
-            color: #ffffff;
-            overflow: hidden;
-        }
-
-        .slide {
-            display: none;
-            width: 100vw;
-            height: 100vh;
-            padding: 60px 80px;
-            background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
-            position: relative;
-            overflow: hidden;
-        }
-
-        .slide.active {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .slide::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 4px;
-            background: linear-gradient(90deg, #00d4aa, #0099ff, #00d4aa);
-        }
-
-        /* Title Slide */
-        .title-slide {
-            text-align: center;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .title-slide h1 {
-            font-size: 4rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #00d4aa, #0099ff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 20px;
-        }
-
-        .title-slide .subtitle {
-            font-size: 1.8rem;
-            color: #8b949e;
-            margin-bottom: 40px;
-        }
-
-        .title-slide .tagline {
-            font-size: 1.3rem;
-            color: #58a6ff;
-            padding: 15px 30px;
-            border: 2px solid #30363d;
-            border-radius: 10px;
-            background: rgba(88, 166, 255, 0.1);
-        }
-
-        /* Regular Slides */
-        h2 {
-            font-size: 2.8rem;
-            color: #00d4aa;
-            margin-bottom: 40px;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        h2 .icon {
-            font-size: 2.5rem;
-        }
-
-        h3 {
-            font-size: 1.6rem;
-            color: #58a6ff;
-            margin: 25px 0 15px 0;
-        }
-
-        p {
-            font-size: 1.3rem;
-            line-height: 1.8;
-            color: #c9d1d9;
-        }
-
-        ul {
-            list-style: none;
-            padding-left: 0;
-        }
-
-        li {
-            font-size: 1.4rem;
-            line-height: 2;
-            color: #c9d1d9;
-            padding-left: 35px;
-            position: relative;
-        }
-
-        li::before {
-            content: '▹';
-            position: absolute;
-            left: 0;
-            color: #00d4aa;
-            font-size: 1.2rem;
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            gap: 30px;
-            margin-top: 40px;
-        }
-
-        .stat-card {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 16px;
-            padding: 30px;
-            text-align: center;
-            transition: transform 0.3s, border-color 0.3s;
-        }
-
-        .stat-card:hover {
-            transform: translateY(-5px);
-            border-color: #00d4aa;
-        }
-
-        .stat-card .number {
-            font-size: 3rem;
-            font-weight: 700;
-            background: linear-gradient(135deg, #00d4aa, #0099ff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .stat-card .label {
-            font-size: 1rem;
-            color: #8b949e;
-            margin-top: 10px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        /* Architecture Diagram */
-        .architecture {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 30px;
-            padding: 20px;
-        }
-
-        .arch-box {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 2px solid #30363d;
-            border-radius: 12px;
-            padding: 25px 35px;
-            text-align: center;
-            min-width: 180px;
-        }
-
-        .arch-box.highlight {
-            border-color: #00d4aa;
-            box-shadow: 0 0 30px rgba(0, 212, 170, 0.2);
-        }
-
-        .arch-box .title {
-            font-size: 1rem;
-            color: #8b949e;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 8px;
-        }
-
-        .arch-box .tech {
-            font-size: 1.2rem;
-            color: #58a6ff;
-            font-weight: 600;
-        }
-
-        .arrow {
-            font-size: 2rem;
-            color: #00d4aa;
-        }
-
-        /* Two Column Layout */
-        .two-col {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 60px;
-            margin-top: 20px;
-        }
-
-        .col {
-            background: rgba(33, 38, 45, 0.5);
-            border-radius: 16px;
-            padding: 30px;
-            border: 1px solid #30363d;
-        }
-
-        /* Tech Stack */
-        .tech-stack {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            margin-top: 30px;
-        }
-
-        .tech-item {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 12px;
-            padding: 20px;
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .tech-item .icon {
-            font-size: 2rem;
-        }
-
-        .tech-item .name {
-            font-size: 1.1rem;
-            color: #c9d1d9;
-        }
-
-        .tech-item .desc {
-            font-size: 0.9rem;
-            color: #8b949e;
-        }
-
-        /* Comparison Table */
-        .comparison-table {
-            width: 100%;
-            margin-top: 30px;
-            border-collapse: collapse;
-        }
-
-        .comparison-table th,
-        .comparison-table td {
-            padding: 18px 25px;
-            text-align: left;
-            border-bottom: 1px solid #30363d;
-        }
-
-        .comparison-table th {
-            background: #21262d;
-            color: #58a6ff;
-            font-size: 1.1rem;
-            font-weight: 600;
-        }
-
-        .comparison-table td {
-            font-size: 1.1rem;
-            color: #c9d1d9;
-        }
-
-        .comparison-table tr:hover td {
-            background: rgba(0, 212, 170, 0.05);
-        }
-
-        .comparison-table .winner {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-
-        .comparison-table .badge {
-            display: inline-block;
-            padding: 4px 12px;
-            border-radius: 20px;
-            font-size: 0.85rem;
-            font-weight: 600;
-        }
-
-        .badge.open {
-            background: rgba(0, 212, 170, 0.2);
-            color: #00d4aa;
-        }
-
-        .badge.closed {
-            background: rgba(255, 107, 107, 0.2);
-            color: #ff6b6b;
-        }
-
-        /* Flow Diagram */
-        .flow {
-            display: flex;
-            flex-direction: column;
-            gap: 15px;
-            margin-top: 20px;
-        }
-
-        .flow-row {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .flow-box {
-            background: #21262d;
-            border: 1px solid #30363d;
-            border-radius: 8px;
-            padding: 12px 20px;
-            font-size: 1rem;
-            color: #c9d1d9;
-        }
-
-        .flow-box.primary {
-            border-color: #00d4aa;
-            color: #00d4aa;
-        }
-
-        .flow-arrow {
-            color: #58a6ff;
-            font-size: 1.2rem;
-        }
-
-        /* Navigation */
-        .nav {
-            position: fixed;
-            bottom: 30px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 15px;
-            z-index: 1000;
-        }
-
-        .nav button {
-            background: #21262d;
-            border: 1px solid #30363d;
-            color: #c9d1d9;
-            padding: 12px 25px;
-            border-radius: 8px;
-            cursor: pointer;
-            font-size: 1rem;
-            transition: all 0.3s;
-        }
-
-        .nav button:hover {
-            background: #30363d;
-            border-color: #00d4aa;
-            color: #00d4aa;
-        }
-
-        .slide-counter {
-            position: fixed;
-            bottom: 30px;
-            right: 40px;
-            color: #8b949e;
-            font-size: 1rem;
-        }
-
-        /* Problem icons */
-        .problem-grid {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 30px;
-            margin-top: 40px;
-        }
-
-        .problem-card {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 16px;
-            padding: 35px;
-            text-align: center;
-        }
-
-        .problem-card .icon {
-            font-size: 3rem;
-            margin-bottom: 20px;
-        }
-
-        .problem-card h4 {
-            font-size: 1.3rem;
-            color: #ff6b6b;
-            margin-bottom: 12px;
-        }
-
-        .problem-card p {
-            font-size: 1rem;
-            color: #8b949e;
-        }
-
-        /* Solution cards */
-        .solution-grid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 30px;
-            margin-top: 30px;
-        }
-
-        .solution-card {
-            background: linear-gradient(135deg, rgba(0, 212, 170, 0.1) 0%, rgba(0, 153, 255, 0.1) 100%);
-            border: 1px solid #00d4aa;
-            border-radius: 16px;
-            padding: 30px;
-        }
-
-        .solution-card h4 {
-            font-size: 1.4rem;
-            color: #00d4aa;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        .solution-card p {
-            font-size: 1.1rem;
-            color: #c9d1d9;
-        }
-
-        /* Score breakdown */
-        .score-breakdown {
-            margin-top: 30px;
-        }
-
-        .score-item {
-            display: flex;
-            align-items: center;
-            margin-bottom: 25px;
-        }
-
-        .score-label {
-            width: 200px;
-            font-size: 1.2rem;
-            color: #c9d1d9;
-        }
-
-        .score-bar-container {
-            flex: 1;
-            height: 30px;
-            background: #21262d;
-            border-radius: 15px;
-            overflow: hidden;
-            margin: 0 20px;
-        }
-
-        .score-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #00d4aa, #0099ff);
-            border-radius: 15px;
-            transition: width 1s ease-out;
-        }
-
-        .score-value {
-            width: 100px;
-            font-size: 1.3rem;
-            font-weight: 700;
-            color: #00d4aa;
-            text-align: right;
-        }
-
-        /* Final slide */
-        .final-slide {
-            text-align: center;
-        }
-
-        .final-slide h2 {
-            justify-content: center;
-            font-size: 3rem;
-            margin-bottom: 30px;
-        }
-
-        .contact-info {
-            display: flex;
-            justify-content: center;
-            gap: 40px;
-            margin-top: 50px;
-        }
-
-        .contact-item {
-            background: #21262d;
-            border: 1px solid #30363d;
-            border-radius: 12px;
-            padding: 20px 40px;
-        }
-
-        .contact-item .label {
-            font-size: 0.9rem;
-            color: #8b949e;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .contact-item .value {
-            font-size: 1.2rem;
-            color: #58a6ff;
-            margin-top: 8px;
-        }
-
-        /* Highlight text */
-        .highlight-text {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-
-        /* Demo section */
-        .demo-features {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 25px;
-            margin-top: 30px;
-        }
-
-        .demo-feature {
-            background: #21262d;
-            border: 1px solid #30363d;
-            border-radius: 12px;
-            padding: 25px;
-            display: flex;
-            gap: 20px;
-            align-items: flex-start;
-        }
-
-        .demo-feature .icon {
-            font-size: 2.5rem;
-            color: #00d4aa;
-        }
-
-        .demo-feature h4 {
-            font-size: 1.2rem;
-            color: #c9d1d9;
-            margin-bottom: 8px;
-        }
-
-        .demo-feature p {
-            font-size: 1rem;
-            color: #8b949e;
-        }
-
-        /* API endpoints */
-        .endpoint {
-            background: #161b22;
-            border: 1px solid #30363d;
-            border-radius: 8px;
-            padding: 15px 20px;
-            margin: 10px 0;
-            font-family: 'Courier New', monospace;
-        }
-
-        .endpoint .method {
-            display: inline-block;
-            padding: 4px 10px;
-            border-radius: 4px;
-            font-size: 0.85rem;
-            font-weight: 700;
-            margin-right: 15px;
-        }
-
-        .endpoint .method.post {
-            background: rgba(0, 212, 170, 0.2);
-            color: #00d4aa;
-        }
-
-        .endpoint .method.get {
-            background: rgba(88, 166, 255, 0.2);
-            color: #58a6ff;
-        }
-
-        .endpoint .path {
-            color: #c9d1d9;
-            font-size: 1.1rem;
-        }
-
-        .endpoint .desc {
-            color: #8b949e;
-            font-size: 0.95rem;
-            margin-left: 70px;
-            margin-top: 5px;
-        }
-
-        /* Key decisions */
-        .decision-list {
-            margin-top: 20px;
-        }
-
-        .decision-item {
-            background: #21262d;
-            border-left: 4px solid #00d4aa;
-            padding: 20px 25px;
-            margin: 15px 0;
-            border-radius: 0 8px 8px 0;
-        }
-
-        .decision-item h4 {
-            color: #58a6ff;
-            font-size: 1.2rem;
-            margin-bottom: 8px;
-        }
-
-        .decision-item p {
-            font-size: 1rem;
-            color: #8b949e;
-        }
-
-        .decision-item .result {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-    </style>
-</head>
-<body>
-    <!-- Slide 1: Title -->
-    <div class="slide title-slide active" id="slide1">
-        <h1>SOCAR Historical Documents AI</h1>
-        <p class="subtitle">Intelligent OCR & RAG System for Oil & Gas Archives</p>
-        <p class="tagline">🛢️ Transforming 28 Historical Documents into Searchable Knowledge</p>
-        <div style="margin-top: 50px;">
-            <p style="font-size: 1.5rem; color: #00d4aa; font-weight: 700; margin-bottom: 15px;">Team BeatByte</p>
-            <p style="font-size: 1.1rem; color: #8b949e;">Ulvi Bashirov &nbsp;•&nbsp; Samir Mehdiyev &nbsp;•&nbsp; Ismat Samadov</p>
-        </div>
-    </div>
-
-    <!-- Slide 2: Problem Statement -->
-    <div class="slide" id="slide2">
-        <h2><span class="icon">⚠️</span> The Problem</h2>
-        <div class="problem-grid">
-            <div class="problem-card">
-                <div class="icon">📄</div>
-                <h4>Inaccessible Archives</h4>
-                <p>Decades of valuable historical documents locked in PDF format, impossible to search</p>
-            </div>
-            <div class="problem-card">
-                <div class="icon">🌍</div>
-                <h4>Multi-Language Barrier</h4>
-                <p>Documents in Azerbaijani, Russian, and English with complex Cyrillic text</p>
-            </div>
-            <div class="problem-card">
-                <div class="icon">⏱️</div>
-                <h4>Time-Consuming Research</h4>
-                <p>Manual document review takes hours to find specific information</p>
-            </div>
-        </div>
-        <p style="margin-top: 40px; text-align: center; font-size: 1.5rem; color: #ff6b6b;">
-            How can we unlock institutional knowledge trapped in historical documents?
-        </p>
-    </div>
-
-    <!-- Slide 3: Our Solution -->
-    <div class="slide" id="slide3">
-        <h2><span class="icon">💡</span> Our Solution</h2>
-        <div class="solution-grid">
-            <div class="solution-card">
-                <h4>📸 Vision-Language OCR</h4>
-                <p>State-of-the-art Llama-4-Maverick model extracts text from scanned documents with <span class="highlight-text">87.75% accuracy</span>, preserving Cyrillic characters perfectly</p>
-            </div>
-            <div class="solution-card">
-                <h4>🔍 Semantic Search</h4>
-                <p>BAAI/bge-large embeddings + Pinecone vector database enable instant retrieval across <span class="highlight-text">1,128 document chunks</span></p>
-            </div>
-            <div class="solution-card">
-                <h4>🤖 RAG-Powered Q&A</h4>
-                <p>Natural language questions answered with relevant context and <span class="highlight-text">source citations</span> for verification</p>
-            </div>
-            <div class="solution-card">
-                <h4>🌐 Production-Ready API</h4>
-                <p>FastAPI backend with Docker deployment, health monitoring, and interactive web interface</p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 4: Architecture -->
-    <div class="slide" id="slide4">
-        <h2><span class="icon">🏗️</span> System Architecture</h2>
-        <div class="architecture">
-            <div class="arch-box">
-                <div class="title">Input</div>
-                <div class="tech">PDF Documents</div>
-            </div>
-            <span class="arrow">→</span>
-            <div class="arch-box highlight">
-                <div class="title">OCR Engine</div>
-                <div class="tech">Llama-4 Vision</div>
-            </div>
-            <span class="arrow">→</span>
-            <div class="arch-box">
-                <div class="title">Embeddings</div>
-                <div class="tech">BAAI/bge-large</div>
-            </div>
-            <span class="arrow">→</span>
-            <div class="arch-box highlight">
-                <div class="title">Vector DB</div>
-                <div class="tech">Pinecone Cloud</div>
-            </div>
-            <span class="arrow">→</span>
-            <div class="arch-box">
-                <div class="title">LLM</div>
-                <div class="tech">Llama-4 17B</div>
-            </div>
-        </div>
-        <div class="two-col" style="margin-top: 40px;">
-            <div class="col">
-                <h3>OCR Pipeline</h3>
-                <div class="flow">
-                    <div class="flow-row">
-                        <div class="flow-box">PDF Upload</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box">PyMuPDF (100 DPI)</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box primary">Vision LLM</div>
-                    </div>
-                    <div class="flow-row">
-                        <div class="flow-box">Image Detection</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box">Markdown Output</div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <h3>RAG Pipeline</h3>
-                <div class="flow">
-                    <div class="flow-row">
-                        <div class="flow-box">User Question</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box">Embed Query</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box primary">Top-3 Retrieval</div>
-                    </div>
-                    <div class="flow-row">
-                        <div class="flow-box">Context Building</div>
-                        <span class="flow-arrow">→</span>
-                        <div class="flow-box">LLM + Citations</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 5: Technology Stack -->
-    <div class="slide" id="slide5">
-        <h2><span class="icon">🛠️</span> Technology Stack</h2>
-        <div class="tech-stack">
-            <div class="tech-item">
-                <span class="icon">🦙</span>
-                <div>
-                    <div class="name">Llama-4-Maverick 17B</div>
-                    <div class="desc">Vision & Language Model</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">🧠</span>
-                <div>
-                    <div class="name">BAAI/bge-large-en</div>
-                    <div class="desc">1024-dim Embeddings</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">🌲</span>
-                <div>
-                    <div class="name">Pinecone Cloud</div>
-                    <div class="desc">Vector Database</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">⚡</span>
-                <div>
-                    <div class="name">FastAPI</div>
-                    <div class="desc">Async REST API</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">📄</span>
-                <div>
-                    <div class="name">PyMuPDF</div>
-                    <div class="desc">PDF Processing</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">🐳</span>
-                <div>
-                    <div class="name">Docker</div>
-                    <div class="desc">Containerization</div>
-                </div>
-            </div>
-        </div>
-        <div style="margin-top: 50px;">
-            <h3>API Endpoints</h3>
-            <div class="endpoint">
-                <span class="method post">POST</span>
-                <span class="path">/ocr</span>
-                <div class="desc">Extract text from uploaded PDF with image detection</div>
-            </div>
-            <div class="endpoint">
-                <span class="method post">POST</span>
-                <span class="path">/llm</span>
-                <div class="desc">RAG-based Q&A with source citations</div>
-            </div>
-            <div class="endpoint">
-                <span class="method get">GET</span>
-                <span class="path">/health</span>
-                <div class="desc">Service health check and vector count</div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 6: Benchmark Results -->
-    <div class="slide" id="slide6">
-        <h2><span class="icon">📊</span> Benchmark Results</h2>
-        <p style="margin-bottom: 30px;">We rigorously tested <span class="highlight-text">3 OCR models</span>, <span class="highlight-text">7 RAG configurations</span>, and <span class="highlight-text">3 LLMs</span> to optimize performance</p>
-
-        <h3>OCR Model Comparison</h3>
-        <table class="comparison-table">
-            <tr>
-                <th>Model</th>
-                <th>Character Success Rate</th>
-                <th>Word Success Rate</th>
-                <th>Speed (12 pages)</th>
-                <th>Type</th>
-            </tr>
-            <tr>
-                <td>GPT-4.1</td>
-                <td>88.12%</td>
-                <td>67.44%</td>
-                <td>199s</td>
-                <td><span class="badge closed">Closed</span></td>
-            </tr>
-            <tr>
-                <td class="winner">Llama-4-Maverick 17B ✓</td>
-                <td class="winner">87.75%</td>
-                <td class="winner">61.91%</td>
-                <td class="winner">75s</td>
-                <td><span class="badge open">Open</span></td>
-            </tr>
-            <tr>
-                <td>Phi-4-multimodal</td>
-                <td colspan="3" style="color: #ff6b6b;">Failed</td>
-                <td><span class="badge open">Open</span></td>
-            </tr>
-        </table>
-        <p style="margin-top: 20px; color: #00d4aa;">
-            ✓ Chose Llama-4: Only 0.37% accuracy loss vs GPT-4.1, but <strong>2.7x faster</strong> and <strong>open-source</strong>
-        </p>
-    </div>
-
-    <!-- Slide 7: RAG Optimization -->
-    <div class="slide" id="slide7">
-        <h2><span class="icon">🎯</span> RAG Optimization Results</h2>
-        <table class="comparison-table">
-            <tr>
-                <th>Configuration</th>
-                <th>Answer Quality</th>
-                <th>Citation Rate</th>
-                <th>Response Time</th>
-            </tr>
-            <tr>
-                <td class="winner">Citation-focused + Vanilla k3 ✓</td>
-                <td class="winner">55.67%</td>
-                <td class="winner">73.33%</td>
-                <td class="winner">3.61s</td>
-            </tr>
-            <tr>
-                <td>Few-shot + Vanilla k3</td>
-                <td>45.70%</td>
-                <td>40.00%</td>
-                <td>2.17s</td>
-            </tr>
-            <tr>
-                <td>Baseline + Vanilla k3</td>
-                <td>39.65%</td>
-                <td>20.00%</td>
-                <td>2.28s</td>
-            </tr>
-            <tr>
-                <td>MMR Retrieval</td>
-                <td>34.60%</td>
-                <td>6.67%</td>
-                <td>2.53s</td>
-            </tr>
-        </table>
-
-        <div class="decision-list" style="margin-top: 30px;">
-            <div class="decision-item">
-                <h4>Key Insight: Simple Beats Complex</h4>
-                <p>Vanilla retrieval outperforms MMR reranking by <span class="result">+21%</span>. Top-3 beats Top-5 by <span class="result">+20%</span></p>
-            </div>
-            <div class="decision-item">
-                <h4>Citation-Focused Prompting</h4>
-                <p>Custom Azerbaijani prompt improves quality by <span class="result">+16%</span> and citation rate by <span class="result">+53%</span></p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 8: Performance Metrics -->
-    <div class="slide" id="slide8">
-        <h2><span class="icon">🏆</span> Performance Metrics</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="number">87.75%</div>
-                <div class="label">OCR Accuracy</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">55.67%</div>
-                <div class="label">Answer Quality</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">73.33%</div>
-                <div class="label">Citation Rate</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3.6s</div>
-                <div class="label">Response Time</div>
-            </div>
-        </div>
-
-        <h3 style="margin-top: 50px;">Estimated Hackathon Score</h3>
-        <div class="score-breakdown">
-            <div class="score-item">
-                <span class="score-label">OCR Quality (50%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 87.75%;"></div>
-                </div>
-                <span class="score-value">43.9 / 50</span>
-            </div>
-            <div class="score-item">
-                <span class="score-label">LLM Quality (30%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 55.67%;"></div>
-                </div>
-                <span class="score-value">16.7 / 30</span>
-            </div>
-            <div class="score-item">
-                <span class="score-label">Architecture (20%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 100%;"></div>
-                </div>
-                <span class="score-value">20 / 20</span>
-            </div>
-            <div class="score-item" style="border-top: 2px solid #00d4aa; padding-top: 20px; margin-top: 10px;">
-                <span class="score-label" style="color: #00d4aa; font-weight: 700;">TOTAL SCORE</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 88.1%;"></div>
-                </div>
-                <span class="score-value" style="font-size: 1.6rem;">440.6 / 500</span>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 9: Key Technical Decisions -->
-    <div class="slide" id="slide9">
-        <h2><span class="icon">🔬</span> Key Technical Decisions</h2>
-        <div class="two-col">
-            <div class="col">
-                <h3 style="color: #00d4aa;">What We Did</h3>
-                <ul>
-                    <li><strong>Open-source Llama</strong> over proprietary GPT-4</li>
-                    <li><strong>Top-3 retrieval</strong> - more context confused the LLM</li>
-                    <li><strong>Vanilla retrieval</strong> - simple beats complex reranking</li>
-                    <li><strong>Citation-focused prompt</strong> in Azerbaijani</li>
-                    <li><strong>BAAI embeddings</strong> - 25% better than multilingual</li>
-                    <li><strong>600-char chunks</strong> with 100-char overlap</li>
-                </ul>
-            </div>
-            <div class="col">
-                <h3 style="color: #ff6b6b;">What We Avoided</h3>
-                <ul>
-                    <li><strong>MMR/Reranking</strong> - 21% worse performance</li>
-                    <li><strong>Top-5+ retrieval</strong> - information overload</li>
-                    <li><strong>Few-shot prompting</strong> - inconsistent results</li>
-                    <li><strong>Multilingual embeddings</strong> - underperformed</li>
-                    <li><strong>Complex architectures</strong> - kept it simple</li>
-                    <li><strong>Closed-source models</strong> - for transparency</li>
-                </ul>
-            </div>
-        </div>
-        <div style="margin-top: 40px; text-align: center; padding: 25px; background: rgba(0, 212, 170, 0.1); border-radius: 12px; border: 1px solid #00d4aa;">
-            <p style="font-size: 1.4rem; color: #00d4aa;">
-                "Every decision was validated through rigorous benchmarking across 3 Jupyter notebooks"
-            </p>
-        </div>
-    </div>
-
-    <!-- Slide 10: Demo Features -->
-    <div class="slide" id="slide10">
-        <h2><span class="icon">🎮</span> Live Demo Features</h2>
-        <div class="demo-features">
-            <div class="demo-feature">
-                <span class="icon">📤</span>
-                <div>
-                    <h4>PDF Upload & OCR</h4>
-                    <p>Drag & drop any PDF to extract text with image detection. Results in markdown format.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">💬</span>
-                <div>
-                    <h4>Interactive Q&A Chat</h4>
-                    <p>Ask questions in Azerbaijani, Russian, or English. Get answers with source citations.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">📚</span>
-                <div>
-                    <h4>Source Citations</h4>
-                    <p>Every answer includes document name, page number, and relevant excerpt for verification.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">📖</span>
-                <div>
-                    <h4>Swagger Documentation</h4>
-                    <p>Full API documentation at /docs with interactive testing capabilities.</p>
-                </div>
-            </div>
-        </div>
-        <div style="margin-top: 50px; text-align: center;">
-            <p style="font-size: 1.5rem; color: #58a6ff;">
-                🌐 <strong>localhost:8000</strong> | 📖 <strong>/docs</strong> for Swagger UI
-            </p>
-        </div>
-    </div>
-
-    <!-- Slide 11: What We Built -->
-    <div class="slide" id="slide11">
-        <h2><span class="icon">📦</span> Deliverables</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="number">28</div>
-                <div class="label">PDFs Processed</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">1,128</div>
-                <div class="label">Vector Chunks</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3</div>
-                <div class="label">Benchmark Notebooks</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">100%</div>
-                <div class="label">Open Source</div>
-            </div>
-        </div>
-        <div class="two-col" style="margin-top: 40px;">
-            <div class="col">
-                <h3>Code & Infrastructure</h3>
-                <ul>
-                    <li>FastAPI application (505 lines)</li>
-                    <li>Data ingestion pipeline</li>
-                    <li>Parallel processing (4x speedup)</li>
-                    <li>Docker + Docker Compose</li>
-                    <li>Health monitoring</li>
-                    <li>Interactive web UI</li>
-                </ul>
-            </div>
-            <div class="col">
-                <h3>Documentation & Analysis</h3>
-                <ul>
-                    <li>8 comprehensive markdown docs</li>
-                    <li>VLM OCR benchmark notebook</li>
-                    <li>RAG optimization notebook</li>
-                    <li>LLM comparison notebook</li>
-                    <li>Sample questions & answers</li>
-                    <li>Deployment guide</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <!-- Slide 12: Thank You -->
-    <div class="slide final-slide" id="slide12">
-        <h2><span class="icon">🙏</span> Thank You!</h2>
-        <p style="font-size: 1.8rem; color: #c9d1d9; margin-bottom: 10px;">
-            SOCAR Historical Documents AI System
-        </p>
-        <p style="font-size: 1.3rem; color: #8b949e; margin-bottom: 20px;">
-            Transforming archives into accessible, searchable knowledge
-        </p>
-        <div style="margin-bottom: 30px;">
-            <p style="font-size: 1.6rem; color: #00d4aa; font-weight: 700; margin-bottom: 10px;">Team BeatByte</p>
-            <p style="font-size: 1.2rem; color: #58a6ff;">Ulvi Bashirov &nbsp;•&nbsp; Samir Mehdiyev &nbsp;•&nbsp; Ismat Samadov</p>
-        </div>
-        <div class="stats-grid" style="max-width: 800px; margin: 0 auto;">
-            <div class="stat-card">
-                <div class="number">87.75%</div>
-                <div class="label">OCR Accuracy</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">440.6</div>
-                <div class="label">Est. Score / 500</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">100%</div>
-                <div class="label">Open Source</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3.6s</div>
-                <div class="label">Response Time</div>
-            </div>
-        </div>
-        <div style="margin-top: 40px;">
-            <p style="font-size: 2rem; color: #00d4aa; font-weight: 700;">
-                Questions? Let's Demo! 🚀
-            </p>
-        </div>
-    </div>
-
-    <!-- Navigation -->
-    <div class="nav">
-        <button onclick="prevSlide()">← Previous</button>
-        <button onclick="nextSlide()">Next →</button>
-    </div>
-    <div class="slide-counter">
-        <span id="currentSlide">1</span> / <span id="totalSlides">12</span>
-    </div>
-
-    <script>
-        let currentSlide = 1;
-        const totalSlides = 12;
-
-        document.getElementById('totalSlides').textContent = totalSlides;
-
-        function showSlide(n) {
-            const slides = document.querySelectorAll('.slide');
-
-            if (n > totalSlides) currentSlide = 1;
-            if (n < 1) currentSlide = totalSlides;
-
-            slides.forEach(slide => slide.classList.remove('active'));
-            document.getElementById('slide' + currentSlide).classList.add('active');
-            document.getElementById('currentSlide').textContent = currentSlide;
-        }
-
-        function nextSlide() {
-            currentSlide++;
-            showSlide(currentSlide);
-        }
-
-        function prevSlide() {
-            currentSlide--;
-            showSlide(currentSlide);
-        }
-
-        // Keyboard navigation
-        document.addEventListener('keydown', function(e) {
-            if (e.key === 'ArrowRight' || e.key === ' ') {
-                nextSlide();
-            } else if (e.key === 'ArrowLeft') {
-                prevSlide();
-            }
-        });
-
-        // Touch navigation for mobile
-        let touchStartX = 0;
-        let touchEndX = 0;
-
-        document.addEventListener('touchstart', e => {
-            touchStartX = e.changedTouches[0].screenX;
-        });
-
-        document.addEventListener('touchend', e => {
-            touchEndX = e.changedTouches[0].screenX;
-            if (touchStartX - touchEndX > 50) {
-                nextSlide();
-            } else if (touchEndX - touchStartX > 50) {
-                prevSlide();
-            }
-        });
-    </script>
-</body>
-</html>

presentation/pitch_deck_print.html

@@ -1,1084 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SOCAR Historical Documents AI - Hackathon Pitch</title>
-    <style>
-        @page {
-            size: A4 landscape;
-            margin: 0;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: #0d1117;
-            color: #ffffff;
-        }
-
-        .slide {
-            width: 297mm;
-            height: 210mm;
-            padding: 15mm 20mm;
-            background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
-            position: relative;
-            overflow: hidden;
-            page-break-after: always;
-            page-break-inside: avoid;
-        }
-
-        .slide:last-child {
-            page-break-after: auto;
-        }
-
-        .slide::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            height: 3px;
-            background: linear-gradient(90deg, #00d4aa, #0099ff, #00d4aa);
-        }
-
-        /* Title Slide */
-        .title-slide {
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .title-slide h1 {
-            font-size: 42pt;
-            font-weight: 700;
-            color: #00d4aa;
-            margin-bottom: 10px;
-        }
-
-        .title-slide .subtitle {
-            font-size: 18pt;
-            color: #8b949e;
-            margin-bottom: 20px;
-        }
-
-        .title-slide .tagline {
-            font-size: 14pt;
-            color: #58a6ff;
-            padding: 10px 20px;
-            border: 2px solid #30363d;
-            border-radius: 8px;
-            background: rgba(88, 166, 255, 0.1);
-        }
-
-        .title-slide .team-info {
-            margin-top: 30px;
-        }
-
-        .title-slide .team-name {
-            font-size: 16pt;
-            color: #00d4aa;
-            font-weight: 700;
-            margin-bottom: 8px;
-        }
-
-        .title-slide .team-members {
-            font-size: 12pt;
-            color: #8b949e;
-        }
-
-        /* Regular Slides */
-        h2 {
-            font-size: 28pt;
-            color: #00d4aa;
-            margin-bottom: 20px;
-        }
-
-        h2 .icon {
-            font-size: 24pt;
-            margin-right: 10px;
-        }
-
-        h3 {
-            font-size: 14pt;
-            color: #58a6ff;
-            margin: 15px 0 10px 0;
-        }
-
-        p {
-            font-size: 11pt;
-            line-height: 1.6;
-            color: #c9d1d9;
-        }
-
-        ul {
-            list-style: none;
-            padding-left: 0;
-        }
-
-        li {
-            font-size: 11pt;
-            line-height: 1.8;
-            color: #c9d1d9;
-            padding-left: 20px;
-            position: relative;
-        }
-
-        li::before {
-            content: '>';
-            position: absolute;
-            left: 0;
-            color: #00d4aa;
-            font-size: 10pt;
-        }
-
-        /* Stats Grid */
-        .stats-grid {
-            display: flex;
-            justify-content: space-around;
-            gap: 15px;
-            margin-top: 20px;
-        }
-
-        .stat-card {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 10px;
-            padding: 15px 25px;
-            text-align: center;
-            flex: 1;
-        }
-
-        .stat-card .number {
-            font-size: 24pt;
-            font-weight: 700;
-            color: #00d4aa;
-        }
-
-        .stat-card .label {
-            font-size: 9pt;
-            color: #8b949e;
-            margin-top: 5px;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        /* Architecture Diagram */
-        .architecture {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-top: 15px;
-            padding: 10px;
-        }
-
-        .arch-box {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 2px solid #30363d;
-            border-radius: 8px;
-            padding: 12px 18px;
-            text-align: center;
-            min-width: 90px;
-        }
-
-        .arch-box.highlight {
-            border-color: #00d4aa;
-        }
-
-        .arch-box .title {
-            font-size: 8pt;
-            color: #8b949e;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-            margin-bottom: 4px;
-        }
-
-        .arch-box .tech {
-            font-size: 10pt;
-            color: #58a6ff;
-            font-weight: 600;
-        }
-
-        .arrow {
-            font-size: 16pt;
-            color: #00d4aa;
-        }
-
-        /* Two Column Layout */
-        .two-col {
-            display: flex;
-            gap: 30px;
-            margin-top: 10px;
-        }
-
-        .col {
-            background: rgba(33, 38, 45, 0.5);
-            border-radius: 10px;
-            padding: 15px;
-            border: 1px solid #30363d;
-            flex: 1;
-        }
-
-        /* Tech Stack */
-        .tech-stack {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .tech-item {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 8px;
-            padding: 10px 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            width: calc(33% - 10px);
-        }
-
-        .tech-item .icon {
-            font-size: 16pt;
-        }
-
-        .tech-item .name {
-            font-size: 10pt;
-            color: #c9d1d9;
-        }
-
-        .tech-item .desc {
-            font-size: 8pt;
-            color: #8b949e;
-        }
-
-        /* Comparison Table */
-        .comparison-table {
-            width: 100%;
-            margin-top: 15px;
-            border-collapse: collapse;
-            font-size: 10pt;
-        }
-
-        .comparison-table th,
-        .comparison-table td {
-            padding: 10px 15px;
-            text-align: left;
-            border-bottom: 1px solid #30363d;
-        }
-
-        .comparison-table th {
-            background: #21262d;
-            color: #58a6ff;
-            font-size: 10pt;
-            font-weight: 600;
-        }
-
-        .comparison-table td {
-            color: #c9d1d9;
-        }
-
-        .comparison-table .winner {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-
-        .comparison-table .badge {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 10px;
-            font-size: 8pt;
-            font-weight: 600;
-        }
-
-        .badge.open {
-            background: rgba(0, 212, 170, 0.2);
-            color: #00d4aa;
-        }
-
-        .badge.closed {
-            background: rgba(255, 107, 107, 0.2);
-            color: #ff6b6b;
-        }
-
-        /* Flow Diagram */
-        .flow {
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-            margin-top: 10px;
-        }
-
-        .flow-row {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .flow-box {
-            background: #21262d;
-            border: 1px solid #30363d;
-            border-radius: 6px;
-            padding: 6px 12px;
-            font-size: 9pt;
-            color: #c9d1d9;
-        }
-
-        .flow-box.primary {
-            border-color: #00d4aa;
-            color: #00d4aa;
-        }
-
-        .flow-arrow {
-            color: #58a6ff;
-            font-size: 10pt;
-        }
-
-        /* Problem icons */
-        .problem-grid {
-            display: flex;
-            gap: 20px;
-            margin-top: 20px;
-        }
-
-        .problem-card {
-            background: linear-gradient(135deg, #21262d 0%, #161b22 100%);
-            border: 1px solid #30363d;
-            border-radius: 10px;
-            padding: 20px;
-            text-align: center;
-            flex: 1;
-        }
-
-        .problem-card .icon {
-            font-size: 24pt;
-            margin-bottom: 10px;
-        }
-
-        .problem-card h4 {
-            font-size: 12pt;
-            color: #ff6b6b;
-            margin-bottom: 8px;
-        }
-
-        .problem-card p {
-            font-size: 9pt;
-            color: #8b949e;
-        }
-
-        /* Solution cards */
-        .solution-grid {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-            margin-top: 15px;
-        }
-
-        .solution-card {
-            background: linear-gradient(135deg, rgba(0, 212, 170, 0.1) 0%, rgba(0, 153, 255, 0.1) 100%);
-            border: 1px solid #00d4aa;
-            border-radius: 10px;
-            padding: 15px;
-            width: calc(50% - 10px);
-        }
-
-        .solution-card h4 {
-            font-size: 12pt;
-            color: #00d4aa;
-            margin-bottom: 8px;
-        }
-
-        .solution-card p {
-            font-size: 9pt;
-            color: #c9d1d9;
-        }
-
-        /* Score breakdown */
-        .score-breakdown {
-            margin-top: 15px;
-        }
-
-        .score-item {
-            display: flex;
-            align-items: center;
-            margin-bottom: 12px;
-        }
-
-        .score-label {
-            width: 140px;
-            font-size: 10pt;
-            color: #c9d1d9;
-        }
-
-        .score-bar-container {
-            flex: 1;
-            height: 20px;
-            background: #21262d;
-            border-radius: 10px;
-            overflow: hidden;
-            margin: 0 15px;
-        }
-
-        .score-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #00d4aa, #0099ff);
-            border-radius: 10px;
-        }
-
-        .score-value {
-            width: 80px;
-            font-size: 11pt;
-            font-weight: 700;
-            color: #00d4aa;
-            text-align: right;
-        }
-
-        /* Final slide */
-        .final-slide {
-            text-align: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-        }
-
-        .final-slide h2 {
-            font-size: 32pt;
-            margin-bottom: 15px;
-        }
-
-        /* Highlight text */
-        .highlight-text {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-
-        /* Demo section */
-        .demo-features {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 15px;
-            margin-top: 15px;
-        }
-
-        .demo-feature {
-            background: #21262d;
-            border: 1px solid #30363d;
-            border-radius: 10px;
-            padding: 15px;
-            display: flex;
-            gap: 12px;
-            align-items: flex-start;
-            width: calc(50% - 10px);
-        }
-
-        .demo-feature .icon {
-            font-size: 20pt;
-            color: #00d4aa;
-        }
-
-        .demo-feature h4 {
-            font-size: 11pt;
-            color: #c9d1d9;
-            margin-bottom: 5px;
-        }
-
-        .demo-feature p {
-            font-size: 9pt;
-            color: #8b949e;
-        }
-
-        /* API endpoints */
-        .endpoint {
-            background: #161b22;
-            border: 1px solid #30363d;
-            border-radius: 6px;
-            padding: 10px 15px;
-            margin: 8px 0;
-            font-family: 'Courier New', monospace;
-        }
-
-        .endpoint .method {
-            display: inline-block;
-            padding: 2px 8px;
-            border-radius: 4px;
-            font-size: 8pt;
-            font-weight: 700;
-            margin-right: 10px;
-        }
-
-        .endpoint .method.post {
-            background: rgba(0, 212, 170, 0.2);
-            color: #00d4aa;
-        }
-
-        .endpoint .method.get {
-            background: rgba(88, 166, 255, 0.2);
-            color: #58a6ff;
-        }
-
-        .endpoint .path {
-            color: #c9d1d9;
-            font-size: 10pt;
-        }
-
-        .endpoint .desc {
-            color: #8b949e;
-            font-size: 8pt;
-            margin-left: 50px;
-            margin-top: 3px;
-        }
-
-        /* Key decisions */
-        .decision-list {
-            margin-top: 12px;
-        }
-
-        .decision-item {
-            background: #21262d;
-            border-left: 3px solid #00d4aa;
-            padding: 12px 15px;
-            margin: 10px 0;
-            border-radius: 0 6px 6px 0;
-        }
-
-        .decision-item h4 {
-            color: #58a6ff;
-            font-size: 11pt;
-            margin-bottom: 5px;
-        }
-
-        .decision-item p {
-            font-size: 9pt;
-            color: #8b949e;
-        }
-
-        .decision-item .result {
-            color: #00d4aa;
-            font-weight: 600;
-        }
-
-        .slide-number {
-            position: absolute;
-            bottom: 10mm;
-            right: 15mm;
-            font-size: 10pt;
-            color: #8b949e;
-        }
-    </style>
-</head>
-<body>
-    <!-- Slide 1: Title -->
-    <div class="slide title-slide">
-        <h1>SOCAR Historical Documents AI</h1>
-        <p class="subtitle">Intelligent OCR & RAG System for Oil & Gas Archives</p>
-        <p class="tagline">Transforming 28 Historical Documents into Searchable Knowledge</p>
-        <div class="team-info">
-            <p class="team-name">Team BeatByte</p>
-            <p class="team-members">Ulvi Bashirov  |  Samir Mehdiyev  |  Ismat Samadov</p>
-        </div>
-        <div class="slide-number">1 / 12</div>
-    </div>
-
-    <!-- Slide 2: Problem Statement -->
-    <div class="slide">
-        <h2><span class="icon">!</span> The Problem</h2>
-        <div class="problem-grid">
-            <div class="problem-card">
-                <div class="icon">PDF</div>
-                <h4>Inaccessible Archives</h4>
-                <p>Decades of valuable historical documents locked in PDF format, impossible to search</p>
-            </div>
-            <div class="problem-card">
-                <div class="icon">ABC</div>
-                <h4>Multi-Language Barrier</h4>
-                <p>Documents in Azerbaijani, Russian, and English with complex Cyrillic text</p>
-            </div>
-            <div class="problem-card">
-                <div class="icon">TIME</div>
-                <h4>Time-Consuming Research</h4>
-                <p>Manual document review takes hours to find specific information</p>
-            </div>
-        </div>
-        <p style="margin-top: 25px; text-align: center; font-size: 14pt; color: #ff6b6b;">
-            How can we unlock institutional knowledge trapped in historical documents?
-        </p>
-        <div class="slide-number">2 / 12</div>
-    </div>
-
-    <!-- Slide 3: Our Solution -->
-    <div class="slide">
-        <h2><span class="icon">*</span> Our Solution</h2>
-        <div class="solution-grid">
-            <div class="solution-card">
-                <h4>Vision-Language OCR</h4>
-                <p>State-of-the-art Llama-4-Maverick model extracts text from scanned documents with <span class="highlight-text">87.75% accuracy</span>, preserving Cyrillic characters perfectly</p>
-            </div>
-            <div class="solution-card">
-                <h4>Semantic Search</h4>
-                <p>BAAI/bge-large embeddings + Pinecone vector database enable instant retrieval across <span class="highlight-text">1,128 document chunks</span></p>
-            </div>
-            <div class="solution-card">
-                <h4>RAG-Powered Q&A</h4>
-                <p>Natural language questions answered with relevant context and <span class="highlight-text">source citations</span> for verification</p>
-            </div>
-            <div class="solution-card">
-                <h4>Production-Ready API</h4>
-                <p>FastAPI backend with Docker deployment, health monitoring, and interactive web interface</p>
-            </div>
-        </div>
-        <div class="slide-number">3 / 12</div>
-    </div>
-
-    <!-- Slide 4: Architecture -->
-    <div class="slide">
-        <h2><span class="icon">#</span> System Architecture</h2>
-        <div class="architecture">
-            <div class="arch-box">
-                <div class="title">Input</div>
-                <div class="tech">PDF Documents</div>
-            </div>
-            <span class="arrow">-></span>
-            <div class="arch-box highlight">
-                <div class="title">OCR Engine</div>
-                <div class="tech">Llama-4 Vision</div>
-            </div>
-            <span class="arrow">-></span>
-            <div class="arch-box">
-                <div class="title">Embeddings</div>
-                <div class="tech">BAAI/bge-large</div>
-            </div>
-            <span class="arrow">-></span>
-            <div class="arch-box highlight">
-                <div class="title">Vector DB</div>
-                <div class="tech">Pinecone Cloud</div>
-            </div>
-            <span class="arrow">-></span>
-            <div class="arch-box">
-                <div class="title">LLM</div>
-                <div class="tech">Llama-4 17B</div>
-            </div>
-        </div>
-        <div class="two-col" style="margin-top: 20px;">
-            <div class="col">
-                <h3>OCR Pipeline</h3>
-                <div class="flow">
-                    <div class="flow-row">
-                        <div class="flow-box">PDF Upload</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box">PyMuPDF (100 DPI)</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box primary">Vision LLM</div>
-                    </div>
-                    <div class="flow-row">
-                        <div class="flow-box">Image Detection</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box">Markdown Output</div>
-                    </div>
-                </div>
-            </div>
-            <div class="col">
-                <h3>RAG Pipeline</h3>
-                <div class="flow">
-                    <div class="flow-row">
-                        <div class="flow-box">User Question</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box">Embed Query</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box primary">Top-3 Retrieval</div>
-                    </div>
-                    <div class="flow-row">
-                        <div class="flow-box">Context Building</div>
-                        <span class="flow-arrow">-></span>
-                        <div class="flow-box">LLM + Citations</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="slide-number">4 / 12</div>
-    </div>
-
-    <!-- Slide 5: Technology Stack -->
-    <div class="slide">
-        <h2><span class="icon">+</span> Technology Stack</h2>
-        <div class="tech-stack">
-            <div class="tech-item">
-                <span class="icon">L</span>
-                <div>
-                    <div class="name">Llama-4-Maverick 17B</div>
-                    <div class="desc">Vision & Language Model</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">B</span>
-                <div>
-                    <div class="name">BAAI/bge-large-en</div>
-                    <div class="desc">1024-dim Embeddings</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">P</span>
-                <div>
-                    <div class="name">Pinecone Cloud</div>
-                    <div class="desc">Vector Database</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">F</span>
-                <div>
-                    <div class="name">FastAPI</div>
-                    <div class="desc">Async REST API</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">M</span>
-                <div>
-                    <div class="name">PyMuPDF</div>
-                    <div class="desc">PDF Processing</div>
-                </div>
-            </div>
-            <div class="tech-item">
-                <span class="icon">D</span>
-                <div>
-                    <div class="name">Docker</div>
-                    <div class="desc">Containerization</div>
-                </div>
-            </div>
-        </div>
-        <div style="margin-top: 25px;">
-            <h3>API Endpoints</h3>
-            <div class="endpoint">
-                <span class="method post">POST</span>
-                <span class="path">/ocr</span>
-                <div class="desc">Extract text from uploaded PDF with image detection</div>
-            </div>
-            <div class="endpoint">
-                <span class="method post">POST</span>
-                <span class="path">/llm</span>
-                <div class="desc">RAG-based Q&A with source citations</div>
-            </div>
-            <div class="endpoint">
-                <span class="method get">GET</span>
-                <span class="path">/health</span>
-                <div class="desc">Service health check and vector count</div>
-            </div>
-        </div>
-        <div class="slide-number">5 / 12</div>
-    </div>
-
-    <!-- Slide 6: Benchmark Results -->
-    <div class="slide">
-        <h2><span class="icon">%</span> Benchmark Results</h2>
-        <p style="margin-bottom: 15px;">We rigorously tested <span class="highlight-text">3 OCR models</span>, <span class="highlight-text">7 RAG configurations</span>, and <span class="highlight-text">3 LLMs</span> to optimize performance</p>
-
-        <h3>OCR Model Comparison</h3>
-        <table class="comparison-table">
-            <tr>
-                <th>Model</th>
-                <th>Character Success Rate</th>
-                <th>Word Success Rate</th>
-                <th>Speed (12 pages)</th>
-                <th>Type</th>
-            </tr>
-            <tr>
-                <td>GPT-4.1</td>
-                <td>88.12%</td>
-                <td>67.44%</td>
-                <td>199s</td>
-                <td><span class="badge closed">Closed</span></td>
-            </tr>
-            <tr>
-                <td class="winner">Llama-4-Maverick 17B [Selected]</td>
-                <td class="winner">87.75%</td>
-                <td class="winner">61.91%</td>
-                <td class="winner">75s</td>
-                <td><span class="badge open">Open</span></td>
-            </tr>
-            <tr>
-                <td>Phi-4-multimodal</td>
-                <td colspan="3" style="color: #ff6b6b;">Failed</td>
-                <td><span class="badge open">Open</span></td>
-            </tr>
-        </table>
-        <p style="margin-top: 15px; color: #00d4aa;">
-            Selected Llama-4: Only 0.37% accuracy loss vs GPT-4.1, but <strong>2.7x faster</strong> and <strong>open-source</strong>
-        </p>
-        <div class="slide-number">6 / 12</div>
-    </div>
-
-    <!-- Slide 7: RAG Optimization -->
-    <div class="slide">
-        <h2><span class="icon">@</span> RAG Optimization Results</h2>
-        <table class="comparison-table">
-            <tr>
-                <th>Configuration</th>
-                <th>Answer Quality</th>
-                <th>Citation Rate</th>
-                <th>Response Time</th>
-            </tr>
-            <tr>
-                <td class="winner">Citation-focused + Vanilla k3 [Selected]</td>
-                <td class="winner">55.67%</td>
-                <td class="winner">73.33%</td>
-                <td class="winner">3.61s</td>
-            </tr>
-            <tr>
-                <td>Few-shot + Vanilla k3</td>
-                <td>45.70%</td>
-                <td>40.00%</td>
-                <td>2.17s</td>
-            </tr>
-            <tr>
-                <td>Baseline + Vanilla k3</td>
-                <td>39.65%</td>
-                <td>20.00%</td>
-                <td>2.28s</td>
-            </tr>
-            <tr>
-                <td>MMR Retrieval</td>
-                <td>34.60%</td>
-                <td>6.67%</td>
-                <td>2.53s</td>
-            </tr>
-        </table>
-
-        <div class="decision-list">
-            <div class="decision-item">
-                <h4>Key Insight: Simple Beats Complex</h4>
-                <p>Vanilla retrieval outperforms MMR reranking by <span class="result">+21%</span>. Top-3 beats Top-5 by <span class="result">+20%</span></p>
-            </div>
-            <div class="decision-item">
-                <h4>Citation-Focused Prompting</h4>
-                <p>Custom Azerbaijani prompt improves quality by <span class="result">+16%</span> and citation rate by <span class="result">+53%</span></p>
-            </div>
-        </div>
-        <div class="slide-number">7 / 12</div>
-    </div>
-
-    <!-- Slide 8: Performance Metrics -->
-    <div class="slide">
-        <h2><span class="icon">^</span> Performance Metrics</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="number">87.75%</div>
-                <div class="label">OCR Accuracy</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">55.67%</div>
-                <div class="label">Answer Quality</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">73.33%</div>
-                <div class="label">Citation Rate</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3.6s</div>
-                <div class="label">Response Time</div>
-            </div>
-        </div>
-
-        <h3 style="margin-top: 25px;">Estimated Hackathon Score</h3>
-        <div class="score-breakdown">
-            <div class="score-item">
-                <span class="score-label">OCR Quality (50%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 87.75%;"></div>
-                </div>
-                <span class="score-value">43.9 / 50</span>
-            </div>
-            <div class="score-item">
-                <span class="score-label">LLM Quality (30%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 55.67%;"></div>
-                </div>
-                <span class="score-value">16.7 / 30</span>
-            </div>
-            <div class="score-item">
-                <span class="score-label">Architecture (20%)</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 100%;"></div>
-                </div>
-                <span class="score-value">20 / 20</span>
-            </div>
-            <div class="score-item" style="border-top: 2px solid #00d4aa; padding-top: 12px; margin-top: 8px;">
-                <span class="score-label" style="color: #00d4aa; font-weight: 700;">TOTAL SCORE</span>
-                <div class="score-bar-container">
-                    <div class="score-bar" style="width: 88.1%;"></div>
-                </div>
-                <span class="score-value" style="font-size: 14pt;">440.6 / 500</span>
-            </div>
-        </div>
-        <div class="slide-number">8 / 12</div>
-    </div>
-
-    <!-- Slide 9: Key Technical Decisions -->
-    <div class="slide">
-        <h2><span class="icon">&</span> Key Technical Decisions</h2>
-        <div class="two-col">
-            <div class="col">
-                <h3 style="color: #00d4aa;">What We Did</h3>
-                <ul>
-                    <li><strong>Open-source Llama</strong> over proprietary GPT-4</li>
-                    <li><strong>Top-3 retrieval</strong> - more context confused the LLM</li>
-                    <li><strong>Vanilla retrieval</strong> - simple beats complex reranking</li>
-                    <li><strong>Citation-focused prompt</strong> in Azerbaijani</li>
-                    <li><strong>BAAI embeddings</strong> - 25% better than multilingual</li>
-                    <li><strong>600-char chunks</strong> with 100-char overlap</li>
-                </ul>
-            </div>
-            <div class="col">
-                <h3 style="color: #ff6b6b;">What We Avoided</h3>
-                <ul>
-                    <li><strong>MMR/Reranking</strong> - 21% worse performance</li>
-                    <li><strong>Top-5+ retrieval</strong> - information overload</li>
-                    <li><strong>Few-shot prompting</strong> - inconsistent results</li>
-                    <li><strong>Multilingual embeddings</strong> - underperformed</li>
-                    <li><strong>Complex architectures</strong> - kept it simple</li>
-                    <li><strong>Closed-source models</strong> - for transparency</li>
-                </ul>
-            </div>
-        </div>
-        <div style="margin-top: 20px; text-align: center; padding: 15px; background: rgba(0, 212, 170, 0.1); border-radius: 8px; border: 1px solid #00d4aa;">
-            <p style="font-size: 12pt; color: #00d4aa;">
-                "Every decision was validated through rigorous benchmarking across 3 Jupyter notebooks"
-            </p>
-        </div>
-        <div class="slide-number">9 / 12</div>
-    </div>
-
-    <!-- Slide 10: Demo Features -->
-    <div class="slide">
-        <h2><span class="icon">></span> Live Demo Features</h2>
-        <div class="demo-features">
-            <div class="demo-feature">
-                <span class="icon">[^]</span>
-                <div>
-                    <h4>PDF Upload & OCR</h4>
-                    <p>Drag & drop any PDF to extract text with image detection. Results in markdown format.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">[?]</span>
-                <div>
-                    <h4>Interactive Q&A Chat</h4>
-                    <p>Ask questions in Azerbaijani, Russian, or English. Get answers with source citations.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">[i]</span>
-                <div>
-                    <h4>Source Citations</h4>
-                    <p>Every answer includes document name, page number, and relevant excerpt for verification.</p>
-                </div>
-            </div>
-            <div class="demo-feature">
-                <span class="icon">[=]</span>
-                <div>
-                    <h4>Swagger Documentation</h4>
-                    <p>Full API documentation at /docs with interactive testing capabilities.</p>
-                </div>
-            </div>
-        </div>
-        <div style="margin-top: 30px; text-align: center;">
-            <p style="font-size: 14pt; color: #58a6ff;">
-                Web UI: <strong>localhost:8000</strong>  |  API Docs: <strong>/docs</strong>
-            </p>
-        </div>
-        <div class="slide-number">10 / 12</div>
-    </div>
-
-    <!-- Slide 11: What We Built -->
-    <div class="slide">
-        <h2><span class="icon">=</span> Deliverables</h2>
-        <div class="stats-grid">
-            <div class="stat-card">
-                <div class="number">28</div>
-                <div class="label">PDFs Processed</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">1,128</div>
-                <div class="label">Vector Chunks</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3</div>
-                <div class="label">Benchmark Notebooks</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">100%</div>
-                <div class="label">Open Source</div>
-            </div>
-        </div>
-        <div class="two-col" style="margin-top: 20px;">
-            <div class="col">
-                <h3>Code & Infrastructure</h3>
-                <ul>
-                    <li>FastAPI application (505 lines)</li>
-                    <li>Data ingestion pipeline</li>
-                    <li>Parallel processing (4x speedup)</li>
-                    <li>Docker + Docker Compose</li>
-                    <li>Health monitoring</li>
-                    <li>Interactive web UI</li>
-                </ul>
-            </div>
-            <div class="col">
-                <h3>Documentation & Analysis</h3>
-                <ul>
-                    <li>8 comprehensive markdown docs</li>
-                    <li>VLM OCR benchmark notebook</li>
-                    <li>RAG optimization notebook</li>
-                    <li>LLM comparison notebook</li>
-                    <li>Sample questions & answers</li>
-                    <li>Deployment guide</li>
-                </ul>
-            </div>
-        </div>
-        <div class="slide-number">11 / 12</div>
-    </div>
-
-    <!-- Slide 12: Thank You -->
-    <div class="slide final-slide">
-        <h2>Thank You!</h2>
-        <p style="font-size: 16pt; color: #c9d1d9; margin-bottom: 8px;">
-            SOCAR Historical Documents AI System
-        </p>
-        <p style="font-size: 11pt; color: #8b949e; margin-bottom: 15px;">
-            Transforming archives into accessible, searchable knowledge
-        </p>
-        <div style="margin-bottom: 20px;">
-            <p style="font-size: 14pt; color: #00d4aa; font-weight: 700; margin-bottom: 8px;">Team BeatByte</p>
-            <p style="font-size: 11pt; color: #58a6ff;">Ulvi Bashirov  |  Samir Mehdiyev  |  Ismat Samadov</p>
-        </div>
-        <div class="stats-grid" style="max-width: 600px;">
-            <div class="stat-card">
-                <div class="number">87.75%</div>
-                <div class="label">OCR Accuracy</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">440.6</div>
-                <div class="label">Est. Score / 500</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">100%</div>
-                <div class="label">Open Source</div>
-            </div>
-            <div class="stat-card">
-                <div class="number">3.6s</div>
-                <div class="label">Response Time</div>
-            </div>
-        </div>
-        <div style="margin-top: 25px;">
-            <p style="font-size: 18pt; color: #00d4aa; font-weight: 700;">
-                Questions? Let's Demo!
-            </p>
-        </div>
-        <div class="slide-number">12 / 12</div>
-    </div>
-</body>
-</html>