diff --git a/ChatQnA/docker/gaudi/README.md b/ChatQnA/docker/gaudi/README.md index a24988da6..34b64c422 100644 --- a/ChatQnA/docker/gaudi/README.md +++ b/ChatQnA/docker/gaudi/README.md @@ -75,6 +75,20 @@ docker build --no-cache -t opea/chatqna-ui:latest --build-arg https_proxy=$https cd ../../../.. ``` +### 10. Build Conversational React UI Docker Image (Optional) + +Build frontend Docker image that enables Conversational experience with ChatQnA megaservice via below command: + +**Export the value of the public IP address of your Gaudi node to the `host_ip` environment variable** + +```bash +cd GenAIExamples/ChatQnA/docker/ui/ +export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8888/v1/chatqna" +export DATAPREP_SERVICE_ENDPOINT="http://${host_ip}:6007/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 . +cd ../../../.. +``` + Then run the command `docker images`, you will have the following 8 Docker Images: 1. `opea/embedding-tei:latest` @@ -86,6 +100,10 @@ Then run the command `docker images`, you will have the following 8 Docker Image 7. `opea/chatqna:latest` 8. `opea/chatqna-ui:latest` +If Conversation React UI is built, you will find one more image: + +9. `opea/chatqna-conversation-ui:latest` + ## 🚀 Start MicroServices and MegaService ### Setup Environment Variables @@ -290,3 +308,41 @@ To access the frontend, open the following URL in your browser: http://{host_ip} ``` ![project-screenshot](../../assets/img/chat_ui_init.png) + +Here is an example of running ChatQnA: + +![project-screenshot](../../assets/img/chat_ui_response.png) + +## 🚀 Launch the Conversational UI (Optional) + +To access the Conversational UI (react based) frontend, modify the UI service in the `docker_compose.yaml` file. Replace `chaqna-gaudi-ui-server` service with the `chatqna-gaudi-conversation-ui-server` service as per the config below: + +```yaml +chaqna-gaudi-conversation-ui-server: + image: opea/chatqna-conversation-ui:latest + container_name: chatqna-gaudi-conversation-ui-server + environment: + - no_proxy=${no_proxy} + - https_proxy=${https_proxy} + - http_proxy=${http_proxy} + ports: + - "5174:80" + depends_on: + - chaqna-gaudi-backend-server + ipc: host + restart: always +``` + +Once the services are up, open the following URL in your browser: http://{host_ip}:5174. By default, the UI runs on port 80 internally. If you prefer to use a different host port to access the frontend, you can modify the port mapping in the `docker_compose.yaml` file as shown below: + +```yaml + chaqna-gaudi-conversation-ui-server: + image: opea/chatqna-conversation-ui:latest + ... + ports: + - "80:80" +``` + +Here is an example of running ChatQnA with Conversational UI (React): + +![project-screenshot](../../assets/img/conversation_ui_response.png) diff --git a/ChatQnA/tests/test_chatqna_on_gaudi.sh b/ChatQnA/tests/test_chatqna_on_gaudi.sh index a9ea7a1d9..27447acda 100644 --- a/ChatQnA/tests/test_chatqna_on_gaudi.sh +++ b/ChatQnA/tests/test_chatqna_on_gaudi.sh @@ -64,6 +64,7 @@ function start_services() { echo "using image repository $IMAGE_REPO and image tag $IMAGE_TAG" sed -i "s#image: opea/chatqna:latest#image: opea/chatqna:${IMAGE_TAG}#g" docker_compose.yaml sed -i "s#image: opea/chatqna-ui:latest#image: opea/chatqna-ui:${IMAGE_TAG}#g" docker_compose.yaml + sed -i "s#image: opea/chatqna-conversation-ui:latest#image: opea/chatqna-conversation-ui:${IMAGE_TAG}#g" docker_compose.yaml sed -i "s#image: opea/*#image: ${IMAGE_REPO}opea/#g" docker_compose.yaml fi