function MainComponent() { const [imagePreview, setImagePreview] = useState(null); const [recipe, setRecipe] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const [imageUrlInput, setImageUrlInput] = useState(""); const [feedback, setFeedback] = useState(""); const [feedbackSubmitted, setFeedbackSubmitted] = useState(false); const uploadToCreateStorage = async (file)=>{ try { if (!file.type.startsWith("image/")) { throw new Error("Only image files are allowed."); } const response = await fetch("/api/upload", { method: "POST", body: file }); const data = await response.json(); return data.url; } catch (err) { throw new Error("Image upload failed. " + err.message); } }; const analyzeImage = async (imageUrl)=>{ try { setLoading(true); setError(null); setRecipe(null); const visionResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Analyze this food image: ${imageUrl}` } ] }) }); if (!visionResponse.ok) throw new Error(`Vision API error: ${visionResponse.status}`); const visionResult = await visionResponse.json(); const dishDescription = visionResult.choices[0].message.content; const recipeResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "system", content: "You are an expert chef. Create a detailed recipe based on the dish description provided." }, { role: "user", content: `Generate a full recipe for this dish: ${dishDescription}` } ] }) }); if (!recipeResponse.ok) throw new Error("Failed to generate recipe"); const recipeResult = await recipeResponse.json(); setRecipe(recipeResult.choices[0].message.content); } catch (err) { setError(`We couldn't analyze the image: ${err.message}`); } finally{ setLoading(false); } }; const handleFile = async (event)=>{ const selectedFile = event.target.files?.[0]; if (selectedFile) { try { const imageUrl = await uploadToCreateStorage(selectedFile); setImagePreview(imageUrl); await analyzeImage(imageUrl); } catch (err) { setError(err.message); } } }; const handleImageUrlSubmit = async (e)=>{ e.preventDefault(); if (imageUrlInput) { try { setImagePreview(imageUrlInput); await analyzeImage(imageUrlInput); } catch (err) { setError("Failed to analyze image from URL: " + err.message); } } }; const handleFeedbackSubmit = (e)=>{ e.preventDefault(); setFeedbackSubmitted(true); setFeedback(""); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#0B3C5D] text-white flex flex-col items-center justify-center px-4", __source: { fileName: "", lineNumber: 114, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md bg-white text-gray-900 rounded-xl overflow-hidden shadow-xl", __source: { fileName: "", lineNumber: 115, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 text-center", __source: { fileName: "", lineNumber: 116, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold mb-2 text-blue-600", __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, "KITCHEN AI"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 mb-4", __source: { fileName: "", lineNumber: 118, columnNumber: 11 }, __self: this }, "It’s fast. It’s smart. And it works with any meal – from Butter Chicken 🍛 to Burgers 🍔"), /*#__PURE__*/ React.createElement("div", { className: "text-left text-sm bg-blue-50 text-blue-900 p-4 rounded-lg mb-4", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 124, columnNumber: 13 }, __self: this }, "How to Use:"), /*#__PURE__*/ React.createElement("ol", { className: "list-decimal list-inside space-y-1", __source: { fileName: "", lineNumber: 125, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }, "📷 Take a photo of your dish using your camera"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 127, columnNumber: 15 }, __self: this }, "🖼️ Or upload a saved image from your device"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 128, columnNumber: 15 }, __self: this }, "🌐 Or paste a direct image URL"), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 129, columnNumber: 15 }, __self: this }, "✅ Get a full recipe instantly with ingredients & instructions"))), /*#__PURE__*/ React.createElement("div", { className: "rounded-xl overflow-hidden border mb-4", __source: { fileName: "", lineNumber: 135, columnNumber: 11 }, __self: this }, imagePreview ? /*#__PURE__*/ React.createElement("img", { src: imagePreview, alt: "Preview", className: "w-full h-60 object-cover", __source: { fileName: "", lineNumber: 137, columnNumber: 15 }, __self: this }) : /*#__PURE__*/ React.createElement("div", { className: "w-full h-60 bg-gray-100 flex items-center justify-center text-gray-400", __source: { fileName: "", lineNumber: 143, columnNumber: 15 }, __self: this }, "No image uploaded")), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", capture: "environment", onChange: handleFile, className: "hidden", id: "camera", __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "camera", className: "bg-blue-600 text-white px-4 py-2 rounded-lg font-medium inline-block cursor-pointer mb-2", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, "📷 Take a Live Photo"), /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", onChange: handleFile, className: "hidden", id: "upload", __source: { fileName: "", lineNumber: 164, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "upload", className: "bg-green-600 text-white px-4 py-2 rounded-lg font-medium inline-block cursor-pointer mb-2", __source: { fileName: "", lineNumber: 171, columnNumber: 11 }, __self: this }, "🖼️ Upload Photo"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleImageUrlSubmit, className: "mt-4", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", value: imageUrlInput, onChange: (e)=>setImageUrlInput(e.target.value), placeholder: "Paste Image URL", className: "w-full px-3 py-2 border rounded-lg mb-2", __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-purple-600 text-white px-4 py-2 rounded-lg w-full", __source: { fileName: "", lineNumber: 186, columnNumber: 13 }, __self: this }, "🌐 Analyze from URL")), loading && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-sm text-blue-600", __source: { fileName: "", lineNumber: 195, columnNumber: 13 }, __self: this }, "Analyzing your dish..."), error && /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-sm text-red-600", __source: { fileName: "", lineNumber: 197, columnNumber: 21 }, __self: this }, error), recipe && /*#__PURE__*/ React.createElement("div", { className: "text-left mt-6 bg-gray-50 rounded-lg p-4 overflow-y-auto max-h-96", __source: { fileName: "", lineNumber: 200, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-2", __source: { fileName: "", lineNumber: 201, columnNumber: 15 }, __self: this }, "Your Recipe"), /*#__PURE__*/ React.createElement("pre", { className: "whitespace-pre-wrap text-sm text-gray-800", __source: { fileName: "", lineNumber: 202, columnNumber: 15 }, __self: this }, recipe)), /*#__PURE__*/ React.createElement("form", { onSubmit: handleFeedbackSubmit, className: "mt-6", __source: { fileName: "", lineNumber: 208, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { value: feedback, onChange: (e)=>setFeedback(e.target.value), placeholder: "Send us your feedback...", rows: 3, className: "w-full p-2 border rounded-lg", __source: { fileName: "", lineNumber: 209, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-600 text-white px-4 py-2 rounded-lg w-full mt-2", __source: { fileName: "", lineNumber: 216, columnNumber: 13 }, __self: this }, "Submit Feedback"), feedbackSubmitted && /*#__PURE__*/ React.createElement("p", { className: "text-green-600 text-sm mt-2", __source: { fileName: "", lineNumber: 223, columnNumber: 15 }, __self: this }, "Thanks for your feedback!"))))); }