Merge pull request #1 from Ismat-Samadov/claude/analyze-code-ApUhl

presentation/PITCH_DECK.md

@@ -0,0 +1,317 @@
+# 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

@@ -0,0 +1,1177 @@
+<!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>
+
+    <!-- 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: 20px;">
+            SOCAR Historical Documents AI System
+        </p>
+        <p style="font-size: 1.3rem; color: #8b949e; margin-bottom: 40px;">
+            Transforming archives into accessible, searchable knowledge
+        </p>
+        <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: 60px;">
+            <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>