Hugging Face's logo

Spaces:
Elias207
/
QRcode
Running

App Files Community
Elias207 commited on
Commit
4c3a15f
·
verified ·
1 Parent(s): 1e4d3b0

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +131 -56
index.html CHANGED
@@ -3,53 +3,125 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>دیباگر API کیوآرکد</title>
7
  <style>
8
- body { font-family: sans-serif; background-color: #f4f4f9; display: flex; justify-content: center; padding: 20px; gap: 30px; flex-wrap: wrap; }
9
- .container { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); width: 450px; }
10
- h2 { color: #333; border-bottom: 2px solid #6c5ce7; padding-bottom: 5px; }
11
- textarea, input { width: 100%; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
12
- button { background-color: #6c5ce7; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; width: 100%; font-size: 16px; }
13
- button:disabled { background-color: #b2aae8; }
14
- .result-container { margin-top: 15px; }
15
- pre { background-color: #eee; padding: 15px; border-radius: 4px; white-space: pre-wrap; word-wrap: break-word; text-align: left; direction: ltr; max-height: 300px; overflow-y: auto; }
16
- .copy-btn { background-color: #00b894; margin-top: 10px; width: auto; padding: 5px 10px; font-size: 12px; }
17
- .loader { text-align: center; padding: 20px; color: #555; }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
18
  </style>
19
  </head>
20
  <body>
21
 
22
  <!-- بخش ساخت QR Code -->
23
  <div class="container">
24
- <h2>۱. تست ساخت QR Code</h2>
25
- <textarea id="text-input" placeholder="یک متن برای تست وارد کنید..." rows="3">test</textarea>
26
- <button id="generate-btn" onclick="generateQRCode()">دریافت JSON ساخت کد</button>
27
- <div id="generate-result" class="result-container" hidden>
28
- <h3>خروجی JSON:</h3>
29
- <pre id="generate-json-output"></pre>
30
- <button class="copy-btn" onclick="copyToClipboard('generate-json-output', this)">کپی کردن JSON</button>
31
  </div>
32
- <div id="generate-loader" class="loader" hidden>در حال ارتباط با سرور...</div>
33
  </div>
34
 
35
  <!-- بخش خواندن QR Code -->
36
  <div class="container">
37
- <h2>۲. تست خواندن QR Code</h2>
38
  <input type="file" id="file-input" accept="image/*">
39
- <button id="read-btn" onclick="readQRCode()">دریافت JSON خواندن کد</button>
40
- <div id="read-result" class="result-container" hidden>
41
- <h3>خروجی JSON:</h3>
42
- <pre id="read-json-output"></pre>
43
- <button class="copy-btn" onclick="copyToClipboard('read-json-output', this)">کپی کردن JSON</button>
44
  </div>
45
- <div id="read-loader" class="loader" hidden>در حال آپلود و پردازش...</div>
46
  </div>
47
 
48
  <script>
49
- const API_BASE_URL = "https://elias207-qrcode.hf.space/";
 
 
50
 
51
  function generateSessionHash() { return Math.random().toString(36).substring(2, 11); }
52
-
53
  async function callGradioApi(fnIndex, data, sessionHash) {
54
  await fetch(API_BASE_URL + "queue/join?", {
55
  method: "POST",
@@ -85,27 +157,35 @@
85
 
86
  async function generateQRCode() {
87
  const textInput = document.getElementById('text-input').value;
88
- if (!textInput.trim()) { alert("لطفا متنی وارد کنید."); return; }
89
 
90
  const btn = document.getElementById('generate-btn');
91
  const loader = document.getElementById('generate-loader');
92
- const resultDiv = document.getElementById('generate-result');
93
- const outputPre = document.getElementById('generate-json-output');
94
 
95
  btn.disabled = true;
96
- loader.hidden = false;
97
- resultDiv.hidden = true;
 
98
 
99
  try {
100
  const sessionHash = generateSessionHash();
101
  const result = await callGradioApi(0, [textInput], sessionHash);
102
- outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام
103
- resultDiv.hidden = false;
 
 
 
 
 
 
104
  } catch (error) {
105
  alert("خطا در ساخت کد: " + error.message);
 
106
  } finally {
107
  btn.disabled = false;
108
- loader.hidden = true;
109
  }
110
  }
111
 
@@ -116,43 +196,38 @@
116
 
117
  const btn = document.getElementById('read-btn');
118
  const loader = document.getElementById('read-loader');
119
- const resultDiv = document.getElementById('read-result');
120
- const outputPre = document.getElementById('read-json-output');
121
 
122
  btn.disabled = true;
123
- loader.hidden = false;
124
- resultDiv.hidden = true;
125
 
126
  try {
127
  const formData = new FormData();
128
  formData.append("files", file);
129
- const uploadRes = await fetch(API_BASE_URL + "upload", { method: "POST", body: formData });
 
 
130
  const uploadResult = await uploadRes.json();
131
  const tempFilePath = uploadResult[0];
132
 
133
  const sessionHash = generateSessionHash();
134
- const fileData = [{"path": tempFilePath, "url": API_BASE_URL + "file=" + tempFilePath, "orig_name": file.name}];
135
  const result = await callGradioApi(1, fileData, sessionHash);
136
- outputPre.textContent = JSON.stringify(result, null, 2); // نمایش جیسون خام
137
- resultDiv.hidden = false;
 
 
 
 
138
  } catch (error) {
139
  alert("خطا در خواندن کد: " + error.message);
 
140
  } finally {
141
  btn.disabled = false;
142
- loader.hidden = true;
143
  }
144
  }
145
-
146
- function copyToClipboard(elementId, buttonElement) {
147
- const text = document.getElementById(elementId).textContent;
148
- navigator.clipboard.writeText(text).then(() => {
149
- const originalText = buttonElement.textContent;
150
- buttonElement.textContent = 'کپی شد!';
151
- setTimeout(() => { buttonElement.textContent = originalText; }, 2000);
152
- }, (err) => {
153
- alert('خطا در کپی کردن: ' + err);
154
- });
155
- }
156
  </script>
157
  </body>
158
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>کلاینت نهایی QR Code</title>
7
  <style>
8
+ body {
9
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
10
+ background-color: #f0f2f5;
11
+ color: #1c1e21;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: flex-start;
15
+ padding: 20px;
16
+ gap: 30px;
17
+ flex-wrap: wrap;
18
+ }
19
+ .container {
20
+ background-color: #fff;
21
+ padding: 25px;
22
+ border-radius: 8px;
23
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
24
+ width: 400px;
25
+ display: flex;
26
+ flex-direction: column;
27
+ gap: 15px;
28
+ }
29
+ h2 {
30
+ margin: 0 0 10px 0;
31
+ color: #0056b3;
32
+ border-bottom: 2px solid #0056b3;
33
+ padding-bottom: 5px;
34
+ }
35
+ textarea, input[type="file"] {
36
+ width: 100%;
37
+ padding: 10px;
38
+ border: 1px solid #ccc;
39
+ border-radius: 4px;
40
+ box-sizing: border-box;
41
+ resize: vertical;
42
+ }
43
+ button {
44
+ background-color: #007bff;
45
+ color: white;
46
+ padding: 12px 20px;
47
+ border: none;
48
+ border-radius: 4px;
49
+ cursor: pointer;
50
+ font-size: 16px;
51
+ transition: background-color 0.3s;
52
+ }
53
+ button:disabled {
54
+ background-color: #a0c9ff;
55
+ cursor: not-allowed;
56
+ }
57
+ button:hover:not(:disabled) {
58
+ background-color: #0056b3;
59
+ }
60
+ .result-box {
61
+ margin-top: 15px;
62
+ padding: 15px;
63
+ border: 1px dashed #ddd;
64
+ border-radius: 4px;
65
+ min-height: 50px;
66
+ display: flex;
67
+ justify-content: center;
68
+ align-items: center;
69
+ background-color: #fafafa;
70
+ word-break: break-all;
71
+ }
72
+ #qr-image {
73
+ max-width: 100%;
74
+ height: auto;
75
+ }
76
+ .loader {
77
+ border: 4px solid #f3f3f3;
78
+ border-radius: 50%;
79
+ border-top: 4px solid #3498db;
80
+ width: 30px;
81
+ height: 30px;
82
+ animation: spin 1s linear infinite;
83
+ }
84
+ @keyframes spin {
85
+ 0% { transform: rotate(0deg); }
86
+ 100% { transform: rotate(360deg); }
87
+ }
88
+ .hidden {
89
+ display: none;
90
+ }
91
  </style>
92
  </head>
93
  <body>
94
 
95
  <!-- بخش ساخت QR Code -->
96
  <div class="container">
97
+ <h2>ساخت QR Code</h2>
98
+ <textarea id="text-input" placeholder="متن مورد نظر را اینجا وارد کنید..." rows="4">سلام دنیا!</textarea>
99
+ <button id="generate-btn" onclick="generateQRCode()">ساخت کد</button>
100
+ <div id="generate-result" class="result-box">
101
+ <div id="generate-loader" class="loader hidden"></div>
102
+ <img id="qr-image" src="" alt="QR Code" class="hidden" />
103
+ <span id="generate-placeholder">تصویر QR Code اینجا نمایش داده می‌شود.</span>
104
  </div>
 
105
  </div>
106
 
107
  <!-- بخش خواندن QR Code -->
108
  <div class="container">
109
+ <h2>خواندن QR Code</h2>
110
  <input type="file" id="file-input" accept="image/*">
111
+ <button id="read-btn" onclick="readQRCode()">خواندن کد</button>
112
+ <div id="read-result" class="result-box">
113
+ <div id="read-loader" class="loader hidden"></div>
114
+ <p id="read-text">نتیجه خواندن کد اینجا نمایش داده می‌شود.</p>
 
115
  </div>
 
116
  </div>
117
 
118
  <script>
119
+ // *** مهم: آدرس API با افزودن /gradio_api/ اصلاح شد ***
120
+ const API_URL_ROOT = "https://elias207-qrcode.hf.space/";
121
+ const API_BASE_URL = API_URL_ROOT + "gradio_api/";
122
 
123
  function generateSessionHash() { return Math.random().toString(36).substring(2, 11); }
124
+
125
  async function callGradioApi(fnIndex, data, sessionHash) {
126
  await fetch(API_BASE_URL + "queue/join?", {
127
  method: "POST",
 
157
 
158
  async function generateQRCode() {
159
  const textInput = document.getElementById('text-input').value;
160
+ if (!textInput.trim()) { alert("لطفاً متنی وارد کنید."); return; }
161
 
162
  const btn = document.getElementById('generate-btn');
163
  const loader = document.getElementById('generate-loader');
164
+ const placeholder = document.getElementById('generate-placeholder');
165
+ const qrImage = document.getElementById('qr-image');
166
 
167
  btn.disabled = true;
168
+ loader.classList.remove('hidden');
169
+ placeholder.classList.add('hidden');
170
+ qrImage.classList.add('hidden');
171
 
172
  try {
173
  const sessionHash = generateSessionHash();
174
  const result = await callGradioApi(0, [textInput], sessionHash);
175
+
176
+ if (result.output?.data?.[0]?.path) {
177
+ const imageUrl = API_URL_ROOT + "file=" + result.output.data[0].path;
178
+ qrImage.src = imageUrl;
179
+ qrImage.classList.remove('hidden');
180
+ } else {
181
+ throw new Error("پاسخ دریافتی از سرور معتبر نیست.");
182
+ }
183
  } catch (error) {
184
  alert("خطا در ساخت کد: " + error.message);
185
+ placeholder.classList.remove('hidden');
186
  } finally {
187
  btn.disabled = false;
188
+ loader.classList.add('hidden');
189
  }
190
  }
191
 
 
196
 
197
  const btn = document.getElementById('read-btn');
198
  const loader = document.getElementById('read-loader');
199
+ const readText = document.getElementById('read-text');
 
200
 
201
  btn.disabled = true;
202
+ loader.classList.remove('hidden');
203
+ readText.textContent = "در حال پردازش...";
204
 
205
  try {
206
  const formData = new FormData();
207
  formData.append("files", file);
208
+ const uploadRes = await fetch(API_URL_ROOT + "upload", { method: "POST", body: formData });
209
+ if (!uploadRes.ok) throw new Error("آپلود فایل ناموفق بود.");
210
+
211
  const uploadResult = await uploadRes.json();
212
  const tempFilePath = uploadResult[0];
213
 
214
  const sessionHash = generateSessionHash();
215
+ const fileData = [{"path": tempFilePath, "url": API_URL_ROOT + "file=" + tempFilePath, "orig_name": file.name}];
216
  const result = await callGradioApi(1, fileData, sessionHash);
217
+
218
+ if (result.output?.data?.[0]) {
219
+ readText.textContent = "نتیجه: " + result.output.data[0];
220
+ } else {
221
+ readText.textContent = "نتیجه‌ای یافت نشد.";
222
+ }
223
  } catch (error) {
224
  alert("خطا در خواندن کد: " + error.message);
225
+ readText.textContent = "خطا در خواندن کد.";
226
  } finally {
227
  btn.disabled = false;
228
+ loader.classList.add('hidden');
229
  }
230
  }
 
 
 
 
 
 
 
 
 
 
 
231
  </script>
232
  </body>
233
  </html>