function MainComponent() { const [formData, setFormData] = React.useState({ currentPitchRoll: '', measurementBoard: '', widthFlapMeasurement: '', pinMeasurement: '' }); const [errors, setErrors] = React.useState({}); const [imageSrc, setImageSrc] = React.useState(''); const [tooltip, setTooltip] = React.useState(''); const handleChange = (e)=>{ const { name, value } = e.target; setFormData((prevFormData)=>({ ...prevFormData, [name]: value })); setErrors((prevErrors)=>({ ...prevErrors, [name]: '' })); }; const validateForm = ()=>{ const newErrors = {}; if (!formData.currentPitchRoll) newErrors.currentPitchRoll = 'Current Pitch/Roll is required'; if (!formData.measurementBoard) newErrors.measurementBoard = 'Measurement Board is required'; if (!formData.widthFlapMeasurement) newErrors.widthFlapMeasurement = 'Width Flap Measurement is required'; if (!formData.pinMeasurement) newErrors.pinMeasurement = 'Pin Measurement is required'; return newErrors; }; const handleSubmit = async (e)=>{ e.preventDefault(); const formErrors = validateForm(); if (Object.keys(formErrors).length > 0) { setErrors(formErrors); return; } const { currentPitchRoll, measurementBoard, widthFlapMeasurement, pinMeasurement } = formData; const prompt = `sketch drawing of an industrial chain with current pitch roll: ${currentPitchRoll}, measurement board: ${measurementBoard}, width flap measurement: ${widthFlapMeasurement}, pin measurement: ${pinMeasurement}`; const response = await fetch(`/integrations/stable-diffusion/?prompt=${encodeURIComponent(prompt)}&batch_size=1`, { method: 'GET' }); const data = await response.json(); if (data && data.data) { setImageSrc(data.data[0]); } }; const handleMouseEnter = (text)=>()=>setTooltip(text); const handleMouseLeave = ()=>setTooltip(''); const formElements = [ { label: 'Current Pitch/Roll', name: 'currentPitchRoll', type: 'text', tooltip: 'Enter the pitch and roll for the current chain link.' }, { label: 'Measurement Board', name: 'measurementBoard', type: 'text', tooltip: 'Enter the measurement board ratio.' }, { label: 'Width Flap Measurement', name: 'widthFlapMeasurement', type: 'text', tooltip: 'Enter the width of the flap' }, { label: 'Pin Measurement', name: 'pinMeasurement', type: 'text', tooltip: 'Enter the pin measurement length.' } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen py-10 px-5 md:px-10 bg-[#f1f1f1]", __source: { fileName: "", lineNumber: 63, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "bg-white p-5 md:p-10 shadow rounded", __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid gap-5 md:grid-cols-2", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, formElements.map((el, idx)=>/*#__PURE__*/ React.createElement("div", { key: idx, className: "relative", onMouseEnter: handleMouseEnter(el.tooltip), onMouseLeave: handleMouseLeave, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: el.name, className: "block font-roboto text-[#121212] mb-2 flex items-center", __source: { fileName: "", lineNumber: 69, columnNumber: 17 }, __self: this }, el.label, /*#__PURE__*/ React.createElement("span", { className: "ml-2 text-gray-400 cursor-help", __source: { fileName: "", lineNumber: 71, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-question-circle", __source: { fileName: "", lineNumber: 72, columnNumber: 21 }, __self: this }))), /*#__PURE__*/ React.createElement("input", { type: el.type, name: el.name, value: formData[el.name], onChange: handleChange, className: `w-full border p-2 rounded font-roboto ${errors[el.name] ? 'border-red-500' : 'border-gray-300'}`, __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), errors[el.name] && /*#__PURE__*/ React.createElement("p", { className: "absolute text-xs text-red-500 -bottom-6", __source: { fileName: "", lineNumber: 82, columnNumber: 37 }, __self: this }, errors[el.name])))), tooltip && /*#__PURE__*/ React.createElement("div", { className: "absolute text-sm bg-black text-white p-2 rounded", __source: { fileName: "", lineNumber: 86, columnNumber: 24 }, __self: this }, tooltip), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "mt-5 w-full p-3 bg-blue-500 text-white font-bold rounded shadow hover:bg-blue-600", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Generate Sketch Drawing")), imageSrc && /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imageSrc, alt: "Sketch drawing based on user's input measurements", className: "max-w-full h-auto", __source: { fileName: "", lineNumber: 93, columnNumber: 13 }, __self: this })))); }