Spaces:

Antharee
/

Typhoon_OCR_7B

Runtime error

App Files Files Community

Antharee commited on Jul 21

Commit

35e6335

verified ·

1 Parent(s): e99c4a3

Upload 7 files

Browse files

Files changed (7) hide show

.env +1 -0
README.md +0 -12
app.py +49 -0
example.jpg +0 -0
requirements.txt +6 -0
static/uploads/ThaiIDCard_Mr._Sample500x500.jpg +0 -0
templates/index.html +411 -0

.env ADDED Viewed

	@@ -0,0 +1 @@


1	+ HUGGINGFACE_TOKEN=your_token_here

README.md CHANGED Viewed

@@ -1,12 +0,0 @@
----
-title: Typhoon OCR 7B
-emoji: 💻
-colorFrom: gray
-colorTo: yellow
-sdk: gradio
-sdk_version: 5.38.0
-app_file: app.py
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py ADDED Viewed

	@@ -0,0 +1,49 @@

+import os
+import torch
+from flask import Flask, render_template, request
+from transformers import AutoProcessor, AutoModelForVision2Seq
+from PIL import Image
+from dotenv import load_dotenv
+# โหลด token
+load_dotenv()
+token = os.getenv("HUGGINGFACE_TOKEN")
+if not token:
+    raise ValueError("HUGGINGFACE_TOKEN is not set or .env file not loaded")
+# Flask setup
+app = Flask(__name__)
+UPLOAD_FOLDER = "static/uploads"
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+# โหลดโมเดลและ processor
+processor = AutoProcessor.from_pretrained("scb10x/typhoon-ocr-7b", token=token)
+model = AutoModelForVision2Seq.from_pretrained(
+    "scb10x/typhoon-ocr-7b",
+    torch_dtype=torch.float16,
+    device_map="auto",
+    token=token
+)
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    result_text = ""
+    image_path = ""
+    if request.method == 'POST':
+        file = request.files['image']
+        if file:
+            filepath = os.path.join(app.config['UPLOAD_FOLDER'], file.filename)
+            file.save(filepath)
+            image_path = filepath
+            image = Image.open(filepath).convert("RGB")
+            pixel_values = processor(images=image, return_tensors="pt").pixel_values.to(model.device)
+            generated_ids = model.generate(pixel_values, max_new_tokens=256)
+            result_text = processor.batch_decode(generated_ids, skip_special_tokens=True)[0]
+    return render_template("index.html", result=result_text, image_path=image_path)
+if __name__ == '__main__':
+    app.run(debug=True)

example.jpg ADDED Viewed

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+Flask
+transformers>=4.40.0
+torch>=2.0
+Pillow
+python-dotenv
+accelerate

static/uploads/ThaiIDCard_Mr._Sample500x500.jpg ADDED Viewed

templates/index.html ADDED Viewed

	@@ -0,0 +1,411 @@

+<!DOCTYPE html>
+<html lang="th">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Typhoon OCR Web - ระบบแปลงภาพเป็นข้อความ</title>
+    <link
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+        line-height: 1.6;
+      }
+      .container {
+        background: rgba(255, 255, 255, 0.95);
+        backdrop-filter: blur(20px);
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        padding: 40px;
+        max-width: 800px;
+        width: 100%;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+      }
+      .header {
+        text-align: center;
+        margin-bottom: 40px;
+      }
+      .header h1 {
+        color: #2c3e50;
+        font-size: 2.5rem;
+        font-weight: 700;
+        margin-bottom: 10px;
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+      }
+      .header p {
+        color: #7f8c8d;
+        font-size: 1.1rem;
+        font-weight: 400;
+      }
+      .upload-section {
+        background: #f8f9fa;
+        border-radius: 15px;
+        padding: 30px;
+        margin-bottom: 30px;
+        border: 2px dashed #e9ecef;
+        transition: all 0.3s ease;
+        text-align: center;
+      }
+      .upload-section:hover {
+        border-color: #667eea;
+        background: #f1f3f9;
+        transform: translateY(-2px);
+      }
+      .file-input-wrapper {
+        position: relative;
+        display: inline-block;
+        width: 100%;
+      }
+      .file-input {
+        opacity: 0;
+        position: absolute;
+        z-index: -1;
+      }
+      .file-input-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 12px;
+        background: linear-gradient(135deg, #667eea, #764ba2);
+        color: white;
+        padding: 15px 30px;
+        border-radius: 12px;
+        border: none;
+        font-size: 1.1rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+      }
+      .file-input-button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
+      }
+      .upload-info {
+        margin-top: 20px;
+        color: #6c757d;
+        font-size: 0.95rem;
+      }
+      .submit-btn {
+        background: linear-gradient(135deg, #28a745, #20c997);
+        color: white;
+        border: none;
+        padding: 15px 40px;
+        border-radius: 12px;
+        font-size: 1.1rem;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
+        margin-top: 20px;
+      }
+      .submit-btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
+      }
+      .submit-btn:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+        transform: none;
+      }
+      .result-section {
+        margin-top: 30px;
+      }
+      .section-title {
+        color: #2c3e50;
+        font-size: 1.4rem;
+        font-weight: 600;
+        margin-bottom: 20px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .uploaded-image {
+        background: #f8f9fa;
+        border-radius: 15px;
+        padding: 20px;
+        margin-bottom: 30px;
+        text-align: center;
+        border: 1px solid #e9ecef;
+      }
+      .uploaded-image img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 12px;
+        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease;
+      }
+      .uploaded-image img:hover {
+        transform: scale(1.02);
+      }
+      .text-result {
+        background: #f8f9fa;
+        border-radius: 15px;
+        padding: 25px;
+        border: 1px solid #e9ecef;
+      }
+      .result-textarea {
+        width: 100%;
+        min-height: 200px;
+        border: 2px solid #e9ecef;
+        border-radius: 12px;
+        padding: 20px;
+        font-family: "Courier New", monospace;
+        font-size: 0.95rem;
+        line-height: 1.6;
+        background: white;
+        resize: vertical;
+        transition: border-color 0.3s ease;
+      }
+      .result-textarea:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+      .copy-btn {
+        background: #6c757d;
+        color: white;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 8px;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        margin-top: 15px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .copy-btn:hover {
+        background: #5a6268;
+        transform: translateY(-1px);
+      }
+      .loading {
+        display: none;
+        text-align: center;
+        color: #667eea;
+        font-weight: 500;
+        margin: 20px 0;
+      }
+      .loading i {
+        animation: spin 1s linear infinite;
+        margin-right: 10px;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      .file-name {
+        margin-top: 15px;
+        padding: 10px;
+        background: rgba(102, 126, 234, 0.1);
+        border-radius: 8px;
+        color: #667eea;
+        font-weight: 500;
+        display: none;
+      }
+      @media (max-width: 768px) {
+        .container {
+          padding: 30px 20px;
+        }
+        .header h1 {
+          font-size: 2rem;
+        }
+        .upload-section {
+          padding: 20px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <h1><i class="fas fa-eye"></i> Typhoon OCR</h1>
+        <p>ระบบแปลงภาพเป็นข้อความด้วยปัญญาประดิษฐ์</p>
+      </div>
+      <form method="POST" enctype="multipart/form-data" id="ocrForm">
+        <div class="upload-section">
+          <div class="file-input-wrapper">
+            <input
+              type="file"
+              name="image"
+              accept="image/*"
+              required
+              class="file-input"
+              id="imageInput"
+            />
+            <label for="imageInput" class="file-input-button">
+              <i class="fas fa-cloud-upload-alt"></i>
+              เลือกไฟล์ภาพ
+            </label>
+          </div>
+          <div class="file-name" id="fileName"></div>
+          <div class="upload-info">
+            <i class="fas fa-info-circle"></i>
+            รองรับไฟล์: JPG, PNG, GIF, BMP | ขนาดสูงสุด: 10MB
+          </div>
+          <button type="submit" class="submit-btn" id="submitBtn" disabled>
+            <i class="fas fa-magic"></i>
+            แปลงภาพเป็นข้อความ
+          </button>
+        </div>
+      </form>
+      <div class="loading" id="loading">
+        <i class="fas fa-spinner"></i>
+        กำลังประมวลผลภาพ กรุณารอสักครู่...
+      </div>
+      {% if image_path %}
+      <div class="result-section">
+        <h3 class="section-title">
+          <i class="fas fa-image"></i>
+          ภาพที่อัปโหลด
+        </h3>
+        <div class="uploaded-image">
+          <img src="{{ image_path }}" alt="Uploaded Image" />
+        </div>
+      </div>
+      {% endif %} {% if result %}
+      <div class="result-section">
+        <h3 class="section-title">
+          <i class="fas fa-file-text"></i>
+          ข้อความที่ตรวจจับได้
+        </h3>
+        <div class="text-result">
+          <textarea class="result-textarea" readonly id="resultText">
+{{ result }}</textarea
+          >
+          <button class="copy-btn" onclick="copyToClipboard()">
+            <i class="fas fa-copy"></i>
+            คัดลอกข้อความ
+          </button>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+    <script>
+      const imageInput = document.getElementById("imageInput");
+      const fileName = document.getElementById("fileName");
+      const submitBtn = document.getElementById("submitBtn");
+      const ocrForm = document.getElementById("ocrForm");
+      const loading = document.getElementById("loading");
+      imageInput.addEventListener("change", function (e) {
+        if (e.target.files.length > 0) {
+          const file = e.target.files[0];
+          fileName.textContent = `ไฟล์ที่เลือก: ${file.name}`;
+          fileName.style.display = "block";
+          submitBtn.disabled = false;
+        } else {
+          fileName.style.display = "none";
+          submitBtn.disabled = true;
+        }
+      });
+      ocrForm.addEventListener("submit", function () {
+        loading.style.display = "block";
+        submitBtn.disabled = true;
+        submitBtn.innerHTML =
+          '<i class="fas fa-spinner fa-spin"></i> กำลังประมวลผล...';
+      });
+      function copyToClipboard() {
+        const resultText = document.getElementById("resultText");
+        resultText.select();
+        document.execCommand("copy");
+        const copyBtn = document.querySelector(".copy-btn");
+        const originalText = copyBtn.innerHTML;
+        copyBtn.innerHTML = '<i class="fas fa-check"></i> คัดลอกแล้ว!';
+        copyBtn.style.background = "#28a745";
+        setTimeout(() => {
+          copyBtn.innerHTML = originalText;
+          copyBtn.style.background = "#6c757d";
+        }, 2000);
+      }
+      // Drag and drop functionality
+      const uploadSection = document.querySelector(".upload-section");
+      uploadSection.addEventListener("dragover", function (e) {
+        e.preventDefault();
+        uploadSection.style.borderColor = "#667eea";
+        uploadSection.style.background = "#f1f3f9";
+      });
+      uploadSection.addEventListener("dragleave", function (e) {
+        e.preventDefault();
+        uploadSection.style.borderColor = "#e9ecef";
+        uploadSection.style.background = "#f8f9fa";
+      });
+      uploadSection.addEventListener("drop", function (e) {
+        e.preventDefault();
+        uploadSection.style.borderColor = "#e9ecef";
+        uploadSection.style.background = "#f8f9fa";
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+          imageInput.files = files;
+          const event = new Event("change", { bubbles: true });
+          imageInput.dispatchEvent(event);
+        }
+      });
+    </script>
+  </body>
+</html>