Hugging Face's logo

Spaces:
ranbac
/
OCR
Running

App Files Community
ranbac commited on
Commit
f5a608d
·
verified ·
1 Parent(s): c82e9cb

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +160 -0
index.html ADDED
@@ -0,0 +1,160 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="vi">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Trích xuất văn bản bằng PaddleOCR</title>
7
+ <style>
8
+ body {
9
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10
+ background-color: #f0f2f5;
11
+ display: flex;
12
+ justify-content: center;
13
+ padding: 40px 20px;
14
+ margin: 0;
15
+ }
16
+ .container {
17
+ background: white;
18
+ padding: 30px;
19
+ border-radius: 12px;
20
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
21
+ max-width: 500px;
22
+ width: 100%;
23
+ text-align: center;
24
+ }
25
+ h2 { color: #333; margin-bottom: 20px; }
26
+ .upload-area {
27
+ border: 2px dashed #ccc;
28
+ padding: 20px;
29
+ border-radius: 8px;
30
+ cursor: pointer;
31
+ margin-bottom: 20px;
32
+ transition: 0.3s;
33
+ }
34
+ .upload-area:hover { border-color: #007bff; background: #f8fbff; }
35
+ input[type="file"] { display: none; }
36
+ .preview-img {
37
+ max-width: 100%;
38
+ max-height: 300px;
39
+ border-radius: 8px;
40
+ display: none;
41
+ margin: 10px auto;
42
+ }
43
+ button {
44
+ background-color: #007bff;
45
+ color: white;
46
+ border: none;
47
+ padding: 12px 24px;
48
+ border-radius: 6px;
49
+ font-size: 16px;
50
+ cursor: pointer;
51
+ width: 100%;
52
+ transition: 0.3s;
53
+ }
54
+ button:hover { background-color: #0056b3; }
55
+ button:disabled { background-color: #cccccc; cursor: not-allowed; }
56
+ .result-box {
57
+ margin-top: 20px;
58
+ padding: 15px;
59
+ background: #e9ecef;
60
+ border-radius: 8px;
61
+ text-align: left;
62
+ min-height: 80px;
63
+ white-space: pre-wrap; /* Giữ nguyên xuống dòng của text */
64
+ word-wrap: break-word;
65
+ display: none;
66
+ }
67
+ .loading { display: none; margin-top: 15px; color: #666; font-style: italic; }
68
+ </style>
69
+ </head>
70
+ <body>
71
+
72
+ <div class="container">
73
+ <h2>Nhận dạng văn bản (OCR)</h2>
74
+
75
+ <label class="upload-area" for="fileInput">
76
+ <div id="uploadText">Click để chọn ảnh hoặc Kéo thả ảnh vào đây</div>
77
+ <img id="imagePreview" class="preview-img" alt="Ảnh xem trước">
78
+ </label>
79
+ <input type="file" id="fileInput" accept="image/*">
80
+
81
+ <button id="submitBtn" disabled>Trích xuất văn bản</button>
82
+
83
+ <div id="loading" class="loading">Đang xử lý ảnh, vui lòng đợi...</div>
84
+ <div id="resultBox" class="result-box"></div>
85
+ </div>
86
+
87
+ <script>
88
+ const fileInput = document.getElementById('fileInput');
89
+ const imagePreview = document.getElementById('imagePreview');
90
+ const uploadText = document.getElementById('uploadText');
91
+ const submitBtn = document.getElementById('submitBtn');
92
+ const resultBox = document.getElementById('resultBox');
93
+ const loading = document.getElementById('loading');
94
+
95
+ let selectedFile = null;
96
+
97
+ // 1. Xử lý khi người dùng chọn ảnh
98
+ fileInput.addEventListener('change', function(e) {
99
+ const file = e.target.files[0];
100
+ if (file) {
101
+ selectedFile = file;
102
+ const reader = new FileReader();
103
+ reader.onload = function(event) {
104
+ imagePreview.src = event.target.result;
105
+ imagePreview.style.display = 'block';
106
+ uploadText.style.display = 'none';
107
+ submitBtn.disabled = false; // Mở khóa nút bấm
108
+ }
109
+ reader.readAsDataURL(file);
110
+ }
111
+ });
112
+
113
+ // 2. Xử lý khi bấm nút "Trích xuất văn bản"
114
+ submitBtn.addEventListener('click', async function() {
115
+ if (!selectedFile) return;
116
+
117
+ // Chuẩn bị giao diện chờ
118
+ submitBtn.disabled = true;
119
+ loading.style.display = 'block';
120
+ resultBox.style.display = 'none';
121
+ resultBox.innerHTML = '';
122
+
123
+ // Đóng gói ảnh vào FormData
124
+ const formData = new FormData();
125
+ formData.append('file', selectedFile);
126
+
127
+ try {
128
+ // Thay "YOUR_API_URL_HERE" bằng đường dẫn API backend thật của bạn
129
+ // Ví dụ: "https://ten-space-cua-ban.hf.space/predict"
130
+ const response = await fetch('YOUR_API_URL_HERE', {
131
+ method: 'POST',
132
+ body: formData
133
+ });
134
+
135
+ if (!response.ok) {
136
+ throw new Error("Lỗi kết nối đến máy chủ API");
137
+ }
138
+
139
+ const data = await response.json();
140
+
141
+ // Giả sử backend trả về JSON có cấu trúc: { "text": "Nội dung nhận diện được..." }
142
+ // Bạn cần điều chỉnh 'data.text' theo đúng key mà Python trả về
143
+ resultBox.innerText = data.text || "Không tìm thấy chữ trong ảnh.";
144
+ resultBox.style.display = 'block';
145
+
146
+ } catch (error) {
147
+ console.error(error);
148
+ resultBox.innerText = "Đã xảy ra lỗi: " + error.message;
149
+ resultBox.style.display = 'block';
150
+ resultBox.style.color = "red";
151
+ } finally {
152
+ // Hoàn tất, tắt trạng thái chờ
153
+ loading.style.display = 'none';
154
+ submitBtn.disabled = false;
155
+ }
156
+ });
157
+ </script>
158
+
159
+ </body>
160
+ </html>