You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
4.0 KiB
127 lines
4.0 KiB
import { useEffect, useState } from "react";
|
|
import "./App.css";
|
|
import { processData, searchByText, searchByTheme, processTheme } from "./utils/parsing";
|
|
import Graph from "./components/graph";
|
|
import { processRawFiles } from "./utils/agent";
|
|
|
|
|
|
const files=['大家想到未來不會很絕望嗎','日常生活','有人懂嗎','看到學貸還款通知書寄來','租屋網站'];
|
|
const ContentTags=['Summary','Keywords','Order','User','Content'];
|
|
const DisplayTypes=['text','point'];
|
|
|
|
function App() {
|
|
|
|
const [themes, setThemes]=useState([]);
|
|
const [results, setResults]=useState([]);
|
|
const [selectTab, setSelectTab]=useState('text');
|
|
|
|
function preText(){
|
|
|
|
files.forEach(async (file)=>{
|
|
const url = `assets/collect/${file}.json`;
|
|
await processData(url);
|
|
});
|
|
|
|
}
|
|
function preTheme(){
|
|
if(themes?.length>0)
|
|
processTheme(themes);
|
|
}
|
|
function processRaw(){
|
|
processRawFiles('resources/raw/1222', 'resources/collect/1222');
|
|
}
|
|
|
|
useEffect(()=>{
|
|
|
|
fetch('themes.json').then(response=>response.json()).then(async (json)=>{
|
|
console.log(json);
|
|
setThemes(json);
|
|
});
|
|
|
|
},[]);
|
|
|
|
return (
|
|
<main className="flex flex-col justify-center gap-2 p-4">
|
|
<div>
|
|
<button onClick={processRaw}>process raw files</button>
|
|
<button onClick={preText}>add data embedding</button>
|
|
<button onClick={preTheme}>reset theme embedding</button>
|
|
</div>
|
|
<p id="embeddings"></p>
|
|
|
|
<form>
|
|
<p>search by any text</p>
|
|
<input type="text" name="query" placeholder="Enter your query" />
|
|
<button type="button" onClick={()=>{
|
|
const query = document.querySelector('input[name="query"]').value;
|
|
searchByText(query).then(res=>{
|
|
setResults(res);
|
|
});
|
|
}}>
|
|
Search
|
|
</button>
|
|
</form>
|
|
<form>
|
|
<p>search by theme</p>
|
|
<select name="collection">
|
|
{themes.map((theme, index)=>(
|
|
<option key={index} value={theme.id}>{theme.title} [{theme.keywords.join(", ")}]</option>
|
|
))}
|
|
</select>
|
|
<button type="button" onClick={()=>{
|
|
const collection = document.querySelector('select[name="collection"]').value;
|
|
console.log("Selected collection:", collection);
|
|
// const id=themes.find(item=>item.title===collection)?.id;
|
|
searchByTheme(collection).then(res=>{
|
|
setResults(res);
|
|
});
|
|
|
|
}}>
|
|
Search
|
|
</button>
|
|
</form>
|
|
<div>
|
|
<div>Results={results?.length}</div>
|
|
{DisplayTypes.map((type)=>(
|
|
<button
|
|
key={type}
|
|
onClick={()=>{
|
|
setSelectTab(type);
|
|
}}
|
|
disabled={selectTab===type}
|
|
className={selectTab===type ? 'bg-blue-500 text-white' : ''}
|
|
>
|
|
{type}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{selectTab==='text' && (
|
|
<div id="search-results">
|
|
{results?.length>0 && results.map((item, index)=>{
|
|
let output={};
|
|
|
|
return (
|
|
<div key={index} className="border-b p-2 my-2 grid grid-cols-5 gap-2">
|
|
{/* <p>score={item.score.toFixed(4)}</p> */}
|
|
{(()=>{
|
|
let p=JSON.parse(item.payload.text);
|
|
return (<>
|
|
<div>{p.number}/{p.total}</div>
|
|
<div className="col-span-2">{p.content}</div>
|
|
<div className="bg-pink-200 text-xs self-center">{p.summry}</div>
|
|
<div className="flex flex-row gap-2 flex-wrap items-center text-xs">{p.keywords.map(el=><span className="bg-gray-200 rounded-full px-2" key={el}>{el}</span>)}</div>
|
|
</>);
|
|
})()}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{selectTab==='point' && (
|
|
<Graph results={results} />
|
|
)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default App;
|
|
|