function MainComponent() { const regions = [ "北海道弁", "青森県津軽弁", "青森県下北弁", "青森県南部弁", "秋田弁", "山形県庄内弁", "山形県置賜弁", "山形県新庄弁", "山形県村山弁", "岩手県盛岡弁", "岩手県宮古弁", "仙台弁", "福島弁", "茨城弁", "栃木弁", "群馬弁", "埼玉弁", "千葉県東総弁", "千葉県野田弁", "東京都山の手弁", "東京都江戸弁", "神奈川弁", "山梨県国中弁", "山形県郡内弁", "静岡弁", "新潟県佐渡弁", "新潟県長岡弁", "新潟県高田弁", "長野弁", "富山弁", "金沢弁", "福井弁", "岐阜県飛騨弁", "岐阜県美濃弁", "三重県伊勢弁", "三重県伊賀弁", "三重県志摩弁", "三重県紀州弁", "名古屋弁", "愛知県三河弁", "滋賀県湖東弁", "滋賀県湖西弁", "滋賀県湖南弁", "滋賀県湖北弁", "京都弁", "奈良弁", "大阪弁", "和歌山弁", "兵庫県神戸弁", "兵庫県丹波弁", "兵庫県淡路弁", "兵庫県但馬弁", "兵庫県摂津弁", "兵庫県播州弁", "岡山弁", "広島県安芸弁", "広島県福山弁", "島根県出雲弁", "島根県隠岐弁", "島根県石見弁", "鳥取県倉吉弁", "鳥取県米子弁", "山口弁", "徳島県徳島弁", "徳島県阿波弁", "香川弁", "愛媛県今治弁", "愛媛県伊予弁", "高知県土佐弁", "高知県幡多弁", "福岡県北九州弁", "福岡県博多弁", "佐賀弁", "長崎弁", "大分弁", "熊本弁", "鹿児島弁", "沖縄語", "宮古語", "八重山語", "与那国語" ]; const [input, setInput] = React.useState(""); const [output, setOutput] = React.useState(""); const [region, setRegion] = React.useState("北海道弁"); const [loading, setLoading] = React.useState(false); const [isDropdownOpen, setIsDropdownOpen] = React.useState(false); const [searchText, setSearchText] = React.useState(""); const handleConvert = async ()=>{ setLoading(true); const response = await fetch('/integrations/groq/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: `あなたは日本語のいろいろな方言に対応できます。標準語の文章、「${input}」を${region}に変換してください。標準語と変わらない部分はそのままで、返事や説明はいらないので変換した文章だけを鍵かっこも何もつけずにそのまま提示してください。` } ] }) }); const data = await response.json(); setOutput(data.choices[0].message.content); setLoading(false); }; const filteredRegions = regions.filter((region)=>region.includes(searchText)); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-4 w-full h-full bg-[#f0f0f0]", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4 w-full h-[400px]", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "input", value: input, onChange: (e)=>setInput(e.target.value), className: "w-full h-full p-2 border border-gray-300 bg-white font-semibold", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col w-full h-full", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsDropdownOpen((prev)=>!prev), className: "mb-2 p-2 border border-gray-300 rounded bg-white font-medium w-full text-left", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, region), isDropdownOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute top-full left-0 right-0 mt-1 border border-gray-300 rounded bg-white z-10", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", value: searchText, onChange: (e)=>setSearchText(e.target.value), className: "w-full p-2 border-b border-gray-300", placeholder: "検索...", __source: { fileName: "", lineNumber: 70, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "max-h-60 overflow-y-auto", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, filteredRegions.map((filteredRegion)=>/*#__PURE__*/ React.createElement("div", { key: filteredRegion, onClick: ()=>{ setRegion(filteredRegion); setIsDropdownOpen(false); setSearchText(""); }, className: "p-2 cursor-pointer hover:bg-gray-200", __source: { fileName: "", lineNumber: 80, columnNumber: 21 }, __self: this }, filteredRegion))))), /*#__PURE__*/ React.createElement("textarea", { name: "output", value: output, readOnly: true, className: "w-full h-full p-2 border border-gray-300 bg-white font-semibold", __source: { fileName: "", lineNumber: 96, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("button", { onClick: handleConvert, className: `mt-4 py-2 px-4 rounded bg-blue-600 text-white font-medium ${loading ? "opacity-50" : "hover:bg-blue-700"} transition-colors`, disabled: loading, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, loading ? "変換中..." : "変換")); }