helm-chart/common/chatqna-ui refers to docker image opea/chatqna-conversation-ui but this does not exist on docker hub

[SeanCondon]

Hi I am in the ITEP development group along with @kushal2705
I'm trying out the chatqna-conversation-ui but it refers to this unknown version - I've tried the 0.7 and latest and while the UI opens it cannot send a POST request to the backend

[lianhao]

We assumed the public container image v0.8 on docker hub should be available soon after the v0.8 release(released at end of July), unfortunately it's not the case.

As for the chatqna UI specific issue, because of the issue opea-project/GenAIExamples#493 and opea-project/GenAIExamples#518, you have to manually build the UI docker image by yourselves anyway.

@Ruoyu-y Could you please provide some workaround guide on how to make UI working before the above 2 issues are resolved? Thanks!

[Ruoyu-y]

Sure. @SeanCondon For now, this conversation UI image is an optional one and is not provided due to the issues mentioned by Lianhao. Please follow the steps below to leverage the UI.

Make sure you have the chatqna pipeline deployed before the UI. Then you have to use 'kubectl port-forward' or kubernetes's Ingress API to expose the chatqna backend service as well as the data preparation service outside.
Here's the example of using 'kubectl port-forward' to do so:

kubectl port-forward -n <your_namespace> svc/chatqna --address 0.0.0.0 8888:8888 & \
kubectl port-forward -n <your_namespace> svc/chatqna-data-prep --address 0.0.0.0 6007:6007 & \
kubectl port-forward -n <your_namespace> svc/chatqna-data-prep --address 0.0.0.0 6008:6008 &

Then build the conversation UI image using such command. Note: Replace the host_ip as your ip:

git clone https://github.com/opea-project/GenAIExamples.git
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"
export DATAPREP_GET_FILE_ENDPOINT="http://${host_ip}:6008/v1/dataprep/get_file"
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 --build-arg DATAPREP_GET_FILE_ENDPOINT=$DATAPREP_GET_FILE_ENDPOINT -f ./docker/Dockerfile.react .

Then import the newly built image to the kubernetes cluster and use helm to install the UI service.

docker save -o ui.tar opea/chatqna-conversation-ui:latest
sudo ctr -n k8s.io image import ui.tar
cd 
cd GenAIInfra/helm-charts
# change the image tag to 'latest'
helm install chatqna-ui common/chatqna-ui

[SeanCondon]

Thanks @lianhao @Ruoyu-y

I created a PR #305 that adjusts the helm chart to make the backend configurable at deploy time.
It creates a reverse proxy in nginx that points to the backend. The UI then points to this reverse proxy inside nginx using a relative path e.g. /chatqna/v1/chatqna.

In this case I build the UI with

docker build --platform=linux/amd64 --no-cache -t opea/chatqna-conversation-ui:itep-build --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy --build-arg BACKEND_SERVICE_ENDPOINT=/chatqna/v1/chatqna --build-arg DATAPREP_SERVICE_ENDPOINT=/chatqna-data-prep/v1/dataprep -f ./docker/Dockerfile.react .

The other advantage this offers is that it avoids CORS errors in the browser, where the javascript tries to connect to a hostname:port different from where the original javascript was loaded from.

[lianhao]

I believe the docker image is published and CORS issue is fixed