diff --git a/AudioQnA/ui/svelte/svelte.config.js b/AudioQnA/ui/svelte/svelte.config.js index 0f2977ecce..d2f6826420 100644 --- a/AudioQnA/ui/svelte/svelte.config.js +++ b/AudioQnA/ui/svelte/svelte.config.js @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import adapter from "@sveltejs/adapter-auto"; +import adapter from "@sveltejs/adapter-node"; import preprocess from "svelte-preprocess"; import postcssPresetEnv from "postcss-preset-env"; diff --git a/ChatQnA/docker_compose/intel/cpu/aipc/README.md b/ChatQnA/docker_compose/intel/cpu/aipc/README.md index 3c28d1c10e..de43294f18 100644 --- a/ChatQnA/docker_compose/intel/cpu/aipc/README.md +++ b/ChatQnA/docker_compose/intel/cpu/aipc/README.md @@ -60,8 +60,8 @@ cd ../../.. Build frontend Docker image via below command: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-ui:latest -f ./docker/Dockerfile . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-ui:latest -f ./docker/Dockerfile . --target svelte-server cd ../../../.. ``` diff --git a/ChatQnA/docker_compose/intel/cpu/xeon/README.md b/ChatQnA/docker_compose/intel/cpu/xeon/README.md index fb19c91dc5..f6eeab2243 100644 --- a/ChatQnA/docker_compose/intel/cpu/xeon/README.md +++ b/ChatQnA/docker_compose/intel/cpu/xeon/README.md @@ -147,8 +147,8 @@ cd .. Build frontend Docker image via below command: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server cd ../../../.. ``` @@ -159,8 +159,8 @@ Build frontend Docker image that enables Conversational experience with ChatQnA **Export the value of the public IP address of your Xeon server to the `host_ip` environment variable** ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server cd ../../../.. ``` diff --git a/ChatQnA/docker_compose/intel/cpu/xeon/README_qdrant.md b/ChatQnA/docker_compose/intel/cpu/xeon/README_qdrant.md index 25ba15c3f4..be136276be 100644 --- a/ChatQnA/docker_compose/intel/cpu/xeon/README_qdrant.md +++ b/ChatQnA/docker_compose/intel/cpu/xeon/README_qdrant.md @@ -117,8 +117,8 @@ cd ../../.. Build frontend Docker image via below command: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server cd ../../../.. ``` @@ -129,10 +129,10 @@ Build frontend Docker image that enables Conversational experience with ChatQnA **Export the value of the public IP address of your Xeon server to the `host_ip` environment variable** ```bash -cd GenAIExamples/ChatQnA//ui +cd GenAIExamples/ChatQnA/docker/ui/ export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8912/v1/chatqna" export DATAPREP_SERVICE_ENDPOINT="http://${host_ip}:6043/v1/dataprep" -docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg DATAPREP_SERVICE_ENDPOINT=$DATAPREP_SERVICE_ENDPOINT -f ./docker/Dockerfile.react . +docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server cd ../../../.. ``` diff --git a/ChatQnA/docker_compose/intel/hpu/gaudi/README.md b/ChatQnA/docker_compose/intel/hpu/gaudi/README.md index 57774af138..6c9bf76069 100644 --- a/ChatQnA/docker_compose/intel/hpu/gaudi/README.md +++ b/ChatQnA/docker_compose/intel/hpu/gaudi/README.md @@ -128,8 +128,8 @@ cd ../.. Construct the frontend Docker image using the command below: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server cd ../../../.. ``` @@ -140,8 +140,8 @@ Build frontend Docker image that enables Conversational experience with ChatQnA **Export the value of the public IP address of your Gaudi node to the `host_ip` environment variable** ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-conversation-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server cd ../../../.. ``` diff --git a/ChatQnA/docker_compose/nvidia/gpu/README.md b/ChatQnA/docker_compose/nvidia/gpu/README.md index e79a7f030f..aacc3195d4 100644 --- a/ChatQnA/docker_compose/nvidia/gpu/README.md +++ b/ChatQnA/docker_compose/nvidia/gpu/README.md @@ -59,8 +59,8 @@ cd ../../.. Construct the frontend Docker image using the command below: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target svelte-server cd ../../../.. ``` @@ -69,8 +69,8 @@ cd ../../../.. Construct the frontend Docker image using the command below: ```bash -cd GenAIExamples/ChatQnA/ui -docker build --no-cache -t opea/chatqna-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile.react . +cd GenAIExamples/ChatQnA/docker/ui/ +docker build --no-cache -t opea/chatqna-react-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile . --target react-server cd ../../../.. ``` diff --git a/ChatQnA/docker_image_build/build.yaml b/ChatQnA/docker_image_build/build.yaml index bbde37d415..79cae6e72c 100644 --- a/ChatQnA/docker_image_build/build.yaml +++ b/ChatQnA/docker_image_build/build.yaml @@ -33,12 +33,14 @@ services: build: context: ../ui dockerfile: ./docker/Dockerfile + target: svelte-server extends: chatqna image: ${REGISTRY:-opea}/chatqna-ui:${TAG:-latest} chatqna-conversation-ui: build: - context: ../ui - dockerfile: ./docker/Dockerfile.react + context: ui + dockerfile: ./docker/Dockerfile + target: react-server extends: chatqna image: ${REGISTRY:-opea}/chatqna-conversation-ui:${TAG:-latest} embedding-tei: diff --git a/ChatQnA/ui/svelte/.env.development b/ChatQnA/ui/svelte/.env.development new file mode 100644 index 0000000000..cfb382b337 --- /dev/null +++ b/ChatQnA/ui/svelte/.env.development @@ -0,0 +1,7 @@ +CHAT_BASE_URL = 'http://localhost:8888/v1/chatqna' + +UPLOAD_FILE_BASE_URL = 'http://localhost:6007/v1/dataprep' + +GET_FILE = 'http://localhost:6007/v1/dataprep/get_file' + +DELETE_FILE = 'http://localhost:6007/v1/dataprep/delete_file' diff --git a/ChatQnA/ui/svelte/nginx.conf b/ChatQnA/ui/svelte/nginx.conf new file mode 100644 index 0000000000..087b55b725 --- /dev/null +++ b/ChatQnA/ui/svelte/nginx.conf @@ -0,0 +1,38 @@ +upstream sveltekit { + server 127.0.0.1:3000; + keepalive 8; +} + +server { + listen 5173; + + gzip on; + gzip_proxied any; + gzip_comp_level 6; + gzip_buffers 16 8k; + gzip_http_version 1.1; + gzip_types font/woff2 text/css application/javascript application/json application/font-woff application/font-tff image/gif image/png image/svg+xml application/octet-stream; + + location / { + proxy_pass http://sveltekit; + proxy_redirect off; + + error_page 502 = @static; + } + + location "/v1/chatqna" { + proxy_pass $CHAT_BASE_URL; + } + + location "/v1/dataprep/get_file" { + proxy_pass $GET_FILE; + } + + location "/v1/dataprep/delete_file" { + proxy_pass $DELETE_FILE; + } + + location "/v1/dataprep" { + proxy_pass $UPLOAD_FILE_BASE_URL; + } +} \ No newline at end of file diff --git a/ChatQnA/ui/svelte/package.json b/ChatQnA/ui/svelte/package.json index e2a39a2c4d..8aef8f4e05 100644 --- a/ChatQnA/ui/svelte/package.json +++ b/ChatQnA/ui/svelte/package.json @@ -14,7 +14,7 @@ "devDependencies": { "@fortawesome/free-solid-svg-icons": "6.2.0", "@playwright/test": "^1.33.0", - "@sveltejs/adapter-auto": "1.0.0-next.75", + "@sveltejs/adapter-node": "1.3.0", "@sveltejs/kit": "^1.30.4", "@tailwindcss/typography": "0.5.7", "@types/debug": "4.1.7", diff --git a/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts b/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts index 64ce8e8f79..72d020a202 100644 --- a/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts +++ b/ChatQnA/ui/svelte/src/lib/network/chat/Network.ts @@ -12,11 +12,9 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { env } from "$env/dynamic/public"; +import { CHAT_BASE_URL } from "$env/static/public"; import { SSE } from "sse.js"; -const CHAT_BASE_URL = env.CHAT_BASE_URL; - export async function fetchTextStream(query: string) { let payload = {}; let url = ""; diff --git a/ChatQnA/ui/svelte/src/lib/network/upload/Network.ts b/ChatQnA/ui/svelte/src/lib/network/upload/Network.ts index a9c76462a5..bbdd68064d 100644 --- a/ChatQnA/ui/svelte/src/lib/network/upload/Network.ts +++ b/ChatQnA/ui/svelte/src/lib/network/upload/Network.ts @@ -12,11 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -import { env } from "$env/dynamic/public"; - -const UPLOAD_FILE_BASE_URL = env.UPLOAD_FILE_BASE_URL; -const GET_FILE = env.GET_FILE; -const DELETE_FILE = env.DELETE_FILE; +import { UPLOAD_FILE_BASE_URL, GET_FILE, DELETE_FILE } from "$env/static/public"; async function fetchFunc(url, init) { try { diff --git a/DocSum/ui/docker/Dockerfile b/DocSum/ui/docker/Dockerfile index ac2bb7da31..6d888cc72a 100644 --- a/DocSum/ui/docker/Dockerfile +++ b/DocSum/ui/docker/Dockerfile @@ -2,9 +2,9 @@ # SPDX-License-Identifier: Apache-2.0 # Use node 20.11.1 as the base image -FROM node:20.11.1 +FROM node:20.11.1 as svelte-base -# Update package manager and install Git +# Update package manager and install Git and nginx RUN apt-get update -y && apt-get install -y git # Copy the front-end code repository @@ -19,8 +19,35 @@ RUN npm install # Build the front-end application RUN npm run build -# Expose the port of the front-end application -EXPOSE 5173 +FROM node:20.11.1 as svelte-server -# Run the front-end application in preview mode -CMD ["npm", "run", "preview", "--", "--port", "5173", "--host", "0.0.0.0"] \ No newline at end of file +RUN apt-get update -y && apt-get install -y nginx gettext + +COPY --from=svelte-base /home/user/svelte/build /home/user/svelte/build +COPY --from=svelte-base /home/user/svelte/package.json /home/user/svelte + +WORKDIR /home/user/svelte + +RUN npm install --omit=dev + +COPY ./svelte/nginx.conf /tmp/nginx.conf + +ENTRYPOINT ["sh", "-c", "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && /usr/sbin/nginx && node /home/user/svelte/build/index.js"] + + +# Use node 20.11.1 as the base image +FROM node:20.11.1 as react-base + +COPY ./react /usr/app/react +WORKDIR /usr/app/react + +RUN ["npm", "install"] +RUN ["npm", "run", "build"] + + +FROM nginx:alpine as react-server + +COPY --from=react-base /usr/app/react/dist /usr/share/nginx/html + +COPY ./react/nginx.conf /tmp/nginx.conf +ENTRYPOINT ["sh", "-c", "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && /usr/sbin/nginx -g 'daemon off;'"] diff --git a/ProductivitySuite/ui/docker/Dockerfile.react b/ProductivitySuite/ui/docker/Dockerfile.react deleted file mode 100644 index 5381e1ca2e..0000000000 --- a/ProductivitySuite/ui/docker/Dockerfile.react +++ /dev/null @@ -1,20 +0,0 @@ -# Copyright (C) 2024 Intel Corporation -# SPDX-License-Identifier: Apache-2.0 - -# Use node 20.11.1 as the base image -FROM node:20.11.1 as vite-app - -COPY ./react /usr/app/react -WORKDIR /usr/app/react - - -RUN ["npm", "install"] -RUN ["npm", "run", "build"] - - -FROM nginx:alpine - -COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html - -COPY ./react/nginx.conf /tmp/nginx.conf -ENTRYPOINT ["sh", "-c", "envsubst < /tmp/nginx.conf > /etc/nginx/conf.d/default.conf && /usr/sbin/nginx -g 'daemon off;'"]