Upload app.py with huggingface_hub

app.py

@@ -47,179 +47,6 @@ TITLE = """
 <p><em>Q&A added • All fields editable • Clear buttons • Select text and type to replace</em></p>
 </div>
 <hr>
-
-<script>
-// Auto-replace selected text when typing
-document.addEventListener('DOMContentLoaded', function() {
-    // Find all textareas and text inputs
-    const textFields = document.querySelectorAll('textarea, input[type="text"]');
-    
-    textFields.forEach(field => {
-        field.addEventListener('keydown', function(e) {
-            // If there's selected text and user types a character
-            if (this.selectionStart !== this.selectionEnd && e.key.length === 1) {
-                // Let the default behavior replace the selected text
-                return;
-            }
-        });
-    });
-    
-    // Extension communication function
-    window.getJoyCaptionData = function() {
-        const data = {};
-        
-        try {
-            // Get all textareas and inputs
-            const allFields = document.querySelectorAll('textarea, input[type="text"]');
-            
-            allFields.forEach(field => {
-                const value = field.value || '';
-                const placeholder = field.placeholder || '';
-                
-                // Input fields
-                if (placeholder.includes('keyword')) {
-                    data.keywords = value.trim();
-                } else if (placeholder.includes('mention') || placeholder.includes('Make sure')) {
-                    data.custom_instructions = value.trim();
-                } else if (placeholder.includes('question') || placeholder.includes('Ask a Question')) {
-                    data.question = value.trim();
-                }
-                // Output fields with substantial content
-                else if (value.trim().length > 20) {
-                    if (placeholder.includes('engaging')) {
-                        data.caption_engaging = value.trim();
-                    } else if (placeholder.includes('casual') || placeholder.includes('friend')) {
-                        data.caption_casual_friend = value.trim();
-                    } else if (placeholder.includes('keywords caption')) {
-                        data.caption_keywords = value.trim();
-                    } else if (placeholder.includes('answer')) {
-                        data.answer = value.trim();
-                    }
-                    // Fallback: assign to first available caption slot
-                    else if (!data.caption_engaging && field.tagName === 'TEXTAREA') {
-                        data.caption_engaging = value.trim();
-                    } else if (!data.caption_casual_friend && field.tagName === 'TEXTAREA') {
-                        data.caption_casual_friend = value.trim();
-                    } else if (!data.caption_keywords && field.tagName === 'TEXTAREA') {
-                        data.caption_keywords = value.trim();
-                    } else if (!data.answer && field.tagName === 'TEXTAREA') {
-                        data.answer = value.trim();
-                    }
-                }
-            });
-            
-            // Get uploaded image
-            const images = document.querySelectorAll('img[src*="blob:"], img[src*="data:"], img[src*="gradio"]');
-            if (images.length > 0) {
-                data.image_url = images[0].src;
-            }
-            
-            console.log('JoyCaption data prepared for extension:', data);
-            return data;
-            
-        } catch (error) {
-            console.error('Error preparing JoyCaption data:', error);
-            return {};
-        }
-    };
-    
-    // Listen for extension requests
-    window.addEventListener('message', function(event) {
-        if (event.data && event.data.action === 'getJoyCaptionData') {
-            const data = window.getJoyCaptionData();
-            event.source.postMessage({
-                action: 'joyCaptionData',
-                data: data,
-                success: Object.keys(data).length > 0
-            }, event.origin);
-        }
-    });
-    
-    // Export functionality
-    window.downloadJoyCaptionData = function() {
-        try {
-            const rawData = window.getJoyCaptionData();
-            
-            if (Object.keys(rawData).length === 0) {
-                alert('❌ No data found to export. Make sure you have generated captions first.');
-                return;
-            }
-            
-            // Package data for export
-            const exportData = {
-                timestamp: new Date().toISOString(),
-                source: 'JoyCaption',
-                data: rawData
-            };
-            
-            // Create and download JSON file
-            const jsonString = JSON.stringify(exportData, null, 2);
-            const blob = new Blob([jsonString], { type: 'application/json' });
-            const url = URL.createObjectURL(blob);
-            
-            const a = document.createElement('a');
-            a.href = url;
-            a.download = `joycaption_data_${new Date().toISOString().slice(0, 16).replace(/:/g, '-')}.json`;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            URL.revokeObjectURL(url);
-            
-            alert(`✅ Downloaded JoyCaption data with ${Object.keys(rawData).length} fields!`);
-            console.log('📥 Downloaded data:', exportData);
-            
-        } catch (error) {
-            console.error('❌ Export error:', error);
-            alert('❌ Export failed: ' + error.message);
-        }
-    };
-    
-    // Create export button
-    function createExportButton() {
-        // Remove any existing button first
-        const existingBtn = document.getElementById('joyCaption-export-btn');
-        if (existingBtn) existingBtn.remove();
-        
-        // Create a floating export button
-        const exportBtn = document.createElement('button');
-        exportBtn.id = 'joyCaption-export-btn';
-        exportBtn.innerHTML = '📥 Export JoyCaption Data';
-        exportBtn.style.cssText = `
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            z-index: 9999;
-            background: linear-gradient(135deg, #ff6b35, #f7931e);
-            color: white;
-            border: none;
-            padding: 12px 20px;
-            border-radius: 25px;
-            font-weight: 600;
-            cursor: pointer;
-            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
-            transition: all 0.3s ease;
-        `;
-        
-        exportBtn.addEventListener('mouseover', () => {
-            exportBtn.style.transform = 'translateY(-2px)';
-            exportBtn.style.boxShadow = '0 6px 16px rgba(255, 107, 53, 0.4)';
-        });
-        
-        exportBtn.addEventListener('mouseout', () => {
-            exportBtn.style.transform = 'translateY(0)';
-            exportBtn.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.3)';
-        });
-        
-        exportBtn.addEventListener('click', window.downloadJoyCaptionData);
-        
-        document.body.appendChild(exportBtn);
-        console.log('✅ Export button created');
-    }
-    
-    // Auto-create button when page loads
-    setTimeout(createExportButton, 3000); // Wait for Gradio to load
-});
-</script>
 """
 
 print("🚀 Loading Sequential Three-Tone JoyCaption system... v2.1")
@@ -496,8 +323,177 @@ def answer_question(image, question):
     
     return result if result else "❌ No answer generated"
 
+# JavaScript for export functionality
+EXPORT_JS = """
+<script>
+// JoyCaption Export System
+(function() {
+    console.log('🚀 Initializing JoyCaption Export System...');
+    
+    // Extract data from page fields
+    window.getJoyCaptionData = function() {
+        console.log('📊 Extracting JoyCaption data...');
+        const data = {};
+        
+        // Get all textareas and inputs from the page
+        const allInputs = document.querySelectorAll('textarea, input[type="text"]');
+        
+        allInputs.forEach((field, index) => {
+            const placeholder = (field.placeholder || '').toLowerCase();
+            const value = field.value ? field.value.trim() : '';
+            
+            // Skip empty fields
+            if (!value) return;
+            
+            // Map based on placeholder text and content length
+            if (placeholder.includes('engaging') || (value.length > 50 && placeholder.includes('generate engaging'))) {
+                data.caption_engaging = value;
+            } else if (placeholder.includes('casual') || placeholder.includes('friend') || (value.length > 50 && placeholder.includes('generate casual'))) {
+                data.caption_casual_friend = value;
+            } else if (placeholder.includes('keyword') && value.length > 50) {
+                data.caption_keywords = value;
+            } else if (placeholder.includes('keyword') && value.length <= 50) {
+                data.keywords = value;
+            } else if (placeholder.includes('custom') || placeholder.includes('make sure') || placeholder.includes('mention')) {
+                data.custom_instructions = value;
+            } else if (placeholder.includes('question')) {
+                data.question = value;
+            } else if (value.length > 50) {
+                // Long text likely a caption
+                if (!data.caption_engaging) data.caption_engaging = value;
+                else if (!data.caption_casual_friend) data.caption_casual_friend = value;
+                else if (!data.caption_keywords) data.caption_keywords = value;
+            }
+        });
+        
+        // Add image URLs if present
+        const images = document.querySelectorAll('img');
+        const imageUrls = [];
+        images.forEach(img => {
+            if (img.src && !img.src.includes('data:') && !img.src.includes('blob:')) {
+                imageUrls.push(img.src);
+            }
+        });
+        
+        if (imageUrls.length > 0) {
+            data.image_urls = imageUrls;
+        }
+        
+        console.log('📦 Extracted data:', data);
+        return data;
+    };
+    
+    // Listen for extension requests
+    window.addEventListener('message', function(event) {
+        if (event.data && event.data.action === 'getJoyCaptionData') {
+            const data = window.getJoyCaptionData();
+            event.source.postMessage({
+                action: 'joyCaptionData',
+                data: data,
+                success: Object.keys(data).length > 0
+            }, event.origin);
+        }
+    });
+    
+    // Export functionality
+    window.downloadJoyCaptionData = function() {
+        try {
+            const rawData = window.getJoyCaptionData();
+            
+            if (Object.keys(rawData).length === 0) {
+                alert('❌ No data found to export. Make sure you have generated captions first.');
+                return;
+            }
+            
+            // Package data for export
+            const exportData = {
+                timestamp: new Date().toISOString(),
+                source: 'JoyCaption',
+                data: rawData
+            };
+            
+            // Create and download JSON file
+            const jsonString = JSON.stringify(exportData, null, 2);
+            const blob = new Blob([jsonString], { type: 'application/json' });
+            const url = URL.createObjectURL(blob);
+            
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `joycaption_data_${new Date().toISOString().slice(0, 16).replace(/:/g, '-')}.json`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+            
+            alert(`✅ Downloaded JoyCaption data with ${Object.keys(rawData).length} fields!`);
+            console.log('📥 Downloaded data:', exportData);
+            
+        } catch (error) {
+            console.error('❌ Export error:', error);
+            alert('❌ Export failed: ' + error.message);
+        }
+    };
+    
+    // Create export button
+    function createExportButton() {
+        // Remove any existing button first
+        const existingBtn = document.getElementById('joyCaption-export-btn');
+        if (existingBtn) existingBtn.remove();
+        
+        // Create a floating export button
+        const exportBtn = document.createElement('button');
+        exportBtn.id = 'joyCaption-export-btn';
+        exportBtn.innerHTML = '📥 Export JoyCaption Data';
+        exportBtn.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            background: linear-gradient(135deg, #ff6b35, #f7931e);
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 25px;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
+            transition: all 0.3s ease;
+        `;
+        
+        exportBtn.addEventListener('mouseover', () => {
+            exportBtn.style.transform = 'translateY(-2px)';
+            exportBtn.style.boxShadow = '0 6px 16px rgba(255, 107, 53, 0.4)';
+        });
+        
+        exportBtn.addEventListener('mouseout', () => {
+            exportBtn.style.transform = 'translateY(0)';
+            exportBtn.style.boxShadow = '0 4px 12px rgba(255, 107, 53, 0.3)';
+        });
+        
+        exportBtn.addEventListener('click', window.downloadJoyCaptionData);
+        
+        document.body.appendChild(exportBtn);
+        console.log('✅ Export button created and attached to body');
+    }
+    
+    // Multiple attempts to create button after Gradio loads
+    setTimeout(createExportButton, 1000);
+    setTimeout(createExportButton, 3000);
+    setTimeout(createExportButton, 5000);
+    
+    // Also try when DOM changes (Gradio dynamic loading)
+    const observer = new MutationObserver(() => {
+        if (!document.getElementById('joyCaption-export-btn')) {
+            createExportButton();
+        }
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+})();
+</script>
+"""
+
 # Gradio Interface
-with gr.Blocks(title="Sequential Three-Tone JoyCaption", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="Sequential Three-Tone JoyCaption", theme=gr.themes.Soft(), head=EXPORT_JS) as demo:
     gr.HTML(TITLE)
     
     with gr.Row():