function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [image, setImage] = React.useState(null); const handlePromptChange = (e)=>setPrompt(e.target.value); const handleImageChange = (e)=>{ const file = e.target.files[0]; if (file) { const reader = new FileReader(); reader.onloadend = ()=>setImage(reader.result); reader.readAsDataURL(file); } }; const handleSubmit = async (e)=>{ e.preventDefault(); if (!prompt || !image) return; const requestBody = JSON.stringify({ messages: [ { role: "user", content: [ { type: "text", text: `Write prompt for image generation but change [User Prompt], write prompt that be good for dall-e dont write anything else than prompt.` }, { type: "image_url", image_url: { url: image } } ] } ] }); const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: requestBody }); const result = await response.json(); const generatedPrompt = result.choices[0].message.content; console.log(generatedPrompt); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-6 bg-gray-100", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, "Upload File and Generate Prompt"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col items-center w-full max-w-md p-4 bg-white rounded shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userPrompt", value: prompt, onChange: handlePromptChange, className: "w-full p-2 mb-4 border border-gray-300 rounded", placeholder: "Enter your prompt", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "flex flex-col items-center w-full mb-4 cursor-pointer", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-5xl text-gray-500", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-upload", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("span", { className: "text-center text-gray-500 mt-2", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "Click to upload"), /*#__PURE__*/ React.createElement("input", { type: "file", name: "userImage", className: "hidden", accept: ".png, .jpeg, .jpg, .webp, .gif", onChange: handleImageChange, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Generate Prompt"))); }