Update static/js/main.js

static/js/main.js

@@ -1,22 +1,20 @@
 /**
- * Radiant AI - Main Logic v4.0 (Production Stable)
- * Handles: Auto-Apply, Independent Tab Chaining, History, and Session Persistence.
+ * Radiant AI - Main Logic v3.3
+ * Features: Auto-Apply, Independent Tab Chaining, History, Robust Session
  */
 
 const AppState = {
     // Session State
-    uploadFilename: localStorage.getItem('radiant_upload_filename') || null, // The Clean Original
-    currentFilename: localStorage.getItem('radiant_filename') || null,       // The Latest Result
+    uploadFilename: localStorage.getItem('radiant_upload_filename') || null, // Clean Original
+    currentFilename: localStorage.getItem('radiant_filename') || null,       // Latest Edited
     currentUrl: localStorage.getItem('radiant_current_url') || null,
     
     // AI Lab specific state
     selectedAIModel: null,
 
-    // History Stack
     history: [],      
     historyIndex: -1,
 
-    // Studio Params (Active State)
     serverParams: {
         brightness: 0, contrast: 0, saturation: 0, sharpness: 0,
         rotation: 0, flip_h: false, flip_v: false, filter: 'none'
@@ -27,57 +25,32 @@ const AppState = {
 };
 
 document.addEventListener('DOMContentLoaded', () => {
-    console.log("🚀 Radiant AI Client v4.0 Loaded");
     initSession();
     setupGlobalListeners();
     setupKeyboardShortcuts();
 });
 
-// ==========================================================================
-// 1. CHAINING & SOURCE LOGIC (The Bug Fixer)
-// ==========================================================================
+// --- 1. Helper: Determine Source File ---
 
 /**
- * Determines which file to process based on the Tab's Checkbox.
- * @param {string} checkboxId - ID of the checkbox in the active tab
- * @returns {string} - The filename to send to the backend
+ * Returns the correct filename to process based on the tab's checkbox state.
+ * @param {string} checkboxId - The ID of the checkbox in the active tab
  */
 function getSourceFilename(checkboxId) {
     const cb = document.getElementById(checkboxId);
     
-    // If Checkbox is CHECKED and we have a previous result -> Use that result (Chain)
+    // If checkbox exists AND is checked AND we have a previous result -> Chain it
     if (cb && cb.checked && AppState.currentFilename) {
-        // console.log("🔗 Chaining ON: Using previous result");
+        console.log(`🔗 Chaining Enabled: Using ${AppState.currentFilename}`);
         return AppState.currentFilename;
     }
     
-    // Default: Use the original Clean Upload
-    // console.log("✨ Chaining OFF: Using original file");
+    // Otherwise use the clean original
+    console.log(`✨ Using Original: ${AppState.uploadFilename}`);
     return AppState.uploadFilename;
 }
 
-// Special Logic for Studio "Bake" Checkbox
-function toggleStudioChaining(checkbox) {
-    if(checkbox.checked) {
-        if(confirm("Bake current edits? This sets the current image as the new Original and resets sliders to 0.")) {
-            // Make current result the new "Original"
-            AppState.uploadFilename = AppState.currentFilename;
-            localStorage.setItem('radiant_upload_filename', AppState.currentFilename);
-            
-            // Visual Reset
-            resetSlidersUI();
-            
-            // Uncheck box to indicate action complete
-            checkbox.checked = false; 
-        } else {
-            checkbox.checked = false;
-        }
-    }
-}
-
-// ==========================================================================
-// 2. SESSION & HISTORY
-// ==========================================================================
+// --- 2. Session & History ---
 
 function initSession() {
     const savedParams = localStorage.getItem('radiant_params');
@@ -86,24 +59,20 @@ function initSession() {
     if (AppState.currentUrl && AppState.uploadFilename) {
         restoreImageToUI(AppState.currentUrl);
         updateSlidersUI();
-        // If history empty, init it
         if(AppState.history.length === 0) pushHistory(AppState.currentUrl, AppState.serverParams);
     }
 }
 
 function pushHistory(url, params) {
-    // Remove future history if we are in middle of stack
     if (AppState.historyIndex < AppState.history.length - 1) {
         AppState.history = AppState.history.slice(0, AppState.historyIndex + 1);
     }
-    
-    const paramsCopy = params ? JSON.parse(JSON.stringify(params)) : {};
-    
+    const paramsCopy = JSON.parse(JSON.stringify(params));
     AppState.history.push({ url: url, params: paramsCopy });
     AppState.historyIndex++;
     
     localStorage.setItem('radiant_current_url', url);
-    if(params) localStorage.setItem('radiant_params', JSON.stringify(params));
+    localStorage.setItem('radiant_params', JSON.stringify(params));
 }
 
 function undoEdit() {
@@ -122,70 +91,69 @@ function redoEdit() {
 
 function restoreState(state) {
     restoreImageToUI(state.url);
-    // Restore Studio Params if they exist in this history state
-    if(state.params && Object.keys(state.params).length > 0) {
-        AppState.serverParams = JSON.parse(JSON.stringify(state.params));
-        updateSlidersUI();
-    }
-    
-    // We also update currentUrl so subsequent edits start from here (if chaining)
-    // But we need to extract filename from URL for backend processing
-    // URL format: /static/uploads/filename.ext?t=...
-    const parts = state.url.split('?')[0].split('/');
-    AppState.currentFilename = parts[parts.length - 1];
+    AppState.serverParams = JSON.parse(JSON.stringify(state.params));
+    updateSlidersUI();
 }
 
-// ==========================================================================
-// 3. STUDIO LOGIC (Auto-Apply)
-// ==========================================================================
+// --- 3. Studio Logic (Auto-Apply + Chaining) ---
+
+// Special Chaining Logic for Studio:
+// If "Bake" is enabled, we commit the current state as the new "Original" 
+// and reset sliders to 0 so you can edit on top.
+function toggleStudioChaining(checkbox) {
+    if(checkbox.checked) {
+        if(confirm("Bake current edits? This will reset sliders to 0 but keep the look.")) {
+            // "Bake" logic: Set current edited file as the new "Original"
+            AppState.uploadFilename = AppState.currentFilename;
+            localStorage.setItem('radiant_upload_filename', AppState.currentFilename);
+            
+            // Reset params to 0 (visual reset)
+            AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
+            updateSlidersUI();
+            
+            // Uncheck box automatically after baking (optional UX choice)
+            checkbox.checked = false; 
+        } else {
+            checkbox.checked = false;
+        }
+    }
+}
 
 function handleSliderChange(param, value) {
     if(!AppState.uploadFilename) return;
-    
-    // Update Text
-    const label = document.getElementById(`val-${param}`);
-    if (label) label.innerText = value;
-    
-    // Update State
+    document.getElementById(`val-${param}`).innerText = value;
     AppState.serverParams[param] = parseInt(value);
-    
-    // Debounce
     if (AppState.debounceTimer) clearTimeout(AppState.debounceTimer);
-    AppState.debounceTimer = setTimeout(() => processStudioEdit(), 500);
+    AppState.debounceTimer = setTimeout(() => processAutoEdit(), 500);
 }
 
 function handleFilterClick(filterName) {
     if(!AppState.uploadFilename) return alert("Upload image first");
-    
-    // UI Update
     document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
     if(event && event.target) event.target.classList.add('active');
-    
     AppState.serverParams.filter = filterName;
-    processStudioEdit();
+    processAutoEdit();
 }
 
 function triggerAutoApply(action) {
     if(!AppState.uploadFilename) return alert("Upload image first");
-    
     if (action === 'rotate_right') AppState.serverParams.rotation = (AppState.serverParams.rotation + 90) % 360;
     else if (action === 'rotate_left') AppState.serverParams.rotation = (AppState.serverParams.rotation - 90) % 360;
     else if (action === 'flip_h') AppState.serverParams.flip_h = !AppState.serverParams.flip_h;
     else if (action === 'flip_v') AppState.serverParams.flip_v = !AppState.serverParams.flip_v;
-    
-    processStudioEdit();
+    processAutoEdit();
 }
 
-async function processStudioEdit() {
+async function processAutoEdit() {
     if (AppState.isProcessing) return;
-    setLoading(true);
+    const overlay = document.getElementById('processingOverlay');
+    if(overlay) overlay.style.display = 'flex';
+    AppState.isProcessing = true;
 
     try {
-        // Studio always uses uploadFilename (Clean Source) unless "Bake" was used
-        const payload = { 
-            filename: AppState.uploadFilename, 
-            options: AppState.serverParams 
-        };
+        // Studio always uses uploadFilename (the clean source) 
+        // unless "Bake" was triggered (which updates uploadFilename)
+        const payload = { filename: AppState.uploadFilename, options: AppState.serverParams };
         
         const res = await fetch('/api/process-studio', {
             method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
@@ -193,33 +161,39 @@ async function processStudioEdit() {
         const data = await res.json();
         
         if (data.success) {
-            handleSuccess(data);
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+            restoreImageToUI(data.url);
             pushHistory(data.url, AppState.serverParams);
-        } else {
-            console.error(data.error);
         }
     } catch (err) { console.error(err); } 
-    finally { setLoading(false); }
+    finally { 
+        if(overlay) overlay.style.display = 'none'; 
+        AppState.isProcessing = false; 
+    }
 }
 
-// ==========================================================================
-// 4. VISION LOGIC
-// ==========================================================================
+// --- 4. VISION LOGIC ---
 
 async function runVisionTask(taskType) {
     if(!AppState.uploadFilename) return alert("Please upload an image first.");
 
-    // Check Checkbox for Chaining
+    // Determine Source File (Chain or Original)
     const sourceFile = getSourceFilename('visionChainingCheckbox');
-    
-    // UI Setup
-    document.getElementById('visionOverlay').style.display = 'none'; // Hide old overlays
-    setLoading(true);
+
+    const loader = document.getElementById('visionLoading');
+    const img = document.getElementById('visionPreview');
+    const overlay = document.getElementById('visionOverlay');
+    const ph = document.getElementById('visionPlaceholder');
 
     const payload = { filename: sourceFile, task: taskType };
     if (taskType === 'replace_bg') payload.color = document.getElementById('bgColorPicker').value;
     if (taskType === 'face_blur') payload.value = document.getElementById('blurSlider').value;
 
+    if(loader) loader.style.display = 'flex';
+    if(img) img.style.filter = 'blur(5px) grayscale(80%)';
+    if(overlay) overlay.style.display = 'none';
+
     try {
         const res = await fetch('/api/process-vision', {
             method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload)
@@ -227,132 +201,98 @@ async function runVisionTask(taskType) {
         const data = await res.json();
 
         if(data.success) {
-            handleSuccess(data);
-            pushHistory(data.url, null); // Vision tasks don't have slider params to save
-
-            // Handle Detections Overlay
-            if(data.detections && data.detections.length > 0) {
-                const overlay = document.getElementById('visionOverlay');
-                if(overlay) {
-                    overlay.style.display = 'block';
-                    document.getElementById('detectionList').innerHTML = data.detections.map(d => 
-                        `<li>• <b>${d.label}</b> <small>${(d.conf*100).toFixed(0)}%</small></li>`
-                    ).join('');
-                }
+            // Update current filename so subsequent chains use this result
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+
+            const freshUrl = `${data.url}?t=${new Date().getTime()}`;
+            if(img) { img.src = freshUrl; img.style.display = 'block'; img.style.filter = 'none'; }
+            if(ph) ph.style.display = 'none';
+            
+            document.getElementById('visionDownload').href = data.url;
+            document.getElementById('visionActionBar').style.display = 'flex';
+
+            if(data.detections && data.detections.length > 0 && overlay) {
+                overlay.style.display = 'block';
+                document.getElementById('detectionList').innerHTML = data.detections.map(d => 
+                    `<li>• <b>${d.label}</b> <small>${(d.conf*100).toFixed(0)}%</small></li>`
+                ).join('');
             }
         } else { alert("Vision Error: " + data.error); }
     } catch(err) { alert("Server Error"); } 
-    finally { setLoading(false); }
+    finally {
+        if(loader) loader.style.display = 'none';
+        if(img) img.style.filter = 'none';
+    }
 }
 
-// ==========================================================================
-// 5. AI LABORATORY LOGIC
-// ==========================================================================
+// --- 5. AI LABORATORY LOGIC ---
 
 function selectAIModel(task, card) {
     AppState.selectedAIModel = task;
     document.querySelectorAll('.model-card').forEach(c => c.classList.remove('active'));
     card.classList.add('active');
-    
-    if (AppState.uploadFilename) document.getElementById('btnRunAI').disabled = false;
+    const btn = document.getElementById('btnRunAI');
+    if (AppState.uploadFilename) btn.disabled = false;
 }
 
 async function runAITask() {
-    if(!AppState.uploadFilename || !AppState.selectedAIModel) return alert("Select an image and a model.");
+    if(!AppState.uploadFilename || !AppState.selectedAIModel) return alert("Select an image and a model first.");
 
-    // Check Checkbox for Chaining
+    // Determine Source File (Chain or Original)
     const sourceFile = getSourceFilename('aiChainingCheckbox');
-    
-    // Prepare UI
+
+    const loader = document.getElementById('aiLoader');
     const outImg = document.getElementById('aiOutputImg');
+    const inImg = document.getElementById('aiInputImg');
     const actions = document.getElementById('aiActions');
-    const inputPreview = document.getElementById('aiInputImg');
-    const aiLoader = document.getElementById('aiLoader');
 
-    // Show what is being processed
-    if(sourceFile === AppState.currentFilename) {
-        inputPreview.src = `${AppState.currentUrl}?t=${new Date().getTime()}`;
+    // Update Input Preview to match what we are processing
+    if(sourceFile !== AppState.uploadFilename) {
+        // If chaining, show the previous result as the input
+        inImg.src = `${AppState.currentUrl}?t=${new Date().getTime()}`;
     } else {
-        inputPreview.src = `${AppState.originalUrl}?t=${new Date().getTime()}`;
+        // Else show original
+        inImg.src = `${AppState.originalUrl}?t=${new Date().getTime()}`;
     }
 
     outImg.style.display = 'none';
     actions.style.display = 'none';
-    if(aiLoader) aiLoader.style.display = 'flex'; // Use AI specific loader
+    if(loader) loader.style.display = 'flex';
 
     try {
         const res = await fetch('/api/process-ai', {
-            method: 'POST', headers: {'Content-Type': 'application/json'},
-            body: JSON.stringify({ filename: sourceFile, task: AppState.selectedAIModel })
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                filename: sourceFile,
+                task: AppState.selectedAIModel
+            })
         });
+
         const data = await res.json();
 
         if(data.success) {
-            // Manually handle AI UI because it has a split view
+            // Update current filename so next chain uses this
+            AppState.currentFilename = data.filename;
+            localStorage.setItem('radiant_filename', data.filename);
+            localStorage.setItem('radiant_current_url', data.url);
+
             outImg.src = `${data.url}?t=${new Date().getTime()}`;
             outImg.style.display = 'block';
             document.getElementById('aiDownload').href = data.url;
             actions.style.display = 'flex';
-            
-            // Also update global state so other tabs can use this result
-            handleSuccess(data, false); // false = don't auto-update global main image tags yet to keep split view valid?
-            // Actually, we SHOULD update global state so utilities can see it
-            restoreImageToUI(data.url);
-            pushHistory(data.url, null);
-        } else { alert("AI Error: " + data.error); }
-    } catch(err) { alert("Connection Failed"); } 
-    finally { if(aiLoader) aiLoader.style.display = 'none'; }
-}
-
-// ==========================================================================
-// 6. SHARED HELPERS
-// ==========================================================================
-
-function handleSuccess(data, updateUI=true) {
-    AppState.currentFilename = data.filename;
-    localStorage.setItem('radiant_filename', data.filename);
-    
-    if(updateUI) restoreImageToUI(data.url);
-}
-
-function setLoading(isLoading) {
-    AppState.isProcessing = isLoading;
-    // Generic overlays
-    const overlays = document.querySelectorAll('#processingOverlay, #visionLoading');
-    overlays.forEach(el => el.style.display = isLoading ? 'flex' : 'none');
-    
-    // Add simple blur effect to images while loading
-    const imgs = document.querySelectorAll('img[id$="Preview"], img[id$="InputImg"]');
-    imgs.forEach(img => img.style.opacity = isLoading ? '0.5' : '1');
+        } else {
+            alert("AI Error: " + data.error);
+        }
+    } catch(err) {
+        alert("Server connection failed.");
+    } finally {
+        if(loader) loader.style.display = 'none';
+    }
 }
 
-function restoreImageToUI(url) {
-    const fresh = `${url}?t=${new Date().getTime()}`;
-    
-    // Update all Preview Images
-    ['imagePreview', 'visionPreview', 'aiInputImg', 'utilPreview'].forEach(id => {
-        const el = document.getElementById(id);
-        if(el) { el.src = fresh; el.style.display = 'block'; el.style.filter = 'none'; el.style.transform = 'none'; }
-    });
-    
-    // Hide Placeholders
-    ['placeholderState', 'visionPlaceholder', 'aiPlaceholder', 'utilPlaceholder'].forEach(id => {
-        const el = document.getElementById(id);
-        if(el) el.style.display = 'none';
-    });
-
-    // Update Downloads
-    const dls = document.querySelectorAll('#downloadLink, #visionDownload, #utilDownload');
-    dls.forEach(el => el.href = fresh);
-    
-    // Show Action Bars
-    const bars = document.querySelectorAll('#actionBar, #visionActionBar');
-    bars.forEach(el => el.style.display = 'flex');
-    
-    // Special: AI Tab Split View
-    const aiWork = document.getElementById('aiWorkArea');
-    if(aiWork) aiWork.style.display = 'grid';
-}
+// --- 6. Upload & Helpers ---
 
 function setupGlobalListeners() {
     ['fileInput', 'visionFileInput', 'aiFileInput', 'utilFileInput'].forEach(id => {
@@ -368,7 +308,7 @@ async function handleUpload(e) {
     const formData = new FormData();
     formData.append('file', file);
     
-    // Loading State
+    // Show loading
     const btn = e.target.nextElementSibling;
     const oldText = btn ? btn.innerHTML : '';
     if(btn) btn.innerHTML = 'Uploading...';
@@ -378,55 +318,70 @@ async function handleUpload(e) {
         const data = await res.json();
         
         if(data.success) {
-            // New Session Reset
-            AppState.uploadFilename = data.filename;
-            AppState.currentFilename = data.filename;
+            // New Session
+            AppState.uploadFilename = data.filename; 
+            AppState.currentFilename = data.filename; // Init current as original
             AppState.originalUrl = data.url;
             AppState.currentUrl = data.url;
+            
             AppState.history = [];
             AppState.historyIndex = -1;
-            
-            // Reset Studio Params
             AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
-            resetSlidersUI();
-
-            // Persist
+            
             localStorage.setItem('radiant_upload_filename', data.filename);
             localStorage.setItem('radiant_filename', data.filename);
-            localStorage.setItem('radiant_original_url', data.url);
             localStorage.setItem('radiant_current_url', data.url);
+            localStorage.setItem('radiant_original_url', data.url);
             
-            // Init UI
             pushHistory(data.url, AppState.serverParams);
             restoreImageToUI(data.url);
+            updateSlidersUI();
             
-            // Enable AI Button if model selected
+            // Enable AI button if model selected
             if(AppState.selectedAIModel) document.getElementById('btnRunAI').disabled = false;
+            
+            // Show comparison view in AI tab
+            const aiWork = document.getElementById('aiWorkArea');
+            const aiPlace = document.getElementById('aiPlaceholder');
+            if(aiWork) aiWork.style.display = 'grid';
+            if(aiPlace) aiPlace.style.display = 'none';
         }
     } catch(err) { alert("Upload error"); }
-    finally { 
-        if(btn) btn.innerHTML = oldText; 
-        e.target.value = ''; // Allow re-uploading same file
-    }
+    finally { if(btn) btn.innerHTML = oldText; e.target.value = ''; }
+}
+
+function restoreImageToUI(url) {
+    const fresh = `${url}?t=${new Date().getTime()}`;
+    ['imagePreview', 'visionPreview', 'aiInputImg', 'utilPreview'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) { el.src = fresh; el.style.display = 'block'; }
+    });
+    
+    ['placeholderState', 'visionPlaceholder', 'aiPlaceholder', 'utilPlaceholder'].forEach(id => {
+        const el = document.getElementById(id);
+        if(el) el.style.display = 'none';
+    });
+
+    const aiWork = document.getElementById('aiWorkArea');
+    if(aiWork && url) aiWork.style.display = 'grid';
+
+    const dl = document.getElementById('downloadLink');
+    if(dl) dl.href = fresh;
+    const bar = document.getElementById('actionBar');
+    if(bar) bar.style.display = 'flex';
 }
 
 function updateSlidersUI() {
     const p = AppState.serverParams;
-    // Set Slider Values
     setVal('brightness', p.brightness);
     setVal('contrast', p.contrast);
     setVal('saturation', p.saturation);
     setVal('sharpness', p.sharpness);
-    
-    // Set Filter Buttons
     document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
     const btns = document.querySelectorAll('.filter-btn');
     btns.forEach(b => {
-        // Simple text matching for active state
-        const txt = b.innerText.toLowerCase();
-        if(txt === p.filter || (p.filter === 'none' && txt === 'normal')) {
-            b.classList.add('active');
-        }
+        if(b.innerText.toLowerCase() === p.filter) b.classList.add('active');
+        else if (p.filter === 'none' && b.innerText === 'Normal') b.classList.add('active');
     });
 }
 
@@ -438,19 +393,17 @@ function setVal(id, val) {
 }
 
 function resetOriginal() {
-    if(AppState.uploadFilename && confirm("Reset to Original Image?")) {
-        // Reset Logic
+    if(AppState.uploadFilename && confirm("Reset all edits?")) {
         AppState.serverParams = { brightness: 0, contrast: 0, saturation: 0, sharpness: 0, rotation: 0, flip_h: false, flip_v: false, filter: 'none' };
         
-        // Reset File Pointer
+        // Reset state to original
         AppState.currentFilename = AppState.uploadFilename;
         localStorage.setItem('radiant_filename', AppState.uploadFilename);
         
-        // Update
-        processStudioEdit(); // Will re-process original with 0 params
-        resetSlidersUI();
+        processAutoEdit();
+        updateSlidersUI();
         
-        // Reset AI Output View
+        // Reset AI Output
         const aiOut = document.getElementById('aiOutputImg');
         const aiAct = document.getElementById('aiActions');
         if(aiOut) aiOut.style.display = 'none';
@@ -458,10 +411,6 @@ function resetOriginal() {
     }
 }
 
-function resetSlidersUI() {
-    updateSlidersUI(); // Will use default 0 params in state
-}
-
 function setupKeyboardShortcuts() {
     document.addEventListener('keydown', (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === 'z') { e.preventDefault(); undoEdit(); }