function MainComponent() { const [ingredients, setIngredients] = useState([]); const [inputValue, setInputValue] = useState(""); const [customSuggestions, setCustomSuggestions] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [imageLoading, setImageLoading] = useState(false); const [shareLoading, setShareLoading] = useState(false); const [retryCount, setRetryCount] = useState(0); const MAX_RETRIES = 3; const cameraInputRef = useRef(null); const fileInputRef = useRef(null); const getUserId = ()=>{ try { let userId = localStorage.getItem('cocktailAppUserId'); if (!userId) { userId = 'user_' + Math.random().toString(36).substring(2, 15); localStorage.setItem('cocktailAppUserId', userId); } return userId; } catch (e) { return 'user_' + Math.random().toString(36).substring(2, 15); } }; const analyzeImageWithRetry = async (base64Data, currentRetry = 0)=>{ try { console.log(`Attempt ${currentRetry + 1}/${MAX_RETRIES} to analyze image...`); if (!base64Data) { throw new Error("No image data to analyze"); } if (base64Data.startsWith("data:")) { console.error("Base64 data still contains data URL prefix"); base64Data = base64Data.split(",")[1]; } const response = await fetch("/api/analyze-image", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ body: { imageBase64: base64Data, systemPrompt: "You are an expert at identifying cocktail ingredients, beverages, and food items from images. Your task is to identify specific ingredients, beverages, and brands that you can clearly see in the image. Be precise and accurate with your identifications.", userPrompt: `This is an image of ingredients and beverages that could be used for cocktails. Your task is to identify specific ingredients, beverages, and brands that you can clearly see in the image. RULES TO FOLLOW: 1. List ONLY items that are CLEARLY VISIBLE in the image 2. Include full brand names when possible (e.g., 'Bombay Sapphire Gin', 'Absolut Vodka', 'Fever-Tree Tonic Water') 3. For alcoholic beverages: Identify bottles with their complete brand names and types 4. For non-alcoholic beverages: Identify with brand names when visible (e.g., 'Coca-Cola', 'Schweppes Ginger Ale') 5. For fresh ingredients: Be specific (e.g., 'Fresh lime', 'Maraschino cherries', 'Angostura bitters') 6. DO NOT guess or hallucinate brands that aren't clearly visible 7. If you're uncertain about a brand but can see the type of spirit/beverage, just list the generic type 8. Format your response as a simple comma-separated list EXAMPLES OF GOOD RESPONSES: - "Tito's Vodka, lime, simple syrup, ice" - "Hendrick's Gin, Fever-Tree Tonic Water, cucumber" - "lemons, limes, oranges, sugar" - "Jack Daniel's Whiskey, Coca-Cola, ice cubes" DO NOT include explanations, observations, or anything other than the ingredient list` } }) }); if (!response.ok) { const errorText = await response.text(); console.error(`API error (${response.status}): ${errorText}`); if (response.status >= 500 && currentRetry < MAX_RETRIES - 1) { throw new Error(`Server error: ${response.status}`); } throw new Error(`Error analyzing image: ${response.status} - ${errorText.substring(0, 100)}`); } console.log("Image analysis response received successfully"); const data = await response.json(); if (!data.body) { throw new Error("Invalid response format: missing body"); } if (!data.body.success) { throw new Error(`Analysis failed: ${data.body.error || "Unknown error"}`); } if (!data.body.allDetected || !Array.isArray(data.body.allDetected)) { throw new Error("No ingredients detected or invalid format"); } return data; } catch (error) { console.error(`Analysis attempt ${currentRetry + 1} failed:`, error); if (currentRetry < MAX_RETRIES - 1) { console.log(`Retrying in ${(currentRetry + 1) * 1000}ms...`); await new Promise((resolve)=>setTimeout(resolve, (currentRetry + 1) * 1000)); return analyzeImageWithRetry(base64Data, currentRetry + 1); } throw error; } }; const getRecommendations = async ()=>{ if (ingredients.length === 0) { setError("Please add at least one ingredient"); return; } setLoading(true); setError(null); try { const response = await fetch("/api/get-recommendations", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ body: { userId: getUserId(), ingredients: ingredients.map((ing)=>ing.name), systemPrompt: "You are a professional bartender with expertise in creating custom cocktails. Create 2-3 unique cocktail recipes based on the available ingredients. Be creative but practical. Focus only on providing detailed recipes with ingredients, measurements, and instructions. Do not include any references to YouTube videos or tutorials. All measurements in international units of ml, l, grams etc. only", userPrompt: `I have these ingredients available: ${ingredients.map((ing)=>ing.name).join(", ")}. What cocktails can I make? Please provide detailed recipes with measurements and instructions.` } }) }); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); if (data.body) { setCustomSuggestions(data.body.customSuggestions || []); } } catch (err) { console.error("Error getting recommendations:", err); setError("Failed to get cocktail recommendations"); } finally{ setLoading(false); } }; const compressImage = (file, maxSizeBytes = 5 * 1024 * 1024)=>{ return new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = (event)=>{ const img = new Image(); img.src = event.target.result; img.onload = ()=>{ const canvas = document.createElement("canvas"); let width = img.width; let height = img.height; const MAX_WIDTH = 1200; const MAX_HEIGHT = 1200; if (width > height) { if (width > MAX_WIDTH) { height = Math.round(height * MAX_WIDTH / width); width = MAX_WIDTH; } } else { if (height > MAX_HEIGHT) { width = Math.round(width * MAX_HEIGHT / height); height = MAX_HEIGHT; } } canvas.width = width; canvas.height = height; const ctx = canvas.getContext("2d"); ctx.drawImage(img, 0, 0, width, height); let quality = 0.9; let compressedDataUrl = canvas.toDataURL(file.type || "image/jpeg", quality); while(compressedDataUrl.length * 0.75 > maxSizeBytes && quality > 0.1){ quality -= 0.1; compressedDataUrl = canvas.toDataURL(file.type || "image/jpeg", quality); } const base64Data = compressedDataUrl.split(",")[1]; fetch(compressedDataUrl).then((res)=>res.blob()).then((blob)=>{ const compressedFile = new File([ blob ], file.name, { type: file.type || "image/jpeg", lastModified: new Date().getTime() }); if (compressedFile.size <= maxSizeBytes) { resolve({ file: compressedFile, base64Data: base64Data }); } else { reject(new Error("Image still too large after compression")); } }).catch((error)=>{ console.error("Error creating blob from compressed image:", error); reject(new Error(`Failed to process compressed image: ${error.message}`)); }); }; img.onerror = (error)=>{ console.error("Error loading image for compression:", error); reject(new Error("Failed to load image for processing")); }; }; reader.onerror = (error)=>{ console.error("Error reading file:", error); reject(new Error("Failed to read the selected file")); }; }); }; useEffect(()=>{ const loadUserIngredients = async ()=>{ try { const userId = getUserId(); const response = await fetch("/api/get-user-ingredients", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ body: { userId } }) }); if (!response.ok) { throw new Error(`Error: ${response.status} ${response.statusText}`); } const data = await response.json(); if (data.body && data.body.ingredients) { const savedIngredients = data.body.ingredients.map((ing)=>({ name: ing.name, source: "saved" })); setIngredients(savedIngredients); } } catch (err) { console.error("Failed to load user ingredients:", err); setError("Failed to load your saved ingredients"); } }; loadUserIngredients(); }, []); const handleInputChange = (e)=>{ setInputValue(e.target.value); }; const handleAddIngredient = ()=>{ if (inputValue.trim()) { const newItems = inputValue.split(",").map((item)=>item.trim()).filter((item)=>item.length > 0); const updatedIngredients = [ ...ingredients ]; let addedAny = false; newItems.forEach((item)=>{ if (!ingredients.some((ing)=>ing.name.toLowerCase() === item.toLowerCase())) { updatedIngredients.push({ name: item, source: "manual" }); addedAny = true; } }); if (addedAny) { setIngredients(updatedIngredients); setInputValue(""); } } }; const handleKeyPress = (e)=>{ if (e.key === "Enter") { handleAddIngredient(); } }; const handleRemoveIngredient = (index)=>{ const newIngredients = [ ...ingredients ]; newIngredients.splice(index, 1); setIngredients(newIngredients); }; const handleCameraButtonClick = ()=>{ console.log("Camera button clicked, triggering camera input..."); if (cameraInputRef.current) { cameraInputRef.current.click(); } else { console.error("Camera input ref is null"); } }; const handleUploadButtonClick = ()=>{ console.log("Upload button clicked, triggering file input..."); if (fileInputRef.current) { fileInputRef.current.click(); } else { console.error("File input ref is null"); } }; const handleFileChange = async (e)=>{ console.log("File input change event triggered"); const file = e.target.files?.[0]; if (!file) { console.log("No file selected"); return; } console.log(`File selected: ${file.name}, type: ${file.type}, size: ${file.size} bytes`); setImageLoading(true); setError(null); setRetryCount(0); try { if (!file.type.startsWith("image/")) { throw new Error("Please select a valid image file"); } const maxSize = 5 * 1024 * 1024; let base64Data; if (file.size > maxSize) { console.log(`File exceeds max size (${file.size} > ${maxSize}), compressing...`); try { const compressed = await compressImage(file, maxSize); base64Data = compressed.base64Data; console.log(`Image compressed successfully. New size estimate: ~${Math.round(base64Data.length * 0.75 / 1024)}KB`); } catch (compressionError) { console.error("Compression error:", compressionError); throw new Error(`Image compression failed: ${compressionError.message}`); } } else { console.log("File size within limits, processing directly"); try { base64Data = await new Promise((resolve, reject)=>{ const reader = new FileReader(); reader.onloadend = ()=>{ try { const result = reader.result; if (typeof result !== "string") { reject(new Error("FileReader did not return a string")); return; } const base64 = result.split(",")[1]; if (!base64) { reject(new Error("Failed to extract base64 data")); return; } resolve(base64); } catch (error) { reject(error); } }; reader.onerror = ()=>reject(new Error("Error reading file")); reader.readAsDataURL(file); }); console.log("Base64 conversion successful"); } catch (readError) { console.error("Error reading file:", readError); throw new Error(`Failed to read image file: ${readError.message}`); } } if (!base64Data) { throw new Error("Failed to process image data"); } console.log("Sending image for analysis..."); const data = await analyzeImageWithRetry(base64Data); if (data.body && data.body.allDetected) { console.log(`Detected ingredients: ${data.body.allDetected.join(", ")}`); const newIngredients = [ ...ingredients ]; let addedCount = 0; data.body.allDetected.forEach((ingredient)=>{ if (!newIngredients.some((ing)=>ing.name.toLowerCase() === ingredient.toLowerCase())) { newIngredients.push({ name: ingredient, source: "image" }); addedCount++; } }); setIngredients(newIngredients); console.log(`Added ${addedCount} new ingredients from image analysis`); if (addedCount === 0 && data.body.allDetected.length > 0) { setError("All detected ingredients were already in your list"); } else if (data.body.allDetected.length === 0) { setError("No ingredients detected in the image"); } } else { throw new Error("Invalid response format from image analysis"); } } catch (err) { console.error("Error processing image:", err); setError(`Failed to analyze image: ${err.message}`); } finally{ setImageLoading(false); if (fileInputRef.current) { fileInputRef.current.value = ""; } if (cameraInputRef.current) { cameraInputRef.current.value = ""; } } }; const handleShareSuggestions = async ()=>{ if (customSuggestions.length === 0) { setError("No cocktails to share"); return; } try { setShareLoading(true); setError(null); const cocktailsText = customSuggestions.map((cocktail)=>`${cocktail.name}\n${cocktail.instructions}`).join('\n\n'); const shareText = "Check out these cocktail recipes I made with AI Bartender!"; const shareUrl = window.location.href; if (navigator.share) { await navigator.share({ title: "AI Bartender Cocktails", text: `${shareText}\n\n${cocktailsText}`, url: shareUrl }); } else { await navigator.clipboard.writeText(`${shareText}\n\n${cocktailsText}\n\n${shareUrl}`); alert("Cocktail recipes copied to clipboard!"); } } catch (error) { console.error("Error sharing cocktails:", error); setError(`Failed to share: ${error.message}`); } finally{ setShareLoading(false); } }; const getIngredientBgColor = (source)=>{ switch(source){ case "image": return "bg-green-700"; case "manual": return "bg-purple-800"; case "saved": return "bg-blue-700"; default: return "bg-purple-800"; } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen text-white p-4 md:p-8", style: { background: '#f8f9fa', backgroundImage: ` linear-gradient(135deg, #6a11cb 0%, #2575fc 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60' opacity='0.15'%3E%3Cpath d='M30 10 L35 25 L25 25 Z' fill='white'/%3E%3Ccircle cx='30' cy='28' r='3' fill='white'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50' opacity='0.1'%3E%3Cpath d='M25 10 L30 20 L20 20 Z' fill='white'/%3E%3Ccircle cx='25' cy='25' r='2' fill='white'/%3E%3Cpath d='M22 30 L28 30 L28 40 L25 43 L22 40 Z' fill='white'/%3E%3C/svg%3E") `, backgroundSize: 'cover, 120px 120px, 80px 80px', backgroundPosition: 'center, 0 0, 40px 40px', backgroundRepeat: 'no-repeat, repeat, repeat', backgroundAttachment: 'fixed', color: 'white' }, __source: { fileName: "", lineNumber: 543, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 556, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold text-center mb-2", __source: { fileName: "", lineNumber: 557, columnNumber: 9 }, __self: this }, "AI Bartender Cocktail Maker"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-center mb-2", __source: { fileName: "", lineNumber: 560, columnNumber: 9 }, __self: this }, "Discover classic and unique cocktail recipes with just a photo"), /*#__PURE__*/ React.createElement("p", { className: "text-center mb-8 text-gray-300 italic", __source: { fileName: "", lineNumber: 563, columnNumber: 9 }, __self: this }, "By insen (please enjoy responsibly! 🚀)"), /*#__PURE__*/ React.createElement("div", { className: "bg-indigo-900 bg-opacity-40 backdrop-filter backdrop-blur-md rounded-lg p-6 mb-8 shadow-lg border border-indigo-800 border-opacity-30", __source: { fileName: "", lineNumber: 567, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 568, columnNumber: 11 }, __self: this }, "What's in your bar?"), /*#__PURE__*/ React.createElement("p", { className: "mb-4", __source: { fileName: "", lineNumber: 570, columnNumber: 11 }, __self: this }, "Snap a photo of your fridge or bar"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mb-6", __source: { fileName: "", lineNumber: 572, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleCameraButtonClick, disabled: imageLoading, className: `flex-1 bg-blue-600 hover:bg-blue-700 py-4 rounded-lg transition-colors flex items-center justify-center ${imageLoading ? "opacity-75" : ""}`, __source: { fileName: "", lineNumber: 573, columnNumber: 13 }, __self: this }, imageLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 582, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 583, columnNumber: 19 }, __self: this }, "Processing...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-camera mr-2", __source: { fileName: "", lineNumber: 587, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 588, columnNumber: 19 }, __self: this }, "Take Photo"))), /*#__PURE__*/ React.createElement("button", { onClick: handleUploadButtonClick, disabled: imageLoading, className: `flex-1 bg-purple-600 hover:bg-purple-700 py-4 rounded-lg transition-colors flex items-center justify-center ${imageLoading ? "opacity-75" : ""}`, __source: { fileName: "", lineNumber: 593, columnNumber: 13 }, __self: this }, imageLoading ? /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 602, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 603, columnNumber: 19 }, __self: this }, "Processing...")) : /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload mr-2", __source: { fileName: "", lineNumber: 607, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 608, columnNumber: 19 }, __self: this }, "Upload Photo")))), /*#__PURE__*/ React.createElement("input", { ref: cameraInputRef, type: "file", accept: "image/*", capture: "environment", onChange: handleFileChange, className: "hidden", disabled: imageLoading, "aria-label": "Take photo of ingredients", __source: { fileName: "", lineNumber: 614, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", onChange: handleFileChange, className: "hidden", disabled: imageLoading, "aria-label": "Upload image of ingredients", __source: { fileName: "", lineNumber: 625, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mb-2", __source: { fileName: "", lineNumber: 635, columnNumber: 11 }, __self: this }, "Or add ingredients manually (separate with commas)"), /*#__PURE__*/ React.createElement("div", { className: "flex mb-6", __source: { fileName: "", lineNumber: 639, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: inputValue, onChange: handleInputChange, onKeyPress: handleKeyPress, placeholder: "Vodka, lime juice, etc.", className: "flex-grow p-3 rounded-l-lg text-gray-800 bg-gray-900 text-white", __source: { fileName: "", lineNumber: 640, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddIngredient, className: "bg-green-500 hover:bg-green-600 px-6 py-3 rounded-r-lg transition-colors", __source: { fileName: "", lineNumber: 648, columnNumber: 13 }, __self: this }, "Add")), error && /*#__PURE__*/ React.createElement("div", { className: "bg-red-600 bg-opacity-70 p-3 rounded-lg mb-4", __source: { fileName: "", lineNumber: 657, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 662, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 663, columnNumber: 13 }, __self: this }, "Your Ingredients:"), ingredients.length === 0 ? /*#__PURE__*/ React.createElement("p", { className: "text-gray-400 italic", __source: { fileName: "", lineNumber: 665, columnNumber: 15 }, __self: this }, "No ingredients added yet") : /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mb-6", __source: { fileName: "", lineNumber: 667, columnNumber: 15 }, __self: this }, ingredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `${getIngredientBgColor(ingredient.source)} px-3 py-1 rounded-full flex items-center`, __source: { fileName: "", lineNumber: 669, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "mr-2", __source: { fileName: "", lineNumber: 675, columnNumber: 21 }, __self: this }, ingredient.name), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleRemoveIngredient(index), className: "text-sm hover:text-red-300 transition-colors", __source: { fileName: "", lineNumber: 676, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-times", __source: { fileName: "", lineNumber: 680, columnNumber: 23 }, __self: this })))))), /*#__PURE__*/ React.createElement("button", { onClick: getRecommendations, disabled: loading || ingredients.length === 0, className: `w-full ${loading || ingredients.length === 0 ? "bg-gray-500" : "bg-gradient-to-r from-pink-500 to-purple-500 hover:from-pink-600 hover:to-purple-600"} py-4 rounded-lg transition-colors`, __source: { fileName: "", lineNumber: 688, columnNumber: 11 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 698, columnNumber: 15 }, __self: this }) : "Create Custom Cocktails")), customSuggestions.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "bg-indigo-900 bg-opacity-40 backdrop-filter backdrop-blur-md rounded-lg p-6 shadow-lg border border-indigo-800 border-opacity-30", __source: { fileName: "", lineNumber: 706, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4", __source: { fileName: "", lineNumber: 707, columnNumber: 13 }, __self: this }, "AI Bartender Suggestions"), customSuggestions.map((suggestion, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-indigo-800 bg-opacity-50 backdrop-filter backdrop-blur-sm rounded-lg p-4 mb-4 last:mb-0 shadow-md border border-indigo-700 border-opacity-30", __source: { fileName: "", lineNumber: 712, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-bold mb-3", __source: { fileName: "", lineNumber: 716, columnNumber: 17 }, __self: this }, suggestion.name), /*#__PURE__*/ React.createElement("div", { className: "whitespace-pre-line text-gray-300", __source: { fileName: "", lineNumber: 717, columnNumber: 17 }, __self: this }, suggestion.instructions))), /*#__PURE__*/ React.createElement("button", { onClick: handleShareSuggestions, disabled: shareLoading, className: `w-full mt-6 ${shareLoading ? "bg-gray-500" : "bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600"} py-4 rounded-lg transition-colors flex items-center justify-center`, __source: { fileName: "", lineNumber: 723, columnNumber: 13 }, __self: this }, shareLoading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin mr-2", __source: { fileName: "", lineNumber: 733, columnNumber: 17 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-share-alt mr-2", __source: { fileName: "", lineNumber: 735, columnNumber: 17 }, __self: this }), shareLoading ? "Generating..." : "Share These Cocktails")))); }