Add chunking and markdown rendering

Dockerfile

@@ -8,7 +8,7 @@ COPY frontend/ ./
 RUN npm run build
 
 # Use Python runtime for backend
-FROM python:3.9
+FROM python:3.10
 
 WORKDIR /code
 

backend/app.py

@@ -1,11 +1,16 @@
 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
 from dotenv import load_dotenv
 from difflib import SequenceMatcher
+from pydantic import BaseModel, Field
+from typing import Optional, List
+from langchain.chat_models import init_chat_model
 
 # Load environment variables
 load_dotenv()
@@ -20,9 +25,6 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-@app.get("/")
-def hello():
-    return {"message": "Backend is running!"}
 
 @app.get("/api/test")
 def test():
@@ -220,6 +222,16 @@ async def get_image_base64(file_id: str, image_id: str):
         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 topic name for the chunk")
+    start_phrase: str = Field(description="First few words of the chunk (5-15 words)")
+    end_phrase: str = Field(description="Last few words of the chunk (5-15 words)")
+
+class ChunkList(BaseModel):
+    """Container for a list of document chunks."""
+    chunks: List[ChunkSchema] = Field(description="List of identified chunks for interactive lessons")
+
 def fuzzy_find(text, pattern, start_pos=0):
     """Find the best fuzzy match for pattern in text starting from start_pos"""
     best_match = None
@@ -239,68 +251,57 @@ def fuzzy_find(text, pattern, start_pos=0):
     
     return best_pos if best_pos != -1 else None
 
-async def auto_chunk_page(page_markdown, client):
-    """Auto-chunk a page during OCR processing"""
+async def auto_chunk_page(page_markdown, client=None):
+    """Auto-chunk a page during OCR processing using Fireworks AI with structured output"""
     if not page_markdown or len(page_markdown.strip()) < 100:
         return []  # Skip very short pages
     
-    # Create chunking prompt
-    prompt = f"""Analyze this academic document page and identify chunks suitable for creating interactive lessons.
-
+    # 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 regular chunking")
+        return []
+    
+    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"""Imagine you are a teacher. You are given an individual page, and you have to decide how to dissect this page. Your task is to identify chunks of content by providing start and end phrases that can be used to create interactive lessons. Here's the page:
 DOCUMENT PAGE:
 {page_markdown}
 
-For each chunk you identify, output ONLY a JSON array with this exact format:
-[
-  {{
-    "topic": "Brief topic name",
-    "start_phrase": "First few words of the chunk",
-    "end_phrase": "Last few words of the chunk"
-  }}
-]
-
 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. Output ONLY the JSON array, no other text
-5. More dense content should have more chunks, less dense content fewer chunks
-6. Ensure the JSON is valid and well-formed
-7. Do not include any explanations or additional text, just the JSON array
+4. More dense content should have more chunks, less dense content fewer chunks
+5. Identify chunks that would make good interactive lessons
 
-JSON:"""
+Return a list of chunks with topic, start_phrase, and end_phrase for each."""
 
-    try:
-        # Call Mistral for chunking
-        response = client.chat.complete(
-            model="mistral-small-latest",
-            messages=[{"role": "user", "content": prompt}],
-            temperature=0.3
-        )
-        
-        chunk_text = response.choices[0].message.content.strip()
-        
-        # Parse JSON response
-        try:
-            chunks = json.loads(chunk_text)
-        except json.JSONDecodeError:
-            # Try to extract JSON from response if wrapped in text
-            import re
-            json_match = re.search(r'\[.*\]', chunk_text, re.DOTALL)
-            if json_match:
-                chunks = json.loads(json_match.group())
-            else:
-                return []
+        # Call Fireworks with structured output
+        chunk_response = structured_llm.invoke(prompt)
+        chunks = chunk_response.chunks
         
         # Find positions using fuzzy matching
         positioned_chunks = []
         for chunk in chunks:
-            start_pos = fuzzy_find(page_markdown, chunk.get("start_phrase", ""))
-            end_pos = fuzzy_find(page_markdown, chunk.get("end_phrase", ""), start_pos or 0)
+            start_pos = fuzzy_find(page_markdown, chunk.start_phrase)
+            end_pos = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
             
             if start_pos is not None:
                 positioned_chunks.append({
-                    **chunk,
+                    "topic": chunk.topic,
+                    "start_phrase": chunk.start_phrase,
+                    "end_phrase": chunk.end_phrase,
                     "start_position": start_pos,
                     "end_position": end_pos,
                     "found_start": True,
@@ -310,26 +311,35 @@ JSON:"""
         return positioned_chunks
         
     except Exception as e:
+        import traceback
         print(f"❌ Auto-chunking error: {e}")
+        print(f"❌ Full traceback: {traceback.format_exc()}")
         return []
 
 @app.post("/chunk_page")
 async def chunk_page(request: dict):
-    """Analyze a page and suggest chunks for lessons"""
+    """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 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")
+    # 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 Mistral client
-        client = Mistral(api_key=api_key)
+        # 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.
@@ -337,69 +347,40 @@ async def chunk_page(request: dict):
 DOCUMENT PAGE:
 {page_markdown}
 
-For each chunk you identify, output ONLY a JSON array with this exact format:
-[
-  {{
-    "topic": "Brief topic name",
-    "start_phrase": "First few words of the chunk",
-    "end_phrase": "Last few words of the chunk",
-  }}
-]
-
 Rules:
-1. Each chunk should contain 2-3 valuable lessons.
+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. Output ONLY the JSON array, no other text
-5. More dense content should have more chunks, less dense content fewer chunks
-6. Ensure the JSON is valid and well-formed
-7. Do not include any explanations or additional text, just the JSON array
+4. More dense content should have more chunks, less dense content fewer chunks
+5. Identify chunks that would make good interactive lessons
 
-JSON:"""
+Return a list of chunks with topic, start_phrase, and end_phrase for each."""
 
-        # Call Mistral for chunking
-        print("🚀 Calling Mistral for chunking...")
-        response = client.chat.complete(
-            model="mistral-small-latest",  # Faster and cheaper for this task
-            messages=[{
-                "role": "user", 
-                "content": prompt
-            }],
-            temperature=0.3  # Lower temperature for more consistent output
-        )
-        
-        chunk_text = response.choices[0].message.content.strip()
-        print(f"📝 LLM Response: {chunk_text[:200]}...")
-        
-        # Parse JSON response
-        try:
-            chunks = json.loads(chunk_text)
-        except json.JSONDecodeError:
-            # Try to extract JSON from response if wrapped in text
-            import re
-            json_match = re.search(r'\[.*\]', chunk_text, re.DOTALL)
-            if json_match:
-                chunks = json.loads(json_match.group())
-            else:
-                raise ValueError("Could not parse JSON from LLM response")
+        # 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")
         
         # Find positions using fuzzy matching
         positioned_chunks = []
         for chunk in chunks:
-            start_pos = fuzzy_find(page_markdown, chunk.get("start_phrase", ""))
-            end_pos = fuzzy_find(page_markdown, chunk.get("end_phrase", ""), start_pos or 0)
+            start_pos = fuzzy_find(page_markdown, chunk.start_phrase)
+            end_pos = fuzzy_find(page_markdown, chunk.end_phrase, start_pos or 0)
             
             if start_pos is not None:
                 positioned_chunks.append({
-                    **chunk,
+                    "topic": chunk.topic,
+                    "start_phrase": chunk.start_phrase,
+                    "end_phrase": chunk.end_phrase,
                     "start_position": start_pos,
                     "end_position": end_pos,
                     "found_start": True,
                     "found_end": end_pos is not None
                 })
-                print(f"✅ Found chunk: {chunk.get('topic')} at position {start_pos}")
+                print(f"✅ Found chunk: {chunk.topic} at position {start_pos}")
             else:
-                print(f"❌ Could not find chunk: {chunk.get('topic')}")
+                print(f"❌ Could not find chunk: {chunk.topic}")
         
         print(f"📊 Successfully positioned {len(positioned_chunks)}/{len(chunks)} chunks")
         
@@ -410,5 +391,27 @@ JSON:"""
         }
         
     except Exception as e:
+        import traceback
         print(f"❌ Error chunking page: {e}")
-        raise HTTPException(status_code=500, detail=f"Error chunking page: {str(e)}")
+        print(f"❌ Full traceback: {traceback.format_exc()}")
+        raise HTTPException(status_code=500, detail=f"Error chunking page: {str(e)}")
+
+# Mount static files for production deployment
+frontend_path = os.path.join(os.path.dirname(__file__), "..", "frontend")
+assets_path = os.path.join(frontend_path, "assets")
+
+if os.path.exists(frontend_path):
+    # Only mount assets if the directory exists (production build)
+    if os.path.exists(assets_path):
+        app.mount("/assets", StaticFiles(directory=assets_path), name="assets")
+    
+    @app.get("/")
+    async def serve_frontend():
+        index_path = os.path.join(frontend_path, "index.html")
+        if os.path.exists(index_path):
+            return FileResponse(index_path)
+        return {"message": "Backend is running - frontend not found"}
+else:
+    @app.get("/")
+    def hello():
+        return {"message": "Backend is running!"}

backend/requirements.txt

@@ -3,3 +3,7 @@ fastapi==0.115.7
 python-multipart>=0.0.5
 mistralai
 python-dotenv
+fireworks-ai
+langchain-core
+langchain-fireworks
+pydantic

frontend/src/components/DocumentProcessor.jsx

@@ -12,6 +12,7 @@ function DocumentProcessor() {
     const [ocrProgress, setOcrProgress] = useState(0);
     const [documentData, setDocumentData] = useState(null);
     const [imageCache, setImageCache] = useState({});
+    const [selectedChunk, setSelectedChunk] = useState(0);
 
     const handleFileChange = (e) => {
         setSelectedFile(e.target.files[0]);
@@ -27,7 +28,7 @@ function DocumentProcessor() {
         }
 
         try {
-            const response = await fetch(`http://localhost:8000/get_image/${fileId}/${imageId}`);
+            const response = await fetch(`/get_image/${fileId}/${imageId}`);
             if (response.ok) {
                 const data = await response.json();
                 const imageData = data.image_base64;
@@ -46,6 +47,56 @@ function DocumentProcessor() {
         return null;
     };
 
+    // Component for the chunk panel
+    const ChunkPanel = ({ chunks }) => {
+        if (!chunks || chunks.length === 0) {
+            return (
+                <div className="p-6 text-center text-gray-500">
+                    No interactive chunks found
+                </div>
+            );
+        }
+
+        return (
+            <div className="p-4 space-y-4 overflow-y-auto max-h-screen">
+                <h3 className="text-lg font-semibold text-gray-800 mb-4 sticky top-0 bg-white pb-2">
+                    Interactive Chunks ({chunks.length})
+                </h3>
+                
+                {chunks.map((chunk, index) => (
+                    <div
+                        key={index}
+                        onClick={() => setSelectedChunk(index)}
+                        className={`p-4 rounded-lg border-2 cursor-pointer transition-all duration-200 ${
+                            selectedChunk === index
+                                ? 'border-blue-500 bg-blue-50 shadow-md'
+                                : 'border-gray-200 bg-white hover:border-gray-300 hover:shadow-sm'
+                        }`}
+                    >
+                        <div className="flex items-start justify-between mb-2">
+                            <h4 className="font-medium text-gray-900">
+                                📚 {chunk.topic}
+                            </h4>
+                            <span className="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">
+                                {index + 1}/{chunks.length}
+                            </span>
+                        </div>
+                        
+                        
+                        {chunk.start_position !== null && chunk.start_position !== undefined && 
+                         chunk.end_position !== null && chunk.end_position !== undefined && (
+                            <div className="mt-3 p-3 bg-gray-50 rounded text-sm text-gray-700 italic">
+                                {documentData.markdown.slice(chunk.start_position, chunk.end_position).substring(0, 150)}
+                                {documentData.markdown.slice(chunk.start_position, chunk.end_position).length > 150 ? '...' : ''}
+                            </div>
+                        )}
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+
     const ImageComponent = ({ src, alt }) => {
         const [imageSrc, setImageSrc] = useState(null);
         const [loading, setLoading] = useState(true);
@@ -64,50 +115,52 @@ function DocumentProcessor() {
 
         if (loading) {
             return (
-                <div style={{ 
+                <span style={{ 
+                    display: 'inline-block',
                     width: '100%', 
                     height: '200px', 
                     backgroundColor: '#f3f4f6', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center',
+                    textAlign: 'center',
+                    lineHeight: '200px',
                     margin: '1rem 0',
-                    borderRadius: '0.5rem'
+                    borderRadius: '0.5rem',
+                    color: '#6b7280'
                 }}>
-                    <span style={{ color: '#6b7280' }}>Loading image...</span>
-                </div>
+                    Loading image...
+                </span>
             );
         }
 
         if (!imageSrc) {
             return (
-                <div style={{ 
+                <span style={{ 
+                    display: 'inline-block',
                     width: '100%', 
                     height: '200px', 
                     backgroundColor: '#fef2f2', 
-                    display: 'flex', 
-                    alignItems: 'center', 
-                    justifyContent: 'center',
+                    textAlign: 'center',
+                    lineHeight: '200px',
                     margin: '1rem 0',
                     borderRadius: '0.5rem',
-                    border: '1px solid #fecaca'
+                    border: '1px solid #fecaca',
+                    color: '#dc2626'
                 }}>
-                    <span style={{ color: '#dc2626' }}>Image not found: {alt || src}</span>
-                </div>
+                    Image not found: {alt || src}
+                </span>
             );
         }
 
         return (
-            <div style={{ margin: '1.5rem 0', textAlign: 'center' }}>
-                <img 
-                    src={imageSrc}
-                    alt={alt || 'Document image'}
-                    style={{ 
-                        maxWidth: '100%', 
-                        height: 'auto',
-                    }}
-                />
-            </div>
+            <img 
+                src={imageSrc}
+                alt={alt || 'Document image'}
+                style={{ 
+                    display: 'block',
+                    maxWidth: '100%', 
+                    height: 'auto',
+                    margin: '1.5rem auto'
+                }}
+            />
         );
     };
 
@@ -124,7 +177,7 @@ function DocumentProcessor() {
             formData.append('file', selectedFile);
 
             setUploadProgress(30);
-            const uploadResponse = await fetch('http://localhost:8000/upload_pdf', {
+            const uploadResponse = await fetch('/upload_pdf', {
                 method: 'POST',
                 body: formData,
             });
@@ -141,7 +194,7 @@ function DocumentProcessor() {
             await new Promise(resolve => setTimeout(resolve, 500)); // Small delay for UX
             
             setOcrProgress(60);
-            const ocrResponse = await fetch(`http://localhost:8000/process_ocr/${uploadData.file_id}`);
+            const ocrResponse = await fetch(`/process_ocr/${uploadData.file_id}`);
             
             if (!ocrResponse.ok) {
                 throw new Error('Failed to process OCR');
@@ -155,12 +208,31 @@ function DocumentProcessor() {
                 .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
+                totalPages: ocrData.total_pages,
+                chunks: allChunks
             });
 
         } catch (error) {
@@ -276,33 +348,33 @@ function DocumentProcessor() {
     }
 
     return (
-        <div className="min-h-screen bg-gray-50">
-            {/* Document Content */}
-            <div className="max-w-4xl mx-auto px-4 py-8">
-                <div className="bg-white rounded-lg shadow-sm p-8">
-                    <div className="prose prose-lg max-w-none">
+        <div className="min-h-screen bg-gray-50 flex">
+            {/* Left Panel - Document (66%) */}
+            <div className="w-2/3 p-6">
+                <div className="bg-white rounded-lg shadow-sm p-6 h-full">
+                    <div className="prose prose-sm max-w-none overflow-y-auto" style={{ maxHeight: 'calc(100vh - 60px)' }}>
                         <ReactMarkdown
                             remarkPlugins={[remarkMath]}
                             rehypePlugins={[rehypeKatex]}
                             components={{
-                                h1: ({ children }) => <h1 style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1.5rem', color: '#1a202c' }}>{children}</h1>,
-                                h2: ({ children }) => <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', marginBottom: '1rem', marginTop: '2rem', color: '#1a202c' }}>{children}</h2>,
-                                h3: ({ children }) => <h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.75rem', marginTop: '1.5rem', color: '#1a202c' }}>{children}</h3>,
-                                p: ({ children }) => <p style={{ marginBottom: '1rem', color: '#374151', lineHeight: '1.6' }}>{children}</p>,
-                                hr: () => <hr style={{ margin: '2rem 0', borderColor: '#d1d5db' }} />,
-                                ul: ({ children }) => <ul style={{ marginBottom: '1rem', marginLeft: '1.5rem', listStyleType: 'disc' }}>{children}</ul>,
-                                ol: ({ children }) => <ol style={{ marginBottom: '1rem', marginLeft: '1.5rem', listStyleType: 'decimal' }}>{children}</ol>,
-                                li: ({ children }) => <li style={{ marginBottom: '0.25rem', color: '#374151' }}>{children}</li>,
+                                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: '4px solid #3b82f6', paddingLeft: '1rem', fontStyle: 'italic', margin: '1rem 0', color: '#6b7280' }}>
+                                    <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.875rem', fontFamily: 'monospace' }}>{children}</code> :
-                                    <pre style={{ backgroundColor: '#f3f4f6', padding: '1rem', borderRadius: '0.5rem', overflowX: 'auto', margin: '1rem 0' }}>
-                                        <code style={{ fontSize: '0.875rem', fontFamily: 'monospace' }}>{children}</code>
+                                    <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>,
                                 img: ({ src, alt }) => <ImageComponent src={src} alt={alt} />
                             }}
@@ -312,6 +384,11 @@ function DocumentProcessor() {
                     </div>
                 </div>
             </div>
+
+            {/* Right Panel - Chunks (33%) */}
+            <div className="w-1/3 border-l border-gray-200 bg-white">
+                <ChunkPanel chunks={documentData.chunks} />
+            </div>
         </div>
     );
 }

frontend/vite.config.js

@@ -4,4 +4,13 @@ import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/upload_pdf': 'http://localhost:8000',
+      '/process_ocr': 'http://localhost:8000',
+      '/get_image': 'http://localhost:8000',
+      '/chunk_page': 'http://localhost:8000',
+      '/api': 'http://localhost:8000'
+    }
+  }
 })