1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
import React, { useCallback, useEffect, useState } from "react";
import "../assets/fonts/Thai/style.css";
import { segmentateThai } from "./logic/thainlp";
import type { AnalyzeRes, ColorTheme, LangToColor } from "../logic/types";
import { ColoredText } from "../components/Sentence";
import Word from "../components/Word";
export default function ThaiText({
text,
openWord,
theme,
}: {
text: string;
openWord: (s: AnalyzeRes) => void;
theme: ColorTheme;
}) {
useEffect(() => {
pythonseg();
}, [text]);
const [data, setData] = useState<Array<LangToColor<AnalyzeRes>>>([]);
const [modal, setModal] = useState<any>();
const pythonseg = useCallback(async () => {
const s2 = await segmentateThai(text.trim());
if ("ok" in s2) {
const ob = s2.ok.reduce(
(acc, item) => {
acc[item.word] = item;
return acc;
},
{} as Record<string, AnalyzeRes>,
);
const d = Object.values(ob).map((w) => ({
data: w,
colorBy: w.pos,
display: w.word,
}));
setData(d);
console.log(s2, "s2");
} else console.error(s2.error);
}, [text]);
return (
<div className="thaitext">
<ColoredText lang="tha" theme={theme} frags={data} fn={openWord} />
{modal && <Word data={modal} lang={"tha"} />}
</div>
);
}
|
