Spaces:

ranbac
/

OCR

Running

App Files Files Community

ranbac commited on 11 days ago

Commit

6febbd4

verified ·

1 Parent(s): c5240fd

Update index.html

Browse files

Files changed (1) hide show

index.html +38 -8

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Trích xuất văn bản bằng PaddleOCR</title>
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -23,6 +23,27 @@
             text-align: center;
         }
         h2 { color: #333; margin-bottom: 20px; }
         .upload-area {
             border: 2px dashed #ccc;
             padding: 20px;
@@ -30,6 +51,7 @@
             cursor: pointer;
             margin-bottom: 20px;
             transition: 0.3s;
         }
         .upload-area:hover { border-color: #007bff; background: #f8fbff; }
         input[type="file"] { display: none; }
@@ -60,9 +82,10 @@
             border-radius: 8px;
             text-align: left;
             min-height: 80px;
-            white-space: pre-wrap; /* Giữ nguyên xuống dòng của text */
             word-wrap: break-word;
             display: none;
         }
         .loading { display: none; margin-top: 15px; color: #666; font-style: italic; }
     </style>
@@ -70,7 +93,15 @@
 <body>
 <div class="container">
-    <h2>Nhận dạng văn bản (OCR)</h2>
     <label class="upload-area" for="fileInput">
         <div id="uploadText">Click để chọn ảnh hoặc Kéo thả ảnh vào đây</div>
@@ -80,7 +111,7 @@
     <button id="submitBtn" disabled>Trích xuất văn bản</button>
-    <div id="loading" class="loading">Đang xử lý ảnh, vui lòng đợi...</div>
     <div id="resultBox" class="result-box"></div>
 </div>
@@ -91,6 +122,7 @@
     const submitBtn = document.getElementById('submitBtn');
     const resultBox = document.getElementById('resultBox');
     const loading = document.getElementById('loading');
     let selectedFile = null;
@@ -119,9 +151,9 @@
         const formData = new FormData();
         formData.append('file', selectedFile);
         try {
-            // Tự động lấy đúng tên miền của Space hiện tại để gọi API
             const currentUrl = window.location.href.split('?')[0].replace(/\/$/, "");
             const apiUrl = currentUrl + "/predict";
@@ -130,7 +162,6 @@
                 body: formData
             });
-            // Nếu Backend báo lỗi, bóc tách lỗi chi tiết từ Python gửi về
             if (!response.ok) {
                 const errorData = await response.json();
                 throw new Error(errorData.detail || `Lỗi máy chủ (Mã: ${response.status})`);
@@ -139,11 +170,10 @@
             const data = await response.json();
             resultBox.innerText = data.text || "Không tìm thấy chữ trong ảnh.";
             resultBox.style.display = 'block';
-            resultBox.style.color = "#333"; // Màu chữ bình thường
         } catch (error) {
             console.error(error);
-            // In lỗi chính xác ra màn hình
             resultBox.innerText = "Đã xảy ra lỗi: " + error.message;
             resultBox.style.display = 'block';
             resultBox.style.color = "red";

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Trích xuất văn bản Đa Ngôn Ngữ</title>
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             text-align: center;
         }
         h2 { color: #333; margin-bottom: 20px; }
+        /* Style cho phần chọn ngôn ngữ */
+        .lang-selector {
+            margin-bottom: 20px;
+            text-align: left;
+        }
+        .lang-selector label {
+            font-weight: 600;
+            color: #555;
+            display: block;
+            margin-bottom: 8px;
+        }
+        .lang-selector select {
+            width: 100%;
+            padding: 10px;
+            border-radius: 6px;
+            border: 1px solid #ccc;
+            font-size: 16px;
+            outline: none;
+        }
         .upload-area {
             border: 2px dashed #ccc;
             padding: 20px;
             cursor: pointer;
             margin-bottom: 20px;
             transition: 0.3s;
+            display: block;
         }
         .upload-area:hover { border-color: #007bff; background: #f8fbff; }
         input[type="file"] { display: none; }
             border-radius: 8px;
             text-align: left;
             min-height: 80px;
+            white-space: pre-wrap;
             word-wrap: break-word;
             display: none;
+            border-left: 4px solid #007bff;
         }
         .loading { display: none; margin-top: 15px; color: #666; font-style: italic; }
     </style>
 <body>
 <div class="container">
+    <h2>Nhận dạng văn bản (AI OCR)</h2>
+    <div class="lang-selector">
+        <label for="langSelect">Chọn ngôn ngữ trên ảnh:</label>
+        <select id="langSelect">
+            <option value="vi">🇻🇳 Tiếng Việt (+ Tiếng Anh)</option>
+            <option value="zh">🇨🇳 Tiếng Trung Giản Thể (+ Tiếng Anh)</option>
+        </select>
+    </div>
     <label class="upload-area" for="fileInput">
         <div id="uploadText">Click để chọn ảnh hoặc Kéo thả ảnh vào đây</div>
     <button id="submitBtn" disabled>Trích xuất văn bản</button>
+    <div id="loading" class="loading">Đang phân tích ảnh, vui lòng đợi...</div>
     <div id="resultBox" class="result-box"></div>
 </div>
     const submitBtn = document.getElementById('submitBtn');
     const resultBox = document.getElementById('resultBox');
     const loading = document.getElementById('loading');
+    const langSelect = document.getElementById('langSelect'); // Lấy biến ngôn ngữ
     let selectedFile = null;
         const formData = new FormData();
         formData.append('file', selectedFile);
+        formData.append('lang', langSelect.value); // Gửi thêm ngôn ngữ xuống Backend
         try {
             const currentUrl = window.location.href.split('?')[0].replace(/\/$/, "");
             const apiUrl = currentUrl + "/predict";
                 body: formData
             });
             if (!response.ok) {
                 const errorData = await response.json();
                 throw new Error(errorData.detail || `Lỗi máy chủ (Mã: ${response.status})`);
             const data = await response.json();
             resultBox.innerText = data.text || "Không tìm thấy chữ trong ảnh.";
             resultBox.style.display = 'block';
+            resultBox.style.color = "#333";
         } catch (error) {
             console.error(error);
             resultBox.innerText = "Đã xảy ra lỗi: " + error.message;
             resultBox.style.display = 'block';
             resultBox.style.color = "red";