Update index.html

index.html

@@ -94,7 +94,6 @@
 
     let selectedFile = null;
 
-    // 1. Xử lý khi người dùng chọn ảnh
     fileInput.addEventListener('change', function(e) {
         const file = e.target.files[0];
         if (file) {
@@ -104,52 +103,51 @@
                 imagePreview.src = event.target.result;
                 imagePreview.style.display = 'block';
                 uploadText.style.display = 'none';
-                submitBtn.disabled = false; // Mở khóa nút bấm
+                submitBtn.disabled = false;
             }
             reader.readAsDataURL(file);
         }
     });
 
-    // 2. Xử lý khi bấm nút "Trích xuất văn bản"
     submitBtn.addEventListener('click', async function() {
         if (!selectedFile) return;
 
-        // Chuẩn bị giao diện chờ
         submitBtn.disabled = true;
         loading.style.display = 'block';
         resultBox.style.display = 'none';
         resultBox.innerHTML = '';
 
-        // Đóng gói ảnh vào FormData
         const formData = new FormData();
         formData.append('file', selectedFile);
 
         try {
-            // Thay "YOUR_API_URL_HERE" bằng đường dẫn API backend thật của bạn
-            // Ví dụ: "https://ranbac-ocr.hf.space/predict"
-            const response = await fetch('/predict', {
+            // 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";
+
+            const response = await fetch(apiUrl, {
                 method: 'POST',
                 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) {
-                throw new Error("Lỗi kết nối đến máy chủ API");
+                const errorData = await response.json();
+                throw new Error(errorData.detail || `Lỗi máy chủ (Mã: ${response.status})`);
             }
 
             const data = await response.json();
-            
-            // Giả sử backend trả về JSON có cấu trúc: { "text": "Nội dung nhận diện được..." }
-            // Bạn cần điều chỉnh 'data.text' theo đúng key mà Python trả về
             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";
         } finally {
-            // Hoàn tất, tắt trạng thái chờ
             loading.style.display = 'none';
             submitBtn.disabled = false;
         }