ek-developers/ocr-frontend

1---2title: DeepSeek OCR — Frontend3emoji: 🖼️4colorFrom: blue5colorTo: indigo6sdk: gradio7sdk_version: 6.6.08app_file: app.py9pinned: false10---11 12# 🖼️ DeepSeek OCR — Frontend13 14A clean, professional Gradio frontend for the [DeepSeek OCR API](https://huggingface.co/spaces/ek-developers/my-ocr-api). Upload any image, write a custom prompt, and extract text in seconds — no setup required.15 16> This Space is a **frontend only**. All OCR processing is handled by the [backend API Space](https://huggingface.co/spaces/ek-developers/my-ocr-api) powered by DeepSeek-OCR via Ollama.17 18---19 20## 🔗 Related Spaces21 22| Space | Role | URL |23|---|---|---|24| **This Space** | Gradio UI frontend | `ek-developers/ocr-frontend` |25| **Backend API** | FastAPI + DeepSeek-OCR | `ek-developers/my-ocr-api` |26 27---28 29## ✨ Features30 31- **Image upload** — drag and drop, click to browse, or paste from clipboard32- **Custom prompts** — guide the model with natural language instructions33- **Auto-run on upload** — OCR triggers automatically when an image is dropped in34- **Copy to clipboard** — one-click copy of extracted text with confirmation feedback35- **Example prompts** — pre-built prompts for common use cases36- **Live API status** — shows backend connection and endpoint URL37- **Responsive layout** — two-column design with input on the left, output on the right38 39---40 41## 🖥️ Interface Overview42 43```44┌─────────────────────────────────────────────────────┐45│              DeepSeek OCR                           │46│      Powered by DeepSeek · Ollama                   │47├────────────────────┬────────────────────────────────┤48│  01 · INPUT        │  02 · EXTRACTED TEXT           │49│                    │                                 │50│  [ Image Upload ]  │  ● API CONNECTED               │51│                    │                                 │52│  [ Prompt Input ]  │  [ Result Textbox         ]    │53│                    │                                 │54│  [▶ RUN] [✕ CLEAR] │  [ ⎘ COPY TEXT ]               │55├────────────────────┴────────────────────────────────┤56│  Example Prompts                                    │57└─────────────────────────────────────────────────────┘58```59 60---61 62## 🚀 Usage63 64### Step 1 — Upload an image65Drag and drop an image onto the upload panel, click to browse your files, or paste directly from clipboard. Supported formats: JPG, PNG, WEBP, and other common image types.66 67### Step 2 — Set your prompt68The default prompt is `Free OCR.` which extracts all visible text. You can customize it to get more targeted results:69 70| Prompt | What it does |71|---|---|72| `Free OCR.` | Extract all visible text |73| `Extract all menu items and prices.` | Structured menu extraction |74| `Extract only the grand total.` | Receipt total only |75| `List all ingredients on the label.` | Product label parsing |76| `Read the text on this sign.` | Signage and banners |77| `Extract the table contents.` | Tabular data |78 79### Step 3 — Run OCR80Click **▶ RUN OCR** or simply upload an image — OCR runs automatically on upload.81 82### Step 4 — Copy the result83Click **⎘ COPY TEXT** to copy the extracted text to your clipboard. A green confirmation message appears for 2 seconds.84 85---86 87## ⚙️ Configuration88 89### Changing the backend API URL90 91By default the frontend points to:92```93https://ek-developers-my-ocr-api.hf.space/ocr94```95 96To point it at a different backend, set the `OCR_API_URL` environment variable in your Space settings:97 981. Go to your Space → **Settings** → **Variables and secrets**992. Add a new variable:100   - **Name:** `OCR_API_URL`101   - **Value:** `https://your-backend-space.hf.space/ocr`102 103---104 105## 📁 Project Structure106 107```108├── app.py           # Gradio UI and API call logic109├── requirements.txt # Python dependencies110└── README.md        # Documentation111```112 113### `app.py` — key sections114 115| Section | Description |116|---|---|117| `API_URL` | Backend endpoint, overridable via env var |118| `run_ocr()` | Sends image + prompt to the FastAPI backend, handles errors |119| `css` | Custom styling — IBM Plex fonts, blue accent palette |120| `gr.Blocks(...)` | UI layout — two-column input/output panels |121| `copy_btn.click(...)` | JavaScript clipboard handler |122| `image_input.upload(...)` | Auto-triggers OCR when image is uploaded |123 124---125 126## 🛠️ Local Development127 128### Prerequisites129- Python 3.10+130- The [backend API](https://huggingface.co/spaces/ek-developers/my-ocr-api) running (locally or on HF)131 132### Setup133 134```bash135# Clone the Space136git clone https://huggingface.co/spaces/YOUR_USERNAME/ocr-frontend137cd ocr-frontend138 139# Install dependencies140pip install -r requirements.txt141 142# Optional: point at a local backend143export OCR_API_URL=http://localhost:7860/ocr144 145# Run146python app.py147```148 149The app will be available at `http://localhost:7860`.150 151---152 153## 📦 Dependencies154 155```156gradio>=6.6.0157requests158```159 160---161 162## ⚠️ Notes163 164**Cold starts** — the backend Space sleeps after ~15 minutes of inactivity on the free tier. The first request after inactivity may take 1–2 minutes while the model reloads. The frontend will show a timeout message — simply wait 30 seconds and try again.165 166**Image quality** — OCR accuracy depends on image clarity. For best results:167- Use high-resolution images (300 DPI or above for documents)168- Ensure text is not skewed or heavily shadowed169- Avoid images with very low contrast between text and background170 171**Clipboard permissions** — the copy button uses the browser's native clipboard API. If it does not work, ensure your browser has clipboard permissions enabled for the page.172 173---174 175## 📄 License176 177MIT License — free to use, modify, and deploy.