added doc sum react-ui (#418)

Signed-off-by: Yeoh, Hoong Tee <[email protected]>
Signed-off-by: jaswanth8888 <[email protected]>

.github/workflows/scripts/build_push.sh

@@ -55,6 +55,9 @@ for MEGA_SVC in $1; do
             if [ "$MEGA_SVC" == "ChatQnA" ];then
                 docker_build ${IMAGE_NAME}-conversation-ui docker/Dockerfile.react
             fi
+            if [ "$MEGA_SVC" == "DocSum" ];then
+                docker_build ${IMAGE_NAME}-react-ui docker/Dockerfile.react
+            fi
             if [ "$MEGA_SVC" == "CodeGen" ];then
                 docker_build ${IMAGE_NAME}-react-ui docker/Dockerfile.react
             fi

DocSum/docker/gaudi/README.md

@@ -44,12 +44,23 @@ cd GenAIExamples/DocSum/docker/ui/
 docker build -t opea/docsum-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
 ```
 
+### 5. Build React UI Docker Image
+
+Build the frontend Docker image via below command:
+
+```bash
+cd GenAIExamples/DocSum/docker/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 .
+```
+
 Then run the command `docker images`, you will have the following Docker Images:
 
 1. `ghcr.io/huggingface/tgi-gaudi:2.0.1`
 2. `opea/llm-docsum-tgi:latest`
 3. `opea/docsum:latest`
 4. `opea/docsum-ui:latest`
+5. `opea/docsum-react-ui:latest`
 
 ## 🚀 Start Microservices and MegaService
 
@@ -125,7 +136,7 @@ export LANGCHAIN_TRACING_V2=true
 export LANGCHAIN_API_KEY=ls_...
 ```
 
-## 🚀 Launch the UI
+## 🚀 Launch the Svelte UI
 
 Open this URL `http://{host_ip}:5173` in your browser to access the frontend.
 
@@ -134,3 +145,9 @@ Open this URL `http://{host_ip}:5173` in your browser to access the frontend.
 Here is an example for summarizing a article.
 
 ![image](https://github.com/intel-ai-tce/GenAIExamples/assets/21761437/67ecb2ec-408d-4e81-b124-6ded6b833f55)
+
+## 🚀 Launch the React UI
+
+Open this URL `http://{host_ip}:5175` in your browser to access the frontend.
+
+![project-screenshot](../../assets/img/docsum-ui-react.png)

DocSum/docker/gaudi/docker_compose.yaml

@@ -71,6 +71,18 @@ services:
       - DOC_BASE_URL=${BACKEND_SERVICE_ENDPOINT}
     ipc: host
     restart: always
+  docsum-xeon-react-ui-server:
+    image: opea/docsum-react-ui:latest
+    container_name: docsum-gaudi-react-ui-server
+    depends_on:
+      - docsum-gaudi-backend-server
+    build:
+      args:
+        - BACKEND_SERVICE_ENDPOINT=${BACKEND_SERVICE_ENDPOINT}
+    ports:
+      - "5174:80"
+    environment:
+      - DOC_BASE_URL=${BACKEND_SERVICE_ENDPOINT}
 
 networks:
   default:

DocSum/docker/ui/docker/Dockerfile.react

@@ -0,0 +1,24 @@
+# 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 . /usr/app
+WORKDIR /usr/app/react
+
+ARG BACKEND_SERVICE_ENDPOINT
+ENV VITE_DOC_SUM_URL=$BACKEND_SERVICE_ENDPOINT
+
+RUN ["npm", "install"]
+RUN ["npm", "run", "build"]
+
+
+FROM nginx:alpine
+EXPOSE 80
+
+
+COPY --from=vite-app /usr/app/react/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=vite-app /usr/app/react/dist /usr/share/nginx/html
+
+ENTRYPOINT ["nginx", "-g", "daemon off;"]

DocSum/docker/ui/react/.env

@@ -0,0 +1 @@
+VITE_DOC_SUM_URL=http://backend_address:8888/v1/docsum

DocSum/docker/ui/react/.eslintrc.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended"],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+  },
+};

DocSum/docker/ui/react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

DocSum/docker/ui/react/README.md

@@ -0,0 +1,29 @@
+<h1 align="center" id="title">Doc Summary React</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](../../../assets/img/docsum-ui-react.png)
+![project-screenshot](../../../assets/img/docsum-ui-react-file.png)
+![project-screenshot](../../../assets/img/docsum-ui-react-error.png)
+
+<h2>🧐 Features</h2>
+
+Here're some of the project's features:
+
+- Summarizing Uploaded Files: Upload files from their local device, then click 'Generate Summary' to summarize the content of the uploaded file. The summary will be displayed on the 'Summary' box.
+- Summarizing Text via Pasting: Paste the text to be summarized into the text box, then click 'Generate Summary' to produce a condensed summary of the content, which will be displayed in the 'Summary' box on the right.
+- Scroll to Bottom: The summarized content will automatically scroll to the bottom.
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. Modify the required .env variables.
+   ```
+   VITE_DOC_SUM_URL = ''
+   ```
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev` in both environments

DocSum/docker/ui/react/index.html

@@ -0,0 +1,18 @@
+<!--
+  Copyright (C) 2024 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/assets/opea-icon-color.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Opea Doc Sum</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

DocSum/docker/ui/react/nginx.conf

@@ -0,0 +1,20 @@
+server {
+  listen 80;
+
+  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 / {
+    root /usr/share/nginx/html;
+    index index.html index.htm;
+    try_files $uri $uri/ /index.html =404;
+
+    location ~* \.(gif|jpe?g|png|webp|ico|svg|css|js|mp4|woff2)$ {
+      expires 1d;
+    }
+  }
+}

DocSum/docker/ui/react/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "@mantine/core": "^7.11.1",
+    "@mantine/dropzone": "^7.11.1",
+    "@mantine/hooks": "^7.11.1",
+    "@mantine/notifications": "^7.11.1",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@tabler/icons-react": "^3.9.0",
+    "axios": "^1.7.2",
+    "luxon": "^3.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-markdown": "^9.0.1",
+    "react-syntax-highlighter": "^15.5.0",
+    "remark-frontmatter": "^5.0.0",
+    "remark-gfm": "^4.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/luxon": "^3.4.2",
+    "@types/node": "^20.12.12",
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@types/react-syntax-highlighter": "^15.5.13",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "jsdom": "^24.1.0",
+    "postcss": "^8.4.38",
+    "postcss-preset-mantine": "^1.15.0",
+    "postcss-simple-vars": "^7.0.1",
+    "sass": "1.64.2",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.13",
+    "vitest": "^1.6.0"
+  }
+}

DocSum/docker/ui/react/postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: {
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {
+      variables: {
+        "mantine-breakpoint-xs": "36em",
+        "mantine-breakpoint-sm": "48em",
+        "mantine-breakpoint-md": "62em",
+        "mantine-breakpoint-lg": "75em",
+        "mantine-breakpoint-xl": "88em",
+      },
+    },
+  },
+};

DocSum/docker/ui/react/src/App.scss

@@ -0,0 +1,42 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+@import "./styles/styles";
+
+.root {
+  @include flex(row, nowrap, flex-start, flex-start);
+}
+
+.layout-wrapper {
+  @include absolutes;
+
+  display: grid;
+
+  width: 100%;
+  height: 100%;
+
+  grid-template-columns: 80px auto;
+  grid-template-rows: 1fr;
+}
+
+/* ===== Scrollbar CSS ===== */
+/* Firefox */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #d6d6d6 #ffffff;
+}
+
+/* Chrome, Edge, and Safari */
+*::-webkit-scrollbar {
+  width: 8px;
+}
+
+*::-webkit-scrollbar-track {
+  background: #ffffff;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: #d6d6d6;
+  border-radius: 16px;
+  border: 4px double #dedede;
+}

DocSum/docker/ui/react/src/App.tsx

@@ -0,0 +1,32 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import "./App.scss"
+import { MantineProvider } from "@mantine/core"
+import '@mantine/notifications/styles.css';
+import { SideNavbar, SidebarNavList } from "./components/sidebar/sidebar"
+import { IconFileText } from "@tabler/icons-react"
+import { Notifications } from '@mantine/notifications';
+import DocSum from "./components/DocSum/DocSum";
+
+const title = "Doc Summary"
+const navList: SidebarNavList = [
+  { icon: IconFileText, label: title }
+]
+
+function App() {
+
+  return (
+    <MantineProvider>
+      <Notifications position="top-right" />
+      <div className="layout-wrapper">
+        <SideNavbar navList={navList} />
+        <div className="content">
+          <DocSum />
+        </div>
+      </div>
+    </MantineProvider>
+  )
+}
+
+export default App

DocSum/docker/ui/react/src/__tests__/util.test.ts

@@ -0,0 +1,14 @@
+// Copyright (C) 2024 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+import { describe, expect, test } from "vitest";
+import { getCurrentTimeStamp, uuidv4 } from "../common/util";
+
+describe("unit tests", () => {
+  test("check UUID is of length 36", () => {
+    expect(uuidv4()).toHaveLength(36);
+  });
+  test("check TimeStamp generated is of unix", () => {
+    expect(getCurrentTimeStamp()).toBe(Math.floor(Date.now() / 1000));
+  });
+});