function GeneratedImageForm({ handleSubmit, imageUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto text-center mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, "画像生成サイト"), /*#__PURE__*/ React.createElement("form", { className: "bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 w-[400px]", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "prompt", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "プロンプト"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "prompt", name: "prompt", type: "text", placeholder: "例: Disneyの動物たちがポーカーをしている", required: true, __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "width", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, "幅 (px)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "width", name: "width", type: "number", placeholder: "1024", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-gray-700 text-sm font-bold mb-2", htmlFor: "height", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "高さ (px)"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline", id: "height", name: "height", type: "number", placeholder: "1024", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "submit", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "生成"))), imageUrl && /*#__PURE__*/ React.createElement("img", { src: imageUrl, alt: "Generated result", className: "w-[400px] h-auto mt-4", __source: { fileName: "", lineNumber: 52, columnNumber: 20 }, __self: this })); } function GeneratedImageFormStory() { const handleSubmit = (event)=>{ event.preventDefault(); const form = event.target; const prompt = form.prompt.value; const width = form.width.value || 1024; const height = form.height.value || 1024; const imageUrl = `/path/to/generated/image?prompt=${prompt}&width=${width}&height=${height}`; // Example URL generation setImageUrl(imageUrl); }; const [imageUrl, setImageUrl] = React.useState(''); return /*#__PURE__*/ React.createElement(GeneratedImageForm, { handleSubmit: handleSubmit, imageUrl: imageUrl, __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }); } function MainComponent() { const [imageUrl, setImageUrl] = React.useState(""); const handleSubmit = (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const prompt = formData.get("prompt"); const width = formData.get("width") || 1024; const height = formData.get("height") || 1024; const url = new URL("/integrations/stable-diffusion/", window.location.origin); url.searchParams.append("prompt", prompt); url.searchParams.append("width", width); url.searchParams.append("height", height); fetch(url, { method: "GET" }).then((response)=>response.json()).then((data)=>{ if (data.data && data.data[0]) { const image = data.data[0]; const messages = [ { role: "user", content: [ { type: "text", text: "Generated image" }, { type: "image_url", image_url: { url: image } } ] } ]; fetch('/integrations/gpt-vision/', { method: "POST", body: JSON.stringify({ messages }) }).then((response)=>response.json()).then((result)=>{ if (result.choices && result.choices[0] && result.choices[0].message) { console.log(result.choices[0].message.content); } setImageUrl(image); }); } }); }; return /*#__PURE__*/ React.createElement(GeneratedImageForm, { handleSubmit: handleSubmit, imageUrl: imageUrl, __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }); }