__init__.py

[![GitHub Sponsors](https://img.shields.io/badge/Sponsor-GitHub-pink?logo=githubsponsors)](https://github.com/sponsors/Kuju29)

*Note: ผมทำอีกโปรเจคอยู่ เดี๋ยวกลับมาอัพเดตแก้ปัญหาที่มีอยู่ครับ มันต้องไปแก้ตั้งแต่การแกะโครงสร้างเวลา ai แปลเลยต้องรอให้ว่างจริงๆ อัพเดตรอบต่อไปจะใช้ claude ai โค๊ดขยะน่าจะน้อยลงและเป็นมิตรกับระบบมากขึ้น* 

![Desktop2026 02 06-08 11 52 01-ezgif com-video-to-gif-converter](https://github.com/user-attachments/assets/43cc9a1e-eb79-46f0-b4a1-08ca9bcd49f5)

# ✨ TextPhantomOCR Overlay 
[![Installation](https://img.shields.io/badge/-Installation-red.svg?logo=youtube&labelColor=555555&style=for-the-badge)](https://www.youtube.com/watch?v=WQ7p7zsz_kc "Installation Guide") [![Run API Online](https://img.shields.io/badge/-Run_API_Online-blue.svg?logo=youtube&labelColor=555555&style=for-the-badge)](https://www.youtube.com/watch?v=NMHwaI8mn4c "Run API Online")

## 📥 Download & Install Options

| Version  | Extension Download | API Download | Note |
|----------|-------------------|--------------|------|
| [Chrome Web Store](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb) | [![Install Extension](https://img.shields.io/badge/Install%20from-Chrome%20Web%20Store-yellow?logo=googlechrome)](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb) | [![Run API from Hugging Face](https://img.shields.io/badge/Run%20API%20from-Hugging%20Face-blue?logo=huggingface)](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main) | Easiest option, but still requires API |
| **[v3.0.0](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/v3.0.0)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/heads/main.zip) | [![Run API from Hugging Face](https://img.shields.io/badge/Run%20API%20from-Hugging%20Face-blue?logo=huggingface)](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main) | Manual install |
| **[v2.0.2](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/backup_V2.0.2)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/heads/main.zip) | [![Download API](https://img.shields.io/badge/Download-API%20v2.0.2-blue?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/releases/tag/v2.0.2) | Manual install |
| **[v1.0.1](https://github.com/Kuju29/TextPhantomOCR_Overlay/tree/v1.0.1)** | [![Install Extension](https://img.shields.io/badge/Download%20ZIP%20from-Source%20Code-yellow?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/archive/refs/tags/v1.0.1.zip) | [![Download API](https://img.shields.io/badge/Download-API%20v1.0.1-blue?logo=github)](https://github.com/Kuju29/TextPhantomOCR_Overlay/releases/tag/v1.0.1) | Manual install |

## 🧩 1. Extension Installation

#### **Option – Chrome Web Store**
1. Install from [Chrome Web Store](https://chromewebstore.google.com/detail/cjbaepobgmickhgebgagklfcfacbbpem?utm_source=item-share-cb).  

#### **Option – Manual Install**
1. Download and extract the **Source Code** for your version.  
2. Open Chrome → Go to `chrome://extensions/`.  
3. Enable **Developer Mode** (top right).  
4. Click **Load unpacked**.  
5. Select the extracted folder.  

## 🌐 2. Using the API on Hugging Face (Run API for v3.0.0)
1. Go to: [https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main](https://huggingface.co/spaces/plan291037/TextPhantom_OCR_API2/tree/main)
2. Click the **three dots** in the top-right and select **Duplicate this Space**.
3. The build will start automatically — wait until you see **Running**.
4. Click the **three dots** again and choose **Embed this Space**.
5. Copy the link and use it in your API extension.

**Notes:**
* If unused, the Space will shut down automatically within 48 hours.
* To stop it manually, go to **Settings** and click the small **Pause Space** link.
* This API works only in **images** mode.

## 🖱️ 3. Getting Started with the Extension
  - Navigate to the page you want to translate.  
  - **Right-click** anywhere → choose **🔍 Translate...** from the context menu.

## 🤖 Free AI Option (Hugging Face – Google Gemma)

TextPhantom can use **Google Gemma** models via Hugging Face.  
This option is **free to start** (you use your own Hugging Face API key).


#### Step 1: Enable Access to Gemma Model

Google Gemma models require accepting a license before use.

1. Log in to Hugging Face  
   https://huggingface.co/login

2. Open the model page  
   https://huggingface.co/google/gemma-3-27b-it

3. Click **“Agree and access”** (or **“Request access”**)

4. Wait for approval (usually a few minutes)

> You only need to do this **once per account**.


#### Step 2: Create a Hugging Face API Key

This API key will be used by TextPhantom to call the AI model.

1. Go to  
   https://huggingface.co/settings/tokens

2. Click **New token**

3. Set:
   - **Name**: `textphantom-ai`
   - **Role**: `Read`

4. Create the token and **copy it**
5. Required Token Permissions
When creating your Hugging Face API key, make sure the following permissions are enabled:

- ✅ **Read access to contents of all public gated repos you can access**  
  Required to use gated models such as **Google Gemma**.


## 🖼️ DEMO / UI PREVIEW

<p align="center">
  <img src="https://github.com/user-attachments/assets/52135c1a-ba52-46e7-9174-9fdd1cc6b26d" width="40%" alt="UI Preview" />
  <br><br>
  <img src="https://github.com/user-attachments/assets/6f7beaad-2f92-48bc-a8ef-776a0886a8eb" width="40%" alt="UI Preview" />
  <br><br>
  <img src="https://github.com/user-attachments/assets/998e8a9e-ae27-4911-9e59-aef28245f60c" width="100%" alt="Example 1" />
  <br><br>
  <img src="https://github.com/user-attachments/assets/205a97d9-718d-4599-8511-ccf63e30691f" width="100%" alt="Example 2" />
  <br><br>
  <img src="https://github.com/user-attachments/assets/92427293-8ec7-40c3-b797-a2b27fedb8a6" width="100%" alt="Example 3" />
</p>