function MainComponent() { const [prompt, setPrompt] = React.useState(""); const [requiredKeywords, setRequiredKeywords] = React.useState([ "キーワードA" ]); const [excludedKeywords, setExcludedKeywords] = React.useState([ "キーワードB" ]); const [rating, setRating] = React.useState(0); const [comment, setComment] = React.useState(""); const checkKeywords = (keywords, text, include)=>{ return keywords.map((keyword)=>({ keyword, result: include ? text.includes(keyword) : !text.includes(keyword) })); }; const requiredCheck = checkKeywords(requiredKeywords, prompt, true); const excludedCheck = checkKeywords(excludedKeywords, prompt, false); const renderHighlightedText = (text, keywords, color)=>{ let result = text; keywords.forEach((keyword)=>{ const regex = new RegExp(`(${keyword})`, "g"); result = result.replace(regex, `$1`); }); return { __html: result }; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col p-4 space-y-4", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "prompt", placeholder: "プロンプトを入力", className: "border p-2 w-full h-[150px] font-roboto", value: prompt, onChange: (e)=>setPrompt(e.target.value), __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "border p-2 w-full h-auto font-roboto", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: renderHighlightedText(prompt, requiredKeywords, "green"), __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: renderHighlightedText(prompt, excludedKeywords, "red"), __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("table", { className: "min-w-full border font-roboto mt-4", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, "必須キーワード"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, "判定結果"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, requiredCheck.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }, row.keyword), /*#__PURE__*/ React.createElement("td", { className: `border px-4 py-2 ${row.result ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, row.result ? "OK" : "NG"))))), /*#__PURE__*/ React.createElement("table", { className: "min-w-full border font-roboto mt-4", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, "除外キーワード"), /*#__PURE__*/ React.createElement("th", { className: "border px-4 py-2 text-left", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "判定結果"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, excludedCheck.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, row.keyword), /*#__PURE__*/ React.createElement("td", { className: `border px-4 py-2 ${row.result ? "text-green-500" : "text-red-500"}`, __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, row.result ? "OK" : "NG"))))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto mt-4", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, "結果に対するレーティング"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 mt-2", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, [ 1, 2, 3, 4, 5 ].map((star)=>{ const starClass = rating >= star ? "text-yellow-500" : ""; return /*#__PURE__*/ React.createElement("span", { key: star, className: `cursor-pointer ${starClass}`, onClick: ()=>setRating(star), __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, "⭐"); }))), /*#__PURE__*/ React.createElement("textarea", { name: "comment", placeholder: "コメントを入力", className: "border p-2 w-full h-[100px] mt-4 font-roboto", value: comment, onChange: (e)=>setComment(e.target.value), __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); }