Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +16 -19
templates/index.html
CHANGED
@@ -54,16 +54,18 @@
|
|
54 |
</div>
|
55 |
|
56 |
<!-- Upload Section -->
|
57 |
-
<
|
58 |
-
<
|
59 |
-
<
|
60 |
-
<
|
61 |
-
|
62 |
-
|
63 |
-
|
64 |
-
|
65 |
-
|
66 |
-
|
|
|
|
|
67 |
|
68 |
<!-- Preview Section -->
|
69 |
<div class="mt-8">
|
@@ -102,17 +104,12 @@
|
|
102 |
document.getElementById('result-container').classList.add('hidden');
|
103 |
|
104 |
try {
|
|
|
|
|
|
|
105 |
const response = await fetch('/generate', {
|
106 |
method: 'POST',
|
107 |
-
|
108 |
-
'Content-Type': 'application/json',
|
109 |
-
},
|
110 |
-
body: JSON.stringify({
|
111 |
-
image: await new Promise(resolve => {
|
112 |
-
reader.onload = () => resolve(reader.result);
|
113 |
-
reader.readAsDataURL(file);
|
114 |
-
})
|
115 |
-
})
|
116 |
});
|
117 |
|
118 |
const data = await response.json();
|
|
|
54 |
</div>
|
55 |
|
56 |
<!-- Upload Section -->
|
57 |
+
<form id="upload-form" enctype="multipart/form-data">
|
58 |
+
<div class="flex flex-col items-center justify-center w-full">
|
59 |
+
<label for="image-input" class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300">
|
60 |
+
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
61 |
+
<i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
|
62 |
+
<p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour upload</span> ou glissez-déposez</p>
|
63 |
+
<p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
|
64 |
+
</div>
|
65 |
+
<input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
|
66 |
+
</label>
|
67 |
+
</div>
|
68 |
+
</form>
|
69 |
|
70 |
<!-- Preview Section -->
|
71 |
<div class="mt-8">
|
|
|
104 |
document.getElementById('result-container').classList.add('hidden');
|
105 |
|
106 |
try {
|
107 |
+
const formData = new FormData();
|
108 |
+
formData.append('image', file);
|
109 |
+
|
110 |
const response = await fetch('/generate', {
|
111 |
method: 'POST',
|
112 |
+
body: formData
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
113 |
});
|
114 |
|
115 |
const data = await response.json();
|