update app.js

-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 "./App.css";
-import {paragraph} from "./passage";
 
 
 function App() {
 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 (
     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>
-              <div>Model Loading</div>
-              <Loader
-                type="Puff"
-                color="#00BFFF"
-                height={100}
-                width={100}
-              />
+          <b>{answer._source.정답}</b>
         </div>
         </div>
-              : // if model is loaded, passage and answer will be shown in browser
+    )
+  }
+
+  return (
+      <div className="App">
+        <header className="App-header">
           <Fragment>
           <Fragment>
             Ask a Question
             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>
           </Fragment>
-          }
         </header>
         </header>
       </div>
       </div>
   );
   );
 }
 }
 
 
 export default App;
 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>
-*/