PDF Import Integration

[amfgrantpro]

Ticket 1.1: Verify Backend PDF Support

Context: The backend code for PDF extraction appears to exist in the repository. We must verify it is complete and active.
Prerequisites: None.
Validation Steps:

1. Open services/api/app/main.py.
2. Search for @app.post("/v1/ingest/pdf").
3. Confirm it imports from .core.pdf_extractor.
4. Open services/api/app/core/pdf_extractor.py.
5. Ensure the file is not empty and contains def extract_pdf_text(...).
6. Action:
   • If these exist, this ticket is DONE.
   • If not, copy demo/pdf_utils.py to services/api/app/core/pdf_extractor.py and ensure imports are corrected for the API structure.

Ticket 1.2: Implement Frontend PDF Upload UI

Context: The frontend needs a file input to send PDFs to the /v1/ingest/pdf endpoint.
File to Modify: accessible-word-craft-main/src/components/TranslationSection.tsx

Critical Environment Setup (Read carefully):
Since Docker is NOT yet set up, you must run the backend and frontend manually in two separate terminals.

1. Terminal 1 (Backend):

   cd services/api
   source .venv/bin/activate  # or source venv/bin/activate
   pip install pymupdf        # Ensure PDF dependency is installed
   uvicorn app.main:app --reload --port 8000

   Keep this terminal open.

2. Terminal 2 (Frontend):

   cd accessible-word-craft-main
   npm run dev

   Keep this terminal open.

Step 1: Add State & Handlers
Inside TranslationSection, add the following state and handler function before the return statement:

// [ADD] New state imports if missing
import { useState } from 'react';
// ... other imports
import { Loader2, FileText, Upload } from 'lucide-react'; // Add FileText, Upload icons

// [inside component]
const [isUploading, setIsUploading] = useState(false);

// [ADD] Handler function
const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
  const file = event.target.files?.[0];
  if (!file) return;

  if (file.type !== 'application/pdf') {
    toast({ title: "Error", description: "Only PDF files are supported.", variant: "destructive" });
    return;
  }
  
  // Max 10MB
  if (file.size > 10 * 1024 * 1024) { 
    toast({ title: "Error", description: "File is too large (max 10MB).", variant: "destructive" });
    return;
  }

  setIsUploading(true);
  const formData = new FormData();
  formData.append('file', file);

  try {
    const response = await fetch('http://localhost:8000/v1/ingest/pdf', {
      method: 'POST',
      body: formData,
    });

    if (!response.ok) {
        const err = await response.json();
        throw new Error(err.detail || 'Upload failed');
    }

    const data = await response.json();
    setInputText(data.extracted_text);
    toast({ title: "Success", description: `Extracted ${data.pages} pages successfully!` });
    
  } catch (error) {
    console.error(error);
    toast({ title: "Error", description: "Failed to extract text from PDF.", variant: "destructive" });
  } finally {
    setIsUploading(false);
    // Reset input
    event.target.value = '';
  }
};

Step 2: Add UI Element
Locate the "Original Text" card (Input area). Add the upload button just above or inside the card header.

{/* [ADD] File Upload Button near Input Text Area */}
<div className="flex justify-end mb-2">
  <input
    type="file"
    accept=".pdf"
    id="pdf-upload"
    className="hidden"
    onChange={handleFileUpload}
    disabled={isUploading || isLoading}
  />
  <label htmlFor="pdf-upload">
    <Button 
      variant="secondary" 
      size="sm" 
      className="cursor-pointer" 
      asChild
      disabled={isUploading || isLoading}
    >
      <span>
        {isUploading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Upload className="w-4 h-4 mr-2" />}
        {isUploading ? "Extracting..." : "Upload PDF"}
      </span>
    </Button>
  </label>
</div>

Refactor Verification:

1. Ensure both Terminal 1 and Terminal 2 are running without errors.
2. Open http://localhost:5173.
3. Try uploading a real PDF.
4. Verify text appears in the input box.

[amfgrantpro]

I followed this:

Sprint 2/3 Frontend: PDF Import Integration

This document contains step-by-step instructions to add PDF upload functionality to the frontend.

Goal: Allow users to upload a PDF file. The app will send it to the backend, extract the text, and paste it into the "Original Text" box automatically.

---

Part 1: Start Your Servers

Before writing code, let's make sure everything is running so you can see your changes instantly.

Step 1: Start the Backend API

1. Open your terminal application (e.g., Terminal, iTerm, VS Code terminal).
2. Navigate to the API folder by running this command:

   cd /Users/alastair/Github/klartext/services/api

3. Activate the virtual environment:

   source .venv/bin/activate

   (If that doesn't work, try source venv/bin/activate)
4. Start the API server:

   uvicorn app.main:app --reload --port 8000

5. Keep this terminal window open. You should see "Application startup complete".

Step 2: Start the Frontend App

1. Open a new terminal window (Cmd+N or "Split Terminal" in VS Code).
2. Navigate to the frontend folder:

   cd /Users/alastair/Github/klartext/accessible-word-craft-main

3. Start the frontend:

   npm run dev

4. Keep this terminal window open. It will tell you the local URL (usually http://localhost:5173).
5. Open your browser and search for http://localhost:5173. You should see the "KlarText" app.

---

Part 2: Add the PDF Upload Feature

We will modify one file: src/components/TranslationSection.tsx.

Step 1: Open the File

1. In your code editor, find and open this file:
   /Users/alastair/Github/klartext/accessible-word-craft-main/src/components/TranslationSection.tsx

Step 2: Add Necessary Imports

At the very top of the file, look for the lucide-react import.
Current code:

import { Sparkles, Loader2, Copy, Check, Volume2 } from 'lucide-react';

Change it to (add Upload and FileText):

import { Sparkles, Loader2, Copy, Check, Volume2, Upload, FileText } from 'lucide-react';

Step 3: Add State Variables

Inside the component function (around line 16), add a new state variable for uploading status.

Find this line:

const [copied, setCopied] = useState(false);

Add this line right after it:

const [isUploading, setIsUploading] = useState(false);

Step 4: Add the File Upload Handler

We need a function that runs when a user selects a file.

Find the handleTranslate function.
Insert this new function BEFORE const handleTranslate = ...:

  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.type !== 'application/pdf') {
      toast({
        title: "Invalid file",
        description: "Please upload a PDF file.",
        variant: "destructive"
      });
      return;
    }

    setIsUploading(true);
    const formData = new FormData();
    formData.append('file', file);

    try {
      // Connect to the PDF Ingestion Endpoint
      const response = await fetch('http://localhost:8000/v1/ingest/pdf', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) {
        throw new Error(`Upload failed: ${response.statusText}`);
      }

      const data = await response.json();
      
      // Update the input text box with the extracted text from the PDF
      setInputText(data.extracted_text);
      
      toast({ 
        title: "PDF Uploaded", 
        description: `Extracted ${data.pages} pages successfully.` 
      });

    } catch (error) {
      console.error("Upload error:", error);
      toast({
        title: "Upload Failed",
        description: "Could not extract text from the PDF.",
        variant: "destructive"
      });
    } finally {
      setIsUploading(false);
      // Reset the file input so the same file can be selected again if needed
      e.target.value = '';
    }
  };

Step 5: Add the Upload Button

Now we need to add the button to the UI. We will place it inside the first "Card" that holds the input text area.

Find this code (around line 96):

<Card className="p-6">
  <Label htmlFor="input-text" className="text-lg font-medium mb-3 block">
    {t('originalText')}
  </Label>

Replace that entire block (lines 96-99) with this new code:

<Card className="p-6">
  <div className="flex justify-between items-center mb-3">
    <Label htmlFor="input-text" className="text-lg font-medium">
      {t('originalText')}
    </Label>
    
    <div className="relative">
      <input
        type="file"
        id="pdf-upload"
        className="hidden"
        accept=".pdf"
        onChange={handleFileUpload}
        disabled={isUploading}
      />
      <Button
        variant="outline"
        size="sm"
        onClick={() => document.getElementById('pdf-upload')?.click()}
        disabled={isUploading}
      >
        {isUploading ? (
          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
        ) : (
          <Upload className="w-4 h-4 mr-2" />
        )}
        {isUploading ? "Extracting..." : "Upload PDF"}
      </Button>
    </div>
  </div>

---

Part 3: Test It

1. Go to your browser (http://localhost:5173).
2. You should now see an "Upload PDF" button above the "Original Text" box.
3. Click it and select a PDF document from your computer.
4. Watch:
   • The button should say "Extracting..." briefly.
   • A success message should pop up ("PDF Uploaded").
   • The text from the PDF should automatically appear in the big text box.
5. Success! Now you can click "Make it easier" to simplify that text.

[amfgrantpro]

Results:

• Success.
• I see the button. I can use it.
• I don't see "Extracting..." because it's too fast. Even 21 page PDFs are too fast to catch it.
• The source text shows up in the left box after importing.
• The translated text shows up in the right box after clicking to translate.
• The success toast is shown.