Update index.html

index.html

@@ -318,7 +318,7 @@
             const historyGrid = document.getElementById('history-grid');
             
             // API Endpoint
-            const API_URL = 'https://multimodalart-cosxl.hf.space/api/predict';
+            const API_URL = 'https://multimodalart-cosxl.hf.space/run/predict';
             
             // Current state
             let uploadedImage = null;
@@ -388,14 +388,6 @@
                 });
             });
             
-            async function fileToBase64(file) {
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(file);
-                reader.onload = () => resolve(reader.result.split(',')[1]);
-                reader.onerror = error => reject(error);
-            });
-        }
             generateBtn.addEventListener('click', async () => {
                 if (!uploadedImage) {
                     alert('Please upload an image first');
@@ -412,28 +404,24 @@
                 loadingIcon.classList.remove('hidden');
                 generateBtn.disabled = true;
                 
-                try {
-                    // Convert image to base64
-                const imageBase64 = await fileToBase64(uploadedFile);
-                
-                // Construct API payload
-                const payload = {
-                    data: [
-                        imageBase64, // Image data
-                        colorPrompt.value, // Positive prompt
+               try {
+                // Prepare form data according to Gradio's API requirements
+                const formData = new FormData();
+                formData.append('data', JSON.stringify({
+                    'data': [
+                        await fileToBase64(uploadedFile), // Image
+                        colorPrompt.value, // Prompt
                         negativePrompt.value, // Negative prompt
                         Number(guidanceScale.value), // Guidance scale
-                        Number(steps.value) // Inference steps
-                    ]
-                };
+                        Number(steps.value) // Steps
+                    ],
+                    'fn_index': 0 // Important for Gradio interface
+                }));
 
-                // API request
+                // API request with proper headers
                 const response = await fetch(API_URL, {
                     method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(payload)
+                    body: formData
                 });
 
                 // Handle response errors
@@ -443,25 +431,20 @@
                 }
 
                 const result = await response.json();
-
-                // Handle different response formats
-                let resultImageData;
-                if (result.data && result.data[0]) {
-                    resultImageData = result.data[0];
-                } else if (result.output) {
-                    resultImageData = result.output;
-                } else {
-                    throw new Error('Unexpected API response format');
+                
+                // Handle Gradio response format
+                if (!result.data || !result.data[0]) {
+                    throw new Error('Invalid API response format');
                 }
 
                 // Display results
                 originalImage.src = URL.createObjectURL(uploadedFile);
-                resultImage.src = `data:image/png;base64,${resultImageData}`;
+                resultImage.src = `data:image/png;base64,${result.data[0]}`;
                 emptyState.classList.add('hidden');
                 resultContainer.classList.remove('hidden');
 
                 // Add to history
-                addToHistory(URL.createObjectURL(uploadedFile), `data:image/png;base64,${resultImageData}`);
+                addToHistory(URL.createObjectURL(uploadedFile), `data:image/png;base64,${result.data[0]}`);
                 historySection.classList.remove('hidden');
 
             } catch (error) {
@@ -471,9 +454,18 @@
                 generateIcon.classList.remove('hidden');
                 loadingIcon.classList.add('hidden');
                 generateBtn.disabled = false;
-            
-                }
+            }
+        });
+
+        // Helper function to convert file to base64
+        async function fileToBase64(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => resolve(reader.result.split(',')[1]);
+                reader.onerror = error => reject(error);
             });
+        }
             
             downloadBtn.addEventListener('click', () => {
                 if (resultImage.src) {