[V0_FILE]typescriptreact:file="components/tesseract-ocr.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { createWorker } from "tesseract.js" import { Progress } from "@/components/ui/progress" interface TesseractOCRProps { files: File[] onComplete: (results: Array<{ id: number; title: string; text: string }>) => void onProgress: (progress: number) => void } export function TesseractOCR({ files, onComplete, onProgress }: TesseractOCRProps) { const [isProcessing, setIsProcessing] = useState(false) const [currentFile, setCurrentFile] = useState(0) const [currentProgress, setCurrentProgress] = useState(0) useEffect(() => { if (files.length > 0 && !isProcessing) { processFiles() } }, [files]) const processFiles = async () => { if (files.length === 0) return setIsProcessing(true) const results: Array<{ id: number; title: string; text: string }> = [] // Create a Tesseract worker const worker = await createWorker({ logger: (progress) => { if (progress.status === "recognizing text") { const p = progress.progress || 0 setCurrentProgress(p * 100) onProgress(((currentFile + p) / files.length) * 100) } }, }) // Set worker language await worker.loadLanguage("eng") await worker.initialize("eng") // Process each file for (let i = 0; i < files.length; i++) { setCurrentFile(i) const file = files[i] try { // Skip non-image files if (!file.type.startsWith("image/")) { results.push({ id: i + 1, title: `File: ${file.name}`, text: `This file type (${file.type}) is not supported for OCR processing. Only image files can be processed with Tesseract.js.`, }) continue } // Convert file to data URL const dataUrl = await readFileAsDataURL(file) // Recognize text const { data } = await worker.recognize(dataUrl) results.push({ id: i + 1, title: `File: ${file.name}`, text: data.text || "No text was detected in this image.", }) } catch (error) { console.error(`Error processing file ${file.name}:`, error) results.push({ id: i + 1, title: `File: ${file.name}`, text: `Error processing this file: ${error instanceof Error ? error.message : "Unknown error"}`, }) } } // Terminate worker await worker.terminate() // Complete processing setIsProcessing(false) onComplete(results) } const readFileAsDataURL = (file: File): Promise => { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = () => resolve(reader.result as string) reader.onerror = reject reader.readAsDataURL(file) }) } return (

{isProcessing && (

Processing file {currentFile + 1} of {files.length} {Math.round(currentProgress)}%

)}

) } [V0_FILE]typescriptreact:file="components/file-upload.tsx" isEdit="true" "use client" import type React from "react" import { useState } from "react" import { Upload, FileType, ArrowRight } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" // Create a custom event type for better type safety interface OcrCompleteEventDetail { success: boolean results: Array<{ id: number; title: string; text: string }> } declare global { interface WindowEventMap { "ocr-complete": CustomEvent } } export function FileUpload() { const [files, setFiles] = useState([]) const [isDragging, setIsDragging] = useState(false) const [isProcessing, setIsProcessing] = useState(false) const [progress, setProgress] = useState(0) const [currentFile, setCurrentFile] = useState(0) const [error, setError] = useState(null) // Accept a wider range of file types const acceptedFileTypes = [ ".jpg", ".jpeg", ".png", ".bmp", ".tiff", // Images ".pdf", // PDFs ".docx", ".doc", // Word documents ".txt", // Text files ".rtf", // Rich text ] const handleDragOver = (e: React.DragEvent) => { e.preventDefault() setIsDragging(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) } const handleDrop = (e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const droppedFiles = Array.from(e.dataTransfer.files) handleFiles(droppedFiles) } const handleFileInput = (e: React.ChangeEvent) => { if (e.target.files) { const selectedFiles = Array.from(e.target.files) handleFiles(selectedFiles) } } const handleFiles = (newFiles: File[]) => { // Filter for accepted file types const validFiles = newFiles.filter((file) => { const extension = `.${file.name.split(".").pop()?.toLowerCase()}` return acceptedFileTypes.includes(extension) }) if (validFiles.length < newFiles.length) { setError( `Some files were not added because they are not supported. Supported formats: ${acceptedFileTypes.join(", ")}`, ) setTimeout(() => setError(null), 5000) } setFiles((prevFiles) => [...prevFiles, ...validFiles]) } const removeFile = (index: number) => { setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index)) } const startProcessing = async () => { if (files.length === 0) return setIsProcessing(true) setProgress(0) setCurrentFile(0) setError(null) const results: Array<{ id: number; title: string; text: string }> = [] try { // Process each file for (let i = 0; i < files.length; i++) { setCurrentFile(i) const file = files[i] setProgress((i / files.length) * 100) try { // Process the file using our cloud OCR API const result = await processFileWithCloudOCR(file) results.push({ id: i + 1, title: `File: ${file.name}`, text: result.text || "No text was detected in this file.", }) } catch (error) { console.error(`Error processing file ${file.name}:`, error) results.push({ id: i + 1, title: `File: ${file.name}`, text: `Error processing this file: ${error instanceof Error ? error.message : "Unknown error"}`, }) } } // Complete processing setProgress(100) // Trigger the display of results const event = new CustomEvent("ocr-complete", { detail: { success: true, results: results, }, }) window.dispatchEvent(event) } catch (error) { setError(`Processing failed: ${error instanceof Error ? error.message : "Unknown error"}`) console.error("Processing failed:", error) } finally { setIsProcessing(false) setFiles([]) } } // Function to process a file with our cloud OCR API const processFileWithCloudOCR = async (file: File) => { const formData = new FormData() formData.append("file", file) const response = await fetch("/api/ocr", { method: "POST", body: formData, }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to process file") } return await response.json() } return (

Drag and drop your files here

Supported formats: .pdf, .docx, .doc, .jpg, .png, .jpeg, .bmp, .tiff, .txt, .rtf

{error &&

{error}

} {files.length > 0 && (

Selected Files ({files.length})

{files.map((file, index) => (

{file.name}

))}

)} {isProcessing && (

Processing file {currentFile + 1} of {files.length} {Math.round(progress)}%

)}

) } [V0_FILE]typescriptreact:file="app/api/ocr/route.ts" import { type NextRequest, NextResponse } from "next/server" import { ImageAnnotatorClient } from "@google-cloud/vision" import mammoth from "mammoth" // Initialize the Vision client with credentials from environment variables let visionClient: ImageAnnotatorClient try { // If GOOGLE_APPLICATION_CREDENTIALS_JSON is provided as a JSON string if (process.env.GOOGLE_APPLICATION_CREDENTIALS_JSON) { const credentials = JSON.parse(process.env.GOOGLE_APPLICATION_CREDENTIALS_JSON) visionClient = new ImageAnnotatorClient({ credentials }) } // If GOOGLE_APPLICATION_CREDENTIALS points to a file else if (process.env.GOOGLE_APPLICATION_CREDENTIALS) { visionClient = new ImageAnnotatorClient({ keyFilename: process.env.GOOGLE_APPLICATION_CREDENTIALS, }) } else { console.error("No Google Cloud credentials found") } } catch (error) { console.error("Error initializing Vision client:", error) } export async function POST(req: NextRequest) { try { const formData = await req.formData() const file = formData.get("file") as File if (!file) { return NextResponse.json({ error: "No file provided" }, { status: 400 }) } // Get file type const fileType = file.type const fileName = file.name.toLowerCase() const buffer = Buffer.from(await file.arrayBuffer()) let text = "" // Process based on file type if ( fileType.startsWith("image/") || fileName.endsWith(".jpg") || fileName.endsWith(".jpeg") || fileName.endsWith(".png") || fileName.endsWith(".bmp") || fileName.endsWith(".tiff") ) { // Process image with Vision API text = await processImageWithVision(buffer) } else if (fileType === "application/pdf" || fileName.endsWith(".pdf")) { // Process PDF text = await processPdf(buffer) } else if ( fileType === "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || fileName.endsWith(".docx") ) { // Process DOCX text = await processDocx(buffer) } else if (fileType === "application/msword" || fileName.endsWith(".doc")) { // For .doc files, we'd need a different approach text = "DOC file format detected. This format requires additional processing. Please convert to DOCX for better results." } else if (fileType === "text/plain" || fileName.endsWith(".txt")) { // Process plain text text = buffer.toString("utf-8") } else { return NextResponse.json( { error: "Unsupported file type. Please upload an image, PDF, DOCX, or TXT file.", }, { status: 400 }, ) } return NextResponse.json({ text }) } catch (error) { console.error("OCR processing error:", error) return NextResponse.json( { error: `Failed to process file: ${error instanceof Error ? error.message : "Unknown error"}`, }, { status: 500 }, ) } } // Process image with Google Cloud Vision async function processImageWithVision(imageBuffer: Buffer): Promise { if (!visionClient) { throw new Error("Vision client not initialized. Check your Google Cloud credentials.") } const [result] = await visionClient.textDetection(imageBuffer) const detections = result.textAnnotations return detections && detections.length > 0 ? detections[0].description || "" : "" } // Process PDF document async function processPdf(pdfBuffer: Buffer): Promise { // Load the PDF.js library const pdfjsLib = await import("pdfjs-dist") // Set up PDF.js worker const pdfjsWorker = await import("pdfjs-dist/build/pdf.worker.entry") pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker // Load the PDF document const loadingTask = pdfjsLib.getDocument({ data: pdfBuffer }) const pdf = await loadingTask.promise let fullText = "" // Extract text from each page for (let i = 1; i <= pdf.numPages; i++) { const page = await pdf.getPage(i) const content = await page.getTextContent() const strings = content.items.map((item: any) => item.str) fullText += strings.join(" ") + "\n" } return fullText } // Process DOCX document async function processDocx(docxBuffer: Buffer): Promise { const result = await mammoth.extractRawText({ buffer: docxBuffer }) return result.value } [V0_FILE]typescriptreact:file="app/api/summarize/route.ts" import { type NextRequest, NextResponse } from "next/server" import OpenAI from "openai" // Initialize OpenAI client const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY, }) export async function POST(req: NextRequest) { try { const { text } = await req.json() if (!text || text.trim().length === 0) { return NextResponse.json({ error: "No text provided" }, { status: 400 }) } // Truncate text if it's too long (OpenAI has token limits) const truncatedText = text.length > 15000 ? text.substring(0, 15000) + "..." : text // Generate summary using OpenAI const completion = await openai.chat.completions.create({ model: "gpt-3.5-turbo", messages: [ { role: "system", content: "You are a helpful assistant that summarizes documents. Provide a concise summary that captures the main points and key information.", }, { role: "user", content: `Summarize the following text:\n\n${truncatedText}`, }, ], max_tokens: 500, }) const summary = completion.choices[0].message.content return NextResponse.json({ summary }) } catch (error) { console.error("Summarization error:", error) return NextResponse.json( { error: `Failed to generate summary: ${error instanceof Error ? error.message : "Unknown error"}`, }, { status: 500 }, ) } } [V0_FILE]typescriptreact:file="components/results-area.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Download, Loader2 } from "lucide-react" export function ResultsArea() { const [loading, setLoading] = useState(false) const [summarizing, setSummarizing] = useState(false) const [results, setResults] = useState | null>(null) const [summary, setSummary] = useState(null) const [error, setError] = useState(null) useEffect(() => { // Listen for the custom event from the FileUpload component const handleOcrComplete = ( event: CustomEvent<{ success: boolean results: Array<{ id: number; title: string; text: string }> }>, ) => { if (event.detail.success) { setLoading(true) setError(null) // Get the results from the event const { results } = event.detail // Set the OCR results setResults(results) setLoading(false) // Generate summary if we have results if (results && results.length > 0) { generateSummary(results) } } } window.addEventListener("ocr-complete", handleOcrComplete as EventListener) return () => { window.removeEventListener("ocr-complete", handleOcrComplete as EventListener) } }, []) // Function to generate a summary using the API const generateSummary = async (results: Array<{ id: number; title: string; text: string }>) => { setSummarizing(true) setError(null) try { // Combine all text from results const combinedText = results.map((result) => result.text).join("\n\n") // Call the summarize API const response = await fetch("/api/summarize", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ text: combinedText }), }) if (!response.ok) { const errorData = await response.json() throw new Error(errorData.error || "Failed to generate summary") } const data = await response.json() setSummary(data.summary) } catch (error) { console.error("Error generating summary:", error) setError(`Failed to generate summary: ${error instanceof Error ? error.message : "Unknown error"}`) // Set a basic summary as fallback setSummary( `This document contains ${results.length} processed files. A detailed AI summary could not be generated.`, ) } finally { setSummarizing(false) } } const handleDownload = () => { if (!results) return // Create text content let content = "OCR + Document Summarization Results\n\n" results.forEach((result) => { content += `${result.title}\n${"=".repeat(result.title.length)}\n` content += `${result.text}\n\n` }) if (summary) { content += "Summary of Document\n==================\n" content += summary } // Create and download file const blob = new Blob([content], { type: "text/plain" }) const url = URL.createObjectURL(blob) const a = document.createElement("a") a.href = url a.download = "ocr-results.txt" document.body.appendChild(a) a.click() document.body.removeChild(a) URL.revokeObjectURL(url) } if (loading) { return (

Processing your document...

This may take a few moments

) } if (!results) { return null } return (

Results

{error &&

{error}

}

{results.map((result) => ( {result.title}

{result.text}

))} Summary of Document {summarizing && } {summarizing ? (

Generating summary...

) : (

{summary || "No summary available."}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" import { FileUpload } from "@/components/file-upload" import { ResultsArea } from "@/components/results-area" export default function Home() { return (

OCR + Document Summarizer

Extract text from images and documents, then get an AI-generated summary

Cloud-Based OCR: This application uses Google Cloud Vision API for image OCR and processes PDFs and Word documents. For best results, use clear images and well-formatted documents.

) }