sdy

update app.js

Showing 1 changed file with 48 additions and 195 deletions
import React, {Fragment, useRef, useEffect, useState} from "react";
import * as tf from "@tensorflow/tfjs";
import * as qna from "@tensorflow-models/qna";
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import React, {Fragment, useState} from "react";
import { Client } from "elasticsearch"
import "./App.css";
import {paragraph} from "./passage";
function App() {
// setup references, states
//const passageRef = useRef(null);
const questionRef = useRef(null);
const [answer, setAnswer] = useState();
const [model, setModel] = useState(null);
const [answer, setAnswer] = useState('');
const [inputValue, setInputValue] = useState('');
// load tensorflow models
const loadModel = async () => {
const loadedModel = await qna.load();
setModel(loadedModel);
console.log("Model is loaded");
}
const client = new Client({
host: 'http://localhost:9200'
});
useEffect(() => { loadModel() }, []);
const onKeyUpHandler = async (event) => {
if (event.charCode === 13) {
setInputValue(event.target.value);
// define question function
const answerQuestion = async (e) => {
if (e.which === 13 && model !== null) { // if key is enter
console.log("Question Submitted.");
const passage = paragraph;
const question = questionRef.current.value;
if (inputValue !== '' || inputValue !== undefined || inputValue.length !== 0) {
console.log(inputValue);
try {
const result = await client.search({
index: "wiki-qna2",
body: {
query: {
match: {
"질문(원문, 하 난이도)": inputValue
}
}
}
});
const answers = await model.findAnswers(question, passage);
setAnswer(answers);
console.log(answers);
if (result !== null || result !== undefined || result.length !== 0) {
setAnswer(result.hits.hits);
answer.forEach(e => {
console.log(e._source.정답);
});
}
} catch (error) {
console.log(error);
}
}
}
}
const showAnswer = (answer) => {
return (
<div className="App">
<header className="App-header">
{model == null? // if model isn't loaded, react loader spinner will be upload in browser
<div>
<div>Model Loading</div>
<Loader
type="Puff"
color="#00BFFF"
height={100}
width={100}
/>
<b>{answer._source.정답}</b>
</div>
: // if model is loaded, passage and answer will be shown in browser
)
}
return (
<div className="App">
<header className="App-header">
<Fragment>
Ask a Question
<input ref={questionRef} onKeyPress={answerQuestion} size="80"/>
Answers
{answer ? answer.map((ans, idx) => <div><b>Answer {idx + 1} - </b> {ans.text} </div>) : " : Can't Find any answers !"}
<input size="80" onKeyPress={onKeyUpHandler}/>
<div>
-- Answers --
<div>
{answer === '' ? " loading answer..." : showAnswer(answer[0])}
</div>
</div>
</Fragment>
}
</header>
</div>
);
}
export default App;
/*
//import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import { Client } from "@elastic/elasticsearch";
*/
/*
import {
SearchProvider,
Results,
SearchBox,
PagingInfo,
ResultsPerPage,
Paging,
Facet,
Sorting
} from "@elastic/react-search-ui";
import { Layout } from "@elastic/react-search-ui-views";
*/
/*
import "@elastic/react-search-ui-views/lib/styles/styles.css";
import './App.css';
*/
/*
const connector = new AppSearchAPIConnector({
searchKey: "search-4td7gan5kcasgygjcyexksrz",
engineName: "video-games",
endpointBase: "http://localhost:3002"
});
*/
/*
const client = new Client({
node: "http://localhost:9200"
})
console.log(client);
*/
/*
const configurationOptions = { // search 쿼리와 api 연결선을 작성한 객체
apiConnector: client,
searchQuery: {
search_fields: {
name: {}
},
result_fields: {
name: {
snippet: {
size: 75
}
},
genre: {
snippet: {
size: 50,
fallback: true
}
},
publisher: {
snippet: {
size: 50,
fallback: true
}
},
critic_score: {
raw: {}
},
user_score: {
raw: {}
},
platform: {
snippet: {
size: 50,
fallback: true
}
},
image_url: {
raw: {}
}
},
facets: {
user_score: {
type: "range",
ranges: [
{ from: 0, to: 5, name: "Not good" },
{ from: 5, to: 7, name: "Not bad" },
{ from: 7, to: 9, name: "Pretty good" },
{ from: 9, to: 10, name: "Must play!" }
]
},
critic_score: {
type: "range",
ranges: [
{ from: 0, to: 50, name: "Not good" },
{ from: 50, to: 70, name: "Not bad" },
{ from: 70, to: 90, name: "Pretty good" },
{ from: 90, to: 100, name: "Must play!" }
]
},
genre: { type: "value", size: 100 },
publisher: { type: "value", size: 100},
platform: { type: "value", size: 100}
}
},
autocompleteQuery: {
suggestions: {
types: {
documents: {
fields: ["name"]
}
},
size: 5
}
}
};
*/
/* <SearchProvider config={configurationOptions}>
<div className="App">
<Layout
header={<SearchBox autocompleteSuggestions={true} />}
bodyContent={<Results titleField="name" urlField="image_url"/>}
sideContent={
<div>
<Sorting
label={"Sort by"}
sortOptions={[
{
name: "Relevance",
value: "",
direction: ""
},
{
name: "Name",
value: "name",
direction: "asc"
}
]}
/>
<Facet field="user_score" label="User Score" />
</div>
}
bodyHeader={
<>
<PagingInfo />
<ResultsPerPage />
</>
}
bodyFooter={<Paging />}
/>
</div>
</SearchProvider>
*/
......