Added custom chat component'

backend/app.py

@@ -2,20 +2,13 @@ from fastapi import FastAPI, File, UploadFile, HTTPException
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
-from mistralai import Mistral
 import os
 import tempfile
-import json
-import re
-import string
 from dotenv import load_dotenv
-from difflib import SequenceMatcher
-from pydantic import BaseModel, Field
+from pydantic import BaseModel
 from typing import Optional, List
-from langchain.chat_models import init_chat_model
 import anthropic
-import google
-from google import genai
+
 # Load environment variables
 load_dotenv()
 
@@ -107,1120 +100,32 @@ Keep responses concise and educational. When relevant, use LaTeX math notation l
 
 @app.post("/upload_pdf")
 async def upload_pdf(file: UploadFile = File(...)):
-    """Upload PDF to Mistral Document AI"""
-    print(f"📄 Processing file: {file.filename}")
-    
-    # Get Mistral API key
-    api_key = os.environ.get("MISTRAL_API_KEY")
-    if not api_key:
-        print("❌ No Mistral API key found")
-        raise HTTPException(status_code=500, detail="MISTRAL_API_KEY not set in environment")
+    """Simple PDF upload endpoint that saves the file locally"""
+    print(f"📄 Uploading file: {file.filename}")
     
     try:
-        # Initialize Mistral client
-        client = Mistral(api_key=api_key)
-        print("🔑 Mistral client initialized")
-        
         # Read PDF bytes
         file_bytes = await file.read()
         print(f"📊 File size: {len(file_bytes)} bytes")
         
-        # Create temporary file for Mistral upload
+        # Create temporary file to save PDF
         with tempfile.NamedTemporaryFile(delete=False, suffix=".pdf") as temp_file:
             temp_file.write(file_bytes)
             temp_file_path = temp_file.name
         
-        try:
-            print("🚀 Uploading to Mistral...")
-            
-            # Upload PDF to Mistral for OCR processing
-            uploaded_pdf = client.files.upload(
-                file={
-                    "file_name": file.filename or "document.pdf",
-                    "content": open(temp_file_path, "rb"),
-                },
-                purpose="ocr"
-            )
-            
-            print(f"✅ Upload successful! File ID: {uploaded_pdf.id}")
-            
-            return {
-                "message": "PDF uploaded to Mistral successfully!",
-                "file_id": uploaded_pdf.id,
-                "filename": file.filename,
-                "status": "uploaded",
-                "mistral_response": str(uploaded_pdf)
-            }
-            
-        finally:
-            # Clean up temporary file
-            os.unlink(temp_file_path)
-            print("🗑️ Temporary file cleaned up")
-            
-    except Exception as e:
-        print(f"❌ Error with Mistral API: {e}")
-        raise HTTPException(status_code=500, detail=f"Mistral API error: {str(e)}")
-
-@app.get("/process_ocr/{file_id}")
-async def process_ocr_content(file_id: str):
-    """Process OCR content using proper Mistral OCR API"""
-    print(f"🔍 Processing OCR for file ID: {file_id}")
-    
-    # Get Mistral API key
-    api_key = os.environ.get("MISTRAL_API_KEY")
-    if not api_key:
-        raise HTTPException(status_code=500, detail="MISTRAL_API_KEY not set")
-    
-    try:
-        # Initialize Mistral client
-        client = Mistral(api_key=api_key)
-        
-        # Get signed URL for the file
-        print("🔗 Getting signed URL...")
-        signed_url = client.files.get_signed_url(file_id=file_id, expiry=1)
-        print(f"✅ Signed URL obtained")
-        
-        # Process OCR using the proper API
-        print("🚀 Processing OCR...")
-        ocr_response = client.ocr.process(
-            model="mistral-ocr-latest",
-            document={
-                "type": "document_url",
-                "document_url": signed_url.url,
-            },
-            include_image_base64=True  # Include images for full processing
-        )
-        
-        print(f"✅ OCR processing complete! Found {len(ocr_response.pages)} pages")
-        
-        # Debug: Print raw OCR response structure
-        print("\n" + "="*80)
-        print("🔍 RAW MISTRAL OCR RESPONSE DEBUG:")
-        print("="*80)
-        
-        for page_idx, page in enumerate(ocr_response.pages):
-            print(f"\n📄 PAGE {page_idx + 1} RAW MARKDOWN:")
-            print("-" * 50)
-            print(repr(page.markdown))  # Using repr() to show escape characters
-            print("-" * 50)
-            print("RENDERED:")
-            print(page.markdown[:500] + "..." if len(page.markdown) > 500 else page.markdown)
-            print(f"TOTAL LENGTH: {len(page.markdown)} characters")
-            
-        print("="*80)
-        print("END RAW OCR DEBUG")
-        print("="*80 + "\n")
-        
-        # Process each page and extract structured data (without per-page chunking)
-        processed_pages = []
-        all_page_markdown = []
-        
-        for page_idx, page in enumerate(ocr_response.pages):
-            print(f"📄 Page {page_idx + 1}: {len(page.markdown)} chars, {len(page.images)} images")
-            
-            page_data = {
-                "index": page.index,
-                "markdown": page.markdown,
-                "images": [],
-                "dimensions": {
-                    "dpi": page.dimensions.dpi,
-                    "height": page.dimensions.height,
-                    "width": page.dimensions.width
-                }
-            }
-            
-            # Process images with coordinates
-            for img in page.images:
-                image_data = {
-                    "id": img.id,
-                    "coordinates": {
-                        "top_left_x": img.top_left_x,
-                        "top_left_y": img.top_left_y,
-                        "bottom_right_x": img.bottom_right_x,
-                        "bottom_right_y": img.bottom_right_y
-                    },
-                    "has_base64": bool(img.image_base64)  # Don't include actual base64 in response
-                }
-                page_data["images"].append(image_data)
-            
-            processed_pages.append(page_data)
-            all_page_markdown.append(page.markdown)
-        
-        # Combine all markdown into single document
-        combined_markdown = '\n\n---\n\n'.join(all_page_markdown)
-        print(f"📋 Combined document: {len(combined_markdown)} chars total")
-        
-        # Auto-chunk the entire document once - try Gemini first, then fallback
-        document_chunks = []
-        original_markdown = combined_markdown
-        try:
-            print(f"🧠 Auto-chunking entire document with Gemini...")
-            document_chunks, original_markdown = await gemini_chunk_document(combined_markdown)
-            
-            # If Gemini failed, try the old Fireworks method
-            if not document_chunks:
-                print(f"🔄 Gemini failed, falling back to Fireworks...")
-                document_chunks, original_markdown = await auto_chunk_document(combined_markdown, client)
-            
-            print(f"📊 Document chunks found: {len(document_chunks)}")
-            for i, chunk in enumerate(document_chunks):
-                topic = chunk.get('topic', 'Unknown')
-                preview = chunk.get('text', chunk.get('start_phrase', ''))[:50] + "..." if chunk.get('text', chunk.get('start_phrase', '')) else 'No content'
-                print(f"  {i+1}. {topic}: {preview}")
-                
-        except Exception as chunk_error:
-            print(f"⚠️ Document chunking failed: {chunk_error}")
-            document_chunks = []
-            original_markdown = combined_markdown
-        
-        print(f"📝 Total processed pages: {len(processed_pages)}")
-        
-        return {
-            "file_id": file_id,
-            "pages": processed_pages,
-            "total_pages": len(processed_pages),
-            "combined_markdown": original_markdown,  # Send original version for highlighting
-            "chunks": document_chunks,
-            "status": "processed"
-        }
-        
-    except Exception as e:
-        print(f"❌ Error processing OCR: {e}")
-        raise HTTPException(status_code=500, detail=f"Error processing OCR: {str(e)}")
-
-@app.get("/get_image/{file_id}/{image_id}")
-async def get_image_base64(file_id: str, image_id: str):
-    """Get base64 image data for a specific image"""
-    print(f"🖼️ Getting image {image_id} from file {file_id}")
-    
-    # Get Mistral API key
-    api_key = os.environ.get("MISTRAL_API_KEY")
-    if not api_key:
-        raise HTTPException(status_code=500, detail="MISTRAL_API_KEY not set")
-    
-    try:
-        # Initialize Mistral client
-        client = Mistral(api_key=api_key)
-        
-        # Get signed URL and process OCR again (we could cache this)
-        signed_url = client.files.get_signed_url(file_id=file_id, expiry=1)
-        
-        ocr_response = client.ocr.process(
-            model="mistral-ocr-latest",
-            document={
-                "type": "document_url",
-                "document_url": signed_url.url,
-            },
-            include_image_base64=True
-        )
-        
-        # Find the requested image
-        for page in ocr_response.pages:
-            for img in page.images:
-                if img.id == image_id:
-                    return {
-                        "image_id": image_id,
-                        "image_base64": img.image_base64,
-                        "coordinates": {
-                            "top_left_x": img.top_left_x,
-                            "top_left_y": img.top_left_y,
-                            "bottom_right_x": img.bottom_right_x,
-                            "bottom_right_y": img.bottom_right_y
-                        }
-                    }
-        
-        raise HTTPException(status_code=404, detail=f"Image {image_id} not found")
-        
-    except Exception as e:
-        print(f"❌ Error getting image: {e}")
-        raise HTTPException(status_code=500, detail=f"Error getting image: {str(e)}")
-
-class ChunkSchema(BaseModel):
-    """Schema for document chunks suitable for creating interactive lessons."""
-    topic: str = Field(description="Brief descriptive name (2-6 words) for the educational content")
-    text: str = Field(description="Complete chunk text with exact markdown/LaTeX formatting preserved, containing 2-3 related educational concepts")
-
-class ChunkList(BaseModel):
-    """Container for a list of document chunks."""
-    chunks: List[ChunkSchema] = Field(description="List of identified chunks for interactive lessons")
-
-def find_paragraph_end(text, start_pos):
-    """Find the end of a paragraph starting from start_pos"""
-    end_pos = start_pos
-    while end_pos < len(text) and text[end_pos] not in ['\n', '\r']:
-        end_pos += 1
-
-    return end_pos
-
-def find_paragraph_end(text, start_pos):
-    """Find the end of current paragraph (looks for \\n\\n or document end)"""
-    pos = start_pos
-    while pos < len(text):
-        if pos < len(text) - 1 and text[pos:pos+2] == '\n\n':
-            return pos  # End at paragraph break
-        elif text[pos] in '.!?':
-            # Found sentence end, check if paragraph continues
-            next_pos = pos + 1
-            while next_pos < len(text) and text[next_pos] in ' \t':
-                next_pos += 1
-            if next_pos < len(text) - 1 and text[next_pos:next_pos+2] == '\n\n':
-                return next_pos  # Paragraph ends after this sentence
-            pos = next_pos
-        else:
-            pos += 1
-    return min(pos, len(text))
-
-def fuzzy_find(text, pattern, start_pos=0):
-    """Find the best fuzzy match for pattern in text starting from start_pos"""
-    best_ratio = 0
-    best_pos = -1
-    
-    # Search in sliding windows
-    pattern_len = len(pattern)
-    for i in range(start_pos, len(text) - pattern_len + 1):
-        window = text[i:i + pattern_len]
-        ratio = SequenceMatcher(None, pattern.lower(), window.lower()).ratio()
-
-        if ratio > best_ratio and ratio > 0.8:  # Much stricter: 80% similarity
-            best_ratio = ratio
-            best_pos = i
-    
-    return best_pos if best_pos != -1 else None
-
-def clean_academic_content(text):
-    """Remove common academic paper noise that breaks natural chunking"""
-    
-    # Patterns to remove/clean
-    patterns_to_remove = [
-        # Author contribution footnotes
-        r'\[\^\d+\]:\s*[∗\*]+\s*Equal contribution[^.]*\.',
-        r'\[\^\d+\]:\s*[†\*]+\s*Correspondence to[^.]*\.',
-        r'\[\^\d+\]:\s*[†\*]+\s*Corresponding author[^.]*\.',
-        
-        # Copyright notices
-        r'Copyright \(c\) \d{4}[^.]*\.',
-        r'All rights reserved\.',
-        
-        # Common academic noise
-        r'\[\^\d+\]:\s*Code available at[^.]*\.',
-        r'\[\^\d+\]:\s*Data available at[^.]*\.',
-        r'\[\^\d+\]:\s*This work was[^.]*\.',
-        
-        # Funding acknowledgments (often break paragraphs)
-        r'This research was supported by[^.]*\.',
-        r'Funded by[^.]*\.',
-        
-        # Page numbers and headers that shouldn't end paragraphs
-        r'^\d+$',  # Standalone page numbers
-        r'^Page \d+',
-        
-        # DOI and URL patterns that break paragraphs
-        r'DOI:\s*\S+',
-        r'arXiv:\d{4}\.\d{4,5}',
-    ]
-    
-    cleaned_text = text
-    for pattern in patterns_to_remove:
-        cleaned_text = re.sub(pattern, '', cleaned_text, flags=re.MULTILINE | re.IGNORECASE)
-    
-    # Clean up multiple newlines created by removals
-    cleaned_text = re.sub(r'\n\n\n+', '\n\n', cleaned_text)
-    
-    return cleaned_text.strip()
-
-def validate_paragraph_chunk(chunk_text):
-    """Check if a chunk looks like valid content (not metadata/noise)"""
-    # Skip very short chunks
-    if len(chunk_text.strip()) < 50:
-        return False
-    
-    # Skip chunks that are mostly footnote references
-    footnote_refs = len(re.findall(r'\[\^\d+\]', chunk_text))
-    if footnote_refs > len(chunk_text.split()) / 10:  # More than 10% footnote refs
-        return False
-    
-    # Skip chunks that are mostly citations
-    citations = len(re.findall(r'\[\d+\]', chunk_text))
-    if citations > len(chunk_text.split()) / 8:  # More than 12.5% citations
-        return False
-    
-    # Skip chunks that are mostly symbols/special chars
-    normal_chars = sum(1 for c in chunk_text if c.isalnum() or c in string.whitespace)
-    if normal_chars / len(chunk_text) < 0.7:  # Less than 70% normal content
-        return False
-    
-    return True
-
-def programmatic_chunk_document(document_markdown):
-    """Chunk document by natural paragraph boundaries - much more reliable than LLM"""
-    if not document_markdown or len(document_markdown.strip()) < 100:
-        return []
-    
-    # Use original document without any cleaning to preserve integrity
-    original_markdown = document_markdown
-    print(f"📄 Using original document: {len(document_markdown)} chars")
-    
-    chunks = []
-    start_pos = 0
-    chunk_count = 0
-    
-    print(f"🧠 Using programmatic paragraph-based chunking...")
-    
-    # Find all proper paragraph endings: [.!?] followed by \n\n
-    paragraph_ends = []
-    
-    # Pattern: sentence punctuation followed by \n\n
-    pattern = r'([.!?])\n\n'
-    matches = re.finditer(pattern, original_markdown)
-    
-    for match in matches:
-        end_pos = match.end() - 3  # Position right after punctuation, before \n\n
-        paragraph_ends.append(end_pos)
-    
-    print(f"📊 Found {len(paragraph_ends)} natural paragraph endings")
-    
-    # Create chunks from paragraph boundaries using original document
-    for i, end_pos in enumerate(paragraph_ends):
-        # Extract from original markdown
-        chunk_text_clean = original_markdown[start_pos:end_pos + 1]
-        
-        # Validate chunk quality
-        if not validate_paragraph_chunk(chunk_text_clean):
-            print(f"   ❌ Skipping low-quality chunk: {chunk_text_clean[:50]}...")
-            start_pos = end_pos + 3  # Skip past .\n\n
-            continue
-        
-        chunk_count += 1
-        
-        # Map positions back to original document for highlighting
-        # For now, use cleaned positions (we could implement position mapping if needed)
-        chunk_text = chunk_text_clean
-        
-        # Create a simple topic from first few words
-        first_line = chunk_text.split('\n')[0].strip()
-        topic = first_line[:50] + "..." if len(first_line) > 50 else first_line
-        
-        chunks.append({
-            "topic": topic,
-            "start_position": start_pos,
-            "end_position": end_pos + 1,
-            "start_phrase": chunk_text[:20] + "...",  # First 20 chars
-            "end_phrase": "..." + chunk_text[-20:],   # Last 20 chars
-            "found_start": True,
-            "found_end": True
-        })
-        
-        print(f"   ✅ Chunk {chunk_count}: {start_pos}-{end_pos + 1} (length: {end_pos + 1 - start_pos})")
-        print(f"      Topic: {topic}")
-        print(f"      Preview: {chunk_text[:80]}...")
-        
-        # Next chunk starts after \n\n
-        start_pos = end_pos + 3  # Skip past .\n\n
-    
-    # Handle any remaining text (document might not end with proper paragraph)
-    if start_pos < len(original_markdown):
-        remaining_text = original_markdown[start_pos:].strip()
-        if remaining_text and validate_paragraph_chunk(remaining_text):
-            chunk_count += 1
-            first_line = remaining_text.split('\n')[0].strip()
-            topic = first_line[:50] + "..." if len(first_line) > 50 else first_line
-            
-            chunks.append({
-                "topic": topic,
-                "start_position": start_pos,
-                "end_position": len(original_markdown),
-                "start_phrase": remaining_text[:20] + "...",
-                "end_phrase": "..." + remaining_text[-20:],
-                "found_start": True,
-                "found_end": True
-            })
-            
-            print(f"   ✅ Final chunk {chunk_count}: {start_pos}-{len(original_markdown)} (remaining text)")
-        else:
-            print(f"   ❌ Skipping low-quality remaining text")
-    
-    print(f"📊 Created {len(chunks)} high-quality paragraph-based chunks")
-    
-    # Note: We're returning chunks based on original document positions
-    # The frontend will use the original document for highlighting
-    return chunks, document_markdown
-
-def split_document_into_batches(document_markdown, max_chars=8000):
-    """Split document into manageable batches for LLM processing"""
-    if len(document_markdown) <= max_chars:
-        return [document_markdown]
-    
-    batches = []
-    current_pos = 0
-    
-    while current_pos < len(document_markdown):
-        # Try to find a good breaking point (paragraph boundary)
-        end_pos = min(current_pos + max_chars, len(document_markdown))
-        
-        # If we're not at the end, try to break at a paragraph boundary
-        if end_pos < len(document_markdown):
-            # Look for \n\n within the last 1000 characters of this batch
-            search_start = max(end_pos - 1000, current_pos)
-            last_paragraph = document_markdown.rfind('\n\n', search_start, end_pos)
-            
-            if last_paragraph != -1 and last_paragraph > current_pos:
-                end_pos = last_paragraph + 2  # Include the \n\n
-        
-        batch = document_markdown[current_pos:end_pos]
-        batches.append(batch)
-        current_pos = end_pos
-        
-        print(f"📄 Created batch {len(batches)}: {len(batch)} chars (pos {current_pos-len(batch)}-{current_pos})")
-    
-    return batches
-
-async def gemini_chunk_document(document_markdown):
-    """Auto-chunk a document using Google Gemini 2.5 Pro with reliable structured output"""
-    
-    # Get Gemini API key
-    gemini_api_key = os.environ.get("GEMINI_API_KEY")
-    if not gemini_api_key:
-        print("⚠️ No Gemini API key found")
-        return None, document_markdown
-    
-    print(f"📄 Document length: {len(document_markdown)} characters")
-    
-    try:
-        # Initialize Gemini client
-        client = genai.Client(api_key=gemini_api_key)
-        
-        # Split document into batches if it's too large (Gemini has token limits)
-        batches = split_document_into_batches(document_markdown, max_chars=12000)  # Gemini can handle larger batches
-        print(f"📄 Split document into {len(batches)} batches for Gemini")
-        
-        all_chunks = []
-        
-        # Process each batch
-        for batch_idx, batch in enumerate(batches):
-            print(f"\n🔄 Processing batch {batch_idx + 1}/{len(batches)} ({len(batch)} chars) with Gemini")
-            
-            try:
-                # Create the prompt for Gemini
-                prompt = f"""You are an educational content analyzer. Analyze this document section and break it into logical learning chunks.
-
-Each chunk should:
-- Contain 2-3 related educational concepts that naturally belong together
-- Be 150-500 words (optimal for learning)
-- Have clear educational value
-- Preserve all markdown/LaTeX formatting exactly
-- Skip: abstracts, acknowledgments, references, author info, page numbers
-
-Return your response as a valid JSON object with this exact structure:
-{{
-  "chunks": [
-    {{
-      "topic": "Brief descriptive name (2-6 words)",
-      "text": "Complete chunk text with exact formatting preserved"
-    }}
-  ]
-}}
-
-Document section to analyze:
-{batch}
-
-Important: Return ONLY the JSON object, no other text."""
-
-                # Call Gemini 2.5 Pro (disable thinking for faster/cheaper responses)
-                response = client.models.generate_content(
-                    model="gemini-2.5-pro",
-                    contents=prompt,
-                    config=genai.types.GenerateContentConfig(
-                        thinking_config=genai.types.ThinkingConfig(thinking_budget=-1)
-                    )
-                )
-                
-                # Extract and parse response
-                response_text = response.text.strip()
-                print(f"📋 Gemini response preview: {response_text}...")
-                
-                # Clean up the response (remove code blocks if present)
-                clean_response = response_text
-                if clean_response.startswith('```json'):
-                    clean_response = clean_response[7:]
-                if clean_response.endswith('```'):
-                    clean_response = clean_response[:-3]
-                clean_response = clean_response.strip()
-                
-                # Parse JSON
-                try:
-                    json_data = json.loads(clean_response)
-                    
-                    # Validate structure
-                    if not isinstance(json_data, dict) or 'chunks' not in json_data:
-                        print(f"❌ Invalid response structure from Gemini batch {batch_idx + 1}")
-                        continue
-                    
-                    chunks = json_data['chunks']
-                    if not isinstance(chunks, list):
-                        print(f"❌ 'chunks' is not a list in batch {batch_idx + 1}")
-                        continue
-                    
-                    # Process chunks
-                    batch_chunks = []
-                    for i, chunk in enumerate(chunks):
-                        if not isinstance(chunk, dict) or 'topic' not in chunk or 'text' not in chunk:
-                            print(f"❌ Invalid chunk structure in batch {batch_idx + 1}, chunk {i}")
-                            continue
-                        
-                        # Clean up text formatting
-                        chunk_text = chunk['text']
-                        # Replace literal \n with actual newlines
-                        chunk_text = chunk_text.replace('\\n', '\n')
-                        
-                        batch_chunks.append({
-                            "topic": chunk['topic'],
-                            "text": chunk_text,
-                            "chunk_index": len(all_chunks) + len(batch_chunks)
-                        })
-                        
-                        print(f"✅ Processed chunk: {chunk['topic']}")
-                    
-                    all_chunks.extend(batch_chunks)
-                    print(f"📊 Batch {batch_idx + 1} added {len(batch_chunks)} chunks (total: {len(all_chunks)})")
-                    
-                except json.JSONDecodeError as e:
-                    print(f"❌ JSON parsing failed for batch {batch_idx + 1}: {e}")
-                    print(f"❌ Response was: {response_text}")
-                    continue
-                    
-            except Exception as e:
-                print(f"❌ Error processing batch {batch_idx + 1} with Gemini: {e}")
-                continue
-        
-        # Return results
-        if all_chunks:
-            print(f"✅ Gemini successfully processed document with {len(all_chunks)} total chunks")
-            return all_chunks, document_markdown
-        else:
-            print("❌ Gemini processing failed for all batches")
-            return None, document_markdown
-            
-    except Exception as e:
-        print(f"❌ Gemini chunking error: {e}")
-        return None, document_markdown
-
-async def auto_chunk_document(document_markdown, client=None):
-    """Auto-chunk a document using LLM with batch processing for large documents"""
-    
-    # Debug: Print document info
-    print(f"📄 Document length: {len(document_markdown)} characters")
-    
-    # Get Fireworks API key
-    fireworks_api_key = os.environ.get("FIREWORKS_API_KEY")
-    if not fireworks_api_key:
-        print("⚠️ No Fireworks API key found, falling back to programmatic chunking")
-        chunks, original_markdown = programmatic_chunk_document(document_markdown)
-        return chunks, original_markdown
-    
-    # Split document into batches if it's too large
-    batches = split_document_into_batches(document_markdown, max_chars=8000)
-    print(f"📄 Split document into {len(batches)} batches")
-    
-    all_chunks = []
-    
-    # Process each batch
-    for batch_idx, batch in enumerate(batches):
-        print(f"\n🔄 Processing batch {batch_idx + 1}/{len(batches)} ({len(batch)} chars)")
-        
-        # Try structured output with retry logic for this batch
-        max_retries = 3
-        batch_chunks = None
-        
-        for attempt in range(max_retries):
-            try:
-                print(f"🚀 Batch {batch_idx + 1} Attempt {attempt + 1}/{max_retries}: Calling Fireworks...")
-                
-                # Initialize LLM
-                llm = init_chat_model(
-                    "accounts/fireworks/models/llama4-maverick-instruct-basic", 
-                    model_provider="fireworks",
-                    api_key=fireworks_api_key
-                )
-            
-                # Use regular LLM and manual JSON parsing
-                prompt = f"""You are an educational content analyzer. Break this document section into logical learning chunks.
-
-                            IMPORTANT: Return your response as a valid JSON object with this exact structure:
-                            {{
-                            "chunks": [
-                                {{
-                                "topic": "Brief topic name",
-                                "text": "Complete chunk text with exact formatting"
-                                }}
-                            ]
-                            }}
-
-                            Rules for chunking:
-                            - Each chunk should contain 2-3 related educational concepts
-                            - Keep chunks concise: 100-300 words (avoid very long text blocks)
-                            - Preserve all markdown/LaTeX formatting exactly as written
-                            - Skip: abstracts, acknowledgements, references, author information, page numbers
-                            - Create separate chunks for figures/tables with their captions
-                            - Never split mathematical expressions or LaTeX formulas
-                            - Process ALL content in this section - don't skip any educational material
-                            - Ensure all JSON strings are properly formatted (no unescaped quotes)
-
-                            Document section to analyze:
-                            {batch}
-
-                            Return only the JSON object, no other text."""
-
-                # Call regular LLM
-                result = llm.invoke(prompt)
-                print(f"📋 Raw LLM response type: {type(result)}")
-                
-                # Extract text content
-                if hasattr(result, 'content'):
-                    response_text = result.content
-                elif hasattr(result, 'text'):
-                    response_text = result.text
-                else:
-                    response_text = str(result)
-                
-                print(f"📋 Response text preview: {response_text}...")
-                
-                # Try to parse JSON manually
-
-                try:
-                    # Clean up the response - remove any markdown code blocks and fix common issues
-                    clean_response = response_text.strip()
-                    if clean_response.startswith('```json'):
-                        clean_response = clean_response[7:]
-                    if clean_response.endswith('```'):
-                        clean_response = clean_response[:-3]
-                    clean_response = clean_response.strip()
-                    
-                    # Fix common JSON truncation issues
-                    # If the response doesn't end properly, try to close it
-                    if not clean_response.endswith('}'):
-                        # Try to find the last complete chunk entry and close properly
-                        last_brace = clean_response.rfind('}')
-                        if last_brace != -1:
-                            # Find if we're inside a chunks array
-                            chunks_start = clean_response.find('"chunks": [')
-                            if chunks_start != -1 and last_brace > chunks_start:
-                                # Close the chunks array and main object
-                                clean_response = clean_response[:last_brace+1] + '\n  ]\n}'
-                            else:
-                                clean_response = clean_response[:last_brace+1]
-                    
-                    print(f"📋 Cleaned response preview: {clean_response[:300]}...")
-                    print(f"📋 Cleaned response ends with: '{clean_response[-50:]}'")
-                    
-                    # Additional safety: ensure we have a complete JSON structure
-                    if not (clean_response.startswith('{') and clean_response.endswith('}')):
-                        print(f"❌ Response doesn't look like valid JSON structure")
-                        continue
-                    
-                    # Fix common JSON escape issues with LaTeX
-                    # Replace single backslashes with double backslashes in JSON strings
-                    # But be careful not to affect already-escaped sequences
-                    def fix_latex_escapes(text):
-                        # Find all JSON string values (between quotes)
-                        def escape_in_string(match):
-                            string_content = match.group(1)
-                            # Escape single backslashes in LaTeX commands
-                            # Handle \mathrm, \left, \%, etc. but preserve JSON escapes like \n, \t, \", \\
-                            # Pattern: backslash followed by letters OR specific LaTeX symbols like %
-                            fixed = re.sub(r'(?<!\\)\\(?=[a-zA-Z%])', r'\\\\', string_content)
-                            return f'"{fixed}"'
-                        
-                        # Apply to all JSON string values
-                        return re.sub(r'"([^"\\]*(\\.[^"\\]*)*)"', escape_in_string, text)
-                    
-                    clean_response = fix_latex_escapes(clean_response)
-                    print(f"📋 After escape fixing: {clean_response[:200]}...")
-                    
-                    # Parse JSON
-                    json_data = json.loads(clean_response)
-                    print(f"📋 Successfully parsed JSON: {type(json_data)}")
-                    
-                    # Validate with Pydantic
-                    chunk_response = ChunkList.model_validate(json_data)
-                    print(f"📋 Pydantic validation successful: {type(chunk_response)}")
-                    
-                    # Fix literal \n strings in chunk text (convert to actual newlines)
-                    for chunk in chunk_response.chunks:
-                        if hasattr(chunk, 'text') and chunk.text:
-                            # Replace literal \n with actual newlines for paragraph breaks
-                            # Be careful not to affect LaTeX commands that might contain 'n'
-                            chunk.text = chunk.text.replace('\\n', '\n')
-                    
-                except json.JSONDecodeError as e:
-                    print(f"❌ Attempt {attempt + 1}: JSON parsing failed: {e}")
-                    print(f"❌ Response was: {response_text}")
-                    continue
-                except Exception as e:
-                    print(f"❌ Attempt {attempt + 1}: Pydantic validation failed: {e}")
-                    continue
-            
-                chunks = chunk_response.chunks
-                if not chunks or len(chunks) == 0:
-                    print(f"⚠️ Attempt {attempt + 1}: No chunks returned")
-                    continue
-                
-                # Success! Process chunks
-                processed_chunks = []
-                for i, chunk in enumerate(chunks):
-                    print(f"\n📝 Processing chunk {i+1}: {chunk.topic}")
-                    
-                    if not hasattr(chunk, 'text') or not chunk.text.strip():
-                        print(f"❌ Chunk missing or empty text: {chunk}")
-                        continue
-                        
-                    print(f"   Text preview: '{chunk.text[:100]}...'")
-                    
-                    processed_chunks.append({
-                        "topic": chunk.topic,
-                        "text": chunk.text,
-                        "chunk_index": i
-                    })
-                
-                if processed_chunks:
-                    print(f"✅ Successfully processed {len(processed_chunks)} chunks for batch {batch_idx + 1}")
-                    batch_chunks = processed_chunks
-                    break
-                else:
-                    print(f"❌ Batch {batch_idx + 1} Attempt {attempt + 1}: No valid chunks processed")
-                    continue
-
-            except Exception as e:
-                print(f"❌ Batch {batch_idx + 1} Attempt {attempt + 1} failed: {e}")
-                if attempt == max_retries - 1:
-                    print(f"❌ All {max_retries} attempts failed for batch {batch_idx + 1}")
-        
-        # Add successful batch chunks to all_chunks
-        if batch_chunks:
-            all_chunks.extend(batch_chunks)
-            print(f"📊 Total chunks so far: {len(all_chunks)}")
-        else:
-            print(f"⚠️ Batch {batch_idx + 1} failed completely, skipping...")
-    
-    # Final results
-    if all_chunks:
-        print(f"✅ Successfully processed document with {len(all_chunks)} total chunks from {len(batches)} batches")
-        # Re-index all chunks sequentially
-        for i, chunk in enumerate(all_chunks):
-            chunk["chunk_index"] = i
-        return all_chunks, document_markdown
-    else:
-        print("🔄 All batches failed, falling back to programmatic chunking...")
-        chunks, original_markdown = programmatic_chunk_document(document_markdown)
-        return chunks, original_markdown
-    
-    try:
-        # Initialize Fireworks LLM with structured output
-        llm = init_chat_model(
-            "accounts/fireworks/models/llama4-maverick-instruct-basic", 
-            model_provider="fireworks",
-            api_key=fireworks_api_key
-        )
-        
-        # Create structured LLM that returns ChunkList object
-        structured_llm = llm.with_structured_output(ChunkList)
-        
-        # Create improved chunking prompt that returns complete chunk text
-        prompt = f"""## Task
-Analyze this academic document and create logical educational chunks. Each chunk should contain 2-3 related educational concepts or lessons that a student would naturally learn together.
-
-## Step-by-Step Process
-1. **Scan the document** to identify main topics and educational concepts
-2. **Group related paragraphs** that teach connected ideas (even if separated by figures)
-3. **Create separate chunks** for figures/tables with their captions
-4. **Ensure each chunk** contains 2-3 educational lessons that build on each other
-5. **Preserve all formatting** exactly as written
-
-## Chunking Rules
-
-### Content Rules
-- **Combine related content**: If a concept is split by a figure placement, reunite the related paragraphs in one chunk
-- **2-3 educational lessons per chunk**: Each chunk should teach 2-3 connected concepts that logically belong together
-- **Preserve complete thoughts**: Never split sentences, mathematical expressions, or LaTeX formulas
-- **Skip metadata sections**: Exclude abstracts, acknowledgments, references, author info, page numbers
-
-### Formatting Rules
-- **Preserve exactly**: All markdown, LaTeX, mathematical notation, and formatting
-- **Include paragraph breaks**: Maintain original \\n\\n paragraph separations
-- **Remove artifacts**: Strip page numbers, headers, footers, and formatting metadata
-
-### Special Elements
-- **Figures/Tables/Images**: Create separate chunks containing the full caption and any accompanying text
-- **Mathematical expressions**: Keep complete formulas together, never split LaTeX
-- **Code blocks**: Preserve in their entirety with proper formatting
-
-## Output Format
-Return a JSON object with this exact schema:
-
-```json
-{{
-  "chunks": [
-    {{
-      "topic": "Brief descriptive name (2-6 words) for the educational content",
-      "text": "Complete chunk text with exact markdown/LaTeX formatting preserved"
-    }}
-  ]
-}}
-```
-
-## Quality Criteria
-**Good chunks:**
-- Contain 2-3 related educational concepts
-- Are 150-500 words (optimal learning unit size)
-- Have clear educational value and logical flow
-- Preserve all original formatting perfectly
-
-**Avoid:**
-- Single-sentence chunks
-- Chunks with >5 unrelated concepts
-- Split mathematical expressions
-- Metadata or reference content
-
-## Examples
-
-**Good chunk example:**
-```json
-{{
-  "chunks": [
-    {{
-      "topic": "Gradient Descent Fundamentals",
-      "text": "## Gradient Descent Algorithm\\n\\nGradient descent is an optimization algorithm used to minimize functions...\\n\\n### Mathematical Formulation\\n\\nThe update rule is given by:\\n\\n$\\theta_{{t+1}} = \\theta_t - \\alpha \\nabla f(\\theta_t)$\\n\\nwhere $\\alpha$ is the learning rate..."
-    }}
-  ]
-}}
-```
-
-**Bad chunk example:**
-```json
-{{
-  "chunks": [
-    {{
-      "topic": "Introduction", 
-      "text": "This paper presents..."
-    }}
-  ]
-}}
-```
-(Too brief, not educational content)
-
----
-
-## Document to Process:
-{document_markdown}
-
-Please analyze the document and return the JSON object with chunks following the above guidelines.
-"""
-
-        # Call Fireworks with structured output
-        print("🚀 Calling Fireworks for document chunking...")
-        try:
-            chunk_response = structured_llm.invoke(prompt)
-            print(f"📋 Raw response type: {type(chunk_response)}")
-            print(f"📋 Raw response: {chunk_response}")
-        except Exception as invoke_error:
-            print(f"❌ Error during Fireworks invoke: {invoke_error}")
-            return [], document_markdown
-        
-        if chunk_response is None:
-            print("❌ Received None response from Fireworks")
-            return [], document_markdown
-            
-        if not hasattr(chunk_response, 'chunks'):
-            print(f"❌ Response missing 'chunks' attribute: {type(chunk_response)}")
-            print(f"Response content: {chunk_response}")
-            return [], document_markdown
-            
-        chunks = chunk_response.chunks
-        if not chunks:
-            print("⚠️ No chunks returned from Fireworks")
-            return [], document_markdown
-        
-        # Process chunks with direct text (no fuzzy matching needed)
-        processed_chunks = []
-        for i, chunk in enumerate(chunks):
-            print(f"\n📝 Processing chunk {i+1}: {chunk.topic}")
-            
-            # Check if chunk has the expected 'text' attribute
-            if not hasattr(chunk, 'text'):
-                print(f"❌ Chunk missing 'text' attribute: {chunk}")
-                continue
-                
-            print(f"   Text preview: '{chunk.text[:100]}...'")
-            
-            processed_chunks.append({
-                "topic": chunk.topic,
-                "text": chunk.text,
-                "chunk_index": i
-            })
-        
-        print(f"📊 Processed {len(processed_chunks)} chunks with direct text")
-        
-        return processed_chunks, document_markdown
-        
-    except Exception as e:
-        import traceback
-        print(f"❌ Auto-chunking error: {e}")
-        print(f"❌ Full traceback: {traceback.format_exc()}")
-        return [], document_markdown
-
-@app.post("/chunk_page")
-async def chunk_page(request: dict):
-    """Analyze a page and suggest chunks for lessons using Fireworks AI with structured output"""
-    print(f"🧠 Chunking page...")
-    
-    page_markdown = request.get("markdown", "")
-    if not page_markdown:
-        raise HTTPException(status_code=400, detail="No markdown provided")
-    
-    # Get Fireworks API key
-    fireworks_api_key = os.environ.get("FIREWORKS_API_KEY")
-    if not fireworks_api_key:
-        raise HTTPException(status_code=500, detail="FIREWORKS_API_KEY not set")
-    
-    try:
-        # Initialize Fireworks LLM with structured output
-        llm = init_chat_model(
-            "accounts/fireworks/models/llama4-maverick-instruct-basic", 
-            model_provider="fireworks",
-            api_key=fireworks_api_key
-        )
-        
-        # Create structured LLM that returns ChunkList object
-        structured_llm = llm.with_structured_output(ChunkList)
-        
-        # Create chunking prompt
-        prompt = f"""Analyze this academic document page and identify chunks suitable for creating interactive lessons.
-
-DOCUMENT PAGE:
-{page_markdown}
-
-Rules:
-1. Each chunk should contain 2-3 valuable lessons
-2. start_phrase and end_phrase should be 5-15 words long
-3. Focus on educational content (concepts, examples, key points)
-4. More dense content should have more chunks, less dense content fewer chunks
-5. Identify chunks that would make good interactive lessons
-6. SKIP chunks from abstract, references, author information, page numbers, etc.
-
-Return a list of chunks with topic, start_phrase, and end_phrase for each."""
-
-        # Call Fireworks with structured output
-        print("🚀 Calling Fireworks for chunking...")
-        chunk_response = structured_llm.invoke(prompt)
-        chunks = chunk_response.chunks
-        print(f"📝 Received {len(chunks)} chunks from Fireworks")
-        
-        # Process chunks with direct text (no fuzzy matching needed)
-        processed_chunks = []
-        for i, chunk in enumerate(chunks):
-            processed_chunks.append({
-                "topic": chunk.topic,
-                "text": chunk.text,
-                "chunk_index": i
-            })
-            print(f"✅ Processed chunk: {chunk.topic}")
-        
-        print(f"📊 Successfully processed {len(processed_chunks)} chunks")
-        
-        return {
-            "chunks": processed_chunks,
-            "total_found": len(processed_chunks),
-            "total_suggested": len(chunks)
-        }
-        
-    except Exception as e:
-        import traceback
-        print(f"❌ Error chunking page: {e}")
-        print(f"❌ Full traceback: {traceback.format_exc()}")
-        raise HTTPException(status_code=500, detail=f"Error chunking page: {str(e)}")
-
-@app.post("/start_chunk_lesson/{file_id}/{chunk_index}")
-async def start_chunk_lesson(file_id: str, chunk_index: int, request: dict):
-    """Start a Socratic teaching session for a specific chunk using Claude"""
-    print(f"🎓 Starting lesson for chunk {chunk_index} in file {file_id}")
-    
-    # Get Anthropic API key
-    anthropic_api_key = os.environ.get("ANTHROPIC_API_KEY")
-    if not anthropic_api_key:
-        raise HTTPException(status_code=500, detail="ANTHROPIC_API_KEY not set")
-    
-    try:
-        # Extract data from request
-        chunk_data = request.get("chunk", {})
-        document_markdown = request.get("document_markdown", "")
-        
-        if not chunk_data or not document_markdown:
-            raise HTTPException(status_code=400, detail="Missing chunk data or document markdown")
-        
-        # Get the specific chunk text for focus
-        start_pos = chunk_data.get("start_position")
-        end_pos = chunk_data.get("end_position")
-        
-        if start_pos is not None and end_pos is not None:
-            chunk_text = document_markdown[start_pos:end_pos]
-            print(f"📍 Extracted chunk text: {chunk_text[:100]}...")
-        else:
-            chunk_text = f"Focus area: {chunk_data.get('topic', 'Selected content')}"
-            print("⚠️ No positions found, using topic as fallback")
-        
-        # Initialize Anthropic client
-        client = anthropic.Anthropic(api_key=anthropic_api_key)
-        
-        # Create the system prompt for Socratic teaching
-        system_prompt = """You are a Socratic teacher. Your goal is to help students deeply understand concepts through guided questioning, not by giving direct answers.
-
-Your teaching approach:
-1. Ask thoughtful questions that guide discovery
-2. Be encouraging and patient  
-3. Help students think critically about the material
-4. Don't give direct answers - guide them to find answers themselves
-5. Start with 2-3 opening questions to check understanding and spark curiosity
-
-Focus on the specific chunk highlighted, but use the full document context to create meaningful questions."""
-
-        # Create the user prompt with FULL document + focused chunk
-        user_prompt = f"""Here's a complete educational document, with a specific section that the student wants to focus on:
-
-FULL DOCUMENT:
-{document_markdown}
-
-FOCUSED SECTION:
-{chunk_text}
-
-The student has selected the "FOCUSED SECTION" to study. Please create 2-3 Socratic questions that will help them deeply understand this specific section, while drawing on the broader document context when helpful. 
-
-Make the questions specific and thought-provoking to encourage critical thinking about the focused content."""
-
-        # Call Claude
-        print("🤖 Calling Claude for Socratic questions...")
-        response = client.messages.create(
-            model="claude-sonnet-4-20250514",
-            max_tokens=1000,
-            system=system_prompt,
-            messages=[
-                {"role": "user", "content": user_prompt}
-            ]
-        )
-        
-        # Extract the response text
-        questions_text = response.content[0].text
-        print(f"✅ Received Socratic questions from Claude")
+        print(f"✅ PDF saved to: {temp_file_path}")
         
         return {
-            "chat_id": f"{file_id}_{chunk_index}_{hash(chunk_text)}", 
-            "questions": questions_text,
-            "chunk_text": chunk_text
+            "message": "PDF uploaded successfully!",
+            "file_path": temp_file_path,
+            "filename": file.filename,
+            "status": "uploaded",
+            "size": len(file_bytes)
         }
         
     except Exception as e:
-        import traceback
-        print(f"❌ Error starting chunk lesson: {e}")
-        print(f"❌ Full traceback: {traceback.format_exc()}")
-        raise HTTPException(status_code=500, detail=f"Error starting lesson: {str(e)}")
+        print(f"❌ Error uploading PDF: {e}")
+        raise HTTPException(status_code=500, detail=f"PDF upload error: {str(e)}")
 
 # Mount static files for production deployment
 frontend_path = os.path.join(os.path.dirname(__file__), "..", "frontend")

backend/requirements.txt

@@ -1,13 +1,6 @@
 uvicorn[standard]
 fastapi==0.115.7
 python-multipart>=0.0.5
-mistralai
 python-dotenv
-fireworks-ai
-langchain[fireworks]
-langchain
-langchain-core
-langchain-fireworks
 pydantic
-anthropic
-google-genai
+anthropic

frontend/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

frontend/jsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

frontend/package-lock.json

@@ -8,11 +8,16 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@ai-sdk/react": "^2.0.11",
         "@llamaindex/chat-ui": "^0.5.17",
         "@swc/helpers": "^0.5.17",
         "@tailwindcss/postcss": "^4.1.11",
+        "ai": "^5.0.11",
         "autoprefixer": "^10.4.21",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
         "katex": "^0.16.22",
+        "lucide-react": "^0.539.0",
         "postcss": "^8.5.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
@@ -23,6 +28,7 @@
         "rehype-katex": "^7.0.1",
         "rehype-raw": "^7.0.0",
         "remark-math": "^6.0.0",
+        "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11"
       },
       "devDependencies": {
@@ -34,9 +40,80 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.3.0",
+        "tw-animate-css": "^1.3.6",
         "vite": "^7.0.4"
       }
     },
+    "node_modules/@ai-sdk/gateway": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/gateway/-/gateway-1.0.5.tgz",
+      "integrity": "sha512-GOhxiHm2nfuS618Ia13AWxEIhCsj5+tFaw6sjSO7pvMZT03QgFAJyX4xBYj+3i3mfIvw+yJOvyhVu1fI+pAHQA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/provider": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider/-/provider-2.0.0.tgz",
+      "integrity": "sha512-6o7Y2SeO9vFKB8lArHXehNuusnpddKPk7xqL7T2/b+OvXMRIXUO1rR4wcv1hAFUAT9avGZshty3Wlua/XA7TvA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "json-schema": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@ai-sdk/provider-utils": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/provider-utils/-/provider-utils-3.0.2.tgz",
+      "integrity": "sha512-0a5a6VafkV6+0irdpqnub8WE6qzG2VMsDBpXb9NQIz8c4TG8fI+GSTFIL9sqrLEwXrHdiRj7fwJsrir4jClL0w==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider": "2.0.0",
+        "@standard-schema/spec": "^1.0.0",
+        "eventsource-parser": "^3.0.3",
+        "zod-to-json-schema": "^3.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
+    "node_modules/@ai-sdk/react": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@ai-sdk/react/-/react-2.0.11.tgz",
+      "integrity": "sha512-XL73e7RSOQjYRCJQ96sDY6TxrMJK9YBgI518E6Jy306BjRwy5XyY94e/DN71TE6VpiwDzxixlymfDK90Ro95Jg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/provider-utils": "3.0.2",
+        "ai": "5.0.11",
+        "swr": "^2.2.5",
+        "throttleit": "2.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "zod": "^3.25.76 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -3186,6 +3263,15 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "license": "MIT"
     },
+    "node_modules/@llamaindex/chat-ui/node_modules/lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@llamaindex/chat-ui/node_modules/make-cancellable-promise": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz",
@@ -4812,6 +4898,16 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/@llamaindex/chat-ui/node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/@llamaindex/chat-ui/node_modules/unified": {
       "version": "10.1.2",
       "resolved": "https://registry.npmjs.org/unified/-/unified-10.1.2.tgz",
@@ -5117,6 +5213,15 @@
       "integrity": "sha512-CecwLWx3rhxVQF6V4bAgPS5t+So2sTbPgAzafKkVizyi7tlwpcFpdFqq+wqF2OwNBmqFuu6tOyouTuxgpMfzmA==",
       "license": "MIT"
     },
+    "node_modules/@opentelemetry/api": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.0.tgz",
+      "integrity": "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8.0.0"
+      }
+    },
     "node_modules/@radix-ui/colors": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/colors/-/colors-3.0.0.tgz",
@@ -5850,6 +5955,12 @@
         "win32"
       ]
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
+      "integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
+      "license": "MIT"
+    },
     "node_modules/@stitches/core": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@stitches/core/-/core-1.2.8.tgz",
@@ -6384,6 +6495,24 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/ai": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/ai/-/ai-5.0.11.tgz",
+      "integrity": "sha512-PtiQAnhlWuN3Y2z9PifM/9XIQ0HIoHjZqEu7zHffyGEXiqHLtrJpt4IiGVzUTAKxXM5JCtO9sD/hwGXDp7ZYsw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@ai-sdk/gateway": "1.0.5",
+        "@ai-sdk/provider": "2.0.0",
+        "@ai-sdk/provider-utils": "3.0.2",
+        "@opentelemetry/api": "1.9.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.76 || ^4"
+      }
+    },
     "node_modules/ajv": {
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
@@ -7405,6 +7534,15 @@
         "es5-ext": "~0.10.14"
       }
     },
+    "node_modules/eventsource-parser": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/eventsource-parser/-/eventsource-parser-3.0.3.tgz",
+      "integrity": "sha512-nVpZkTMM9rF6AQ9gPJpFsNAMt48wIzB5TQgiTLdHiuO8XEDhUgZEhqKlZWXbIzo9VmJ/HvysHqEaVeD5v9TPvA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/expand-template": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
@@ -8151,6 +8289,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-schema": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
+      "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA==",
+      "license": "(AFL-2.1 OR BSD-3-Clause)"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -8551,12 +8695,12 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.453.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
-      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "version": "0.539.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.539.0.tgz",
+      "integrity": "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg==",
       "license": "ISC",
       "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/lz-string": {
@@ -13899,6 +14043,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/swr": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz",
+      "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/tabbable": {
       "version": "6.2.0",
       "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
@@ -13906,9 +14063,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
-      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -13993,6 +14150,18 @@
         "node": ">=18"
       }
     },
+    "node_modules/throttleit": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-2.1.0.tgz",
+      "integrity": "sha512-nt6AMGKW1p/70DF/hGBdJB57B8Tspmbp5gfJ8ilhLnt7kkr2ye7hzD6NVG8GGErk2HWF34igrL2CXmNIkzKqKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
@@ -14127,6 +14296,16 @@
         "node": "*"
       }
     },
+    "node_modules/tw-animate-css": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/tw-animate-css/-/tw-animate-css-1.3.6.tgz",
+      "integrity": "sha512-9dy0R9UsYEGmgf26L8UcHiLmSFTHa9+D7+dAt/G/sF5dCnPePZbfgDYinc7/UzAM7g/baVrmS6m9yEpU46d+LA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Wombosvideo"
+      }
+    },
     "node_modules/type": {
       "version": "2.7.3",
       "resolved": "https://registry.npmjs.org/type/-/type-2.7.3.tgz",
@@ -14376,6 +14555,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14627,6 +14815,25 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/zod": {
+      "version": "3.25.76",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-to-json-schema": {
+      "version": "3.24.6",
+      "resolved": "https://registry.npmjs.org/zod-to-json-schema/-/zod-to-json-schema-3.24.6.tgz",
+      "integrity": "sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==",
+      "license": "ISC",
+      "peerDependencies": {
+        "zod": "^3.24.1"
+      }
+    },
     "node_modules/zwitch": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",

frontend/package.json

@@ -10,11 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@ai-sdk/react": "^2.0.11",
     "@llamaindex/chat-ui": "^0.5.17",
     "@swc/helpers": "^0.5.17",
     "@tailwindcss/postcss": "^4.1.11",
+    "ai": "^5.0.11",
     "autoprefixer": "^10.4.21",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "katex": "^0.16.22",
+    "lucide-react": "^0.539.0",
     "postcss": "^8.5.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -25,6 +30,7 @@
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-math": "^6.0.0",
+    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },
   "devDependencies": {
@@ -36,6 +42,7 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
+    "tw-animate-css": "^1.3.6",
     "vite": "^7.0.4"
   }
 }

frontend/src/App.jsx

@@ -1,15 +1,15 @@
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Homepage from './components/Homepage';
-import UploadPage from './components/UploadPage';
 import DocumentProcessor from './components/DocumentProcessor';
+import TestComponent from './components/TestComponent';
 
 function App() {
   return (
     <Router>
       <Routes>
         <Route path="/" element={<Homepage />} />
-        <Route path="/upload" element={<UploadPage />} />
         <Route path="/process" element={<DocumentProcessor />} />
+        <Route path="/chat" element={<TestComponent />} />
       </Routes>
     </Router>
   );

frontend/src/components/ChunkPanel.jsx

@@ -2,10 +2,9 @@ import ReactMarkdown from 'react-markdown';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
-import { ChatSection, ChatMessages, ChatInput } from '@llamaindex/chat-ui';
-import '@llamaindex/chat-ui/styles/markdown.css';
 import { useState } from 'react';
-import { getChunkMarkdownComponents, getChatMarkdownComponents } from '../utils/markdownComponents.jsx';
+import { getChatMarkdownComponents } from '../utils/markdownComponents.jsx';
+import SimpleChat from './SimpleChat.jsx';
 
 const ChunkPanel = ({
     documentData,
@@ -15,88 +14,10 @@ const ChunkPanel = ({
     chunkStates,
     skipChunk,
     markChunkUnderstood,
-    startInteractiveLesson,
-    fetchImage,
-    imageCache,
-    setImageCache
+    startInteractiveLesson
 }) => {
-    const chunkMarkdownComponents = getChunkMarkdownComponents(documentData, fetchImage, imageCache, setImageCache);
     const chatMarkdownComponents = getChatMarkdownComponents();
-    
-    // Custom chat handler that mimics useChat API
-    const [messages, setMessages] = useState([{
-        id: 'welcome',
-        role: 'assistant',
-        content: `I'm here to help you understand this section: **${documentData?.chunks?.[currentChunkIndex]?.topic || 'Loading...'}**\n\nFeel free to ask me any questions about the content!`
-    }]);
-    const [input, setInput] = useState('');
-    const [isLoading, setIsLoading] = useState(false);
-
-    const handleInputChange = (e) => {
-        setInput(e.target.value);
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        if (!input.trim() || isLoading) return;
-
-        const userMessage = {
-            id: Date.now().toString(),
-            role: 'user',
-            content: input
-        };
-
-        setMessages(prev => [...prev, userMessage]);
-        setInput('');
-        setIsLoading(true);
-
-        try {
-            // For now, using backend proxy to avoid exposing API key in frontend
-            const response = await fetch('/api/anthropic-chat', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    messages: [...messages, userMessage].map(msg => ({
-                        role: msg.role,
-                        content: msg.content
-                    })),
-                    context: {
-                        topic: documentData?.chunks?.[currentChunkIndex]?.topic,
-                        chunkText: documentData?.chunks?.[currentChunkIndex]?.text
-                    }
-                })
-            });
-
-            const data = await response.json();
-            
-            const assistantMessage = {
-                id: (Date.now() + 1).toString(),
-                role: 'assistant',
-                content: data.content || data.message
-            };
-
-            setMessages(prev => [...prev, assistantMessage]);
-        } catch (error) {
-            console.error('Chat error:', error);
-            setMessages(prev => [...prev, {
-                id: (Date.now() + 1).toString(),
-                role: 'assistant',
-                content: 'Sorry, I encountered an error. Please try again.'
-            }]);
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const chatHandler = {
-        messages,
-        input,
-        handleInputChange,
-        handleSubmit,
-        isLoading
-    };
+    const [showChat, setShowChat] = useState(false);
 
     return (
         <>
@@ -124,49 +45,82 @@ const ChunkPanel = ({
                         </span>
                     </button>
 
-                    <button 
-                        onClick={markChunkUnderstood}
-                        className="py-2 px-4 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-lg transition-all text-sm"
-                    >
-                        ✓
-                    </button>
                 </div>
 
                 {/* Expandable Chunk Content */}
                 {chunkExpanded && documentData?.chunks?.[currentChunkIndex] && (
-                    <div className="prose prose-sm max-w-none">
-                        <ReactMarkdown
-                            remarkPlugins={[remarkMath]}
-                            rehypePlugins={[rehypeRaw, rehypeKatex]}
-                            components={chunkMarkdownComponents}
+                    <>
+                        <div className="prose prose-sm max-w-none">
+                            <ReactMarkdown
+                                remarkPlugins={[remarkMath]}
+                                rehypePlugins={[rehypeRaw, rehypeKatex]}
+                                components={chatMarkdownComponents}
+                            >
+                                {documentData.chunks[currentChunkIndex].text}
+                            </ReactMarkdown>
+                        </div>
+                        
+                        {/* Action Buttons */}
+                        <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-gray-200">
+                            <button 
+                                onClick={skipChunk}
+                                className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm"
+                            >
+                                Skip
+                            </button>
+                            <button
+                                onClick={() => setShowChat(!showChat)}
+                                className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm flex items-center gap-1"
+                            >
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                                    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                                </svg>
+                                Chat
+                            </button>
+                            <button 
+                                onClick={markChunkUnderstood}
+                                className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm"
+                            >
+                                Understood
+                            </button>
+                        </div>
+                    </>
+                )}
+                
+                {/* Show buttons even when chunk is collapsed */}
+                {!chunkExpanded && (
+                    <div className="flex items-center justify-center gap-4 mt-4 pt-4 border-t border-gray-200">
+                        <button 
+                            onClick={skipChunk}
+                            className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm"
                         >
-                            {documentData.chunks[currentChunkIndex].text}
-                        </ReactMarkdown>
+                            Skip
+                        </button>
+                        <button 
+                            onClick={() => setShowChat(!showChat)}
+                            className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm flex items-center gap-1"
+                        >
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+                                <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                            </svg>
+                            Chat
+                        </button>
+                        <button 
+                            onClick={markChunkUnderstood}
+                            className="py-2 px-4 bg-white hover:bg-gray-50 border border-gray-300 rounded-lg transition-all text-sm"
+                        >
+                            Understood
+                        </button>
                     </div>
                 )}
             </div>
 
-            {/* Chat Interface */}
-            <div className="flex-1 flex flex-col min-h-0 bg-gray-50 rounded-lg m-2">
-                <div className="flex-1 overflow-hidden">
-                    <ChatSection handler={chatHandler}>
-                        <ChatMessages 
-                            className="p-4" 
-                            showCopy={false}
-                        />
-                        <ChatInput>
-                            <ChatInput.Form className="bg-white rounded-lg mx-4 mb-4 border border-gray-200 relative">
-                                <ChatInput.Field 
-                                    type="textarea" 
-                                    className="resize-none border-0 focus:ring-0 pr-12" 
-                                    placeholder="Ask about this section..."
-                                />
-                                <ChatInput.Submit className="absolute right-2 bottom-2 w-8 h-8 rounded-full bg-gray-500 hover:bg-gray-600 text-white border-0 flex items-center justify-center" />
-                            </ChatInput.Form>
-                        </ChatInput>
-                    </ChatSection>
+            {/* Chat Interface - Only shown when showChat is true */}
+            {showChat && (
+                <div className="flex-1 flex flex-col min-h-0 bg-white rounded-lg m-2 shadow-lg">
+                    <SimpleChat />
                 </div>
-            </div>
+            )}
         </>
     );
 };

frontend/src/components/DocumentProcessor.jsx

@@ -1,9 +1,7 @@
-// Removed useMemo import - no longer needed
 import 'katex/dist/katex.min.css';
 
 // Import custom hooks
 import { useDocumentProcessor } from '../hooks/useDocumentProcessor';
-// Removed useChat import - handled in ChunkPanel now
 import { useChunkNavigation } from '../hooks/useChunkNavigation';
 import { usePanelResize } from '../hooks/usePanelResize';
 
@@ -13,8 +11,6 @@ import DocumentViewer from './DocumentViewer';
 import ChunkNavigation from './ChunkNavigation';
 import ChunkPanel from './ChunkPanel';
 
-// Removed markdown utilities - using PDF viewer now
-
 function DocumentProcessor() {
     // Custom hooks
     const {
@@ -22,17 +18,12 @@ function DocumentProcessor() {
         selectedFile,
         processing,
         uploadProgress,
-        ocrProgress,
         documentData,
-        imageCache,
         handleFileChange,
-        fetchImage,
         processDocument,
         setSelectedFile
     } = useDocumentProcessor();
 
-    // Removed useChat hook - now handled in ChunkPanel
-
     const {
         chunkStates,
         currentChunkIndex,
@@ -43,7 +34,7 @@ function DocumentProcessor() {
         markChunkUnderstood,
         startInteractiveLesson,
         setChunkExpanded
-    } = useChunkNavigation(documentData, null); // No clearTypingAnimation needed
+    } = useChunkNavigation(documentData, null);
 
     const {
         leftPanelWidth,
@@ -51,15 +42,12 @@ function DocumentProcessor() {
         containerRef,
         handleMouseDown
     } = usePanelResize(50);
-    } = usePanelResize(50);
 
-    // Simplified startInteractiveLesson - no chat hook needed
+    // Simplified startInteractiveLesson
     const handleStartInteractiveLesson = () => {
         startInteractiveLesson();
     };
 
-    // No longer need highlighted markdown - using PDF viewer instead
-
     // Early returns for different states
     if (!selectedFile) {
         return (
@@ -82,7 +70,7 @@ function DocumentProcessor() {
     }
 
     if (processing) {
-        return <LoadingAnimation uploadProgress={uploadProgress} ocrProgress={ocrProgress} />;
+        return <LoadingAnimation uploadProgress={uploadProgress} />;
     }
 
     if (!documentData) {
@@ -116,7 +104,6 @@ function DocumentProcessor() {
             {/* Left Panel - Document */}
             <div style={{ width: `${leftPanelWidth}%`, height: '100%' }}>
                 <DocumentViewer
-                    selectedFile={selectedFile}
                     selectedFile={selectedFile}
                     documentData={documentData}
                 />
@@ -162,9 +149,6 @@ function DocumentProcessor() {
                         skipChunk={skipChunk}
                         markChunkUnderstood={markChunkUnderstood}
                         startInteractiveLesson={handleStartInteractiveLesson}
-                        fetchImage={fetchImage}
-                        imageCache={imageCache}
-                        setImageCache={() => {}} // Handled by useDocumentProcessor
                     />
                 </div>
             </div>

frontend/src/components/DocumentProcessor.jsx.backup

@@ -1,889 +0,0 @@
-import { useMemo } from 'react';
-import 'katex/dist/katex.min.css';
-
-// Import custom hooks
-import { useDocumentProcessor } from '../hooks/useDocumentProcessor';
-import { useChat } from '../hooks/useChat';
-import { useChunkNavigation } from '../hooks/useChunkNavigation';
-import { usePanelResize } from '../hooks/usePanelResize';
-
-// Import components
-import LoadingAnimation from './LoadingAnimation';
-import DocumentViewer from './DocumentViewer';
-import ChunkNavigation from './ChunkNavigation';
-import ChunkPanel from './ChunkPanel';
-
-// Import utilities
-import { highlightChunkInMarkdown } from '../utils/markdownUtils';
-
-
-function DocumentProcessor() {
-    // Custom hooks
-    const {
-        fileInputRef,
-        selectedFile,
-        processing,
-        uploadProgress,
-        ocrProgress,
-        documentData,
-        imageCache,
-        handleFileChange,
-        fetchImage,
-        processDocument,
-        setSelectedFile
-    } = useDocumentProcessor();
-
-    const {
-        chatLoading,
-        chatMessages,
-        userInput,
-        typingMessage,
-        startChunkLesson,
-        clearTypingAnimation,
-        setUserInput
-    } = useChat();
-
-    const {
-        chunkStates,
-        currentChunkIndex,
-        chunkExpanded,
-        goToNextChunk,
-        goToPrevChunk,
-        skipChunk,
-        markChunkUnderstood,
-        startInteractiveLesson,
-        setChunkExpanded
-    } = useChunkNavigation(documentData, clearTypingAnimation);
-
-    const {
-        leftPanelWidth,
-        isDragging,
-        containerRef,
-        handleMouseDown
-    } = usePanelResize(40);
-
-    // Enhanced startInteractiveLesson that uses the chat hook
-    const handleStartInteractiveLesson = () => {
-        startInteractiveLesson(() => startChunkLesson(currentChunkIndex, documentData));
-    };
-
-    // Memoize the highlighted markdown to prevent unnecessary re-renders
-    const highlightedMarkdown = useMemo(() => {
-        if (!documentData || !documentData.markdown || !documentData.chunks) {
-            return '';
-        }
-        return highlightChunkInMarkdown(documentData.markdown, documentData.chunks, currentChunkIndex);
-    }, [documentData?.markdown, documentData?.chunks, currentChunkIndex]);
-
-
-    // Handle panel resizing
-    const handleMouseDown = (e) => {
-        setIsDragging(true);
-        e.preventDefault();
-    };
-
-    const handleMouseMove = (e) => {
-        if (!isDragging || !containerRef.current) return;
-        
-        const containerRect = containerRef.current.getBoundingClientRect();
-        const newLeftWidth = ((e.clientX - containerRect.left) / containerRect.width) * 100;
-        
-        // Constrain between 20% and 80%
-        if (newLeftWidth >= 20 && newLeftWidth <= 80) {
-            setLeftPanelWidth(newLeftWidth);
-        }
-    };
-
-    const handleMouseUp = () => {
-        setIsDragging(false);
-    };
-
-    useEffect(() => {
-        if (isDragging) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
-            };
-        }
-    }, [isDragging]);
-
-    // Function to simulate typing animation
-    const typeMessage = (text, callback) => {
-        // Clear any existing typing animation
-        if (typingInterval) {
-            clearInterval(typingInterval);
-        }
-        
-        setTypingMessage('');
-        let currentIndex = 0;
-        const typeSpeed = Math.max(1, Math.min(3, 200 / text.length)); // Much faster: max 800ms total
-        
-        const interval = setInterval(() => {
-            if (currentIndex < text.length) {
-                setTypingMessage(text.slice(0, currentIndex + 1));
-                currentIndex++;
-            } else {
-                clearInterval(interval);
-                setTypingInterval(null);
-                setTypingMessage('');
-                callback();
-            }
-        }, typeSpeed);
-        
-        setTypingInterval(interval);
-    };
-
-    // Function to start a chunk lesson
-    const startChunkLesson = async (chunkIndex) => {
-        if (!documentData || !documentData.chunks[chunkIndex]) return;
-        
-        setChatLoading(true);
-        
-        try {
-            const chunk = documentData.chunks[chunkIndex];
-            console.log('Starting lesson for chunk:', chunkIndex, chunk);
-            console.log('Document data:', documentData.fileId, documentData.markdown?.length);
-            
-            const response = await fetch(`/start_chunk_lesson/${documentData.fileId}/${chunkIndex}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    chunk: chunk,
-                    document_markdown: documentData.markdown
-                })
-            });
-
-            if (!response.ok) {
-                const errorData = await response.text();
-                console.error('Backend error:', errorData);
-                throw new Error(`Failed to start lesson: ${response.status} - ${errorData}`);
-            }
-
-            const lessonData = await response.json();
-            setChatData(prev => ({
-                ...prev,
-                [chunkIndex]: {
-                    ...lessonData,
-                    chunkIndex: chunkIndex,
-                    chunk: chunk
-                }
-            }));
-            
-            setChatLoading(false);
-            
-            // Type out the message with animation
-            typeMessage(lessonData.questions, () => {
-                setChatMessages(prev => ({
-                    ...prev,
-                    [chunkIndex]: [
-                        { type: 'ai', text: lessonData.questions }
-                    ]
-                }));
-            });
-            
-        } catch (error) {
-            console.error('Error starting lesson:', error);
-            alert('Error starting lesson: ' + error.message);
-            setChatLoading(false);
-        }
-    };
-
-    // Navigation functions
-    const goToNextChunk = () => {
-        if (documentData && currentChunkIndex < documentData.chunks.length - 1) {
-            // Clear any ongoing typing animation
-            if (typingInterval) {
-                clearInterval(typingInterval);
-                setTypingInterval(null);
-            }
-            setTypingMessage('');
-            setCurrentChunkIndex(currentChunkIndex + 1);
-        }
-    };
-
-    const goToPrevChunk = () => {
-        if (currentChunkIndex > 0) {
-            // Clear any ongoing typing animation
-            if (typingInterval) {
-                clearInterval(typingInterval);
-                setTypingInterval(null);
-            }
-            setTypingMessage('');
-            setCurrentChunkIndex(currentChunkIndex - 1);
-        }
-    };
-
-    // Chunk action functions
-    const skipChunk = () => {
-        setChunkStates(prev => ({
-            ...prev,
-            [currentChunkIndex]: 'skipped'
-        }));
-    };
-
-    const markChunkUnderstood = () => {
-        setChunkStates(prev => ({
-            ...prev,
-            [currentChunkIndex]: 'understood'
-        }));
-    };
-
-    const startInteractiveLesson = () => {
-        setChunkStates(prev => ({
-            ...prev,
-            [currentChunkIndex]: 'interactive'
-        }));
-        startChunkLesson(currentChunkIndex);
-    };
-
-    const fetchImage = useCallback(async (imageId, fileId) => {
-        // Check if image is already cached using ref
-        if (imageCacheRef.current[imageId]) {
-            return imageCacheRef.current[imageId];
-        }
-
-        try {
-            const response = await fetch(`/get_image/${fileId}/${imageId}`);
-            if (response.ok) {
-                const data = await response.json();
-                const imageData = data.image_base64;
-                
-                // Cache the image in ref
-                imageCacheRef.current = {
-                    ...imageCacheRef.current,
-                    [imageId]: imageData
-                };
-                
-                // Also update state for other components that might need it
-                setImageCache(prev => ({
-                    ...prev,
-                    [imageId]: imageData
-                }));
-                
-                return imageData;
-            }
-        } catch (error) {
-            console.error('Error fetching image:', error);
-        }
-        return null;
-    }, []); // No dependencies - stable function
-
-    const ImageComponent = memo(({ src, alt }) => {
-        const [imageSrc, setImageSrc] = useState(null);
-        const [loading, setLoading] = useState(true);
-        
-        useEffect(() => {
-            if (documentData && src) {
-                fetchImage(src, documentData.fileId).then(imageData => {
-                    if (imageData) {
-                        setImageSrc(imageData);
-                    }
-                    setLoading(false);
-                });
-            }
-        }, [src, documentData?.fileId, fetchImage]);
-
-        if (loading) {
-            return (
-                <span style={{ 
-                    display: 'inline-block',
-                    width: '100%', 
-                    height: '200px', 
-                    backgroundColor: '#f3f4f6', 
-                    textAlign: 'center',
-                    lineHeight: '200px',
-                    margin: '1rem 0',
-                    borderRadius: '0.5rem',
-                    color: '#6b7280'
-                }}>
-                    Loading image...
-                </span>
-            );
-        }
-
-        if (!imageSrc) {
-            return (
-                <span style={{ 
-                    display: 'inline-block',
-                    width: '100%', 
-                    height: '200px', 
-                    backgroundColor: '#fef2f2', 
-                    textAlign: 'center',
-                    lineHeight: '200px',
-                    margin: '1rem 0',
-                    borderRadius: '0.5rem',
-                    border: '1px solid #fecaca',
-                    color: '#dc2626'
-                }}>
-                    Image not found: {alt || src}
-                </span>
-            );
-        }
-
-        return (
-            <img 
-                src={imageSrc}
-                alt={alt || 'Document image'}
-                style={{ 
-                    display: 'block',
-                    maxWidth: '100%', 
-                    height: 'auto',
-                    margin: '1.5rem auto'
-                }}
-            />
-        );
-    });
-
-
-
-    const processDocument = async () => {
-        if (!selectedFile) return;
-
-        setProcessing(true);
-        setUploadProgress(0);
-        setOcrProgress(0);
-
-        try {
-            // Step 1: Upload PDF
-            const formData = new FormData();
-            formData.append('file', selectedFile);
-
-            setUploadProgress(30);
-            const uploadResponse = await fetch('/upload_pdf', {
-                method: 'POST',
-                body: formData,
-            });
-
-            if (!uploadResponse.ok) {
-                throw new Error('Failed to upload PDF');
-            }
-
-            const uploadData = await uploadResponse.json();
-            setUploadProgress(100);
-            
-            // Step 2: Process OCR
-            setOcrProgress(20);
-            await new Promise(resolve => setTimeout(resolve, 500)); // Small delay for UX
-            
-            setOcrProgress(60);
-            const ocrResponse = await fetch(`/process_ocr/${uploadData.file_id}`);
-            
-            if (!ocrResponse.ok) {
-                throw new Error('Failed to process OCR');
-            }
-
-            const ocrData = await ocrResponse.json();
-            setOcrProgress(100);
-            
-            // Combine all markdown from pages
-            const combinedMarkdown = ocrData.pages
-                .map(page => page.markdown)
-                .join('\n\n---\n\n');
-
-            // Collect all chunks from all pages
-            const allChunks = [];
-            let markdownOffset = 0;
-            
-            ocrData.pages.forEach((page, pageIndex) => {
-                if (page.chunks && page.chunks.length > 0) {
-                    page.chunks.forEach(chunk => {
-                        allChunks.push({
-                            ...chunk,
-                            start_position: chunk.start_position + markdownOffset,
-                            end_position: chunk.end_position + markdownOffset,
-                            pageIndex: pageIndex
-                        });
-                    });
-                }
-                markdownOffset += page.markdown.length + 6; // +6 for the separator "\n\n---\n\n"
-            });
-
-            setDocumentData({
-                fileId: uploadData.file_id,
-                filename: uploadData.filename,
-                markdown: combinedMarkdown,
-                pages: ocrData.pages,
-                totalPages: ocrData.total_pages,
-                chunks: allChunks
-            });
-
-        } catch (error) {
-            console.error('Error processing document:', error);
-            alert('Error processing document: ' + error.message);
-        } finally {
-            setProcessing(false);
-        }
-    };
-
-    const LoadingAnimation = () => (
-        <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
-            <div className="text-center max-w-md">
-                <div className="mb-8">
-                    <div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-                    <h2 className="text-2xl font-bold text-gray-900 mb-2">Processing Your Document</h2>
-                    <p className="text-gray-600">This may take a moment...</p>
-                </div>
-
-                {/* Upload Progress */}
-                <div className="mb-6">
-                    <div className="flex justify-between text-sm text-gray-600 mb-1">
-                        <span>Uploading PDF</span>
-                        <span>{uploadProgress}%</span>
-                    </div>
-                    <div className="w-full bg-gray-200 rounded-full h-2">
-                        <div 
-                            className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-                            style={{ width: `${uploadProgress}%` }}
-                        ></div>
-                    </div>
-                </div>
-
-                {/* OCR Progress */}
-                <div className="mb-6">
-                    <div className="flex justify-between text-sm text-gray-600 mb-1">
-                        <span>Processing with AI</span>
-                        <span>{ocrProgress}%</span>
-                    </div>
-                    <div className="w-full bg-gray-200 rounded-full h-2">
-                        <div 
-                            className="bg-green-500 h-2 rounded-full transition-all duration-300"
-                            style={{ width: `${ocrProgress}%` }}
-                        ></div>
-                    </div>
-                </div>
-
-                <p className="text-sm text-gray-500">
-                    Using AI to extract text and understand your document structure...
-                </p>
-            </div>
-        </div>
-    );
-
-
-    if (!selectedFile) {
-        return (
-            <div className="h-screen bg-gray-50 flex items-center justify-center">
-                <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept=".pdf"
-                    className="hidden"
-                    onChange={handleFileChange}
-                />
-                <button
-                    onClick={() => fileInputRef.current.click()}
-                    className="px-6 py-3 bg-white shadow-md hover:shadow-lg text-gray-700 font-medium rounded-lg transition-all"
-                >
-                    Select PDF
-                </button>
-            </div>
-        );
-    }
-
-    if (processing) {
-        return <LoadingAnimation />;
-    }
-
-    if (!documentData) {
-        return (
-            <div className="h-screen bg-gray-50 flex items-center justify-center">
-                <div className="flex gap-4">
-                    <button
-                        onClick={processDocument}
-                        className="px-6 py-3 bg-white shadow-md hover:shadow-lg text-gray-700 font-medium rounded-lg transition-all"
-                    >
-                        Process
-                    </button>
-                    <button
-                        onClick={() => setSelectedFile(null)}
-                        className="px-6 py-3 bg-white shadow-md hover:shadow-lg text-gray-700 font-medium rounded-lg transition-all"
-                    >
-                        ← Back
-                    </button>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div 
-            ref={containerRef}
-            className="h-screen bg-gray-100 flex gap-2 p-6 overflow-hidden"
-            style={{ cursor: isDragging ? 'col-resize' : 'default' }}
-        >
-            {/* Left Panel - Document */}
-            <div 
-                className="bg-white rounded-lg shadow-sm flex flex-col"
-                style={{ width: `${leftPanelWidth}%` }}
-            >
-                {/* Header */}
-                <div className="sticky top-0 bg-white rounded-t-lg px-6 py-4 border-b border-gray-200 z-10">
-                    <h2 className="text-lg font-semibold text-left text-gray-800">Document</h2>
-                </div>
-                
-                {/* Content */}
-                <div className="flex-1 px-6 pt-6 pb-8 overflow-y-auto">
-                    <style>
-                        {`
-                            @keyframes fadeInHighlight {
-                                0% {
-                                    background-color: rgba(255, 214, 100, 0);
-                                    border-left-color: rgba(156, 163, 175, 0);
-                                    transform: translateX(-10px);
-                                    opacity: 0;
-                                }
-                                100% {
-                                    background-color: rgba(255, 214, 100, 0.15);
-                                    border-left-color: rgba(156, 163, 175, 0.5);
-                                    transform: translateX(0);
-                                    opacity: 1;
-                                }
-                            }
-                        `}
-                    </style>
-                    <div className="prose prose-sm max-w-none" style={{
-                        fontSize: '0.875rem',
-                        lineHeight: '1.5',
-                        color: 'rgb(55, 65, 81)'
-                    }}>
-                        <ReactMarkdown
-                            remarkPlugins={[remarkMath]}
-                            rehypePlugins={[rehypeRaw, rehypeKatex]}
-                            components={{
-                                h1: ({ children }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem', color: '#1a202c' }}>{children}</h1>,
-                                h2: ({ children }) => <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', marginTop: '1.5rem', color: '#1a202c' }}>{children}</h2>,
-                                h3: ({ children }) => <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '1rem', color: '#1a202c' }}>{children}</h3>,
-                                p: ({ children }) => <p style={{ marginBottom: '0.75rem', color: '#374151', lineHeight: '1.5', fontSize: '0.875rem' }}>{children}</p>,
-                                hr: () => <hr style={{ margin: '1.5rem 0', borderColor: '#d1d5db' }} />,
-                                ul: ({ children }) => <ul style={{ marginBottom: '0.75rem', marginLeft: '1.25rem', listStyleType: 'disc', fontSize: '0.875rem' }}>{children}</ul>,
-                                ol: ({ children }) => <ol style={{ marginBottom: '0.75rem', marginLeft: '1.25rem', listStyleType: 'decimal', fontSize: '0.875rem' }}>{children}</ol>,
-                                li: ({ children }) => <li style={{ marginBottom: '0.125rem', color: '#374151' }}>{children}</li>,
-                                blockquote: ({ children }) => (
-                                    <blockquote style={{ borderLeft: '3px solid #3b82f6', paddingLeft: '0.75rem', fontStyle: 'italic', margin: '0.75rem 0', color: '#6b7280', fontSize: '0.875rem' }}>
-                                        {children}
-                                    </blockquote>
-                                ),
-                                code: ({ inline, children }) => 
-                                    inline ? 
-                                    <code style={{ backgroundColor: '#f3f4f6', padding: '0.125rem 0.25rem', borderRadius: '0.25rem', fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code> :
-                                    <pre style={{ backgroundColor: '#f3f4f6', padding: '0.75rem', borderRadius: '0.375rem', overflowX: 'auto', margin: '0.75rem 0' }}>
-                                        <code style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code>
-                                    </pre>,
-                                div: ({ children, style }) => (
-                                    <div style={style}>
-                                        {children}
-                                    </div>
-                                ),
-                                img: ({ src, alt }) => <ImageComponent src={src} alt={alt} />
-                            }}
-                        >
-                            {highlightedMarkdown}
-                        </ReactMarkdown>
-                    </div>
-                </div>
-            </div>
-
-            {/* Resizable Divider */}
-            <div 
-                className="flex items-center justify-center cursor-col-resize group transition-all duration-200"
-                style={{ width: '8px' }}
-                onMouseDown={handleMouseDown}
-            >
-                  {/* Resizable Divider */}
-                <div
-                    className="w-px h-full rounded-full transition-all 
-                        duration-200 group-hover:shadow-lg"
-                        style={{
-                            backgroundColor: isDragging ? 'rgba(59, 130, 246, 0.8)' : 'transparent',
-                            boxShadow: isDragging ? '0 0 8px rgba(59, 130, 246, 0.8)' : 'none'
-                                        }}
-                ></div>
-            </div>
-
-            {/* Right Panel Container */}
-            <div 
-                className="flex flex-col"
-                style={{ width: `${100 - leftPanelWidth}%` }}
-            >
-                {/* Navigation Bar - Above chunk panel */}
-                <div className="flex items-center justify-center gap-4 mb-4 px-4">
-                    <button
-                        onClick={goToPrevChunk}
-                        disabled={currentChunkIndex === 0}
-                        className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
-                    >
-                        <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
-                        </svg>
-                    </button>
-                    
-                    <div className="flex space-x-2">
-                        {documentData?.chunks?.map((_, index) => (
-                            <div
-                                key={index}
-                                className={`w-3 h-3 rounded-full ${
-                                    chunkStates[index] === 'understood' ? 'bg-green-500' :
-                                    chunkStates[index] === 'skipped' ? 'bg-red-500' :
-                                    chunkStates[index] === 'interactive' ? 'bg-blue-500' :
-                                    index === currentChunkIndex ? 'bg-gray-600' : 'bg-gray-300'
-                                }`}
-                            />
-                        ))}
-                    </div>
-                    
-                    <button
-                        onClick={goToNextChunk}
-                        disabled={!documentData?.chunks || currentChunkIndex === documentData.chunks.length - 1}
-                        className="p-3 bg-white hover:bg-gray-50 disabled:opacity-30 disabled:cursor-not-allowed rounded-lg shadow-sm transition-all"
-                    >
-                        <svg className="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24" strokeWidth={3}>
-                            <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
-                        </svg>
-                    </button>
-                </div>
-
-                {/* Chunk Panel */}
-                    {/* Chunk Header - Left aligned title only */}
-                    <div className="px-6 py-4 flex-shrink-0 bg-white rounded-t-lg border-b border-gray-200 z-10">
-                        <div className="flex items-center justify-between">
-                            <button
-                                onClick={() => setChunkExpanded(!chunkExpanded)}
-                                className="flex items-center hover:bg-gray-50 py-2 px-3 rounded-lg transition-all -ml-3"
-                            >
-                                <span className="font-semibold text-gray-900 text-left">
-                                    {documentData?.chunks?.[currentChunkIndex]?.topic || "Loading..."}
-                                </span>
-                                <span className="text-gray-400 ml-3">
-                                    {chunkExpanded ? '▲' : '▼'}
-                                </span>
-                            </button>
-
-                            <button 
-                                onClick={markChunkUnderstood}
-                                className="py-2 px-4 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-lg transition-all text-sm"
-                            >
-                                ✓
-                            </button>
-                        </div>
-
-                        {/* Expandable Chunk Content - in header area */}
-                        {chunkExpanded && documentData?.chunks?.[currentChunkIndex] && (
-                            <div className="prose prose-sm max-w-none">
-                                <ReactMarkdown
-                                    remarkPlugins={[remarkMath]}
-                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                    components={{
-                                        h1: ({ children }) => <h1 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', color: '#1a202c' }}>{children}</h1>,
-                                        h2: ({ children }) => <h2 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '1rem', color: '#1a202c' }}>{children}</h2>,
-                                        h3: ({ children }) => <h3 style={{ fontSize: '1rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '0.75rem', color: '#1a202c' }}>{children}</h3>,
-                                        p: ({ children }) => <p style={{ marginBottom: '0.5rem', color: '#374151', lineHeight: '1.4', fontSize: '0.875rem' }}>{children}</p>,
-                                        hr: () => <hr style={{ margin: '1rem 0', borderColor: '#d1d5db' }} />,
-                                        ul: ({ children }) => <ul style={{ marginBottom: '0.5rem', marginLeft: '1rem', listStyleType: 'disc', fontSize: '0.875rem' }}>{children}</ul>,
-                                        ol: ({ children }) => <ol style={{ marginBottom: '0.5rem', marginLeft: '1rem', listStyleType: 'decimal', fontSize: '0.875rem' }}>{children}</ol>,
-                                        li: ({ children }) => <li style={{ marginBottom: '0.125rem', color: '#374151' }}>{children}</li>,
-                                        blockquote: ({ children }) => (
-                                            <blockquote style={{ borderLeft: '2px solid #9ca3af', paddingLeft: '0.5rem', fontStyle: 'italic', margin: '0.5rem 0', color: '#6b7280', fontSize: '0.875rem' }}>
-                                                {children}
-                                            </blockquote>
-                                        ),
-                                        code: ({ inline, children }) => 
-                                            inline ? 
-                                            <code style={{ backgroundColor: '#f3f4f6', padding: '0.125rem 0.25rem', borderRadius: '0.25rem', fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code> :
-                                            <pre style={{ backgroundColor: '#f3f4f6', padding: '0.5rem', borderRadius: '0.25rem', overflowX: 'auto', margin: '0.5rem 0' }}>
-                                                <code style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code>
-                                            </pre>,
-                                        img: ({ src, alt }) => <ImageComponent src={src} alt={alt} />
-                                    }}
-                                >
-                                    {documentData.markdown.slice(
-                                        documentData.chunks[currentChunkIndex].start_position,
-                                        documentData.chunks[currentChunkIndex].end_position
-                                    )}
-                                </ReactMarkdown>
-                            </div>
-                    )}
-
-                    
-                    </div>
-                
-                
-                    {/* Content Area */}
-                    <div className="flex-1 flex flex-col min-h-0">
-                        {/* Action Buttons */}
-                        {chunkStates[currentChunkIndex] !== 'interactive' && (
-                            <div className="flex-shrink-0 p-6 border-b border-gray-200">
-                                <div className="flex gap-3">
-                                    <button
-                                        onClick={skipChunk}
-                                        className="flex-1 py-3 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-lg transition-all"
-                                    >
-                                        ✕
-                                    </button>
-                                    
-                                    <button
-                                        onClick={startInteractiveLesson}
-                                        disabled={chatLoading}
-                                        className="flex-1 py-3 bg-gray-50 hover:bg-gray-100 disabled:opacity-50 text-gray-600 rounded-lg transition-all"
-                                    >
-                                        {chatLoading ? '...' : 'Start'}
-                                    </button>
-                                    
-                                    <button
-                                        onClick={markChunkUnderstood}
-                                        className="flex-1 py-3 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-lg transition-all"
-                                    >
-                                        ✓
-                                    </button>
-                                </div>
-                            </div>
-                        )}
-
-                        {/* Chat Area - sandwich layout when interactive */}
-                        {chunkStates[currentChunkIndex] === 'interactive' && (
-                            <div className="flex-1 flex flex-col min-h-0">
-                                {/* Chat Messages - scrollable middle layer */}
-                                <div className="bg-white flex-1 overflow-y-auto space-y-4 px-6 py-2">
-                                    {(chatMessages[currentChunkIndex] || []).map((message, index) => (
-                                        message.type === 'user' ? (
-                                            <div 
-                                                key={index} 
-                                                className="w-full bg-gray-50 border border-gray-200 rounded-lg p-4 shadow-sm"
-                                            >
-                                                <div className="text-xs font-medium mb-2 text-gray-600">
-                                                    You
-                                                </div>
-                                                <div className="prose prose-sm max-w-none">
-                                                    <ReactMarkdown
-                                                        remarkPlugins={[remarkMath]}
-                                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                                        components={{
-                                                            p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
-                                                            ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
-                                                            ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
-                                                            li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,
-                                                            strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
-                                                            em: ({ children }) => <em className="italic">{children}</em>,
-                                                            code: ({ inline, children }) => 
-                                                                inline ? 
-                                                                <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code> :
-                                                                <pre className="bg-gray-100 p-2 rounded overflow-x-auto my-2">
-                                                                    <code className="text-sm font-mono">{children}</code>
-                                                                </pre>,
-                                                            blockquote: ({ children }) => (
-                                                                <blockquote className="border-l-4 border-blue-200 pl-4 italic text-gray-700 my-2">
-                                                                    {children}
-                                                                </blockquote>
-                                                            )
-                                                        }}
-                                                    >
-                                                        {message.text}
-                                                    </ReactMarkdown>
-                                                </div>
-                                            </div>
-                                        ) : (
-                                            <div key={index} className="w-full py-4">
-                                                <div className="prose prose-sm max-w-none">
-                                                    <ReactMarkdown
-                                                        remarkPlugins={[remarkMath]}
-                                                        rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                                        components={{
-                                                            p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
-                                                            ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
-                                                            ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
-                                                            li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,
-                                                            strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
-                                                            em: ({ children }) => <em className="italic">{children}</em>,
-                                                            code: ({ inline, children }) => 
-                                                                inline ? 
-                                                                <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code> :
-                                                                <pre className="bg-gray-100 p-2 rounded overflow-x-auto my-2">
-                                                                    <code className="text-sm font-mono">{children}</code>
-                                                                </pre>,
-                                                            blockquote: ({ children }) => (
-                                                                <blockquote className="border-l-4 border-blue-200 pl-4 italic text-gray-700 my-2">
-                                                                    {children}
-                                                                </blockquote>
-                                                            )
-                                                        }}
-                                                    >
-                                                        {message.text}
-                                                    </ReactMarkdown>
-                                                </div>
-                                            </div>
-                                        )
-                                    ))}
-                                    
-                                    {/* Typing animation message */}
-                                    {typingMessage && (
-                                        <div className="w-full py-4">
-                                            <div className="prose prose-sm max-w-none">
-                                                <ReactMarkdown
-                                                    remarkPlugins={[remarkMath]}
-                                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
-                                                    components={{
-                                                        p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
-                                                        ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
-                                                        ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
-                                                        li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,
-                                                        strong: ({ children }) => <strong className="font-semibold text-gray-900">{children}</strong>,
-                                                        em: ({ children }) => <em className="italic">{children}</em>,
-                                                        code: ({ inline, children }) => 
-                                                            inline ? 
-                                                            <code className="bg-gray-100 px-1 py-0.5 rounded text-sm font-mono">{children}</code> :
-                                                            <pre className="bg-gray-100 p-2 rounded overflow-x-auto my-2">
-                                                                <code className="text-sm font-mono">{children}</code>
-                                                            </pre>,
-                                                        blockquote: ({ children }) => (
-                                                            <blockquote className="border-l-4 border-blue-200 pl-4 italic text-gray-700 my-2">
-                                                                {children}
-                                                            </blockquote>
-                                                        )
-                                                    }}
-                                                >
-                                                    {typingMessage}
-                                                </ReactMarkdown>
-                                            </div>
-                                        </div>
-                                    )}
-                                    
-                                    {/* Loading dots */}
-                                    {chatLoading && (
-                                        <div className="w-full py-4">
-                                            <div className="flex space-x-1">
-                                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
-                                                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
-                                            </div>
-                                        </div>
-                                    )}
-                            </div>
-                            
-                                {/* Chat Input - sticky at bottom */}
-                                <div className="flex-shrink-0 bg-white border-t border-gray-200 p-6">
-                                <div className="flex gap-2 mb-3">
-                                    <input
-                                        type="text"
-                                        value={userInput}
-                                        onChange={(e) => setUserInput(e.target.value)}
-                                        placeholder="Type your response..."
-                                        className="flex-1 px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-1 focus:ring-gray-300"
-                                    />
-                                    <button className="px-4 py-2 bg-gray-50 hover:bg-gray-100 text-gray-600 rounded-lg transition-all">
-                                        →
-                                    </button>
-                                </div>
-                                
-                                </div>
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-    );
-}
-
-export default DocumentProcessor;

frontend/src/components/ImageComponent.jsx

@@ -1,115 +0,0 @@
-import { useState, useEffect, memo } from 'react';
-
-/**
- * ImageComponent - Handles loading and displaying images from the backend
- * 
- * Props:
- * - src: The image ID to fetch
- * - alt: Alt text for the image
- * - fileId: The document file ID (for fetching the image)
- * - imageCache: Object containing cached images
- * - onImageCached: Callback when image is successfully cached
- */
-const ImageComponent = memo(({ src, alt, fileId, imageCache, onImageCached }) => {
-    // Local state for this specific image
-    const [imageSrc, setImageSrc] = useState(null);
-    const [loading, setLoading] = useState(true);
-    
-    useEffect(() => {
-        // Only proceed if we have the required data
-        if (!fileId || !src) {
-            setLoading(false);
-            return;
-        }
-
-        // Check if image is already cached
-        if (imageCache && imageCache[src]) {
-            setImageSrc(imageCache[src]);
-            setLoading(false);
-            return;
-        }
-
-        // Fetch the image from backend
-        const fetchImage = async () => {
-            try {
-                const response = await fetch(`/get_image/${fileId}/${src}`);
-                if (response.ok) {
-                    const data = await response.json();
-                    const imageData = data.image_base64;
-                    
-                    // Set the image for display
-                    setImageSrc(imageData);
-                    
-                    // Notify parent component to cache this image
-                    if (onImageCached) {
-                        onImageCached(src, imageData);
-                    }
-                }
-            } catch (error) {
-                console.error('Error fetching image:', error);
-            } finally {
-                setLoading(false);
-            }
-        };
-
-        fetchImage();
-    }, [src, fileId, imageCache, onImageCached]);
-
-    // Show loading state
-    if (loading) {
-        return (
-            <span style={{ 
-                display: 'inline-block',
-                width: '100%', 
-                height: '200px', 
-                backgroundColor: '#f3f4f6', 
-                textAlign: 'center',
-                lineHeight: '200px',
-                margin: '1rem 0',
-                borderRadius: '0.5rem',
-                color: '#6b7280'
-            }}>
-                Loading image...
-            </span>
-        );
-    }
-
-    // Show error state if image couldn't be loaded
-    if (!imageSrc) {
-        return (
-            <span style={{ 
-                display: 'inline-block',
-                width: '100%', 
-                height: '200px', 
-                backgroundColor: '#fef2f2', 
-                textAlign: 'center',
-                lineHeight: '200px',
-                margin: '1rem 0',
-                borderRadius: '0.5rem',
-                border: '1px solid #fecaca',
-                color: '#dc2626'
-            }}>
-                Image not found: {alt || src}
-            </span>
-        );
-    }
-
-    // Render the actual image
-    return (
-        <img 
-            src={imageSrc}
-            alt={alt || 'Document image'}
-            style={{ 
-                display: 'block',
-                maxWidth: '100%', 
-                height: 'auto',
-                margin: '1.5rem auto'
-            }}
-        />
-    );
-});
-
-// Set display name for debugging
-ImageComponent.displayName = 'ImageComponent';
-
-export default ImageComponent;

frontend/src/components/LoadingAnimation.jsx

@@ -1,10 +1,10 @@
-const LoadingAnimation = ({ uploadProgress, ocrProgress }) => (
+const LoadingAnimation = ({ uploadProgress }) => (
     <div className="flex flex-col items-center justify-center min-h-screen bg-gray-50">
         <div className="text-center max-w-md">
             <div className="mb-8">
                 <div className="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
                 <h2 className="text-2xl font-bold text-gray-900 mb-2">Processing Your Document</h2>
-                <p className="text-gray-600">This may take a moment...</p>
+                <p className="text-gray-600">Uploading your PDF...</p>
             </div>
 
             {/* Upload Progress */}
@@ -21,22 +21,8 @@ const LoadingAnimation = ({ uploadProgress, ocrProgress }) => (
                 </div>
             </div>
 
-            {/* OCR Progress */}
-            <div className="mb-6">
-                <div className="flex justify-between text-sm text-gray-600 mb-1">
-                    <span>Processing with AI</span>
-                    <span>{ocrProgress}%</span>
-                </div>
-                <div className="w-full bg-gray-200 rounded-full h-2">
-                    <div 
-                        className="bg-green-500 h-2 rounded-full transition-all duration-300"
-                        style={{ width: `${ocrProgress}%` }}
-                    ></div>
-                </div>
-            </div>
-
             <p className="text-sm text-gray-500">
-                Using AI to extract text and understand your document structure...
+                Preparing your document for viewing...
             </p>
         </div>
     </div>

frontend/src/components/SimpleChat.jsx

@@ -0,0 +1,116 @@
+import { useState } from 'react';
+
+const SimpleChat = () => {
+  const [messages, setMessages] = useState([
+    {
+      id: 1,
+      role: 'assistant',
+      content: 'Hi! Ask me anything about this section.'
+    }
+  ]);
+  const [input, setInput] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+
+  const sendMessage = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || isLoading) return;
+
+    const userMessage = {
+      id: Date.now(),
+      role: 'user',
+      content: input.trim()
+    };
+
+    setMessages(prev => [...prev, userMessage]);
+    setInput('');
+    setIsLoading(true);
+
+    try {
+      const response = await fetch('/api/chat', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          messages: [...messages, userMessage].map(msg => ({
+            role: msg.role,
+            content: msg.content
+          }))
+        })
+      });
+
+      const data = await response.json();
+      
+      setMessages(prev => [...prev, {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: data.content || data.message || 'Sorry, no response received.'
+      }]);
+    } catch (error) {
+      console.error('Error:', error);
+      setMessages(prev => [...prev, {
+        id: Date.now() + 1,
+        role: 'assistant',
+        content: 'Sorry, something went wrong. Please try again.'
+      }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {messages.map(message => (
+          <div
+            key={message.id}
+            className={`flex ${message.role === 'user' ? 'justify-end' : 'justify-start'}`}
+          >
+            <div
+              className={`max-w-[70%] p-3 rounded-lg ${
+                message.role === 'user'
+                  ? 'bg-blue-500 text-white'
+                  : 'bg-gray-100 text-gray-900'
+              }`}
+            >
+              {message.content}
+            </div>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="bg-gray-100 p-3 rounded-lg">
+              <div className="flex space-x-1">
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.1s'}}></div>
+                <div className="w-2 h-2 bg-gray-400 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Input */}
+      <form onSubmit={sendMessage} className="p-4 border-t">
+        <div className="flex space-x-2">
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            placeholder="Type your message..."
+            disabled={isLoading}
+            className="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-gray-100"
+          />
+          <button
+            type="submit"
+            disabled={!input.trim() || isLoading}
+            className="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed"
+          >
+            {isLoading ? '...' : 'Send'}
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default SimpleChat;

frontend/src/components/UploadPage.jsx

@@ -1,277 +0,0 @@
-import { useState, useRef } from 'react';
-import { Document, Page, pdfjs } from 'react-pdf';
-import 'react-pdf/dist/Page/AnnotationLayer.css';
-import 'react-pdf/dist/Page/TextLayer.css';
-
-pdfjs.GlobalWorkerOptions.workerSrc = '/pdf.worker.min.js';
-
-function UploadPage() {
-    const fileInputRef = useRef(null);
-    const pdfContainerRef = useRef(null);
-    const [selectedFile, setSelectedFile] = useState(null);
-    const [numPages, setNumPages] = useState(null);
-    const [currentPage, setCurrentPage] = useState(1);
-    const [zoomLevel, setZoomLevel] = useState(1);
-    const [visiblePages, setVisiblePages] = useState(new Set([1]));
-    const [chunks, setChunks] = useState([]);
-    const [processing, setProcessing] = useState(false);
-
-    const handleFileChange = (e) => {
-        setSelectedFile(e.target.files[0]);
-        setChunks([]); // Clear previous chunks
-    };
-
-    const processPdf = async () => {
-        if (!selectedFile) return;
-
-        setProcessing(true);
-        const formData = new FormData();
-        formData.append('file', selectedFile);
-
-        try {
-            const response = await fetch('http://localhost:8000/upload_pdf', {
-                method: 'POST',
-                body: formData,
-            });
-
-            if (response.ok) {
-                const data = await response.json();
-                // Handle the new response format - create a fake chunk array for now
-                setChunks([{
-                    text: `File processed: ${data.filename}`,
-                    page_number: 1,
-                    chunk_type: "info",
-                    size: data.size,
-                    has_api_key: data.has_api_key
-                }]);
-            } else {
-                console.error('Failed to process PDF');
-            }
-        } catch (error) {
-            console.error('Error processing PDF:', error);
-        } finally {
-            setProcessing(false);
-        }
-    };
-
-    // Handle scroll to update current page and track visible pages
-    const handleScroll = () => {
-        if (!pdfContainerRef.current || !numPages) return;
-        
-        const container = pdfContainerRef.current;
-        const scrollTop = container.scrollTop;
-        const containerHeight = container.clientHeight;
-        const totalScrollHeight = container.scrollHeight - containerHeight;
-        
-        // Calculate which page we're viewing based on scroll position
-        const scrollPercent = scrollTop / totalScrollHeight;
-        const newPage = Math.min(Math.floor(scrollPercent * numPages) + 1, numPages);
-        
-        if (newPage !== currentPage) {
-            setCurrentPage(newPage);
-        }
-
-        // Track visible pages based on zoom level (more pages visible when zoomed out)
-        const newVisiblePages = new Set();
-        const visibleRange = Math.max(1, Math.ceil(2 / zoomLevel)); // More pages when zoomed out
-        for (let i = Math.max(1, newPage - visibleRange); i <= Math.min(numPages, newPage + visibleRange); i++) {
-            newVisiblePages.add(i);
-        }
-        
-        // Update visible pages if changed
-        if (newVisiblePages.size !== visiblePages.size || 
-            ![...newVisiblePages].every(page => visiblePages.has(page))) {
-            setVisiblePages(newVisiblePages);
-        }
-    };
-
-    // Jump to specific page
-    const goToPage = (pageNumber) => {
-        if (!pdfContainerRef.current || !numPages) return;
-        
-        // Update visible pages immediately for target page
-        const newVisiblePages = new Set();
-        const visibleRange = Math.max(1, Math.ceil(2 / zoomLevel)); // More pages when zoomed out
-        for (let i = Math.max(1, pageNumber - visibleRange); i <= Math.min(numPages, pageNumber + visibleRange); i++) {
-            newVisiblePages.add(i);
-        }
-        setVisiblePages(newVisiblePages);
-        
-        const container = pdfContainerRef.current;
-        const totalScrollHeight = container.scrollHeight - container.clientHeight;
-        
-        // Calculate scroll position for the target page
-        const targetScrollPercent = (pageNumber - 1) / numPages;
-        const targetScrollTop = targetScrollPercent * totalScrollHeight;
-        
-        container.scrollTo({
-            top: targetScrollTop,
-            behavior: 'smooth'
-        });
-    };
-
-    // Zoom controls
-    const zoomIn = () => setZoomLevel(prev => Math.min(prev + 0.25, 3));
-    const zoomOut = () => setZoomLevel(prev => Math.max(prev - 0.25, 0.5));
-    const resetZoom = () => setZoomLevel(1);
-
-    return (
-        <div className="h-screen bg-gray-50 overflow-hidden">
-        {!selectedFile ? (
-            // Show upload UI
-            <div className="flex items-center justify-center min-h-screen">
-            <div className="text-center">
-                <h1 className="text-3xl font-bold text-gray-900 mb-4">
-                Upload Your PDF
-                </h1>
-                <p className="text-gray-600 mb-8">
-                Click below to upload a PDF and start your deep dive.
-                </p>
-                <input
-                ref={fileInputRef}
-                type="file"
-                accept=".pdf"
-                className="hidden"
-                onChange={handleFileChange}
-                />
-                <button
-                onClick={() => fileInputRef.current.click()}
-                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                >
-                Upload PDF
-                </button>
-            </div>
-            </div>
-        ) : (
-            // Show PDF + chat layout
-            <div className="flex h-screen">
-            <div className="w-2/3 bg-white flex flex-col relative">
-                {/* PDF container with scrolling */}
-                    <div 
-                        ref={pdfContainerRef}
-                        className="flex-1 overflow-auto flex justify-center bg-gray-100"
-                        onScroll={handleScroll}
-                    >
-                        <div className="py-4">
-                            <Document
-                                file={selectedFile}
-                                onLoadSuccess={({ numPages }) => setNumPages(numPages)}
-                            >
-                                {/* Render all pages continuously */}
-                                {numPages && Array.from(new Array(numPages), (_, index) => {
-                                    const pageNum = index + 1;
-                                    const isVisible = visiblePages.has(pageNum);
-                                    const currentZoom = isVisible ? zoomLevel : 1; // Only zoom visible pages
-                                    
-                                    return (
-                                        <div key={pageNum} className="mb-4 flex justify-center">
-                                            <Page 
-                                                pageNumber={pageNum} 
-                                                width={typeof window !== 'undefined' ? window.innerWidth * 0.66 * 0.9 * currentZoom : 600 * currentZoom}
-                                            />
-                                        </div>
-                                    );
-                                })}
-                            </Document>
-                        </div>
-                </div>
-                {/* Pagination overlay - floating pill */}
-                {numPages && (
-                    <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 z-10">
-                        <div className="flex items-center bg-gray-800/90 backdrop-blur-sm rounded-full shadow-lg px-3 py-2 space-x-3">
-                            <button 
-                                onClick={() => goToPage(Math.max(currentPage - 1, 1))}
-                                disabled={currentPage <= 1}
-                                className="w-8 h-8 rounded-full bg-gray-600 hover:bg-gray-500 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-colors text-white"
-                            >
-                                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                                    <path d="M10 12l-4-4 4-4v8z"/>
-                                </svg>
-                            </button>
-
-                            <span className="px-3 py-1 text-sm font-medium text-white min-w-[60px] text-center">
-                                {currentPage}/{numPages}
-                            </span>
-
-                            <button 
-                                onClick={() => goToPage(Math.min(currentPage + 1, numPages))}
-                                disabled={currentPage >= numPages}
-                                className="w-8 h-8 rounded-full bg-gray-600 hover:bg-gray-500 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-colors text-white"
-                            >
-                                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
-                                    <path d="M6 4l4 4-4 4V4z"/>
-                                </svg>
-                            </button>
-                        </div>
-                    </div>
-                )}
-
-                {/* Zoom controls overlay - bottom right */}
-                {numPages && (
-                    <div className="absolute bottom-4 right-4 z-10 flex flex-col items-center space-y-2">
-                        {/* Main zoom pill - vertical */}
-                        <div className="flex flex-col items-center bg-gray-800/90 backdrop-blur-sm rounded-full shadow-lg px-2 py-2 space-y-1">
-                            <button 
-                                onClick={zoomIn}
-                                disabled={zoomLevel >= 3}
-                                className="w-6 h-6 rounded-full bg-gray-600 hover:bg-gray-500 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-colors text-white"
-                            >
-                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                                    <path d="M8 4v4H4v1h4v4h1V9h4V8H9V4z"/>
-                                </svg>
-                            </button>
-
-                            <button 
-                                onClick={zoomOut}
-                                disabled={zoomLevel <= 0.5}
-                                className="w-6 h-6 rounded-full bg-gray-600 hover:bg-gray-500 disabled:opacity-30 disabled:cursor-not-allowed flex items-center justify-center transition-colors text-white"
-                            >
-                                <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
-                                    <path d="M4 8h8v1H4z"/>
-                                </svg>
-                            </button>
-                        </div>
-
-                        {/* Reset button below */}
-                        <button 
-                            onClick={resetZoom}
-                            className="w-10 h-10 bg-gray-700 hover:bg-gray-500 backdrop-blur-sm rounded-full shadow-lg flex items-center justify-center text-white transition-colors"
-                        >
-                            <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor" stroke="currentColor" strokeWidth="0.5">
-                                <path d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" strokeWidth="1"/>
-                                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
-                            </svg>
-                        </button>
-                    </div>
-                )}
-                
-            </div>
-            {/* White separator bar */}
-            <div className="w-4 bg-white"></div>
-            
-            <div className="flex-1 bg-gray-100 overflow-auto">
-                <div className="p-4">
-                    <button
-                        onClick={processPdf}
-                        disabled={processing}
-                        className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mb-4"
-                    >
-                        {processing ? 'Processing...' : 'Process PDF'}
-                    </button>
-                    <div>
-                        {chunks.map((chunk, index) => (
-                            <div key={index} className="bg-white p-4 rounded-lg shadow mb-4">
-                                <p className="text-sm text-gray-600">Page: {chunk.page_number}, Type: {chunk.chunk_type}</p>
-                                <p className="text-gray-800">{chunk.text}</p>
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            </div>
-            </div>
-        )}
-        </div>
-    );
-}
-
-export default UploadPage;

frontend/src/hooks/useChat.js

@@ -1,109 +0,0 @@
-import { useState, useRef } from 'react';
-
-export const useChat = () => {
-    const [chatData, setChatData] = useState({});
-    const [chatLoading, setChatLoading] = useState(false);
-    const [chatMessages, setChatMessages] = useState({});
-    const [userInput, setUserInput] = useState('');
-    const [typingMessage, setTypingMessage] = useState('');
-    const [typingInterval, setTypingInterval] = useState(null);
-
-    const typeMessage = (text, callback) => {
-        if (typingInterval) {
-            clearInterval(typingInterval);
-        }
-        
-        setTypingMessage('');
-        let currentIndex = 0;
-        const typeSpeed = Math.max(1, Math.min(3, 200 / text.length));
-        
-        const interval = setInterval(() => {
-            if (currentIndex < text.length) {
-                setTypingMessage(text.slice(0, currentIndex + 1));
-                currentIndex++;
-            } else {
-                clearInterval(interval);
-                setTypingInterval(null);
-                setTypingMessage('');
-                callback();
-            }
-        }, typeSpeed);
-        
-        setTypingInterval(interval);
-    };
-
-    const startChunkLesson = async (chunkIndex, documentData) => {
-        if (!documentData || !documentData.chunks[chunkIndex]) return;
-        
-        setChatLoading(true);
-        
-        try {
-            const chunk = documentData.chunks[chunkIndex];
-            console.log('Starting lesson for chunk:', chunkIndex, chunk);
-            console.log('Document data:', documentData.fileId, documentData.markdown?.length);
-            
-            const response = await fetch(`/start_chunk_lesson/${documentData.fileId}/${chunkIndex}`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    chunk: chunk,
-                    document_markdown: documentData.markdown
-                })
-            });
-
-            if (!response.ok) {
-                const errorData = await response.text();
-                console.error('Backend error:', errorData);
-                throw new Error(`Failed to start lesson: ${response.status} - ${errorData}`);
-            }
-
-            const lessonData = await response.json();
-            setChatData(prev => ({
-                ...prev,
-                [chunkIndex]: {
-                    ...lessonData,
-                    chunkIndex: chunkIndex,
-                    chunk: chunk
-                }
-            }));
-            
-            setChatLoading(false);
-            
-            typeMessage(lessonData.questions, () => {
-                setChatMessages(prev => ({
-                    ...prev,
-                    [chunkIndex]: [
-                        { type: 'ai', text: lessonData.questions }
-                    ]
-                }));
-            });
-            
-        } catch (error) {
-            console.error('Error starting lesson:', error);
-            alert('Error starting lesson: ' + error.message);
-            setChatLoading(false);
-        }
-    };
-
-    const clearTypingAnimation = () => {
-        if (typingInterval) {
-            clearInterval(typingInterval);
-            setTypingInterval(null);
-        }
-        setTypingMessage('');
-    };
-
-    return {
-        chatData,
-        chatLoading,
-        chatMessages,
-        userInput,
-        typingMessage,
-        startChunkLesson,
-        clearTypingAnimation,
-        setUserInput,
-        setChatMessages
-    };
-};

frontend/src/hooks/useChunkNavigation.js

@@ -11,6 +11,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
                 clearTypingAnimation();
             }
             setCurrentChunkIndex(currentChunkIndex + 1);
+            setChunkExpanded(true);
         }
     };
 
@@ -20,6 +21,7 @@ export const useChunkNavigation = (documentData, clearTypingAnimation) => {
                 clearTypingAnimation();
             }
             setCurrentChunkIndex(currentChunkIndex - 1);
+            setChunkExpanded(true);
         }
     };
 

frontend/src/hooks/useDocumentProcessor.js

@@ -1,59 +1,23 @@
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef } from 'react';
 
 export const useDocumentProcessor = () => {
     const fileInputRef = useRef(null);
     const [selectedFile, setSelectedFile] = useState(null);
     const [processing, setProcessing] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
-    const [ocrProgress, setOcrProgress] = useState(0);
     const [documentData, setDocumentData] = useState(null);
-    const [imageCache, setImageCache] = useState({});
-    const imageCacheRef = useRef({});
 
     const handleFileChange = (e) => {
         setSelectedFile(e.target.files[0]);
         setDocumentData(null);
         setUploadProgress(0);
-        setOcrProgress(0);
-        setImageCache({});
-        imageCacheRef.current = {};
     };
 
-    const fetchImage = useCallback(async (imageId, fileId) => {
-        if (imageCacheRef.current[imageId]) {
-            return imageCacheRef.current[imageId];
-        }
-
-        try {
-            const response = await fetch(`/get_image/${fileId}/${imageId}`);
-            if (response.ok) {
-                const data = await response.json();
-                const imageData = data.image_base64;
-                
-                imageCacheRef.current = {
-                    ...imageCacheRef.current,
-                    [imageId]: imageData
-                };
-                
-                setImageCache(prev => ({
-                    ...prev,
-                    [imageId]: imageData
-                }));
-                
-                return imageData;
-            }
-        } catch (error) {
-            console.error('Error fetching image:', error);
-        }
-        return null;
-    }, []);
-
     const processDocument = async () => {
         if (!selectedFile) return;
 
         setProcessing(true);
         setUploadProgress(0);
-        setOcrProgress(0);
 
         try {
             // Step 1: Upload PDF
@@ -67,89 +31,92 @@ export const useDocumentProcessor = () => {
             });
 
             if (!uploadResponse.ok) {
+                const errorText = await uploadResponse.text();
+                console.error('Upload failed:', uploadResponse.status, errorText);
                 throw new Error('Failed to upload PDF');
             }
 
-            const uploadData = await uploadResponse.json();
+            const responseText = await uploadResponse.text();
+            console.log('Raw response:', responseText);
+            const uploadData = JSON.parse(responseText);
             setUploadProgress(100);
             
-            // Step 2: Process OCR
-            setOcrProgress(20);
-            await new Promise(resolve => setTimeout(resolve, 500));
-            
-            setOcrProgress(60);
-            const ocrResponse = await fetch(`/process_ocr/${uploadData.file_id}`);
-            
-            if (!ocrResponse.ok) {
-                throw new Error('Failed to process OCR');
-            }
-
-            const ocrData = await ocrResponse.json();
-            setOcrProgress(100);
+            // Brief pause to show completion
+            await new Promise(resolve => setTimeout(resolve, 200));
             
-            // Use hardcoded chunks for MVP testing
+            // Use hardcoded chunks for the document
             const hardcodedChunks = [
-  {
+{
     "topic": "Magnetfeldmessung und Hysterese-Analyse",
-    "text": "Zu Beginn des Versuchs haben wir mit Hilfe des Teslameters die Magnetfeldstärke B an der Position der Cd-Lampe bei verschiedenen Spulenströmen gemessen. (siehe Messwerte in Tabelle 1 im Laborbuch). In Figure 1 sind die gemessenen Feldstärken als Funktion der Stromstärke aufgetragen.\nAnhand der Fehlerbalken und der praktisch identischen Überlagerung der beiden linearen Fitgeraden für auf- und absteigende Stromstärken, wird deutlich, dass keine Hystereseeffekte vorliegen. Der lineare Fit wurde hierbei nur auf die Stromstärken bis einschl. 10A angewandt, da für größere Stromstärken das Magnetfeld nicht in direktem proportionalen Zusammenhang ansteigt. Dies ist mit Sättigungseffekten der Magnetisierung des Eisenkerns der verwendeten Spule zu erklären."
-  },
+    "text": "Zu Beginn des Versuchs haben wir mit Hilfe des Teslameters die Magnetfeldstärke B an der Position der Cd-Lampe bei verschiedenen Spulenströmen gemessen. (siehe Messwerte in Tabelle 1 im Laborbuch). In Figure 1 sind die gemessenen Feldstärken als Funktion der Stromstärke aufgetragen.\nAnhand der Fehlerbalken und der praktisch identischen Überlagerung der beiden linearen Fitgeraden für auf- und absteigende Stromstärken, wird deutlich, dass keine Hystereseeffekte vorliegen. Der lineare Fit wurde hierbei nur auf die Stromstärken bis einschl. 10A angewandt, da für größere Stromstärken das Magnetfeld nicht in direktem proportionalen Zusammenhang ansteigt. Dies ist mit Sättigungseffekten der Magnetisierung des Eisenkerns der verwendeten Spule zu erklären.",
+    "page": 1
+},
   {
     "topic": "Qualitative Beobachtung des Zeeman-Effekts",
-    "text": "Mit Hilfe der CMOS Kamera wurde das Spektrum des emittierten Lichts der Cadmiumlampe unter Verwendung des Lummer Gehercke Interferometers beobachtet. Die Beobachtungen wurden in longitudinaler und transversaler Richtung zum Magnetfeld durchgeführt."
-  },
+    "text": "Mit Hilfe der CMOS Kamera wurde das Spektrum des emittierten Lichts der Cadmiumlampe unter Verwendung des Lummer Gehercke Interferometers beobachtet. Die Beobachtungen wurden in longitudinaler und transversaler Richtung zum Magnetfeld durchgeführt.",
+    "page": 2
+},
   {
     "topic": "Zeeman-Effekt: Longitudinale Richtung mit Filtern",
-    "text": "## ohne Filter:\n\nEs sind deutlich zwei Linien pro Ordnung zu erkennen. Dies sind die $\\sigma^{+}$und $\\sigma^{-}$Linien. Die $\\pi$ Linie ist in longitudinaler Richtung nicht zu beobachten\n\n## mit $\\lambda / 4$-Plättchen und Polarisationsfilter:\n\nVon der Cadmiumlampe aus betrachtet wird zuerst ein $\\lambda / 4$-Plättchen und danach ein Polarisationsfilter in den Strahlengang gebracht. Je nach Ausrichtung der Filter zueinander wird nun eine der beiden Linien ausgeblendet.\n\n$$\n-45^{\\circ} \\text { Winkel: }\n$$\n\nStehen $\\lambda / 4$-Plättchen und Polarisationsfilter zueinander im $-45^{\\circ}$ Winkel, wird das zirkular polarisierte Licht der $\\sigma^{-}$Linie um $45^{\\circ}$ verschoben linear polarisiert und somit vom Polarisationsfilter abgeschirmt. Folglich ist in dieser Konstellation nur die linke der beiden $\\sigma$ Linien zu beobachten.\n\n$$\n+45^{\\circ} \\text { Winkel: }\n$$\n\nStehen $\\lambda / 4$-Plättchen und Polarisationsfilter zueinander im $+45^{\\circ}$ Winkel, ist nach analogem Prinzip wie zuvor nur die rechte Linie auf dem Kamerabild zu beobachten."
-  },
+    "text": "## ohne Filter:\n\nEs sind deutlich zwei Linien pro Ordnung zu erkennen. Dies sind die $\\sigma^{+}$und $\\sigma^{-}$Linien. Die $\\pi$ Linie ist in longitudinaler Richtung nicht zu beobachten\n\n## mit $\\lambda / 4$-Plättchen und Polarisationsfilter:\n\nVon der Cadmiumlampe aus betrachtet wird zuerst ein $\\lambda / 4$-Plättchen und danach ein Polarisationsfilter in den Strahlengang gebracht. Je nach Ausrichtung der Filter zueinander wird nun eine der beiden Linien ausgeblendet.\n\n$$\n-45^{\\circ} \\text { Winkel: }\n$$\n\nStehen $\\lambda / 4$-Plättchen und Polarisationsfilter zueinander im $-45^{\\circ}$ Winkel, wird das zirkular polarisierte Licht der $\\sigma^{-}$Linie um $45^{\\circ}$ verschoben linear polarisiert und somit vom Polarisationsfilter abgeschirmt. Folglich ist in dieser Konstellation nur die linke der beiden $\\sigma$ Linien zu beobachten.\n\n$$\n+45^{\\circ} \\text { Winkel: }\n$$\n\nStehen $\\lambda / 4$-Plättchen und Polarisationsfilter zueinander im $+45^{\\circ}$ Winkel, ist nach analogem Prinzip wie zuvor nur die rechte Linie auf dem Kamerabild zu beobachten.",
+    "page": 2
+},
   {
     "topic": "Zeeman-Effekt: Transversale Richtung und Polarisation",
-    "text": "## ohne Filter:\n\nEs sind deutlich drei Linien pro Ordnung zu erkennen. Dies sind die $\\sigma^{+}, \\pi$ und $\\sigma^{-}$Linien.\n\n## mit Polarisationsfilter horizontal (in B-Feld Richtung):\n\nDie beiden $\\sigma$-Linien sind vollständig ausgeblendet. Die $\\pi-$ Linie ist deutlich sichtbar.\nmit Polarisationsfilter vertikal $\\left(90^{\\circ}\\right.$ zu B-Feld Richtung):\nDie beiden $\\sigma$-Linien sind klar sichtbar. Die $\\pi$-Linie ist ausgeblendet.\n\nWie in Figure 3 gut zu erkennen ist, sind die ausgeblendeten Linien in beiden Konfigurationen weiterhin leicht sichtbar. Dies ist auf das nicht perfekt homogene Magnetfeld am Ort der Ca-Lampe zurückzuführen. Das Licht ist also nicht perfekt zirkular bzw. in B-Feld Richtung polarisiert, weshalb ein vollständiges Ausblenden im Experiment nicht zu beobachten ist."
-  },
+    "text": "## ohne Filter:\n\nEs sind deutlich drei Linien pro Ordnung zu erkennen. Dies sind die $\\sigma^{+}, \\pi$ und $\\sigma^{-}$Linien.\n\n## mit Polarisationsfilter horizontal (in B-Feld Richtung):\n\nDie beiden $\\sigma$-Linien sind vollständig ausgeblendet. Die $\\pi-$ Linie ist deutlich sichtbar.\nmit Polarisationsfilter vertikal $\\left(90^{\\circ}\\right.$ zu B-Feld Richtung):\nDie beiden $\\sigma$-Linien sind klar sichtbar. Die $\\pi$-Linie ist ausgeblendet.\n\nWie in Figure 3 gut zu erkennen ist, sind die ausgeblendeten Linien in beiden Konfigurationen weiterhin leicht sichtbar. Dies ist auf das nicht perfekt homogene Magnetfeld am Ort der Ca-Lampe zurückzuführen. Das Licht ist also nicht perfekt zirkular bzw. in B-Feld Richtung polarisiert, weshalb ein vollständiges Ausblenden im Experiment nicht zu beobachten ist.",
+    "page": 3
+},
   {
     "topic": "Bestimmung des Zeemanshifts und Datenaufbereitung",
-    "text": "Die Messdaten bei verschiedene Stromstärken wurden jeweils in einem Plot dargestellt. Um für den Fit möglichst saubere Messkurven des Spektrums zu verwenden, wurde die Messreihe bei $I=8 A$ nicht in die Datenauswertung einbezogen, da die Aufspaltung der Cadmiumlinie nur schwer zu beobachten war. Das gleich gilt für die 8. Interferenzodnung, die nicht berücksichtigt wurde. Für die Datenauswertung fließen also die Nullte bis 7. Ordnung jeweils bei 9 bis 13 Ampere ein.\nAls Funktion um die Messdaten zu fitten wurde ein Pseudo-Voigt-Profil verwendet. Die drei Kurven einer Ordnung wurden hierbei gemeinsam mit der Summe dreier Pseudo-Voigt-Profile gefittet. In Figure 4 sind exemplarisch anhand der Daten für $I=12 A$ die Messdaten und der abschnittsweise Fit zu erkennen."
-  },
+    "text": "Die Messdaten bei verschiedene Stromstärken wurden jeweils in einem Plot dargestellt. Um für den Fit möglichst saubere Messkurven des Spektrums zu verwenden, wurde die Messreihe bei $I=8 A$ nicht in die Datenauswertung einbezogen, da die Aufspaltung der Cadmiumlinie nur schwer zu beobachten war. Das gleich gilt für die 8. Interferenzodnung, die nicht berücksichtigt wurde. Für die Datenauswertung fließen also die Nullte bis 7. Ordnung jeweils bei 9 bis 13 Ampere ein.\nAls Funktion um die Messdaten zu fitten wurde ein Pseudo-Voigt-Profil verwendet. Die drei Kurven einer Ordnung wurden hierbei gemeinsam mit der Summe dreier Pseudo-Voigt-Profile gefittet. In Figure 4 sind exemplarisch anhand der Daten für $I=12 A$ die Messdaten und der abschnittsweise Fit zu erkennen.",
+    "page": 4
+},
   {
     "topic": "Fehleranalyse der Fitparameter und Verzerrungseffekte",
-    "text": "Anhand der Fitparameter wird die Position der $\\sigma$ und $\\pi$ Linien bestimmt. Die Fehler der Fitparameter sind extrem klein $(\\approx 0,1 p x)$ und eigenen sich nicht als realistische Fehler für unsere weitere Rechnung. Als minimalen Fehler nehmen wir daher die Auflösung der Kamera an ( $1 p x$ ) und skalieren alle Fehler so, dass der kleineste Fehler exakt $1 p x$ beträgt. Die anderen Fehler sind dann entsprechend linear skaliert größer. Dies berücksichtigt die unterschiedliche Qualität der Fits auf unterschiedliche Interferenz-Ordnungen, bringt die Fehler aber in einen experimentell realistischen Bereich.\nFür die Berechnung des Zeemanshifts müssen die Verzerrungseffekte der Lummer-Gehrcke-Platte beachtet werden. Hierfür wird die Position der $\\pi$-Linien gegen der Interferenzordnung $k$ der entsprechenden Linie aufgetragen. Der funktionelle Zusammenhang dieser beiden Größen wird durch eine quadratische Funktion $k=f(a)$ approximiert:\n\n$$\\nk=f(a)=b a^{2}+c a+d\n$$"
-  },
+    "text": "Anhand der Fitparameter wird die Position der $\\sigma$ und $\\pi$ Linien bestimmt. Die Fehler der Fitparameter sind extrem klein $(\\approx 0,1 p x)$ und eigenen sich nicht als realistische Fehler für unsere weitere Rechnung. Als minimalen Fehler nehmen wir daher die Auflösung der Kamera an ( $1 p x$ ) und skalieren alle Fehler so, dass der kleineste Fehler exakt $1 p x$ beträgt. Die anderen Fehler sind dann entsprechend linear skaliert größer. Dies berücksichtigt die unterschiedliche Qualität der Fits auf unterschiedliche Interferenz-Ordnungen, bringt die Fehler aber in einen experimentell realistischen Bereich.\nFür die Berechnung des Zeemanshifts müssen die Verzerrungseffekte der Lummer-Gehrcke-Platte beachtet werden. Hierfür wird die Position der $\\pi$-Linien gegen der Interferenzordnung $k$ der entsprechenden Linie aufgetragen. Der funktionelle Zusammenhang dieser beiden Größen wird durch eine quadratische Funktion $k=f(a)$ approximiert: \n\n $k=f(a)=b a^{2}+c a+d$",
+    "page": 4
+},
   {
     "topic": "Berechnung der Wellenlängen- und Energieverschiebung",
-    "text": "Die Differenz zur ganzzahligen Ordnung der zugehörigen $\\pi$-Linie ergibt $\\delta k$. Für eine (kleine) Wellenlängenverschiebung $\\delta \\lambda$ gilt:\n\n$$\\n\\delta \\lambda=\\frac{\\delta k}{\\Delta k} \\cdot \\frac{\\lambda^{2}}{2 d \\cdot \\sqrt{n^{2}-1}}\n$$\n\nFür den Abstand $\\Delta k$ zweier Ordnungen gilt $\\Delta k=1$. Für die Wellenlänge $\\lambda$ der betrachten Linie verwenden wir den in Part 2 bestimmten Wert von $\\lambda=$ $(643,842 \\pm 0,007) \\mathrm{nm}$.\nWir kennen nun die Wellenlänge des Zeemanshift für jede von uns betrachtete Linie. Mit dem Zusammenhang zwischen Wellenlänge und Energie $E=\\frac{h c}{\\lambda}$ lässt sich nun die Energieverschiebung der Linine bestimmen. Wir nehmen an, dass die Wellenlängenverschiebung $\\delta \\lambda$ klein gegenüber der absoluten Wellenlänge $\\lambda$ ist, und erhalten daher für die Energieverschiebung $\\delta E$ in guter Näherung:\n\n$$\\n\\delta E=\\frac{h c}{\\lambda^{2}} \\delta \\lambda\n$$"
-  },
+    "text": "Die Differenz zur ganzzahligen Ordnung der zugehörigen $\\pi$-Linie ergibt $\\delta k$. Für eine (kleine) Wellenlängenverschiebung $\\delta \\lambda$ gilt:\n\n$$\\n\\delta \\lambda=\\frac{\\delta k}{\\Delta k} \\cdot \\frac{\\lambda^{2}}{2 d \\cdot \\sqrt{n^{2}-1}}\n$$\n\nFür den Abstand $\\Delta k$ zweier Ordnungen gilt $\\Delta k=1$. Für die Wellenlänge $\\lambda$ der betrachten Linie verwenden wir den in Part 2 bestimmten Wert von $\\lambda=$ $(643,842 \\pm 0,007) \\mathrm{nm}$.\nWir kennen nun die Wellenlänge des Zeemanshift für jede von uns betrachtete Linie. Mit dem Zusammenhang zwischen Wellenlänge und Energie $E=\\frac{h c}{\\lambda}$ lässt sich nun die Energieverschiebung der Linine bestimmen. Wir nehmen an, dass die Wellenlängenverschiebung $\\delta \\lambda$ klein gegenüber der absoluten Wellenlänge $\\lambda$ ist, und erhalten daher für die Energieverschiebung $\\delta E$ in guter Näherung:\n\n$$\\n\\delta E=\\frac{h c}{\\lambda^{2}} \\delta \\lambda\n$$",
+    "page": 5
+},
   {
     "topic": "Bestimmung des Bohrschen Magnetons aus experimentellen Daten",
-    "text": "Abschließend nehmen wir den Durchschnitt aller Werte $\\delta E$ für eine Stromstärke $I$.\n\n### 3.2 Bestimmen des Bohrschen Magnetons $\\mu_{B}$ \n\nFür die Energieverschiebung beim Zeemaneffekt gilt:\n\n$$\n\\delta E=\\mu_{B} \\cdot m_{l} \\cdot B\n$$\n\nDa es sich bei der betrachteten Cadmiumlinie um einen ${ }^{1} D_{2} \\rightarrow{ }^{1} P_{1}$ Übergang handelt gilt hier $m_{l}= \\pm 1$. Somit folgt für das Bohrsche Magneton $\\mu_{B}$ als Funktion des Spulenstroms $I$ :\n\n$$\n\\mu_{B}(I)=\\frac{\\delta E(I)}{B(I)}\n$$\n\nDie Magnetfeldstärke $B(I)$ wurde hier anhand der Messwerte aus Teil 1 des Experiments bestimmt.\nWir erhalten für jeden Spulenstrom $I$ einen experimentell bestimmten Wert des Bohrschen Magnetons $\\mu_{B}$. Unsere Ergebnisse sind in Figure 6 graphisch dargestellt."
-  },
+    "text": "Abschließend nehmen wir den Durchschnitt aller Werte $\\delta E$ für eine Stromstärke $I$.\n\n### 3.2 Bestimmen des Bohrschen Magnetons $\\mu_{B}$ \n\nFür die Energieverschiebung beim Zeemaneffekt gilt:\n\n$$\n\\delta E=\\mu_{B} \\cdot m_{l} \\cdot B\n$$\n\nDa es sich bei der betrachteten Cadmiumlinie um einen ${ }^{1} D_{2} \\rightarrow{ }^{1} P_{1}$ Übergang handelt gilt hier $m_{l}= \\pm 1$. Somit folgt für das Bohrsche Magneton $\\mu_{B}$ als Funktion des Spulenstroms $I$ :\n\n$$\n\\mu_{B}(I)=\\frac{\\delta E(I)}{B(I)}\n$$\n\nDie Magnetfeldstärke $B(I)$ wurde hier anhand der Messwerte aus Teil 1 des Experiments bestimmt.\nWir erhalten für jeden Spulenstrom $I$ einen experimentell bestimmten Wert des Bohrschen Magnetons $\\mu_{B}$. Unsere Ergebnisse sind in Figure 6 graphisch dargestellt.",
+    "page": 6
+},
   {
     "topic": "Vergleich des experimentellen Werts mit dem Literaturwert",
-    "text": "Für den experimentellen Mittelwert erhalten wir:\n\n$$\n\\mu_{B, \\exp }=(10,1 \\pm 0.8) \\cdot 10^{-24} \\frac{J}{T}\n$$\n\nDer Literaturwert beträgt:\n\n$$\n\\mu_{B, l i t}=9,27400949 \\cdot 10^{-24} \\frac{J}{T}\n$$\n\nUnsere experimentell ermittelte Wert weicht also um 1,2 Sigma vom Literaturwert ab. Die Abweichung ist folglich nicht signifikant."
-  },
+    "text": "Für den experimentellen Mittelwert erhalten wir:\n\n$$\n\\mu_{B, \\exp }=(10,1 \\pm 0.8) \\cdot 10^{-24} \\frac{J}{T}\n$$\n\nDer Literaturwert beträgt:\n\n$$\n\\mu_{B, l i t}=9,27400949 \\cdot 10^{-24} \\frac{J}{T}\n$$\n\nUnsere experimentell ermittelte Wert weicht also um 1,2 Sigma vom Literaturwert ab. Die Abweichung ist folglich nicht signifikant.",
+    "page": 6
+},
   {
     "topic": "Kritische Betrachtung der Ergebnisse und Fehlerquellen",
-    "text": "Erfreulicherweise scheint unsere experimentelle Methode keine signifikante Abweichung zwischen Literaturwert und experimentellem Wert des Bohrschen Magnetons zu ergeben. Wir befinden uns mit unserem Wert im niedirgen 2-SigmaIntervall. Dennoch ist kritisch anzumerken, dass wir einen vergleichsweise großen realtiven Fehler auf unser Messergebnis von $7,1 \\%$ erhalten. Das bedeutet, unsere Abweichung ist zwar nicht sigifikant, dennoch weicht unser experimenteller Wert um knapp $10 \\%$ vom Literaturwert ab. Der verwendete experimentelle Aufbau ist folglich nur bedingt für eine exakte Bestimmung des Bohrschen Magnetons geeigent.\n\nDie beiden dominierenden Fehlerquellen sind zum einen die Bestimmung des Magnetfeldes B am Ort der Cadmium Lampe (Inhomogenitäten, exakte Platzierung der Lampe) und zum anderen die Wahl der Fehler der Positionen der $\\pi$ - und $\\sigma$-Linien im Spektrum.\nZum Vergleich: Legt man den Fehler prinzipiell für alle Linien auf $1 p x$, also die maximale Auflösung der Kamera, fest und verzichtet auf eine Skalierung der Fehler, beträgt die Abweichung des exp. Werts zum Literaturwert schon 2,8 Sigma. Wählt man analog für den Fehler der Linien $2 p x$, da beispielsweise ein Maximum auch exakt zwischen zwei Pixelreihen liegen kann, liegt die Abweichung bei 1,4 Sigma."
-  },
+    "text": "Erfreulicherweise scheint unsere experimentelle Methode keine signifikante Abweichung zwischen Literaturwert und experimentellem Wert des Bohrschen Magnetons zu ergeben. Wir befinden uns mit unserem Wert im niedirgen 2-SigmaIntervall. Dennoch ist kritisch anzumerken, dass wir einen vergleichsweise großen realtiven Fehler auf unser Messergebnis von $7,1 \\%$ erhalten. Das bedeutet, unsere Abweichung ist zwar nicht sigifikant, dennoch weicht unser experimenteller Wert um knapp $10 \\%$ vom Literaturwert ab. Der verwendete experimentelle Aufbau ist folglich nur bedingt für eine exakte Bestimmung des Bohrschen Magnetons geeigent.\n\nDie beiden dominierenden Fehlerquellen sind zum einen die Bestimmung des Magnetfeldes B am Ort der Cadmium Lampe (Inhomogenitäten, exakte Platzierung der Lampe) und zum anderen die Wahl der Fehler der Positionen der $\\pi$ - und $\\sigma$-Linien im Spektrum.\nZum Vergleich: Legt man den Fehler prinzipiell für alle Linien auf $1 p x$, also die maximale Auflösung der Kamera, fest und verzichtet auf eine Skalierung der Fehler, beträgt die Abweichung des exp. Werts zum Literaturwert schon 2,8 Sigma. Wählt man analog für den Fehler der Linien $2 p x$, da beispielsweise ein Maximum auch exakt zwischen zwei Pixelreihen liegen kann, liegt die Abweichung bei 1,4 Sigma.",
+    "page": 7
+},
   {
     "topic": "Quantitative Spektrumsbetrachtung und Wellenlängenbestimmung der Cd-Linie",
-    "text": "Zunächst wird der Untergrund von den Messdaten abgezogen, um Störungen durch Rauschen oder Sondereffekte wie kosmische Strahlung oder Umgebungsquellen zu eliminieren. Sollten sich in den Spektren negative Werte befinden, ist dies auf zufällige Unterschiede im Rauschen zurückzuführen. Anhand bekannter Linien des Neonspektrums werden den Pixeln nun Wellenlängen zugeordnet. Hierfür wurde der Bereich des Neonspektrums aufgenommen, in dem sich auch die rote Linie des Cadmiumspektrums befindet. In 7 sieht man das Neonspektrum und die Peaks, an die jeweils ein Voigt-Profil gelegt wurde. Jetzt kann man den identifizierten Linien ihre jeweilige Wellenlänge zuordnen und einen polynomiellen Zusammenhang finden. Wir haben uns für eine Gerade entschieden, die wie in Figure 8 zu sehen gut zu den Daten passt.\nSchließlich wird ein Voigt-Profil an die gemessene rote Cd-Linie gelegt, wie in Figure 9 gezeigt. Umrechnung anhand der Kalibrierung führt auf einen Wert von $\\lambda_{C d}=(643,842 \\pm 0,007) \\mathrm{nm}$. Dies befindet sich im $1 \\sigma$-Bereich des Literaturwertes von $\\lambda_{L i t}=643,84695 \\mathrm{~nm}$. Der Fehler ist Ergebnis der Gauß'schen Fehlerfortpflanzung."
-  },
+    "text": "Zunächst wird der Untergrund von den Messdaten abgezogen, um Störungen durch Rauschen oder Sondereffekte wie kosmische Strahlung oder Umgebungsquellen zu eliminieren. Sollten sich in den Spektren negative Werte befinden, ist dies auf zufällige Unterschiede im Rauschen zurückzuführen. Anhand bekannter Linien des Neonspektrums werden den Pixeln nun Wellenlängen zugeordnet. Hierfür wurde der Bereich des Neonspektrums aufgenommen, in dem sich auch die rote Linie des Cadmiumspektrums befindet. In 7 sieht man das Neonspektrum und die Peaks, an die jeweils ein Voigt-Profil gelegt wurde. Jetzt kann man den identifizierten Linien ihre jeweilige Wellenlänge zuordnen und einen polynomiellen Zusammenhang finden. Wir haben uns für eine Gerade entschieden, die wie in Figure 8 zu sehen gut zu den Daten passt.\nSchließlich wird ein Voigt-Profil an die gemessene rote Cd-Linie gelegt, wie in Figure 9 gezeigt. Umrechnung anhand der Kalibrierung führt auf einen Wert von $\\lambda_{C d}=(643,842 \\pm 0,007) \\mathrm{nm}$. Dies befindet sich im $1 \\sigma$-Bereich des Literaturwertes von $\\lambda_{L i t}=643,84695 \\mathrm{~nm}$. Der Fehler ist Ergebnis der Gauß'schen Fehlerfortpflanzung.",
+    "page": 8
+},
   {
     "topic": "Kritische Betrachtung der Genauigkeit und systematischer Fehler",
-    "text": "Messwert und theoretische Vorhersage für die bestimmte Linie stimmen innerhalb statistischer Schwankungen überein. Dies ist umso interessanter, wenn man die Unsicherheit des Messergebnisses betrachtet, die kleiner als 0,002\\% ist. Der absolute Fehler ist, wenn man die Steigung der Kalibrationsgeraden betrachtet, kleiner als 1px. Er besteht ausschließlich aus Abweichungen der numerischen Fits. Berücksichtigt man Ungenauigkeiten des CMOS Sensors oder die Möglichkeit, dass je nach Lage des Messwerts auch eine Abweichung um weniger als 1px eine größere Messwertschwankung verursachen kann, da die Pixel nur diskrete Werte messen können, liegt eine nachträgliche Anpassung nahe. Skaliert man die Unsicherheit auf 1px, liegt der Fehler des Messwerts bei $0,012 \\mathrm{~nm}$. Damit ist der relative Fehler weiterhin kleiner $0,005 \\%$.\n\nZur hohen Genauigkeit trägt vor allem das gute Messverfahren bei. Spektrometer und Datenaufnahme per Computer lassen wenig Raum für Abweichungen. Wie die Daten zeigen, haben wir dabei eine Quelle für einen möglichen großen systematischen Fehler umgangen: Die Kamera wurde auf das Spektrometer nur locker aufgesteckt. Hätte sich deren Position zwischen Neon- und Cadmiummessung z.B. durch Erschütterung des Labortisches verändert, hätte die Energiekalibrierung nicht mehr zur Messung der Cadmiumlinie gepasst."
-  },
+    "text": "Messwert und theoretische Vorhersage für die bestimmte Linie stimmen innerhalb statistischer Schwankungen überein. Dies ist umso interessanter, wenn man die Unsicherheit des Messergebnisses betrachtet, die kleiner als 0,002\\% ist. Der absolute Fehler ist, wenn man die Steigung der Kalibrationsgeraden betrachtet, kleiner als 1px. Er besteht ausschließlich aus Abweichungen der numerischen Fits. Berücksichtigt man Ungenauigkeiten des CMOS Sensors oder die Möglichkeit, dass je nach Lage des Messwerts auch eine Abweichung um weniger als 1px eine größere Messwertschwankung verursachen kann, da die Pixel nur diskrete Werte messen können, liegt eine nachträgliche Anpassung nahe. Skaliert man die Unsicherheit auf 1px, liegt der Fehler des Messwerts bei $0,012 \\mathrm{~nm}$. Damit ist der relative Fehler weiterhin kleiner $0,005 \\%$.\n\nZur hohen Genauigkeit trägt vor allem das gute Messverfahren bei. Spektrometer und Datenaufnahme per Computer lassen wenig Raum für Abweichungen. Wie die Daten zeigen, haben wir dabei eine Quelle für einen möglichen großen systematischen Fehler umgangen: Die Kamera wurde auf das Spektrometer nur locker aufgesteckt. Hätte sich deren Position zwischen Neon- und Cadmiummessung z.B. durch Erschütterung des Labortisches verändert, hätte die Energiekalibrierung nicht mehr zur Messung der Cadmiumlinie gepasst.",
+    "page": 9
+},
   {
     "topic": "Unerwartetes Verhalten durch mögliche Restmagnetisierung",
-    "text": "Abbildung 6 zeigt unerwartetes Verhalten. Obwohl der Magnet ausgeschaltet war, sind drei Maxima zu sehen, deren Flanken sehr steil abfallen. Vergleicht man mit den Messungen im Magnetfeld, ähneln sich die Strukturen. Möglich ist, dass die Eisenkernspule, in der sich die Lampe während der Messung befand eine Restmagnetisierung aufwies, die eine Aufspaltung herbeigeführt hat."
-  }
+    "text": "Abbildung 6 zeigt unerwartetes Verhalten. Obwohl der Magnet ausgeschaltet war, sind drei Maxima zu sehen, deren Flanken sehr steil abfallen. Vergleicht man mit den Messungen im Magnetfeld, ähneln sich die Strukturen. Möglich ist, dass die Eisenkernspule, in der sich die Lampe während der Messung befand eine Restmagnetisierung aufwies, die eine Aufspaltung herbeigeführt hat.",
+    "page": 9
+}
 ];
 
             setDocumentData({
-                fileId: uploadData.file_id,
-                filename: uploadData.filename,
-                markdown: ocrData.combined_markdown,
-                pages: ocrData.pages,
-                totalPages: ocrData.total_pages,
-                chunks: hardcodedChunks // Use hardcoded chunks instead of OCR chunks
+                filename: uploadData.filename || selectedFile.name,
+                filePath: uploadData.file_path,
+                chunks: hardcodedChunks
             });
 
         } catch (error) {
@@ -165,11 +132,8 @@ export const useDocumentProcessor = () => {
         selectedFile,
         processing,
         uploadProgress,
-        ocrProgress,
         documentData,
-        imageCache,
         handleFileChange,
-        fetchImage,
         processDocument,
         setSelectedFile
     };

frontend/src/lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

frontend/src/utils/markdownComponents.jsx

@@ -1,84 +1,8 @@
-import ImageComponent from '../components/ImageComponent';
-
-export const getDocumentMarkdownComponents = (documentData, fetchImage, imageCache, setImageCache) => ({
-    h1: ({ children }) => <h1 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem', color: '#1a202c' }}>{children}</h1>,
-    h2: ({ children }) => <h2 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', marginTop: '1.5rem', color: '#1a202c' }}>{children}</h2>,
-    h3: ({ children }) => <h3 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '1rem', color: '#1a202c' }}>{children}</h3>,
-    p: ({ children }) => <p style={{ marginBottom: '0.75rem', color: '#374151', lineHeight: '1.5', fontSize: '0.875rem' }}>{children}</p>,
-    hr: () => <hr style={{ margin: '1.5rem 0', borderColor: '#d1d5db' }} />,
-    ul: ({ children }) => <ul style={{ marginBottom: '0.75rem', marginLeft: '1.25rem', listStyleType: 'disc', fontSize: '0.875rem' }}>{children}</ul>,
-    ol: ({ children }) => <ol style={{ marginBottom: '0.75rem', marginLeft: '1.25rem', listStyleType: 'decimal', fontSize: '0.875rem' }}>{children}</ol>,
-    li: ({ children }) => <li style={{ marginBottom: '0.125rem', color: '#374151' }}>{children}</li>,
-    blockquote: ({ children }) => (
-        <blockquote style={{ borderLeft: '3px solid #3b82f6', paddingLeft: '0.75rem', fontStyle: 'italic', margin: '0.75rem 0', color: '#6b7280', fontSize: '0.875rem' }}>
-            {children}
-        </blockquote>
-    ),
-    code: ({ inline, children }) => 
-        inline ? 
-        <code style={{ backgroundColor: '#f3f4f6', padding: '0.125rem 0.25rem', borderRadius: '0.25rem', fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code> :
-        <pre style={{ backgroundColor: '#f3f4f6', padding: '0.75rem', borderRadius: '0.375rem', overflowX: 'auto', margin: '0.75rem 0' }}>
-            <code style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code>
-        </pre>,
-    div: ({ children, style }) => (
-        <div style={style}>
-            {children}
-        </div>
-    ),
-    img: ({ src, alt }) => (
-        <ImageComponent 
-            src={src} 
-            alt={alt} 
-            fileId={documentData?.fileId}
-            imageCache={imageCache}
-            onImageCached={(imageId, imageData) => {
-                setImageCache(prev => ({
-                    ...prev,
-                    [imageId]: imageData
-                }));
-            }}
-        />
-    )
-});
-
-export const getChunkMarkdownComponents = (documentData, fetchImage, imageCache, setImageCache) => ({
-    h1: ({ children }) => <h1 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', color: '#1a202c' }}>{children}</h1>,
-    h2: ({ children }) => <h2 style={{ fontSize: '1.125rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '1rem', color: '#1a202c' }}>{children}</h2>,
-    h3: ({ children }) => <h3 style={{ fontSize: '1rem', fontWeight: 'bold', marginBottom: '0.5rem', marginTop: '0.75rem', color: '#1a202c' }}>{children}</h3>,
-    p: ({ children }) => <p style={{ marginBottom: '0.5rem', color: '#374151', lineHeight: '1.4', fontSize: '0.875rem' }}>{children}</p>,
-    hr: () => <hr style={{ margin: '1rem 0', borderColor: '#d1d5db' }} />,
-    ul: ({ children }) => <ul style={{ marginBottom: '0.5rem', marginLeft: '1rem', listStyleType: 'disc', fontSize: '0.875rem' }}>{children}</ul>,
-    ol: ({ children }) => <ol style={{ marginBottom: '0.5rem', marginLeft: '1rem', listStyleType: 'decimal', fontSize: '0.875rem' }}>{children}</ol>,
-    li: ({ children }) => <li style={{ marginBottom: '0.125rem', color: '#374151' }}>{children}</li>,
-    blockquote: ({ children }) => (
-        <blockquote style={{ borderLeft: '2px solid #9ca3af', paddingLeft: '0.5rem', fontStyle: 'italic', margin: '0.5rem 0', color: '#6b7280', fontSize: '0.875rem' }}>
-            {children}
-        </blockquote>
-    ),
-    code: ({ inline, children }) => 
-        inline ? 
-        <code style={{ backgroundColor: '#f3f4f6', padding: '0.125rem 0.25rem', borderRadius: '0.25rem', fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code> :
-        <pre style={{ backgroundColor: '#f3f4f6', padding: '0.5rem', borderRadius: '0.25rem', overflowX: 'auto', margin: '0.5rem 0' }}>
-            <code style={{ fontSize: '0.75rem', fontFamily: 'monospace' }}>{children}</code>
-        </pre>,
-    img: ({ src, alt }) => (
-        <ImageComponent 
-            src={src} 
-            alt={alt} 
-            fileId={documentData?.fileId}
-            imageCache={imageCache}
-            onImageCached={(imageId, imageData) => {
-                setImageCache(prev => ({
-                    ...prev,
-                    [imageId]: imageData
-                }));
-            }}
-        />
-    )
-});
-
 export const getChatMarkdownComponents = () => ({
     p: ({ children }) => <p className="mb-2 text-gray-800 leading-relaxed">{children}</p>,
+    h1: ({ children }) => <h1 className="text-xl font-bold mb-3 text-gray-900">{children}</h1>,
+    h2: ({ children }) => <h2 className="text-lg font-bold mb-2 text-gray-900">{children}</h2>,
+    h3: ({ children }) => <h3 className="text-base font-bold mb-2 text-gray-900">{children}</h3>,
     ul: ({ children }) => <ul className="mb-2 ml-4 list-disc">{children}</ul>,
     ol: ({ children }) => <ol className="mb-2 ml-4 list-decimal">{children}</ol>,
     li: ({ children }) => <li className="mb-1 text-gray-800">{children}</li>,

frontend/src/utils/markdownUtils.js

@@ -1,33 +0,0 @@
-export const highlightChunkInMarkdown = (markdown, chunks, currentChunkIndex) => {
-    if (!chunks || !chunks[currentChunkIndex] || !markdown) {
-        return markdown;
-    }
-    
-    const chunk = chunks[currentChunkIndex];
-    const chunkText = markdown.slice(chunk.start_position, chunk.end_position);
-    
-    console.log('Chunk debugging:', {
-        chunkIndex: currentChunkIndex,
-        startPos: chunk.start_position,
-        endPos: chunk.end_position,
-        chunkTextLength: chunkText.length,
-        chunkTextPreview: chunkText.substring(0, 50) + '...',
-        beforeText: markdown.slice(Math.max(0, chunk.start_position - 20), chunk.start_position),
-        afterText: markdown.slice(chunk.end_position, chunk.end_position + 20)
-    });
-    
-    // Use markdown blockquote which preserves structure while providing visual distinction
-    const lines = chunkText.split('\n');
-    const highlightedLines = lines.map(line => {
-        if (line.trim() === '') return '>'; // Empty blockquote line
-        return '> ' + line;
-    });
-    
-    const highlightedChunk = '\n\n> **Current Learning Section**\n>\n' + 
-                            highlightedLines.join('\n') + 
-                            '\n\n';
-    
-    return markdown.slice(0, chunk.start_position) + 
-           highlightedChunk + 
-           markdown.slice(chunk.end_position);
-};

frontend/vite.config.js

@@ -7,11 +7,7 @@ export default defineConfig({
   server: {
     proxy: {
       '/upload_pdf': 'http://localhost:8000',
-      '/process_ocr': 'http://localhost:8000',
-      '/get_image': 'http://localhost:8000',
-      '/chunk_page': 'http://localhost:8000',
-      '/start_chunk_lesson': 'http://localhost:8000',
       '/api': 'http://localhost:8000'
     }
   }
-})
+})

test_fuzzy_find.py

@@ -1,194 +0,0 @@
-#%%
-import matplotlib.pyplot as plt
-from difflib import SequenceMatcher
-import numpy as np
-
-def fuzzy_find(text, pattern, start_pos=0):
-    """Find the best fuzzy match for pattern in text starting from start_pos"""
-    best_ratio = 0
-    best_pos = -1
-    
-    # Search in sliding windows
-    pattern_len = len(pattern)
-    for i in range(start_pos, len(text) - pattern_len + 1):
-        window = text[i:i + pattern_len]
-        ratio = SequenceMatcher(None, pattern.lower(), window.lower()).ratio()
-
-        if ratio > best_ratio and ratio > 0.8:  # Much stricter: 80% similarity
-            best_ratio = ratio
-            best_pos = i
-    
-    return best_pos if best_pos != -1 else None
-
-def analyze_fuzzy_ratios(markdown_text, chunk_text):
-    """
-    Analyze fuzzy matching ratios across the entire markdown text using a rolling window.
-    Returns positions and their corresponding similarity ratios.
-    """
-    chunk_len = len(chunk_text)
-    positions = []
-    ratios = []
-    
-    # Rolling window over the entire markdown text
-    for i in range(len(markdown_text) - chunk_len + 1):
-        window = markdown_text[i:i + chunk_len]
-        ratio = SequenceMatcher(None, chunk_text.lower(), window.lower()).ratio()
-        positions.append(i)
-        ratios.append(ratio)
-    
-    return positions, ratios
-
-def plot_ratio_distribution(positions, ratios, chunk_text, markdown_file_path=None):
-    """
-    Create a plot showing the similarity ratio distribution across positions.
-    """
-    fig, (ax1, ax2) = plt.subplots(2, 1, figsize=(15, 10))
-    
-    # Main plot: ratio vs position
-    ax1.plot(positions, ratios, 'b-', alpha=0.7, linewidth=1)
-    ax1.axhline(y=0.8, color='r', linestyle='--', label='Fuzzy find threshold (0.8)')
-    ax1.set_xlabel('Position in Markdown Text')
-    ax1.set_ylabel('Similarity Ratio')
-    ax1.set_title(f'Fuzzy Match Similarity Ratios Across Text\n(Chunk length: {len(chunk_text)} chars)')
-    ax1.grid(True, alpha=0.3)
-    ax1.legend()
-    
-    # Highlight maximum ratio
-    max_ratio = max(ratios)
-    max_pos = positions[ratios.index(max_ratio)]
-    ax1.plot(max_pos, max_ratio, 'ro', markersize=8, label=f'Max ratio: {max_ratio:.3f} at pos {max_pos}')
-    ax1.legend()
-    
-    # Histogram of ratios
-    ax2.hist(ratios, bins=50, alpha=0.7, edgecolor='black')
-    ax2.axvline(x=0.8, color='r', linestyle='--', label='Fuzzy find threshold (0.8)')
-    ax2.axvline(x=max_ratio, color='g', linestyle='--', label=f'Maximum ratio: {max_ratio:.3f}')
-    ax2.set_xlabel('Similarity Ratio')
-    ax2.set_ylabel('Frequency')
-    ax2.set_title('Distribution of Similarity Ratios')
-    ax2.legend()
-    ax2.grid(True, alpha=0.3)
-    
-    plt.tight_layout()
-    return fig, max_ratio, max_pos
-
-def compare_texts(original_chunk, found_text, max_pos):
-    """
-    Compare the original chunk text with the text found by fuzzy_find.
-    Shows character-by-character differences and similarity analysis.
-    """
-    print("\n" + "="*80)
-    print("TEXT COMPARISON: Original Chunk vs Fuzzy Find Result")
-    print("="*80)
-    
-    print(f"\nOriginal chunk length: {len(original_chunk)} characters")
-    print(f"Found text length: {len(found_text)} characters")
-    print(f"Found at position: {max_pos}")
-    
-    # Calculate overall similarity
-    similarity = SequenceMatcher(None, original_chunk.lower(), found_text.lower()).ratio()
-    print(f"Overall similarity: {similarity:.4f} ({similarity*100:.2f}%)")
-    
-    # Show first 200 characters of each
-    print(f"\nOriginal chunk (first 200 chars):")
-    print(f"'{original_chunk}{'...' if len(original_chunk) > 200 else ''}'")
-    
-    print(f"\nFound text (first 200 chars):")
-    print(f"'{found_text}{'...' if len(found_text) > 200 else ''}'")
-    
-    # Character-by-character analysis for first 100 characters
-    print(f"\nCharacter-by-character comparison (first 100 chars):")
-    print("Original: ", end="")
-    for i, char in enumerate(original_chunk[:100]):
-        if i < len(found_text) and char.lower() == found_text[i].lower():
-            print(char, end="")  # Same character
-        else:
-            print(f"[{char}]", end="")  # Different character
-    print()
-    
-    print("Found:    ", end="")
-    for i, char in enumerate(found_text[:100]):
-        if i < len(original_chunk) and char.lower() == original_chunk[i].lower():
-            print(char, end="")  # Same character
-        else:
-            print(f"[{char}]", end="")  # Different character
-    print()
-    
-    # Analyze differences
-    matcher = SequenceMatcher(None, original_chunk, found_text)
-    differences = []
-    for tag, i1, i2, j1, j2 in matcher.get_opcodes():
-        if tag != 'equal':
-            differences.append({
-                'type': tag,
-                'original_pos': (i1, i2),
-                'found_pos': (j1, j2),
-                'original_text': original_chunk[i1:i2],
-                'found_text': found_text[j1:j2]
-            })
-    
-    print(f"\nFound {len(differences)} differences:")
-    for i, diff in enumerate(differences[:10]):  # Show first 10 differences
-        print(f"{i+1}. {diff['type'].upper()} at original[{diff['original_pos'][0]}:{diff['original_pos'][1]}] -> found[{diff['found_pos'][0]}:{diff['found_pos'][1]}]")
-        if diff['original_text']:
-            print(f"   Original: '{diff['original_text'][:50]}{'...' if len(diff['original_text']) > 50 else ''}'")
-        if diff['found_text']:
-            print(f"   Found:    '{diff['found_text'][:50]}{'...' if len(diff['found_text']) > 50 else ''}'")
-    
-    if len(differences) > 10:
-        print(f"   ... and {len(differences) - 10} more differences")
-    
-    return similarity, differences
-
-def run_fuzzy_analysis():
-    """
-    Main function to run the fuzzy find analysis.
-    You can modify the markdown_text and chunk_text variables below.
-    """
-    
-    # TODO: Replace these with your actual markdown content and chunk
-    markdown_text = """# An improved method for mobile characterisation of $\\delta^{13} \\mathrm{CH}_{4}$ source signatures and its application in Germany \n\nAntje Hoheisel ${ }^{1}$, Christiane Yeman ${ }^{1, a}$, Florian Dinger ${ }^{1,2}$, Henrik Eckhardt ${ }^{1}$, and Martina Schmidt ${ }^{1}$<br>${ }^{1}$ Institute of Environmental Physics, Heidelberg University, Heidelberg, Germany<br>${ }^{2}$ Max Planck Institute for Chemistry, Mainz, Germany<br>${ }^{a}$ now at: Laboratory of Ion Beam Physics, ETH Zurich, Zurich, Switzerland\n\nCorrespondence: Antje Hoheisel (antje.hoheisel@iup.uni-heidelberg.de)\nReceived: 7 August 2018 - Discussion started: 1 October 2018\nRevised: 17 January 2019 - Accepted: 28 January 2019 - Published: 22 February 2019\n\n\n#### Abstract\n\nThe carbon isotopic signature $\\left(\\delta^{13} \\mathrm{CH}_{4}\\right)$ of several methane sources in Germany (around Heidelberg and in North Rhine-Westphalia) were characterised. Mobile measurements of the plume of $\\mathrm{CH}_{4}$ sources are carried out using an analyser based on cavity ring-down spectroscopy (CRDS). To achieve precise results a CRDS analyser, which measures methane $\\left(\\mathrm{CH}_{4}\\right)$, carbon dioxide $\\left(\\mathrm{CO}_{2}\\right)$ and their ${ }^{13} \\mathrm{C}$-to- ${ }^{12} \\mathrm{C}$ ratios, was characterised especially with regard to cross sensitivities of composition differences of the gas matrix in air samples or calibration tanks. The two most important gases which affect $\\delta^{13} \\mathrm{CH}_{4}$ are water vapour $\\left(\\mathrm{H}_{2} \\mathrm{O}\\right)$ and ethane $\\left(\\mathrm{C}_{2} \\mathrm{H}_{6}\\right)$. To avoid the cross sensitivity with $\\mathrm{H}_{2} \\mathrm{O}$, the air is dried with a Nafion dryer during mobile measurements. $\\mathrm{C}_{2} \\mathrm{H}_{6}$ is typically abundant in natural gases and thus in methane plumes or samples originating from natural gas. $\\mathrm{A}_{2} \\mathrm{H}_{6}$ correction and calibration are essential to obtain accurate $\\delta^{13} \\mathrm{CH}_{4}$ results, which can deviate by up to $3 \\%$ depending on whether a $\\mathrm{C}_{2} \\mathrm{H}_{6}$ correction is applied.\n\nThe isotopic signature is determined with the Miller-Tans approach and the York fitting method. During 21 field campaigns the mean $\\delta^{13} \\mathrm{CH}_{4}$ signatures of three dairy farms $\\left(-63.9 \\pm 0.9 \\%_{e}\\right)$, a biogas plant $\\left(-62.4 \\pm 1.2 \\%_{e}\\right)$, a landfill $\\left(-58.7 \\pm 3.3 \\%_{e}\\right)$, a wastewater treatment plant $(-52.5 \\pm$ $1.4 \\%$ ), an active deep coal mine ( $-56.0 \\pm 2.3 \\%$ ) and two natural gas storage and gas compressor stations ( $-46.1 \\pm$ $0.8 \\%$ ) were recorded.\n\nIn addition, between December 2016 and November 2018 gas samples from the Heidelberg natural gas distribution network were measured with a mean $\\delta^{13} \\mathrm{CH}_{4}$ value of $-43.3 \\pm$ $0.8 \\%$. Contrary to previous measurements between 1991\n\n\n#### Abstract\n\nand 1996 by Levin et al. (1999), no strong seasonal cycle is shown.\n\n\n## 1 Introduction\n\nMethane $\\left(\\mathrm{CH}_{4}\\right)$ is the second most important anthropogenic greenhouse gas. The atmospheric growth rate of $\\mathrm{CH}_{4}$ has changed significantly during the last decades, stabilising at zero growth from 1999 to 2006 before beginning to increase again after 2007 (Dlugokencky et al., 2009). Several studies have focused on the recent $\\mathrm{CH}_{4}$ growth caused by changes in sources and sinks (Rigby et al., 2017; Turner et al., 2017).\n\nRecent studies by Schaefer et al. (2016), Rice et al. (2016) and Nisbet et al. (2016) have shown how the $\\delta^{13} \\mathrm{CH}_{4}$ measurements can help to understand the changes in global $\\mathrm{CH}_{4}$ increase rates and to assign the related source types. The stable carbon isotope ratio $\\left({ }^{13} \\mathrm{C} /{ }^{12} \\mathrm{C}\\right)$ of $\\mathrm{CH}_{4}$ sources varies due to the initial source material and the fractionation during production and release to the atmosphere. The source categories can be classified as pyrogenic (e.g. biomass burning), biogenic (e.g. wetlands and livestock) or thermogenic (e.g. a subcategory of fossil fuel extraction), which show different but also overlapping isotope ratio ranges. Various studies have shown that the assignment of isotopic signatures from different $\\mathrm{CH}_{4}$ sources remains uncertain due to large temporal variabilities and also regional specificities (e.g. Sherwood et al., 2017). This missing knowledge may result in large uncertainties when the $\\mathrm{CH}_{4}$ budget is determined on global or regional scales using isotope-based estimates. In addition to global studies, the use of $\\delta^{13} \\mathrm{CH}_{4}$ was already successfully"""
-    
-    chunk_text = """## 1 Introduction\nMethane ($\mathrm{CH}_{4}$) is the second most important anthropogenic greenhouse gas. The atmospheric growth rate of $\mathrm{CH}_{4}$ has changed significantly during the last decades, stabilising at zero growth from 1999 to 2006 before beginning to increase again after 2007 (Dlugokencky et al., 2009). Several studies have focused on the recent $\mathrm{CH}_{4}$ growth caused by changes in sources and sinks (Rigby et al., 2017; Turner et al., 2017).\n\nRecent studies by Schaefer et al. (2016), Rice et al. (2016) and Nisbet et al. (2016) have shown how the $\delta^{13} \mathrm{CH}_{4}$ measurements can help to understand the changes in global $\mathrm{CH}_{4}$ increase rates and to assign the related source types. The stable carbon isotope ratio (${}^{13}\mathrm{C}$/${}^{12}\mathrm{C}$) of $\mathrm{CH}_{4}$ sources varies due to the initial source material and the fractionation during production and release to the atmosphere. The source categories can be classified as pyrogenic (e.g. biomass burning), biogenic (e.g. wetlands and livestock) or thermogenic (e.g. a subcategory of fossil fuel extraction), which show different but also overlapping isotope ratio ranges. Various studies have shown that the assignment of isotopic signatures from different $\mathrm{CH}_{4}$ sources remains uncertain due to large temporal variabilities and also regional specificities (e.g. Sherwood et al., 2017). This missing knowledge may result in large uncertainties when the $\mathrm{CH}_{4}$ budget is determined on global or regional scales using isotope-based estimates. In addition to global studies, the use of $\delta^{13}\mathrm{CH}_{4}$ was already successfully"""
-    
-    print("Analyzing fuzzy matching ratios...")
-    print(f"Markdown text length: {len(markdown_text)} characters")
-    print(f"Chunk text length: {len(chunk_text)} characters")
-    
-    # Run the analysis
-    positions, ratios = analyze_fuzzy_ratios(markdown_text, chunk_text)
-    
-    # Create the plot
-    fig, max_ratio, max_pos = plot_ratio_distribution(positions, ratios, chunk_text)
-    
-    # Print statistics
-    print(f"\nStatistics:")
-    print(f"Maximum similarity ratio: {max_ratio:.3f}")
-    print(f"Maximum ratio position: {max_pos}")
-    print(f"Number of positions above 0.8 threshold: {sum(1 for r in ratios if r > 0.8)}")
-    print(f"Mean ratio: {np.mean(ratios):.3f}")
-    print(f"Standard deviation: {np.std(ratios):.3f}")
-    
-    # Test the original fuzzy_find function
-    result = fuzzy_find(markdown_text, chunk_text)
-    print(f"\nOriginal fuzzy_find result: {result}")
-    if result is not None:
-        print(f"Found match at position {result}")
-    else:
-        print("No match found above 0.8 threshold")
-    
-    # Compare the found text with the original chunk
-    if max_ratio > 0:  # If we found any match
-        found_text = markdown_text[max_pos:max_pos + len(chunk_text)]
-        text_similarity, differences = compare_texts(chunk_text, found_text, max_pos)
-        print(f"\nDetailed comparison similarity: {text_similarity:.4f}")
-        print(f"Number of character differences: {len(differences)}")
-    
-    plt.show()
-    return positions, ratios, max_ratio, max_pos
-
-if __name__ == "__main__":
-    # Run the analysis
-    positions, ratios, max_ratio, max_pos = run_fuzzy_analysis()
-
-#%%