Hugging Face's logo

Spaces:
Docfile
/
Mphilo3
Sleeping

App Files Community
Docfile commited on
Commit
112c759
·
verified ·
1 Parent(s): 6f57ff6

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +164 -0
templates/index.html ADDED
@@ -0,0 +1,164 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Mariam Anglais</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script>
9
+ tailwind.config = {
10
+ theme: {
11
+ extend: {
12
+ colors: {
13
+ primary: '#4CAF50',
14
+ 'primary-dark': '#3e8e41',
15
+ }
16
+ }
17
+ }
18
+ }
19
+ </script>
20
+ </head>
21
+ <body class="bg-gray-50 min-h-screen">
22
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
23
+ <!-- Header -->
24
+ <header class="text-center mb-12">
25
+ <h1 class="text-5xl font-bold text-primary mb-4 animate-fade-in">
26
+ ✨ Mariam Anglais ✨
27
+ </h1>
28
+ <p class="text-gray-600 text-lg">
29
+ Bienvenue ! Téléchargez vos images, choisissez votre type d'analyse, et laissez la magie opérer.
30
+ </p>
31
+ </header>
32
+
33
+ <!-- Main Content -->
34
+ <div class="grid md:grid-cols-2 gap-12">
35
+ <!-- Upload Section -->
36
+ <div class="bg-white rounded-lg shadow-lg p-6">
37
+ <h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
38
+ <div class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors">
39
+ <input type="file" id="image-upload" multiple accept="image/*" class="hidden">
40
+ <label for="image-upload" class="cursor-pointer">
41
+ <svg class="mx-auto h-12 w-12 text-primary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
42
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
43
+ </svg>
44
+ <span class="text-gray-600">Cliquez ou glissez vos images ici</span>
45
+ </label>
46
+ </div>
47
+ <div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div>
48
+ </div>
49
+
50
+ <!-- Analysis Type Section -->
51
+ <div class="bg-white rounded-lg shadow-lg p-6">
52
+ <h2 class="text-2xl font-semibold text-primary mb-4">🎛️ Choix du type d'analyse</h2>
53
+ <div class="space-y-4">
54
+ <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
55
+ <input type="radio" name="analysis_type" value="text" class="h-4 w-4 text-primary">
56
+ <span class="ml-3">🔍 Type 1: Analyse de Texte</span>
57
+ </label>
58
+ <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
59
+ <input type="radio" name="analysis_type" value="icon" class="h-4 w-4 text-primary">
60
+ <span class="ml-3">🧠 Type 2: Document iconographique</span>
61
+ </label>
62
+ </div>
63
+ <button id="submit-btn" class="w-full mt-6 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
64
+ 🚀 Soumettre
65
+ </button>
66
+ </div>
67
+ </div>
68
+
69
+ <!-- Results Section -->
70
+ <div id="results" class="mt-12 bg-white rounded-lg shadow-lg p-6 hidden">
71
+ <h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2>
72
+ <div id="analysis-result" class="prose max-w-none"></div>
73
+ </div>
74
+
75
+ <!-- Footer -->
76
+ <footer class="mt-12 text-center text-gray-600">
77
+ <hr class="mb-4">
78
+ <p>© 2025 Mariam AI - Tous droits réservés.</p>
79
+ </footer>
80
+ </div>
81
+
82
+ <script>
83
+ document.addEventListener('DOMContentLoaded', () => {
84
+ const imageUpload = document.getElementById('image-upload');
85
+ const previewContainer = document.getElementById('preview-container');
86
+ const submitBtn = document.getElementById('submit-btn');
87
+ const resultsSection = document.getElementById('results');
88
+ const analysisResult = document.getElementById('analysis-result');
89
+
90
+ let uploadedFiles = [];
91
+
92
+ imageUpload.addEventListener('change', handleFileSelect);
93
+ submitBtn.addEventListener('click', handleSubmit);
94
+
95
+ function handleFileSelect(event) {
96
+ uploadedFiles = Array.from(event.target.files);
97
+ updatePreview();
98
+ }
99
+
100
+ function updatePreview() {
101
+ previewContainer.innerHTML = '';
102
+ uploadedFiles.forEach((file, index) => {
103
+ const preview = document.createElement('div');
104
+ preview.className = 'relative';
105
+ preview.innerHTML = `
106
+ <img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg">
107
+ <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600">
108
+ <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
109
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
110
+ </svg>
111
+ </button>
112
+ `;
113
+ previewContainer.appendChild(preview);
114
+ });
115
+ submitBtn.disabled = uploadedFiles.length === 0;
116
+ }
117
+
118
+ function removeImage(index) {
119
+ uploadedFiles.splice(index, 1);
120
+ updatePreview();
121
+ }
122
+
123
+ async function handleSubmit() {
124
+ const formData = new FormData();
125
+ const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value;
126
+
127
+ if (!analysisType || uploadedFiles.length === 0) {
128
+ alert('Veuillez sélectionner un type d\'analyse et au moins une image.');
129
+ return;
130
+ }
131
+
132
+ formData.append('analysis_type', analysisType);
133
+ uploadedFiles.forEach(file => formData.append('images', file));
134
+
135
+ submitBtn.disabled = true;
136
+ submitBtn.innerHTML = 'Analyse en cours...';
137
+
138
+ try {
139
+ const response = await fetch('/analyze', {
140
+ method: 'POST',
141
+ body: formData
142
+ });
143
+ const data = await response.json();
144
+
145
+ if (data.error) {
146
+ throw new Error(data.error);
147
+ }
148
+
149
+ resultsSection.classList.remove('hidden');
150
+ analysisResult.innerHTML = data.result;
151
+ } catch (error) {
152
+ alert('Erreur lors de l\'analyse: ' + error.message);
153
+ } finally {
154
+ submitBtn.disabled = false;
155
+ submitBtn.innerHTML = '🚀 Soumettre';
156
+ }
157
+ }
158
+
159
+ // Make removeImage function global
160
+ window.removeImage = removeImage;
161
+ });
162
+ </script>
163
+ </body>
164
+ </html>