ahmed.ibrahim39699
/
JanetFrontEnd
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

production_server

This commit is contained in:
ahmed531998 2023-04-07 17:36:38 +02:00
parent 6b79280bf2
commit 567ea23583
5 changed files with 83 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
Dockerfile
View File

@ -2,12 +2,18 @@ FROM node:16-alpine as build
WORKDIR /app
COPY package.json .
COPY package-lock.json .
COPY package*.json .
RUN npm install
COPY ./src ./src
COPY ./public ./public
RUN npm run build
COPY . .
CMD [ "npm", “start" ]
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
COPY nginx.default.conf /etc/nginx/conf.d/default.conf

34
nginx.default.conf Normal file
View File

@ -0,0 +1,34 @@
# nginx configuration for Docker
upstream api_server {
server janet-backend:5000;
}
server {
listen 80 default_server;
server_name https://janet-app.d4science.org;
root /usr/share/nginx/html;
index index.html;
error_page 500 502 503 504 /50x.html;
location / {
try_files $uri $uri/ =404;
add_header Cache-Control "no-cache";
}
location /health {
access_log off;
add_header 'Content-Type' 'application/json';
return 200 '{"status":"UP"}';
}
location /static {
expires 1y;
add_header Cache-Control "public";
}
location /api {
proxy_pass http://api_server;
}
}

2
package.json
View File

@ -12,7 +12,7 @@
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "PORT=443 react-scripts start",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"

23
src/ChatBoxProps.js
View File

@ -5,7 +5,7 @@ import ChatBoxMessages from "./ChatMessages.js";
const ChatBoxProps = (props) => {
const { visible, updateNeedForm, messages, updateMessages } = props.props;
const [inputValue, setInputValue] = useState("");
const backendUrl = process.env.REACT_APP_BACKEND_URL;
const backendUrl = '/api';//process.env.REACT_APP_BACKEND_URL+'/api';
const [clicked, setClicked] = useState(false);
const [timer, setTimer] = useState(0);
const [first, setFirst] = useState(true);
@ -78,9 +78,21 @@ const ChatBoxProps = (props) => {
setClicked((clicked) => true);
let msg1 = { name: "User", message: inputValue };
updateMessages(msg1);
setInputValue("");
//setMessages((prevMessages) => [msg1, ...prevMessages]);
/*let msg2 = {
name: "Sam",
message: "response" + inputValue,
query: "query" + inputValue,
history: messages,
modQuery: inputValue
};*/
//let msg2 = { name: "Sam", message: inputValue};
//setMessages((prevMessages) => [msg2, ...prevMessages]);
//updateMessages(msg2)
//setInputValue("");
//updateNeedForm(true);
//setMessages([msg2, ...messages]);
fetch(backendUrl + '/predict', {
method: 'POST',
body: JSON.stringify({ message: inputValue }),
@ -92,8 +104,11 @@ const ChatBoxProps = (props) => {
.then(r => r.json())
.then(r => {
let msg2 = { name: "Sam", message: r.answer, query: r.query, cand: r.cand, history: r.history, modQuery: r.modQuery};
//setMessages((prevMessages) => [msg2, ...prevMessages]);
updateMessages(msg2);
setInputValue("");
updateNeedForm(true);
setInputValue("");
}).catch((error) => {
console.error('Error:', error);
setInputValue("");

40
src/FeedbackForm.js
View File

@ -12,7 +12,7 @@ const FeedbackForm = (props) => {
const [modQueryCorrectness, setModQueryCorrectness] = useState("no");
const [modQuery, setModQuery] = useState("");
const [response, setResponse] = useState("");
const backendUrl = process.env.REACT_APP_BACKEND_URL;
const backendUrl = '/api';//process.env.REACT_APP_BACKEND_URL+'/api';
function onSubmit(event) {
event.preventDefault();
@ -50,10 +50,10 @@ const FeedbackForm = (props) => {
}
return (
<div id="feedback-window" className="feedback-box">
<div id="feedback-window" class="feedback-box">
<form id="feedback-form">
<div className="feedback-question">
<label htmlFor="response-length">
<div class="feedback-question">
<label for="response-length">
What do you think of the length of the response?
</label>
<select
@ -66,8 +66,8 @@ const FeedbackForm = (props) => {
<option value="long">long</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="response-fluency">
<div class="feedback-question">
<label for="response-fluency">
How would you rate the fluency of the response?
</label>
<select
@ -80,8 +80,8 @@ const FeedbackForm = (props) => {
<option value="fluent">fluent</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="response-truthfulness">
<div class="feedback-question">
<label for="response-truthfulness">
If applicable, was the response true?
</label>
<select
@ -94,8 +94,8 @@ const FeedbackForm = (props) => {
<option value="NA">NA</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="response-usefulness">
<div class="feedback-question">
<label for="response-usefulness">
Was your need satisfied by this response?
</label>
<select
@ -107,8 +107,8 @@ const FeedbackForm = (props) => {
<option value="no">no</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="response-time">
<div class="feedback-question">
<label for="response-time">
How fast was it to produce the response?
</label>
<select
@ -121,8 +121,8 @@ const FeedbackForm = (props) => {
<option value="acceptable">acceptable</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="query-intent">What was your intent?</label>
<div class="feedback-question">
<label for="query-intent">What was your intent?</label>
<select
id="query-intent"
name="What was your intent?"
@ -138,8 +138,8 @@ const FeedbackForm = (props) => {
<option value="NA">NA</option>
</select>
</div>
<div className="feedback-question">
<label htmlFor="query-correctness">
<div class="feedback-question">
<label for="query-correctness">
Was this modification to the query correct? {messages[0].modQuery}
</label>
<select
@ -151,7 +151,7 @@ const FeedbackForm = (props) => {
<option value="no">no</option>
</select>
</div>
<label htmlFor="correct-query">
<label for="correct-query">
Could you provide a modified context-free
(chat-history-independent) version of your query?
</label>
@ -161,8 +161,8 @@ const FeedbackForm = (props) => {
onChange={(e) => setModQuery(e.target.value)}
></textarea>
'
<div className="feedback-question">
<label htmlFor="preferred response">
<div class="feedback-question">
<label for="preferred response">
Would you write a better response?
</label>
<textarea
@ -172,7 +172,7 @@ const FeedbackForm = (props) => {
></textarea>
'
</div>
<div className="feedback-submit">
<div class="feedback-submit">
<input type="submit" value="Submit" onClick={onSubmit} />
</div>
</form>