readme updates

Signed-off-by: Mustafa <mustafa.cetin@intel.com>

Author: MSCetin37

DocSum/docker_compose/intel/cpu/xeon/README.md

@@ -64,14 +64,38 @@ docker build -t opea/docsum:latest --build-arg https_proxy=$https_proxy --build-
 ```
 
 ### 3. Build UI Docker Image
+Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, suggested to use Gradio UI.
 
-Build the frontend Docker image via below command:
+#### Gradio UI 
+Build the Gradio UI frontend Docker image using the following command:
 
 ```bash
 cd GenAIExamples/DocSum/ui
 docker build -t opea/docsum-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f docker/Dockerfile.gradio .
 ```
 
+#### Svelte UI 
+
+Build the frontend Docker image via below command:
+
+```bash
+cd GenAIExamples/DocSum/ui
+docker build -t opea/docsum-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f docker/Dockerfile .
+```
+
+#### React UI 
+
+Build the frontend Docker image via below command:
+
+```bash
+cd GenAIExamples/DocSum/ui
+export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8888/v1/docsum"
+docker build -t opea/docsum-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT -f ./docker/Dockerfile.react .
+
+docker build -t opea/docsum-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy  -f ./docker/Dockerfile.react .
+```
+
+
 ## 🚀 Start Microservices and MegaService
 
 ### Required Models
@@ -265,7 +289,7 @@ You will have the following Docker Images:
 
 ## 🚀 Launch the UI
 
-Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, only the Gradio UI supports that. If the Gradio UI is not built, the Svelte UI will be started
+Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, suggested to use Gradio UI.
 
 ### Gradio UI
 
@@ -275,7 +299,7 @@ Open this URL `http://{host_ip}:5173` in your browser to access the Gradio based
 
 ### Svelte UI
 
-Open this URL `http://{host_ip}:5173` in your browser to access the Gradio based frontend.
+Open this URL `http://{host_ip}:5173` in your browser to access the Svelte based frontend.
 
 ![project-screenshot](../../../../assets/img/docSum_ui_text.png)
 

DocSum/docker_compose/intel/hpu/gaudi/README.md

@@ -47,15 +47,38 @@ cd GenAIExamples/DocSum/
 docker build -t opea/docsum:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f Dockerfile .
 ```
 
-### 4. Build UI Docker Image
+### 3. Build UI Docker Image
+#### Gradio UI 
+Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, suggested to use Gradio UI.
 
-Build the frontend Docker image via below command:
+Build the Gradio UI frontend Docker image using the following command:
 
 ```bash
 cd GenAIExamples/DocSum/ui
 docker build -t opea/docsum-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f docker/Dockerfile.gradio .
 ```
 
+#### Svelte UI 
+
+Build the frontend Docker image via below command:
+
+```bash
+cd GenAIExamples/DocSum/ui
+docker build -t opea/docsum-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f docker/Dockerfile .
+```
+
+#### React UI 
+
+Build the frontend Docker image via below command:
+
+```bash
+cd GenAIExamples/DocSum/ui
+export BACKEND_SERVICE_ENDPOINT="http://${host_ip}:8888/v1/docsum"
+docker build -t opea/docsum-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT -f ./docker/Dockerfile.react .
+
+docker build -t opea/docsum-react-ui:latest --build-arg BACKEND_SERVICE_ENDPOINT=$BACKEND_SERVICE_ENDPOINT --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy  -f ./docker/Dockerfile.react .
+```
+
 ## 🚀 Start Microservices and MegaService
 
 ### Required Models
@@ -251,7 +274,7 @@ You will have the following Docker Images:
 
 ## 🚀 Launch the UI
 
-Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, only the Gradio UI supports that. If the Gradio UI is not built, the Svelte UI will be started
+Several UI options are provided. If you need to work with multimedia documents, .doc, or .pdf files, suggested to use Gradio UI.
 
 ### Gradio UI
 
@@ -260,7 +283,7 @@ Open this URL `http://{host_ip}:5173` in your browser to access the Gradio based
 
 ## 🚀 Launch the Svelte UI
 
-Open this URL `http://{host_ip}:5173` in your browser to access the frontend.
+Open this URL `http://{host_ip}:5173` in your browser to access the Svelte based frontend.
 
 ![project-screenshot](https://github.com/intel-ai-tce/GenAIExamples/assets/21761437/93b1ed4b-4b76-4875-927e-cc7818b4825b)
 

DocSum/ui/svelte/src/lib/shared/Network.ts

@@ -28,9 +28,11 @@ export async function fetchTextStream(query: string | Blob, params: string, file
   if (params === "doc_id") {
     formData.append("files", file, fileName);
     formData.append("messages", query);
+    formData.append("type", "text");
   } else if (params === "text") {
     formData.append("files", file, fileName);
     formData.append("messages", query);
+    formData.append("type", "text");
   }
 
   // Initiate the POST request to upload the file