sdy

update main page js

.App {
height: 100%;
text-align: center;
}
......@@ -14,14 +16,11 @@
}
.App-header {
background-color: #282c34;
min-height: 100vh;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
......
import React from "react";
import AppSearchAPIConnector from "@elastic/search-ui-app-search-connector";
import { SearchProvider, Results, SearchBox } from "@elastic/react-search-ui";
import { Layout} from "@elastic/react-search-ui-views";
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 "./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);
// load tensorflow models
const loadModel = async () => {
const loadedModel = await qna.load();
setModel(loadedModel);
console.log("Model is loaded");
}
useEffect(() => { loadModel() }, []);
// 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;
const answers = await model.findAnswers(question, passage);
setAnswer(answers);
console.log(answers);
}
}
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}
/>
</div>
: // if model is loaded, passage and answer will be shown in browser
<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 !"}
</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]",
searchKey: "search-4td7gan5kcasgygjcyexksrz",
engineName: "video-games",
hostIdentifier: "[private-bhi6v1txusox87eag2c8qgu3]"
endpointBase: "http://localhost:3002"
});
*/
/*
const client = new Client({
node: "http://localhost:9200"
})
const configurationOptions = {
apiConnector: connector,
console.log(client);
*/
/*
const configurationOptions = { // search 쿼리와 api 연결선을 작성한 객체
apiConnector: client,
searchQuery: {
search_fields: {
name: {}
......@@ -74,20 +165,54 @@ const configurationOptions = {
publisher: { type: "value", size: 100},
platform: { type: "value", size: 100}
}
},
autocompleteQuery: {
suggestions: {
types: {
documents: {
fields: ["name"]
}
},
size: 5
}
}
};
*/
function App() {
return (
<SearchProvider config={configurationOptions}>
/* <SearchProvider config={configurationOptions}>
<div className="App">
<Layout
header={<SearchBox />}
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>
</SearchProvider>
);
}
}
bodyHeader={
<>
<PagingInfo />
<ResultsPerPage />
</>
}
bodyFooter={<Paging />}
/>
export default App;
</div>
</SearchProvider>
*/
......