Update index.html

index.html

@@ -658,15 +658,6 @@
               <input type="range" id="genSteps" min="10" max="50" step="1" value="20">
             </div>
           </div>
-          
-          <div class="form-group">
-            <label for="imageSize">Image Size</label>
-            <select id="imageSize">
-              <option value="512">512×512</option>
-              <option value="768">768×768</option>
-              <option value="1024">1024×1024</option>
-            </select>
-          </div>
         </div>
         
         <button class="btn btn-primary" id="generateImageBtn">
@@ -772,7 +763,7 @@
 
   <script>
     // API configuration
-    const API_URL = "https://multimodalart-cosxl.hf.space/api/predict";
+    const API_URL = "https://multimodalart-cosxl.hf.space/api/predict/";
     
     // DOM Elements
     const tabs = document.querySelectorAll('.tab');
@@ -949,14 +940,14 @@
         
         // Create payload
         const payload = {
+          fn_index: 3,
           data: [
             "data:image/png;base64," + base64Data,
             prompt,
             negativePrompt,
             guidance,
             stepsValue
-          ],
-          fn_index: 3  // The edit endpoint index
+          ]
         };
         
         // Call API
@@ -996,13 +987,12 @@
       }
     }
     
-    // API call for text-to-image generation
+    // API call for text-to-image generation (using provided snippet)
     async function generateImage() {
       const prompt = document.getElementById('generatePrompt').value;
       const negativePrompt = document.getElementById('generateNegPrompt').value;
       const guidance = parseFloat(document.getElementById('genGuidanceScale').value);
       const stepsValue = parseInt(document.getElementById('genSteps').value);
-      const imageSize = document.getElementById('imageSize').value;
       
       if (!prompt) {
         showNotification(errorNotification, 'Please enter a prompt');
@@ -1013,17 +1003,15 @@
       generateLoading.classList.add('active');
       
       try {
-        // Create payload
+        // Create payload using provided snippet structure
         const payload = {
+          fn_index: 4,
           data: [
             prompt,
-            negativePrompt,
+            negativePrompt || "blurry, bad anatomy", // Default if empty
             guidance,
-            stepsValue,
-            parseInt(imageSize),
-            parseInt(imageSize)
-          ],
-          fn_index: 0  // The text-to-image endpoint index
+            stepsValue
+          ]
         };
         
         // Call API
@@ -1042,11 +1030,14 @@
         const data = await response.json();
         
         if (data && data.data && data.data[0]) {
+          // Get image URL from response
+          const imageUrl = data.data[0].url;
+          
           // Set the generated image
-          generatedImage.src = data.data[0];
+          generatedImage.src = imageUrl;
           generatedImage.style.display = 'block';
           document.querySelector('#generateOutputPreview .placeholder').style.display = 'none';
-          generatedImageData = data.data[0];
+          generatedImageData = imageUrl;
           
           // Enable download button
           downloadGeneratedBtn.disabled = false;
@@ -1078,6 +1069,7 @@
     downloadGeneratedBtn.addEventListener('click', () => {
       if (!generatedImageData) return;
       
+      // Create temporary download link for generated image
       const link = document.createElement('a');
       link.href = generatedImageData;
       link.download = 'cosxl-generated-image.jpg';
@@ -1107,6 +1099,19 @@
       document.getElementById('generatePrompt').value = 'A beautiful landscape with mountains and a lake';
       document.getElementById('generateNegPrompt').value = 'blurry, low quality';
       
+      // Initialize text-to-image sliders
+      document.getElementById('genGuidanceValue').textContent = document.getElementById('genGuidanceScale').value;
+      document.getElementById('genStepsValue').textContent = document.getElementById('genSteps').value;
+      
+      // Event listeners for text-to-image sliders
+      document.getElementById('genGuidanceScale').addEventListener('input', function() {
+        document.getElementById('genGuidanceValue').textContent = this.value;
+      });
+      
+      document.getElementById('genSteps').addEventListener('input', function() {
+        document.getElementById('genStepsValue').textContent = this.value;
+      });
+      
       // Show first tab
       document.getElementById('edit-tab').classList.remove('hidden');