feat: Initialize AutoForm AI project structure
Sets up the basic project structure for AutoForm AI, including: - Vite for build tooling and development server. - React and ReactDOM for the UI. - TypeScript for static typing. - Essential dependencies for PDF manipulation (jspdf, pdf-lib) and AI integration (@google/genai). - Basic HTML structure and styling. - Component definitions and service interfaces for future development. - A README with local development instructions.
This commit is contained in:
Kenearos
parent
f1f796c9ca
commit
d2ea8a0cd4
14 changed files with 1217 additions and 8 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
226
App.tsx
Normal file
226
App.tsx
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { AppStatus, FileData, FormResponse } from './types';
|
||||
import { FileUpload } from './components/FileUpload';
|
||||
import { ReviewPanel } from './components/ReviewPanel';
|
||||
import { processDocuments } from './services/geminiService';
|
||||
import { getPdfFields, PdfFieldInfo } from './services/pdfService';
|
||||
import { Bot, Sparkles, ArrowRight, FileCheck2, ScanText, Loader2, AlertTriangle, FileText, Check } from 'lucide-react';
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
|
||||
const [formFile, setFormFile] = useState<FileData | null>(null);
|
||||
const [sourceFile, setSourceFile] = useState<FileData | null>(null);
|
||||
const [pdfFields, setPdfFields] = useState<PdfFieldInfo[]>([]);
|
||||
const [responseData, setResponseData] = useState<FormResponse | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const analyzePdf = async () => {
|
||||
if (formFile && formFile.type === 'application/pdf') {
|
||||
const fields = await getPdfFields(formFile.base64);
|
||||
setPdfFields(fields);
|
||||
console.log("Detected PDF fields:", fields);
|
||||
} else {
|
||||
setPdfFields([]);
|
||||
}
|
||||
};
|
||||
analyzePdf();
|
||||
}, [formFile]);
|
||||
|
||||
const handleAnalyze = async () => {
|
||||
if (!formFile || !sourceFile) return;
|
||||
|
||||
setStatus(AppStatus.PROCESSING);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const data = await processDocuments(formFile, sourceFile, pdfFields);
|
||||
setResponseData(data);
|
||||
setStatus(AppStatus.REVIEW);
|
||||
} catch (e: any) {
|
||||
setError(e.message || "Something went wrong during analysis.");
|
||||
setStatus(AppStatus.ERROR);
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
setStatus(AppStatus.IDLE);
|
||||
setFormFile(null);
|
||||
setSourceFile(null);
|
||||
setResponseData(null);
|
||||
setError(null);
|
||||
setPdfFields([]);
|
||||
};
|
||||
|
||||
if (status === AppStatus.REVIEW && responseData && formFile && sourceFile) {
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50">
|
||||
<header className="bg-white border-b border-slate-200 sticky top-0 z-50">
|
||||
<div className="max-w-7xl mx-auto px-4 h-16 flex items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="bg-indigo-600 p-1.5 rounded-lg">
|
||||
<Bot className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="font-bold text-lg text-slate-900">AutoForm AI</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ReviewPanel
|
||||
fields={responseData.fields}
|
||||
summary={responseData.summary}
|
||||
formFile={formFile}
|
||||
sourceFile={sourceFile}
|
||||
isFillablePdf={pdfFields.length > 0}
|
||||
onReset={reset}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-slate-50 flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-slate-200">
|
||||
<div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="bg-indigo-600 p-2 rounded-xl shadow-lg shadow-indigo-200">
|
||||
<Bot className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="font-bold text-xl text-slate-900 tracking-tight">AutoForm AI</h1>
|
||||
<p className="text-xs text-slate-500 font-medium">Intelligent Document Processing</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center space-x-6 text-sm font-medium text-slate-600">
|
||||
<span className="flex items-center"><ScanText className="w-4 h-4 mr-2" />1. Scan</span>
|
||||
<span className="flex items-center"><Sparkles className="w-4 h-4 mr-2" />2. Extract</span>
|
||||
<span className="flex items-center"><FileCheck2 className="w-4 h-4 mr-2" />3. Review</span>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="flex-1 max-w-5xl mx-auto w-full px-4 py-12 flex flex-col justify-center">
|
||||
|
||||
{status === AppStatus.IDLE || status === AppStatus.ERROR ? (
|
||||
<>
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-extrabold text-slate-900 mb-4">
|
||||
Fill Forms Automatically with AI
|
||||
</h2>
|
||||
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
||||
Upload a blank PDF form and a source document.
|
||||
We'll extract the data and fill the PDF fields for you.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
|
||||
{error && (
|
||||
<div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
|
||||
<div className="flex">
|
||||
<div className="flex-shrink-0">
|
||||
<AlertTriangle className="h-5 w-5 text-red-400" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-3">
|
||||
<p className="text-sm text-red-700">
|
||||
{error}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8 p-8">
|
||||
{/* Step 1: Blank Form */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 border border-slate-300">1</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-bold text-slate-900 text-lg">Target Form</h3>
|
||||
{pdfFields.length > 0 && (
|
||||
<span className="text-xs text-emerald-600 font-medium bg-emerald-50 px-2 py-0.5 rounded-full">
|
||||
{pdfFields.length} fillable fields detected
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<FileUpload
|
||||
label="Fillable PDF Form"
|
||||
description="The empty PDF you want to fill."
|
||||
accept="application/pdf,image/*"
|
||||
onFileSelect={setFormFile}
|
||||
selectedFile={formFile}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Step 2: Source Data */}
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 border border-slate-300">2</div>
|
||||
<h3 className="font-bold text-slate-900 text-lg">Source Document</h3>
|
||||
</div>
|
||||
<FileUpload
|
||||
label="Source Data"
|
||||
description="Scan, Letter, ID, etc."
|
||||
accept="image/*,application/pdf"
|
||||
onFileSelect={setSourceFile}
|
||||
selectedFile={sourceFile}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-slate-50 p-6 border-t border-slate-100 flex justify-end">
|
||||
<button
|
||||
onClick={handleAnalyze}
|
||||
disabled={!formFile || !sourceFile}
|
||||
className={`
|
||||
flex items-center px-6 py-3 rounded-xl font-bold text-white shadow-lg transition-all
|
||||
${(!formFile || !sourceFile)
|
||||
? 'bg-slate-300 cursor-not-allowed shadow-none'
|
||||
: 'bg-indigo-600 hover:bg-indigo-700 hover:shadow-indigo-500/30 transform hover:-translate-y-0.5'
|
||||
}
|
||||
`}
|
||||
>
|
||||
<Sparkles className="w-5 h-5 mr-2" />
|
||||
Analyze & Fill
|
||||
<ArrowRight className="w-5 h-5 ml-2" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
/* Processing State */
|
||||
<div className="flex flex-col items-center justify-center py-20">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-indigo-500 blur-xl opacity-20 rounded-full animate-pulse"></div>
|
||||
<div className="relative bg-white p-6 rounded-2xl shadow-xl border border-indigo-100">
|
||||
<Loader2 className="w-12 h-12 text-indigo-600 animate-spin" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="mt-8 text-2xl font-bold text-slate-900">Processing Documents...</h3>
|
||||
<p className="mt-2 text-slate-500 max-w-md text-center">
|
||||
AI is reading the source document and mapping data to your PDF form fields.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl">
|
||||
<div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50">
|
||||
<ScanText className="w-5 h-5 text-indigo-600" />
|
||||
<span className="text-sm font-medium">Parsing PDF</span>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50 animate-pulse delay-75">
|
||||
<FileText className="w-5 h-5 text-indigo-600" />
|
||||
<span className="text-sm font-medium">Extracting Data</span>
|
||||
</div>
|
||||
<div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50 animate-pulse delay-150">
|
||||
<Check className="w-5 h-5 text-indigo-600" />
|
||||
<span className="text-sm font-medium">Filling Form</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
25
README.md
25
README.md
|
|
@ -1,11 +1,20 @@
|
|||
<div align="center">
|
||||
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
|
||||
<h1>Built with AI Studio</h2>
|
||||
|
||||
<p>The fastest path from prompt to production with Gemini.</p>
|
||||
|
||||
<a href="https://aistudio.google.com/apps">Start building</a>
|
||||
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/drive/1eOJcZ5qjOqVKG1eSXvA6HRcCwqcgcuGO
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
|
|
|
|||
122
components/FileUpload.tsx
Normal file
122
components/FileUpload.tsx
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import React, { useRef, useState } from 'react';
|
||||
import { Upload, FileText, CheckCircle, X, Image as ImageIcon } from 'lucide-react';
|
||||
import { FileData } from '../types';
|
||||
|
||||
interface FileUploadProps {
|
||||
label: string;
|
||||
description: string;
|
||||
accept: string;
|
||||
onFileSelect: (data: FileData | null) => void;
|
||||
selectedFile: FileData | null;
|
||||
}
|
||||
|
||||
export const FileUpload: React.FC<FileUploadProps> = ({
|
||||
label,
|
||||
description,
|
||||
accept,
|
||||
onFileSelect,
|
||||
selectedFile
|
||||
}) => {
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const [isDragging, setIsDragging] = useState(false);
|
||||
|
||||
const processFile = (file: File) => {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
const base64String = reader.result as string;
|
||||
// Remove data URL prefix for API usage
|
||||
const base64Content = base64String.split(',')[1];
|
||||
|
||||
onFileSelect({
|
||||
file,
|
||||
previewUrl: file.type.startsWith('image/') ? base64String : null,
|
||||
base64: base64Content,
|
||||
type: file.type as any
|
||||
});
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const handleDrop = (e: React.DragEvent) => {
|
||||
e.preventDefault();
|
||||
setIsDragging(false);
|
||||
if (e.dataTransfer.files && e.dataTransfer.files[0]) {
|
||||
processFile(e.dataTransfer.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files[0]) {
|
||||
processFile(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const clearFile = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
onFileSelect(null);
|
||||
if (inputRef.current) inputRef.current.value = '';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label className="block text-sm font-medium text-slate-700 mb-2">{label}</label>
|
||||
|
||||
{!selectedFile ? (
|
||||
<div
|
||||
onClick={() => inputRef.current?.click()}
|
||||
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
|
||||
onDragLeave={() => setIsDragging(false)}
|
||||
onDrop={handleDrop}
|
||||
className={`
|
||||
relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-200
|
||||
${isDragging ? 'border-indigo-500 bg-indigo-50' : 'border-slate-300 hover:border-slate-400 hover:bg-slate-50'}
|
||||
`}
|
||||
>
|
||||
<input
|
||||
type="file"
|
||||
ref={inputRef}
|
||||
className="hidden"
|
||||
accept={accept}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className="flex flex-col items-center justify-center space-y-3">
|
||||
<div className="p-3 bg-white rounded-full shadow-sm">
|
||||
<Upload className="w-6 h-6 text-indigo-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-slate-900">Click to upload or drag and drop</p>
|
||||
<p className="text-xs text-slate-500 mt-1">{description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border border-indigo-100 bg-indigo-50/50 rounded-xl p-4 flex items-center space-x-4">
|
||||
<div className="w-12 h-12 bg-white rounded-lg shadow-sm flex items-center justify-center flex-shrink-0 overflow-hidden">
|
||||
{selectedFile.previewUrl ? (
|
||||
<img src={selectedFile.previewUrl} alt="Preview" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<FileText className="w-6 h-6 text-indigo-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
{selectedFile.file.name}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500">
|
||||
{(selectedFile.file.size / 1024 / 1024).toFixed(2)} MB
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle className="w-5 h-5 text-emerald-500" />
|
||||
<button
|
||||
onClick={clearFile}
|
||||
className="p-1 hover:bg-white rounded-full transition-colors text-slate-400 hover:text-red-500"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
394
components/ReviewPanel.tsx
Normal file
394
components/ReviewPanel.tsx
Normal file
|
|
@ -0,0 +1,394 @@
|
|||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { ExtractedField, FileData } from '../types';
|
||||
import { Check, Edit2, Download, RefreshCw, FileText, AlertTriangle, XCircle, ArrowRight, PenTool, CheckCircle2, Circle } from 'lucide-react';
|
||||
import { createFilledPdf } from '../services/pdfService';
|
||||
import { jsPDF } from "jspdf";
|
||||
|
||||
interface ReviewPanelProps {
|
||||
fields: ExtractedField[];
|
||||
formFile: FileData;
|
||||
sourceFile: FileData;
|
||||
summary: string;
|
||||
isFillablePdf: boolean;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export const ReviewPanel: React.FC<ReviewPanelProps> = ({
|
||||
fields: initialFields,
|
||||
formFile,
|
||||
sourceFile,
|
||||
summary,
|
||||
isFillablePdf,
|
||||
onReset
|
||||
}) => {
|
||||
const [fields, setFields] = useState(initialFields);
|
||||
const [activeField, setActiveField] = useState<number | null>(null);
|
||||
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||||
const [filterMode, setFilterMode] = useState<'ALL' | 'ATTENTION'>('ALL');
|
||||
|
||||
// Derived state for progress
|
||||
const verifiedCount = fields.filter(f => f.isVerified).length;
|
||||
const totalCount = fields.length;
|
||||
const progressPercent = Math.round((verifiedCount / totalCount) * 100);
|
||||
|
||||
const fieldsRequiresAttention = useMemo(() =>
|
||||
fields.filter(f => f.validation?.status !== 'VALID'),
|
||||
[fields]);
|
||||
|
||||
// Generate preview
|
||||
useEffect(() => {
|
||||
const updatePreview = async () => {
|
||||
if (formFile.type === 'application/pdf') {
|
||||
try {
|
||||
const filledPdfBytes = await createFilledPdf(formFile.base64, fields, isFillablePdf);
|
||||
const blob = new Blob([filledPdfBytes], { type: 'application/pdf' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
setPreviewUrl(url);
|
||||
return () => URL.revokeObjectURL(url);
|
||||
} catch (e) {
|
||||
console.error("Failed to generate PDF preview", e);
|
||||
}
|
||||
} else {
|
||||
setPreviewUrl(formFile.previewUrl);
|
||||
}
|
||||
};
|
||||
|
||||
// Debounce slightly to avoid rapid updates on typing
|
||||
const timer = setTimeout(updatePreview, 600);
|
||||
return () => clearTimeout(timer);
|
||||
}, [fields, isFillablePdf, formFile.base64, formFile.type]);
|
||||
|
||||
const handleUpdate = (index: number, newValue: string) => {
|
||||
const newFields = [...fields];
|
||||
newFields[index] = {
|
||||
...newFields[index],
|
||||
value: newValue,
|
||||
// Auto-verify when manually edited
|
||||
isVerified: true,
|
||||
validation: { ...newFields[index].validation!, status: 'VALID', message: 'Manually verified' }
|
||||
};
|
||||
setFields(newFields);
|
||||
};
|
||||
|
||||
const toggleVerify = (index: number) => {
|
||||
const newFields = [...fields];
|
||||
newFields[index] = {
|
||||
...newFields[index],
|
||||
isVerified: !newFields[index].isVerified
|
||||
};
|
||||
setFields(newFields);
|
||||
};
|
||||
|
||||
const applySuggestion = (index: number) => {
|
||||
const field = fields[index];
|
||||
if (field.validation?.suggestion) {
|
||||
handleUpdate(index, field.validation.suggestion);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownload = async () => {
|
||||
if (formFile.type === 'application/pdf' && previewUrl) {
|
||||
const a = document.createElement('a');
|
||||
a.href = previewUrl;
|
||||
a.download = `filled_${formFile.file.name}`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
} else {
|
||||
const doc = new jsPDF();
|
||||
doc.text("Extracted Data", 20, 20);
|
||||
let y = 40;
|
||||
fields.forEach(f => {
|
||||
doc.text(`${f.label}: ${f.value}`, 20, y);
|
||||
y += 10;
|
||||
});
|
||||
doc.save("data_report.pdf");
|
||||
}
|
||||
};
|
||||
|
||||
// Sort: Unverified/Issues first, then verified
|
||||
const displayedFields = fields.map((f, i) => ({ ...f, originalIndex: i }))
|
||||
.sort((a, b) => {
|
||||
// Priority 1: Attention needed
|
||||
const aNeedsAttn = a.validation?.status !== 'VALID';
|
||||
const bNeedsAttn = b.validation?.status !== 'VALID';
|
||||
if (aNeedsAttn && !bNeedsAttn) return -1;
|
||||
if (!aNeedsAttn && bNeedsAttn) return 1;
|
||||
|
||||
// Priority 2: Unverified
|
||||
if (!a.isVerified && b.isVerified) return -1;
|
||||
if (a.isVerified && !b.isVerified) return 1;
|
||||
|
||||
return a.originalIndex - b.originalIndex;
|
||||
})
|
||||
.filter(f => filterMode === 'ALL' || (f.validation?.status !== 'VALID' && !f.isVerified));
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 py-8 h-[calc(100vh-80px)] flex flex-col">
|
||||
{/* Header Section */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-4 flex-shrink-0">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-slate-900">Review & Verify</h2>
|
||||
<p className="text-slate-500 text-sm mt-1">{summary}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4 w-full md:w-auto">
|
||||
{/* Verification Progress */}
|
||||
<div className="hidden md:flex flex-col items-end mr-2">
|
||||
<span className="text-xs font-semibold text-slate-600 mb-1">
|
||||
{verifiedCount} / {totalCount} Verified
|
||||
</span>
|
||||
<div className="w-32 h-2 bg-slate-200 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-emerald-500 transition-all duration-500 ease-out"
|
||||
style={{ width: `${progressPercent}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={onReset}
|
||||
className="flex items-center px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-lg hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Start Over
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleDownload}
|
||||
className={`flex items-center px-4 py-2 text-sm font-medium text-white rounded-lg transition-colors shadow-sm bg-indigo-600 hover:bg-indigo-700`}
|
||||
>
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Download PDF
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 flex-1 min-h-0">
|
||||
{/* Left Column: Visual Reference */}
|
||||
<div className="bg-slate-900 rounded-xl overflow-hidden shadow-lg flex flex-col">
|
||||
<div className="p-3 bg-slate-800 border-b border-slate-700 flex justify-between items-center">
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs font-medium text-slate-300 uppercase tracking-wider">Preview</span>
|
||||
{!isFillablePdf && (
|
||||
<span className="flex items-center text-[10px] bg-indigo-500/20 text-indigo-300 px-1.5 py-0.5 rounded border border-indigo-500/30">
|
||||
<PenTool className="w-3 h-3 mr-1" />
|
||||
Visual Overlay Mode
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">{formFile.file.name}</span>
|
||||
</div>
|
||||
<div className="flex-1 bg-slate-900 relative">
|
||||
{previewUrl ? (
|
||||
formFile.type === 'application/pdf' ? (
|
||||
<iframe
|
||||
src={previewUrl}
|
||||
title="Form PDF Preview"
|
||||
className="w-full h-full border-none"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-full h-full overflow-auto flex items-center justify-center p-4">
|
||||
<img
|
||||
src={previewUrl}
|
||||
alt="Form Document"
|
||||
className="max-w-full shadow-lg border border-slate-700"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full text-slate-500">
|
||||
<FileText className="w-16 h-16 mb-4 opacity-50" />
|
||||
<p>Preview not available</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Verification List */}
|
||||
<div className="bg-white rounded-xl shadow-sm border border-slate-200 flex flex-col overflow-hidden">
|
||||
{/* List Header */}
|
||||
<div className="p-4 border-b border-slate-100 bg-slate-50/50">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h3 className="font-semibold text-slate-800">Field Verification</h3>
|
||||
<div className="flex space-x-2 text-xs">
|
||||
<button
|
||||
onClick={() => setFilterMode('ALL')}
|
||||
className={`px-3 py-1 rounded-full border transition-colors ${filterMode === 'ALL' ? 'bg-slate-800 text-white border-slate-800' : 'bg-white text-slate-600 border-slate-200 hover:bg-slate-50'}`}
|
||||
>
|
||||
All Fields ({totalCount})
|
||||
</button>
|
||||
{fieldsRequiresAttention.length > 0 && (
|
||||
<button
|
||||
onClick={() => setFilterMode('ATTENTION')}
|
||||
className={`px-3 py-1 rounded-full border transition-colors flex items-center ${filterMode === 'ATTENTION' ? 'bg-amber-100 text-amber-800 border-amber-200' : 'bg-white text-amber-600 border-slate-200 hover:bg-amber-50'}`}
|
||||
>
|
||||
<AlertTriangle className="w-3 h-3 mr-1" />
|
||||
Needs Review ({fieldsRequiresAttention.length})
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!isFillablePdf && (
|
||||
<div className="flex items-start space-x-2 bg-indigo-50 text-indigo-800 p-3 rounded-md border border-indigo-100 text-xs">
|
||||
<PenTool className="w-4 h-4 flex-shrink-0 text-indigo-600 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-semibold">Visual Overlay Mode</p>
|
||||
<p>AI is visually estimating field positions. Please verify text alignment in the preview.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Fields List */}
|
||||
<div className="flex-1 overflow-y-auto p-4 space-y-3 bg-slate-50/30">
|
||||
{displayedFields.map((field) => {
|
||||
const idx = field.originalIndex;
|
||||
const status = field.validation?.status || 'VALID';
|
||||
const isVerified = field.isVerified;
|
||||
|
||||
let statusBorder = isVerified ? "border-emerald-200" : "border-slate-200";
|
||||
let statusBg = isVerified ? "bg-emerald-50/30" : "bg-white";
|
||||
|
||||
if (!isVerified) {
|
||||
if (status === 'INVALID') {
|
||||
statusBorder = "border-red-200";
|
||||
statusBg = "bg-red-50/50";
|
||||
} else if (status === 'WARNING') {
|
||||
statusBorder = "border-amber-200";
|
||||
statusBg = "bg-amber-50/50";
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
key={idx}
|
||||
className={`
|
||||
relative group rounded-lg border transition-all duration-200 p-3 shadow-sm
|
||||
${activeField === idx ? 'ring-1 ring-indigo-500 border-indigo-500 shadow-md z-10' : statusBorder}
|
||||
${statusBg}
|
||||
`}
|
||||
onFocus={() => setActiveField(idx)}
|
||||
onBlur={() => setActiveField(null)}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
{/* Verification Checkbox */}
|
||||
<button
|
||||
onClick={() => toggleVerify(idx)}
|
||||
className={`
|
||||
mt-1 flex-shrink-0 w-5 h-5 rounded border flex items-center justify-center transition-colors
|
||||
${isVerified
|
||||
? 'bg-emerald-500 border-emerald-500 text-white'
|
||||
: 'bg-white border-slate-300 text-transparent hover:border-emerald-400'
|
||||
}
|
||||
`}
|
||||
title={isVerified ? "Mark as unverified" : "Mark as verified"}
|
||||
>
|
||||
<Check className="w-3.5 h-3.5" strokeWidth={3} />
|
||||
</button>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<label className={`text-xs font-semibold uppercase tracking-wider truncate ${isVerified ? 'text-emerald-700' : 'text-slate-600'}`}>
|
||||
{field.label || field.key || "Unknown Field"}
|
||||
</label>
|
||||
|
||||
{/* Status Badge */}
|
||||
{!isVerified && status !== 'VALID' && (
|
||||
<span className={`flex items-center text-[10px] font-bold px-1.5 py-0.5 rounded ${status === 'INVALID' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700'}`}>
|
||||
{status === 'INVALID' ? <XCircle className="w-3 h-3 mr-1"/> : <AlertTriangle className="w-3 h-3 mr-1"/>}
|
||||
{status}
|
||||
</span>
|
||||
)}
|
||||
{isVerified && (
|
||||
<span className="flex items-center text-[10px] font-bold px-1.5 py-0.5 rounded bg-emerald-100 text-emerald-700">
|
||||
<CheckCircle2 className="w-3 h-3 mr-1"/>
|
||||
VERIFIED
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={field.value}
|
||||
onChange={(e) => handleUpdate(idx, e.target.value)}
|
||||
className={`
|
||||
block w-full rounded-md px-2.5 py-1.5 text-sm font-medium transition-colors border
|
||||
${isVerified
|
||||
? 'border-emerald-200 text-emerald-900 bg-emerald-50/50'
|
||||
: 'border-slate-300 text-slate-900 focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500'
|
||||
}
|
||||
`}
|
||||
placeholder="Empty"
|
||||
/>
|
||||
{!isVerified && (
|
||||
<div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-slate-400">
|
||||
<Edit2 className="w-3.5 h-3.5 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Error/Warning Message */}
|
||||
{(!isVerified && status !== 'VALID' && field.validation?.message) && (
|
||||
<p className={`mt-1.5 text-xs ${status === 'INVALID' ? 'text-red-600' : 'text-amber-600'}`}>
|
||||
{field.validation.message}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Auto-Fix Button */}
|
||||
{(!isVerified && field.validation?.suggestion && status !== 'VALID') && (
|
||||
<button
|
||||
onClick={() => applySuggestion(idx)}
|
||||
className="mt-2 flex items-center text-xs font-bold text-indigo-600 hover:text-indigo-800 bg-indigo-50 hover:bg-indigo-100 px-2 py-1 rounded transition-colors w-full sm:w-auto"
|
||||
>
|
||||
<ArrowRight className="w-3 h-3 mr-1" />
|
||||
Accept Fix: "{field.validation.suggestion}"
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Source Context Snippet */}
|
||||
{!isVerified && field.sourceContext && (
|
||||
<div className="mt-2 p-2 bg-slate-100 rounded text-[11px] text-slate-500 border border-slate-200">
|
||||
<span className="font-semibold text-slate-700">Source:</span> "{field.sourceContext}"
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{displayedFields.length === 0 && (
|
||||
<div className="text-center py-10 text-slate-400">
|
||||
<CheckCircle2 className="w-12 h-12 mx-auto mb-2 opacity-20" />
|
||||
<p>All fields verified!</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Verification Footer */}
|
||||
<div className="p-4 border-t border-slate-200 bg-white">
|
||||
<div className="flex justify-between items-center text-xs font-medium text-slate-500">
|
||||
<span>{verifiedCount} of {totalCount} fields verified</span>
|
||||
{progressPercent === 100 ? (
|
||||
<span className="text-emerald-600 font-bold flex items-center">
|
||||
<CheckCircle2 className="w-4 h-4 mr-1"/> Ready to Download
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-amber-600 flex items-center">
|
||||
<Circle className="w-4 h-4 mr-1 fill-amber-100"/> Review in progress
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Mobile Progress Bar */}
|
||||
<div className="md:hidden mt-2 w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className="h-full bg-emerald-500 transition-all" style={{ width: `${progressPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
32
index.html
Normal file
32
index.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>AutoForm AI</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
</style>
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"react-dom/": "https://esm.sh/react-dom@^19.2.4/",
|
||||
"react/": "https://esm.sh/react@^19.2.4/",
|
||||
"react": "https://esm.sh/react@^19.2.4",
|
||||
"lucide-react": "https://esm.sh/lucide-react@^0.563.0",
|
||||
"@google/genai": "https://esm.sh/@google/genai@^1.38.0",
|
||||
"jspdf": "https://esm.sh/jspdf@2.5.1",
|
||||
"pdf-lib": "https://esm.sh/pdf-lib@^1.17.1"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
15
index.tsx
Normal file
15
index.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import App from './App';
|
||||
|
||||
const rootElement = document.getElementById('root');
|
||||
if (!rootElement) {
|
||||
throw new Error("Could not find root element to mount to");
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(rootElement);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
5
metadata.json
Normal file
5
metadata.json
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"name": "AutoForm AI",
|
||||
"description": "Intelligent document processing app that uses Gemini to automatically fill out forms based on source documents (e.g., medical letters, invoices).",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
25
package.json
Normal file
25
package.json
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
{
|
||||
"name": "autoform-ai",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react-dom": "^19.2.4",
|
||||
"react": "^19.2.4",
|
||||
"lucide-react": "^0.563.0",
|
||||
"@google/genai": "^1.38.0",
|
||||
"jspdf": "2.5.1",
|
||||
"pdf-lib": "^1.17.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.14.0",
|
||||
"@vitejs/plugin-react": "^5.0.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
161
services/geminiService.ts
Normal file
161
services/geminiService.ts
Normal file
|
|
@ -0,0 +1,161 @@
|
|||
import { GoogleGenAI, Type, Schema } from "@google/genai";
|
||||
import { FileData, FormResponse } from "../types";
|
||||
import { PdfFieldInfo } from "./pdfService";
|
||||
|
||||
const ai = new GoogleGenAI({ apiKey: process.env.API_KEY });
|
||||
|
||||
const responseSchema: Schema = {
|
||||
type: Type.OBJECT,
|
||||
properties: {
|
||||
summary: {
|
||||
type: Type.STRING,
|
||||
description: "A brief summary of what document was processed."
|
||||
},
|
||||
fields: {
|
||||
type: Type.ARRAY,
|
||||
items: {
|
||||
type: Type.OBJECT,
|
||||
properties: {
|
||||
key: {
|
||||
type: Type.STRING,
|
||||
description: "The PDF field name (if available)."
|
||||
},
|
||||
label: {
|
||||
type: Type.STRING,
|
||||
description: "A human-readable label for the field."
|
||||
},
|
||||
value: {
|
||||
type: Type.STRING,
|
||||
description: "The value to fill. For checkboxes, use 'true'/'false' or 'X'."
|
||||
},
|
||||
sourceContext: {
|
||||
type: Type.STRING,
|
||||
description: "The exact snippet of text from the source document used to derive this value. Used for user verification."
|
||||
},
|
||||
coordinates: {
|
||||
type: Type.OBJECT,
|
||||
description: "REQUIRED if no specific PDF field names are provided. Visual location to draw text.",
|
||||
properties: {
|
||||
pageIndex: { type: Type.INTEGER, description: "0-based page index" },
|
||||
x: { type: Type.INTEGER, description: "Horizontal position (0-1000) from Left" },
|
||||
y: { type: Type.INTEGER, description: "Vertical position (0-1000) from Top" }
|
||||
},
|
||||
required: ["pageIndex", "x", "y"]
|
||||
},
|
||||
validation: {
|
||||
type: Type.OBJECT,
|
||||
properties: {
|
||||
status: {
|
||||
type: Type.STRING,
|
||||
description: "VALID, WARNING, or INVALID."
|
||||
},
|
||||
message: {
|
||||
type: Type.STRING,
|
||||
description: "Validation message explaining any issues or uncertainty."
|
||||
},
|
||||
suggestion: {
|
||||
type: Type.STRING,
|
||||
description: "Alternative value suggestion if the extracted value is uncertain."
|
||||
}
|
||||
},
|
||||
required: ["status"]
|
||||
}
|
||||
},
|
||||
required: ["label", "value", "validation"]
|
||||
}
|
||||
}
|
||||
},
|
||||
required: ["fields", "summary"]
|
||||
};
|
||||
|
||||
export const processDocuments = async (
|
||||
blankForm: FileData,
|
||||
sourceDocument: FileData,
|
||||
pdfFields: PdfFieldInfo[] = []
|
||||
): Promise<FormResponse> => {
|
||||
|
||||
const formPart = {
|
||||
inlineData: {
|
||||
data: blankForm.base64,
|
||||
mimeType: blankForm.type,
|
||||
},
|
||||
};
|
||||
|
||||
const sourcePart = {
|
||||
inlineData: {
|
||||
data: sourceDocument.base64,
|
||||
mimeType: sourceDocument.type,
|
||||
},
|
||||
};
|
||||
|
||||
let systemPrompt = `
|
||||
ROLE: Intelligent Document Processing AI (Verification Expert).
|
||||
TASK: Extract data from the SOURCE DOCUMENT and map it to the BLANK TARGET FORM.
|
||||
|
||||
CRITICAL INSTRUCTION: You must verify every extraction. If a value is ambiguous, plausibility is low, or you are guessing, set validation.status to 'WARNING' and explain why in validation.message.
|
||||
`;
|
||||
|
||||
if (pdfFields.length > 0) {
|
||||
const fieldList = pdfFields.map(f => `"${f.name}" (${f.type})`).join(", ");
|
||||
systemPrompt += `
|
||||
MODE: FILLABLE PDF (AcroForm).
|
||||
The target form has specific embedded fields.
|
||||
Map extracted data to these exact field IDs: [${fieldList}].
|
||||
Return the 'key' property matching the field ID.
|
||||
`;
|
||||
} else {
|
||||
systemPrompt += `
|
||||
MODE: VISUAL FILLING (Flat/XFA/Scan).
|
||||
The target form DOES NOT have accessible digital fields.
|
||||
You must VISUALLY locate where the text should be written.
|
||||
|
||||
For every field you identify on the TARGET FORM:
|
||||
1. Extract the corresponding value from the SOURCE DOCUMENT.
|
||||
2. Estimate the VISUAL COORDINATES [pageIndex, x, y] where the text should start.
|
||||
- 'x' and 'y' are on a scale of 0 to 1000.
|
||||
- (0,0) is the top-left corner of the page.
|
||||
- (1000,1000) is the bottom-right corner.
|
||||
- Align text slightly above lines or inside boxes.
|
||||
|
||||
For checkboxes: If true/yes, the value should be "X" placed inside the box.
|
||||
`;
|
||||
}
|
||||
|
||||
systemPrompt += `
|
||||
VALIDATION RULES:
|
||||
1. Dates: Ensure format matches the form (e.g. DD.MM.YYYY).
|
||||
2. Checkboxes: Only mark if explicitly supported by source.
|
||||
3. Missing Data: If a field is not found in source, leave 'value' empty and set status 'VALID'. Do not hallucinate.
|
||||
4. Source Context: Always populate 'sourceContext' with the exact text snippet from the source document that justifies your extraction.
|
||||
`;
|
||||
|
||||
try {
|
||||
const modelId = "gemini-3-flash-preview";
|
||||
|
||||
const response = await ai.models.generateContent({
|
||||
model: modelId,
|
||||
contents: {
|
||||
parts: [
|
||||
formPart,
|
||||
{ text: "This is the BLANK TARGET FORM." },
|
||||
sourcePart,
|
||||
{ text: "This is the SOURCE DOCUMENT." },
|
||||
]
|
||||
},
|
||||
config: {
|
||||
responseMimeType: "application/json",
|
||||
responseSchema: responseSchema,
|
||||
systemInstruction: systemPrompt
|
||||
}
|
||||
});
|
||||
|
||||
const text = response.text;
|
||||
if (!text) throw new Error("No response from Gemini");
|
||||
|
||||
return JSON.parse(text) as FormResponse;
|
||||
|
||||
} catch (error) {
|
||||
console.error("Gemini API Error:", error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
104
services/pdfService.ts
Normal file
104
services/pdfService.ts
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
import { PDFDocument, PDFTextField, PDFCheckBox, StandardFonts, rgb } from 'pdf-lib';
|
||||
import { ExtractedField } from '../types';
|
||||
|
||||
export interface PdfFieldInfo {
|
||||
name: string;
|
||||
type: string;
|
||||
}
|
||||
|
||||
export const getPdfFields = async (base64: string): Promise<PdfFieldInfo[]> => {
|
||||
try {
|
||||
const pdfDoc = await PDFDocument.load(base64);
|
||||
const form = pdfDoc.getForm();
|
||||
const fields = form.getFields();
|
||||
return fields.map(f => ({
|
||||
name: f.getName(),
|
||||
type: f.constructor.name
|
||||
}));
|
||||
} catch (error) {
|
||||
console.warn("Failed to extract PDF fields", error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const createFilledPdf = async (base64: string, fields: ExtractedField[], isFillable: boolean): Promise<Uint8Array> => {
|
||||
const pdfDoc = await PDFDocument.load(base64);
|
||||
const pages = pdfDoc.getPages();
|
||||
const font = await pdfDoc.embedFont(StandardFonts.Helvetica);
|
||||
|
||||
if (isFillable) {
|
||||
try {
|
||||
const form = pdfDoc.getForm();
|
||||
const fieldMap: Record<string, string> = {};
|
||||
fields.forEach(f => {
|
||||
if (f.key) fieldMap[f.key] = f.value;
|
||||
});
|
||||
|
||||
for (const [key, value] of Object.entries(fieldMap)) {
|
||||
try {
|
||||
const field = form.getField(key);
|
||||
if (!field) continue;
|
||||
|
||||
if (field instanceof PDFTextField) {
|
||||
field.setText(String(value));
|
||||
} else if (field instanceof PDFCheckBox) {
|
||||
const isChecked = String(value).toLowerCase() === 'true' || String(value).toLowerCase() === 'yes';
|
||||
if (isChecked) field.check();
|
||||
else field.uncheck();
|
||||
}
|
||||
} catch (e) {
|
||||
// Field might be read-only or tricky
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Error filling form fields", e);
|
||||
}
|
||||
} else {
|
||||
// VISUAL OVERLAY MODE
|
||||
// Iterate through fields and draw them at specific coordinates
|
||||
|
||||
for (const field of fields) {
|
||||
// Skip if no value or no coordinates
|
||||
if (!field.value || !field.coordinates) continue;
|
||||
|
||||
const { pageIndex, x, y } = field.coordinates;
|
||||
|
||||
// Safety check for page index
|
||||
if (pageIndex < 0 || pageIndex >= pages.length) continue;
|
||||
|
||||
const page = pages[pageIndex];
|
||||
const { width, height } = page.getSize();
|
||||
|
||||
// Convert 0-1000 coordinates to PDF Point coordinates
|
||||
// PDF (0,0) is bottom-left.
|
||||
// API (0,0) is top-left.
|
||||
// x = (x / 1000) * width
|
||||
// y = height - (y / 1000) * height
|
||||
|
||||
const pdfX = (x / 1000) * width;
|
||||
const pdfY = height - (y / 1000) * height;
|
||||
|
||||
// Adjust slightly for font height (text is drawn from baseline)
|
||||
// A small nudge down (subtract from Y) helps align with lines usually.
|
||||
const adjustedY = pdfY - 4;
|
||||
|
||||
try {
|
||||
page.drawText(field.value, {
|
||||
x: pdfX,
|
||||
y: adjustedY,
|
||||
size: 10,
|
||||
font: font,
|
||||
color: rgb(0, 0, 0),
|
||||
});
|
||||
} catch (e) {
|
||||
console.warn(`Failed to draw field ${field.label}`, e);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return await pdfDoc.save();
|
||||
};
|
||||
|
||||
export const fillPdf = async (base64: string, fieldValues: Record<string, string | boolean>): Promise<Uint8Array> => {
|
||||
return new Uint8Array();
|
||||
};
|
||||
29
tsconfig.json
Normal file
29
tsconfig.json
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"types": [
|
||||
"node"
|
||||
],
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
40
types.ts
Normal file
40
types.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
export interface ValidationResult {
|
||||
status: 'VALID' | 'WARNING' | 'INVALID';
|
||||
message?: string;
|
||||
suggestion?: string;
|
||||
}
|
||||
|
||||
export interface ExtractedField {
|
||||
key?: string; // The PDF field name (internal ID)
|
||||
label: string; // Human readable label
|
||||
value: string;
|
||||
confidence?: string;
|
||||
sourceContext?: string;
|
||||
validation?: ValidationResult;
|
||||
isVerified?: boolean; // Track if user has explicitly checked this field
|
||||
coordinates?: {
|
||||
pageIndex: number;
|
||||
x: number; // 0-1000 scale
|
||||
y: number; // 0-1000 scale
|
||||
};
|
||||
}
|
||||
|
||||
export interface FormResponse {
|
||||
fields: ExtractedField[];
|
||||
summary: string;
|
||||
}
|
||||
|
||||
export enum AppStatus {
|
||||
IDLE = 'IDLE',
|
||||
PROCESSING = 'PROCESSING',
|
||||
REVIEW = 'REVIEW',
|
||||
SUCCESS = 'SUCCESS',
|
||||
ERROR = 'ERROR'
|
||||
}
|
||||
|
||||
export interface FileData {
|
||||
file: File;
|
||||
previewUrl: string | null;
|
||||
base64: string;
|
||||
type: 'application/pdf' | 'image/png' | 'image/jpeg' | 'image/webp';
|
||||
}
|
||||
23
vite.config.ts
Normal file
23
vite.config.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import path from 'path';
|
||||
import { defineConfig, loadEnv } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [react()],
|
||||
define: {
|
||||
'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue