Hugging Face's logo

Spaces:
fhiyffhiugf
/
tttthdjdn
Running

App Files Community
fhiyffhiugf commited on
Commit
cd547a1
·
verified ·
1 Parent(s): 7e1a841

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +32 -43
templates/index.html CHANGED
@@ -1,53 +1,42 @@
1
- <!DOCTYPE html>
2
  <html lang="ar">
3
  <head>
4
- <meta charset="UTF-8">
5
- <title>تحليل جنس الصورة</title>
6
- <style>
7
- body { font-family: Arial; text-align: center; padding: 30px; background: #f9f9f9; }
8
- input[type=file] { margin: 20px 0; }
9
- .card { display:inline-block; border:2px solid #ddd; border-radius:12px; padding:20px; margin:15px; width:260px; background:#fff; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
10
- img.preview { width: 300px; border-radius:10px; margin-top:20px; }
11
- .error { color:red; font-weight:bold; margin-top:20px; }
12
- </style>
13
  </head>
14
  <body>
15
- <h1>تحليل الجنس مع كشف الوجه الدقيق</h1>
16
- <form method="POST" enctype="multipart/form-data">
17
- <input type="file" name="image" accept="image/*" required><br>
18
- <button type="submit">تحليل الصورة</button>
 
 
 
 
19
  </form>
20
 
21
- {% if error_msg %}
22
- <div class="error">{{ error_msg }}</div>
23
- {% endif %}
24
 
25
- {% if uploaded_image %}
26
- <div>
27
- <img src="data:image/jpeg;base64,{{ uploaded_image }}" class="preview">
28
- </div>
29
- {% endif %}
 
 
30
 
31
- {% if result_1 or result_2 or result_3 %}
32
- <div>
33
- <div class="card">
34
- <div>🧠 النموذج الأول</div>
35
- النتيجة: {{ result_1 }}<br>
36
- الثقة: {{ confidence_1 }}
37
- </div>
38
- <div class="card">
39
- <div>⚡ النموذج الثاني</div>
40
- النتيجة: {{ result_2 }}<br>
41
- الثقة: {{ confidence_2 }}
42
- </div>
43
- {% if result_3 %}
44
- <div class="card">
45
- <div>🌟 النموذج الثالث</div>
46
- النتيجة: {{ result_3 }}<br>
47
- الثقة: {{ confidence_3 }}
48
- </div>
49
- {% endif %}
50
- </div>
51
- {% endif %}
52
  </body>
53
  </html>
 
1
+ <!doctype html>
2
  <html lang="ar">
3
  <head>
4
+ <meta charset="utf-8">
5
+ <title>اختبار API Analyze</title>
 
 
 
 
 
 
 
6
  </head>
7
  <body>
8
+ <h2>اختبار نقطة النهاية /api/analyze</h2>
9
+ <form id="f" enctype="multipart/form-data">
10
+ <input type="file" id="img" name="image" accept="image/*" required>
11
+ <br><br>
12
+ <label>API Key: </label>
13
+ <input type="text" id="key" value="hkhlasjoaj5464hjsks" style="width:300px;">
14
+ <br><br>
15
+ <button type="button" onclick="send()">إرسال</button>
16
  </form>
17
 
18
+ <pre id="out" style="white-space:pre-wrap; border:1px solid #ccc; padding:10px;"></pre>
 
 
19
 
20
+ <script>
21
+ async function send(){
22
+ const f = document.getElementById('f');
23
+ const form = new FormData();
24
+ const file = document.getElementById('img').files[0];
25
+ if(!file){ alert("اختر ملف"); return; }
26
+ form.append('image', file);
27
 
28
+ const key = document.getElementById('key').value;
29
+
30
+ document.getElementById('out').textContent = "جارٍ الإرسال...";
31
+
32
+ const resp = await fetch('/api/analyze', {
33
+ method: 'POST',
34
+ headers: {'x-api-key': key},
35
+ body: form
36
+ });
37
+ const data = await resp.json();
38
+ document.getElementById('out').textContent = JSON.stringify(data, null, 2);
39
+ }
40
+ </script>
 
 
 
 
 
 
 
 
41
  </body>
42
  </html>