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/run/predict';
+            const API_URL = 'https://multimodalart-cosxl.hf.space/api/predict';
             
             // Current state
             let uploadedImage = null;
@@ -405,52 +405,65 @@
                 generateBtn.disabled = true;
                 
                 try {
-                    // Prepare the form data
-                    const formData = new FormData();
-                    formData.append('data', JSON.stringify({
-                        'fn_index': 1,
-                        'data': [
-                            uploadedImage, // image
-                            colorPrompt.value, // prompt
-                            negativePrompt.value, // negative prompt
-                            Number(guidanceScale.value), // guidance scale
-                            Number(steps.value) // steps
-                        ]
-                    }));
-                    
-                    // Call the CosXL API
-                    const response = await fetch(API_URL, {
-                        method: 'POST',
-                        body: formData
-                    });
-                    
-                    if (!response.ok) {
-                        throw new Error(`API request failed with status ${response.status}`);
-                    }
-                    
-                    const result = await response.json();
-                    
-                    if (result.error) {
-                        throw new Error(result.error);
-                    }
-                    
-                    // Display results
-                    originalImage.src = uploadedImage;
-                    resultImage.src = `data:image/png;base64,${result.data[0]}`;
-                    emptyState.classList.add('hidden');
-                    resultContainer.classList.remove('hidden');
-                    
-                    // Add to history
-                    addToHistory(uploadedImage, `data:image/png;base64,${result.data[0]}`);
-                    historySection.classList.remove('hidden');
-                } catch (error) {
-                    console.error('Error:', error);
-                    alert(`An error occurred: ${error.message}`);
-                } finally {
-                    // Reset button state
-                    generateIcon.classList.remove('hidden');
-                    loadingIcon.classList.add('hidden');
-                    generateBtn.disabled = false;
+                    // Convert image to base64
+                const imageBase64 = await fileToBase64(uploadedFile);
+                
+                // Construct API payload
+                const payload = {
+                    data: [
+                        imageBase64, // Image data
+                        colorPrompt.value, // Positive prompt
+                        negativePrompt.value, // Negative prompt
+                        Number(guidanceScale.value), // Guidance scale
+                        Number(steps.value) // Inference steps
+                    ]
+                };
+
+                // API request
+                const response = await fetch(API_URL, {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify(payload)
+                });
+
+                // Handle response errors
+                if (!response.ok) {
+                    const errorText = await response.text();
+                    throw new Error(`API Error: ${response.status} - ${errorText}`);
+                }
+
+                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');
+                }
+
+                // Display results
+                originalImage.src = URL.createObjectURL(uploadedFile);
+                resultImage.src = `data:image/png;base64,${resultImageData}`;
+                emptyState.classList.add('hidden');
+                resultContainer.classList.remove('hidden');
+
+                // Add to history
+                addToHistory(URL.createObjectURL(uploadedFile), `data:image/png;base64,${resultImageData}`);
+                historySection.classList.remove('hidden');
+
+            } catch (error) {
+                console.error('API Error:', error);
+                alert(`Error processing image: ${error.message}`);
+            } finally {
+                generateIcon.classList.remove('hidden');
+                loadingIcon.classList.add('hidden');
+                generateBtn.disabled = false;
+            
                 }
             });
             
@@ -466,24 +479,23 @@
             });
             
             function addToHistory(originalUrl, resultUrl) {
-                const historyItem = document.createElement('div');
-                historyItem.className = 'history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer';
-                historyItem.innerHTML = `
-                    <img src="${resultUrl}" class="w-full h-auto rounded" alt="History item">
-                `;
-                historyItem.addEventListener('click', () => {
-                    originalImage.src = originalUrl;
-                    resultImage.src = resultUrl;
-                    emptyState.classList.add('hidden');
-                    resultContainer.classList.remove('hidden');
-                });
-                historyGrid.insertBefore(historyItem, historyGrid.firstChild);
-                
-                // Limit history to 6 items
-                if (historyGrid.children.length > 6) {
-                    historyGrid.removeChild(historyGrid.lastChild);
-                }
+            const historyItem = document.createElement('div');
+            historyItem.className = 'history-item bg-white p-2 rounded-lg shadow-sm cursor-pointer';
+            historyItem.innerHTML = `
+                <img src="${resultUrl}" class="w-full h-auto rounded" alt="History item">
+            `;
+            historyItem.addEventListener('click', () => {
+                originalImage.src = originalUrl;
+                resultImage.src = resultUrl;
+                emptyState.classList.add('hidden');
+                resultContainer.classList.remove('hidden');
+            });
+            historyGrid.insertBefore(historyItem, historyGrid.firstChild);
+            
+            if (historyGrid.children.length > 6) {
+                historyGrid.removeChild(historyGrid.lastChild);
             }
+        }
         });
     </script>
 </body>