2021-1-capstone-design2 / 2017110273

Go to a project
Toggle navigation Toggle navigation pinning
sdy
57ed84d3 2 parents 9affa875 f2e9a7e2

Merge branch 'es' into 'master' 

es branch merge request



See merge request !2
Expand all
Inline Side-by-side
Showing 12 changed files with 139 additions and 99 deletions
FROM node:14.16.1-alpine
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json /app/package.json
COPY package-lock.json /app/package-lock.json
RUN npm install
RUN npm install react-scripts@3.0.1 -g
CMD ["npm", "start"]
### 오픈 소스와 자연어 처리를 이용한 검색 쿼리 개선
### 오픈 소스와 자연어 처리를 이용한 검색 개선
> 주제
검색 엔진 오픈 소스인 Elasticsearch 와
자연어 처리 사전 학습 모델인 BERT 를 이용 하여
검색 쿼리를 개선 하는 방법에 대해 연구 한다.
딥 러닝의 자연어 처리(NLP) 기술을 응용하여
질문형 검색을 만들고 개선 방안을 탐구
> 사용된 기술
- Elasticsearch
- BERT
- React.js
- NLP
> 상세 목표
- Elasticsearch 에서 제공 하는 기본 자동 완성 기능 개선
- 자연어 처리 모델인 BERT 를 통해 질문형 검색 쿼리 개발
- React.js 를 이용해 Elasticsearch 와 연동 하여 웹 검색 사이트 개발
\ No newline at end of file
- Elasticsearch 와 NLP 를 접목 시켜서 질문형 검색 개발
- Nori Analyzer 를 이용하여 한글에 대한 쿼리 개선 방안 탐구
- React.js 를 이용해 Elasticsearch 와 연동 하여 웹 검색 사이트 개발
......
version: '3.8'
services:
elasticsearch:
image: docker.elastic.co/elasticsearch/elasticsearch:7.12.1
container_name: elasticsearch
environment:
- "discovery.type=single-node"
ports:
- 9200:9200
volumes:
- es_data:/usr/share/elasticsearch/data
kibana:
image: docker.elastic.co/kibana/kibana:7.12.1
container_name: kibana
environment:
- ELASTICSEARCH_HOSTS=http://elasticsearch:9200
ports:
- 5601:5601
depends_on:
- elasticsearch
web:
container_name: react
build:
context: .
dockerfile: Dockerfile
volumes:
- ".:/app"
- "/app/node_modules"
ports:
- "3001:3000"
environment:
- NODE_ENV=development
stdin_open: true
tty: true
volumes:
es_data:
driver: local
This diff is collapsed. Click to expand it.
......@@ -3,13 +3,19 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@elastic/elasticsearch": "^7.12.0",
"@elastic/react-search-ui": "^1.5.1",
"@elastic/search-ui-app-search-connector": "^1.5.1",
"@tensorflow-models/qna": "^1.0.0",
"@tensorflow/tfjs": "^3.5.0",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"elasticsearch": "^16.7.2",
"http-proxy-middleware": "^2.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-loader-spinner": "^4.0.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1"
},
......
......@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Search App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
......
.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 "@elastic/react-search-ui-views/lib/styles/styles.css";
import './App.css';
import React, {Fragment, useState} from "react";
import { Client } from "elasticsearch"
import "./App.css";
const connector = new AppSearchAPIConnector({
searchKey: "[search-4td7gan5kcasgygjcyexksrz]",
engineName: "video-games",
hostIdentifier: "[private-bhi6v1txusox87eag2c8qgu3]"
});
function App() {
const configurationOptions = {
apiConnector: connector,
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
const [answer, setAnswer] = useState('');
const [inputValue, setInputValue] = useState('');
const client = new Client({
host: 'http://localhost:9200'
});
const onKeyUpHandler = async (event) => {
if (event.charCode === 13) {
setInputValue(event.target.value);
if (inputValue !== '' || inputValue !== undefined || inputValue.length !== 0) {
console.log(inputValue);
try {
const result = await client.search({
index: "wiki-qna2",
body: {
query: {
match: {
"질문(원문, 하 난이도)": inputValue
}
},
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}
});
if (result !== null || result !== undefined || result.length !== 0) {
setAnswer(result.hits.hits);
}
} catch (error) {
console.log(error);
}
}
}
};
}
function App() {
return (
<SearchProvider config={configurationOptions}>
<div className="App">
<Layout
header={<SearchBox />}
bodyContent={<Results titleField="name" urlField="image_url"/>}
/>
const showAnswer = (answer) => {
return (
<div>
<b>{answer !== undefined ? answer._source.정답 : 'loading ....'}</b>
</div>
</SearchProvider>
)
}
return (
<div className="App">
<header className="App-header">
<Fragment>
Ask a Question
<input size="80" onKeyPress={onKeyUpHandler}/>
<div>
-- Answers --
<div>
{answer === '' ? " loading answer..." : showAnswer(answer[0])}
</div>
</div>
</Fragment>
</header>
</div>
);
}
......
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 0;
width: 100%;
height: 100%;
background-color: #24262E;
color: white;
}
#root {
width: 100%;
height: 100%;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
monospace;
}
......
This diff is collapsed. Click to expand it.
No preview for this file type