Hugging Face's logo

Spaces:
FatimaGr
/
AI_Web_Dev1
Sleeping

App Files Community
malaknihed commited on
Commit
838325d
·
verified ·
1 Parent(s): 9fa5df4

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +44 -63
static/index.html CHANGED
@@ -3,82 +3,63 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Analyse de Documents et d'Images</title>
7
  <style>
8
- body { font-family: Arial, sans-serif; text-align: center; margin: 20px; }
9
- input, button, select { margin: 10px; padding: 10px; }
10
- #result { margin-top: 20px; font-weight: bold; white-space: pre-wrap; }
11
- img { max-width: 100%; margin-top: 20px; }
12
- #translateContainer {
13
- border: 2px solid #ddd;
 
 
 
 
 
 
14
  padding: 20px;
15
- border-radius: 10px;
16
- width: 50%;
17
- margin: auto;
18
- background-color: #f9f9f9;
 
 
19
  }
20
- input[type="file"] {
21
  margin: 10px 0;
 
 
 
 
 
22
  }
23
  button {
24
- padding: 10px 15px;
25
- font-size: 16px;
26
- cursor: pointer;
27
- border: none;
28
- border-radius: 5px;
29
- background-color: #007bff;
30
  color: white;
 
 
31
  }
32
  button:hover {
33
  background-color: #0056b3;
34
  }
35
- #translateResult {
36
- margin-top: 20px;
37
- font-weight: bold;
38
- color: #333;
39
- }
40
- #loading {
41
- display: none;
42
- font-size: 16px;
43
- color: #ff6600;
44
- font-weight: bold;
45
- }
46
  </style>
47
  </head>
48
  <body>
49
-
50
- <h2>Upload un fichier pour analyse</h2>
51
-
52
- <h3>📄 Résumé de Document</h3>
53
- <input type="file" id="documentInput" accept=".pdf, .docx, .pptx, .xlsx">
54
- <button onclick="uploadDocument()">Analyser</button>
55
- <p id="documentResult">Aucun résumé disponible</p>
56
-
57
- <h3>🖼️ Interprétation d'Image</h3>
58
- <input type="file" id="imageInput" accept="image/*">
59
- <button onclick="uploadImage()">Analyser</button>
60
- <p id="imageResult">Aucune interprétation disponible</p>
61
- <img id="uploadedImage" style="display: none;">
62
-
63
-
64
-
65
- <h3>🌍 Traduction de Document</h3>
66
- <div id="translateContainer">
67
- <input type="file" id="translateInput" accept=".pdf, .docx, .txt, .xlsx">
68
- <select id="targetLang">
69
- <option value="fr">Français</option>
70
- <option value="en">Anglais</option>
71
- <option value="es">Espagnol</option>
72
- <option value="de">Allemand</option>
73
- </select>
74
- <button onclick="uploadForTranslation()">Traduire</button>
75
- <p id="translateResult">Aucune traduction disponible</p>
76
- </div>
77
-
78
-
79
-
80
-
81
  <script src="app.js"></script>
82
-
83
  </body>
84
- </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Intelligent QA Web Service</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ display: flex;
13
+ justify-content: center;
14
+ align-items: center;
15
+ height: 100vh;
16
+ background-color: #f4f4f4;
17
+ }
18
+ .container {
19
+ background: white;
20
  padding: 20px;
21
+ border-radius: 8px;
22
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23
+ text-align: center;
24
+ }
25
+ h1, h2 {
26
+ color: #333;
27
  }
28
+ input, button {
29
  margin: 10px 0;
30
+ padding: 10px;
31
+ width: 100%;
32
+ max-width: 300px;
33
+ border: 1px solid #ccc;
34
+ border-radius: 5px;
35
  }
36
  button {
37
+ background-color: #007BFF;
 
 
 
 
 
38
  color: white;
39
+ border: none;
40
+ cursor: pointer;
41
  }
42
  button:hover {
43
  background-color: #0056b3;
44
  }
 
 
 
 
 
 
 
 
 
 
 
45
  </style>
46
  </head>
47
  <body>
48
+ <div class="container">
49
+ <h1>Intelligent QA Web Service</h1>
50
+
51
+ <h2>Upload Document</h2>
52
+ <input type="file" id="documentInput">
53
+ <input type="text" id="documentQuestion" placeholder="Posez une question...">
54
+ <button onclick="askDocumentQA()">Envoyer</button>
55
+ <p id="documentAnswer"></p>
56
+
57
+ <h2>Upload Image</h2>
58
+ <input type="file" id="imageInput">
59
+ <button onclick="askImageQA()">Analyser</button>
60
+ <p id="imageCaption"></p>
61
+ </div>
62
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
63
  <script src="app.js"></script>
 
64
  </body>
65
+ </html>