function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [selectedOption, setSelectedOption] = React.useState(1); const [selectedSeazon, setSelectedSeazon] = React.useState(""); const [selectedArea, setSelectedArea] = React.useState(""); const [selectedMood, setSelectedMood] = React.useState(""); const [error, setError] = React.useState(""); const [loading, setLoading] = React.useState(false); const [images, setImages] = React.useState([]); const options = [ { id: 1, name: "設定無し", value: "Normal" }, { id: 2, name: "油絵", value: "Oil painting" }, { id: 3, name: "水彩", value: "Watercolor painting" }, { id: 4, name: "パステル", value: "Pastel" }, { id: 5, name: "アクリル", value: "Acrylic" }, { id: 6, name: "クレヨン", value: "Crayon" }, { id: 7, name: "色鉛筆", value: "Color pencil" }, { id: 8, name: "ウール", value: "Woolen" }, { id: 9, name: "サンド", value: "Sand" }, { id: 10, name: "毛筆", value: "Brushwork" }, { id: 11, name: "木版画", value: "Woodblock print" }, { id: 12, name: "銅版画", value: "Etching" }, { id: 13, name: "フラット", value: "Flat, Without assertiveness" }, { id: 14, name: "コットン", value: "Fluffy, Dreamy cotton" }, { id: 15, name: "ゆるゆる", value: "Fluffy and cute and loose" }, { id: 16, name: "ペーパークラフト", value: "Three-dimensional paper crafts" }, { id: 17, name: "3D", value: "3D" }, { id: 18, name: "モザイク", value: "Mosaic" }, { id: 19, name: "ステンドグラス", value: "Vivid、Stained glass" }, { id: 20, name: "ラインアート", value: "Color line" }, { id: 21, name: "シティポップ", value: "City pop" }, { id: 22, name: "ネオポップ", value: "Vivid Neo-pop" }, { id: 23, name: "スチームパンク", value: "Steampunk with metallic textures" }, { id: 24, name: "サイバーパンク", value: "Cyberpunk" }, { id: 25, name: "サイケデリック", value: "Vivid Psychedelic" }, { id: 26, name: "コラージュ", value: "Collage" }, { id: 27, name: "劇画調", value: "Close-Up angle and strong dramatic tone" }, { id: 28, name: "ホラー", value: "Terrifying horrorm, Eerie colors" }, { id: 29, name: "浮世絵", value: "Ukiyoe, Katsushika Hokusai" }, { id: 30, name: "大正浪漫", value: "Japanese Taisho Romanticism" } ]; const seazons = [ { value: "", label: "季節", label2: "" }, { value: "spring", label: "春", label2: "春" }, { value: "summer", label: "夏", label2: "夏" }, { value: "autumn", label: "秋", label2: "秋" }, { value: "winter", label: "冬", label2: "冬" } ]; const areas = [ { value: "", label: "地域", label2: "" }, { value: "Japanese", label: "日本", label2: "日本" }, { value: "Chinese", label: "中国", label2: "中国" }, { value: "Russian", label: "ロシア", label2: "ロシア" }, { value: "English", label: "イギリス", label2: "イギリス" }, { value: "Indian", label: "インド", label2: "インド" }, { value: "Kenyan", label: "ケニア", label2: "ケニア" }, { value: "American", label: "アメリカ", label2: "アメリカ" }, { value: "Mexican", label: "メキシコ", label2: "メキシコ" }, { value: "Rabbit World", label: "謎の国", label2: "謎の国" } ]; const moods = [ { value: "", label: "気分", label2: "" }, { value: "happy", label: "ウキウキ", label2: "ウキウキ" }, { value: "great laughter", label: "ゲラゲラ", label2: "ゲラゲラ" }, { value: "sad", label: "シクシク", label2: "シクシク" }, { value: "angry", label: "イライラ", label2: "イライラ" }, { value: "tired", label: "クタクタ", label2: "クタクタ" }, { value: "anxious and worried", label: "オロオロ", label2: "オロオロ" }, { value: "very sleepy", label: "スヤスヤ", label2: "スヤスヤ" } ]; const handlePromptChange = (e)=>setPrompt(e.target.value); const handleOptionChange = (id)=>setSelectedOption(id); const handleSeazonChange = (e)=>setSelectedSeazon(e.target.value); const handleAreaChange = (e)=>setSelectedArea(e.target.value); const handleMoodChange = (e)=>setSelectedMood(e.target.value); const handleClear = ()=>{ setPrompt(""); setError(""); setSelectedOption(1); setSelectedSeazon(""); setSelectedArea(""); setSelectedMood(""); }; const handleGenerate = async ()=>{ if (prompt.trim() === "" || /アダルト用語/i.test(prompt)) { setError("プロンプトエラー"); return; } setError(""); setLoading(true); try { const selectedOptionValue = options.find((o)=>o.id === selectedOption).value; const fullPrompt = `Stylish color illustration of ${selectedArea} ${prompt}, (style : Detailed ${selectedOptionValue} art), (seazon : ${selectedSeazon}), (mood : ${selectedMood})`; const response = await fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(fullPrompt)}`, { method: "GET" }); const result = await response.json(); if (result.data.length) { const image = { prompt, option: options.find((o)=>o.id === selectedOption).name, seazon: seazons.find((s)=>s.value === selectedSeazon)?.label2 || "", area: areas.find((a)=>a.value === selectedArea)?.label2 || "", mood: moods.find((m)=>m.value === selectedMood)?.label2 || "", url: result.data[0] }; if (prompt === "題材はお任せします") { const visionResponse = await fetch("/integrations/gpt-vision/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: [ { type: "image_url", image_url: { url: image.url } } ] } ] }) }); const visionResult = await visionResponse.json(); const visionDescription = visionResult.choices[0]?.message?.content || ""; const chatResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Translate to Japanese: ${visionDescription}` } ] }) }); const chatResult = await chatResponse.json(); const translatedDescription = chatResult.choices[0]?.message?.content || ""; const summaryResponse = await fetch("/integrations/chat-gpt/conversationgpt4", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ { role: "user", content: `Please summarize in 200 characters: ${translatedDescription}` } ] }) }); const summaryResult = await summaryResponse.json(); const summaryDescription = summaryResult.choices[0]?.message?.content || ""; setImages([ { ...image, description: summaryDescription }, ...images ]); } else { setImages([ image, ...images ]); } } else { setError("画像生成に失敗しました。"); } } catch { setError("画像生成に失敗しました。"); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen p-4 bg-white flex flex-col items-center", __source: { fileName: "", lineNumber: 172, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl font-bold text-center text-[#00f] truncate", __source: { fileName: "", lineNumber: 173, columnNumber: 7 }, __self: this }, "マルチイラストレーター(β)"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "prompt", className: "w-full max-w-lg mt-4 p-2 border border-gray-300 rounded", placeholder: "プロンプトを入力", value: prompt, onChange: handlePromptChange, onKeyDown: (e)=>e.key === "Enter" && handleGenerate(), __source: { fileName: "", lineNumber: 174, columnNumber: 7 }, __self: this }), error && /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-red-500 text-sm", __source: { fileName: "", lineNumber: 183, columnNumber: 17 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-5 gap-2 mt-4 justify-center", __source: { fileName: "", lineNumber: 184, columnNumber: 7 }, __self: this }, options.map((option)=>{ const isSelected = selectedOption === option.id; const borderClass = isSelected ? "border-[#0000ff] border-2" : "border-[#0000ff]"; const backgroundClass = isSelected ? "bg-blue-100" : "bg-white"; return /*#__PURE__*/ React.createElement("div", { key: option.id, className: `cursor-pointer p-2 border ${borderClass} rounded w-[60px] h-[60px] flex flex-col items-center justify-center text-[12px] font-bold ${backgroundClass}`, onClick: ()=>handleOptionChange(option.id), __source: { fileName: "", lineNumber: 190, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 195, columnNumber: 15 }, __self: this }, option.name)); })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center mt-4 space-x-4", __source: { fileName: "", lineNumber: 200, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { className: "w-[100px] p-2 border border-[#ff0000] rounded text-[12px]", name: "seazon", value: selectedSeazon, onChange: handleSeazonChange, __source: { fileName: "", lineNumber: 201, columnNumber: 9 }, __self: this }, seazons.map((seazon)=>/*#__PURE__*/ React.createElement("option", { key: seazon.value, value: seazon.value, __source: { fileName: "", lineNumber: 208, columnNumber: 13 }, __self: this }, seazon.label))), /*#__PURE__*/ React.createElement("select", { className: "w-[100px] p-2 border border-[#ff0000] rounded text-[12px]", name: "area", value: selectedArea, onChange: handleAreaChange, __source: { fileName: "", lineNumber: 211, columnNumber: 9 }, __self: this }, areas.map((area)=>/*#__PURE__*/ React.createElement("option", { key: area.value, value: area.value, __source: { fileName: "", lineNumber: 218, columnNumber: 13 }, __self: this }, area.label))), /*#__PURE__*/ React.createElement("select", { className: "w-[100px] p-2 border border-[#ff0000] rounded text-[12px]", name: "mood", value: selectedMood, onChange: handleMoodChange, __source: { fileName: "", lineNumber: 221, columnNumber: 9 }, __self: this }, moods.map((mood)=>/*#__PURE__*/ React.createElement("option", { key: mood.value, value: mood.value, __source: { fileName: "", lineNumber: 228, columnNumber: 13 }, __self: this }, mood.label)))), /*#__PURE__*/ React.createElement("div", { className: "flex mt-4 gap-4 justify-center", __source: { fileName: "", lineNumber: 232, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleGenerate, className: "bg-blue-500 text-white p-2 w-[120px] rounded text-center", disabled: loading, __source: { fileName: "", lineNumber: 233, columnNumber: 9 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fa fa-spinner fa-spin", __source: { fileName: "", lineNumber: 238, columnNumber: 22 }, __self: this }) : "生成"), /*#__PURE__*/ React.createElement("button", { onClick: handleClear, className: "bg-red-500 text-white p-2 w-[120px] rounded text-center", __source: { fileName: "", lineNumber: 240, columnNumber: 9 }, __self: this }, "クリア")), /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-4xl", __source: { fileName: "", lineNumber: 247, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-4", __source: { fileName: "", lineNumber: 249, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 250, columnNumber: 13 }, __self: this }, image.prompt, "(", image.option, "/", image.seazon, "/", image.area, "/", image.mood, ")"), /*#__PURE__*/ React.createElement("img", { src: image.url, alt: `生成された画像 ${index + 1}`, className: "w-full object-contain", __source: { fileName: "", lineNumber: 251, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "text-xs mt-2", __source: { fileName: "", lineNumber: 252, columnNumber: 13 }, __self: this }, image.description), /*#__PURE__*/ React.createElement("div", { className: "flex mt-2 gap-4 justify-center", __source: { fileName: "", lineNumber: 253, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>window.open(image.url, "_blank"), className: "bg-green-800 text-white p-2 w-[120px] rounded text-center", __source: { fileName: "", lineNumber: 254, columnNumber: 15 }, __self: this }, "DownLoad"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setPrompt(image.prompt), className: "bg-[#8b4513] text-white p-2 w-[120px] rounded text-center", __source: { fileName: "", lineNumber: 260, columnNumber: 15 }, __self: this }, "Retry"))))), /*#__PURE__*/ React.createElement("div", { className: "mt-6 text-center text-gray-600 text-xs", __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, "Manyo-LAB")); }