Add files using upload-large-folder tool

.gitignore

@@ -0,0 +1,27 @@
+# Dependencies
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Production builds
+build/
+dist/
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# IDE
+.vscode/
+.idea/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Logs
+*.log

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "html.autoClosingTags": false
+}

README.md

@@ -0,0 +1,175 @@
+---
+title: Luna OCR
+emoji: 🌙
+colorFrom: blue
+colorTo: purple
+sdk: static
+pinned: false
+license: mit
+---
+
+# 🌙 Luna OCR - AI-Powered Text Extraction
+
+**The most accurate OCR solution for daily use** - Transform images and PDFs into perfectly formatted text with AI intelligence.
+
+## ✨ What Makes Luna OCR Special
+
+Luna OCR isn't just another text extraction tool. It's an **AI-enhanced OCR system** that understands context, preserves formatting, and delivers **insanely accurate results** for your daily workflow.
+
+### 🎯 Key Features
+
+- 🤖 **AI-Powered Processing**: Google Gemini 2.5 Flash & Pro integration
+- 📊 **Smart Formatting**: Automatic tables, bold text, and structure detection
+- 🎨 **Multiple Output Formats**: JSON, HTML, Markdown, and plain text
+- � **Data Visgualization**: Interactive tables with sorting and categorization
+- 🖼️ **Universal Support**: Images (JPEG, PNG, WebP) and multi-page PDFs
+- ⚡ **Lightning Fast**: Real-time processing with live progress tracking
+- 🎭 **Beautiful UI**: Modern glassmorphism design with smooth animations
+
+## 🚀 Live Demo
+
+Visit: **https://huggingface.co/veela4/luna_ocr**
+
+## 🛠️ Technology Stack
+
+- **Frontend**: React 19, Three.js, Framer Motion, Radix UI
+- **Backend**: Node.js, Express, Sharp, Tesseract OCR
+- **AI Engine**: Google Gemini 2.5 Flash & Pro
+- **Design**: Glassmorphism UI with advanced animations
+
+## 📦 Quick Start
+
+1. **Clone the repository**
+   ```bash
+   git clone https://huggingface.co/veela4/luna_ocr
+   cd luna_ocr
+   ```
+
+2. **Install dependencies**
+   ```bash
+   npm install
+   cd server && npm install && cd ..
+   ```
+
+3. **Set up environment variables**
+   ```bash
+   # Create .env file in root directory
+   echo "GEMINI_API_KEY=your_google_gemini_api_key_here" > .env
+   ```
+   Get your API key from: https://makersuite.google.com/app/apikey
+
+4. **Start the application**
+   ```bash
+   npm start
+   ```
+
+Access the app at `http://localhost:3000`
+
+## 🎯 Use Cases & Examples
+
+### 📋 Document Processing
+- **Receipts & Invoices**: Extract structured data with automatic categorization
+- **Business Cards**: Convert to organized contact information
+- **Forms & Applications**: Preserve table structures and formatting
+
+### 📚 Academic & Research
+- **Research Papers**: Maintain citations, footnotes, and formatting
+- **Handwritten Notes**: Convert to searchable, editable text
+- **Textbooks**: Extract with proper headings and structure
+
+### 💼 Professional Workflows
+- **Meeting Notes**: Convert whiteboards to formatted documents
+- **Legal Documents**: Preserve critical formatting and structure
+- **Technical Manuals**: Maintain code blocks and technical formatting
+
+## 🔧 Output Formats
+
+### 📄 Plain Text
+Clean, readable text extraction
+
+### 📊 JSON Structure
+```json
+{
+  "title": "Document Title",
+  "sections": [
+    {
+      "heading": "Section 1",
+      "content": "Formatted content...",
+      "tables": [...],
+      "metadata": {...}
+    }
+  ]
+}
+```
+
+### 🌐 HTML Format
+Fully formatted HTML with proper tags, tables, and styling
+
+### 📝 Markdown
+GitHub-flavored markdown with tables, headers, and formatting
+
+## 🎨 Advanced Features
+
+### 🧠 AI Intelligence
+- **Context Understanding**: Recognizes document types and adjusts processing
+- **Smart Formatting**: Preserves original layout and styling
+- **Error Correction**: Fixes common OCR mistakes using AI
+
+### 📊 Data Processing
+- **Table Recognition**: Converts complex tables to structured data
+- **Sorting & Filtering**: Interactive data manipulation
+- **Export Options**: Multiple format support for different use cases
+
+### 🎭 User Experience
+- **Real-time Preview**: See results as they're processed
+- **Progress Tracking**: Visual feedback for long operations
+- **Responsive Design**: Works perfectly on all devices
+
+## 📡 API Reference
+
+### Process Document
+```bash
+POST /api/ocr
+Content-Type: multipart/form-data
+
+# Response includes structured data in requested format
+```
+
+### Health Check
+```bash
+GET /api/health
+# Returns system status and capabilities
+```
+
+### Processing Status
+```bash
+GET /api/progress/:sessionId
+# Real-time processing updates
+```
+
+## 🎯 Why Choose Luna OCR?
+
+- ✅ **Accuracy**: AI-enhanced recognition beats traditional OCR
+- ✅ **Speed**: Optimized for daily use with fast processing
+- ✅ **Flexibility**: Multiple output formats for any workflow
+- ✅ **Intelligence**: Context-aware processing and formatting
+- ✅ **Modern**: Beautiful, intuitive interface
+- ✅ **Open Source**: MIT license, customize as needed
+
+## 🤝 Contributing
+
+We welcome contributions! Feel free to:
+- Report bugs and suggest features
+- Submit pull requests
+- Improve documentation
+- Share your use cases
+
+## 📝 License
+
+MIT License - Use freely in personal and commercial projects
+
+---
+
+**Built with ❤️ for developers who demand accuracy**
+
+*Transform your document workflow today with Luna OCR*

app.txt

@@ -0,0 +1,757 @@
+"""
+🌙💛 Luna's OCR Studio - Clean & Professional
+Modern OCR with perfect readability and clean design
+"""
+
+import gradio as gr
+import os
+from google import genai
+import re
+from PIL import Image, ImageEnhance, ImageFilter
+from pdf2image import convert_from_path
+import tempfile
+import json
+from datetime import datetime
+import time
+import markdown
+import base64
+from io import BytesIO
+import zipfile
+import shutil
+
+# === CORE FUNCTIONS ===
+
+def enhance_image_quality(image):
+    """Real OCR-optimized image enhancement"""
+    try:
+        import numpy as np
+        from PIL import ImageOps, ImageStat
+        
+        if image.mode != 'RGB':
+            image = image.convert('RGB')
+        
+        # Calculate adaptive enhancement
+        stat = ImageStat.Stat(image)
+        mean_brightness = sum(stat.mean) / len(stat.mean)
+        
+        if mean_brightness < 100:  # Dark image
+            contrast_factor = 1.5
+            brightness_factor = 1.2
+        elif mean_brightness > 180:  # Bright image  
+            contrast_factor = 1.3
+            brightness_factor = 0.9
+        else:  # Normal image
+            contrast_factor = 1.2
+            brightness_factor = 1.0
+        
+        # Apply enhancements
+        if brightness_factor != 1.0:
+            enhancer = ImageEnhance.Brightness(image)
+            image = enhancer.enhance(brightness_factor)
+        
+        enhancer = ImageEnhance.Contrast(image)
+        image = enhancer.enhance(contrast_factor)
+        
+        enhancer = ImageEnhance.Sharpness(image)
+        image = enhancer.enhance(1.3)
+        
+        return image
+        
+    except:
+        # Fallback enhancement
+        try:
+            enhancer = ImageEnhance.Contrast(image)
+            image = enhancer.enhance(1.2)
+            enhancer = ImageEnhance.Sharpness(image)
+            image = enhancer.enhance(1.1)
+            return image
+        except:
+            return image
+
+def process_with_gemini(image, api_key, use_structured=False, enhance_quality=True):
+    """Process image with Gemini AI"""
+    if not api_key:
+        return "❌ Please enter your Google API Key"
+    
+    try:
+        client = genai.Client(api_key=api_key)
+        
+        # Enhance image if requested
+        if enhance_quality:
+            image = enhance_image_quality(image)
+        
+        # Choose prompt and model
+        if use_structured:
+            prompt = """วิเคราะห์และแยกข้อความในรูปภาพนี้อย่างละเอียดและจัดรูปแบบเป็น Markdown:
+
+🎯 **วิธีการประมวลผล:**
+1. อ่านข้อความทั้งหมดตามลำดับที่ปรากฏ
+2. แยกประเภทข้อมูล: หัวข้อ, รายละเอียด, ตัวเลข, วันที่, ชื่อ, ที่อยู่
+3. แก้ไขข้อผิดพลาด OCR และปรับปรุงการเว้นวรรคภาษาไทย
+4. จัดรูปแบบด้วย Markdown ที่สวยงาม
+
+📋 **รูปแบบที่ต้องการ:**
+- ใช้ ## สำหรับหัวข้อหลัก
+- ใช้ ### สำหรับหัวข้อย่อย  
+- ใช้ **text** สำหรับข้อความสำคัญ
+- ใช้ - สำหรับรายการ
+- ใช้ตารางสำหรับข้อมูลที่เป็นระบบ
+
+⚡ **ให้เฉพาะเนื้อหาที่อ่านได้ ไม่ต้องอธิบายกระบวนการ**"""
+            model = "gemini-2.5-pro"
+        else:
+            prompt = """อ่านและแยกข้อความจากรูปภาพนี้อย่างละเอียดและแม่นยำ:
+
+🎯 **คำสั่งการประมวลผล:**
+1. อ่านข้อความทั้งหมดตามลำดับที่ปรากฏในรูป
+2. แก้ไขข้อผิดพลาดที่เกิดจาก OCR (ตัวอักษรผิด, การเว้นวรรค)
+3. จัดรูปแบบให้อ่านง่าย โดยใช้การขึ้นบรรทัดใหม่ที่เหมาะสม
+4. สำหรับภาษาไทย: ใส่ช่องว่างระหว่างคำให้ถูกต้อง
+5. สำหรับตัวเลข วันที่ และข้อมูลสำคัญ: แยกบรรทัดให้ชัดเจน
+6. รักษาโครงสร้างและลำดับเดิมของเอกสาร
+7. ถ้ามีตาราง: จัดเรียงข้อมูลให้เป็นระเบียบ
+
+⚡ **ให้ผลลัพธ์เป็นข้อความธรรมดาที่สะอาด ไม่ใช้ markdown formatting**"""
+            model = "gemini-2.5-flash"
+        
+        # Process with Gemini
+        response = client.models.generate_content(
+            model=model,
+            contents=[prompt, image]
+        )
+        
+        result_text = response.text
+        
+        # Clean up result if needed
+        if not use_structured:
+            result_text = re.sub(r'\*\*(.*?)\*\*', r'\1', result_text)
+            result_text = re.sub(r'\*(.*?)\*', r'\1', result_text)
+            result_text = re.sub(r'^#+\s*', '', result_text, flags=re.MULTILINE)
+        
+        return result_text
+        
+    except Exception as e:
+        return f"❌ Error: {str(e)}"
+
+def create_beautiful_html(content, filename, is_structured=False, processing_info=None, image=None):
+    """Create beautiful HTML file"""
+    
+    # Convert image to base64 if provided
+    image_html = ""
+    if image:
+        try:
+            buffer = BytesIO()
+            image.save(buffer, format='PNG')
+            img_str = base64.b64encode(buffer.getvalue()).decode()
+            image_html = f"""
+            <div class="image-container">
+                <h3>📷 Processed Image</h3>
+                <img src="data:image/png;base64,{img_str}" alt="Processed Image" style="max-width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
+            </div>
+            """
+        except:
+            pass
+    
+    # Convert markdown to HTML if structured
+    if is_structured:
+        try:
+            html_content = markdown.markdown(content, extensions=['tables', 'fenced_code'])
+        except:
+            html_content = content.replace('\n', '<br>')
+    else:
+        html_content = content.replace('\n', '<br>')
+    
+    # Processing info section
+    info_html = ""
+    if processing_info:
+        info_html = f"""
+        <div class="processing-info">
+            <h3>📊 Processing Information</h3>
+            <div class="info-grid">
+                <div class="info-item"><strong>📁 File:</strong> {processing_info.get('filename', 'Unknown')}</div>
+                <div class="info-item"><strong>🤖 Model:</strong> {processing_info.get('model', 'Unknown')}</div>
+                <div class="info-item"><strong>⏱️ Time:</strong> {processing_info.get('processing_time', 0):.2f}s</div>
+                <div class="info-item"><strong>📝 Characters:</strong> {processing_info.get('characters', 0):,}</div>
+                <div class="info-item"><strong>✨ Enhanced:</strong> {'Yes' if processing_info.get('enhanced') else 'No'}</div>
+                <div class="info-item"><strong>📅 Processed:</strong> {processing_info.get('timestamp', '')[:19]}</div>
+            </div>
+        </div>
+        """
+    
+    html_template = f"""
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>OCR Results - {filename}</title>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * {{ margin: 0; padding: 0; box-sizing: border-box; }}
+        body {{ 
+            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+            background: #1a1a1a; color: #e0e0e0; line-height: 1.6; min-height: 100vh;
+        }}
+        .container {{ max-width: 1000px; margin: 0 auto; padding: 32px 20px; }}
+        .header {{ 
+            background: #2a2a2a; border: 1px solid #404040; padding: 48px 32px; 
+            border-radius: 16px; text-align: center; margin-bottom: 32px;
+        }}
+        .header h1 {{ color: #ffffff; font-size: 2.5em; font-weight: 700; margin-bottom: 16px; }}
+        .header p {{ color: #b0b0b0; font-size: 1.2em; font-weight: 500; }}
+        .content-section {{ 
+            background: #2a2a2a; border: 1px solid #404040; padding: 32px; 
+            border-radius: 16px; margin-bottom: 24px;
+        }}
+        .content-section h2 {{ color: #ffffff; font-weight: 600; margin-bottom: 24px; 
+            padding-bottom: 12px; border-bottom: 1px solid #404040; }}
+        .processing-info {{ background: #333333; border: 1px solid #404040; padding: 24px; 
+            border-radius: 12px; margin-bottom: 24px; }}
+        .info-grid {{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
+            gap: 16px; margin-top: 16px; }}
+        .info-item {{ background: #2a2a2a; border: 1px solid #404040; padding: 16px; border-radius: 8px; }}
+        .content {{ background: #333333; padding: 24px; border-radius: 12px; 
+            border: 1px solid #404040; font-size: 16px; line-height: 1.8; }}
+        .image-container {{ text-align: center; margin: 24px 0; padding: 24px; 
+            background: #333333; border: 1px solid #404040; border-radius: 12px; }}
+        .image-container h3 {{ color: #ffffff; font-weight: 600; margin-bottom: 16px; }}
+        .footer {{ text-align: center; padding: 32px; margin-top: 40px; background: #2a2a2a;
+            border: 1px solid #404040; border-radius: 16px; }}
+        .footer h3 {{ color: #ffffff; font-weight: 600; margin-bottom: 16px; }}
+        .footer p {{ color: #b0b0b0; font-size: 1.1em; }}
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>📄 OCR Results</h1>
+            <p>Generated by Luna's OCR Studio</p>
+        </div>
+        {info_html}
+        {image_html}
+        <div class="content-section">
+            <h2>Extracted Content</h2>
+            <div class="content">{html_content}</div>
+        </div>
+        <div class="footer">
+            <h3>Made with Luna's OCR Studio</h3>
+            <p>Powered by Google Gemini 2.5</p>
+            <p style="margin-top: 16px; font-size: 0.9em; color: #888;">
+                Generated on {datetime.now().strftime('%Y-%m-%d at %H:%M:%S')}
+            </p>
+        </div>
+    </div>
+</body>
+</html>
+    """
+    return html_template
+
+def create_all_downloads(content, filename, is_structured=False, processing_info=None, image=None):
+    """Create all download formats"""
+    
+    base_filename = os.path.splitext(filename)[0]
+    files = {}
+    
+    try:
+        # 1. Create .txt file (clean text)
+        txt_content = content
+        if is_structured:
+            txt_content = re.sub(r'\*\*(.*?)\*\*', r'\1', txt_content)
+            txt_content = re.sub(r'\*(.*?)\*', r'\1', txt_content)
+            txt_content = re.sub(r'^#+\s*', '', txt_content, flags=re.MULTILINE)
+        
+        txt_path = tempfile.mktemp(suffix='.txt')
+        with open(txt_path, 'w', encoding='utf-8') as f:
+            f.write(f"Generated by Luna's OCR Studio\n")
+            f.write(f"File: {filename}\n")
+            f.write(f"Processed: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}\n")
+            f.write("="*50 + "\n\n")
+            f.write(txt_content)
+        files['txt'] = txt_path
+        
+        # 2. Create .md file
+        md_content = content if is_structured else f"# OCR Results\n\n{content}"
+        md_path = tempfile.mktemp(suffix='.md')
+        with open(md_path, 'w', encoding='utf-8') as f:
+            f.write(f"<!-- Generated by Luna's OCR Studio -->\n")
+            f.write(f"<!-- File: {filename} -->\n")
+            f.write(f"<!-- Processed: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')} -->\n\n")
+            f.write(md_content)
+        files['md'] = md_path
+        
+        # 3. Create .html file
+        html_content = create_beautiful_html(content, filename, is_structured, processing_info, image)
+        html_path = tempfile.mktemp(suffix='.html')
+        with open(html_path, 'w', encoding='utf-8') as f:
+            f.write(html_content)
+        files['html'] = html_path
+        
+        return files
+        
+    except Exception as e:
+        print(f"Error creating files: {e}")
+        return None
+
+def process_document(file, image, api_key, use_structured, enhance_quality):
+    """Main processing function - handles both files and images"""
+    if not api_key:
+        return "❌ Please enter your Google API Key", None, None, None, None, "❌ No API key"
+    
+    if not file and not image:
+        return "❌ Please upload a file or paste an image", None, None, None, None, "❌ No input"
+    
+    start_time = time.time()
+    
+    try:
+        # Handle file upload
+        if file:
+            file_path = file.name
+            file_ext = os.path.splitext(file_path)[1].lower()
+            preview_image = None
+            
+            if file_ext == '.pdf':
+                # Convert PDF
+                dpi = 400 if enhance_quality else 300
+                images = convert_from_path(file_path, dpi=dpi)
+                if not images:
+                    return "❌ Failed to convert PDF", None, None, None, None, "❌ PDF conversion failed"
+                
+                preview_image = images[0]
+                all_text = []
+                
+                for i, img in enumerate(images):
+                    page_text = process_with_gemini(img, api_key, use_structured, enhance_quality)
+                    if use_structured:
+                        page_text = f"## 📄 หน้า {i + 1}\n\n{page_text}"
+                    else:
+                        page_text = f"=== หน้า {i + 1} ===\n{page_text}"
+                    all_text.append(page_text)
+                
+                result_text = "\n\n".join(all_text)
+                filename = os.path.basename(file_path)
+                
+            elif file_ext in ['.png', '.jpg', '.jpeg', '.webp', '.bmp']:
+                img = Image.open(file_path)
+                preview_image = img
+                result_text = process_with_gemini(img, api_key, use_structured, enhance_quality)
+                filename = os.path.basename(file_path)
+            else:
+                return "❌ Unsupported format. Use PDF, PNG, JPG", None, None, None, None, "❌ Unsupported format"
+        
+        # Handle pasted image
+        else:
+            preview_image = image
+            result_text = process_with_gemini(image, api_key, use_structured, enhance_quality)
+            filename = "Clipboard_Image.png"
+        
+        # Create downloads
+        processing_time = time.time() - start_time
+        processing_info = {
+            'filename': filename,
+            'model': 'Gemini 2.5 Pro' if use_structured else 'Gemini 2.5 Flash',
+            'processing_time': processing_time,
+            'characters': len(result_text),
+            'enhanced': enhance_quality,
+            'timestamp': datetime.now().isoformat()
+        }
+        
+        download_files = create_all_downloads(
+            result_text,
+            filename,
+            is_structured=use_structured,
+            processing_info=processing_info,
+            image=preview_image
+        )
+        
+        status = f"✅ Success! File: {filename} • Time: {processing_time:.1f}s • Characters: {len(result_text):,}"
+        
+        if download_files:
+            return (
+                result_text,
+                download_files.get('txt'),
+                download_files.get('md'),
+                download_files.get('html'),
+                preview_image,
+                status
+            )
+        else:
+            return result_text, None, None, None, preview_image, status
+        
+    except Exception as e:
+        return f"❌ Error: {str(e)}", None, None, None, None, f"❌ Error processing"
+
+# === CLEAN, READABLE DESIGN ===
+
+css = """
+/* Clean, readable theme with proper contrast */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+:root {
+    /* Dark theme with excellent readability */
+    --bg-primary: #1a1a1a;
+    --bg-secondary: #2a2a2a;
+    --bg-accent: #333333;
+    --text-primary: #ffffff;
+    --text-secondary: #b0b0b0;
+    --text-muted: #888888;
+    --accent-color: #4a9eff;
+    --accent-hover: #3d8bdb;
+    --success-color: #4caf50;
+    --error-color: #f44336;
+    --border-color: #404040;
+    --border-light: #555555;
+    
+    /* Typography */
+    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    --font-size-xs: 12px;
+    --font-size-sm: 14px;
+    --font-size-md: 16px;
+    --font-size-lg: 18px;
+    --font-size-xl: 24px;
+    
+    /* Spacing */
+    --spacing-xs: 4px;
+    --spacing-sm: 8px;
+    --spacing-md: 16px;
+    --spacing-lg: 24px;
+    --spacing-xl: 32px;
+    
+    /* Radius */
+    --radius-sm: 6px;
+    --radius-md: 8px;
+    --radius-lg: 12px;
+    --radius-xl: 16px;
+}
+
+/* Base styles */
+.gradio-container {
+    background: var(--bg-primary) !important;
+    color: var(--text-primary) !important;
+    font-family: var(--font-family) !important;
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-family) !important;
+    color: var(--text-primary) !important;
+    font-weight: 600 !important;
+}
+
+/* Clean sections */
+.input-section {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-xl) !important;
+    padding: var(--spacing-xl) !important;
+    margin-bottom: var(--spacing-lg) !important;
+}
+
+.output-section {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-xl) !important;
+    padding: var(--spacing-xl) !important;
+}
+
+/* Button styling */
+.primary-button {
+    background: var(--accent-color) !important;
+    border: none !important;
+    color: white !important;
+    font-weight: 500 !important;
+    font-family: var(--font-family) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: var(--spacing-md) var(--spacing-xl) !important;
+    font-size: var(--font-size-lg) !important;
+    transition: all 0.2s ease !important;
+}
+
+.primary-button:hover {
+    background: var(--accent-hover) !important;
+    transform: translateY(-1px) !important;
+}
+
+/* Input styling */
+.gradio-textbox textarea, 
+.gradio-textbox input {
+    background: var(--bg-accent) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-md) !important;
+    color: var(--text-primary) !important;
+    font-family: var(--font-family) !important;
+    font-size: var(--font-size-md) !important;
+    padding: var(--spacing-md) !important;
+}
+
+.gradio-textbox textarea:focus,
+.gradio-textbox input:focus {
+    border-color: var(--accent-color) !important;
+    outline: none !important;
+}
+
+.gradio-textbox textarea::placeholder,
+.gradio-textbox input::placeholder {
+    color: var(--text-muted) !important;
+}
+
+/* File upload */
+.gradio-file {
+    border: 2px dashed var(--border-light) !important;
+    border-radius: var(--radius-xl) !important;
+    background: var(--bg-accent) !important;
+    padding: var(--spacing-xl) !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-file:hover {
+    border-color: var(--accent-color) !important;
+    background: rgba(74, 158, 255, 0.1) !important;
+}
+
+/* Image upload */
+.gradio-image {
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-lg) !important;
+    background: var(--bg-accent) !important;
+}
+
+/* Checkboxes */
+.gradio-checkbox {
+    background: var(--bg-accent) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-md) !important;
+    padding: var(--spacing-sm) !important;
+}
+
+/* Download section */
+.download-container {
+    background: var(--bg-secondary) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--radius-lg) !important;
+    padding: var(--spacing-lg) !important;
+    margin-top: var(--spacing-lg) !important;
+}
+
+.download-item {
+    display: flex !important;
+    justify-content: space-between !important;
+    align-items: center !important;
+    padding: var(--spacing-md) 0 !important;
+    border-bottom: 1px solid var(--border-color) !important;
+}
+
+.download-item:last-child {
+    border-bottom: none !important;
+}
+
+.download-item:hover {
+    background: var(--bg-accent) !important;
+    border-radius: var(--radius-sm) !important;
+    margin: 0 calc(-1 * var(--spacing-sm)) !important;
+    padding: var(--spacing-md) var(--spacing-sm) !important;
+}
+
+/* Status styling */
+.status-success {
+    color: var(--success-color) !important;
+    background: rgba(76, 175, 80, 0.1) !important;
+    border: 1px solid rgba(76, 175, 80, 0.3) !important;
+    border-radius: var(--radius-md) !important;
+    padding: var(--spacing-sm) var(--spacing-md) !important;
+}
+
+.status-error {
+    color: var(--error-color) !important;
+    background: rgba(244, 67, 54, 0.1) !important;
+    border: 1px solid rgba(244, 67, 54, 0.3) !important;
+    border-radius: var(--radius-md) !important;
+    padding: var(--spacing-sm) var(--spacing-md) !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    .input-section, .output-section {
+        padding: var(--spacing-lg) !important;
+    }
+    
+    .primary-button {
+        width: 100% !important;
+        padding: var(--spacing-md) !important;
+    }
+}
+"""
+
+with gr.Blocks(title="Luna's OCR Studio", css=css, theme=gr.themes.Soft()) as demo:
+    
+    # Clean Header
+    gr.HTML("""
+    <div style="
+        text-align: center; 
+        padding: 48px 32px; 
+        background: var(--bg-secondary); 
+        border: 1px solid var(--border-color);
+        border-radius: var(--radius-xl); 
+        margin-bottom: var(--spacing-xl);
+    ">
+        <h1 style="
+            color: var(--text-primary); 
+            font-size: var(--font-size-xl); 
+            font-weight: 700;
+            font-family: var(--font-family);
+            margin-bottom: var(--spacing-md);
+        ">
+            📄 Luna's OCR Studio
+        </h1>
+        <p style="
+            color: var(--text-secondary); 
+            font-size: var(--font-size-lg); 
+            font-family: var(--font-family);
+        ">
+            Extract text from PDFs and images with AI precision
+        </p>
+    </div>
+    """)
+    
+    # Main Interface
+    with gr.Row():
+        # Input Panel
+        with gr.Column(scale=1, elem_classes=["input-section"]):
+            gr.Markdown("## API Configuration")
+            api_key = gr.Textbox(
+                label="Google API Key",
+                placeholder="Enter your Google API key here...",
+                type="password"
+            )
+            
+            gr.Markdown("## Upload Document")
+            file_input = gr.File(
+                label="Upload PDF or Image File",
+                file_types=[".pdf", ".png", ".jpg", ".jpeg", ".webp", ".bmp"]
+            )
+            
+            gr.Markdown("**OR**")
+            
+            gr.Markdown("## Paste Image")
+            image_input = gr.Image(
+                label="Paste from clipboard (Ctrl+V)",
+                type="pil"
+            )
+            
+            gr.Markdown("## Processing Options")
+            use_structured = gr.Checkbox(
+                label="Structured Output (Markdown formatting)",
+                value=False
+            )
+            enhance_quality = gr.Checkbox(
+                label="Enhance Image Quality",
+                value=True
+            )
+            
+            # Process Button
+            process_btn = gr.Button(
+                "Extract Text",
+                variant="primary",
+                size="lg",
+                elem_classes=["primary-button"]
+            )
+        
+        # Output Panel
+        with gr.Column(scale=2, elem_classes=["output-section"]):
+            gr.Markdown("## Status")
+            status_output = gr.Textbox(
+                value="Ready to extract text from your documents",
+                interactive=False,
+                show_label=False
+            )
+            
+            gr.Markdown("## Extracted Text")
+            text_output = gr.Textbox(
+                lines=12,
+                max_lines=20,
+                interactive=False,
+                show_label=False,
+                placeholder="Your extracted text will appear here..."
+            )
+            
+            gr.Markdown("## Image Preview")
+            image_preview = gr.Image(
+                height=250,
+                interactive=False,
+                show_label=False
+            )
+    
+    # Download Section
+    gr.Markdown("## Download Results")
+    with gr.Column(elem_classes=["download-container"], visible=False) as download_section:
+        gr.HTML("""
+        <div style="margin-bottom: var(--spacing-md);">
+            <h3 style="color: var(--text-primary); font-family: var(--font-family); margin-bottom: var(--spacing-sm);">
+                Available Downloads
+            </h3>
+            <p style="color: var(--text-secondary); font-family: var(--font-family); font-size: var(--font-size-sm);">
+                Choose your preferred format
+            </p>
+        </div>
+        """)
+        
+        with gr.Row(elem_classes=["download-item"]):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: var(--spacing-sm);">
+                <span style="font-size: var(--font-size-lg);">📄</span>
+                <div>
+                    <strong style="color: var(--text-primary); font-family: var(--font-family);">TXT File</strong>
+                    <br>
+                    <small style="color: var(--text-secondary); font-family: var(--font-family);">Clean text without formatting</small>
+                </div>
+            </div>
+            """)
+            download_txt = gr.File(label="Download", visible=False)
+        
+        with gr.Row(elem_classes=["download-item"]):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: var(--spacing-sm);">
+                <span style="font-size: var(--font-size-lg);">📋</span>
+                <div>
+                    <strong style="color: var(--text-primary); font-family: var(--font-family);">Markdown File</strong>
+                    <br>
+                    <small style="color: var(--text-secondary); font-family: var(--font-family);">Formatted with markdown syntax</small>
+                </div>
+            </div>
+            """)
+            download_md = gr.File(label="Download", visible=False)
+        
+        with gr.Row(elem_classes=["download-item"]):
+            gr.HTML("""
+            <div style="display: flex; align-items: center; gap: var(--spacing-sm);">
+                <span style="font-size: var(--font-size-lg);">🌐</span>
+                <div>
+                    <strong style="color: var(--text-primary); font-family: var(--font-family);">HTML File</strong>
+                    <br>
+                    <small style="color: var(--text-secondary); font-family: var(--font-family);">Beautiful styled web page</small>
+                </div>
+            </div>
+            """)
+            download_html = gr.File(label="Download", visible=False)
+    
+    # Event Handlers
+    def update_downloads(txt, md, html):
+        container_visible = any([txt, md, html])
+        return (
+            gr.update(visible=container_visible),
+            gr.update(value=txt, visible=txt is not None),
+            gr.update(value=md, visible=md is not None),
+            gr.update(value=html, visible=html is not None)
+        )
+    
+    process_btn.click(
+        fn=process_document,
+        inputs=[file_input, image_input, api_key, use_structured, enhance_quality],
+        outputs=[text_output, download_txt, download_md, download_html, image_preview, status_output]
+    ).then(
+        fn=update_downloads,
+        inputs=[download_txt, download_md, download_html],
+        outputs=[download_section, download_txt, download_md, download_html]
+    )
+
+if __name__ == "__main__":
+    demo.launch(server_port=7868, share=False, show_error=True)

package.json

@@ -0,0 +1,59 @@
+{
+  "name": "luna-ocr-web",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@huggingface/hub": "^2.4.0",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "@react-three/drei": "^10.6.1",
+    "@react-three/fiber": "^9.3.0",
+    "@react-three/rapier": "^2.1.0",
+    "dotenv": "^17.2.1",
+    "framer-motion": "^10.16.4",
+    "gsap": "^3.13.0",
+    "html2canvas": "^1.4.1",
+    "jspdf": "^2.5.1",
+    "lucide-react": "^0.294.0",
+    "marked": "^9.1.2",
+    "meshline": "^3.3.1",
+    "ogl": "^1.0.11",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-dropzone": "^14.2.3",
+    "react-scripts": "5.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "three": "^0.178.0"
+  },
+  "scripts": {
+    "start": "concurrently \"npm run server\" \"npm run client\"",
+    "client": "react-scripts start",
+    "server": "cd server && npm start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "dev": "concurrently \"npm run server\" \"npm run client\" --names \"SERVER,CLIENT\" --prefix-colors \"blue,green\""
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "concurrently": "^9.2.0"
+  }
+}

public/index.html

@@ -0,0 +1,185 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <link rel="icon"
+    href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌙💛</text></svg>" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#0a0a0f" />
+  <meta name="description" content="Luna OCR - Advanced Text Extraction from PDFs and Images" />
+  <title>🌙💛 Luna OCR - Text Extraction</title>
+
+  <!-- Preload fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Martian+Mono:[email protected]&display=swap" rel="stylesheet">
+
+  <!-- Meta tags for better SEO -->
+  <meta property="og:title" content="Luna OCR - Text Extraction" />
+  <meta property="og:description"
+    content="Extract text from PDFs and images using advanced Luna processing. Support for Thai language and structured formatting." />
+  <meta property="og:type" content="website" />
+  <meta name="twitter:card" content="summary_large_image" />
+
+  <style>
+    /* Prevent flash of unstyled content */
+    body {
+      margin: 0;
+      background: #141414 !important;
+      color: #ffffff;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
+      overflow: hidden;
+    }
+
+    /* Loading screen styles - applied immediately */
+    #loading {
+      position: fixed !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100vw !important;
+      height: 100vh !important;
+      background: #141414 !important;
+      z-index: 99999 !important;
+      display: flex !important;
+      align-items: center;
+      justify-content: center;
+      opacity: 1 !important;
+    }
+
+    /* Hide React root initially */
+    #root {
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    /* Show root when loading is done */
+    body.loaded #root {
+      opacity: 1;
+    }
+
+    body.loaded #loading {
+      display: none !important;
+    }
+  </style>
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+
+  <!-- Loading screen -->
+  <div id="loading" class="loading-container">
+    <div class="a-hole">
+      <canvas class="js-canvas"></canvas>
+      <div class="aura"></div>
+    </div>
+  </div>
+
+  <div id="root"></div>
+  <script>
+    // Simple loading screen that won't interfere with React
+    document.addEventListener('DOMContentLoaded', function () {
+      const canvas = document.querySelector('.js-canvas');
+      if (!canvas) return;
+
+      const ctx = canvas.getContext('2d');
+      let animationId;
+
+      // Set canvas size
+      function resizeCanvas() {
+        const rect = canvas.parentElement.getBoundingClientRect();
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+      }
+
+      resizeCanvas();
+      window.addEventListener('resize', resizeCanvas);
+
+      // Optimized particle animation - fewer particles for better performance
+      const particles = [];
+      for (let i = 0; i < 25; i++) {
+        particles.push({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * 1.5,
+          vy: (Math.random() - 0.5) * 1.5,
+          size: Math.random() * 2 + 1,
+          opacity: Math.random() * 0.6 + 0.3
+        });
+      }
+
+      function animate() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw particles - all visible immediately
+        particles.forEach(particle => {
+          particle.x += particle.vx;
+          particle.y += particle.vy;
+
+          // Wrap around edges
+          if (particle.x < 0) particle.x = canvas.width;
+          if (particle.x > canvas.width) particle.x = 0;
+          if (particle.y < 0) particle.y = canvas.height;
+          if (particle.y > canvas.height) particle.y = 0;
+
+          ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`;
+          ctx.beginPath();
+          ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
+          ctx.fill();
+        });
+
+        animationId = requestAnimationFrame(animate);
+      }
+
+      // Start animation after 500ms delay
+      setTimeout(() => {
+        animate();
+      }, 500);
+
+      // Hide loading screen when React loads
+      function hideLoading() {
+        cancelAnimationFrame(animationId);
+        document.body.classList.add('loaded');
+      }
+
+      // Fast loading screen removal
+      let reactLoaded = false;
+
+      // Check for actual app content (header with Luna OCR)
+      const checkReactLoaded = () => {
+        const root = document.getElementById('root');
+        const appHeader = root?.querySelector('.app-header');
+        const logoContent = root?.querySelector('.logo');
+
+        if (root && root.children.length > 0 && (appHeader || logoContent) && !reactLoaded) {
+          reactLoaded = true;
+          // Small delay to ensure orb and other components are ready
+          setTimeout(hideLoading, 200);
+        }
+      };
+
+      // Fast polling every 100ms
+      const pollInterval = setInterval(() => {
+        checkReactLoaded();
+        if (reactLoaded) {
+          clearInterval(pollInterval);
+        }
+      }, 100);
+
+      // Much faster fallback - hide after 800ms max
+      setTimeout(() => {
+        if (!reactLoaded) {
+          hideLoading();
+        }
+      }, 800);
+
+      // Immediate check on DOM ready
+      if (document.readyState === 'complete') {
+        setTimeout(checkReactLoaded, 100);
+      }
+    });
+  </script>
+</body>
+
+</html>

public/sample.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample Document</title>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 40px 20px;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        
+        .container {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(20px);
+            border-radius: 20px;
+            padding: 40px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        }
+        
+        h1 {
+            color: #2d3748;
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+        }
+        
+        h2 {
+            color: #4a5568;
+            font-size: 1.5rem;
+            margin-top: 2rem;
+            margin-bottom: 1rem;
+            border-bottom: 2px solid #e2e8f0;
+            padding-bottom: 0.5rem;
+        }
+        
+        .highlight {
+            background: linear-gradient(135deg, #ffd89b 0%, #19547b 100%);
+            color: white;
+            padding: 20px;
+            border-radius: 12px;
+            margin: 20px 0;
+        }
+        
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+        
+        .info-card {
+            background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+            padding: 20px;
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        .info-card h3 {
+            margin-top: 0;
+            color: #2d3748;
+        }
+        
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 20px 0;
+            background: white;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+        }
+        
+        th, td {
+            padding: 12px 15px;
+            text-align: left;
+            border-bottom: 1px solid #e2e8f0;
+        }
+        
+        th {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            font-weight: 600;
+        }
+        
+        tr:hover {
+            background-color: #f7fafc;
+        }
+        
+        .footer {
+            margin-top: 40px;
+            padding-top: 20px;
+            border-top: 1px solid #e2e8f0;
+            text-align: center;
+            color: #718096;
+            font-size: 0.9rem;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>🌟 Luna OCR Sample Document</h1>
+        
+        <div class="highlight">
+            <h2>📋 Document Information</h2>
+            <p>This is a sample HTML document designed to showcase the glassmorphism styling and document viewer capabilities of Luna OCR. The document features modern CSS styling with gradients, blur effects, and responsive design.</p>
+        </div>
+        
+        <h2>📊 Sample Data Table</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Item</th>
+                    <th>Category</th>
+                    <th>Status</th>
+                    <th>Priority</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Document Processing</td>
+                    <td>OCR Technology</td>
+                    <td>✅ Active</td>
+                    <td>High</td>
+                </tr>
+                <tr>
+                    <td>Glassmorphism UI</td>
+                    <td>Design System</td>
+                    <td>✅ Complete</td>
+                    <td>Medium</td>
+                </tr>
+                <tr>
+                    <td>PDF Viewer</td>
+                    <td>File Handling</td>
+                    <td>🔄 In Progress</td>
+                    <td>High</td>
+                </tr>
+                <tr>
+                    <td>HTML Viewer</td>
+                    <td>File Handling</td>
+                    <td>✅ Complete</td>
+                    <td>Medium</td>
+                </tr>
+            </tbody>
+        </table>
+        
+        <div class="info-grid">
+            <div class="info-card">
+                <h3>🎨 Design Features</h3>
+                <ul>
+                    <li>Glassmorphism effects</li>
+                    <li>Gradient backgrounds</li>
+                    <li>Smooth animations</li>
+                    <li>Responsive layout</li>
+                </ul>
+            </div>
+            
+            <div class="info-card">
+                <h3>⚡ Performance</h3>
+                <ul>
+                    <li>Fast rendering</li>
+                    <li>Optimized CSS</li>
+                    <li>Minimal JavaScript</li>
+                    <li>Cross-browser support</li>
+                </ul>
+            </div>
+            
+            <div class="info-card">
+                <h3>🔧 Technical Stack</h3>
+                <ul>
+                    <li>React.js</li>
+                    <li>Framer Motion</li>
+                    <li>CSS3 Backdrop Filter</li>
+                    <li>Modern ES6+</li>
+                </ul>
+            </div>
+        </div>
+        
+        <h2>📝 Sample Content</h2>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        
+        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        
+        <div class="highlight">
+            <h3>💡 Key Features</h3>
+            <p>This document demonstrates the advanced styling capabilities of the Luna OCR system, including glassmorphism effects, gradient overlays, and modern typography. The viewer supports zoom, rotation, and fullscreen modes for optimal document viewing experience.</p>
+        </div>
+        
+        <div class="footer">
+            <p>Generated by Luna OCR • Sample HTML Document • Glassmorphism Theme</p>
+        </div>
+    </div>
+</body>
+</html>

server/README.md

@@ -0,0 +1,164 @@
+# Luna OCR Backend
+
+Real OCR processing backend using Gemini AI for intelligent text extraction and formatting.
+
+## 🚀 Quick Start
+
+### 1. Install Dependencies
+```bash
+cd server
+npm install
+```
+
+### 2. Start the Server
+```bash
+npm start
+# or for development with auto-reload:
+npm run dev
+```
+
+### 3. Test the API
+```bash
+curl http://localhost:3001/api/health
+```
+
+## 📡 API Endpoints
+
+### Health Check
+```
+GET /api/health
+```
+
+### OCR Processing
+```
+POST /api/ocr
+Content-Type: multipart/form-data
+
+Parameters:
+- file: Image file (PNG, JPG, WebP) or PDF
+- apiKey: Google Gemini API key
+- mode: "standard" or "structured"
+```
+
+## 🔧 Configuration
+
+### Environment Variables
+Create a `.env` file (optional):
+```
+PORT=3001
+MAX_FILE_SIZE=10485760
+```
+
+### Supported File Types
+- **Images**: PNG, JPG, JPEG, WebP
+- **Documents**: PDF (converted to images)
+- **Max Size**: 10MB per file
+
+## 🎯 Processing Modes
+
+### Standard Mode
+- Uses Gemini 1.5 Flash (faster)
+- Returns clean plain text
+- Good for simple text extraction
+
+### Structured Mode  
+- Uses Gemini 1.5 Pro (more intelligent)
+- Returns formatted Markdown
+- Creates tables, headers, lists automatically
+- Perfect for complex documents
+
+## 📊 Response Format
+
+```json
+{
+  "success": true,
+  "data": {
+    "fileName": "document.png",
+    "fileSize": 1234567,
+    "processingMode": "structured",
+    "extractedText": "# Document Title\n\n...",
+    "formats": {
+      "txt": "plain text version",
+      "md": "markdown version", 
+      "json": { "metadata": {...}, "content": {...} }
+    },
+    "metadata": {
+      "characterCount": 1500,
+      "wordCount": 250,
+      "lineCount": 45,
+      "processedAt": "2024-01-01T12:00:00.000Z"
+    }
+  }
+}
+```
+
+## 🛠️ Development
+
+### Project Structure
+```
+server/
+├── server.js          # Main server file
+├── package.json       # Dependencies
+├── uploads/           # Temporary file storage
+└── README.md          # This file
+```
+
+### Key Features
+- **Image Enhancement**: Automatic image preprocessing for better OCR
+- **Smart Formatting**: Gemini AI creates beautiful Markdown output
+- **Multiple Formats**: Returns TXT, MD, and JSON formats
+- **Error Handling**: Comprehensive error handling and cleanup
+- **File Cleanup**: Automatic temporary file cleanup
+
+## 🔑 Getting Gemini API Key
+
+1. Go to [Google AI Studio](https://makersuite.google.com/app/apikey)
+2. Create a new API key
+3. Copy the key and use it in the frontend
+
+## 🚨 Troubleshooting
+
+### Common Issues
+
+**"Cannot connect to OCR backend"**
+- Make sure server is running: `npm start`
+- Check port 3001 is not in use
+- Verify no firewall blocking
+
+**"Invalid API key"**
+- Check your Gemini API key is correct
+- Ensure API key has proper permissions
+- Try creating a new API key
+
+**"File too large"**
+- Maximum file size is 10MB
+- Compress images before uploading
+- For PDFs, try splitting into smaller files
+
+**"Processing failed"**
+- Check image quality (not too blurry)
+- Ensure text is clearly visible
+- Try different processing mode
+
+### Debug Mode
+Set `NODE_ENV=development` for detailed logging:
+```bash
+NODE_ENV=development npm start
+```
+
+## 📝 Notes
+
+- Server runs on port 3001 by default
+- Temporary files are automatically cleaned up
+- CORS is enabled for frontend integration
+- Image enhancement improves OCR accuracy
+- Gemini AI provides intelligent text formatting
+
+## 🔗 Integration
+
+The backend integrates seamlessly with the Luna OCR React frontend. Make sure both are running:
+
+1. **Backend**: `cd server && npm start` (port 3001)
+2. **Frontend**: `npm start` (port 3000)
+
+The frontend will automatically call the backend API for real OCR processing!

server/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "luna-ocr-backend",
+  "version": "1.0.0",
+  "description": "Backend API for Luna OCR with advanced text extraction",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "@google/generative-ai": "^0.2.1",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "jimp": "^0.22.10",
+    "multer": "^1.4.5-lts.1",
+    "node-tesseract-ocr": "^2.2.1",
+    "pdf-poppler": "^0.2.1",
+    "sharp": "^0.32.6"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+}

server/server.js

@@ -0,0 +1,693 @@
+const express = require('express');
+const cors = require('cors');
+const multer = require('multer');
+const sharp = require('sharp');
+const { GoogleGenerativeAI } = require('@google/generative-ai');
+const fs = require('fs');
+const path = require('path');
+
+// Server-side API key (more secure for public deployment)
+const GEMINI_API_KEY = process.env.GEMINI_API_KEY || null;
+const pdf = require('pdf-poppler');
+
+const app = express();
+const PORT = process.env.PORT || 3002;
+
+// Cleanup function for temporary files
+function cleanupTempFiles() {
+    const uploadsDir = path.join(__dirname, 'uploads');
+
+    try {
+        if (!fs.existsSync(uploadsDir)) {
+            fs.mkdirSync(uploadsDir, { recursive: true });
+            console.log('📁 Created uploads directory');
+            return;
+        }
+
+        const files = fs.readdirSync(uploadsDir);
+        let cleanedCount = 0;
+
+        files.forEach(file => {
+            const filePath = path.join(uploadsDir, file);
+            const stats = fs.statSync(filePath);
+            const now = new Date();
+            const fileAge = now - stats.mtime; // Age in milliseconds
+            const maxAge = 30 * 60 * 1000; // 30 minutes in milliseconds
+
+            // Clean up files older than 30 minutes
+            if (fileAge > maxAge) {
+                try {
+                    fs.unlinkSync(filePath);
+                    cleanedCount++;
+                    console.log(`🗑️  Cleaned up old temp file: ${file}`);
+                } catch (error) {
+                    console.warn(`⚠️  Could not delete ${file}:`, error.message);
+                }
+            }
+        });
+
+        if (cleanedCount > 0) {
+            console.log(`✅ Cleaned up ${cleanedCount} temporary files`);
+        } else {
+            console.log('✅ No temporary files to clean up');
+        }
+
+    } catch (error) {
+        console.error('❌ Error during cleanup:', error.message);
+    }
+}
+
+// Run cleanup on server start
+cleanupTempFiles();
+
+// Schedule periodic cleanup every 15 minutes
+setInterval(() => {
+    console.log('🔄 Running periodic cleanup...');
+    cleanupTempFiles();
+}, 15 * 60 * 1000); // 15 minutes
+
+// Middleware
+app.use(cors());
+app.use(express.json());
+
+// Configure multer for file uploads
+const upload = multer({
+    dest: 'uploads/',
+    limits: {
+        fileSize: 10 * 1024 * 1024, // 10MB limit
+    },
+    fileFilter: (req, file, cb) => {
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'application/pdf'];
+        if (allowedTypes.includes(file.mimetype)) {
+            cb(null, true);
+        } else {
+            cb(new Error('Invalid file type. Only JPEG, PNG, WebP, and PDF are allowed.'));
+        }
+    }
+});
+
+// PDF to image conversion using pdf-poppler
+async function convertPdfToImages(pdfPath) {
+    try {
+        const outputDir = path.dirname(pdfPath);
+
+        console.log('Converting PDF to images using pdf-poppler...');
+
+        const options = {
+            format: 'png',
+            out_dir: outputDir,
+            out_prefix: 'page',
+            page: null, // Convert all pages
+            scale: 2048 // High resolution for better OCR
+        };
+
+        console.log('PDF conversion options:', options);
+
+        // Convert PDF to images
+        const results = await pdf.convert(pdfPath, options);
+
+        console.log('PDF conversion results:', results);
+
+        // Build image paths based on the results
+        const imagePaths = [];
+        if (Array.isArray(results)) {
+            for (let i = 0; i < results.length; i++) {
+                const imagePath = path.join(outputDir, `page-${i + 1}.png`);
+                if (fs.existsSync(imagePath)) {
+                    imagePaths.push(imagePath);
+                    console.log(`Found converted page: ${imagePath}`);
+                }
+            }
+        }
+
+        // If no images found with the expected naming, try alternative naming
+        if (imagePaths.length === 0) {
+            console.log('Trying alternative file naming patterns...');
+            const files = fs.readdirSync(outputDir);
+            const pngFiles = files.filter(file => file.endsWith('.png') && file.startsWith('page'));
+
+            for (const file of pngFiles) {
+                const fullPath = path.join(outputDir, file);
+                imagePaths.push(fullPath);
+                console.log(`Found PNG file: ${fullPath}`);
+            }
+        }
+
+        console.log(`Successfully converted ${imagePaths.length} pages to images`);
+        return imagePaths;
+    } catch (error) {
+        console.error('PDF conversion error:', error);
+        throw new Error(`PDF conversion failed: ${error.message}`);
+    }
+}
+
+// Enhanced image preprocessing
+async function enhanceImageForOCR(imagePath) {
+    try {
+        // Create a unique enhanced filename to avoid input/output conflict
+        const enhancedPath = imagePath + '_enhanced.png';
+
+        await sharp(imagePath)
+            .resize(null, 2000, {
+                withoutEnlargement: false,
+                kernel: sharp.kernel.lanczos3
+            })
+            .normalize()
+            .sharpen({ sigma: 1.2, flat: 1, jagged: 2 })
+            .gamma(1.1)
+            .png({ quality: 95, compressionLevel: 6 })
+            .toFile(enhancedPath);
+
+        return enhancedPath;
+    } catch (error) {
+        console.error('Image enhancement error:', error);
+        return imagePath; // Return original if enhancement fails
+    }
+}
+
+// Gemini OCR processing with intelligent formatting
+async function processWithGemini(imagePath, apiKey, mode = 'standard') {
+    try {
+        const genAI = new GoogleGenerativeAI(apiKey);
+
+        // Choose model based on mode (using 2.5 models as specified)
+        const modelName = mode === 'structured' ? 'gemini-2.5-flash' : 'gemini-2.5-pro';
+        const model = genAI.getGenerativeModel({ model: modelName });
+
+        // Read and prepare image
+        const imageBuffer = fs.readFileSync(imagePath);
+        const imageBase64 = imageBuffer.toString('base64');
+
+        const imagePart = {
+            inlineData: {
+                data: imageBase64,
+                mimeType: 'image/png'
+            }
+        };
+
+        // Choose prompt based on mode
+        let prompt;
+        if (mode === 'structured') {
+            prompt = `🇹🇭 **THAI-FOCUSED MARKDOWN OCR - อ่านข้อความไทยและจัดรูปแบบเป็น Markdown**
+
+**คำสั่งสำคัญ (CRITICAL INSTRUCTIONS):**
+1. **อ่านทุกตัวอักษร** - แยกข้อความที่เขียนในรูปภาพทุกตัว
+2. **ไม่ใช้ตัวอย่างทั่วไป** - ห้ามใช้ "Field | Value" ให้ใช้ข้อความจริงที่เห็น
+3. **รักษาภาษาเดิม** - ถ้าเป็นไทยให้เป็นไทย ถ้าเป็นอังกฤษให้เป็นอังกฤษ
+4. **ข้อความจริงเท่านั้น** - ห้ามตีความ แปล หรือสร้างคำอธิบายเอง
+
+**วิธีการสแกน:**
+- เริ่มจากซ้ายบน อ่านทีละบรรทัดไปขวาล่าง
+- รวมข้อความทั้งหมด: หัวข้อ เนื้อหา ตัวเลข วันที่ ข้อความเล็ก
+- **สำหรับข้อความไทย: เว้นวรรคระหว่างคำให้ถูกต้อง**
+- สำหรับตาราง: ใช้หัวตารางและข้อมูลจริงที่เห็น
+- สำหรับรายการ: ใช้รายการจริงที่เห็น
+
+**กฎการจัดรูปแบบ MARKDOWN:**
+- ## สำหรับหัวข้อใหญ่ (ใช้หัวข้อจริง)
+- ### สำหรับหัวข้อย่อย (ใช้หัวข้อจริง)
+- **ใช้ตารางเสมอสำหรับข้อมูลที่เป็นระบบ:**
+  - เห็นตาราง → สร้างตารางด้วยหัวตารางและข้อมูลจริง
+  - เห็นรายการ → แปลงเป็นตารางด้วยรายการจริง
+  - เห็นคู่ข้อมูล → ใช้คีย์และค่าจริง
+- ใช้ **ตัวหนา** สำหรับข้อความที่เน้นในรูป
+- ใช้ > สำหรับหมายเหตุที่ปรากฏในรูป
+
+**ตัวอย่างตาราง:**
+| รายการ | จำนวน | ราคา |
+|--------|--------|------|
+| กาแฟ | 2 แก้ว | 60 บาท |
+| ขนมปัง | 1 ชิ้น | 25 บาท |
+
+**ผลลัพธ์: MARKDOWN ที่มีเนื้อหาจริง - ห้ามใช้แม่แบบทั่วไป**`;
+        } else {
+            prompt = `🇹🇭 **FAST MARKDOWN OCR - SAME FEATURES AS PRO MODE (2.5 FLASH)**
+
+**คำสั่งสำคัญ (IDENTICAL TO STRUCTURED MODE):**
+1. **อ่านทุกตัวอักษร** - แยกข้อความที่เขียนในรูปภาพทุกตัว
+2. **ไม่ใช้ตัวอย่างทั่วไป** - ห้ามใช้ "Field | Value" ให้ใช้ข้อความจริงที่เห็น
+3. **รักษาภาษาเดิม** - ถ��าเป็นไทยให้เป็นไทย ถ้าเป็นอังกฤษให้เป็นอังกฤษ
+4. **ข้อความจริงเท่านั้น** - ห้ามตีความ แปล หรือสร้างคำอธิบายเอง
+
+**วิธีการสแกน (SAME AS PRO MODE):**
+- เริ่มจากซ้ายบน อ่านทีละบรรทัดไปขวาล่าง
+- รวมข้อความทั้งหมด: หัวข้อ เนื้อหา ตัวเลข วันที่ ข้อความเล็ก
+- **สำหรับข้อความไทย: เว้นวรรคระหว่างคำให้ถูกต้อง**
+- สำหรับตาราง: ใช้หัวตารางและข้อมูลจริงที่เห็น
+- สำหรับรายการ: ใช้รายการจริงที่เห็น
+
+**MARKDOWN FORMATTING RULES (IDENTICAL TO PRO MODE):**
+- ## สำหรับหัวข้อใหญ่ (ใช้หัวข้อจริง)
+- ### สำหรับหัวข้อย่อย (ใช้หัวข้อจริง)
+- **ใช้ตารางเสมอสำหรับข้อมูลที่เป็นระบบ:**
+  - เห็นตาราง → สร้างตาราง markdown ด้วยหัวตารางและข้อมูลจริง
+  - เห็นรายการ → แปลงเป็นตาราง markdown ด้วยรายการจริง
+  - เห็นคู่ข้อมูล → ใช้คีย์และค่าจริงในตาราง markdown
+- ใช้ **ตัวหนา** สำหรับข้อความที่เน้นในรูป
+- ใช้ > สำหรับหมายเหตุที่ปรากฏในรูป
+- ใช้ - สำหรับรายการเมื่อเหมาะสม
+
+**การประมวลผลภาษา (SAME AS PRO MODE):**
+- ข้อความไทย: เว้นวรรคให้ถูกต้อง แก้ไขข้อผิดพลาด OCR
+- ข้อความอังกฤษ: รักษาการสะกดและตัวพิมพ์เดิม
+- ตัวเลข: แยกตัวเลข ทศนิยม เปอร์เซ็นต์ รหัสให้แม่นยำ
+- ภาษาผสม: รักษาภาษาเดิมของแต่ละส่วน
+
+**ตัวอย่างตาราง MARKDOWN:**
+| รายการ | จำนวน | ราคา |
+|--------|--------|------|
+| กาแฟ อเมริกาโน่ | 2 แก้ว | 120 บาท |
+| ขนมปังโฮลวีท | 1 ชิ้น | 45 บาท |
+
+**ผลลัพธ์: MARKDOWN WITH SAME FEATURES AS PRO MODE - JUST FASTER WITH 2.5 FLASH**`;
+        }
+
+        const result = await model.generateContent([prompt, imagePart]);
+        const response = await result.response;
+        let extractedText = response.text();
+
+        // Both modes now support the same markdown formatting
+        // No cleanup needed - both modes produce markdown output
+
+        return extractedText;
+
+    } catch (error) {
+        console.error('Gemini processing error:', error);
+        throw new Error(`OCR processing failed: ${error.message}`);
+    }
+}
+
+// Generate different format outputs
+function generateFormats(text, fileName, mode) {
+    const baseFileName = fileName.replace(/\.[^/.]+$/, '');
+    const timestamp = new Date().toISOString();
+
+    const formats = {
+        // Plain text
+        txt: text,
+
+        // Markdown (always available for both modes)
+        md: mode === 'structured' ? text : `# ${baseFileName}\n\n${text}`,
+
+        // JSON format
+        json: {
+            metadata: {
+                fileName: fileName,
+                extractedAt: timestamp,
+                characterCount: text.length,
+                lineCount: text.split('\n').length,
+                wordCount: text.split(/\s+/).filter(word => word.length > 0).length,
+                processingMode: mode
+            },
+            content: {
+                rawText: text,
+                lines: text.split('\n'),
+                paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
+            }
+        }
+    };
+
+    return formats;
+}
+
+// Progress tracking
+const progressTracking = new Map();
+const consoleLogs = new Map(); // Store console logs per session
+
+// Progress endpoint
+app.get('/api/progress/:sessionId', (req, res) => {
+    const sessionId = req.params.sessionId;
+    const progress = progressTracking.get(sessionId) || { current: 0, total: 0, status: 'Not started' };
+    res.json(progress);
+});
+
+// Latest progress endpoint (gets the most recent progress)
+app.get('/api/progress-latest', (req, res) => {
+    if (progressTracking.size === 0) {
+        return res.json({ current: 0, total: 0, status: 'No active processing' });
+    }
+
+    // Get the most recent progress entry
+    const entries = Array.from(progressTracking.entries());
+    const latestEntry = entries[entries.length - 1];
+    // Sending progress data to frontend
+    res.json(latestEntry[1]);
+});
+
+// Main OCR endpoint
+app.post('/api/ocr', upload.single('file'), async (req, res) => {
+    const sessionId = Date.now().toString();
+
+    try {
+        const { mode = 'standard' } = req.body;
+
+        // Use server-side API key if available, otherwise require from client
+        const apiKey = GEMINI_API_KEY || req.body.apiKey;
+
+        if (!apiKey) {
+            return res.status(400).json({
+                success: false,
+                error: GEMINI_API_KEY ? 'Server API key not configured' : 'Google API Key is required'
+            });
+        }
+
+        if (!req.file) {
+            return res.status(400).json({
+                success: false,
+                error: 'No file uploaded'
+            });
+        }
+
+        let extractedText = '';
+        let imagePaths = [];
+
+        // Console log capture helper
+        const addConsoleLog = (message) => {
+            if (!consoleLogs.has(sessionId)) {
+                consoleLogs.set(sessionId, []);
+            }
+            const logs = consoleLogs.get(sessionId);
+            logs.push({
+                timestamp: new Date().toISOString(),
+                message: message
+            });
+            // Keep only last 20 logs to prevent memory issues
+            if (logs.length > 20) {
+                logs.shift();
+            }
+            console.log(message);
+        };
+
+        addConsoleLog(`🚀 Processing file: ${req.file.originalname} in ${mode} mode`);
+
+        // Progress update helper
+        const updateProgress = (current, total, status, details = {}) => {
+            const progressData = {
+                current,
+                total,
+                status,
+                sessionId,
+                fileName: req.file.originalname,
+                consoleLogs: consoleLogs.get(sessionId) || [],
+                ...details
+            };
+            progressTracking.set(sessionId, progressData);
+            addConsoleLog(`Progress: ${current}/${total} - ${status}`);
+        };
+
+        // Handle PDF files
+        if (req.file.mimetype === 'application/pdf') {
+            addConsoleLog('🔄 Starting PDF processing...');
+            addConsoleLog(`📄 PDF file: ${req.file.originalname}`);
+            addConsoleLog(`📊 File size: ${(req.file.size / 1024).toFixed(2)} KB`);
+
+            updateProgress(1, 10, '🖼️ Converting PDF to images...');
+            const pdfImagePaths = await convertPdfToImages(req.file.path);
+
+            if (pdfImagePaths.length === 0) {
+                throw new Error('No pages could be extracted from PDF. The PDF might be corrupted or empty.');
+            }
+
+            addConsoleLog(`✅ Converted ${pdfImagePaths.length} pages to images`);
+
+            // Calculate total steps: 2 initial + (2 steps per page)
+            const totalSteps = 2 + (pdfImagePaths.length * 2);
+            updateProgress(2, totalSteps, `📋 Found ${pdfImagePaths.length} pages to process`, {
+                totalPages: pdfImagePaths.length,
+                currentPage: 0,
+                totalCharacters: 0
+            });
+
+            // Process each page with OCR
+            for (let i = 0; i < pdfImagePaths.length; i++) {
+                const currentPage = i + 1;
+                const totalPages = pdfImagePaths.length;
+
+                addConsoleLog(`🔍 Processing page ${currentPage}/${totalPages} (${Math.round((currentPage / totalPages) * 100)}%)`);
+
+                // Update progress for enhancement step
+                const enhanceStep = 2 + (i * 2) + 1;
+                updateProgress(enhanceStep, totalSteps, `🔧 Enhancing page ${currentPage}/${totalPages}`, {
+                    totalPages,
+                    currentPage,
+                    totalCharacters: extractedText.length,
+                    phase: 'enhancing'
+                });
+
+                addConsoleLog(`📝 Enhancing image: page-${currentPage}.png`);
+                const enhancedImagePath = await enhanceImageForOCR(pdfImagePaths[i]);
+
+                // Update progress for OCR step
+                const ocrStep = 2 + (i * 2) + 2;
+                updateProgress(ocrStep, totalSteps, `🤖 Running OCR on page ${currentPage}/${totalPages}`, {
+                    totalPages,
+                    currentPage,
+                    totalCharacters: extractedText.length,
+                    phase: 'ocr'
+                });
+
+                addConsoleLog(`🤖 Running OCR on page ${currentPage} with Gemini ${mode === 'structured' ? '2.5-Pro' : '2.5-Flash'}`);
+                const pageText = await processWithGemini(enhancedImagePath, apiKey, mode);
+
+                addConsoleLog(`✅ Page ${currentPage} processed - ${pageText.length} characters extracted`);
+
+                if (mode === 'structured') {
+                    extractedText += `\n\n## Page ${currentPage}\n\n${pageText}`;
+                } else {
+                    extractedText += `\n\n--- Page ${currentPage} ---\n\n${pageText}`;
+                }
+
+                // Update progress with completed page info
+                updateProgress(ocrStep, totalSteps, `✅ Page ${currentPage}/${totalPages} completed - ${pageText.length} chars`, {
+                    totalPages,
+                    currentPage,
+                    totalCharacters: extractedText.length,
+                    pageCharacters: pageText.length,
+                    phase: 'completed'
+                });
+
+                addConsoleLog(`📊 Total extracted so far: ${extractedText.length} characters`);
+
+                imagePaths.push(enhancedImagePath);
+            }
+
+            addConsoleLog('🧹 Cleaning up temporary files...');
+            // Clean up PDF image files
+            pdfImagePaths.forEach((imagePath, index) => {
+                try {
+                    if (fs.existsSync(imagePath)) {
+                        fs.unlinkSync(imagePath);
+                        addConsoleLog(`🗑️  Cleaned up page-${index + 1}.png`);
+                    }
+                } catch (error) {
+                    addConsoleLog(`⚠️  Cleanup warning: ${error.message}`);
+                }
+            });
+
+        } else {
+            // Handle regular image files
+            addConsoleLog('🖼️  Processing single image file...');
+            addConsoleLog(`📄 File: ${req.file.originalname}`);
+            addConsoleLog(`📊 Size: ${(req.file.size / 1024).toFixed(2)} KB`);
+
+            updateProgress(1, 3, '🔧 Enhancing image for better OCR...', {
+                totalPages: 1,
+                currentPage: 1,
+                totalCharacters: 0,
+                phase: 'enhancing'
+            });
+            const enhancedImagePath = await enhanceImageForOCR(req.file.path);
+
+            updateProgress(2, 3, `🤖 Running OCR with Gemini ${mode === 'structured' ? '2.5-Pro' : '2.5-Flash'}...`, {
+                totalPages: 1,
+                currentPage: 1,
+                totalCharacters: 0,
+                phase: 'ocr'
+            });
+            extractedText = await processWithGemini(enhancedImagePath, apiKey, mode);
+
+            updateProgress(3, 3, `✅ OCR completed - ${extractedText.length} characters extracted`, {
+                totalPages: 1,
+                currentPage: 1,
+                totalCharacters: extractedText.length,
+                pageCharacters: extractedText.length,
+                phase: 'completed'
+            });
+            addConsoleLog(`✅ OCR completed - ${extractedText.length} characters extracted`);
+            imagePaths.push(enhancedImagePath);
+        }
+
+        // Generate all formats
+        const formats = generateFormats(extractedText, req.file.originalname, mode);
+
+        // Comprehensive cleanup of all temporary files
+        const filesToCleanup = [req.file.path, ...imagePaths];
+        let cleanedFiles = 0;
+
+        filesToCleanup.forEach(filePath => {
+            if (filePath && fs.existsSync(filePath)) {
+                try {
+                    fs.unlinkSync(filePath);
+                    cleanedFiles++;
+                    addConsoleLog(`🗑️  Cleaned up: ${path.basename(filePath)}`);
+                } catch (error) {
+                    addConsoleLog(`⚠️  Cleanup warning for ${path.basename(filePath)}: ${error.message}`);
+                }
+            }
+        });
+
+        addConsoleLog(`✅ Cleanup complete: ${cleanedFiles} files removed`);
+
+        // Final progress update
+        const finalProgress = progressTracking.get(sessionId);
+        if (finalProgress) {
+            updateProgress(finalProgress.total, finalProgress.total, '✅ Processing complete!');
+        }
+
+        // Return success response
+        res.json({
+            success: true,
+            sessionId: sessionId,
+            data: {
+                fileName: req.file.originalname,
+                fileSize: req.file.size,
+                processingMode: mode,
+                extractedText: extractedText,
+                formats: formats,
+                metadata: {
+                    characterCount: extractedText.length,
+                    wordCount: extractedText.split(/\s+/).filter(word => word.length > 0).length,
+                    lineCount: extractedText.split('\n').length,
+                    processedAt: new Date().toISOString()
+                }
+            }
+        });
+
+        // Clean up progress tracking and console logs after a delay
+        setTimeout(() => {
+            progressTracking.delete(sessionId);
+            consoleLogs.delete(sessionId);
+        }, 30000); // Clean up after 30 seconds
+
+    } catch (error) {
+        console.error('OCR processing error:', error);
+
+        // Comprehensive cleanup on error
+        const filesToCleanup = [];
+        if (req.file && req.file.path) filesToCleanup.push(req.file.path);
+        if (imagePaths && imagePaths.length > 0) filesToCleanup.push(...imagePaths);
+
+        let cleanedFiles = 0;
+        filesToCleanup.forEach(filePath => {
+            if (filePath && fs.existsSync(filePath)) {
+                try {
+                    fs.unlinkSync(filePath);
+                    cleanedFiles++;
+                    console.log(`🗑️  Error cleanup: ${path.basename(filePath)}`);
+                } catch (cleanupError) {
+                    console.warn(`⚠️  Error cleanup warning for ${path.basename(filePath)}:`, cleanupError.message);
+                }
+            }
+        });
+
+        if (cleanedFiles > 0) {
+            console.log(`✅ Error cleanup complete: ${cleanedFiles} files removed`);
+        }
+
+        res.status(500).json({
+            success: false,
+            error: error.message || 'Internal server error during OCR processing'
+        });
+    }
+});
+
+// Root endpoint
+app.get('/', (req, res) => {
+    res.json({
+        success: true,
+        message: '🌙 Luna OCR Backend API',
+        version: '1.0.0',
+        endpoints: {
+            health: '/api/health',
+            ocr: '/api/ocr (POST)'
+        },
+        status: 'Running',
+        port: PORT,
+        timestamp: new Date().toISOString()
+    });
+});
+
+// Health check endpoint
+app.get('/api/health', (req, res) => {
+    res.json({
+        success: true,
+        message: 'Luna OCR Backend is running!',
+        hasApiKey: !!GEMINI_API_KEY,
+        requiresUserApiKey: !GEMINI_API_KEY,
+        timestamp: new Date().toISOString()
+    });
+});
+
+// Manual cleanup endpoint
+app.post('/api/cleanup', (req, res) => {
+    try {
+        console.log('🧹 Manual cleanup requested...');
+        cleanupTempFiles();
+
+        res.json({
+            success: true,
+            message: 'Cleanup completed successfully',
+            timestamp: new Date().toISOString()
+        });
+    } catch (error) {
+        console.error('Manual cleanup error:', error);
+        res.status(500).json({
+            success: false,
+            error: 'Cleanup failed: ' + error.message
+        });
+    }
+});
+
+// Error handling middleware
+app.use((error, req, res, next) => {
+    if (error instanceof multer.MulterError) {
+        if (error.code === 'LIMIT_FILE_SIZE') {
+            return res.status(400).json({
+                success: false,
+                error: 'File too large. Maximum size is 10MB.'
+            });
+        }
+    }
+
+    console.error('Unhandled error:', error);
+    res.status(500).json({
+        success: false,
+        error: 'Internal server error'
+    });
+});
+
+// Graceful shutdown cleanup
+process.on('SIGINT', () => {
+    console.log('\n🛑 Received SIGINT, cleaning up before shutdown...');
+    cleanupTempFiles();
+    console.log('� LuRna OCR Backend shutting down gracefully');
+    process.exit(0);
+});
+
+process.on('SIGTERM', () => {
+    console.log('\n🛑 Received SIGTERM, cleaning up before shutdown...');
+    cleanupTempFiles();
+    console.log('👋 Luna OCR Backend shutting down gracefully');
+    process.exit(0);
+});
+
+// Start server
+app.listen(PORT, () => {
+    console.log(`🚀 Luna OCR Backend running on port ${PORT}`);
+    console.log(`📡 Health check: http://localhost:${PORT}/api/health`);
+    console.log(`🔍 OCR endpoint: http://localhost:${PORT}/api/ocr`);
+    console.log(`🧹 Cleanup endpoint: http://localhost:${PORT}/api/cleanup`);
+    console.log(`⏰ Automatic cleanup runs every 15 minutes`);
+});
+
+module.exports = app;

src/App.js

@@ -0,0 +1,420 @@
+import React, { useState, useCallback, useRef, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useDropzone } from 'react-dropzone';
+import FlowingMenu from './components/FlowingMenu';
+import FileUploader from './components/FileUploader';
+import PreviewPanel from './components/PreviewPanel';
+import ResultsPanel from './components/ResultsPanel';
+import Orb from './components/Orb';
+import TrueFocus from './components/TrueFocus';
+import LoadingScreen from './components/LoadingScreen';
+import ProcessingProgress from './components/ProcessingProgress';
+import ApiKeyEncryption from './utils/encryption';
+import './index.css';
+
+function App() {
+  const [apiKey, setApiKey] = useState(() => {
+    // Load encrypted API key from localStorage on initialization
+    return ApiKeyEncryption.retrieveApiKey() || '';
+  });
+  
+  // Handle API key changes and save encrypted to localStorage
+  const handleApiKeyChange = (newApiKey) => {
+    setApiKey(newApiKey);
+    
+    // Store encrypted API key
+    if (newApiKey.trim()) {
+      ApiKeyEncryption.storeApiKey(newApiKey);
+      console.log('🔐 API key encrypted and stored securely');
+    } else {
+      ApiKeyEncryption.clearApiKey();
+      console.log('🗑️ Encrypted API key cleared');
+    }
+  };
+  
+  const [uploadedFile, setUploadedFile] = useState(null);
+  const [extractedText, setExtractedText] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [processingProgress, setProcessingProgress] = useState({ current: 0, total: 0, status: '', fileName: '' });
+  const [processingMode, setProcessingMode] = useState('standard');
+  const [activeTab, setActiveTab] = useState('upload');
+  const [previewMode, setPreviewMode] = useState('text');
+  const [showLoading, setShowLoading] = useState(true);
+  const fileInputRef = useRef(null);
+
+  // Check if server has API key configured
+  const [serverHasApiKey, setServerHasApiKey] = useState(false);
+
+  // Migrate old unencrypted API key to encrypted storage
+  useEffect(() => {
+    const migrateOldApiKey = () => {
+      const oldApiKey = localStorage.getItem('gemini-api-key');
+      if (oldApiKey && !ApiKeyEncryption.retrieveApiKey()) {
+        console.log('🔄 Migrating old API key to encrypted storage...');
+        ApiKeyEncryption.storeApiKey(oldApiKey);
+        localStorage.removeItem('gemini-api-key'); // Remove old unencrypted key
+        setApiKey(oldApiKey);
+        console.log('✅ API key migration completed');
+      }
+    };
+    
+    migrateOldApiKey();
+  }, []);
+
+  // Cleanup temp files on app load/reload and check server API key
+  useEffect(() => {
+    const initializeApp = async () => {
+      try {
+        // Check if server has API key configured
+        const healthResponse = await fetch('http://localhost:3002/api/health');
+        if (healthResponse.ok) {
+          const healthData = await healthResponse.json();
+          setServerHasApiKey(healthData.hasApiKey || false);
+        }
+
+        // Cleanup temp files
+        await fetch('http://localhost:3002/api/cleanup', { method: 'POST' });
+        console.log('✅ Cleanup completed on app load');
+      } catch (error) {
+        console.log('⚠️ App initialization failed (server might be starting):', error.message);
+      }
+    };
+    
+    // Run initialization after a short delay to ensure server is ready
+    setTimeout(initializeApp, 2000);
+  }, []);
+
+  const menuItems = [
+    { id: 'upload', label: 'Upload', icon: '↑' },
+    { id: 'preview', label: 'Preview', icon: '○' },
+    { id: 'results', label: 'RESULTS', icon: '↓' }
+  ];
+
+  const onDrop = useCallback(async (acceptedFiles) => {
+    const file = acceptedFiles[0];
+    if (file) {
+      // Trigger cleanup before processing new file
+      try {
+        await fetch('http://localhost:3002/api/cleanup', { method: 'POST' });
+        console.log('✅ Pre-upload cleanup completed');
+      } catch (error) {
+        console.log('⚠️ Pre-upload cleanup failed:', error.message);
+      }
+      
+      setUploadedFile(file);
+      setActiveTab('preview');
+    }
+  }, []);
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: {
+      'image/*': ['.png', '.jpg', '.jpeg'],
+      'application/pdf': ['.pdf'],
+      'text/html': ['.html', '.htm']
+    },
+    multiple: false
+  });
+
+  const handlePaste = useCallback((e) => {
+    const items = e.clipboardData?.items;
+    if (items) {
+      for (let item of items) {
+        if (item.type.indexOf('image') !== -1) {
+          const file = item.getAsFile();
+          if (file) {
+            setUploadedFile(file);
+            setActiveTab('preview');
+          }
+        }
+      }
+    }
+  }, []);
+
+  const handleFileSelect = () => {
+    fileInputRef.current?.click();
+  };
+
+  const handleFileChange = (e) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      setUploadedFile(file);
+      setActiveTab('preview');
+    }
+  };
+
+  const processFile = async () => {
+    if (!uploadedFile || !apiKey) return;
+
+    setIsProcessing(true);
+    
+    // Initialize progress
+    setProcessingProgress({
+      current: 0,
+      total: 1,
+      status: '🔄 Initializing...',
+      fileName: uploadedFile.name
+    });
+    
+    let progressInterval = null;
+    
+    try {
+      // Create FormData for file upload
+      const formData = new FormData();
+      formData.append('file', uploadedFile);
+      formData.append('apiKey', apiKey);
+      formData.append('mode', processingMode);
+
+      console.log('Processing file:', uploadedFile.name, 'Mode:', processingMode);
+
+      // Start the OCR request
+      const ocrPromise = fetch('http://localhost:3002/api/ocr', {
+        method: 'POST',
+        body: formData,
+      });
+
+      // Start progress polling immediately
+      progressInterval = setInterval(async () => {
+          try {
+            // We'll get the sessionId from the response, but for now poll a generic endpoint
+            // In a real implementation, you'd start polling after getting the sessionId
+            const progressResponse = await fetch(`http://localhost:3002/api/progress-latest`);
+            if (progressResponse.ok) {
+              const progressData = await progressResponse.json();
+              // Progress data received and processed
+              if (progressData.current > 0) {
+                setProcessingProgress({
+                  current: progressData.current,
+                  total: progressData.total,
+                  status: progressData.status,
+                  fileName: progressData.fileName || uploadedFile.name,
+                  totalPages: progressData.totalPages || 1,
+                  currentPage: progressData.currentPage || 1,
+                  totalCharacters: progressData.totalCharacters || 0,
+                  pageCharacters: progressData.pageCharacters || 0,
+                  phase: progressData.phase || 'processing',
+                  consoleLogs: progressData.consoleLogs || []
+                });
+              }
+            }
+          } catch (error) {
+            // Ignore progress polling errors
+            console.log('Progress polling error (ignored):', error.message);
+          }
+        }, 1000); // Poll every 1 second to reduce spam
+
+      // Wait for OCR to complete
+      const response = await ocrPromise;
+      const result = await response.json();
+
+      // Clear progress polling
+      if (progressInterval) {
+        clearInterval(progressInterval);
+        progressInterval = null;
+      }
+
+      if (result.success) {
+        // Final progress update
+        setProcessingProgress(prev => ({
+          ...prev,
+          current: prev.total,
+          status: '✅ Processing complete!'
+        }));
+        
+        await new Promise(resolve => setTimeout(resolve, 500));
+        
+        // Use the extracted text from Gemini
+        setExtractedText(result.data.extractedText);
+        setActiveTab('results');
+        
+        console.log('✅ OCR Success:', {
+          fileName: result.data.fileName,
+          characters: result.data.metadata.characterCount,
+          words: result.data.metadata.wordCount,
+          mode: result.data.processingMode
+        });
+      } else {
+        console.error('❌ OCR Error:', result.error);
+        alert(`OCR Error: ${result.error}`);
+      }
+    } catch (error) {
+      console.error('❌ Network Error:', error);
+      
+      // Clear progress polling on error
+      if (progressInterval) {
+        clearInterval(progressInterval);
+        progressInterval = null;
+      }
+      
+      // Check if backend is running
+      if (error.message.includes('fetch')) {
+        alert(`Network Error: Cannot connect to OCR backend. 
+
+Please make sure:
+1. Backend server is running on port 3002
+2. Run: cd server && npm install && npm start
+3. Check console for any backend errors
+4. Visit http://localhost:3002 to verify backend is running
+
+Error: ${error.message}`);
+      } else {
+        alert(`Processing Error: ${error.message}`);
+      }
+    } finally {
+      // Clean up
+      if (progressInterval) {
+        clearInterval(progressInterval);
+      }
+      setIsProcessing(false);
+      setProcessingProgress({ current: 0, total: 0, status: '', fileName: '' });
+    }
+  };
+
+  return (
+    <div className="app" onPaste={handlePaste}>
+      {/* Loading Screen */}
+      {showLoading && (
+        <LoadingScreen onComplete={() => setShowLoading(false)} />
+      )}
+
+      {/* Giant Central Orb - Fades in after loading */}
+      <div className={`giant-orb-background ${!showLoading ? 'loaded' : ''}`}>
+        <div className="giant-orb-container">
+          <Orb hue={0} hoverIntensity={0.5} rotateOnHover={true} forceHoverState={false} />
+        </div>
+      </div>
+
+      <div className="glass-container">
+        <header className="app-header">
+          <motion.div
+            className="logo"
+            initial={{ opacity: 0, y: -20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <TrueFocus
+              sentence="Luna OCR"
+              manualMode={true}
+              blurAmount={8.5}
+              borderColor="#ffffff"
+              glowColor="rgba(255, 255, 255, 0.8)"
+              animationDuration={0.5}
+              pauseBetweenAnimations={2}
+            />
+          </motion.div>
+
+          <motion.div
+            className="api-key-input"
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+          >
+            {!serverHasApiKey && (
+              <div className="api-key-container">
+                <input
+                  type="password"
+                  placeholder={apiKey ? "API Key loaded from storage" : "Enter Google API Key..."}
+                  value={apiKey}
+                  onChange={(e) => handleApiKeyChange(e.target.value)}
+                  className="glass-input"
+                />
+                {apiKey && (
+                  <button
+                    type="button"
+                    onClick={() => handleApiKeyChange('')}
+                    className="clear-api-key-btn"
+                    title="Clear saved API key"
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+            )}
+            
+            {serverHasApiKey && (
+              <div className="server-api-notice">
+                <p>🔒 API key configured on server - no user key required</p>
+              </div>
+            )}
+          </motion.div>
+        </header>
+
+        <FlowingMenu
+          items={menuItems}
+          activeItem={activeTab}
+          onItemClick={setActiveTab}
+        />
+
+        <main className="app-main">
+          <AnimatePresence mode="wait">
+            {activeTab === 'upload' && (
+              <motion.div
+                key="upload"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                className="tab-content"
+              >
+                <FileUploader
+                  getRootProps={getRootProps}
+                  getInputProps={getInputProps}
+                  isDragActive={isDragActive}
+                  onFileSelect={handleFileSelect}
+                  fileInputRef={fileInputRef}
+                  onFileChange={handleFileChange}
+                />
+              </motion.div>
+            )}
+
+
+
+            {activeTab === 'preview' && uploadedFile && (
+              <motion.div
+                key="preview"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                className="tab-content"
+              >
+                <PreviewPanel
+                  file={uploadedFile}
+                  processingMode={processingMode}
+                  onModeChange={setProcessingMode}
+                  onProcess={processFile}
+                  isProcessing={isProcessing}
+                  apiKey={apiKey}
+                />
+              </motion.div>
+            )}
+
+            {activeTab === 'results' && extractedText && (
+              <motion.div
+                key="results"
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: 20 }}
+                className="tab-content"
+              >
+                <ResultsPanel
+                  text={extractedText}
+                  previewMode={previewMode}
+                  onPreviewModeChange={setPreviewMode}
+                  fileName={uploadedFile?.name}
+                />
+              </motion.div>
+            )}
+          </AnimatePresence>
+        </main>
+      </div>
+
+      {/* Processing Progress Overlay */}
+      <ProcessingProgress 
+        progress={processingProgress} 
+        isVisible={isProcessing} 
+      />
+
+    </div>
+  );
+}
+
+export default App;

src/components/AHoleLoader.css

@@ -0,0 +1,265 @@
+/* AHole Loader Styles - Adapted from CodePen */
+.a-hole-loader {
+  width: 100%;
+  height: 100%;
+  background: #141414;
+}
+
+a-hole {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+a-hole::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  display: block;
+  width: 150%;
+  height: 140%;
+  background: radial-gradient(ellipse at 50% 55%, transparent 10%, black 50%);
+  transform: translate3d(-50%, -50%, 0);
+  content: "";
+}
+
+a-hole::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 5;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at 50% 75%,
+      #a900ff 20%,
+      transparent 75%);
+  mix-blend-mode: overlay;
+  transform: translate3d(-50%, -50%, 0);
+  content: "";
+}
+
+@keyframes aura-glow {
+  0% {
+    background-position: 0 100%;
+  }
+
+  100% {
+    background-position: 0 300%;
+  }
+}
+
+a-hole .aura {
+  position: absolute;
+  top: -71.5%;
+  left: 50%;
+  z-index: 3;
+  width: 30%;
+  height: 140%;
+  background: linear-gradient(20deg,
+      #00f8f1,
+      #ffbd1e20 16.5%,
+      #fe848f 33%,
+      #fe848f20 49.5%,
+      #00f8f1 66%,
+      #00f8f160 85.5%,
+      #ffbd1e 100%) 0 100% / 100% 200%;
+  border-radius: 0 0 100% 100%;
+  filter: blur(50px);
+  mix-blend-mode: plus-lighter;
+  opacity: 0.75;
+  transform: translate3d(-50%, 0, 0);
+  animation: aura-glow 5s infinite linear;
+}
+
+a-hole .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(transparent,
+      transparent 1px,
+      white 1px,
+      white 2px);
+  mix-blend-mode: overlay;
+  opacity: 0.5;
+}
+
+a-hole canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* Loading Screen Integration */
+.loading-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #141414;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.loading-content {
+  position: relative;
+  z-index: 10;
+  text-align: center;
+  color: white;
+  margin-bottom: 40px;
+}
+
+.loading-title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 16px;
+  background: linear-gradient(45deg, #00f8f1, #a900ff, #fe848f);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: gradient-shift 3s ease-in-out infinite;
+}
+
+.loading-subtitle {
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+}
+
+.a-hole-container {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+@keyframes gradient-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Pixelated Loading Indicator - Bottom Left */
+.pixelated-loading {
+  position: absolute;
+  bottom: 40px;
+  left: 40px;
+  z-index: 15;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-family: 'Courier New', monospace;
+}
+
+.loading-dots {
+  display: flex;
+  gap: 4px;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  background: #00f8f1;
+  border-radius: 0;
+  /* Pixelated - no rounded corners */
+  animation: pixel-pulse 1.2s ease-in-out infinite;
+  box-shadow: 0 0 4px #00f8f1;
+  transition: background 0.3s ease, box-shadow 0.3s ease;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.3s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.6s;
+}
+
+.dot:nth-child(4) {
+  animation-delay: 0.9s;
+}
+
+.loading-text {
+  color: #00f8f1;
+  font-size: 12px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  text-shadow: 0 0 8px #00f8f1;
+  animation: text-flicker 2s ease-in-out infinite;
+  transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+
+@keyframes pixel-pulse {
+
+  0%,
+  100% {
+    opacity: 0.3;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 1;
+    transform: scale(1.2);
+  }
+}
+
+@keyframes text-flicker {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .loading-title {
+    font-size: 2rem;
+  }
+
+  .loading-subtitle {
+    font-size: 0.9rem;
+  }
+
+  .pixelated-loading {
+    bottom: 20px;
+    left: 20px;
+  }
+
+  .dot {
+    width: 6px;
+    height: 6px;
+  }
+
+  .loading-text {
+    font-size: 10px;
+  }
+}

src/components/AHoleLoader.js

@@ -0,0 +1,404 @@
+import React, { useEffect, useRef } from 'react';
+
+class AHole extends HTMLElement {
+  connectedCallback() {
+    // Elements
+    this.canvas = this.querySelector(".js-canvas");
+    this.ctx = this.canvas.getContext("2d");
+
+    this.discs = [];
+    this.lines = [];
+
+    // Init
+    this.setSize();
+    this.setDiscs();
+    this.setLines();
+    this.setParticles();
+
+    this.bindEvents();
+
+    // RAF
+    this.animationId = requestAnimationFrame(this.tick.bind(this));
+  }
+
+  disconnectedCallback() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+    }
+    window.removeEventListener("resize", this.onResize.bind(this));
+  }
+
+  bindEvents() {
+    this.onResize = this.onResize.bind(this);
+    window.addEventListener("resize", this.onResize);
+  }
+
+  onResize() {
+    this.setSize();
+    this.setDiscs();
+    this.setLines();
+    this.setParticles();
+  }
+
+  setSize() {
+    this.rect = this.getBoundingClientRect();
+
+    this.render = {
+      width: this.rect.width,
+      height: this.rect.height,
+      dpi: window.devicePixelRatio
+    };
+
+    this.canvas.width = this.render.width * this.render.dpi;
+    this.canvas.height = this.render.height * this.render.dpi;
+  }
+
+  setDiscs() {
+    const { width, height } = this.rect;
+
+    this.discs = [];
+
+    this.startDisc = {
+      x: width * 0.5,
+      y: height * 0.45,
+      w: width * 0.75,
+      h: height * 0.7
+    };
+
+    this.endDisc = {
+      x: width * 0.5,
+      y: height * 0.95,
+      w: 0,
+      h: 0
+    };
+
+    const totalDiscs = 100;
+
+    let prevBottom = height;
+    this.clip = {};
+
+    for (let i = 0; i < totalDiscs; i++) {
+      const p = i / totalDiscs;
+
+      const disc = this.tweenDisc({
+        p
+      });
+
+      const bottom = disc.y + disc.h;
+
+      if (bottom <= prevBottom) {
+        this.clip = {
+          disc: { ...disc },
+          i
+        };
+      }
+
+      prevBottom = bottom;
+
+      this.discs.push(disc);
+    }
+
+    this.clip.path = new Path2D();
+    this.clip.path.ellipse(
+      this.clip.disc.x,
+      this.clip.disc.y,
+      this.clip.disc.w,
+      this.clip.disc.h,
+      0,
+      0,
+      Math.PI * 2
+    );
+    this.clip.path.rect(
+      this.clip.disc.x - this.clip.disc.w,
+      0,
+      this.clip.disc.w * 2,
+      this.clip.disc.y
+    );
+  }
+
+  setLines() {
+    const { width, height } = this.rect;
+
+    this.lines = [];
+
+    const totalLines = 100;
+    const linesAngle = (Math.PI * 2) / totalLines;
+
+    for (let i = 0; i < totalLines; i++) {
+      this.lines.push([]);
+    }
+
+    this.discs.forEach((disc) => {
+      for (let i = 0; i < totalLines; i++) {
+        const angle = i * linesAngle;
+
+        const p = {
+          x: disc.x + Math.cos(angle) * disc.w,
+          y: disc.y + Math.sin(angle) * disc.h
+        };
+
+        this.lines[i].push(p);
+      }
+    });
+
+    this.linesCanvas = new OffscreenCanvas(width, height);
+    const ctx = this.linesCanvas.getContext("2d");
+
+    this.lines.forEach((line) => {
+      ctx.save();
+
+      let lineIsIn = false;
+      line.forEach((p1, j) => {
+        if (j === 0) {
+          return;
+        }
+
+        const p0 = line[j - 1];
+
+        if (
+          !lineIsIn &&
+          (ctx.isPointInPath(this.clip.path, p1.x, p1.y) ||
+            ctx.isPointInStroke(this.clip.path, p1.x, p1.y))
+        ) {
+          lineIsIn = true;
+        } else if (lineIsIn) {
+          ctx.clip(this.clip.path);
+        }
+
+        ctx.beginPath();
+
+        ctx.moveTo(p0.x, p0.y);
+        ctx.lineTo(p1.x, p1.y);
+
+        ctx.strokeStyle = "#444";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+
+        ctx.closePath();
+      });
+
+      ctx.restore();
+    });
+
+    this.linesCtx = ctx;
+  }
+
+  setParticles() {
+    const { width, height } = this.rect;
+
+    this.particles = [];
+
+    this.particleArea = {
+      sw: this.clip.disc.w * 0.5,
+      ew: this.clip.disc.w * 2,
+      h: height * 0.85
+    };
+    this.particleArea.sx = (width - this.particleArea.sw) / 2;
+    this.particleArea.ex = (width - this.particleArea.ew) / 2;
+
+    const totalParticles = 100;
+
+    for (let i = 0; i < totalParticles; i++) {
+      const particle = this.initParticle(true);
+      this.particles.push(particle);
+    }
+  }
+
+  initParticle(start = false) {
+    const sx = this.particleArea.sx + this.particleArea.sw * Math.random();
+    const ex = this.particleArea.ex + this.particleArea.ew * Math.random();
+    const dx = ex - sx;
+    const y = start ? this.particleArea.h * Math.random() : this.particleArea.h;
+    const r = 0.5 + Math.random() * 4;
+    const vy = 0.5 + Math.random();
+
+    return {
+      x: sx,
+      sx,
+      dx,
+      y,
+      vy,
+      p: 0,
+      r,
+      c: `rgba(255, 255, 255, ${Math.random()})`
+    };
+  }
+
+  tweenValue(start, end, p, ease = false) {
+    const delta = end - start;
+    
+    // Simple easing functions
+    let easeFn;
+    if (ease === "inExpo") {
+      easeFn = (t) => t === 0 ? 0 : Math.pow(2, 10 * (t - 1));
+    } else {
+      easeFn = (t) => t; // linear
+    }
+
+    return start + delta * easeFn(p);
+  }
+
+  drawDiscs() {
+    const { ctx } = this;
+
+    ctx.strokeStyle = "#444";
+    ctx.lineWidth = 2;
+
+    // Outer disc
+    const outerDisc = this.startDisc;
+
+    ctx.beginPath();
+
+    ctx.ellipse(
+      outerDisc.x,
+      outerDisc.y,
+      outerDisc.w,
+      outerDisc.h,
+      0,
+      0,
+      Math.PI * 2
+    );
+    ctx.stroke();
+
+    ctx.closePath();
+
+    // Discs
+    this.discs.forEach((disc, i) => {
+      if (i % 5 !== 0) {
+        return;
+      }
+
+      if (disc.w < this.clip.disc.w - 5) {
+        ctx.save();
+        ctx.clip(this.clip.path);
+      }
+
+      ctx.beginPath();
+
+      ctx.ellipse(disc.x, disc.y, disc.w, disc.h, 0, 0, Math.PI * 2);
+      ctx.stroke();
+
+      ctx.closePath();
+
+      if (disc.w < this.clip.disc.w - 5) {
+        ctx.restore();
+      }
+    });
+  }
+
+  drawLines() {
+    const { ctx, linesCanvas } = this;
+    ctx.drawImage(linesCanvas, 0, 0);
+  }
+
+  drawParticles() {
+    const { ctx } = this;
+
+    ctx.save();
+    ctx.clip(this.clip.path);
+
+    this.particles.forEach((particle) => {
+      ctx.fillStyle = particle.c;
+      ctx.beginPath();
+      ctx.rect(particle.x, particle.y, particle.r, particle.r);
+      ctx.closePath();
+      ctx.fill();
+    });
+
+    ctx.restore();
+  }
+
+  moveDiscs() {
+    this.discs.forEach((disc) => {
+      disc.p = (disc.p + 0.001) % 1;
+      this.tweenDisc(disc);
+    });
+  }
+
+  moveParticles() {
+    this.particles.forEach((particle) => {
+      particle.p = 1 - particle.y / this.particleArea.h;
+      particle.x = particle.sx + particle.dx * particle.p;
+      particle.y -= particle.vy;
+
+      if (particle.y < 0) {
+        particle.y = this.initParticle().y;
+      }
+    });
+  }
+
+  tweenDisc(disc) {
+    disc.x = this.tweenValue(this.startDisc.x, this.endDisc.x, disc.p);
+    disc.y = this.tweenValue(
+      this.startDisc.y,
+      this.endDisc.y,
+      disc.p,
+      "inExpo"
+    );
+
+    disc.w = this.tweenValue(this.startDisc.w, this.endDisc.w, disc.p);
+    disc.h = this.tweenValue(this.startDisc.h, this.endDisc.h, disc.p);
+
+    return disc;
+  }
+
+  tick() {
+    const { ctx } = this;
+
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    ctx.save();
+    ctx.scale(this.render.dpi, this.render.dpi);
+
+    this.moveDiscs();
+    this.moveParticles();
+
+    this.drawDiscs();
+    this.drawLines();
+    this.drawParticles();
+
+    ctx.restore();
+
+    this.animationId = requestAnimationFrame(this.tick.bind(this));
+  }
+}
+
+// Define custom element
+if (!customElements.get('a-hole')) {
+  customElements.define("a-hole", AHole);
+}
+
+const AHoleLoader = ({ className = "", style = {} }) => {
+  const containerRef = useRef(null);
+
+  useEffect(() => {
+    // Force a resize event to ensure proper initialization
+    const timer = setTimeout(() => {
+      window.dispatchEvent(new Event('resize'));
+    }, 100);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <div 
+      ref={containerRef}
+      className={`a-hole-loader ${className}`}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '100%',
+        overflow: 'hidden',
+        ...style
+      }}
+    >
+      <a-hole>
+        <canvas className="js-canvas"></canvas>
+        <div className="aura"></div>
+        <div className="overlay"></div>
+      </a-hole>
+    </div>
+  );
+};
+
+export default AHoleLoader;

src/components/DocumentViewer.js

@@ -0,0 +1,552 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { 
+  FileText, Download, Eye, ZoomIn, ZoomOut, RotateCw, 
+  Maximize2, ArrowLeft, Settings, Printer, Share2 
+} from 'lucide-react';
+
+const DocumentViewer = ({ file, onBack }) => {
+  const [viewMode, setViewMode] = useState('preview');
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [documentUrl, setDocumentUrl] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const viewerRef = useRef(null);
+
+  useEffect(() => {
+    if (file) {
+      const url = URL.createObjectURL(file);
+      setDocumentUrl(url);
+      setIsLoading(false);
+      
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [file]);
+
+  const handleZoomIn = () => setZoom(prev => Math.min(prev + 0.25, 3));
+  const handleZoomOut = () => setZoom(prev => Math.max(prev - 0.25, 0.5));
+  const handleRotate = () => setRotation(prev => (prev + 90) % 360);
+  
+  const toggleFullscreen = async () => {
+    try {
+      if (!document.fullscreenElement) {
+        await viewerRef.current?.requestFullscreen();
+        setIsFullscreen(true);
+      } else {
+        await document.exitFullscreen();
+        setIsFullscreen(false);
+      }
+    } catch (error) {
+      setIsFullscreen(!isFullscreen);
+    }
+  };
+
+  const handleDownload = () => {
+    if (documentUrl) {
+      const a = document.createElement('a');
+      a.href = documentUrl;
+      a.download = file.name;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+    }
+  };
+
+  const renderPDFViewer = () => (
+    <div className="pdf-viewer-container">
+      <div className="pdf-embed-wrapper" style={{ 
+        transform: `scale(${zoom}) rotate(${rotation}deg)`,
+        transformOrigin: 'center center'
+      }}>
+        <embed
+          src={documentUrl}
+          type="application/pdf"
+          className="pdf-embed"
+          title={file.name}
+        />
+      </div>
+    </div>
+  );
+
+  const renderHTMLViewer = () => (
+    <div className="html-viewer-container">
+      <div className="html-content-wrapper" style={{ 
+        transform: `scale(${zoom}) rotate(${rotation}deg)`,
+        transformOrigin: 'center center'
+      }}>
+        <iframe
+          src={documentUrl}
+          className="html-iframe"
+          title={file.name}
+          sandbox="allow-same-origin allow-scripts"
+        />
+      </div>
+    </div>
+  );
+
+  if (!file) return null;
+
+  const isPDF = file.type === 'application/pdf';
+  const isHTML = file.type === 'text/html' || file.name.toLowerCase().endsWith('.html');
+
+  return (
+    <div className={`document-viewer ${isFullscreen ? 'fullscreen' : ''}`} ref={viewerRef}>
+      {/* Glassmorphism Background */}
+      <div className="viewer-background">
+        <div className="orb-background-container">
+          <div className="floating-orb orb-1"></div>
+          <div className="floating-orb orb-2"></div>
+          <div className="floating-orb orb-3"></div>
+        </div>
+      </div>
+
+      {/* Header Controls */}
+      <motion.header 
+        className="viewer-header glass-panel"
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+      >
+        <div className="header-left">
+          <motion.button
+            className="control-btn back-btn"
+            onClick={onBack}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <ArrowLeft size={18} />
+            Back
+          </motion.button>
+          
+          <div className="document-info">
+            <h2 className="document-title">{file.name}</h2>
+            <div className="document-meta">
+              <span className="format-badge">
+                {isPDF ? 'PDF' : 'HTML'}
+              </span>
+              <span className="file-size">
+                {(file.size / 1024 / 1024).toFixed(2)} MB
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <div className="header-controls">
+          <div className="zoom-controls glass-group">
+            <motion.button
+              className="control-btn"
+              onClick={handleZoomOut}
+              disabled={zoom <= 0.5}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <ZoomOut size={16} />
+            </motion.button>
+            <span className="zoom-display">{Math.round(zoom * 100)}%</span>
+            <motion.button
+              className="control-btn"
+              onClick={handleZoomIn}
+              disabled={zoom >= 3}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <ZoomIn size={16} />
+            </motion.button>
+          </div>
+
+          <motion.button
+            className="control-btn"
+            onClick={handleRotate}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <RotateCw size={16} />
+          </motion.button>
+
+          <motion.button
+            className="control-btn"
+            onClick={toggleFullscreen}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <Maximize2 size={16} />
+          </motion.button>
+
+          <motion.button
+            className="control-btn primary"
+            onClick={handleDownload}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+          >
+            <Download size={16} />
+            Download
+          </motion.button>
+        </div>
+      </motion.header>
+
+      {/* Document Content */}
+      <motion.main 
+        className="viewer-content glass-panel"
+        initial={{ opacity: 0, scale: 0.95 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.6, delay: 0.1 }}
+      >
+        <AnimatePresence mode="wait">
+          {isLoading ? (
+            <motion.div
+              key="loading"
+              className="loading-state"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              <div className="loading-spinner"></div>
+              <p>Loading document...</p>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="content"
+              className="document-content"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+            >
+              {isPDF ? renderPDFViewer() : isHTML ? renderHTMLViewer() : (
+                <div className="unsupported-format">
+                  <FileText size={48} />
+                  <p>Unsupported file format</p>
+                </div>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.main>
+
+      <style jsx>{`
+        .document-viewer {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100vw;
+          height: 100vh;
+          background: #0f0f23;
+          z-index: 1000;
+          display: flex;
+          flex-direction: column;
+          overflow: hidden;
+        }
+
+        .document-viewer.fullscreen {
+          z-index: 9999;
+        }
+
+        .viewer-background {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: -1;
+        }
+
+        .orb-background-container {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+
+        .floating-orb {
+          position: absolute;
+          border-radius: 50%;
+          filter: blur(80px);
+          opacity: 0.3;
+          animation: float 20s ease-in-out infinite;
+        }
+
+        .orb-1 {
+          top: 10%;
+          right: 20%;
+          width: 300px;
+          height: 300px;
+          background: linear-gradient(45deg, #4facfe, #8b5cf6);
+          animation-delay: 0s;
+        }
+
+        .orb-2 {
+          bottom: 20%;
+          left: 15%;
+          width: 250px;
+          height: 250px;
+          background: linear-gradient(45deg, #f093fb, #f5576c);
+          animation-delay: -7s;
+        }
+
+        .orb-3 {
+          top: 50%;
+          left: 50%;
+          width: 200px;
+          height: 200px;
+          background: linear-gradient(45deg, #06b6d4, #10b981);
+          animation-delay: -14s;
+        }
+
+        @keyframes float {
+          0%, 100% { transform: translate(0, 0) rotate(0deg); }
+          25% { transform: translate(-20px, -30px) rotate(90deg); }
+          50% { transform: translate(10px, -20px) rotate(180deg); }
+          75% { transform: translate(-10px, 10px) rotate(270deg); }
+        }
+
+        .viewer-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 16px 24px;
+          margin: 12px;
+          margin-bottom: 0;
+          border-radius: 16px;
+          backdrop-filter: blur(25px);
+          -webkit-backdrop-filter: blur(25px);
+          background: rgba(0, 0, 0, 0.2);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          flex-shrink: 0;
+        }
+
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+
+        .back-btn {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 8px 16px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          color: #ffffff;
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        }
+
+        .back-btn:hover {
+          background: rgba(255, 255, 255, 0.1);
+          border-color: rgba(79, 172, 254, 0.3);
+        }
+
+        .document-info {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .document-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #ffffff;
+          margin: 0;
+        }
+
+        .document-meta {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          font-size: 0.75rem;
+        }
+
+        .format-badge {
+          background: rgba(79, 172, 254, 0.2);
+          color: #4facfe;
+          padding: 4px 12px;
+          border-radius: 6px;
+          font-weight: 500;
+          font-size: 0.75rem;
+          letter-spacing: 0.5px;
+        }
+
+        .file-size {
+          color: rgba(255, 255, 255, 0.6);
+        }
+
+        .header-controls {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .glass-group {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 4px 8px;
+        }
+
+        .control-btn {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          padding: 8px 12px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 6px;
+          color: rgba(255, 255, 255, 0.8);
+          font-size: 0.875rem;
+          cursor: pointer;
+          transition: all 0.3s ease;
+        }
+
+        .control-btn:hover:not(:disabled) {
+          background: rgba(255, 255, 255, 0.1);
+          color: #ffffff;
+          border-color: rgba(79, 172, 254, 0.3);
+        }
+
+        .control-btn:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .control-btn.primary {
+          background: linear-gradient(135deg, #4facfe, #8b5cf6);
+          border-color: rgba(79, 172, 254, 0.3);
+          color: #ffffff;
+        }
+
+        .control-btn.primary:hover {
+          box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
+        }
+
+        .zoom-display {
+          font-size: 0.75rem;
+          color: rgba(255, 255, 255, 0.8);
+          min-width: 40px;
+          text-align: center;
+        }
+
+        .viewer-content {
+          flex: 1;
+          margin: 12px;
+          margin-top: 0;
+          border-radius: 16px;
+          backdrop-filter: blur(25px);
+          -webkit-backdrop-filter: blur(25px);
+          background: rgba(0, 0, 0, 0.1);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          overflow: hidden;
+          position: relative;
+        }
+
+        .document-content {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: auto;
+        }
+
+        .pdf-viewer-container,
+        .html-viewer-container {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 20px;
+        }
+
+        .pdf-embed-wrapper,
+        .html-content-wrapper {
+          transition: transform 0.3s ease;
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+
+        .pdf-embed {
+          width: 80vw;
+          height: 80vh;
+          border: none;
+          border-radius: 12px;
+          background: rgba(255, 255, 255, 0.95);
+        }
+
+        .html-iframe {
+          width: 80vw;
+          height: 80vh;
+          border: none;
+          border-radius: 12px;
+          background: rgba(255, 255, 255, 0.95);
+        }
+
+        .loading-state {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 16px;
+          color: rgba(255, 255, 255, 0.8);
+        }
+
+        .loading-spinner {
+          width: 40px;
+          height: 40px;
+          border: 3px solid rgba(79, 172, 254, 0.3);
+          border-top: 3px solid #4facfe;
+          border-radius: 50%;
+          animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }
+
+        .unsupported-format {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 16px;
+          color: rgba(255, 255, 255, 0.6);
+        }
+
+        @media (max-width: 768px) {
+          .viewer-header {
+            flex-direction: column;
+            gap: 16px;
+            padding: 16px;
+          }
+
+          .header-left {
+            width: 100%;
+            justify-content: space-between;
+          }
+
+          .header-controls {
+            width: 100%;
+            justify-content: center;
+            flex-wrap: wrap;
+          }
+
+          .pdf-embed,
+          .html-iframe {
+            width: 95vw;
+            height: 70vh;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default DocumentViewer;

src/components/FileUploader.js

@@ -0,0 +1,342 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Upload, FileText, Clipboard } from 'lucide-react';
+
+const FileUploader = ({
+  getRootProps,
+  getInputProps,
+  isDragActive,
+  onFileSelect,
+  fileInputRef,
+  onFileChange
+}) => {
+
+  const uploadMethods = [
+    {
+      id: 'drag',
+      icon: <Upload size={24} />,
+      title: 'Drag & Drop',
+      description: 'Drag files directly here',
+      action: 'drag-drop'
+    },
+    {
+      id: 'browse',
+      icon: <FileText size={24} />,
+      title: 'Browse Files',
+      description: 'Select from computer',
+      action: 'browse'
+    }
+  ];
+
+  const handleMethodClick = (method) => {
+    if (method.action === 'browse') {
+      onFileSelect();
+    }
+  };
+
+  return (
+    <div className="file-uploader">
+      <motion.div
+        className={`upload-zone glass-panel ${isDragActive ? 'drag-active' : ''}`}
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.5 }}
+        onDragOver={(e) => e.preventDefault()}
+        onDrop={(e) => {
+          e.preventDefault();
+          const files = e.dataTransfer.files;
+          if (files.length > 0) {
+            const file = files[0];
+            onFileChange({ target: { files: [file] } });
+          }
+        }}
+      >
+        <input {...getInputProps()} />
+        <input
+          ref={fileInputRef}
+          type="file"
+          onChange={onFileChange}
+          accept=".pdf,.png,.jpg,.jpeg,.html,.htm"
+          style={{ display: 'none' }}
+        />
+
+        <div className="upload-content">
+          <div className="upload-text">
+            <h3>{isDragActive ? 'Drop files here' : 'Document Processing'}</h3>
+            <p>{isDragActive ? 'Release to process your document' : 'Drag & drop files or click to browse'}</p>
+          </div>
+
+          <div className="upload-actions">
+            <div className="button-group">
+              <motion.button
+                className="primary-upload-btn"
+                onClick={onFileSelect}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+              >
+                <Upload size={20} />
+                Upload Files
+              </motion.button>
+
+              <div className="button-divider"></div>
+
+              <motion.button
+                className="paste-btn"
+                onClick={() => {
+                  // Trigger paste functionality
+                  document.execCommand('paste');
+                }}
+                whileHover={{ scale: 1.05 }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.1 }}
+              >
+                <Clipboard size={18} />
+                Paste Image
+              </motion.button>
+            </div>
+          </div>
+
+          <div className="supported-formats">
+            <p>Supported: PDF, HTML, PNG, JPG, JPEG</p>
+          </div>
+        </div>
+      </motion.div>
+
+      <style jsx>{`
+        .file-uploader {
+          width: 100%;
+          height: 100%;
+        }
+
+        .upload-zone {
+          min-height: 300px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+          cursor: default;
+        }
+
+        .upload-zone.drag-active {
+          border-color: var(--accent-primary);
+          background: rgba(99, 102, 241, 0.05);
+          transform: scale(1.02);
+        }
+
+        .upload-content {
+          text-align: center;
+          width: 100%;
+          max-width: 400px;
+        }
+        
+        .upload-actions {
+          margin: 32px 0;
+        }
+        
+        .button-group {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          justify-content: center;
+          align-items: center;
+        }
+        
+        .button-divider {
+          width: 60px;
+          height: 1px;
+          background: rgba(255, 255, 255, 0.15);
+        }
+        
+        .primary-upload-btn {
+          background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
+          border: none;
+          border-radius: 12px;
+          padding: 18px 40px;
+          color: white;
+          font-size: 1.1rem;
+          font-weight: 600;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 14px;
+          box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4);
+          transition: all 0.3s ease;
+        }
+        
+        .primary-upload-btn:hover {
+          box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6);
+          transform: translateY(-2px);
+        }
+        
+        .paste-btn {
+          background: transparent;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 12px 20px;
+          color: rgba(255, 255, 255, 0.6);
+          font-size: 0.85rem;
+          font-weight: 400;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          transition: all 0.3s ease;
+        }
+        
+        .paste-btn:hover {
+          background: rgba(255, 255, 255, 0.05);
+          border-color: rgba(255, 255, 255, 0.15);
+          color: rgba(255, 255, 255, 0.8);
+        }
+        
+        .upload-divider {
+          margin: 24px 0;
+          position: relative;
+          color: rgba(255, 255, 255, 0.5);
+          font-size: 0.875rem;
+        }
+        
+        .upload-divider::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 0;
+          right: 0;
+          height: 1px;
+          background: rgba(255, 255, 255, 0.1);
+          z-index: 0;
+        }
+        
+        .upload-divider span {
+          background: rgba(0, 0, 0, 0.3);
+          padding: 0 16px;
+          position: relative;
+          z-index: 1;
+        }
+        
+        .secondary-upload-btn {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 12px 20px;
+          color: rgba(255, 255, 255, 0.7);
+          font-size: 0.875rem;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          margin: 0 auto;
+          transition: all 0.3s ease;
+        }
+        
+        .secondary-upload-btn:hover {
+          background: rgba(255, 255, 255, 0.08);
+          color: rgba(255, 255, 255, 0.9);
+          border-color: rgba(255, 255, 255, 0.2);
+        }
+        
+        .secondary-upload-btn.disabled {
+          opacity: 0.4;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
+        
+        .supported-formats {
+          margin-top: 24px;
+        }
+        
+        .supported-formats p {
+          color: rgba(255, 255, 255, 0.4);
+          font-size: 0.75rem;
+          margin: 0;
+        }
+
+        .upload-icon {
+          margin-bottom: 16px;
+          color: var(--accent-primary);
+        }
+
+        .drag-indicator {
+          font-size: 3rem;
+          filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.5));
+        }
+
+        .upload-svg {
+          filter: drop-shadow(0 0 10px rgba(99, 102, 241, 0.3));
+        }
+
+        .upload-text h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+          margin-bottom: 8px;
+          color: var(--text-primary);
+        }
+
+        .upload-text p {
+          color: var(--text-secondary);
+          font-size: 0.875rem;
+          max-width: 400px;
+          margin: 0 auto;
+        }
+
+        .upload-methods {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          gap: 16px;
+          width: 100%;
+          max-width: 800px;
+        }
+
+        .upload-method {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .method-icon {
+          color: var(--accent-secondary);
+          flex-shrink: 0;
+        }
+
+        .method-content h4 {
+          font-size: 0.875rem;
+          font-weight: 600;
+          margin-bottom: 4px;
+          color: var(--text-primary);
+        }
+
+        .method-content p {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        @media (max-width: 768px) {
+          .upload-methods {
+            grid-template-columns: 1fr;
+          }
+          
+          .upload-method {
+            justify-content: center;
+            text-align: center;
+            flex-direction: column;
+            gap: 8px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+export default FileUploader;

src/components/FlowingMenu.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { gsap } from 'gsap';
+
+function FlowingMenu({ items = [], activeItem, onItemClick }) {
+  return (
+    <div className="flowing-menu-container">
+      <nav className="flowing-menu-nav">
+        {items.map((item, idx) => (
+          <MenuItem
+            key={item.id}
+            link="#"
+            text={item.label}
+            image={`https://picsum.photos/600/400?random=${idx + 1}`}
+            isActive={activeItem === item.id}
+            onClick={() => onItemClick(item.id)}
+            icon={item.icon}
+          />
+        ))}
+      </nav>
+    </div>
+  );
+}
+
+function MenuItem({ link, text, image, isActive, onClick, icon }) {
+  const itemRef = React.useRef(null);
+  const marqueeRef = React.useRef(null);
+  const marqueeInnerRef = React.useRef(null);
+
+  const animationDefaults = { duration: 0.6, ease: 'expo' };
+
+  const findClosestEdge = (mouseX, mouseY, width, height) => {
+    const topEdgeDist = (mouseX - width / 2) ** 2 + mouseY ** 2;
+    const bottomEdgeDist = (mouseX - width / 2) ** 2 + (mouseY - height) ** 2;
+    return topEdgeDist < bottomEdgeDist ? 'top' : 'bottom';
+  };
+
+  const handleMouseEnter = (ev) => {
+    if (!itemRef.current || !marqueeRef.current || !marqueeInnerRef.current) return;
+
+    const rect = itemRef.current.getBoundingClientRect();
+    const edge = findClosestEdge(
+      ev.clientX - rect.left,
+      ev.clientY - rect.top,
+      rect.width,
+      rect.height
+    );
+
+    gsap.timeline({ defaults: animationDefaults })
+      .set(marqueeRef.current, { y: edge === 'top' ? '-101%' : '101%' })
+      .set(marqueeInnerRef.current, { y: edge === 'top' ? '101%' : '-101%' })
+      .to([marqueeRef.current, marqueeInnerRef.current], { y: '0%' });
+  };
+
+  const handleMouseLeave = (ev) => {
+    if (!itemRef.current || !marqueeRef.current || !marqueeInnerRef.current) return;
+
+    const rect = itemRef.current.getBoundingClientRect();
+    const edge = findClosestEdge(
+      ev.clientX - rect.left,
+      ev.clientY - rect.top,
+      rect.width,
+      rect.height
+    );
+
+    gsap.timeline({ defaults: animationDefaults })
+      .to(marqueeRef.current, { y: edge === 'top' ? '-101%' : '101%' })
+      .to(marqueeInnerRef.current, { y: edge === 'top' ? '101%' : '-101%' });
+  };
+
+  const repeatedMarqueeContent = [];
+
+  return (
+    <div className={`flowing-menu-item ${isActive ? 'active' : ''}`} ref={itemRef}>
+      <a
+        className="menu-item-link"
+        href={link}
+        onClick={(e) => {
+          e.preventDefault();
+          onClick();
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <span className="menu-icon">{icon}</span>
+        <span className="menu-text">{text}</span>
+      </a>
+      <div className="marquee-overlay" ref={marqueeRef}>
+        <div className="marquee-inner" ref={marqueeInnerRef}>
+          <div className="marquee-content">
+            {repeatedMarqueeContent}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default FlowingMenu;

src/components/LoadingScreen.js

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from 'react';
+import AHoleLoader from './AHoleLoader';
+import './AHoleLoader.css';
+
+const LoadingScreen = ({ onComplete }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    // Cycling loading messages and colors
+    const messages = [
+      { text: "LOADING...", color: "#00f8f1" },
+      { text: "MADE BY LUNA...", color: "#ff6b9d" },
+      { text: "OCR EXTRACTOR...", color: "#4facfe" },
+      { text: "LUNA POWERED...", color: "#a855f7" },
+      { text: "TEXT EXTRACTION...", color: "#10b981" }
+    ];
+    
+    let messageIndex = 0;
+    const textElement = document.getElementById('loading-text');
+    
+    const cycleMessages = () => {
+      if (textElement) {
+        const currentMessage = messages[messageIndex];
+        textElement.textContent = currentMessage.text;
+        textElement.style.color = currentMessage.color;
+        textElement.style.textShadow = `0 0 8px ${currentMessage.color}`;
+        
+        // Update dots color to match
+        const dots = document.querySelectorAll('.dot');
+        dots.forEach(dot => {
+          dot.style.background = currentMessage.color;
+          dot.style.boxShadow = `0 0 4px ${currentMessage.color}`;
+        });
+        
+        messageIndex = (messageIndex + 1) % messages.length;
+      }
+    };
+    
+    // Start cycling immediately
+    cycleMessages();
+    const messageTimer = setInterval(cycleMessages, 800);
+
+    // Auto-hide after 4 seconds
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(() => {
+        onComplete?.();
+      }, 500); // Wait for fade out animation
+    }, 4000);
+
+    return () => {
+      clearTimeout(timer);
+      clearInterval(messageTimer);
+    };
+  }, [onComplete]);
+
+  if (!isVisible) {
+    return (
+      <div 
+        className="loading-screen"
+        style={{
+          opacity: 0,
+          transition: 'opacity 0.5s ease',
+          pointerEvents: 'none'
+        }}
+      />
+    );
+  }
+
+  return (
+    <div className="loading-screen">
+      <div className="a-hole-container">
+        <AHoleLoader />
+      </div>
+      
+      {/* Pixelated loading indicator in bottom left */}
+      <div className="pixelated-loading">
+        <div className="loading-dots">
+          <div className="dot"></div>
+          <div className="dot"></div>
+          <div className="dot"></div>
+          <div className="dot"></div>
+        </div>
+        <span className="loading-text" id="loading-text">LOADING...</span>
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;

src/components/Orb.js

@@ -0,0 +1,300 @@
+import { useEffect, useRef } from "react";
+import { Renderer, Program, Mesh, Triangle, Vec3 } from "ogl";
+
+const vert = /* glsl */ `
+  precision highp float;
+  attribute vec2 position;
+  attribute vec2 uv;
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = vec4(position, 0.0, 1.0);
+  }
+`;
+
+const frag = /* glsl */ `
+    precision highp float;
+
+    uniform float iTime;
+    uniform vec3 iResolution;
+    uniform float hue;
+    uniform float hover;
+    uniform float rot;
+    uniform float hoverIntensity;
+    varying vec2 vUv;
+
+    vec3 rgb2yiq(vec3 c) {
+      float y = dot(c, vec3(0.299, 0.587, 0.114));
+      float i = dot(c, vec3(0.596, -0.274, -0.322));
+      float q = dot(c, vec3(0.211, -0.523, 0.312));
+      return vec3(y, i, q);
+    }
+    
+    vec3 yiq2rgb(vec3 c) {
+      float r = c.x + 0.956 * c.y + 0.621 * c.z;
+      float g = c.x - 0.272 * c.y - 0.647 * c.z;
+      float b = c.x - 1.106 * c.y + 1.703 * c.z;
+      return vec3(r, g, b);
+    }
+    
+    vec3 adjustHue(vec3 color, float hueDeg) {
+      float hueRad = hueDeg * 3.14159265 / 180.0;
+      vec3 yiq = rgb2yiq(color);
+      float cosA = cos(hueRad);
+      float sinA = sin(hueRad);
+      float i = yiq.y * cosA - yiq.z * sinA;
+      float q = yiq.y * sinA + yiq.z * cosA;
+      yiq.y = i;
+      yiq.z = q;
+      return yiq2rgb(yiq);
+    }
+
+    vec3 hash33(vec3 p3) {
+      p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+      p3 += dot(p3, p3.yxz + 19.19);
+      return -1.0 + 2.0 * fract(vec3(
+        p3.x + p3.y,
+        p3.x + p3.z,
+        p3.y + p3.z
+      ) * p3.zyx);
+    }
+
+    float snoise3(vec3 p) {
+      const float K1 = 0.333333333;
+      const float K2 = 0.166666667;
+      vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+      vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+      vec3 e = step(vec3(0.0), d0 - d0.yzx);
+      vec3 i1 = e * (1.0 - e.zxy);
+      vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+      vec3 d1 = d0 - (i1 - K2);
+      vec3 d2 = d0 - (i2 - K1);
+      vec3 d3 = d0 - 0.5;
+      vec4 h = max(0.6 - vec4(
+        dot(d0, d0),
+        dot(d1, d1),
+        dot(d2, d2),
+        dot(d3, d3)
+      ), 0.0);
+      vec4 n = h * h * h * h * vec4(
+        dot(d0, hash33(i)),
+        dot(d1, hash33(i + i1)),
+        dot(d2, hash33(i + i2)),
+        dot(d3, hash33(i + 1.0))
+      );
+      return dot(vec4(31.316), n);
+    }
+
+    vec4 extractAlpha(vec3 colorIn) {
+      float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+      return vec4(colorIn.rgb / (a + 1e-5), a);
+    }
+
+    const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+    const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+    const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+    const float innerRadius = 0.6;
+    const float noiseScale = 0.65;
+
+    float light1(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * attenuation);
+    }
+    float light2(float intensity, float attenuation, float dist) {
+      return intensity / (1.0 + dist * dist * attenuation);
+    }
+
+    vec4 draw(vec2 uv) {
+      vec3 color1 = adjustHue(baseColor1, hue);
+      vec3 color2 = adjustHue(baseColor2, hue);
+      vec3 color3 = adjustHue(baseColor3, hue);
+      
+      float ang = atan(uv.y, uv.x);
+      float len = length(uv);
+      float invLen = len > 0.0 ? 1.0 / len : 0.0;
+      
+      float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+      float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+      float d0 = distance(uv, (r0 * invLen) * uv);
+      float v0 = light1(1.0, 10.0, d0);
+      v0 *= smoothstep(r0 * 1.05, r0, len);
+      float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+      
+      float a = iTime * -1.0;
+      vec2 pos = vec2(cos(a), sin(a)) * r0;
+      float d = distance(uv, pos);
+      float v1 = light2(1.5, 5.0, d);
+      v1 *= light1(1.0, 50.0, d0);
+      
+      float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+      float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+      
+      vec3 col = mix(color1, color2, cl);
+      col = mix(color3, col, v0);
+      col = (col + v1) * v2 * v3;
+      col = clamp(col, 0.0, 1.0);
+      
+      return extractAlpha(col);
+    }
+
+    vec4 mainImage(vec2 fragCoord) {
+      vec2 center = iResolution.xy * 0.5;
+      float size = min(iResolution.x, iResolution.y);
+      vec2 uv = (fragCoord - center) / size * 2.0;
+      
+      float angle = rot;
+      float s = sin(angle);
+      float c = cos(angle);
+      uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+      
+      uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+      uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+      
+      return draw(uv);
+    }
+
+    void main() {
+      vec2 fragCoord = vUv * iResolution.xy;
+      vec4 col = mainImage(fragCoord);
+      gl_FragColor = vec4(col.rgb * col.a, col.a);
+    }
+  `;
+
+export default function Orb({
+  hue = 0,
+  hoverIntensity = 0.2,
+  rotateOnHover = true,
+  forceHoverState = false,
+}) {
+  const ctnDom = useRef(null);
+
+  useEffect(() => {
+    const container = ctnDom.current;
+    if (!container) return;
+
+    const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+    const gl = renderer.gl;
+    gl.clearColor(0, 0, 0, 0);
+    container.appendChild(gl.canvas);
+
+    const geometry = new Triangle(gl);
+    const program = new Program(gl, {
+      vertex: vert,
+      fragment: frag,
+      uniforms: {
+        iTime: { value: 0 },
+        iResolution: {
+          value: new Vec3(
+            gl.canvas.width,
+            gl.canvas.height,
+            gl.canvas.width / gl.canvas.height
+          ),
+        },
+        hue: { value: hue },
+        hover: { value: 0 },
+        rot: { value: 0 },
+        hoverIntensity: { value: hoverIntensity },
+      },
+    });
+
+    const mesh = new Mesh(gl, { geometry, program });
+
+    function resize() {
+      if (!container) return;
+      const dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      renderer.setSize(width * dpr, height * dpr);
+      gl.canvas.style.width = width + "px";
+      gl.canvas.style.height = height + "px";
+      program.uniforms.iResolution.value.set(
+        gl.canvas.width,
+        gl.canvas.height,
+        gl.canvas.width / gl.canvas.height
+      );
+    }
+    window.addEventListener("resize", resize);
+    resize();
+
+    let targetHover = 0;
+    let lastTime = 0;
+    let currentRot = 0;
+    const rotationSpeed = 0.3;
+
+    const handleMouseMove = (e) => {
+      const rect = container.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+      const width = rect.width;
+      const height = rect.height;
+      const size = Math.min(width, height);
+      const centerX = width / 2;
+      const centerY = height / 2;
+      const uvX = ((x - centerX) / size) * 2.0;
+      const uvY = ((y - centerY) / size) * 2.0;
+
+      if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+        targetHover = 1;
+      } else {
+        targetHover = 0;
+      }
+    };
+
+    const handleMouseLeave = () => {
+      targetHover = 0;
+    };
+
+    container.addEventListener("mousemove", handleMouseMove);
+    container.addEventListener("mouseleave", handleMouseLeave);
+
+    let rafId;
+    const update = (t) => {
+      rafId = requestAnimationFrame(update);
+      const dt = (t - lastTime) * 0.001;
+      lastTime = t;
+      program.uniforms.iTime.value = t * 0.001;
+      program.uniforms.hue.value = hue;
+      program.uniforms.hoverIntensity.value = hoverIntensity;
+
+      const effectiveHover = forceHoverState ? 1 : targetHover;
+      program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+
+      if (rotateOnHover && effectiveHover > 0.5) {
+        currentRot += dt * rotationSpeed;
+      }
+      program.uniforms.rot.value = currentRot;
+
+      renderer.render({ scene: mesh });
+    };
+    rafId = requestAnimationFrame(update);
+
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", resize);
+      container.removeEventListener("mousemove", handleMouseMove);
+      container.removeEventListener("mouseleave", handleMouseLeave);
+      if (container.contains(gl.canvas)) {
+        container.removeChild(gl.canvas);
+      }
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+  }, [hue, hoverIntensity, rotateOnHover, forceHoverState]);
+
+  return <div ref={ctnDom} className="orb-container" />;
+}
+
+// CSS for orb container
+const orbCSS = `
+.orb-container {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+`;
+
+// Inject CSS
+if (typeof document !== 'undefined') {
+  const style = document.createElement('style');
+  style.textContent = orbCSS;
+  document.head.appendChild(style);
+}

src/components/PreviewPanel.js

@@ -0,0 +1,543 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Eye, Zap, Brain, Settings, ExternalLink, FileText } from 'lucide-react';
+import DocumentViewer from './DocumentViewer';
+
+const PreviewPanel = ({ 
+  file, 
+  processingMode, 
+  onModeChange, 
+  onProcess, 
+  isProcessing, 
+  apiKey 
+}) => {
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const [fileInfo, setFileInfo] = useState(null);
+  const [showDocumentViewer, setShowDocumentViewer] = useState(false);
+  // OCR borders for future use
+  // const [showOcrBorders, setShowOcrBorders] = useState(false);
+
+  useEffect(() => {
+    if (file) {
+      const url = URL.createObjectURL(file);
+      setPreviewUrl(url);
+      
+      setFileInfo({
+        name: file.name,
+        size: (file.size / 1024 / 1024).toFixed(2),
+        type: file.type,
+        lastModified: new Date(file.lastModified).toLocaleString()
+      });
+
+      return () => URL.revokeObjectURL(url);
+    }
+  }, [file]);
+
+  const processingModes = [
+    {
+      id: 'standard',
+      name: 'Standard Mode',
+      model: 'Gemini 2.5 Flash',
+      icon: <Zap size={20} />,
+      description: 'Fast processing',
+      features: ['Same features as Pro', 'Faster speed', 'Slightly less accuracy'],
+      gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+    },
+    {
+      id: 'structured',
+      name: 'Structured Mode',
+      model: 'Gemini 2.5 Pro',
+      icon: <Brain size={20} />,
+      description: 'Maximum accuracy',
+      features: ['Best accuracy', 'Advanced formatting', 'Slower processing'],
+      gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
+    }
+  ];
+
+  return (
+    <>
+      {showDocumentViewer && (
+        <DocumentViewer 
+          file={file} 
+          onBack={() => setShowDocumentViewer(false)} 
+        />
+      )}
+      
+      <div className="preview-panel">
+        <div className="preview-grid">
+        {/* File Preview */}
+        <motion.div
+          className="preview-section glass-panel"
+          initial={{ opacity: 0, x: -20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5 }}
+        >
+          <div className="section-header">
+            <Eye size={20} />
+            <h3>File Preview</h3>
+          </div>
+          
+          <div className="preview-container">
+            {previewUrl && (
+              <motion.div
+                className="preview-image-container"
+                initial={{ scale: 0.9, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ duration: 0.3 }}
+              >
+                {file.type === 'application/pdf' ? (
+                  <div className="pdf-preview glass-preview">
+                    <div className="preview-content">
+                      <div className="document-icon">
+                        <FileText size={48} />
+                      </div>
+                      <p className="preview-title">PDF Document</p>
+                      <span className="pdf-note">Ready for processing</span>
+                      <motion.button
+                        className="preview-button"
+                        onClick={() => setShowDocumentViewer(true)}
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                      >
+                        <ExternalLink size={16} />
+                        Open Viewer
+                      </motion.button>
+                    </div>
+                  </div>
+                ) : file.type === 'text/html' || file.name.toLowerCase().endsWith('.html') ? (
+                  <div className="html-preview glass-preview">
+                    <div className="preview-content">
+                      <div className="document-icon">
+                        <FileText size={48} />
+                      </div>
+                      <p className="preview-title">HTML Document</p>
+                      <span className="html-note">Ready for processing</span>
+                      <motion.button
+                        className="preview-button"
+                        onClick={() => setShowDocumentViewer(true)}
+                        whileHover={{ scale: 1.05 }}
+                        whileTap={{ scale: 0.95 }}
+                      >
+                        <ExternalLink size={16} />
+                        Open Viewer
+                      </motion.button>
+                    </div>
+                  </div>
+                ) : (
+                  <img 
+                    src={previewUrl} 
+                    alt="Preview" 
+                    className="preview-image"
+                  />
+                )}
+              </motion.div>
+            )}
+            
+            {fileInfo && (
+              <div className="file-info nested-panel">
+                <div className="info-grid">
+                  <div className="info-item">
+                    <span className="info-label">Name:</span>
+                    <span className="info-value">{fileInfo.name}</span>
+                  </div>
+                  <div className="info-item">
+                    <span className="info-label">Size:</span>
+                    <span className="info-value">{fileInfo.size} MB</span>
+                  </div>
+                  <div className="info-item">
+                    <span className="info-label">Type:</span>
+                    <span className="info-value">{fileInfo.type}</span>
+                  </div>
+                  <div className="info-item">
+                    <span className="info-label">Modified:</span>
+                    <span className="info-value">{fileInfo.lastModified}</span>
+                  </div>
+                </div>
+              </div>
+            )}
+          </div>
+        </motion.div>
+
+        {/* Processing Options */}
+        <motion.div
+          className="options-section glass-panel"
+          initial={{ opacity: 0, x: 20 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.5, delay: 0.1 }}
+        >
+          <div className="section-header">
+            <Settings size={20} />
+            <h3>Processing Options</h3>
+          </div>
+          
+          <div className="processing-modes">
+            {processingModes.map((mode, index) => (
+              <motion.div
+                key={mode.id}
+                className={`mode-card nested-panel ${processingMode === mode.id ? 'active' : ''}`}
+                onClick={() => onModeChange(mode.id)}
+                whileHover={{ scale: 1.02, y: -2 }}
+                whileTap={{ scale: 0.98 }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: index * 0.1 }}
+              >
+                <div className="mode-header">
+                  <div className="mode-icon" style={{ background: mode.gradient }}>
+                    {mode.icon}
+                  </div>
+                  <div className="mode-info">
+                    <h4>{mode.name}</h4>
+                    <span className="mode-model">{mode.model}</span>
+                  </div>
+                </div>
+                
+                <p className="mode-description">{mode.description}</p>
+                
+                <div className="mode-features">
+                  {mode.features.map((feature, idx) => (
+                    <span key={idx} className="feature-tag">
+                      {feature}
+                    </span>
+                  ))}
+                </div>
+                
+                {processingMode === mode.id && (
+                  <motion.div
+                    className="mode-indicator"
+                    layoutId="modeIndicator"
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      bottom: 0,
+                      background: 'rgba(99, 102, 241, 0.1)',
+                      borderRadius: '12px',
+                      zIndex: -1,
+                      border: '1px solid rgba(99, 102, 241, 0.3)'
+                    }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 500,
+                      damping: 30
+                    }}
+                  />
+                )}
+              </motion.div>
+            ))}
+          </div>
+          
+          <motion.button
+            className="process-button flowing-button"
+            onClick={onProcess}
+            disabled={!apiKey || isProcessing}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            style={{
+              width: '100%',
+              marginTop: '24px',
+              background: isProcessing 
+                ? 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)'
+                : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
+            }}
+          >
+            <AnimatePresence mode="wait">
+              {isProcessing ? (
+                <motion.div
+                  key="processing"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="button-content"
+                >
+                  <motion.div
+                    className="processing-spinner"
+                    animate={{ rotate: 360 }}
+                    transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
+                  >
+                    ⚡
+                  </motion.div>
+                  Processing...
+                </motion.div>
+              ) : (
+                <motion.div
+                  key="ready"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  className="button-content"
+                >
+                  🚀 Extract Text
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </motion.button>
+          
+          {!apiKey && (
+            <motion.p
+              className="api-warning"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              style={{
+                color: 'rgba(251, 86, 7, 0.8)',
+                fontSize: '0.75rem',
+                textAlign: 'center',
+                marginTop: '8px'
+              }}
+            >
+              Please enter your Google API Key to continue
+            </motion.p>
+          )}
+        </motion.div>
+      </div>
+
+      <style jsx>{`
+        .preview-panel {
+          width: 100%;
+          min-height: auto;
+          padding-bottom: 40px;
+        }
+
+        .preview-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 24px;
+          height: 100%;
+        }
+
+        .section-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-bottom: 24px;
+          color: var(--text-primary);
+        }
+
+        .section-header h3 {
+          font-size: 1.25rem;
+          font-weight: 600;
+        }
+
+        .preview-container {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+        }
+
+        .preview-image-container {
+          border-radius: 12px;
+          overflow: hidden;
+          background: rgba(100, 100, 100, 0.1);
+          backdrop-filter: blur(25px);
+          -webkit-backdrop-filter: blur(25px);
+        }
+
+        .preview-image {
+          width: 100%;
+          height: 300px;
+          object-fit: contain;
+          background: rgba(100, 100, 100, 0.1);
+        }
+
+        .pdf-preview {
+          height: 300px;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 12px;
+          background: rgba(100, 100, 100, 0.1);
+        }
+
+        .pdf-icon {
+          font-size: 4rem;
+          filter: drop-shadow(0 0 20px rgba(99, 102, 241, 0.3));
+        }
+
+        .pdf-note {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        .file-info {
+          padding: 16px;
+        }
+
+        .info-grid {
+          display: grid;
+          grid-template-columns: 1fr 1fr;
+          gap: 12px;
+        }
+
+        .info-item {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .info-label {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+          font-weight: 500;
+        }
+
+        .info-value {
+          font-size: 0.875rem;
+          color: var(--text-secondary);
+          word-break: break-all;
+        }
+
+        .processing-modes {
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          margin-bottom: 24px;
+        }
+
+        .mode-card {
+          cursor: pointer;
+          transition: all 0.3s ease;
+          position: relative;
+          overflow: hidden;
+        }
+
+        .mode-card.active {
+          border-color: rgba(99, 102, 241, 0.3);
+        }
+
+        .mode-header {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          margin-bottom: 12px;
+        }
+
+        .mode-icon {
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          color: white;
+        }
+
+        .mode-info h4 {
+          font-size: 1rem;
+          font-weight: 600;
+          color: var(--text-primary);
+          margin-bottom: 2px;
+        }
+
+        .mode-model {
+          font-size: 0.75rem;
+          color: var(--text-muted);
+        }
+
+        .mode-description {
+          font-size: 0.875rem;
+          color: var(--text-secondary);
+          margin-bottom: 12px;
+        }
+
+        .mode-features {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 6px;
+        }
+
+        .feature-tag {
+          background: rgba(100, 100, 100, 0.1);
+          color: rgba(255, 255, 255, 0.8);
+          padding: 4px 8px;
+          border-radius: 6px;
+          font-size: 0.75rem;
+          font-weight: 500;
+          backdrop-filter: blur(10px);
+        }
+
+        .button-content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+        }
+
+        .processing-spinner {
+          font-size: 1.2rem;
+        }
+
+        @media (max-width: 768px) {
+          .preview-grid {
+            grid-template-columns: 1fr;
+          }
+          
+          .info-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+
+        .glass-preview {
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: blur(25px);
+          -webkit-backdrop-filter: blur(25px);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 16px;
+          overflow: hidden;
+        }
+
+        .preview-content {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 12px;
+          padding: 32px;
+        }
+
+        .document-icon {
+          color: rgba(79, 172, 254, 0.8);
+          filter: drop-shadow(0 0 20px rgba(79, 172, 254, 0.4));
+        }
+
+        .preview-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: var(--text-primary);
+          margin: 0;
+        }
+
+        .pdf-note, .html-note {
+          font-size: 0.875rem;
+          color: var(--text-muted);
+          margin: 0;
+        }
+
+        .preview-button {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          padding: 12px 20px;
+          background: linear-gradient(135deg, #4facfe, #8b5cf6);
+          border: none;
+          border-radius: 8px;
+          color: white;
+          font-size: 0.875rem;
+          font-weight: 500;
+          cursor: pointer;
+          transition: all 0.3s ease;
+          margin-top: 8px;
+        }
+
+        .preview-button:hover {
+          box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
+          transform: translateY(-1px);
+        }
+      `}</style>
+      </div>
+    </>
+  );
+};
+
+export default PreviewPanel;

src/components/ProcessingProgress.js

@@ -0,0 +1,122 @@
+import React from 'react';
+import { motion } from 'framer-motion';
+
+const ProcessingProgress = ({ progress, isVisible }) => {
+  if (!isVisible) return null;
+
+  const { 
+    current, 
+    total, 
+    status, 
+    fileName, 
+    totalPages, 
+    currentPage, 
+    totalCharacters, 
+    pageCharacters, 
+    phase,
+    consoleLogs = []
+  } = progress;
+  const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
+
+  return (
+    <motion.div
+      className="processing-progress-overlay"
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+    >
+      <div className="processing-progress-container">
+        <div className="progress-content">
+          <div className="progress-header">
+            <h3>🌙 Luna Processing</h3>
+            <div className="progress-file">
+              📄 {fileName || 'Processing file...'}
+            </div>
+          </div>
+          
+          <div className="progress-bar-container">
+            <div className="progress-bar">
+              <motion.div
+                className="progress-fill"
+                initial={{ width: 0 }}
+                animate={{ width: `${percentage}%` }}
+                transition={{ duration: 0.5, ease: "easeOut" }}
+              />
+            </div>
+            <div className="progress-percentage">{percentage}%</div>
+          </div>
+          
+          <div className="progress-status">
+            {status && (
+              <motion.div
+                key={status}
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                className="status-text"
+              >
+                {status}
+              </motion.div>
+            )}
+          </div>
+          
+          {totalPages > 1 && (
+            <div className="progress-details">
+              <div className="progress-counter">
+                <span className="counter-current">{currentPage || 0}</span>
+                <span className="counter-separator">/</span>
+                <span className="counter-total">{totalPages}</span>
+                <span className="counter-label">pages</span>
+              </div>
+              
+              {totalCharacters > 0 && (
+                <div className="progress-stats">
+                  <div className="stat-item">
+                    <span className="stat-label">Total Characters:</span>
+                    <span className="stat-value">{totalCharacters.toLocaleString()}</span>
+                  </div>
+                  {pageCharacters > 0 && (
+                    <div className="stat-item">
+                      <span className="stat-label">Last Page:</span>
+                      <span className="stat-value">{pageCharacters.toLocaleString()} chars</span>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+          
+          {consoleLogs.length > 0 && (
+            <div className="console-logs">
+              <div className="console-header">📋 Live Process Log</div>
+              <div className="console-content">
+                {consoleLogs.slice(-6).map((log, index) => (
+                  <div key={index} className="console-line">
+                    <span className="console-time">
+                      {new Date(log.timestamp).toLocaleTimeString('th-TH', { 
+                        hour12: false,
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                      })}
+                    </span>
+                    <span className="console-message">{log.message}</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+          
+          <div className="processing-animation">
+            <div className="processing-dots">
+              <div className="dot"></div>
+              <div className="dot"></div>
+              <div className="dot"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default ProcessingProgress;

src/components/ResultsPanel.js

@@ -0,0 +1,1340 @@
+import React, { useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FileText, Code, Eye, Download, Copy, Check } from 'lucide-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { marked } from 'marked';
+import jsPDF from 'jspdf';
+
+const ResultsPanel = ({ text, previewMode, onPreviewModeChange, fileName }) => {
+  const [copied, setCopied] = useState(false);
+  const [downloadFormat, setDownloadFormat] = useState('txt');
+
+  const previewModes = [
+    { id: 'text', label: 'Text', icon: <FileText size={16} /> },
+    { id: 'markdown', label: 'Markdown', icon: <Code size={16} /> },
+    { id: 'preview', label: 'HTML', icon: <Eye size={16} /> },
+    { id: 'json', label: 'JSON', icon: <Code size={16} /> }
+  ];
+
+  const downloadFormats = [
+    { id: 'txt', label: '.txt', icon: '📄' },
+    { id: 'md', label: '.md', icon: '📝' },
+    { id: 'html', label: '.html', icon: '🌐' },
+    { id: 'json', label: '.json', icon: '🔧' },
+    { id: 'pdf', label: '.pdf', icon: '📋' }
+  ];
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text:', err);
+    }
+  };
+
+
+
+  const handleDownload = (format = downloadFormat) => {
+    const baseFileName = fileName ? fileName.split('.')[0] : 'extracted-text';
+
+    switch (format) {
+      case 'txt':
+        downloadFile(text, `${baseFileName}.txt`, 'text/plain');
+        break;
+      case 'md':
+        downloadFile(text, `${baseFileName}.md`, 'text/markdown');
+        break;
+      case 'html':
+        const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>${baseFileName} - Luna OCR</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
+            background: #0a0a0f;
+            color: #ffffff;
+            min-height: 100vh;
+            overflow-x: hidden;
+            position: relative;
+        }
+
+        /* Modern Animated Background */
+        .animated-background {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: -1;
+            overflow: hidden;
+        }
+
+        .gradient-orb {
+            position: absolute;
+            border-radius: 50%;
+            filter: blur(60px);
+            opacity: 0.4;
+        }
+
+        .orb-1 {
+            top: 20%;
+            left: 10%;
+            width: 300px;
+            height: 300px;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            animation: float1 25s ease-in-out infinite;
+        }
+
+        .orb-2 {
+            top: 60%;
+            right: 15%;
+            width: 250px;
+            height: 250px;
+            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
+            animation: float2 30s ease-in-out infinite;
+        }
+
+        .orb-3 {
+            bottom: 30%;
+            left: 20%;
+            width: 200px;
+            height: 200px;
+            background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
+            animation: float3 35s ease-in-out infinite;
+        }
+
+        .orb-4 {
+            top: 10%;
+            right: 40%;
+            width: 180px;
+            height: 180px;
+            background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
+            animation: float4 20s ease-in-out infinite;
+        }
+
+        .orb-5 {
+            bottom: 10%;
+            right: 30%;
+            width: 220px;
+            height: 220px;
+            background: linear-gradient(135deg, #f472b6 0%, #ec4899 100%);
+            animation: float5 28s ease-in-out infinite;
+        }
+
+        @keyframes float1 {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(-30px, -20px) rotate(90deg); }
+            50% { transform: translate(20px, -30px) rotate(180deg); }
+            75% { transform: translate(-20px, 20px) rotate(270deg); }
+        }
+
+        @keyframes float2 {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            33% { transform: translate(25px, -35px) rotate(120deg); }
+            66% { transform: translate(-35px, -25px) rotate(240deg); }
+        }
+
+        @keyframes float3 {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            20% { transform: translate(-25px, 30px) rotate(72deg); }
+            40% { transform: translate(30px, 25px) rotate(144deg); }
+            60% { transform: translate(25px, -30px) rotate(216deg); }
+            80% { transform: translate(-30px, -25px) rotate(288deg); }
+        }
+
+        @keyframes float4 {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            50% { transform: translate(-20px, 25px) rotate(180deg); }
+        }
+
+        @keyframes float5 {
+            0%, 100% { transform: translate(0, 0) rotate(0deg); }
+            25% { transform: translate(20px, -15px) rotate(90deg); }
+            50% { transform: translate(-15px, 20px) rotate(180deg); }
+            75% { transform: translate(-20px, -20px) rotate(270deg); }
+        }
+            left: 50%;
+            width: 60vmin;
+            height: 60vmin;
+            transform: translate(-50%, -50%);
+            opacity: 0.7;
+        }
+
+        .orb-layer {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            border-radius: 50%;
+            filter: blur(40px);
+        }
+
+        .orb-layer-1 {
+            background: radial-gradient(circle at 30% 30%, 
+                rgba(156, 67, 254, 0.8) 0%, 
+                rgba(79, 172, 254, 0.6) 40%, 
+                rgba(16, 21, 96, 0.4) 70%, 
+                transparent 100%);
+            animation: orbRotate1 20s linear infinite, orbPulse1 8s ease-in-out infinite;
+        }
+
+        .orb-layer-2 {
+            background: radial-gradient(circle at 70% 60%, 
+                rgba(76, 194, 233, 0.7) 0%, 
+                rgba(139, 92, 246, 0.5) 35%, 
+                rgba(79, 172, 254, 0.3) 65%, 
+                transparent 100%);
+            animation: orbRotate2 25s linear infinite reverse, orbPulse2 6s ease-in-out infinite;
+        }
+
+        .orb-layer-3 {
+            background: radial-gradient(circle at 50% 80%, 
+                rgba(16, 185, 129, 0.6) 0%, 
+                rgba(6, 182, 212, 0.4) 30%, 
+                rgba(139, 92, 246, 0.2) 60%, 
+                transparent 100%);
+            animation: orbRotate3 30s linear infinite, orbPulse3 10s ease-in-out infinite;
+        }
+
+        .orb-core {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 40%;
+            height: 40%;
+            transform: translate(-50%, -50%);
+            background: radial-gradient(circle, 
+                rgba(156, 67, 254, 0.9) 0%, 
+                rgba(79, 172, 254, 0.7) 30%, 
+                rgba(16, 21, 96, 0.5) 60%, 
+                transparent 100%);
+            border-radius: 50%;
+            filter: blur(20px);
+            animation: orbCore 15s ease-in-out infinite;
+        }
+
+        @keyframes orbRotate1 {
+            0% { transform: rotate(0deg) scale(1); }
+            25% { transform: rotate(90deg) scale(1.1); }
+            50% { transform: rotate(180deg) scale(1); }
+            75% { transform: rotate(270deg) scale(0.9); }
+            100% { transform: rotate(360deg) scale(1); }
+        }
+
+        @keyframes orbRotate2 {
+            0% { transform: rotate(0deg) scale(0.9); }
+            33% { transform: rotate(120deg) scale(1.2); }
+            66% { transform: rotate(240deg) scale(0.8); }
+            100% { transform: rotate(360deg) scale(0.9); }
+        }
+
+        @keyframes orbRotate3 {
+            0% { transform: rotate(0deg) scale(1.1); }
+            20% { transform: rotate(72deg) scale(0.9); }
+            40% { transform: rotate(144deg) scale(1.3); }
+            60% { transform: rotate(216deg) scale(0.7); }
+            80% { transform: rotate(288deg) scale(1.1); }
+            100% { transform: rotate(360deg) scale(1.1); }
+        }
+
+        @keyframes orbPulse1 {
+            0%, 100% { opacity: 0.8; filter: blur(40px) hue-rotate(0deg); }
+            50% { opacity: 0.6; filter: blur(60px) hue-rotate(30deg); }
+        }
+
+        @keyframes orbPulse2 {
+            0%, 100% { opacity: 0.7; filter: blur(40px) hue-rotate(0deg); }
+            50% { opacity: 0.9; filter: blur(30px) hue-rotate(-20deg); }
+        }
+
+        @keyframes orbPulse3 {
+            0%, 100% { opacity: 0.6; filter: blur(40px) hue-rotate(0deg); }
+            50% { opacity: 0.4; filter: blur(50px) hue-rotate(15deg); }
+        }
+
+        @keyframes orbCore {
+            0%, 100% { 
+                transform: translate(-50%, -50%) scale(1); 
+                filter: blur(20px) hue-rotate(0deg); 
+            }
+            25% { 
+                transform: translate(-50%, -50%) scale(1.2); 
+                filter: blur(15px) hue-rotate(45deg); 
+            }
+            50% { 
+                transform: translate(-50%, -50%) scale(0.8); 
+                filter: blur(25px) hue-rotate(90deg); 
+            }
+            75% { 
+                transform: translate(-50%, -50%) scale(1.1); 
+                filter: blur(18px) hue-rotate(135deg); 
+            }
+        }
+
+        /* Interactive hover effect */
+        .orb-container:hover .css-orb {
+            animation-duration: 0.5s;
+        }
+
+        .orb-container:hover .orb-layer-1 {
+            filter: blur(30px);
+            transform: scale(1.2);
+        }
+
+        .orb-container:hover .orb-layer-2 {
+            filter: blur(35px);
+            transform: scale(0.9);
+        }
+
+        .orb-container:hover .orb-layer-3 {
+            filter: blur(45px);
+            transform: scale(1.1);
+        }
+
+        /* Modern Glassmorphism Container */
+        .glass-container {
+            backdrop-filter: blur(30px);
+            -webkit-backdrop-filter: blur(30px);
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            border-radius: 32px;
+            margin: 24px;
+            min-height: calc(100vh - 48px);
+            overflow: hidden;
+            position: relative;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.3),
+                inset 0 1px 0 rgba(255, 255, 255, 0.1);
+        }
+
+        .glass-container::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg,
+                rgba(16, 185, 129, 0.1) 0%,
+                rgba(236, 72, 153, 0.08) 35%,
+                rgba(99, 102, 241, 0.1) 70%,
+                rgba(20, 184, 166, 0.08) 100%);
+            border-radius: 32px;
+            z-index: -1;
+        }
+
+        /* Modern Header */
+        .document-header {
+            padding: 40px 48px;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(25px);
+            position: relative;
+        }
+
+        .document-header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                rgba(16, 185, 129, 0.5) 25%, 
+                rgba(236, 72, 153, 0.5) 75%, 
+                transparent 100%);
+        }
+
+        .document-title {
+            font-size: 2.75rem;
+            font-weight: 800;
+            background: linear-gradient(135deg, 
+                #10b981 0%, 
+                #ec4899 50%, 
+                #6366f1 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
+            margin-bottom: 12px;
+            letter-spacing: -0.02em;
+        }
+
+        .document-subtitle {
+            color: rgba(255, 255, 255, 0.7);
+            font-size: 1.1rem;
+            font-weight: 500;
+            opacity: 0.9;
+        }
+
+        /* Modern Content */
+        .document-content {
+            padding: 48px;
+            line-height: 1.8;
+            position: relative;
+        }
+
+        .document-content::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 48px;
+            right: 48px;
+            height: 1px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                rgba(255, 255, 255, 0.1) 50%, 
+                transparent 100%);
+        }
+
+        /* Clean Typography */
+        h1, h2, h3, h4, h5, h6 {
+            color: rgba(255, 255, 255, 0.95);
+            margin: 2.5rem 0 1.5rem 0;
+            font-weight: 700;
+            letter-spacing: -0.01em;
+            line-height: 1.3;
+        }
+
+        h1 {
+            font-size: 2.5rem;
+            color: rgba(255, 255, 255, 0.98);
+            margin-bottom: 2rem;
+        }
+
+        h2 {
+            font-size: 2rem;
+            color: rgba(255, 255, 255, 0.95);
+            margin-top: 3rem;
+            position: relative;
+            padding-bottom: 0.5rem;
+        }
+
+        h2::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 60px;
+            height: 2px;
+            background: linear-gradient(90deg, 
+                rgba(16, 185, 129, 0.6) 0%, 
+                rgba(236, 72, 153, 0.6) 100%);
+            border-radius: 1px;
+        }
+
+        h3 {
+            font-size: 1.5rem;
+            color: rgba(255, 255, 255, 0.92);
+        }
+
+        h4 {
+            font-size: 1.25rem;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        p {
+            margin: 1rem 0;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        /* Enhanced Glassmorphism Tables */
+        table {
+            width: 100%;
+            border-collapse: separate;
+            border-spacing: 0;
+            margin: 2.5rem 0;
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(40px);
+            -webkit-backdrop-filter: blur(40px);
+            border-radius: 24px;
+            overflow: hidden;
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            box-shadow: 
+                0 20px 40px rgba(0, 0, 0, 0.3),
+                0 8px 16px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            position: relative;
+        }
+
+        table::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg,
+                rgba(16, 185, 129, 0.02) 0%,
+                rgba(236, 72, 153, 0.02) 50%,
+                rgba(99, 102, 241, 0.02) 100%);
+            border-radius: 24px;
+            z-index: -1;
+        }
+
+        th, td {
+            padding: 24px 28px;
+            text-align: left;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+            position: relative;
+        }
+
+        th {
+            background: rgba(255, 255, 255, 0.04);
+            backdrop-filter: blur(20px);
+            color: rgba(255, 255, 255, 0.95);
+            font-weight: 600;
+            font-size: 0.95rem;
+            letter-spacing: 0.3px;
+            text-transform: uppercase;
+            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        th::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(16, 185, 129, 0.08) 0%, 
+                rgba(236, 72, 153, 0.08) 100%);
+            z-index: -1;
+        }
+
+        th::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                rgba(255, 255, 255, 0.1) 50%, 
+                transparent 100%);
+        }
+
+        td {
+            color: rgba(255, 255, 255, 0.9);
+            font-weight: 500;
+            background: rgba(255, 255, 255, 0.01);
+        }
+
+        tr:hover td {
+            background: rgba(255, 255, 255, 0.03);
+            color: rgba(255, 255, 255, 0.95);
+            transition: all 0.3s ease;
+        }
+
+        tr:hover {
+            transform: translateY(-2px);
+            transition: all 0.3s ease;
+        }
+
+        tr:hover td::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg, 
+                rgba(16, 185, 129, 0.03) 0%, 
+                rgba(236, 72, 153, 0.03) 100%);
+            z-index: -1;
+        }
+
+        /* Links */
+        a {
+            color: #4facfe;
+            text-decoration: none;
+            transition: all 0.3s ease;
+        }
+
+        a:hover {
+            color: #8b5cf6;
+            text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
+        }
+
+        /* Enhanced Code blocks */
+        pre, code {
+            background: rgba(0, 0, 0, 0.3);
+            border: 1px solid rgba(255, 255, 255, 0.06);
+            border-radius: 12px;
+            font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
+            backdrop-filter: blur(20px);
+        }
+
+        pre {
+            padding: 24px;
+            overflow-x: auto;
+            margin: 2rem 0;
+            box-shadow: 
+                0 8px 32px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.05);
+            position: relative;
+        }
+
+        pre::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg,
+                rgba(16, 185, 129, 0.02) 0%,
+                rgba(99, 102, 241, 0.02) 100%);
+            border-radius: 12px;
+            z-index: -1;
+        }
+
+        code {
+            padding: 6px 10px;
+            font-size: 0.875rem;
+        }
+
+        /* Enhanced Blockquotes */
+        blockquote {
+            border: none;
+            background: rgba(255, 255, 255, 0.03);
+            backdrop-filter: blur(30px);
+            padding: 28px 32px;
+            margin: 2.5rem 0;
+            border-radius: 20px;
+            border-left: 4px solid transparent;
+            background-image: linear-gradient(rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.03)),
+                              linear-gradient(135deg, #10b981, #ec4899);
+            background-origin: border-box;
+            background-clip: padding-box, border-box;
+            box-shadow: 
+                0 12px 40px rgba(0, 0, 0, 0.2),
+                inset 0 1px 0 rgba(255, 255, 255, 0.08);
+            position: relative;
+        }
+
+        blockquote::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(135deg,
+                rgba(16, 185, 129, 0.03) 0%,
+                rgba(236, 72, 153, 0.03) 100%);
+            border-radius: 20px;
+            z-index: -1;
+        }
+
+        blockquote p {
+            color: rgba(255, 255, 255, 0.95);
+            font-style: italic;
+            font-weight: 500;
+            margin: 0;
+        }
+
+        /* Lists */
+        ul, ol {
+            margin: 1rem 0;
+            padding-left: 2rem;
+        }
+
+        li {
+            margin: 0.5rem 0;
+            color: rgba(255, 255, 255, 0.9);
+        }
+
+        /* Horizontal rules */
+        hr {
+            border: none;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
+            margin: 3rem 0;
+        }
+
+        /* Strong and emphasis */
+        strong {
+            color: #ffffff;
+            font-weight: 600;
+        }
+
+        em {
+            color: #4facfe;
+            font-style: italic;
+        }
+
+        /* Modern Footer */
+        .document-footer {
+            padding: 40px 48px;
+            border-top: 1px solid rgba(255, 255, 255, 0.08);
+            background: rgba(255, 255, 255, 0.02);
+            text-align: center;
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 0.9rem;
+            font-weight: 500;
+            position: relative;
+        }
+
+        .document-footer::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 48px;
+            right: 48px;
+            height: 1px;
+            background: linear-gradient(90deg, 
+                transparent 0%, 
+                rgba(16, 185, 129, 0.3) 25%, 
+                rgba(236, 72, 153, 0.3) 75%, 
+                transparent 100%);
+        }
+
+        /* Responsive */
+        @media (max-width: 768px) {
+            .glass-container {
+                margin: 10px;
+                border-radius: 16px;
+            }
+
+            .document-header,
+            .document-content,
+            .document-footer {
+                padding: 24px 20px;
+            }
+
+            .document-title {
+                font-size: 2rem;
+            }
+
+            table {
+                font-size: 0.875rem;
+            }
+
+            th, td {
+                padding: 12px 16px;
+            }
+        }
+
+        /* Print styles */
+        @media print {
+            body {
+                background: white;
+                color: black;
+            }
+
+            .orb-background,
+            .glass-container::before {
+                display: none;
+            }
+
+            .glass-container {
+                background: white;
+                border: none;
+                box-shadow: none;
+                margin: 0;
+            }
+        }
+    </style>
+    <script src="https://unpkg.com/[email protected]/dist/ogl.umd.js"></script>
+</head>
+<body>
+    <!-- Orb Background -->
+    <div class="animated-background">
+        <div class="gradient-orb orb-1"></div>
+        <div class="gradient-orb orb-2"></div>
+        <div class="gradient-orb orb-3"></div>
+        <div class="gradient-orb orb-4"></div>
+        <div class="gradient-orb orb-5"></div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="glass-container">
+        <header class="document-header">
+            <h1 class="document-title">${baseFileName}</h1>
+            <p class="document-subtitle">Generated by Luna OCR • ${new Date().toLocaleDateString()}</p>
+        </header>
+
+        <main class="document-content">
+            ${marked(text)}
+        </main>
+
+        <footer class="document-footer">
+            <p>Processed with Luna OCR • Glassmorphism Theme • ${new Date().toLocaleString()}</p>
+        </footer>
+    </div>
+
+    <script>
+        // Robust Orb.js implementation with fallback
+        function initOrb() {
+            const container = document.getElementById('orbContainer');
+            const fallback = document.getElementById('orbFallback');
+            
+            if (!container) {
+                console.error('Orb container not found');
+                return;
+            }
+
+            // Check if OGL loaded
+            if (typeof OGL === 'undefined') {
+                console.log('OGL not loaded, using CSS fallback');
+                if (fallback) fallback.style.display = 'block';
+                return;
+            }
+
+            try {
+
+            const { Renderer, Program, Mesh, Triangle, Vec3 } = OGL;
+
+            const vert = \`
+                precision highp float;
+                attribute vec2 position;
+                attribute vec2 uv;
+                varying vec2 vUv;
+                void main() {
+                    vUv = uv;
+                    gl_Position = vec4(position, 0.0, 1.0);
+                }
+            \`;
+
+            const frag = \`
+                precision highp float;
+
+                uniform float iTime;
+                uniform vec3 iResolution;
+                uniform float hue;
+                uniform float hover;
+                uniform float rot;
+                uniform float hoverIntensity;
+                varying vec2 vUv;
+
+                vec3 rgb2yiq(vec3 c) {
+                    float y = dot(c, vec3(0.299, 0.587, 0.114));
+                    float i = dot(c, vec3(0.596, -0.274, -0.322));
+                    float q = dot(c, vec3(0.211, -0.523, 0.312));
+                    return vec3(y, i, q);
+                }
+                
+                vec3 yiq2rgb(vec3 c) {
+                    float r = c.x + 0.956 * c.y + 0.621 * c.z;
+                    float g = c.x - 0.272 * c.y - 0.647 * c.z;
+                    float b = c.x - 1.106 * c.y + 1.703 * c.z;
+                    return vec3(r, g, b);
+                }
+                
+                vec3 adjustHue(vec3 color, float hueDeg) {
+                    float hueRad = hueDeg * 3.14159265 / 180.0;
+                    vec3 yiq = rgb2yiq(color);
+                    float cosA = cos(hueRad);
+                    float sinA = sin(hueRad);
+                    float i = yiq.y * cosA - yiq.z * sinA;
+                    float q = yiq.y * sinA + yiq.z * cosA;
+                    yiq.y = i;
+                    yiq.z = q;
+                    return yiq2rgb(yiq);
+                }
+
+                vec3 hash33(vec3 p3) {
+                    p3 = fract(p3 * vec3(0.1031, 0.11369, 0.13787));
+                    p3 += dot(p3, p3.yxz + 19.19);
+                    return -1.0 + 2.0 * fract(vec3(
+                        p3.x + p3.y,
+                        p3.x + p3.z,
+                        p3.y + p3.z
+                    ) * p3.zyx);
+                }
+
+                float snoise3(vec3 p) {
+                    const float K1 = 0.333333333;
+                    const float K2 = 0.166666667;
+                    vec3 i = floor(p + (p.x + p.y + p.z) * K1);
+                    vec3 d0 = p - (i - (i.x + i.y + i.z) * K2);
+                    vec3 e = step(vec3(0.0), d0 - d0.yzx);
+                    vec3 i1 = e * (1.0 - e.zxy);
+                    vec3 i2 = 1.0 - e.zxy * (1.0 - e);
+                    vec3 d1 = d0 - (i1 - K2);
+                    vec3 d2 = d0 - (i2 - K1);
+                    vec3 d3 = d0 - 0.5;
+                    vec4 h = max(0.6 - vec4(
+                        dot(d0, d0),
+                        dot(d1, d1),
+                        dot(d2, d2),
+                        dot(d3, d3)
+                    ), 0.0);
+                    vec4 n = h * h * h * h * vec4(
+                        dot(d0, hash33(i)),
+                        dot(d1, hash33(i + i1)),
+                        dot(d2, hash33(i + i2)),
+                        dot(d3, hash33(i + 1.0))
+                    );
+                    return dot(vec4(31.316), n);
+                }
+
+                vec4 extractAlpha(vec3 colorIn) {
+                    float a = max(max(colorIn.r, colorIn.g), colorIn.b);
+                    return vec4(colorIn.rgb / (a + 1e-5), a);
+                }
+
+                const vec3 baseColor1 = vec3(0.611765, 0.262745, 0.996078);
+                const vec3 baseColor2 = vec3(0.298039, 0.760784, 0.913725);
+                const vec3 baseColor3 = vec3(0.062745, 0.078431, 0.600000);
+                const float innerRadius = 0.6;
+                const float noiseScale = 0.65;
+
+                float light1(float intensity, float attenuation, float dist) {
+                    return intensity / (1.0 + dist * attenuation);
+                }
+                float light2(float intensity, float attenuation, float dist) {
+                    return intensity / (1.0 + dist * dist * attenuation);
+                }
+
+                vec4 draw(vec2 uv) {
+                    vec3 color1 = adjustHue(baseColor1, hue);
+                    vec3 color2 = adjustHue(baseColor2, hue);
+                    vec3 color3 = adjustHue(baseColor3, hue);
+                    
+                    float ang = atan(uv.y, uv.x);
+                    float len = length(uv);
+                    float invLen = len > 0.0 ? 1.0 / len : 0.0;
+                    
+                    float n0 = snoise3(vec3(uv * noiseScale, iTime * 0.5)) * 0.5 + 0.5;
+                    float r0 = mix(mix(innerRadius, 1.0, 0.4), mix(innerRadius, 1.0, 0.6), n0);
+                    float d0 = distance(uv, (r0 * invLen) * uv);
+                    float v0 = light1(1.0, 10.0, d0);
+                    v0 *= smoothstep(r0 * 1.05, r0, len);
+                    float cl = cos(ang + iTime * 2.0) * 0.5 + 0.5;
+                    
+                    float a = iTime * -1.0;
+                    vec2 pos = vec2(cos(a), sin(a)) * r0;
+                    float d = distance(uv, pos);
+                    float v1 = light2(1.5, 5.0, d);
+                    v1 *= light1(1.0, 50.0, d0);
+                    
+                    float v2 = smoothstep(1.0, mix(innerRadius, 1.0, n0 * 0.5), len);
+                    float v3 = smoothstep(innerRadius, mix(innerRadius, 1.0, 0.5), len);
+                    
+                    vec3 col = mix(color1, color2, cl);
+                    col = mix(color3, col, v0);
+                    col = (col + v1) * v2 * v3;
+                    col = clamp(col, 0.0, 1.0);
+                    
+                    return extractAlpha(col);
+                }
+
+                vec4 mainImage(vec2 fragCoord) {
+                    vec2 center = iResolution.xy * 0.5;
+                    float size = min(iResolution.x, iResolution.y);
+                    vec2 uv = (fragCoord - center) / size * 2.0;
+                    
+                    float angle = rot;
+                    float s = sin(angle);
+                    float c = cos(angle);
+                    uv = vec2(c * uv.x - s * uv.y, s * uv.x + c * uv.y);
+                    
+                    uv.x += hover * hoverIntensity * 0.1 * sin(uv.y * 10.0 + iTime);
+                    uv.y += hover * hoverIntensity * 0.1 * sin(uv.x * 10.0 + iTime);
+                    
+                    return draw(uv);
+                }
+
+                void main() {
+                    vec2 fragCoord = vUv * iResolution.xy;
+                    vec4 col = mainImage(fragCoord);
+                    gl_FragColor = vec4(col.rgb * col.a, col.a);
+                }
+            \`;
+
+                // Hide fallback and create WebGL orb
+                if (fallback) fallback.style.display = 'none';
+                
+                const renderer = new Renderer({ alpha: true, premultipliedAlpha: false });
+                const gl = renderer.gl;
+                gl.clearColor(0, 0, 0, 0);
+                
+                // Style the canvas
+                gl.canvas.style.position = 'absolute';
+                gl.canvas.style.top = '0';
+                gl.canvas.style.left = '0';
+                gl.canvas.style.width = '100%';
+                gl.canvas.style.height = '100%';
+                gl.canvas.style.opacity = '0.6';
+                
+                container.appendChild(gl.canvas);
+
+            const geometry = new Triangle(gl);
+            const program = new Program(gl, {
+                vertex: vert,
+                fragment: frag,
+                uniforms: {
+                    iTime: { value: 0 },
+                    iResolution: {
+                        value: new Vec3(
+                            gl.canvas.width,
+                            gl.canvas.height,
+                            gl.canvas.width / gl.canvas.height
+                        ),
+                    },
+                    hue: { value: 0 },
+                    hover: { value: 0 },
+                    rot: { value: 0 },
+                    hoverIntensity: { value: 0.2 },
+                },
+            });
+
+            const mesh = new Mesh(gl, { geometry, program });
+
+            function resize() {
+                if (!container) return;
+                const dpr = window.devicePixelRatio || 1;
+                const width = container.clientWidth;
+                const height = container.clientHeight;
+                renderer.setSize(width * dpr, height * dpr);
+                gl.canvas.style.width = width + "px";
+                gl.canvas.style.height = height + "px";
+                program.uniforms.iResolution.value.set(
+                    gl.canvas.width,
+                    gl.canvas.height,
+                    gl.canvas.width / gl.canvas.height
+                );
+            }
+            window.addEventListener("resize", resize);
+            resize();
+
+            let targetHover = 0;
+            let lastTime = 0;
+            let currentRot = 0;
+            const rotationSpeed = 0.3;
+
+            const handleMouseMove = (e) => {
+                const rect = container.getBoundingClientRect();
+                const x = e.clientX - rect.left;
+                const y = e.clientY - rect.top;
+                const width = rect.width;
+                const height = rect.height;
+                const size = Math.min(width, height);
+                const centerX = width / 2;
+                const centerY = height / 2;
+                const uvX = ((x - centerX) / size) * 2.0;
+                const uvY = ((y - centerY) / size) * 2.0;
+
+                if (Math.sqrt(uvX * uvX + uvY * uvY) < 0.8) {
+                    targetHover = 1;
+                } else {
+                    targetHover = 0;
+                }
+            };
+
+            const handleMouseLeave = () => {
+                targetHover = 0;
+            };
+
+            container.addEventListener("mousemove", handleMouseMove);
+            container.addEventListener("mouseleave", handleMouseLeave);
+
+            const update = (t) => {
+                requestAnimationFrame(update);
+                const dt = (t - lastTime) * 0.001;
+                lastTime = t;
+                program.uniforms.iTime.value = t * 0.001;
+                program.uniforms.hue.value = 0;
+                program.uniforms.hoverIntensity.value = 0.2;
+
+                const effectiveHover = targetHover;
+                program.uniforms.hover.value += (effectiveHover - program.uniforms.hover.value) * 0.1;
+
+                if (effectiveHover > 0.5) {
+                    currentRot += dt * rotationSpeed;
+                }
+                program.uniforms.rot.value = currentRot;
+
+                renderer.render({ scene: mesh });
+            };
+            requestAnimationFrame(update);
+            
+            console.log('WebGL Orb initialized successfully!');
+            
+            } catch (error) {
+                console.error('WebGL Orb failed, using CSS fallback:', error);
+                if (fallback) fallback.style.display = 'block';
+            }
+        }
+
+        // Modern animated background - no JavaScript needed!
+    </script>
+</body>
+</html>`;
+        downloadFile(htmlContent, `${baseFileName}.html`, 'text/html');
+        break;
+      case 'json':
+        const jsonData = {
+          metadata: {
+            fileName: fileName || 'extracted-text',
+            extractedAt: new Date().toISOString(),
+            characterCount: text.length,
+            lineCount: text.split('\n').length,
+            wordCount: text.split(/\s+/).filter(word => word.length > 0).length
+          },
+          content: {
+            rawText: text,
+            lines: text.split('\n'),
+            paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
+          }
+        };
+        downloadFile(JSON.stringify(jsonData, null, 2), `${baseFileName}.json`, 'application/json');
+        break;
+      case 'pdf':
+        const pdf = new jsPDF();
+        
+        // Set up styling
+        pdf.setFont('helvetica', 'bold');
+        pdf.setFontSize(20);
+        pdf.setTextColor(79, 172, 254); // Luna OCR blue
+        
+        // Add title
+        pdf.text(baseFileName, 20, 30);
+        
+        // Add subtitle
+        pdf.setFont('helvetica', 'normal');
+        pdf.setFontSize(10);
+        pdf.setTextColor(128, 128, 128);
+        pdf.text(`Generated by Luna OCR • ${new Date().toLocaleDateString()}`, 20, 40);
+        
+        // Add separator line
+        pdf.setDrawColor(79, 172, 254);
+        pdf.setLineWidth(0.5);
+        pdf.line(20, 45, 190, 45);
+        
+        // Add content
+        pdf.setFont('helvetica', 'normal');
+        pdf.setFontSize(11);
+        pdf.setTextColor(0, 0, 0);
+        
+        const lines = pdf.splitTextToSize(text, 170);
+        pdf.text(lines, 20, 55);
+        
+        // Add footer
+        const pageCount = pdf.internal.getNumberOfPages();
+        for (let i = 1; i <= pageCount; i++) {
+            pdf.setPage(i);
+            pdf.setFont('helvetica', 'normal');
+            pdf.setFontSize(8);
+            pdf.setTextColor(128, 128, 128);
+            pdf.text(`Luna OCR • Page ${i} of ${pageCount}`, 20, 285);
+        }
+        
+        pdf.save(`${baseFileName}.pdf`);
+        break;
+      default:
+        break;
+    }
+  };
+
+  const downloadFile = (content, filename, mimeType) => {
+    const blob = new Blob([content], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  const renderContent = () => {
+    switch (previewMode) {
+      case 'text':
+        // Always show raw text in text mode
+        return (
+          <div className="text-content">
+            <pre className="text-preview">{text}</pre>
+          </div>
+        );
+      case 'markdown':
+        marked.setOptions({
+          breaks: true,
+          gfm: true,
+          tables: true,
+          headerIds: false,
+          mangle: false
+        });
+        return (
+          <div
+            className="markdown-plain"
+            dangerouslySetInnerHTML={{ __html: marked(text) }}
+          />
+        );
+      case 'preview':
+        marked.setOptions({
+          breaks: true,
+          gfm: true,
+          tables: true,
+          headerIds: false,
+          mangle: false
+        });
+        return (
+          <div
+            className="html-preview"
+            dangerouslySetInnerHTML={{ __html: marked(text) }}
+          />
+        );
+      case 'json':
+        const jsonData = {
+          metadata: {
+            fileName: fileName || 'extracted-text',
+            extractedAt: new Date().toISOString(),
+            characterCount: text.length,
+            lineCount: text.split('\n').length,
+            wordCount: text.split(/\s+/).filter(word => word.length > 0).length
+          },
+          content: {
+            rawText: text,
+            lines: text.split('\n'),
+            paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
+          }
+        };
+        return (
+          <SyntaxHighlighter
+            language="json"
+            style={atomDark}
+            customStyle={{
+              background: 'rgba(0, 0, 0, 0.3)',
+              border: '1px solid rgba(255, 255, 255, 0.1)',
+              borderRadius: '12px',
+              fontSize: '0.875rem',
+              lineHeight: '1.6'
+            }}
+          >
+            {JSON.stringify(jsonData, null, 2)}
+          </SyntaxHighlighter>
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="results-container">
+      {/* Header Section */}
+      <div className="results-header">
+        <div className="header-content">
+          <div className="header-left">
+            <h3>Download & Preview</h3>
+            <span className="result-info">
+              {text.length} characters • {text.split('\n').length} lines • Ready to download
+            </span>
+          </div>
+
+          <div className="header-actions">
+            <motion.button
+              className="action-button"
+              onClick={handleCopy}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <AnimatePresence mode="wait">
+                {copied ? (
+                  <motion.div key="copied" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <Check size={16} />
+                  </motion.div>
+                ) : (
+                  <motion.div key="copy" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <Copy size={16} />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+              {copied ? 'Copied!' : 'Copy'}
+            </motion.button>
+          </div>
+        </div>
+      </div>
+
+      {/* Unified Preview & Download Section */}
+      <div className="categories-section">
+        <div className="category-group">
+          <div className="category-header">
+            <Eye size={20} />
+            <span className="category-label">PREVIEW & DOWNLOAD</span>
+          </div>
+          
+          <div className="format-buttons">
+            {[
+              { id: 'text', label: 'Text', icon: <FileText size={24} />, previewId: 'text' },
+              { id: 'md', label: 'Markdown', icon: <Code size={24} />, previewId: 'markdown' },
+              { id: 'html', label: 'HTML', icon: <Eye size={24} />, previewId: 'preview' },
+              { id: 'json', label: 'JSON', icon: <Code size={24} />, previewId: 'json' }
+            ].map((format) => (
+              <motion.div
+                key={format.id}
+                className={`format-button-container ${previewMode === format.previewId ? 'active' : ''}`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+              >
+                <button
+                  className="format-preview-button"
+                  onClick={() => format.previewId && onPreviewModeChange(format.previewId)}
+                  disabled={!format.previewId}
+                >
+                  <div className="format-icon">{format.icon}</div>
+                  <span className="format-label">{format.label}</span>
+                </button>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      {/* Content Preview */}
+      <div className="content-preview">
+        <motion.button
+          className="content-preview-download"
+          onClick={() => {
+            const formatMap = {
+              'text': 'txt',
+              'markdown': 'md', 
+              'preview': 'html',
+              'json': 'json'
+            };
+            handleDownload(formatMap[previewMode] || 'txt');
+          }}
+          whileHover={{ scale: 1.05 }}
+          whileTap={{ scale: 0.95 }}
+          title={`Download current preview as ${previewMode === 'text' ? 'TXT' : previewMode === 'markdown' ? 'MD' : previewMode === 'preview' ? 'HTML' : 'JSON'}`}
+        >
+          <Download size={16} />
+        </motion.button>
+        
+        <AnimatePresence mode="wait">
+          <motion.div
+            key={previewMode}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -20 }}
+            transition={{ duration: 0.3 }}
+          >
+            {renderContent()}
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};
+
+export default ResultsPanel;

src/components/TextViewer.js

@@ -0,0 +1,809 @@
+import React, { useState, useEffect } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { FileText, Code, Eye, ArrowLeft, Download, Copy, Check, Maximize2, ZoomIn, ZoomOut, Search } from 'lucide-react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { atomDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { marked } from 'marked';
+
+const TextViewer = () => {
+  const [text, setText] = useState('');
+  const [fileName, setFileName] = useState('');
+  const [viewMode, setViewMode] = useState('text');
+  const [copied, setCopied] = useState(false);
+  const [fontSize, setFontSize] = useState(16);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isSearching, setIsSearching] = useState(false);
+
+  useEffect(() => {
+    // Get text from URL params or localStorage
+    const urlParams = new URLSearchParams(window.location.search);
+    const textParam = urlParams.get('text');
+    const fileParam = urlParams.get('file');
+    
+    if (textParam) {
+      setText(decodeURIComponent(textParam));
+    } else {
+      const savedText = localStorage.getItem('extractedText');
+      if (savedText) setText(savedText);
+    }
+    
+    if (fileParam) {
+      setFileName(decodeURIComponent(fileParam));
+    } else {
+      setFileName(localStorage.getItem('fileName') || 'extracted-text');
+    }
+  }, []);
+
+  const viewModes = [
+    { id: 'text', label: 'Text', icon: <FileText size={18} />, ext: '.txt' },
+    { id: 'markdown', label: 'Markdown', icon: <Code size={18} />, ext: '.md' },
+    { id: 'html', label: 'Rendered', icon: <Eye size={18} />, ext: '.html' },
+    { id: 'json', label: 'JSON', icon: <Code size={18} />, ext: '.json' }
+  ];
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy text:', err);
+    }
+  };
+
+  const handleBack = () => {
+    window.history.back();
+  };
+
+  const adjustFontSize = (delta) => {
+    setFontSize(prev => Math.max(12, Math.min(24, prev + delta)));
+  };  cons
+t renderContent = () => {
+    const baseStyle = { fontSize: `${fontSize}px`, lineHeight: 1.7 };
+    
+    switch (viewMode) {
+      case 'text':
+        return (
+          <div className="reader-content" style={baseStyle}>
+            <pre className="text-reader">{text}</pre>
+          </div>
+        );
+      case 'markdown':
+        return (
+          <div className="reader-content">
+            <SyntaxHighlighter
+              language="markdown"
+              style={atomDark}
+              customStyle={{
+                ...baseStyle,
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                margin: 0
+              }}
+            >
+              {text}
+            </SyntaxHighlighter>
+          </div>
+        );
+      case 'html':
+        return (
+          <div 
+            className="reader-content html-reader"
+            style={baseStyle}
+            dangerouslySetInnerHTML={{ __html: marked(text) }}
+          />
+        );
+      case 'json':
+        const jsonData = {
+          metadata: {
+            fileName: fileName || 'extracted-text',
+            extractedAt: new Date().toISOString(),
+            characterCount: text.length,
+            lineCount: text.split('\n').length,
+            wordCount: text.split(/\s+/).filter(word => word.length > 0).length
+          },
+          content: {
+            rawText: text,
+            lines: text.split('\n'),
+            paragraphs: text.split('\n\n').filter(p => p.trim().length > 0)
+          }
+        };
+        return (
+          <div className="reader-content">
+            <SyntaxHighlighter
+              language="json"
+              style={atomDark}
+              customStyle={{
+                ...baseStyle,
+                background: 'transparent',
+                border: 'none',
+                padding: 0,
+                margin: 0
+              }}
+            >
+              {JSON.stringify(jsonData, null, 2)}
+            </SyntaxHighlighter>
+          </div>
+        );
+      default:
+        return null;
+    }
+  };  return
+ (
+    <div className="text-viewer-app">
+      {/* Same background as main app */}
+      <div className="viewer-background">
+        <div className="giant-orb-background">
+          <div className="giant-orb-container">
+            <div className="gradient-orb orb-1"></div>
+            <div className="gradient-orb orb-2"></div>
+            <div className="gradient-orb orb-3"></div>
+          </div>
+        </div>
+      </div>
+
+      <div className="viewer-glass-container">
+        {/* Professional Header */}
+        <motion.header 
+          className="viewer-header"
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+        >
+          <div className="header-left">
+            <motion.button
+              className="back-button"
+              onClick={handleBack}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <ArrowLeft size={18} />
+              Back
+            </motion.button>
+            
+            <div className="document-info">
+              <h1 className="document-title">{fileName}</h1>
+              <span className="document-stats">
+                {text.length} chars • {text.split('\n').length} lines • {text.split(/\s+/).filter(w => w.length > 0).length} words
+              </span>
+            </div>
+          </div>
+
+          <div className="header-actions">
+            <div className="search-container">
+              <Search size={16} />
+              <input
+                type="text"
+                placeholder="Search in document..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="search-input"
+              />
+            </div>
+            
+            <div className="font-controls">
+              <button onClick={() => adjustFontSize(-2)} className="font-btn">
+                <ZoomOut size={16} />
+              </button>
+              <span className="font-size">{fontSize}px</span>
+              <button onClick={() => adjustFontSize(2)} className="font-btn">
+                <ZoomIn size={16} />
+              </button>
+            </div>
+
+            <motion.button
+              className="action-btn"
+              onClick={handleCopy}
+              whileHover={{ scale: 1.05 }}
+              whileTap={{ scale: 0.95 }}
+            >
+              <AnimatePresence mode="wait">
+                {copied ? (
+                  <motion.div key="copied" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <Check size={16} />
+                  </motion.div>
+                ) : (
+                  <motion.div key="copy" initial={{ scale: 0 }} animate={{ scale: 1 }} exit={{ scale: 0 }}>
+                    <Copy size={16} />
+                  </motion.div>
+                )}
+              </AnimatePresence>
+              {copied ? 'Copied!' : 'Copy'}
+            </motion.button>
+          </div>
+        </motion.header>       
+ {/* Format Selector */}
+        <motion.div 
+          className="format-selector"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.1 }}
+        >
+          <div className="format-tabs">
+            {viewModes.map((mode, index) => (
+              <motion.button
+                key={mode.id}
+                className={`format-tab ${viewMode === mode.id ? 'active' : ''}`}
+                onClick={() => setViewMode(mode.id)}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: index * 0.1 }}
+              >
+                {mode.icon}
+                <span className="tab-label">{mode.label}</span>
+                <span className="tab-ext">{mode.ext}</span>
+                
+                {viewMode === mode.id && (
+                  <motion.div
+                    className="tab-indicator"
+                    layoutId="viewModeIndicator"
+                    transition={{ type: "spring", stiffness: 500, damping: 30 }}
+                  />
+                )}
+              </motion.button>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Professional Reader */}
+        <motion.main 
+          className="reader-main"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+        >
+          <div className="reader-panel">
+            <AnimatePresence mode="wait">
+              <motion.div
+                key={viewMode}
+                initial={{ opacity: 0, x: 20 }}
+                animate={{ opacity: 1, x: 0 }}
+                exit={{ opacity: 0, x: -20 }}
+                transition={{ duration: 0.3 }}
+                className="content-wrapper"
+              >
+                {renderContent()}
+              </motion.div>
+            </AnimatePresence>
+          </div>
+        </motion.main>
+      </div>     
+ <style jsx>{`
+        .text-viewer-app {
+          min-height: 100vh;
+          background: #0f0f23;
+          color: #ffffff;
+          font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
+          position: relative;
+          overflow-x: hidden;
+        }
+
+        .viewer-background {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: -1;
+        }
+
+        .giant-orb-background {
+          position: fixed;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          pointer-events: none;
+          z-index: -10;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .giant-orb-container {
+          width: 100vmin;
+          height: 100vmin;
+          position: relative;
+          pointer-events: none;
+          transform: translateY(-5vh);
+        }
+
+        .gradient-orb {
+          position: absolute;
+          border-radius: 50%;
+          filter: blur(100px);
+          opacity: 0.3;
+        }
+
+        .orb-1 {
+          top: 10%;
+          right: 20%;
+          width: 300px;
+          height: 300px;
+          background: linear-gradient(45deg, #4facfe, #8b5cf6);
+          animation: float1 20s ease-in-out infinite;
+        }
+
+        .orb-2 {
+          bottom: 20%;
+          left: 15%;
+          width: 250px;
+          height: 250px;
+          background: linear-gradient(45deg, #f093fb, #f5576c);
+          animation: float2 25s ease-in-out infinite;
+        }
+
+        .orb-3 {
+          top: 50%;
+          left: 50%;
+          width: 200px;
+          height: 200px;
+          background: linear-gradient(45deg, #06b6d4, #10b981);
+          animation: float3 30s ease-in-out infinite;
+        }
+
+        @keyframes float1 {
+          0%, 100% { transform: translate(0, 0) rotate(0deg); }
+          25% { transform: translate(-20px, -30px) rotate(90deg); }
+          50% { transform: translate(10px, -20px) rotate(180deg); }
+          75% { transform: translate(-10px, 10px) rotate(270deg); }
+        }
+
+        @keyframes float2 {
+          0%, 100% { transform: translate(0, 0) rotate(0deg); }
+          33% { transform: translate(30px, -20px) rotate(120deg); }
+          66% { transform: translate(-20px, -40px) rotate(240deg); }
+        }
+
+        @keyframes float3 {
+          0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
+          20% { transform: translate(-65%, -35%) rotate(72deg); }
+          40% { transform: translate(-35%, -35%) rotate(144deg); }
+          60% { transform: translate(-35%, -65%) rotate(216deg); }
+          80% { transform: translate(-65%, -65%) rotate(288deg); }
+        }        
+.viewer-glass-container {
+          backdrop-filter: blur(25px);
+          -webkit-backdrop-filter: blur(25px);
+          background: rgba(0, 0, 0, 0.1);
+          border: none;
+          border-radius: 16px;
+          margin: 12px;
+          min-height: calc(100vh - 24px);
+          overflow: hidden;
+          position: relative;
+          z-index: 10;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .viewer-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 20px 24px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+          flex-shrink: 0;
+        }
+
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+
+        .back-button {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 8px 16px;
+          color: #ffffff;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 0.85rem;
+          transition: all 0.3s ease;
+          backdrop-filter: blur(10px);
+        }
+
+        .back-button:hover {
+          background: rgba(255, 255, 255, 0.08);
+          border-color: rgba(79, 172, 254, 0.3);
+        }
+
+        .document-info {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .document-title {
+          font-size: 1.25rem;
+          font-weight: 600;
+          color: #ffffff;
+          margin: 0;
+        }
+
+        .document-stats {
+          font-size: 0.75rem;
+          color: rgba(255, 255, 255, 0.6);
+        }
+
+        .header-actions {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+        }
+
+        .search-container {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 6px 12px;
+          backdrop-filter: blur(10px);
+        }
+
+        .search-input {
+          background: none;
+          border: none;
+          color: #ffffff;
+          font-size: 0.85rem;
+          outline: none;
+          width: 200px;
+        }
+
+        .search-input::placeholder {
+          color: rgba(255, 255, 255, 0.5);
+        }
+
+        .font-controls {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 4px 8px;
+          backdrop-filter: blur(10px);
+        }
+
+        .font-btn {
+          background: none;
+          border: none;
+          color: rgba(255, 255, 255, 0.7);
+          cursor: pointer;
+          padding: 4px;
+          border-radius: 4px;
+          transition: all 0.3s ease;
+        }
+
+        .font-btn:hover {
+          color: #ffffff;
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        .font-size {
+          font-size: 0.75rem;
+          color: rgba(255, 255, 255, 0.8);
+          min-width: 32px;
+          text-align: center;
+        }
+
+        .action-btn {
+          background: rgba(255, 255, 255, 0.05);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 8px;
+          padding: 8px 16px;
+          color: #ffffff;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 0.85rem;
+          transition: all 0.3s ease;
+          backdrop-filter: blur(10px);
+        }
+
+        .action-btn:hover {
+          background: rgba(255, 255, 255, 0.08);
+          border-color: rgba(79, 172, 254, 0.3);
+        }       
+ .format-selector {
+          display: flex;
+          justify-content: center;
+          padding: 16px 24px;
+          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+          flex-shrink: 0;
+        }
+
+        .format-tabs {
+          display: flex;
+          background: rgba(0, 0, 0, 0.3);
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          border-radius: 12px;
+          padding: 4px;
+          backdrop-filter: blur(20px);
+        }
+
+        .format-tab {
+          background: none;
+          border: none;
+          padding: 12px 20px;
+          border-radius: 8px;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 0.85rem;
+          color: rgba(255, 255, 255, 0.7);
+          transition: all 0.3s ease;
+          position: relative;
+          min-width: 120px;
+          justify-content: center;
+        }
+
+        .format-tab:hover {
+          color: #ffffff;
+          background: rgba(255, 255, 255, 0.05);
+        }
+
+        .format-tab.active {
+          color: #ffffff;
+          background: rgba(255, 255, 255, 0.08);
+        }
+
+        .tab-label {
+          font-weight: 500;
+        }
+
+        .tab-ext {
+          font-size: 0.75rem;
+          color: rgba(255, 255, 255, 0.5);
+          font-weight: 400;
+        }
+
+        .tab-indicator {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+          height: 2px;
+          background: linear-gradient(90deg, #4facfe, #8b5cf6);
+          border-radius: 1px;
+        }
+
+        .reader-main {
+          flex: 1;
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .reader-panel {
+          flex: 1;
+          overflow: auto;
+          padding: 0;
+          background: rgba(255, 255, 255, 0.02);
+          margin: 16px 24px 24px;
+          border-radius: 12px;
+          backdrop-filter: blur(10px);
+        }
+
+        .content-wrapper {
+          height: 100%;
+          overflow: auto;
+        }
+
+        .reader-content {
+          padding: 32px;
+          max-width: 900px;
+          margin: 0 auto;
+          line-height: 1.8;
+        }
+
+        .text-reader {
+          background: none;
+          border: none;
+          color: #ffffff;
+          font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+          white-space: pre-wrap;
+          word-wrap: break-word;
+          width: 100%;
+          margin: 0;
+          padding: 0;
+          line-height: inherit;
+        }        .ht
+ml-reader {
+          color: #ffffff;
+          font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
+        }
+
+        .html-reader h1,
+        .html-reader h2,
+        .html-reader h3,
+        .html-reader h4,
+        .html-reader h5,
+        .html-reader h6 {
+          color: #ffffff;
+          margin-bottom: 24px;
+          margin-top: 40px;
+          font-weight: 600;
+          line-height: 1.3;
+        }
+
+        .html-reader h1 {
+          font-size: 2.5rem;
+          background: linear-gradient(45deg, #4facfe, #8b5cf6);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          border-bottom: 2px solid rgba(79, 172, 254, 0.3);
+          padding-bottom: 16px;
+        }
+
+        .html-reader h2 {
+          font-size: 2rem;
+          color: #4facfe;
+          border-left: 4px solid #4facfe;
+          padding-left: 16px;
+        }
+
+        .html-reader h3 {
+          font-size: 1.5rem;
+          color: #8b5cf6;
+        }
+
+        .html-reader p {
+          margin-bottom: 20px;
+          color: rgba(255, 255, 255, 0.9);
+          text-align: justify;
+        }
+
+        .html-reader strong,
+        .html-reader b {
+          color: #ffffff;
+          font-weight: 700;
+          text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+        }
+
+        .html-reader em,
+        .html-reader i {
+          color: rgba(255, 255, 255, 0.95);
+          font-style: italic;
+        }
+
+        .html-reader ul,
+        .html-reader ol {
+          margin-bottom: 20px;
+          padding-left: 32px;
+        }
+
+        .html-reader li {
+          margin-bottom: 12px;
+          color: rgba(255, 255, 255, 0.9);
+          position: relative;
+        }
+
+        .html-reader ul li::marker {
+          color: #4facfe;
+        }
+
+        .html-reader ol li::marker {
+          color: #8b5cf6;
+          font-weight: 600;
+        }
+
+        .html-reader table {
+          width: 100%;
+          border-collapse: collapse;
+          margin: 32px 0;
+          background: rgba(0, 0, 0, 0.2);
+          border-radius: 12px;
+          overflow: hidden;
+          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+        }
+
+        .html-reader th,
+        .html-reader td {
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          padding: 16px 20px;
+          text-align: left;
+          vertical-align: top;
+        }
+
+        .html-reader th {
+          background: linear-gradient(135deg, rgba(79, 172, 254, 0.2), rgba(139, 92, 246, 0.2));
+          font-weight: 700;
+          color: #ffffff;
+          text-transform: uppercase;
+          font-size: 0.85rem;
+          letter-spacing: 0.5px;
+        }
+
+        .html-reader td {
+          background: rgba(255, 255, 255, 0.02);
+        }
+
+        .html-reader tr:nth-child(even) td {
+          background: rgba(255, 255, 255, 0.04);
+        }
+
+        .html-reader tr:hover td {
+          background: rgba(79, 172, 254, 0.05);
+        }
+
+        .html-reader blockquote {
+          border-left: 4px solid #4facfe;
+          padding: 20px 24px;
+          margin: 24px 0;
+          background: rgba(79, 172, 254, 0.05);
+          border-radius: 0 8px 8px 0;
+          font-style: italic;
+          color: rgba(255, 255, 255, 0.9);
+          position: relative;
+        }
+
+        .html-reader blockquote::before {
+          content: '"';
+          font-size: 4rem;
+          color: rgba(79, 172, 254, 0.3);
+          position: absolute;
+          top: -10px;
+          left: 10px;
+          font-family: serif;
+        }
+
+        .html-reader code {
+          background: rgba(0, 0, 0, 0.4);
+          padding: 4px 8px;
+          border-radius: 6px;
+          font-family: 'SF Mono', Monaco, monospace;
+          font-size: 0.9em;
+          color: #4facfe;
+          border: 1px solid rgba(79, 172, 254, 0.2);
+        }
+
+        .html-reader pre {
+          background: rgba(0, 0, 0, 0.4);
+          padding: 24px;
+          border-radius: 12px;
+          overflow-x: auto;
+          margin: 24px 0;
+          border: 1px solid rgba(255, 255, 255, 0.1);
+          position: relative;
+        }
+
+        .html-reader pre code {
+          background: none;
+          padding: 0;
+          border: none;
+          color: rgba(255, 255, 255, 0.9);
+        }
+
+        .html-reader a {
+          color: #4facfe;
+          text-decoration: none;
+          border-bottom: 1px solid rgba(79, 172, 254, 0.3);
+          transition: all 0.3s ease;
+        }
+
+        .html-reader a:hover {
+          color: #8b5cf6;
+          border-bottom-color: rgba(139, 92, 246, 0.5);
+          text-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
+        }
+
+        .html-reader hr {
+          border: none;
+          height: 2px;
+          background: linear-gradient(90deg, transparent, rgba(79, 172, 254, 0.5), transparent);
+          margin: 40px 0;
+        }

src/components/TrueFocus.js

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from "react";
+import { motion } from "framer-motion";
+
+const TrueFocus = ({
+  sentence = "Luna OCR",
+  manualMode = false,
+  blurAmount = 0,
+  borderColor = "#8b5cf6",
+  glowColor = "rgba(139, 92, 246, 0.6)",
+  animationDuration = 0.8,
+  pauseBetweenAnimations = 1.5,
+}) => {
+  const words = sentence.split(" ");
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [lastActiveIndex, setLastActiveIndex] = useState(null);
+  const containerRef = useRef(null);
+  const wordRefs = useRef([]);
+  const [focusRect, setFocusRect] = useState({ x: 0, y: 0, width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!manualMode) {
+      const interval = setInterval(() => {
+        setCurrentIndex((prev) => (prev + 1) % words.length);
+      }, (animationDuration + pauseBetweenAnimations) * 1000);
+
+      return () => clearInterval(interval);
+    }
+  }, [manualMode, animationDuration, pauseBetweenAnimations, words.length]);
+
+  useEffect(() => {
+    if (currentIndex === null || currentIndex === -1) return;
+
+    if (!wordRefs.current[currentIndex] || !containerRef.current) return;
+
+    const parentRect = containerRef.current.getBoundingClientRect();
+    const activeRect = wordRefs.current[currentIndex].getBoundingClientRect();
+
+    setFocusRect({
+      x: activeRect.left - parentRect.left,
+      y: activeRect.top - parentRect.top,
+      width: activeRect.width,
+      height: activeRect.height,
+    });
+  }, [currentIndex, words.length]);
+
+  const handleMouseEnter = (index) => {
+    if (manualMode) {
+      setLastActiveIndex(index);
+      setCurrentIndex(index);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (manualMode) {
+      setCurrentIndex(lastActiveIndex);
+    }
+  };
+
+  return (
+    <div className="focus-container" ref={containerRef}>
+      {words.map((word, index) => {
+        const isActive = index === currentIndex;
+        return (
+          <span
+            key={index}
+            ref={(el) => (wordRefs.current[index] = el)}
+            className={`focus-word ${manualMode ? "manual" : ""} ${isActive && !manualMode ? "active" : ""}`}
+            style={{
+              filter: manualMode
+                ? isActive
+                  ? `blur(0px)`
+                  : `blur(${blurAmount}px)`
+                : isActive
+                ? `blur(0px)`
+                : `blur(${blurAmount}px)`,
+              "--border-color": borderColor,
+              "--glow-color": glowColor,
+              transition: `filter ${animationDuration}s ease`,
+            }}
+            onMouseEnter={() => handleMouseEnter(index)}
+            onMouseLeave={handleMouseLeave}
+          >
+            {word}
+          </span>
+        );
+      })}
+
+      <motion.div
+        className="focus-frame"
+        animate={{
+          x: focusRect.x,
+          y: focusRect.y,
+          width: focusRect.width,
+          height: focusRect.height,
+          opacity: currentIndex >= 0 ? 1 : 0,
+        }}
+        transition={{
+          duration: animationDuration,
+        }}
+        style={{
+          "--border-color": borderColor,
+          "--glow-color": glowColor,
+        }}
+      >
+        <span className="corner top-left"></span>
+        <span className="corner top-right"></span>
+        <span className="corner bottom-left"></span>
+        <span className="corner bottom-right"></span>
+      </motion.div>
+    </div>
+  );
+};
+
+export default TrueFocus;

src/index.css

@@ -0,0 +1,2241 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --bg-primary: #000000;
+  --bg-secondary: #111111;
+  --glass-bg: rgba(255, 255, 255, 0.08);
+  --glass-border: transparent;
+  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --text-primary: #ffffff;
+  --text-secondary: rgba(255, 255, 255, 0.8);
+  --text-muted: rgba(255, 255, 255, 0.6);
+  --accent-primary: #4facfe;
+  --accent-secondary: #8b5cf6;
+  --accent-tertiary: #06b6d4;
+  --gradient-primary: linear-gradient(135deg, #4facfe 0%, #8b5cf6 100%);
+  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+  --gradient-tertiary: linear-gradient(135deg, #06b6d4 0%, #4facfe 100%);
+  --gradient-iridescent: linear-gradient(45deg, #4facfe, #8b5cf6, #06b6d4, #10b981, #f59e0b, #ef4444);
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-height: 100vh;
+}
+
+/* Universal fix - force same colors in all browsers */
+body {
+  background: #0f0f23 !important;
+}
+
+.app::before {
+  background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%) !important;
+}
+
+.glass-container {
+  background: rgba(0, 0, 0, 0.3) !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+.glass-panel {
+  background: rgba(100, 100, 100, 0.1) !important;
+  backdrop-filter: blur(25px) !important;
+  -webkit-backdrop-filter: blur(25px) !important;
+}
+
+.app {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow-y: auto;
+}
+
+.app::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--gradient-iridescent);
+  opacity: 0.03;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.glass-container {
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  background: rgba(0, 0, 0, 0.1);
+  border: none;
+  border-radius: 16px;
+  box-shadow: none;
+  margin: 12px;
+  min-height: auto;
+  overflow: visible;
+  position: relative;
+  z-index: 10;
+  flex: 1;
+}
+
+.glass-container::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
+  background: linear-gradient(45deg,
+      rgba(138, 43, 226, 0.2) 0%,
+      rgba(59, 130, 246, 0.15) 50%,
+      rgba(138, 43, 226, 0.2) 100%);
+  border-radius: 24px;
+  z-index: -1;
+}
+
+.app-header {
+  padding: 20px 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--glass-border);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.logo-icon {
+  font-size: 2.5rem;
+  filter: drop-shadow(0 0 20px rgba(255, 193, 7, 0.5));
+}
+
+.logo h1 {
+  font-size: 2rem;
+  font-weight: 700;
+  filter: drop-shadow(0 0 10px rgba(255, 107, 53, 0.3));
+}
+
+.logo-subtitle {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  font-weight: 400;
+}
+
+@keyframes gradient-shift {
+
+  0%,
+  100% {
+    background-position: 0% 50%;
+  }
+
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+/* Loading Screen Styles */
+.loading-container {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+  height: 100vh !important;
+  background: #141414 !important;
+  z-index: 99999 !important;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  opacity: 1 !important;
+}
+
+@keyframes loading-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.a-hole {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  opacity: 0;
+  animation: hole-appear 0.2s ease-out 0.5s forwards;
+}
+
+@keyframes hole-appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.a-hole::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  display: block;
+  width: 150%;
+  height: 140%;
+  background: radial-gradient(ellipse at 50% 55%, transparent 10%, black 50%);
+  transform: translate3d(-50%, -50%, 0);
+  content: "";
+}
+
+.a-hole::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 5;
+  display: block;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(ellipse at 50% 75%, #a900ff 20%, transparent 75%);
+  mix-blend-mode: overlay;
+  transform: translate3d(-50%, -50%, 0);
+  content: "";
+}
+
+
+
+@keyframes aura-glow {
+  0% {
+    background-position: 0 100%;
+  }
+  100% {
+    background-position: 0 300%;
+  }
+}
+
+.aura {
+  position: absolute;
+  top: -71.5%;
+  left: 50%;
+  z-index: 3;
+  width: 30%;
+  height: 140%;
+  background: linear-gradient(
+      20deg,
+      #00f8f1,
+      #ffbd1e20 16.5%,
+      #fe848f 33%,
+      #fe848f20 49.5%,
+      #00f8f1 66%,
+      #00f8f160 85.5%,
+      #ffbd1e 100%
+    )
+    0 100% / 100% 200%;
+  border-radius: 0 0 100% 100%;
+  filter: blur(50px);
+  mix-blend-mode: plus-lighter;
+  opacity: 0;
+  transform: translate3d(-50%, 0, 0);
+  animation: aura-appear 0.2s ease-out 0.5s forwards, aura-glow 5s infinite linear 0.7s;
+}
+
+@keyframes aura-appear {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.75;
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  opacity: 0;
+}
+
+.a-hole canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+/* TrueFocus Animation Styles */
+.focus-container {
+  position: relative;
+  display: flex;
+  gap: 0.5em;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.focus-word {
+  position: relative;
+  font-size: 1.75rem;
+  font-weight: 300;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'SF Pro Display', system-ui, sans-serif;
+  cursor: pointer;
+  color: #ffffff;
+  letter-spacing: 0.05em;
+  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  transition: filter 0.3s ease, color 0.3s ease;
+}
+
+.focus-word.active {
+  filter: blur(0);
+}
+
+.focus-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  box-sizing: content-box;
+  border: none;
+}
+
+.corner {
+  position: absolute;
+  width: 0.75rem;
+  height: 0.75rem;
+  border: 2.5px solid var(--border-color, #ffffff);
+  filter: drop-shadow(0px 0px 8px var(--glow-color, rgba(255, 255, 255, 0.8)));
+  border-radius: 2px;
+  transition: none;
+}
+
+.top-left {
+  top: -8px;
+  left: -8px;
+  border-right: none;
+  border-bottom: none;
+}
+
+.top-right {
+  top: -8px;
+  right: -8px;
+  border-left: none;
+  border-bottom: none;
+}
+
+.bottom-left {
+  bottom: -8px;
+  left: -8px;
+  border-right: none;
+  border-top: none;
+}
+
+.bottom-right {
+  bottom: -8px;
+  right: -8px;
+  border-left: none;
+  border-top: none;
+}
+
+
+
+
+
+.api-key-input {
+  position: relative;
+}
+
+/* API Key Container */
+.api-key-container {
+  position: relative;
+  width: 300px;
+}
+
+.glass-input {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid var(--glass-border);
+  border-radius: 12px;
+  padding: 12px 16px;
+  padding-right: 45px; /* Make room for clear button */
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  width: 100%;
+  backdrop-filter: blur(10px);
+  transition: all 0.3s ease;
+}
+
+.glass-input:focus {
+  outline: none;
+  border-color: var(--accent-primary);
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  background: rgba(255, 255, 255, 0.08);
+}
+
+.glass-input::placeholder {
+  color: var(--text-muted);
+}
+
+/* Clear API Key Button */
+.clear-api-key-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.clear-api-key-btn:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #ff6b6b;
+  border-color: rgba(255, 107, 107, 0.3);
+  transform: translateY(-50%) scale(1.1);
+}
+
+/* Server API Key Notice */
+.server-api-notice {
+  background: rgba(34, 197, 94, 0.1);
+  border: 1px solid rgba(34, 197, 94, 0.3);
+  border-radius: 12px;
+  padding: 12px 16px;
+  margin-bottom: 20px;
+  text-align: center;
+}
+
+.server-api-notice p {
+  color: rgba(34, 197, 94, 0.9);
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Processing Progress Overlay */
+.processing-progress-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.8);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+}
+
+.processing-progress-container {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 20px;
+  padding: 40px;
+  min-width: 400px;
+  max-width: 500px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
+.progress-content {
+  text-align: center;
+}
+
+.progress-header h3 {
+  color: var(--text-primary);
+  font-size: 1.5rem;
+  margin-bottom: 10px;
+  font-weight: 600;
+}
+
+.progress-file {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  margin-bottom: 30px;
+  padding: 8px 16px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.progress-bar-container {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-bottom: 20px;
+}
+
+.progress-bar {
+  flex: 1;
+  height: 8px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
+  border-radius: 4px;
+  box-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
+}
+
+.progress-percentage {
+  color: var(--text-primary);
+  font-weight: 600;
+  font-size: 1.1rem;
+  min-width: 45px;
+}
+
+.progress-status {
+  min-height: 24px;
+  margin-bottom: 20px;
+}
+
+.status-text {
+  color: var(--text-secondary);
+  font-size: 0.9rem;
+  padding: 6px 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 6px;
+  display: inline-block;
+}
+
+.progress-details {
+  margin-bottom: 25px;
+}
+
+.progress-counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  margin-bottom: 15px;
+  font-size: 1.2rem;
+}
+
+.counter-current {
+  color: var(--accent-primary);
+  font-weight: 700;
+  font-size: 1.4rem;
+}
+
+.counter-separator {
+  color: var(--text-muted);
+  font-weight: 300;
+}
+
+.counter-total {
+  color: var(--text-secondary);
+  font-weight: 600;
+}
+
+.counter-label {
+  color: var(--text-muted);
+  font-size: 0.9rem;
+  margin-left: 5px;
+}
+
+.progress-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.05);
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-size: 0.85rem;
+}
+
+.stat-label {
+  color: var(--text-secondary);
+}
+
+.stat-value {
+  color: var(--accent-primary);
+  font-weight: 600;
+  font-family: 'Courier New', monospace;
+}
+
+/* Console Logs */
+.console-logs {
+  margin: 20px 0;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.console-header {
+  background: rgba(255, 255, 255, 0.1);
+  padding: 8px 12px;
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.console-content {
+  max-height: 120px;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.console-line {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-size: 0.75rem;
+  font-family: 'Courier New', monospace;
+}
+
+.console-time {
+  color: var(--text-muted);
+  min-width: 60px;
+  flex-shrink: 0;
+}
+
+.console-message {
+  color: var(--text-primary);
+  flex: 1;
+  word-break: break-word;
+}
+
+.processing-animation {
+  display: flex;
+  justify-content: center;
+}
+
+.processing-dots {
+  display: flex;
+  gap: 8px;
+}
+
+.processing-dots .dot {
+  width: 8px;
+  height: 8px;
+  background: var(--accent-primary);
+  border-radius: 50%;
+  animation: processingPulse 1.5s ease-in-out infinite;
+}
+
+.processing-dots .dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.processing-dots .dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+@keyframes processingPulse {
+  0%, 80%, 100% {
+    transform: scale(0.8);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1.2);
+    opacity: 1;
+  }
+}
+
+
+
+.menu-container {
+  display: flex;
+  background: rgba(0, 0, 0, 0.4) !important;
+  border: 1px solid rgba(255, 255, 255, 0.1) !important;
+  border-radius: 16px;
+  padding: 8px;
+  backdrop-filter: blur(20px) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
+  position: relative;
+  overflow: hidden;
+}
+
+.menu-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--gradient-iridescent);
+  opacity: 0.05;
+  border-radius: 16px;
+}
+
+.menu-item {
+  position: relative;
+  padding: 12px 24px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-weight: 500;
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  z-index: 2;
+}
+
+.menu-item:hover {
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.menu-item.active {
+  color: var(--text-primary);
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.menu-item-icon {
+  font-size: 1rem;
+}
+
+.app-main {
+  flex: 1;
+  padding: 0 24px 24px;
+  position: relative;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.tab-content {
+  min-height: auto;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 40px;
+}
+
+.glass-panel {
+  background: rgba(100, 100, 100, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+  backdrop-filter: blur(25px);
+  -webkit-backdrop-filter: blur(25px);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+}
+
+
+.glass-panel::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
+}
+
+.nested-panel {
+  background: transparent;
+  border-radius: 8px;
+  padding: 16px;
+  margin: 12px 0;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.flowing-button {
+  background: var(--gradient-primary);
+  border: none;
+  border-radius: 12px;
+  padding: 12px 24px;
+  color: white;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.flowing-button::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.5s ease;
+}
+
+.flowing-button:hover::before {
+  left: 100%;
+}
+
+.flowing-button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
+}
+
+.flowing-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none;
+}
+
+@media (max-width: 768px) {
+  .glass-container {
+    margin: 10px;
+    min-height: calc(100vh - 20px);
+    border-radius: 16px;
+  }
+
+  .app-header {
+    padding: 24px 20px;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .glass-input {
+    width: 100%;
+  }
+
+  .app-main {
+    padding: 0 20px 20px;
+  }
+
+  .flowing-menu {
+    padding: 16px 20px;
+  }
+
+  .menu-container {
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  .menu-item {
+    flex: 1;
+    justify-content: center;
+    padding: 12px 8px;
+  }
+}
+
+/* Iridescence Container */
+.iridescence-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+.iridescence-container canvas {
+  width: 100% !important;
+  height: 100% !important;
+}
+
+
+.flowing-menu-container {
+  width: 100%;
+  height: 200px;
+  overflow: hidden;
+  padding: 24px 40px;
+}
+
+.flowing-menu-nav {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.flowing-menu-item {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  text-align: center;
+  box-shadow: 0 -1px 0 0 #fff;
+}
+
+.flowing-menu-item.active {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.menu-item-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  text-transform: uppercase;
+  text-decoration: none;
+  font-weight: 600;
+  color: white;
+  font-size: 2rem;
+  transition: color 0.3s ease;
+}
+
+.menu-item-link:hover {
+  color: #ffffff;
+}
+
+.menu-item-link:focus {
+  color: white;
+}
+
+.menu-icon {
+  margin-right: 0.5rem;
+  font-size: 1.5rem;
+}
+
+.menu-text {
+  font-size: 1.2rem;
+}
+
+
+
+/* Lanyard Styles */
+.lanyard-wrapper {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  width: 200px;
+  height: 300px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+/* Professional Logo Styles */
+.logo-content h1 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
+  margin-bottom: 4px;
+}
+
+.logo-subtitle {
+  font-size: 0.8rem;
+  color: rgba(255, 255, 255, 0.7);
+  font-weight: 400;
+}
+
+/* More Professional Upload Styles */
+.upload-zone {
+  border: none;
+  border-radius: 16px;
+  transition: all 0.3s ease;
+}
+
+.upload-zone.drag-active {
+  background: rgba(79, 172, 254, 0.05);
+}
+
+.upload-svg {
+  color: rgba(255, 255, 255, 0.6);
+  filter: drop-shadow(0 0 10px rgba(79, 172, 254, 0.2));
+}
+
+.upload-methods {
+  margin-top: 32px;
+}
+
+.upload-method {
+  background: rgba(255, 255, 255, 0.02);
+  border: none;
+  transition: all 0.3s ease;
+}
+
+.upload-method:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-color: rgba(79, 172, 254, 0.3);
+  transform: translateY(-1px);
+}
+
+.method-icon {
+  color: rgba(79, 172, 254, 0.8);
+}
+
+/*
+ Simple Lanyard Styles */
+.lanyard-wrapper {
+  position: fixed;
+  top: 60px;
+  right: 40px;
+  width: 120px;
+  height: 200px;
+  z-index: 10;
+  pointer-events: none;
+}
+
+.lanyard-card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.lanyard-string {
+  width: 2px;
+  height: 80px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3));
+  margin: 0 auto;
+  border-radius: 1px;
+}
+
+.card {
+  width: 80px;
+  height: 100px;
+  background: rgba(0, 0, 0, 0.8);
+  border: none;
+  border-radius: 8px;
+  margin: 0 auto;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.card-content {
+  padding: 12px;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-logo {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #4facfe;
+  text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
+}
+
+.card-text {
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.8);
+  font-weight: 500;
+}
+
+/* Interactive Pullable Lanyard Styles */
+.lanyard-wrapper {
+  position: fixed;
+  top: 40px;
+  right: 40px;
+  width: 120px;
+  height: 250px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+.lanyard-string-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lanyard-string {
+  width: 2px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
+  border-radius: 1px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+.lanyard-card {
+  position: relative;
+  margin-top: 4px;
+}
+
+.card {
+  width: 85px;
+  height: 110px;
+  background: rgba(0, 0, 0, 0.85);
+  border: 1px solid rgba(79, 172, 254, 0.3);
+  border-radius: 10px;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(79, 172, 254, 0.1);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  border-color: rgba(79, 172, 254, 0.5);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(79, 172, 254, 0.2);
+}
+
+.card-content {
+  padding: 16px 12px;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+}
+
+.card-logo {
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: #4facfe;
+  text-shadow: 0 0 15px rgba(79, 172, 254, 0.6);
+  letter-spacing: 1px;
+}
+
+.card-text {
+  font-size: 0.65rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* ReactBits Physics Lanyard Override */
+.lanyard-wrapper {
+  position: fixed !important;
+  top: 40px !important;
+  right: 40px !important;
+  width: 150px !important;
+  height: 300px !important;
+  z-index: 10 !important;
+  pointer-events: auto !important;
+}
+
+
+.flowing-menu-container {
+  width: 100% !important;
+  height: 50px !important;
+  overflow: hidden !important;
+  padding: 8px 24px !important;
+  display: flex !important;
+  justify-content: center !important;
+}
+
+.flowing-menu-nav {
+  display: flex !important;
+  flex-direction: row !important;
+  height: 100% !important;
+  background: rgba(100, 100, 100, 0.1) !important;
+  border: none !important;
+  border-radius: 16px !important;
+  backdrop-filter: blur(20px) !important;
+  overflow: hidden !important;
+  position: relative !important;
+  min-width: 400px !important;
+}
+
+.flowing-menu-item {
+  flex: 1 !important;
+  position: relative !important;
+  overflow: hidden !important;
+  text-align: center !important;
+  border-right: none !important;
+}
+
+.flowing-menu-item:last-child {
+  border-right: none !important;
+}
+
+.flowing-menu-item.active {
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+
+.menu-item-link {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  height: 100% !important;
+  position: relative !important;
+  cursor: pointer !important;
+  text-decoration: none !important;
+  font-weight: 500 !important;
+  color: rgba(255, 255, 255, 0.7) !important;
+  font-size: 0.75rem !important;
+  transition: all 0.3s ease !important;
+  gap: 4px !important;
+  padding: 8px 12px !important;
+}
+
+.menu-item-link:hover {
+  color: #ffffff !important;
+  background: linear-gradient(135deg,
+      rgba(138, 43, 226, 0.1) 0%,
+      rgba(59, 130, 246, 0.08) 50%,
+      rgba(138, 43, 226, 0.05) 100%) !important;
+  box-shadow: 0 0 15px rgba(138, 43, 226, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
+}
+
+.menu-icon {
+  font-size: 1.2rem !important;
+  background: linear-gradient(45deg, #8b5cf6, #3b82f6);
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  opacity: 0.9 !important;
+}
+
+.menu-text {
+  font-size: 0.875rem !important;
+  font-weight: 500 !important;
+}
+
+/* Smooth Physics Lanyard Styles */
+.lanyard-string-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lanyard-string {
+  width: 2px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
+  border-radius: 1px;
+  box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
+}
+
+.lanyard-card {
+  position: relative;
+  margin-top: 4px;
+}
+
+.card {
+  width: 90px;
+  height: 120px;
+  background: rgba(0, 0, 0, 0.9);
+  border: 1px solid rgba(79, 172, 254, 0.4);
+  border-radius: 12px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4), 0 0 20px rgba(79, 172, 254, 0.15);
+  transition: all 0.3s ease;
+}
+
+.card:hover {
+  border-color: rgba(79, 172, 254, 0.6);
+  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5), 0 0 30px rgba(79, 172, 254, 0.25);
+}
+
+.card-content {
+  padding: 16px 12px;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+}
+
+.card-logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #4facfe;
+  text-shadow: 0 0 15px rgba(79, 172, 254, 0.6);
+  letter-spacing: 1px;
+}
+
+.card-text {
+  font-size: 0.7rem;
+  color: rgba(255, 255, 255, 0.9);
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.card-subtitle {
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+  letter-spacing: 0.5px;
+}
+
+/* Simple Visible Lanyard Styles */
+.simple-lanyard-wrapper {
+  position: fixed !important;
+  top: 60px !important;
+  right: 40px !important;
+  width: 120px !important;
+  height: 250px !important;
+  z-index: 1000 !important;
+  pointer-events: auto !important;
+}
+
+.lanyard-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lanyard-string {
+  width: 3px;
+  background: linear-gradient(to bottom,
+      rgba(255, 255, 255, 0.9) 0%,
+      rgba(255, 255, 255, 0.7) 50%,
+      rgba(255, 255, 255, 0.5) 100%);
+  border-radius: 2px;
+  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
+  margin-bottom: 8px;
+}
+
+.lanyard-card {
+  position: relative;
+  width: 90px;
+  height: 120px;
+}
+
+.card-face {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg,
+      rgba(0, 0, 0, 0.9) 0%,
+      rgba(20, 20, 40, 0.9) 100%);
+  border: 2px solid rgba(79, 172, 254, 0.4);
+  border-radius: 12px;
+  backdrop-filter: blur(20px);
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 20px rgba(79, 172, 254, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  display: flex;
+  flex-direction: column;
+  padding: 12px;
+  transition: all 0.3s ease;
+}
+
+.card-face:hover {
+  border-color: rgba(79, 172, 254, 0.6);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(79, 172, 254, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+.card-header {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
+}
+
+.card-logo {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #4facfe;
+  text-shadow: 0 0 15px rgba(79, 172, 254, 0.8);
+  letter-spacing: 2px;
+}
+
+.card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  gap: 4px;
+}
+
+.card-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.95);
+  letter-spacing: 0.5px;
+}
+
+.card-subtitle {
+  font-size: 0.6rem;
+  color: rgba(255, 255, 255, 0.6);
+  font-weight: 400;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: center;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.card-dot {
+  width: 4px;
+  height: 4px;
+  background: rgba(79, 172, 254, 0.6);
+  border-radius: 50%;
+  box-shadow: 0 0 4px rgba(79, 172, 254, 0.4);
+}
+
+/* Giant Central Orb - Hidden until loading complete */
+.giant-orb-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: -10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.8s ease-out;
+}
+
+.giant-orb-background.loaded {
+  opacity: 1;
+}
+
+.giant-orb-container {
+  width: 100vmin;
+  height: 100vmin;
+  position: relative;
+  pointer-events: none;
+  transform: translateY(-5vh);
+}
+
+.orb {
+  position: absolute;
+  pointer-events: auto;
+}
+
+.orb-1 {
+  top: 10%;
+  right: 15%;
+  width: 300px;
+  height: 300px;
+  animation: float1 20s ease-in-out infinite;
+}
+
+.orb-2 {
+  bottom: 20%;
+  left: 10%;
+  width: 250px;
+  height: 250px;
+  animation: float2 25s ease-in-out infinite;
+}
+
+.orb-3 {
+  top: 60%;
+  right: 60%;
+  width: 200px;
+  height: 200px;
+  animation: float3 30s ease-in-out infinite;
+}
+
+@keyframes float1 {
+
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  25% {
+    transform: translate(-20px, -30px) rotate(90deg);
+  }
+
+  50% {
+    transform: translate(10px, -20px) rotate(180deg);
+  }
+
+  75% {
+    transform: translate(-10px, 10px) rotate(270deg);
+  }
+}
+
+@keyframes float2 {
+
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  33% {
+    transform: translate(30px, -20px) rotate(120deg);
+  }
+
+  66% {
+    transform: translate(-20px, -40px) rotate(240deg);
+  }
+}
+
+@keyframes float3 {
+
+  0%,
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+  }
+
+  20% {
+    transform: translate(-15px, 25px) rotate(72deg);
+  }
+
+  40% {
+    transform: translate(25px, 15px) rotate(144deg);
+  }
+
+  60% {
+    transform: translate(20px, -25px) rotate(216deg);
+  }
+
+  80% {
+    transform: translate(-25px, -15px) rotate(288deg);
+  }
+}
+
+.orb-container {
+  position: relative;
+  z-index: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/* Apple-Style Glass Container */
+.glass-container {
+  backdrop-filter: blur(40px);
+  -webkit-backdrop-filter: blur(40px);
+  background: rgba(0, 0, 0, 0.1);
+  border: none;
+  border-radius: 24px;
+  box-shadow: none;
+  margin: 20px;
+  min-height: calc(100vh - 40px);
+  overflow: hidden;
+  position: relative;
+}
+
+.glass-panel {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  border-radius: 16px;
+  padding: 32px;
+  backdrop-filter: blur(20px);
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.nested-panel {
+  background: transparent;
+  border: 1px solid rgba(0, 0, 0, 0.04);
+  border-radius: 12px;
+  padding: 24px;
+  margin: 16px 0;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
+}
+
+/* Fixed Lanyard - Make it VERY visible */
+.simple-lanyard-wrapper {
+  position: fixed !important;
+  top: 80px !important;
+  right: 50px !important;
+  width: 100px !important;
+  height: 200px !important;
+  z-index: 9999 !important;
+  pointer-events: auto !important;
+}
+
+.lanyard-string {
+  width: 4px !important;
+  background: linear-gradient(to bottom,
+      rgba(59, 130, 246, 0.9) 0%,
+      rgba(139, 92, 246, 0.7) 100%) !important;
+  border-radius: 2px !important;
+  box-shadow: 0 0 10px rgba(59, 130, 246, 0.5) !important;
+  margin-bottom: 8px !important;
+}
+
+.card-face {
+  background: rgba(255, 255, 255, 0.95) !important;
+  border: 2px solid rgba(59, 130, 246, 0.3) !important;
+  color: var(--text-primary) !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15) !important, 0 0 20px rgba(59, 130, 246, 0.2) !important;
+}
+
+.card-logo {
+  color: #3b82f6 !important;
+  text-shadow: 0 0 15px rgba(59, 130, 246, 0.6) !important;
+}
+
+.card-title {
+  color: var(--text-primary) !important;
+}
+
+.card-subtitle {
+  color: var(--text-secondary) !important;
+}
+
+.card-dot {
+  background: rgba(59, 130, 246, 0.8) !important;
+  box-shadow: 0 0 6px rgba(59, 130, 246, 0.6) !important;
+}
+/* 
+Results Panel Styles */
+.results-container {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  height: 100%;
+}
+
+.results-header {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 24px;
+  backdrop-filter: blur(20px);
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.header-left h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 8px 0;
+  background: var(--gradient-primary);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.result-info {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+}
+
+.header-actions {
+  display: flex;
+  gap: 12px;
+}
+
+.action-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 20px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+.action-button:hover {
+  background: rgba(255, 255, 255, 0.08);
+  border-color: var(--accent-primary);
+  transform: translateY(-1px);
+}
+
+
+
+/* Categories Section */
+.categories-section {
+  display: flex;
+  gap: 24px;
+}
+
+.category-group {
+  flex: 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 24px;
+  backdrop-filter: blur(20px);
+}
+
+.category-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 20px;
+  color: var(--text-primary);
+}
+
+.category-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--text-muted);
+}
+
+/* Mode Buttons */
+.mode-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mode-button {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 16px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: left;
+}
+
+.mode-button:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+}
+
+.mode-button.active {
+  background: var(--gradient-primary);
+  border-color: var(--accent-primary);
+  color: white;
+  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
+}
+
+/* Download Buttons */
+.download-buttons {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+  gap: 12px;
+}
+
+.download-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 16px 12px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  border-radius: 12px;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  text-align: center;
+  min-height: 80px;
+}
+
+.download-button:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.1);
+  color: var(--text-primary);
+  transform: translateY(-2px);
+}
+
+.download-button.active {
+  background: var(--gradient-secondary);
+  border-color: var(--accent-secondary);
+  color: white;
+  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
+}
+
+.format-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.format-button-container.active .format-icon {
+  color: white;
+}
+
+/* Unified Format Buttons */
+.format-buttons {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin: 0;
+}
+
+.format-button-container {
+  display: flex;
+  align-items: stretch;
+  background: rgba(100, 100, 100, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  overflow: hidden;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(15px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+}
+
+.format-button-container:hover {
+  background: rgba(255, 255, 255, 0.05);
+  border-color: rgba(255, 255, 255, 0.15);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.format-button-container.active {
+  background: var(--gradient-primary);
+  border-color: var(--accent-primary);
+  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
+}
+
+.format-preview-button {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 20px 16px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  min-height: 100px;
+}
+
+.format-preview-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.format-button-container.active .format-preview-button {
+  color: white;
+}
+
+.format-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+}
+
+.format-download-button {
+  display: none;
+}
+
+.format-download-button:hover {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff;
+  transform: scale(1.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.format-button-container.active .format-download-button {
+  background: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+/* Content Preview */
+.content-preview {
+  position: relative;
+  flex: 1;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 16px;
+  padding: 24px 60px 24px 24px;
+  backdrop-filter: blur(20px);
+  overflow: hidden;
+}
+
+.content-preview-download {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+}
+
+.content-preview-download:hover {
+  background: rgba(255, 255, 255, 0.15);
+  border-color: rgba(79, 172, 254, 0.3);
+  color: #4facfe;
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.text-content {
+  background: rgba(0, 0, 0, 0.2);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+  overflow: auto;
+  max-height: 500px;
+}
+
+.text-preview {
+  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: var(--text-primary);
+  white-space: pre-wrap;
+  margin: 0;
+}
+
+/* HTML Preview Styles */
+.html-preview {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--text-primary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 24px;
+  overflow: auto;
+  max-height: 500px;
+  line-height: 1.6;
+}
+
+/* Headers are now styled in the emoji fix section below */
+
+.html-preview p {
+  margin: 16px 0;
+  color: var(--text-secondary);
+}
+
+.html-preview ul,
+.html-preview ol {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.html-preview li {
+  margin: 8px 0;
+  color: var(--text-secondary);
+}
+
+.html-preview table {
+  width: 100%;
+  border-collapse: collapse;
+  background: rgba(0, 0, 0, 0.3);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 24px 0;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.html-preview th,
+.html-preview td {
+  padding: 12px 16px;
+  text-align: left;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.html-preview th {
+  background: linear-gradient(135deg, #4facfe, #8b5cf6);
+  color: white;
+  font-weight: 600;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.html-preview td {
+  color: var(--text-primary);
+}
+
+.html-preview tr:hover {
+  background: rgba(79, 172, 254, 0.1);
+}
+
+.html-preview code {
+  background: rgba(79, 172, 254, 0.1);
+  color: #4facfe;
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: 'SF Mono', Monaco, monospace;
+  font-size: 0.875em;
+}
+
+.html-preview pre {
+  background: rgba(0, 0, 0, 0.4);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+  overflow-x: auto;
+  margin: 16px 0;
+}
+
+.html-preview pre code {
+  background: none;
+  color: var(--text-primary);
+  padding: 0;
+}
+
+.html-preview blockquote {
+  border-left: 4px solid var(--accent-primary);
+  background: rgba(79, 172, 254, 0.1);
+  padding: 16px 20px;
+  margin: 16px 0;
+  border-radius: 0 8px 8px 0;
+  font-style: italic;
+  color: var(--text-secondary);
+}
+
+.html-preview strong {
+  color: var(--accent-primary);
+  font-weight: 600;
+}
+
+.html-preview em {
+  color: var(--accent-secondary);
+  font-style: italic;
+}
+
+.html-preview a {
+  color: var(--accent-primary);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(79, 172, 254, 0.3);
+  transition: all 0.3s ease;
+}
+
+.html-preview a:hover {
+  border-bottom-color: var(--accent-primary);
+  color: var(--accent-secondary);
+}
+
+/* Fix emoji rendering in HTML preview */
+.html-preview {
+  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
+}
+
+/* Force proper emoji rendering - override all text styling */
+.html-preview * {
+  font-variant-emoji: emoji !important;
+}
+
+/* Completely reset styling for any element that might contain emojis */
+.html-preview h1,
+.html-preview h2,
+.html-preview h3,
+.html-preview h4,
+.html-preview h5,
+.html-preview h6,
+.html-preview p,
+.html-preview td,
+.html-preview th,
+.html-preview li,
+.html-preview span,
+.html-preview div {
+  background: none !important;
+  -webkit-background-clip: initial !important;
+  -webkit-text-fill-color: initial !important;
+  background-clip: initial !important;
+  color: var(--text-primary) !important;
+}
+
+/* Specific fix for headers to maintain their styling but not affect emojis */
+.html-preview h1 { 
+  font-size: 2rem; 
+  font-weight: 600;
+  color: var(--text-primary) !important;
+}
+.html-preview h2 { 
+  font-size: 1.5rem; 
+  font-weight: 600;
+  color: var(--text-primary) !important;
+}
+.html-preview h3 { 
+  font-size: 1.25rem; 
+  font-weight: 600;
+  color: var(--text-primary) !important;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .categories-section {
+    flex-direction: column;
+  }
+  
+  .header-content {
+    flex-direction: column;
+    gap: 16px;
+  }
+  
+  .download-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .format-buttons {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+  
+  .mode-buttons {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 8px;
+  }
+}
+
+@media (max-width: 480px) {
+  .results-container {
+    gap: 16px;
+  }
+  
+  .results-header,
+  .category-group {
+    padding: 16px;
+  }
+  
+  .content-preview {
+    padding: 16px 50px 16px 16px;
+  }
+  
+  .download-buttons {
+    grid-template-columns: 1fr;
+  }
+
+  .format-buttons {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .mode-buttons {
+    grid-template-columns: 1fr;
+  }
+}/* Plain 
+Markdown Preview - No Styling */
+.markdown-plain {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--text-primary);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 24px;
+  overflow: auto;
+  max-height: 500px;
+  line-height: 1.6;
+  font-family: monospace;
+}
+
+.markdown-plain h1,
+.markdown-plain h2,
+.markdown-plain h3,
+.markdown-plain h4,
+.markdown-plain h5,
+.markdown-plain h6 {
+  color: var(--text-primary);
+  margin: 16px 0 8px 0;
+  font-weight: normal;
+  font-size: 1rem;
+}
+
+.markdown-plain p {
+  margin: 8px 0;
+  color: var(--text-primary);
+}
+
+.markdown-plain table {
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-family: monospace;
+}
+
+.markdown-plain th,
+.markdown-plain td {
+  border: 1px solid var(--text-muted);
+  padding: 8px 12px;
+  text-align: left;
+  color: var(--text-primary);
+  background: transparent;
+}
+
+.markdown-plain th {
+  font-weight: normal;
+  background: transparent;
+}
+
+.markdown-plain tr:hover {
+  background: transparent;
+}
+
+.markdown-plain strong {
+  font-weight: bold;
+  color: var(--text-primary);
+}
+
+.markdown-plain em {
+  font-style: italic;
+  color: var(--text-primary);
+}
+
+.markdown-plain ul,
+.markdown-plain ol {
+  margin: 8px 0;
+  padding-left: 20px;
+  color: var(--text-primary);
+}
+
+.markdown-plain li {
+  margin: 4px 0;
+  color: var(--text-primary);
+}.mark
+div.markdown-plain a,
+div.markdown-plain a:link,
+div.markdown-plain a:visited {
+  color: #ff9500 !important;
+  text-decoration: none !important;
+  border-bottom: none !important;
+  border: none !important;
+}
+
+div.markdown-plain a:hover {
+  color: #ffb347 !important;
+  text-decoration: underline !important;
+}
+
+div.markdown-plain a:active {
+  color: #cc7700 !important;
+}

src/index.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/utils/encryption.js

@@ -0,0 +1,132 @@
+// Secure encryption utility for API key storage
+// Uses device-specific salt and multiple encryption layers
+
+class ApiKeyEncryption {
+  constructor() {
+    // Generate a device-specific salt based on browser fingerprint
+    this.salt = this.generateDeviceSalt();
+    this.additionalSalt = 'Luna-OCR-2025-Security-Salt';
+  }
+
+  // Generate a consistent salt based on device characteristics
+  generateDeviceSalt() {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    ctx.textBaseline = 'top';
+    ctx.font = '14px Arial';
+    ctx.fillText('Luna OCR Device Salt', 2, 2);
+    
+    const fingerprint = [
+      navigator.userAgent,
+      navigator.language,
+      window.screen.width + 'x' + window.screen.height,
+      new Date().getTimezoneOffset(),
+      canvas.toDataURL()
+    ].join('|');
+    
+    return this.simpleHash(fingerprint);
+  }
+
+  // Simple hash function
+  simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = ((hash << 5) - hash) + char;
+      hash = hash & hash; // Convert to 32-bit integer
+    }
+    return Math.abs(hash).toString(36);
+  }
+
+  // Multi-layer encryption with salt and additional security
+  encrypt(text) {
+    if (!text || text.trim() === '') return '';
+    
+    // Layer 1: Add timestamp and random padding
+    const timestamp = Date.now().toString(36);
+    const randomPadding = Math.random().toString(36).substring(2);
+    const paddedText = `${timestamp}:${text}:${randomPadding}`;
+    
+    // Layer 2: XOR with device salt
+    const saltKey = this.salt + this.additionalSalt;
+    let encrypted = '';
+    
+    for (let i = 0; i < paddedText.length; i++) {
+      const textChar = paddedText.charCodeAt(i);
+      const saltChar = saltKey.charCodeAt(i % saltKey.length);
+      const encryptedChar = textChar ^ saltChar;
+      encrypted += String.fromCharCode(encryptedChar);
+    }
+    
+    // Layer 3: Base64 encode with additional obfuscation
+    const base64 = btoa(encrypted);
+    const obfuscated = base64.split('').reverse().join('');
+    
+    return obfuscated;
+  }
+
+  // Multi-layer decryption
+  decrypt(encryptedText) {
+    if (!encryptedText || encryptedText.trim() === '') return '';
+    
+    try {
+      // Layer 1: Reverse obfuscation and Base64 decode
+      const deobfuscated = encryptedText.split('').reverse().join('');
+      const encrypted = atob(deobfuscated);
+      
+      // Layer 2: XOR decryption with device salt
+      const saltKey = this.salt + this.additionalSalt;
+      let decrypted = '';
+      
+      for (let i = 0; i < encrypted.length; i++) {
+        const encryptedChar = encrypted.charCodeAt(i);
+        const saltChar = saltKey.charCodeAt(i % saltKey.length);
+        const decryptedChar = encryptedChar ^ saltChar;
+        decrypted += String.fromCharCode(decryptedChar);
+      }
+      
+      // Layer 3: Extract original text from padded format
+      const parts = decrypted.split(':');
+      if (parts.length >= 3) {
+        // Remove timestamp and random padding, return original text
+        return parts.slice(1, -1).join(':');
+      }
+      
+      return decrypted; // Fallback for old format
+    } catch (error) {
+      console.warn('Failed to decrypt API key:', error);
+      return '';
+    }
+  }
+
+  // Store encrypted API key with obfuscated key name
+  storeApiKey(apiKey) {
+    if (!apiKey || apiKey.trim() === '') {
+      localStorage.removeItem('luna_secure_config_v2');
+      return;
+    }
+    
+    const encrypted = this.encrypt(apiKey);
+    localStorage.setItem('luna_secure_config_v2', encrypted);
+  }
+
+  // Retrieve and decrypt API key
+  retrieveApiKey() {
+    const encrypted = localStorage.getItem('luna_secure_config_v2');
+    if (!encrypted) return '';
+    
+    return this.decrypt(encrypted);
+  }
+
+  // Clear stored API key
+  clearApiKey() {
+    localStorage.removeItem('luna_secure_config_v2');
+  }
+
+  // Check if API key exists
+  hasStoredApiKey() {
+    return !!localStorage.getItem('luna_secure_config_v2');
+  }
+}
+
+export default new ApiKeyEncryption();

start-dev.js

@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+const { spawn } = require('child_process');
+const path = require('path');
+
+console.log('🚀 Starting Luna OCR Development Environment...\n');
+
+// Start backend server
+console.log('📡 Starting backend server...');
+const backend = spawn('npm', ['start'], {
+  cwd: path.join(__dirname, 'server'),
+  stdio: 'inherit',
+  shell: true
+});
+
+// Wait a bit for backend to start
+setTimeout(() => {
+  console.log('\n🎨 Starting frontend...');
+  const frontend = spawn('npm', ['start'], {
+    stdio: 'inherit',
+    shell: true
+  });
+
+  // Handle process termination
+  process.on('SIGINT', () => {
+    console.log('\n🛑 Shutting down...');
+    backend.kill();
+    frontend.kill();
+    process.exit();
+  });
+
+  frontend.on('close', (code) => {
+    console.log(`Frontend exited with code ${code}`);
+    backend.kill();
+  });
+
+  backend.on('close', (code) => {
+    console.log(`Backend exited with code ${code}`);
+    frontend.kill();
+  });
+
+}, 2000);
+
+backend.on('close', (code) => {
+  console.log(`Backend exited with code ${code}`);
+});