Update static/scripts.js

static/scripts.js

@@ -1,14 +1,13 @@
-// State management
+// scripts.js — FINAL VERSION (Instant Ingredients + Delayed Recipe)
+
 const state = {
     uploadedImage: null,
     detectedIngredients: [],
-    recipes: [],
     isProcessing: false,
     geminiApiKey: "",
     skipApiKeyWarning: false
 };
 
-// DOM elements 
 const elements = {
     apiKeyInput: document.getElementById('apiKey'),
     uploadArea: document.getElementById('uploadArea'),
@@ -26,115 +25,71 @@ const elements = {
     darkModeToggle: document.getElementById('darkModeToggle')
 };
 
-// Initialize app
 function init() {
     setupEventListeners();
     loadStoredPreferences();
     loadDarkModePreference();
 }
 
-// Load stored API key and preferences
 function loadStoredPreferences() {
     const savedKey = localStorage.getItem('geminiApiKey');
     const skipWarning = localStorage.getItem('skipApiKeyWarning') === 'true';
-
     if (savedKey) {
         state.geminiApiKey = savedKey;
         elements.apiKeyInput.value = savedKey;
     }
-
     state.skipApiKeyWarning = skipWarning;
 }
 
-// load dark mode preference
 function loadDarkModePreference() {
     if (localStorage.getItem('darkMode') === 'true') {
         document.documentElement.classList.add('dark');
     }
 }
 
-// setup event listeners
 function setupEventListeners() {
-
-    // API key field
     elements.apiKeyInput.addEventListener('input', (e) => {
-        const key = e.target.value.trim();
-        state.geminiApiKey = key;
-        localStorage.setItem('geminiApiKey', key);
+        state.geminiApiKey = e.target.value.trim();
+        localStorage.setItem('geminiApiKey', state.geminiApiKey);
     });
 
-    // Upload area click triggers file input
     elements.uploadArea.addEventListener('click', () => elements.fileInput.click());
-
-    // Drag & drop support
-    elements.uploadArea.addEventListener('dragover', (e) => {
-        e.preventDefault();
-        elements.uploadArea.style.borderColor = 'var(--primary)';
-    });
-
-    elements.uploadArea.addEventListener('dragleave', () => {
-        elements.uploadArea.style.borderColor = 'var(--border)';
-    });
-
-    elements.uploadArea.addEventListener('drop', (e) => {
+    elements.uploadArea.addEventListener('dragover', e => { e.preventDefault(); elements.uploadArea.style.borderColor = 'var(--primary)'; });
+    elements.uploadArea.addEventListener('dragleave', () => elements.uploadArea.style.borderColor = 'var(--border)');
+    elements.uploadArea.addEventListener('drop', e => {
         e.preventDefault();
         elements.uploadArea.style.borderColor = 'var(--border)';
-        if (e.dataTransfer.files.length > 0) {
-            handleFileUpload(e.dataTransfer.files[0]);
-        }
+        if (e.dataTransfer.files[0]) handleFileUpload(e.dataTransfer.files[0]);
     });
-
-    // File input change
-    elements.fileInput.addEventListener('change', (e) => {
-        if (e.target.files.length > 0) {
-            handleFileUpload(e.target.files[0]);
-        }
+    elements.fileInput.addEventListener('change', e => {
+        if (e.target.files[0]) handleFileUpload(e.target.files[0]);
     });
 
-    // Reset
     elements.resetButton.addEventListener('click', resetUpload);
-
-    // Scan button
     elements.scanButton.addEventListener('click', handleScan);
-
-    // Dark mode toggle
     elements.darkModeToggle.addEventListener('click', () => {
         const isDark = document.documentElement.classList.toggle('dark');
         localStorage.setItem('darkMode', isDark);
     });
 }
 
-
-// File Upload + Preview
 function handleFileUpload(file) {
-    if (!file.type.startsWith('image/')) {
-        alert('Please upload a valid image file.');
-        return;
-    }
-
+    if (!file.type.startsWith('image/')) return alert('Please upload an image.');
     const reader = new FileReader();
-    reader.onload = (e) => {
+    reader.onload = e => {
         state.uploadedImage = e.target.result;
-        showImagePreview(e.target.result);
+        elements.previewImage.src = e.target.result;
+        elements.uploadArea.style.display = 'none';
+        elements.previewSection.style.display = 'block';
+        elements.scanButton.style.display = 'flex';
+        elements.heroSection.style.display = 'none';
     };
     reader.readAsDataURL(file);
 }
 
-function showImagePreview(imageUrl) {
-    elements.previewImage.src = imageUrl;
-
-    elements.uploadArea.style.display = 'none';
-    elements.previewSection.style.display = 'block';
-    elements.scanButton.style.display = 'flex';
-    elements.heroSection.style.display = 'none';
-}
-
-// Reset upload
 function resetUpload() {
     state.uploadedImage = null;
     state.detectedIngredients = [];
-    state.recipes = [];
-
     elements.fileInput.value = '';
     elements.uploadArea.style.display = 'block';
     elements.previewSection.style.display = 'none';
@@ -143,274 +98,142 @@ function resetUpload() {
     elements.heroSection.style.display = 'block';
 }
 
+async function handleMissingApiKeyWarning() {
+    if (state.geminiApiKey || state.skipApiKeyWarning) return;
+    const proceed = confirm("Continue without Gemini API key?\n\n• Slower recipe generation\n• Lower quality possible\n\nProceed anyway?");
+    if (!proceed) throw new Error("Cancelled");
+    if (confirm("Don't show this again?")) {
+        state.skipApiKeyWarning = true;
+        localStorage.setItem('skipApiKeyWarning', 'true');
+    }
+}
 
-// Image Scan and Backend Processing
+function updateScanButton(loading) {
+    elements.scanButton.disabled = loading;
+    elements.scanButtonText.textContent = loading ? "Processing..." : "Scan Ingredients";
+}
+
+// MAIN FUNCTION — THIS IS THE MAGIC
 async function handleScan() {
-    if (!state.uploadedImage) {
-        alert('Please upload an image first.');
-        return;
-    }
+    if (!state.uploadedImage) return alert("Upload an image first");
 
     await handleMissingApiKeyWarning();
 
     state.isProcessing = true;
     updateScanButton(true);
 
-    try {
-        const formData = new FormData();
+    // Reset UI
+    elements.ingredientsList.innerHTML = "";
+    elements.recipesList.innerHTML = "";
+    elements.resultsSection.style.display = "block";
 
-        // Convert Base64 → Blob → File
+    try {
+        // Detect ingredients
         const blob = await (await fetch(state.uploadedImage)).blob();
-        formData.append("file", new File([blob], "upload.jpg", { type: blob.type }));
-        formData.append("api_key", (state.geminiApiKey || "").trim());
+        const detectForm = new FormData();
+        detectForm.append("file", new File([blob], "image.jpg", { type: blob.type }));
 
-        const response = await fetch("/upload-image/", { method: "POST", body: formData });
+        const detectResponse = await fetch("/detect-ingredients/", {
+            method: "POST",
+            body: detectForm
+        });
 
-        if (!response.ok) throw new Error("Backend error: " + response.status);
+        if (!detectResponse.ok) throw new Error("Detection failed");
 
-        const data = await response.json();
+        const { ingredients } = await detectResponse.json();
 
-        // Convert backend output to frontend format
-        state.detectedIngredients = (data.ingredients || []).map(item => ({
+        // Display detected ingredients
+        state.detectedIngredients = ingredients.map(item => ({
             name: item.name,
             confidence: item.confidence
         }));
 
-        state.recipes = [{
-            name: "AI-Generated Recipe",
-            ingredients: (data.ingredients || []).map(i => i.name),
-            steps: [data.recipe]
-        }];
-
-
         displayIngredients(state.detectedIngredients);
-        displayRecipes(state.recipes);
-        elements.resultsSection.style.display = 'block';
 
-    } catch (err) {
-        console.error(err);
-        alert("Something went wrong while processing the image.");
-    }
+        // Show "thinking" card
+        const thinkingCard = document.createElement("div");
+        thinkingCard.className = "recipe-card";
+        thinkingCard.innerHTML = `
+            <div class="recipe-header"><h4>AI-Generated Recipe</h4></div>
+            <div class="recipe-section">
+                <p style="text-align:center; padding:2rem; color:var(--text-secondary)">
+                    <em>Chef is thinking of something delicious...</em><br><br>
+                    <span style="font-size:2rem">Cooking</span>
+                </p>
+            </div>`;
+        elements.recipesList.appendChild(thinkingCard);
+        elements.recipesSection.style.display = "block";
+
+        // Generate recipe in background
+        const recipeForm = new FormData();
+        recipeForm.append("ingredients", state.detectedIngredients.map(i => i.name).join(", "));
+        recipeForm.append("api_key", state.geminiApiKey.trim());
+
+        const recipeResponse = await fetch("/generate-recipe/", {
+            method: "POST",
+            body: recipeForm
+        });
 
-    state.isProcessing = false;
-    updateScanButton(false);
-}
+        if (!recipeResponse.ok) throw new Error("Recipe generation failed");
 
+        const { recipe } = await recipeResponse.json();
 
- // Missing API Key Warning
-async function handleMissingApiKeyWarning() {
-    if (state.geminiApiKey || state.skipApiKeyWarning) return;
-
-    const proceed = confirm(
-        "⚠️ Continue without a Gemini API key?\n\n" +
-        "• Recipe quality may be downgraded\n" +
-        "• AI creativity reduced\n\n" +
-        "Proceed anyway?"
-    );
-
-    if (!proceed) throw new Error("User cancelled scan.");
+        // Replace thinking card with real recipe
+        thinkingCard.innerHTML = `
+            <div class="recipe-header"><h4>AI-Generated Recipe</h4></div>
+            <div class="recipe-section">
+                <div class="recipe-markdown">${marked.parse(recipe)}</div>
+            </div>`;
 
-    const dontShowAgain = confirm("Skip this warning next time?");
-    if (dontShowAgain) {
-        state.skipApiKeyWarning = true;
-        localStorage.setItem('skipApiKeyWarning', 'true');
+    } catch (err) {
+        console.error(err);
+        elements.recipesList.innerHTML = `<div class="recipe-card" style="color:var(--error);text-align:center;padding:2rem">
+            <h4>Failed to generate recipe</h4>
+            <p>Try again or add a Gemini API key for better results.</p>
+        </div>`;
+    } finally {
+        state.isProcessing = false;
+        updateScanButton(false);
     }
 }
 
-// UI Helper: Scan Button State
-function updateScanButton(isLoading) {
-    elements.scanButton.disabled = isLoading;
-    elements.scanButtonText.textContent = isLoading ? "Processing..." : "Scan Ingredients";
-}
-
 
-// Rendering Ingredients UI
+// Display detected ingredients with confidence bars
 function displayIngredients(ingredients) {
     elements.ingredientsList.innerHTML = '';
+    ingredients.forEach((ing, i) => {
+        const conf = Math.round(ing.confidence * 100);
+        const color = conf >= 70 ? "#2ecc71" : conf >= 40 ? "#f1c40f" : "#e74c3c";
 
-    ingredients.forEach((ingredient, index) => {
         const item = document.createElement('div');
         item.className = 'ingredient-item';
-        item.style.animation = `fadeIn 1s ease-out ${index * 0.08}s forwards`;
-
-        // Make sure confidence is numerical
-        const confidence = Number(ingredient.confidence);
-
-        // Determine bar & badge color
-        let barColor;
-        if (confidence >= 0.7) barColor = "#2ecc71";      // green
-        else if (confidence >= 0.4) barColor = "#f1c40f"; // yellow
-        else barColor = "#e74c3c";                        // red
-
+        item.style.animation = `fadeIn 0.8s ease-out ${i * 0.1}s forwards`;
         item.innerHTML = `
             <div class="ingredient-header">
-                <div class="ingredient-info">
-                    <span class="ingredient-name">${ingredient.name}</span>
-                    <span class="confidence-badge"
-                        style="
-                            background: ${barColor};
-                            color: ${confidence >= 0.4 ? '#000' : '#fff'};
-                        ">
-                        ${Math.round(confidence * 100)}% confidence
-                    </span>
-                </div>
+                <span class="ingredient-name">${ing.name}</span>
+                <span class="confidence-badge" style="background:${color};color:${conf>=40?'#000':'#fff'}">
+                    ${conf}% confidence
+                </span>
             </div>
-
             <div class="confidence-bar">
-                <div class="confidence-fill"
-                    style="
-                        width: 0%;
-                        background: ${barColor};
-                        transition: width 0.9s ease-out;
-                    ">
-                </div>
-            </div>
-        `;
-
+                <div class="confidence-fill" style="background:${color};width:0%;transition:width 1s ease-out"></div>
+            </div>`;
         elements.ingredientsList.appendChild(item);
 
-        // Animate bar fill
-        requestAnimationFrame(() => {
-            const fill = item.querySelector('.confidence-fill');
-            fill.style.width = `${confidence * 100}%`;
-        });
-    });
-}
-
-
-
-
-// Rendering Recipes UI (Markdown support)
-function displayRecipes(recipes) {
-    elements.recipesSection.style.display = 'block';
-    elements.recipesList.innerHTML = '';
-
-    recipes.forEach((recipe, index) => {
-        const card = document.createElement('div');
-        card.className = 'recipe-card';
-        card.style.animation = `fadeIn 1s ease-out ${index * 0.15}s forwards`;
-
-        // Short / long ingredients
-        const shortIngredients = (recipe.ingredients || [])
-            .map(i => (typeof i === "string" ? i : (i.name ?? "Unknown")))
-            .slice(0, 5);
-
-        const hasMoreIngredients = (recipe.ingredients || []).length > 5;
-
-        // Steps handling: steps may be an array of short steps, or a single big markdown string
-        const stepsArr = recipe.steps || [];
-        const isSingleLongMarkdown = stepsArr.length === 1 && (stepsArr[0].includes('\n\n') || stepsArr[0].includes('#') || stepsArr[0].includes('- '));
-
-        // Build Ingredients html
-        const ingredientsHtml = `
-            <div class="recipe-section">
-                <h5 class="section-title">Ingredients</h5>
-                <div class="ingredients-grid" data-full="${encodeURIComponent(JSON.stringify(recipe.ingredients || []))}">
-                    ${shortIngredients.map(i => `<span class="ingredient-tag">${i}</span>`).join('')}
-                    ${hasMoreIngredients ? `<button class="show-more-btn ingredient-more">+${(recipe.ingredients || []).length - 5} more</button>` : ''}
-                </div>
-            </div>
-        `;
-
-        // Build Steps html
-        let stepsHtml = '';
-        if (isSingleLongMarkdown) {
-            // render whole markdown blob (not inside <ol>)
-            const mdText = stepsArr[0] || '';
-            const htmlFromMd = (typeof marked !== 'undefined')
-                ? marked.parse(mdText)
-                : mdText.replace(/\n\n/g, '<br><br>').replace(/\n/g, '<br>');
-            stepsHtml = `
-                <div class="recipe-section">
-                    <h5 class="section-title">Steps</h5>
-                    <div class="recipe-markdown">${htmlFromMd}</div>
-                </div>
-            `;
-        } else {
-            // render as ordered list of steps (short step items)
-            const shortSteps = stepsArr.slice(0, 3);
-            const hasMoreSteps = stepsArr.length > 3;
-            const shortStepsHtml = shortSteps
-                .map(s => {
-                    const rendered = (typeof marked !== 'undefined') ? marked.parseInline(s) : escapeHtml(s);
-                    return `<li>${rendered}</li>`;
-                })
-                .join('');
-            stepsHtml = `
-                <div class="recipe-section">
-                    <h5 class="section-title">Steps</h5>
-                    <ol class="steps-list" data-full="${encodeURIComponent(JSON.stringify(stepsArr))}">
-                        ${shortStepsHtml}
-                    </ol>
-                    ${hasMoreSteps ? `<button class="show-more-btn steps-more">Show ${stepsArr.length - 3} more</button>` : ''}
-                </div>
-            `;
-        }
-
-        card.innerHTML = `
-            <div class="recipe-header">
-                <h4 class="recipe-name">${escapeHtml(recipe.name || 'Recipe')}</h4>
-            </div>
-
-            ${ingredientsHtml}
-            ${stepsHtml}
-        `;
-
-        elements.recipesList.appendChild(card);
-        setupExpandButtons(card);
+        setTimeout(() => {
+            item.querySelector('.confidence-fill').style.width = `${conf}%`;
+        }, 100);
     });
 }
 
-// Setup expand buttons with markdown handling
-function setupExpandButtons(card) {
-    // Ingredients expand
-    const ingBtn = card.querySelector(".ingredient-more");
-    if (ingBtn) {
-        ingBtn.onclick = () => {
-            const container = ingBtn.parentElement;
-            const fullList = JSON.parse(decodeURIComponent(container.dataset.full || '[]'));
-            container.innerHTML = fullList.map(i => `<span class="ingredient-tag">${escapeHtml(i)}</span>`).join('');
-        };
-    }
-
-    // Steps expand (only applies when steps were short-array style)
-    const stepBtn = card.querySelector(".steps-more");
-    if (stepBtn) {
-        stepBtn.onclick = () => {
-            const ol = stepBtn.previousElementSibling;
-            const fullList = JSON.parse(decodeURIComponent(ol.dataset.full || '[]'));
-            if (typeof marked !== 'undefined') {
-                ol.innerHTML = fullList.map(s => `<li>${marked.parseInline(s)}</li>`).join('');
-            } else {
-                ol.innerHTML = fullList.map(s => `<li>${escapeHtml(s)}</li>`).join('');
-            }
-            stepBtn.remove();
-        };
-    }
-}
-
-// escape HTML when marked is not available or for text content
-function escapeHtml(str) {
-    if (!str) return '';
-    return str
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-}
-
-
-// Fade Animations
-const styleElement = document.createElement('style');
-styleElement.textContent = `
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(10px); }
-        to { opacity: 1; transform: translateY(0); }
-    }
-`;
-document.head.appendChild(styleElement);
-
+// Fade-in animation
+document.head.insertAdjacentHTML('beforeend', `
+<style>
+@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
+.ingredient-item{opacity:0}
+</style>`);
 
-// Start Application
+// Start app
 document.readyState === 'loading'
     ? document.addEventListener('DOMContentLoaded', init)
     : init();