DevelopmentT/background-remover

1# AI OCR & Image Processing Server 🚀2 3This backend provides industrial-grade image preprocessing, background removal, and high-performance text extraction (OCR) using `PaddleOCR` and `OpenCV`. 4 5It is designed to be easily integrated into any Frontend (React, Vue, React Native) or NPM Package via **WebSockets** for real-time streaming or standard **REST APIs**.6 7## 🌍 Base URLs8- **Local Development**: `http://127.0.0.1:7860` or `localhost:7860`9- **WebSocket Base**: `ws://127.0.0.1:7860`10- **Production (Hugging Face)**: `https://[your-space-name].hf.space`11 12---13 14## 1. ⚡ WebSocket OCR API (Recommended)15This is the preferred method for real-time applications. It streams the text line-by-line back to the client as the AI processes the image, providing a "live typing" effect without making the user wait.16 17- **Endpoint**: `/ws/ocr?user_id={unique_id}`18- **Method**: `WebSocket`19- **Input Payload**: Raw Binary File (ArrayBuffer) or Base64 Encoded Image.20 21### ✅ Frontend Integration Example (Vanilla JS / React)22 23```javascript24// 1. Initialize WebSocket Connection25const userId = "user_" + Math.random().toString(36).substring(7);26const ws = new WebSocket(`ws://localhost:7860/ws/ocr?user_id=${userId}`);27 28// 2. Listen for Server Events29ws.onmessage = (event) => {30    const data = JSON.parse(event.data);31    32    switch (data.event) {33        case "status":34            console.log("Server Status:", data.message);35            // e.g., "Preprocessing image...", "Extracting text..."36            break;37            38        case "ocr_chunk":39            console.log("Found Line:", data.text);40            console.log("Confidence:", data.confidence);41            // Append `data.text` to your UI state here for live streaming42            break;43            44        case "ocr_complete":45            console.log("Final Full Document Text:\n", data.full_text);46            break;47            48        case "error":49            console.error("Server Error:", data.message);50            break;51    }52};53 54// 3. Send Image File via Input55const uploadImage = (file) => {56    const reader = new FileReader();57    reader.onload = (event) => {58        // Send the raw ArrayBuffer to the WebSocket server59        ws.send(event.target.result); 60    };61    reader.readAsArrayBuffer(file);62};63```64 65---66 67## 2. 🌐 REST OCR API (Fallback)68Use this if WebSockets are not an option. It waits for the entire image to be processed and returns the full JSON result at once.69 70- **Endpoint**: `/api/ocr`71- **Method**: `POST`72- **Headers**: `multipart/form-data`73- **Body**: `file` (Image File)74 75### ✅ Frontend Integration Example (Fetch API)76 77```javascript78const processImageOCR = async (file) => {79    const formData = new FormData();80    formData.append("file", file);81 82    try {83        const response = await fetch("http://localhost:7860/api/ocr", {84            method: "POST",85            body: formData,86        });87        88        if (!response.ok) throw new Error("Upload failed");89 90        const data = await response.json();91        92        console.log("Total Lines Detected:", data.total_lines);93        console.log("Full Text:", data.full_text);94        95        // Detailed bounding boxes and individual lines96        data.lines.forEach(line => {97            console.log(`Text: ${line.text} | Confidence: ${line.confidence}`);98        });99 100    } catch (error) {101        console.error("Error calling OCR API:", error);102    }103};104```105 106### Response Structure (JSON):107```json108{109  "filename": "prescription.jpg",110  "total_lines": 2,111  "lines": [112    {113      "text": "Paracetamol 500mg",114      "confidence": 0.985,115      "bbox": [[10, 20], [100, 20], [100, 40], [10, 40]]116    },117    {118      "text": "Take 2 times a day.",119      "confidence": 0.912,120      "bbox": [[12, 45], [105, 45], [105, 60], [12, 60]]121    }122  ],123  "full_text": "Paracetamol 500mg\nTake 2 times a day."124}125```126 127---128 129## 3. 🖼️ Background Removal REST API130Removes the background of any image and returns a transparent PNG using `rembg (U2NET)`.131 132- **Endpoint**: `/api/remove-bg`133- **Method**: `POST`134- **Headers**: `multipart/form-data`135- **Body**: `file` (Image File)136 137### ✅ Frontend Integration Example138 139```javascript140const removeBackground = async (file) => {141    const formData = new FormData();142    formData.append("file", file);143 144    const response = await fetch("http://localhost:7860/api/remove-bg", {145        method: "POST",146        body: formData,147    });148 149    // The response is a raw PNG blob!150    const blob = await response.blob();151    const imageUrl = URL.createObjectURL(blob);152    153    // Display in an <img> tag154    document.getElementById("myImage").src = imageUrl;155};156```157 158---159 160## ⚙️ Advanced Image Preprocessing161Every image sent to the OCR endpoints automatically goes through an **Industrial-Level Processing Pipeline** before text extraction. This ensures highly accurate results even on low-quality camera scans.162 1631. **Smart Upscaling**: Low-res images (<1200px) are interpolated using `cv2.INTER_CUBIC` to improve readability.1642. **NL-Means Denoising**: Removes static/grain from the camera sensor without blurring text edges.1653. **CLAHE**: Adaptive Contrast Enhancement resolves dark corners and shadows.1664. **Unsharp Masking**: Text edges are sharpened dynamically so OCR engines can differentiate closely spaced letters.167 168 169- **HUGGINGFACE SPACES & github**170## git push hf main