function MainComponent() { const [servings, setServings] = React.useState(""); const [ingredients, setIngredients] = React.useState(""); const [nutritionFacts, setNutritionFacts] = React.useState({}); const [isLoading, setIsLoading] = React.useState(false); const [feedback, setFeedback] = React.useState(""); const handleSubmit = async (e)=>{ e.preventDefault(); setIsLoading(true); setFeedback(""); setNutritionFacts({}); try { const response = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Calculate the nutrition facts per serving accurately based on the ingredients provided below, and return only the JSON object: Servings: ${servings} Ingredients: ${ingredients} JSON fields to include: calories, protein, carbohydrates, fat, fiber, sugar, cholesterol, sodium, vitaminC, calcium. Provide only numeric values.` } ] }) }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); console.log("Raw API response:", data); if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) { const content = data.choices[0].message.content; const jsonStart = content.indexOf("{"); const jsonEnd = content.lastIndexOf("}") + 1; if (jsonStart !== -1 && jsonEnd !== -1) { const jsonString = content.substring(jsonStart, jsonEnd); try { const nutritionData = JSON.parse(jsonString); setNutritionFacts(nutritionData); } catch (parseError) { console.error("Error parsing nutrition data:", parseError); setFeedback("Failed to parse nutrition data. Please check your input and try again."); } } else { console.error("No JSON found in response."); setFeedback("No valid nutrition data found in response."); } } else { console.error("Unexpected response structure:", data); setFeedback("Received an unexpected response. Please try again."); } } catch (error) { console.error("Error calculating nutrition facts:", error); setFeedback(`Failed to calculate nutrition facts: ${error.message}`); } finally{ setIsLoading(false); } }; const units = { calories: "", sodium: "mg", vitaminC: "mg", calcium: "mg" }; const getUnit = (key)=>units[key] ? units[key] : key === "calories" ? "" : "g"; const formatLabel = (key)=>{ const pattern = /([A-Z][a-z]*)([A-Z][a-z]*)/g; return key.replace(pattern, "$1 $2").replace(/^\w/, (c)=>c.toUpperCase()); }; const renderNutritionFacts = ()=>{ return Object.entries(nutritionFacts).map(([key, value])=>/*#__PURE__*/ React.createElement("p", { key: key, className: "font-roboto", __source: { fileName: "", lineNumber: 96, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, formatLabel(key), ":"), " ", value !== null ? `${parseFloat(value)}${getUnit(key)}` : "N/A")); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex p-4", __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-6 w-full max-w-full", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 text-center font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, "Recipe Nutrition Calculator"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 109, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 110, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "servings", className: "block mb-1 font-semibold font-roboto", __source: { fileName: "", lineNumber: 111, columnNumber: 13 }, __self: this }, "Number of Servings:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "servings", name: "servings", className: "w-full border rounded p-2", min: "1", placeholder: "Enter number of servings", value: servings, onChange: (e)=>setServings(e.target.value), __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 128, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "ingredients", className: "block mb-1 font-semibold font-roboto", __source: { fileName: "", lineNumber: 129, columnNumber: 13 }, __self: this }, "Ingredients:"), /*#__PURE__*/ React.createElement("textarea", { id: "ingredients", name: "ingredients", rows: "5", className: "w-full border rounded p-2", placeholder: "Enter ingredients with quantities (one per line)", value: ingredients, onChange: (e)=>setIngredients(e.target.value), __source: { fileName: "", lineNumber: 135, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-[#fe5243] text-white font-bold py-2 px-4 rounded hover:bg-[#e04838] transition duration-300 font-roboto", disabled: isLoading, __source: { fileName: "", lineNumber: 145, columnNumber: 11 }, __self: this }, isLoading ? "Calculating..." : "Calculate Nutrition")), feedback && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-blue-600 font-roboto", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, feedback), Object.keys(nutritionFacts).length > 0 && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4", role: "alert", __source: { fileName: "", lineNumber: 158, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-bold", __source: { fileName: "", lineNumber: 162, columnNumber: 15 }, __self: this }, "Note:"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 163, columnNumber: 15 }, __self: this }, "The nutrition facts provided are estimates and may not be 100% accurate. Please use this information as a general guide only.")), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 168, columnNumber: 13 }, __self: this }, "Nutrition Facts (per serving)"), /*#__PURE__*/ React.createElement("div", { className: "border-t border-b py-2 grid grid-cols-2 gap-2", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, renderNutritionFacts()), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 174, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "https://ucarecdn.com/38d896d1-dac4-4cd8-a419-5bcd562ad298/-/format/auto/", alt: "Recipe Kit Logo", className: "w-[200px] mx-auto", __source: { fileName: "", lineNumber: 175, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 180, columnNumber: 15 }, __self: this }, "Enhance your Shopify store blogs with the", " ", /*#__PURE__*/ React.createElement("a", { href: "https://apps.shopify.com/recipe-kit?utm_source=rk_website&utm_medium=tool", className: "text-[#fe5243] font-bold", target: "_blank", rel: "noopener noreferrer", __source: { fileName: "", lineNumber: 182, columnNumber: 17 }, __self: this }, "Recipe Kit"), " ", "app."))))); }