function MainComponent() { const [prompt, setPrompt] = React.useState(''); const [style, setStyle] = React.useState(''); const [seed, setSeed] = React.useState(Math.floor(Math.random() * 10000)); const [loading, setLoading] = React.useState(false); const [waitTime, setWaitTime] = React.useState(0); const [images, setImages] = React.useState([]); const [uploadedImages, setUploadedImages] = React.useState([]); const handleGenerate = async ()=>{ setLoading(true); const startTime = Date.now(); try { const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(prompt + ' ' + style)}&seed=${seed}`, { method: 'GET' }); const data = await response.json(); setImages(data.data); } catch (error) { console.error(error); } const endTime = Date.now(); setWaitTime((endTime - startTime) / 1000); setLoading(false); }; const handleUpload = (event)=>{ const files = event.target.files; const fileArray = Array.from(files).map((file)=>URL.createObjectURL(file)); setUploadedImages((prevImages)=>prevImages.concat(fileArray)); }; const styles = [ "実写", "アニメ", "漫画", "ジブリ", "ディズニー", "ピクサー", "アメコミ", "萌えキャラ", "RPG", "水彩画", "水墨画", "浮絵", "線画", "ドット絵", "三面図", "縫製仕様書" ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", placeholder: "プロンプトを入力...", value: prompt, onChange: (e)=>setPrompt(e.target.value), className: "border p-2 w-full", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, "スタイルを選択"), /*#__PURE__*/ React.createElement("select", { name: "style", value: style, onChange: (e)=>setStyle(e.target.value), className: "border p-2 w-full", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "未設定"), styles.map((styleOption)=>/*#__PURE__*/ React.createElement("option", { key: styleOption, value: styleOption, __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, styleOption)))), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, "シード値: ", seed), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setSeed(Math.floor(Math.random() * 10000)), className: "bg-blue-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, "🎲 ランダム化")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "bg-green-500 text-white py-2 px-4 rounded", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "生成")), loading && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 78, columnNumber: 19 }, __self: this }, "生成中... 待ち時間: ", waitTime, "秒"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, images.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `生成された画像${index}`, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "画像をアップロード"), /*#__PURE__*/ React.createElement("input", { type: "file", multiple: true, onChange: handleUpload, className: "border p-2 w-full", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 92, columnNumber: 9 }, __self: this }, uploadedImages.map((url, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: url, alt: `アップロードされた画像${index}`, className: "w-[200px] h-[200px]", __source: { fileName: "", lineNumber: 94, columnNumber: 13 }, __self: this }))))); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 104, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this })); }