script.js

// Main application script
document.addEventListener('DOMContentLoaded', function() {
    // Initialize all feather icons
    feather.replace();
    
    // Slider value display update
    const sliders = document.querySelectorAll('input[type="range"]');
    sliders.forEach(slider => {
        const updateValue = () => {
            const label = slider.previousElementSibling;
            const valueSpan = label.querySelector('span');
            if (valueSpan) {
                valueSpan.textContent = slider.value;
            }
        };
        
        slider.addEventListener('input', updateValue);
        updateValue(); // Initial call
    });
    
    // File upload interaction
    const uploadArea = document.querySelector('.border-dashed');
    const fileInput = uploadArea.querySelector('input[type="file"]');
    
    uploadArea.addEventListener('click', () => {
        fileInput.click();
    });
    
    fileInput.addEventListener('change', function(e) {
        if (this.files && this.files[0]) {
            const reader = new FileReader();
            
            reader.onload = function(e) {
                uploadArea.innerHTML = `
                    <div class="flex flex-col items-center">
                        <img src="${e.target.result}" alt="Preview" class="max-h-48 rounded-lg">
                        <p class="mt-2 text-sm">${this.files[0].name}</p>
                    </div>
                `;
            }
            
            reader.readAsDataURL(this.files[0]);
        }
    });
    // Handle LoRA selection
    const loraSelector = document.getElementById('loraSelector');
    
    // Generate button interaction
    const generateBtn = document.getElementById('generateBtn');
    const videoPreview = document.getElementById('videoPreview');
    
    generateBtn.addEventListener('click', function() {
        // Validate inputs
        const fileInput = document.querySelector('input[type="file"]');
        const promptTextarea = document.querySelector('textarea[placeholder="Describe the video you want to create..."]');
        
        if (!fileInput.files.length) {
            alert('Please upload an image first.');
            return;
        }
        
        if (!promptTextarea.value.trim()) {
            alert('Please enter a prompt.');
            return;
        }
        
        // Add loading state
        const originalText = this.innerHTML;
        this.innerHTML = `
            <div class="flex items-center justify-center">
                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                Generating...
            </div>
        `;
        this.disabled = true;
        
        // Get selected LoRA model
        const selectedLora = loraSelector.selectedValue;
        console.log('Selected LoRA:', selectedLora);
        
        // Optimize prompt based on selected LoRA
        const originalPrompt = promptTextarea.value;
        const optimizedPrompt = optimizePromptForLora(originalPrompt, selectedLora.trigger);
        promptTextarea.value = optimizedPrompt;
        console.log('Optimized prompt:', optimizedPrompt);
        
        // Simulate processing time
        setTimeout(() => {
            // Reset button
            this.innerHTML = originalText;
            this.disabled = false;
            
            // Show result in video preview area
            videoPreview.innerHTML = `
                <video controls class="w-full h-full rounded-lg">
                    <source src="http://static.photos/technology/1200x630/123" type="video/mp4">
                    Your browser does not support the video tag.
                </video>
            `;
        }, 3000);
    });
});

function optimizePromptForLora(basePrompt, loraTrigger) {
    if (!loraTrigger) return basePrompt;
    
    // Base model optimizations
    const baseOptimizations = [
        "high quality, detailed, sharp focus",
        "professional lighting, cinematic composition",
        "8k resolution, ultra detailed",
        "masterpiece, best quality"
    ];
    
    // Motion-specific enhancements
    const motionEnhancements = [
        "smooth camera motion",
        "dynamic movement",
        "fluid animation",
        "cinematic pan"
    ];
    
    // Combine all elements
    const allElements = [...baseOptimizations, ...motionEnhancements];
    
    // Check if base prompt already contains optimization keywords
    const hasQualityKeywords = baseOptimizations.some(keyword => 
        basePrompt.toLowerCase().includes(keyword.split(',')[0].toLowerCase())
    );
    
    const hasMotionKeywords = motionEnhancements.some(keyword => 
        basePrompt.toLowerCase().includes(keyword.split(',')[0].toLowerCase())
    );
    
    // Add missing optimizations
    let optimizedPrompt = basePrompt;
    
    if (!hasQualityKeywords) {
        optimizedPrompt = `${allElements.slice(0, 2).join(', ')}, ${optimizedPrompt}`;
    }
    
    if (!hasMotionKeywords) {
        optimizedPrompt = `${optimizedPrompt}, ${motionEnhancements.slice(0, 2).join(', ')}`;
    }
    
    // Add LoRA trigger word
    if (loraTrigger && !basePrompt.toLowerCase().includes(loraTrigger.toLowerCase())) {
        optimizedPrompt = `${optimizedPrompt}, ${loraTrigger}`;
    }
    
    return optimizedPrompt;
}