function MainComponent() { const [theme, setTheme] = React.useState(""); const [style, setStyle] = React.useState(""); const [loading, setLoading] = React.useState(false); const [image, setImage] = React.useState(null); const styles = [ "アニメイラスト風", "LINEスタンプ風のイラストを9個並べたスプライトシート", "2Dアニメイラスト風", "2Dフラットイラスト風", "Pixarアニメーション風", "子供用の塗り絵風", "クレイアニメーション風", "『ジョジョの奇妙な冒険』のような漫画風", "フラットな塗り方のカートゥーンイラスト風", "ソフトな色使いと精細な線画の現代アニメスタイル", "細やかなモノクロ線画のアニメスタイル", "緻密な線画と陰影の細かいアニメスタイル", "クリーンな線画と鮮やかなカラーの現代アニメスタイル", "日本のアニメ風で緻密な線画と鮮やかな色彩風", "1980年代の日本のアニメスタイルで、手描き感とソフトな色調が特徴", "ゆるキャラ風のかわいいアニメキャラクター風", "子供が描いたラフ風アニメイラスト風", "フラットカラーのアニメセルシェードイラスト風", "大胆なテクスチャペイントアニメイラスト風", "伝統的な油絵風のアニメイラスト風", "ざらざらした紙に鮮やかな水彩画で描いたアニメイラスト風", "鮮やかなコピックマーカーのアニメイラスト風", "淡い色鉛筆スケッチアニメイラスト風", "スペクトルカラーのアニメイラストを使用した明るいデジタルペインティング風", "折り紙で作られたアニメの表現風", "ミックスメディアの切り絵アニメコラージュ風", "ぬいぐるみにインスパイアされたアニメキャラクターデザイン風", "カラフルなインクペンのアニメの絵風", "鮮やかな色彩と大胆な線画のフラットなポスターイラストアニメデザイン風", "アニメキャラクターを布地に刺繍で表現", "ダイカットステッカー風のアニメイラスト", "ダークファンタジーアニメ風", "クラシックな日本のアニメ風", "マジンガーゼット風", "サイバーパンク風", "日本のアニメ風で緻密な線画と鮮やかな色彩風", "切り絵風", "ルネサンス期の古典的なスタイル、テンペラとフレスコ画法風", "アール・ヌーヴォーのスタイル、ステンドグラスのような色使い", "シンプルで洗練されたモノクロの線画", "ファンタジー風", "ピクセルアート風", "ヴィンテージアニメイラスト風", "超写実的な写真", "アメコミ風", "シンプルイラスト風", "ベクタースタイル", "いたずら書き風", "黒板チョークアート風", "水墨画風", "ポップ漫画風", "70年代風のレトロ調", "ピカソ風", "クリムト風", "ボタニカルアート風", "プリミティヴ風", "アール・ヌーヴォー風", "ロココ風", "キュビズム風", "バロック風", "フォービズム風", "ダダイズム風", "ヴィンセント・ヴァン・ゴッホ (Vincent van Gogh)の絵画風", "グスタフ・クリムト (Gustav Klimt)の絵画風", "レオナルド・ダ・ヴィンチ (Leonardo da Vinci)の絵画風", "ミケランジェロ (Michelangelo)の絵画風", "レンブラント (Rembrandt)の絵画風", "ジョハネス・フェルメール (Johannes Vermeer)の絵画風", "カラヴァッジョ (Caravaggio)の絵画風", "フランシスコ・ゴヤ (Francisco Goya)の絵画風", "ジャン＝フランソワ・ミレー (Jean-François Millet)の絵画風", "エドゥアール・マネ (Édouard Manet)の絵画風", "ウィリアム・ターナー (J.M.W. Turner)の絵画風", "ジョン・コンスタブル (John Constable)の絵画風", "エウジェーヌ・ドラクロワ (Eugène Delacroix)の絵画風", "パオロ・ウッチェロ (Paolo Uccello)の絵画風", "ピエトロ・ペルジーノ (Pietro Perugino)の絵画風", "ジョルジョーネ (Giorgione)の絵画風", "ティツィアーノ (Titian)の絵画風", "ピーテル・パウル・ルーベンス (Peter Paul Rubens)の絵画風", "エル・グレコ (El Greco)の絵画風", "フランチェスコ・ハイエス (Francisco de Zurbarán)の絵画風", "ダンテ・ガブリエル・ロセッティ (Dante Gabriel Rossetti)の絵画風", "ジョン・エヴェレット・ミレイ (John Everett Millais)の絵画風", "トマス・ガインズボロー (Thomas Gainsborough)の絵画風", "ジョン・シングルトン・コプリー (John Singleton Copley)の絵画風", "フィリップ・オットー・ルンゲ (Philipp Otto Runge)の絵画風", "ジャン＝アンドレ・ドルー (Jean-André Delorme)の絵画風", "カミーユ・ピサロ (Camille Pissarro)の絵画風", "ジョン・テニエル (John Tenniel)の絵画風", "ヘンリー・フュセリ (Henry Fuseli)の絵画風", "ニコラ・プッサン (Nicolas Poussin)の絵画風", "フラットデザインのアイコンを36個並べたスプライトシート" ]; const handleSubmit = ()=>{ setLoading(true); fetch(`/integrations/dall-e-3/?prompt=${encodeURIComponent(theme + ", " + style)}`, { method: 'GET' }).then((res)=>res.json()).then((data)=>{ setLoading(false); setImage(data.data[0]); }).catch(()=>{ setLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "p-5 sm:p-20", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[500px] mx-auto", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-bold mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "画像のテーマや特徴を教えてください"), /*#__PURE__*/ React.createElement("textarea", { name: "theme", value: theme, onChange: (e)=>setTheme(e.target.value), className: "w-full h-[100px] p-2 border border-gray-300 rounded", placeholder: "作成する画像のテーマと特徴を教えてください", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "style", value: style, onChange: (e)=>setStyle(e.target.value), className: "w-full mt-3 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "スタイルを選択"), styles.map((style, index)=>/*#__PURE__*/ React.createElement("option", { key: index, value: style, __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, style))), /*#__PURE__*/ React.createElement("button", { onClick: handleSubmit, className: "w-full mt-3 p-3 bg-[#FFA500] text-white font-bold rounded hover:bg-[#8B4513]", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "イラストを描く"), loading && /*#__PURE__*/ React.createElement("div", { className: "mt-5", __source: { fileName: "", lineNumber: 52, columnNumber: 21 }, __self: this }, "ちょっと待ってね。お絵描き中～～"), image && /*#__PURE__*/ React.createElement("img", { src: image, alt: "Generated illustration", className: "mt-5 w-full", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, ` button { margin-bottom: 50px; } `))); }