function MainComponent() { const [meals, setMeals] = React.useState(''); const [healthGoal, setHealthGoal] = React.useState(''); const [allergies, setAllergies] = React.useState(''); const [dietaryPreference, setDietaryPreference] = React.useState(''); const [dietPlan, setDietPlan] = React.useState(''); const handleSubmit = async (e)=>{ e.preventDefault(); const response = await fetch('/integrations/anthropic-claude-sonnet-3-5/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: `Create a diet plan for someone with the following preferences: Number of meals per day: ${meals} Health Goal: ${healthGoal} Allergies/Intolerances: ${allergies} Dietary Preference: ${dietaryPreference} Please provide a detailed meal plan for one day.` } ] }) }); const data = await response.json(); setDietPlan(data.choices[0].message.content); }; return /*#__PURE__*/ React.createElement("div", { style: { fontFamily: 'Arial, sans-serif', maxWidth: '800px', margin: '0 auto', padding: '20px' }, __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { style: { textAlign: 'center', color: '#333' }, __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, "Professional AI Diet Planner"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, style: { backgroundColor: '#f9f9f9', padding: '20px', borderRadius: '8px' }, __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { style: { marginBottom: '15px' }, __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "meals", style: { display: 'block', marginBottom: '5px' }, __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, "Number of Meals per day"), /*#__PURE__*/ React.createElement("select", { id: "meals", name: "meals", value: meals, onChange: (e)=>setMeals(e.target.value), required: true, style: { width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }, __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "-- please select an option --"), [ 1, 2, 3, 4, 5 ].map((num)=>/*#__PURE__*/ React.createElement("option", { key: num, value: num, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, num)))), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: '15px' }, __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "healthGoal", style: { display: 'block', marginBottom: '5px' }, __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Health Goals"), /*#__PURE__*/ React.createElement("select", { id: "healthGoal", name: "healthGoal", value: healthGoal, onChange: (e)=>setHealthGoal(e.target.value), required: true, style: { width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }, __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 63, columnNumber: 13 }, __self: this }, "-- please select an option --"), [ 'Weight Loss', 'Weight Gain', 'Maintain Weight', 'Muscle Building', 'Generally Fit' ].map((goal)=>/*#__PURE__*/ React.createElement("option", { key: goal, value: goal, __source: { fileName: "", lineNumber: 65, columnNumber: 15 }, __self: this }, goal)))), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: '15px' }, __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "allergies", style: { display: 'block', marginBottom: '5px' }, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Allergies/Intolerances"), /*#__PURE__*/ React.createElement("input", { id: "allergies", name: "allergies", type: "text", placeholder: "Enter allergies or intolerances", value: allergies, onChange: (e)=>setAllergies(e.target.value), style: { width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }, __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { style: { marginBottom: '15px' }, __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "dietaryPreference", style: { display: 'block', marginBottom: '5px' }, __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, "Dietary Preferences"), /*#__PURE__*/ React.createElement("select", { id: "dietaryPreference", name: "dietaryPreference", value: dietaryPreference, onChange: (e)=>setDietaryPreference(e.target.value), required: true, style: { width: '100%', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 91, columnNumber: 13 }, __self: this }, "-- please select an option --"), [ 'Vegetarian', 'Vegan', 'Pescatarian', 'Ketogenic', 'Gluten-Free', 'Dairy-Free', 'No Preference' ].map((pref)=>/*#__PURE__*/ React.createElement("option", { key: pref, value: pref, __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this }, pref)))), /*#__PURE__*/ React.createElement("div", { style: { textAlign: 'center' }, __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "submit", style: { backgroundColor: '#4CAF50', color: 'white', padding: '10px 20px', border: 'none', borderRadius: '4px', cursor: 'pointer', fontSize: '16px' }, __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Generate Diet Plan"))), dietPlan && /*#__PURE__*/ React.createElement("div", { style: { marginTop: '20px', backgroundColor: '#fff', padding: '20px', borderRadius: '8px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)' }, __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { style: { color: '#333' }, __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }, "Your Personalized Diet Plan"), /*#__PURE__*/ React.createElement("pre", { style: { whiteSpace: 'pre-wrap', fontFamily: 'Arial, sans-serif' }, __source: { fileName: "", lineNumber: 117, columnNumber: 11 }, __self: this }, dietPlan))); }