Update index.html

index.html

@@ -279,6 +279,19 @@
             border-radius: 20px;
             font-size: 0.8rem;
         }
+        
+        .error-box {
+            display: none;
+            background: rgba(200, 0, 0, 0.2);
+            border: 1px solid rgba(255, 0, 0, 0.3);
+            border-radius: 8px;
+            padding: 15px;
+            margin-top: 20px;
+            font-family: monospace;
+            font-size: 0.9rem;
+            max-height: 200px;
+            overflow-y: auto;
+        }
     </style>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
@@ -310,7 +323,7 @@
                 
                 <div class="form-group">
                     <label for="negativePrompt">Negative Prompt</label>
-                    <input type="text" id="negativePrompt" value="blurry, distorted" placeholder="Things to avoid in the result">
+                    <input type="text" id="negativePrompt" value="blurry, distorted, low quality, artifacts" placeholder="Things to avoid in the result">
                 </div>
                 
                 <div class="form-group">
@@ -323,9 +336,18 @@
                     <input type="range" id="steps" min="5" max="50" value="20">
                 </div>
                 
+                <div class="form-group">
+                    <label for="quality">Image Quality: <span id="qualityValue">85%</span></label>
+                    <input type="range" id="quality" min="50" max="95" step="5" value="85">
+                </div>
+                
                 <button class="btn" id="runEdit">
                     <i class="fas fa-magic"></i> Apply Edits
                 </button>
+                
+                <div class="error-box" id="errorBox">
+                    <pre id="errorDetails"></pre>
+                </div>
             </div>
             
             <div class="panel">
@@ -377,6 +399,10 @@
                 <i class="fas fa-check-circle"></i>
                 <p>More steps (20-30) generally improve quality but take longer to process</p>
             </div>
+            <div class="tip">
+                <i class="fas fa-check-circle"></i>
+                <p>Reduce image quality to 80% for faster processing with minimal quality loss</p>
+            </div>
         </div>
         
         <div class="footer">
@@ -408,10 +434,15 @@
             const scaleValue = document.getElementById('scaleValue');
             const stepsInput = document.getElementById('steps');
             const stepsValue = document.getElementById('stepsValue');
+            const qualityInput = document.getElementById('quality');
+            const qualityValue = document.getElementById('qualityValue');
+            const errorBox = document.getElementById('errorBox');
+            const errorDetails = document.getElementById('errorDetails');
             
             // Set initial slider values
             scaleValue.textContent = guidanceScaleInput.value;
             stepsValue.textContent = stepsInput.value;
+            qualityValue.textContent = qualityInput.value + '%';
             
             // Event listeners for sliders
             guidanceScaleInput.addEventListener('input', () => {
@@ -422,6 +453,10 @@
                 stepsValue.textContent = stepsInput.value;
             });
             
+            qualityInput.addEventListener('input', () => {
+                qualityValue.textContent = qualityInput.value + '%';
+            });
+            
             // File selection
             browseBtn.addEventListener('click', () => {
                 imageUpload.click();
@@ -472,11 +507,65 @@
                     // Clear previous result
                     resultImage.style.display = 'none';
                     resultPlaceholder.style.display = 'block';
+                    
+                    // Hide any previous errors
+                    errorBox.style.display = 'none';
                 };
                 
                 reader.readAsDataURL(file);
             }
             
+            // Function to compress image
+            async function compressImage(imageSrc, quality) {
+                return new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.crossOrigin = 'Anonymous';
+                    img.src = imageSrc;
+                    
+                    img.onload = () => {
+                        const canvas = document.createElement('canvas');
+                        const ctx = canvas.getContext('2d');
+                        
+                        // Calculate new dimensions to max 1024px
+                        let width = img.width;
+                        let height = img.height;
+                        const maxDimension = 1024;
+                        
+                        if (width > maxDimension || height > maxDimension) {
+                            const ratio = Math.min(maxDimension / width, maxDimension / height);
+                            width = Math.floor(width * ratio);
+                            height = Math.floor(height * ratio);
+                        }
+                        
+                        canvas.width = width;
+                        canvas.height = height;
+                        
+                        // Draw image on canvas
+                        ctx.drawImage(img, 0, 0, width, height);
+                        
+                        // Convert to blob with specified quality
+                        canvas.toBlob(blob => {
+                            if (!blob) {
+                                reject(new Error('Image compression failed'));
+                                return;
+                            }
+                            resolve(blob);
+                        }, 'image/jpeg', quality / 100);
+                    };
+                    
+                    img.onerror = () => {
+                        reject(new Error('Failed to load image for compression'));
+                    };
+                });
+            }
+            
+            // Show error details
+            function showError(message, details) {
+                errorDetails.textContent = details || message;
+                errorBox.style.display = 'block';
+                console.error(message, details);
+            }
+            
             // Run the edit process
             runEditBtn.addEventListener('click', async () => {
                 // Validate inputs
@@ -493,33 +582,40 @@
                 // Show loading indicator
                 runEditBtn.disabled = true;
                 loadingIndicator.style.display = 'block';
+                errorBox.style.display = 'none';
                 
                 try {
+                    // Compress image
+                    const quality = parseInt(qualityInput.value) / 100;
+                    const compressedBlob = await compressImage(originalImage.src, quality);
+                    
                     // Create FormData
                     const formData = new FormData();
-                    
-                    // Convert data URL to blob
-                    const blob = await fetch(originalImage.src).then(r => r.blob());
-                    formData.append('image', blob, 'image.png');
-                    
-                    // Add other parameters
+                    formData.append('image', compressedBlob, 'image.jpg');
                     formData.append('prompt', promptInput.value);
                     formData.append('negative_prompt', negativePromptInput.value);
                     formData.append('guidance_scale', guidanceScaleInput.value);
                     formData.append('steps', stepsInput.value);
                     
                     // Make request to Hugging Face API
-                    const response = await fetch('https://multimodalart-cosxl.hf.space/run/run_edit', {
+                    const response = await fetch('https://multimodalart-cosxl.hf.space/run/predict', {
                         method: 'POST',
                         body: formData
                     });
                     
                     if (!response.ok) {
-                        throw new Error(`API request failed with status ${response.status}`);
+                        const errorText = await response.text();
+                        throw new Error(`API request failed: ${response.status} ${response.statusText}\n${errorText}`);
                     }
                     
                     // Get the result image
                     const resultBlob = await response.blob();
+                    
+                    if (!resultBlob.type.startsWith('image/')) {
+                        const errorData = await resultBlob.text();
+                        throw new Error(`API returned non-image response: ${errorData}`);
+                    }
+                    
                     const resultUrl = URL.createObjectURL(resultBlob);
                     
                     // Display result
@@ -528,8 +624,7 @@
                     resultPlaceholder.style.display = 'none';
                     
                 } catch (error) {
-                    console.error('Error processing image:', error);
-                    alert('Error processing image. Please try again.');
+                    showError('Error processing image:', error.message);
                 } finally {
                     // Hide loading indicator
                     runEditBtn.disabled = false;