Update templates/index.html

templates/index.html

@@ -54,16 +54,18 @@
             </div>
 
             <!-- Upload Section -->
-            <div class="flex flex-col items-center justify-center w-full">
-                <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">
-                    <div class="flex flex-col items-center justify-center pt-5 pb-6">
-                        <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
-                        <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour upload</span> ou glissez-déposez</p>
-                        <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
-                    </div>
-                    <input id="image-input" type="file" class="hidden" accept="image/*" />
-                </label>
-            </div>
+            <form id="upload-form" enctype="multipart/form-data">
+                <div class="flex flex-col items-center justify-center w-full">
+                    <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">
+                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                            <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i>
+                            <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour upload</span> ou glissez-déposez</p>
+                            <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p>
+                        </div>
+                        <input id="image-input" type="file" name="image" class="hidden" accept="image/*" />
+                    </label>
+                </div>
+            </form>
 
             <!-- Preview Section -->
             <div class="mt-8">
@@ -102,17 +104,12 @@
                 document.getElementById('result-container').classList.add('hidden');
 
                 try {
+                    const formData = new FormData();
+                    formData.append('image', file);
+
                     const response = await fetch('/generate', {
                         method: 'POST',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            image: await new Promise(resolve => {
-                                reader.onload = () => resolve(reader.result);
-                                reader.readAsDataURL(file);
-                            })
-                        })
+                        body: formData
                     });
 
                     const data = await response.json();