Update index.html (#3)

- Update index.html (4b5151083eaf4a95cb293a1a04331eafdd30c471)

index.html

@@ -20,31 +20,60 @@
     </div>
 
     <script>
-        const form = document.getElementById('image-checker-form');
-        const resultDiv = document.getElementById('result');
+    const form = document.getElementById('image-checker-form');
+    const resultDiv = document.getElementById('result');
 
-        form.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            
-            const formData = new FormData(form);
-            resultDiv.textContent = 'Checking...';
+    form.addEventListener('submit', async (e) => {
+        e.preventDefault();
 
-            try {
-                const response = await fetch('your_model_endpoint', {
+        const formData = new FormData(form);
+        const file = formData.get('image');
+
+        if (!file) {
+            resultDiv.textContent = 'Please upload an image.';
+            return;
+        }
+
+        resultDiv.textContent = 'Checking...';
+
+        try {
+            const reader = new FileReader();
+            reader.readAsDataURL(file);
+
+            reader.onloadend = async function () {
+                const base64Image = reader.result.split(',')[1]; // Get base64 image without metadata
+
+                const response = await fetch('https://api-inference.huggingface.co/models/Organika/sdxl-detector', {
                     method: 'POST',
-                    body: formData
+                    headers: {
+                        'Authorization': 'Bearer YOUR_HUGGINGFACE_API_KEY',
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        inputs: base64Image,
+                        options: {
+                            wait_for_model: true
+                        }
+                    })
                 });
 
                 const result = await response.json();
-                if (result.is_ai_generated) {
-                    resultDiv.textContent = "This image is AI-generated.";
+
+                if (response.ok) {
+                    const isAI = result[0]?.label === "AI-generated";
+                    if (isAI) {
+                        resultDiv.textContent = "This image is AI-generated.";
+                    } else {
+                        resultDiv.textContent = "This image is not AI-generated.";
+                    }
                 } else {
-                    resultDiv.textContent = "This image is not AI-generated.";
+                    resultDiv.textContent = "Error occurred: " + result.error;
                 }
-            } catch (error) {
-                resultDiv.textContent = "Error occurred while checking the image.";
-            }
-        });
-    </script>
+            };
+        } catch (error) {
+            resultDiv.textContent = "Error occurred while checking the image.";
+        }
+    });
+</script>
 </body>
 </html>