End-to-End Field Mapping Wizard (Backend + Frontend)

[krrishrastogi05]

Summary

This PR implements the complete Field Mapping Wizard (#111), enabling users to upload a PDF, automatically detect all form fields, and create a template in a single flow.

It includes:

• Backend PDF field detection engine
• Frontend Wizard UI
• One-click template creation workflow

This reduces template setup time from manual effort (~30 minutes) to a few seconds.

---

Problem

Creating templates from fillable PDFs currently requires:

1. Manually inspecting each field in the PDF
2. Copying field names
3. Writing a JSON mapping
4. Handling errors manually

This becomes inefficient and error-prone for PDFs with many fields.

---

Solution

A unified wizard that:

1. Accepts a PDF upload
2. Detects all form fields automatically
3. Displays them in the UI
4. Allows instant template creation

---

###Screenshots and Videos

Key Features

Backend: Field Detection API

• Endpoint: POST /wizard/detect-fields

• Extracts:

  • Field name
  • Field type (Text, Button, Choice)
  • Raw PDF type
  • Bounding box coordinates

• Returns structured, page-wise metadata

• Built using pypdf

Example response:

{
  "filename": "fire_response_report.pdf",
  "total_pages": 1,
  "total_fields": 50,
  "pages": [
    {
      "page_number": 1,
      "fields": [
        {
          "field_name": "Incident_Report_Number",
          "field_type": "Text",
          "raw_type": "/Tx",
          "rect": { "x": 72.0, "y": 660.0, "width": 150.0, "height": 18.0 }
        }
      ]
    }
  ]
}

---

Frontend: Field Wizard UI

• New “Field Wizard” tab
• Drag-and-drop PDF upload
• Field detection trigger
• Visual display grouped by page
• Type-based field labeling

---

One-Click Template Creation

• Converts detected fields into JSON mapping
• Auto-generates template name from filename
• Transfers PDF to template upload
• Pre-fills template creation form

User only needs to submit the form.

---

Implementation Details

Backend

• src/field_detector.py: Field extraction logic
• src/controller.py: Detection integration
• api/routes/wizard.py: API endpoint
• api/schemas/wizard.py: Response models
• tests/test_wizard.py: Test coverage
• requirements.txt: Added pypdf

Frontend

• frontend/index.html: Wizard UI
• frontend/styles.css: Layout and styling
• frontend/app.js: API integration and workflow logic

---

Relation to Existing Code

• Reuses PDF parsing logic from src/filler.py
• Refactors it into a reusable detection module
• Extends it with structured output and API exposure

---

Limitations

• Supports only fillable PDFs (AcroForms)
• Scanned/image PDFs return no fields
• No OCR support
• No AI dependency

---

How to Test

Backend

python -m pytest tests/test_wizard.py -v

Run API:

python -m uvicorn api.main:app --reload --port 8000

---

Frontend

cd frontend
python -m http.server 5173

Open:
http://127.0.0.1:5173

Flow:

1. Upload PDF
2. Detect fields
3. Use as template

---

Future Work

• Visual PDF canvas with field overlays
• Drag-and-drop schema mapping
• Field renaming
• OCR for scanned PDFs
• AI-based field mapping

---

Closes Phase 1 and 2 of #111