CubicZebra/ai-vision-studio-smart-image-processing-hub

1// Shared JavaScript across all pages2console.log('AI Vision Studio loaded');3 4// DOM Elements5const imageUpload = document.getElementById('imageUpload');6const previewImage = document.getElementById('previewImage');7const selectedImagePreview = document.getElementById('selectedImagePreview');8const processBtn = document.getElementById('processBtn');9const progressBar = document.getElementById('progressBar');10const progressPercentage = document.getElementById('progressPercentage');11const resultsContainer = document.getElementById('resultsContainer');12const confidenceScore = document.getElementById('confidenceScore');13const confidenceBar = document.getElementById('confidenceBar');14 15// Sample AI predictions data16const samplePredictions = [17    { label: "Landscape", confidence: 0.92, color: "green" },18    { label: "Urban Scene", confidence: 0.15, color: "blue" },19    { label: "Portrait", confidence: 0.08, color: "purple" },20    { label: "Abstract Art", confidence: 0.05, color: "yellow" }21];22 23// Event Listeners24document.addEventListener('DOMContentLoaded', function() {25    // Image upload handler26    imageUpload.addEventListener('change', handleImageUpload);27    28    // Gallery image click handlers29    document.querySelectorAll('.gallery-image').forEach(img => {30        img.addEventListener('click', function() {31            loadGalleryImage(this.src);32        });33    });34    35    // Process button handler36    processBtn.addEventListener('click', startAIProcessing);37});38 39function handleImageUpload(event) {40    const file = event.target.files[0];41    if (file) {42        const reader = new FileReader();43        reader.onload = function(e) {44            previewImage.src = e.target.result;45            selectedImagePreview.classList.remove('hidden');46        };47        reader.readAsDataURL(file);48    }49}50 51function loadGalleryImage(src) {52    previewImage.src = src;53    selectedImagePreview.classList.remove('hidden');54    55    // Scroll to preview56    selectedImagePreview.scrollIntoView({ behavior: 'smooth', block: 'center' });57}58 59function startAIProcessing() {60    if (!previewImage.src || previewImage.src.includes('data:image')) {61        alert('Please select an image first!');62        return;63    }64 65    // Reset progress66    progressBar.style.width = '0%';67    progressPercentage.textContent = '0%';68    69    // Disable process button70    processBtn.disabled = true;71    processBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 mr-2 inline animate-spin"></i>Processing...';72    feather.replace();73 74    // Simulate AI processing with progress updates75    let progress = 0;76    const interval = setInterval(() => {77        progress += Math.random() * 15;78        if (progress > 100) progress = 100;79        80        progressBar.style.width = progress + '%';81        progressPercentage.textContent = Math.round(progress) + '%';82        83        // Update processing steps84        updateProcessingSteps(progress);85        86        if (progress === 100) {87            clearInterval(interval);88            showResults();89            processBtn.disabled = false;90            processBtn.innerHTML = '<i data-feather="play" class="w-5 h-5 mr-2 inline"></i>Start AI Processing';91            feather.replace();92        }93    }, 300);94}95 96function updateProcessingSteps(progress) {97    const stepFeature = document.getElementById('stepFeature');98    const stepAnalysis = document.getElementById('stepAnalysis');99    const stepResults = document.getElementById('stepResults');100 101    if (progress >= 25) {102        stepFeature.className = 'flex items-center text-green-400';103        stepFeature.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i><span>Features extracted</span>';104    }105    106    if (progress >= 60) {107        stepAnalysis.className = 'flex items-center text-green-400';108        stepAnalysis.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i><span>AI analysis completed</span>';109    }110    111    if (progress >= 90) {112        stepResults.className = 'flex items-center text-green-400';113        stepResults.innerHTML = '<i data-feather="check" class="w-4 h-4 mr-2"></i><span>Results generated</span>';114    }115    116    feather.replace();117}118 119function showResults() {120    const topPrediction = samplePredictions[0];121    const confidence = Math.round(topPrediction.confidence * 100);122    123    // Update confidence score124    confidenceScore.textContent = confidence + '%';125    confidenceBar.style.width = confidence + '%';126    127    // Display results128    resultsContainer.innerHTML = `129        <div class="w-full">130            <div class="flex justify-between items-center mb-6">131                <h3 class="text-xl font-bold text-white">Prediction Results</h3>132                <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold">133                    ${topPrediction.label}134                </span>135            </div>136            137            <div class="grid md:grid-cols-2 gap-6">138                <!-- Original Image -->139                <div class="text-center">140                    <h4 class="text-gray-300 mb-3">Original</h4>141                <img src="${previewImage.src}" alt="Original" class="rounded-lg w-full max-h-48 object-cover">142                </div>143                144                <!-- AI Enhanced Image -->145                <div class="text-center">146                    <h4 class="text-gray-300 mb-3">AI Enhanced</h4>147                <img src="${previewImage.src}" alt="AI Enhanced" class="rounded-lg w-full max-h-48 object-cover glow">148                </div>149            </div>150            151            <!-- Confidence Breakdown -->152            <div class="mt-6">153                <h4 class="text-gray-300 mb-3">Confidence Breakdown</h4>154                <div class="space-y-2">155                ${samplePredictions.map(pred => `156                    <div class="flex justify-between items-center">157                        <span class="text-gray-300">${pred.label}</span>158                        <div class="flex items-center">159                            <span class="text-white mr-2">${Math.round(pred.confidence * 100)}%</span>160                        <div class="w-24 bg-gray-600 rounded-full h-2">161                            <div class="h-2 rounded-full bg-${pred.color}-500" style="width: ${Math.round(pred.confidence * 100)}%"></div>162                    </div>163                `).join('')}164            </div>165        </div>166    `;167    168    // Add glow effect to enhanced image169    setTimeout(() => {170        const enhancedImg = resultsContainer.querySelector('.glow');171        if (enhancedImg) {172            enhancedImg.style.boxShadow = '0 0 20px rgba(59, 130, 246, 0.5)';173        }174    }, 100);175    176    feather.replace();177}178 179// Initialize app180document.addEventListener('DOMContentLoaded', function() {181    console.log('AI Vision Studio initialized');182    183    // Add some interactive features184    document.querySelectorAll('.gallery-image').forEach(img => {185        img.addEventListener('mouseenter', function() {186            this.style.transform = 'scale(1.05)';187            this.style.transition = 'transform 0.3s ease';188        });189        190        img.addEventListener('mouseleave', function() {191            this.style.transform = 'scale(1)';192        });193    });194});