Update index.html
Browse files- index.html +0 -43
    	
        index.html
    CHANGED
    
    | @@ -115,30 +115,6 @@ | |
| 115 | 
             
                            ></textarea>
         | 
| 116 | 
             
                        </div>
         | 
| 117 |  | 
| 118 | 
            -
                        <!-- Quick Questions -->
         | 
| 119 | 
            -
                        <div class="space-y-3">
         | 
| 120 | 
            -
                            <p class="text-sm text-gray-600 font-medium">Quick questions:</p>
         | 
| 121 | 
            -
                            <div class="flex flex-wrap gap-2">
         | 
| 122 | 
            -
                                <button class="quick-question px-3 py-1.5 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-900 hover:text-white transition-all duration-200 font-medium">
         | 
| 123 | 
            -
                                    What's in this image?
         | 
| 124 | 
            -
                                </button>
         | 
| 125 | 
            -
                                <button class="quick-question px-3 py-1.5 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-900 hover:text-white transition-all duration-200 font-medium">
         | 
| 126 | 
            -
                                    Describe the scene
         | 
| 127 | 
            -
                                </button>
         | 
| 128 | 
            -
                                <button class="quick-question px-3 py-1.5 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-900 hover:text-white transition-all duration-200 font-medium">
         | 
| 129 | 
            -
                                    What colors do you see?
         | 
| 130 | 
            -
                                </button>
         | 
| 131 | 
            -
                                <button class="quick-question px-3 py-1.5 bg-gray-100 text-gray-700 text-sm rounded-full hover:bg-gray-900 hover:text-white transition-all duration-200 font-medium">
         | 
| 132 | 
            -
                                    Count the people
         | 
| 133 | 
            -
                                </button>
         | 
| 134 | 
            -
                            </div>
         | 
| 135 | 
            -
                        </div>
         | 
| 136 | 
            -
                        
         | 
| 137 | 
            -
                        <button id="analyzeBtn" disabled class="w-full bg-gray-900 text-white px-6 py-4 rounded-lg font-medium text-base hover:bg-gray-800 disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed transition-all duration-200 focus:ring-2 focus:ring-gray-900 focus:ring-offset-2">
         | 
| 138 | 
            -
                            <span id="analyzeText">Analyze Image</span>
         | 
| 139 | 
            -
                        </button>
         | 
| 140 | 
            -
                    </div>
         | 
| 141 | 
            -
             | 
| 142 | 
             
                    <!-- Results Section -->
         | 
| 143 | 
             
                    <div id="resultsSection" class="hidden mb-12">
         | 
| 144 | 
             
                        <div class="border border-gray-200 rounded-xl p-8 bg-gray-50">
         | 
| @@ -217,25 +193,6 @@ | |
| 217 | 
             
                            this.elements.questionInput.addEventListener('input', () => this.updateAnalyzeButton());
         | 
| 218 | 
             
                            this.elements.analyzeBtn.addEventListener('click', () => this.analyzeImage());
         | 
| 219 |  | 
| 220 | 
            -
                            // Quick question buttons
         | 
| 221 | 
            -
            document.querySelectorAll('.quick-question').forEach(btn => {
         | 
| 222 | 
            -
                btn.addEventListener('click', (e) => {
         | 
| 223 | 
            -
                    // Set the value
         | 
| 224 | 
            -
                    this.elements.questionInput.value = e.target.textContent;
         | 
| 225 | 
            -
                    // Explicitly dispatch an 'input' event
         | 
| 226 | 
            -
                    // This helps ensure styles (like text-align) are correctly applied
         | 
| 227 | 
            -
                    // and other event listeners (like updateAnalyzeButton) are triggered.
         | 
| 228 | 
            -
                    const inputEvent = new Event('input', {
         | 
| 229 | 
            -
                        bubbles: true,
         | 
| 230 | 
            -
                        cancelable: true,
         | 
| 231 | 
            -
                    });
         | 
| 232 | 
            -
                    this.elements.questionInput.dispatchEvent(inputEvent);
         | 
| 233 | 
            -
                    // Optional: You can remove the direct call to updateAnalyzeButton now
         | 
| 234 | 
            -
                    // as the dispatched event should trigger it, but calling it explicitly
         | 
| 235 | 
            -
                    // is also fine and ensures it runs.
         | 
| 236 | 
            -
                    // this.updateAnalyzeButton(); // Can be removed if the event listener handles it
         | 
| 237 | 
            -
                });
         | 
| 238 | 
            -
            });
         | 
| 239 |  | 
| 240 | 
             
                        handleDragOver(e) {
         | 
| 241 | 
             
                            e.preventDefault();
         | 
|  | |
| 115 | 
             
                            ></textarea>
         | 
| 116 | 
             
                        </div>
         | 
| 117 |  | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 118 | 
             
                    <!-- Results Section -->
         | 
| 119 | 
             
                    <div id="resultsSection" class="hidden mb-12">
         | 
| 120 | 
             
                        <div class="border border-gray-200 rounded-xl p-8 bg-gray-50">
         | 
|  | |
| 193 | 
             
                            this.elements.questionInput.addEventListener('input', () => this.updateAnalyzeButton());
         | 
| 194 | 
             
                            this.elements.analyzeBtn.addEventListener('click', () => this.analyzeImage());
         | 
| 195 |  | 
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
|  | |
| 196 |  | 
| 197 | 
             
                        handleDragOver(e) {
         | 
| 198 | 
             
                            e.preventDefault();
         | 

