code-gen-react-ui (#417)

* CodeGen: Manifest to deploy CodeGen with ReactUI into Kubernetes

Include manifest to deploy CodeGen pipeline with ReactUI into
Kubernetes. Include as well README file for the steps.

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>

* code-gen-react-ui

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* made changes as per PR suggestions

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* updated readme

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* update base image

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated codegn dockerfile react

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated wait time

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* updated as per PR comments

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* aded react ui in gaudi test file

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* fixed PR comments

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* added docker pull for text-generation-model

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

* removed unused files

Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>

---------

Signed-off-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>
Signed-off-by: jaswanth8888 <karani.jaswanth@gmail.com>
Co-authored-by: Yeoh, Hoong Tee <hoong.tee.yeoh@intel.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: chen, suyue <suyue.chen@intel.com>

.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" == "CodeGen" ];then
+                docker_build ${IMAGE_NAME}-react-ui docker/Dockerfile.react
+            fi
             ;;
         "VisualQnA")
             echo "Not supported yet"

ChatQnA/docker/ui/docker/Dockerfile.react

@@ -1,4 +1,8 @@
-FROM node as vite-app
+# 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

CodeGen/docker/gaudi/README.md

@@ -38,11 +38,21 @@ cd GenAIExamples/CodeGen/docker/ui/
 docker build -t opea/codegen-ui:latest --build-arg https_proxy=$https_proxy --build-arg http_proxy=$http_proxy -f ./docker/Dockerfile .
 ```
 
+### 5. Build the React UI Docker Image
+
+Construct the React frontend Docker image via the command below:
+
+```bash
+cd GenAIExamples/CodeGen/docker/ui/
+docker build -t opea/codegen-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 3 Docker images:
 
 - `opea/llm-tgi:latest`
 - `opea/codegen:latest`
 - `opea/codegen-ui:latest`
+- `opea/codegen-react-ui:latest`
 
 ## 🚀 Start MicroServices and MegaService
 
@@ -143,12 +153,12 @@ export LANGCHAIN_TRACING_V2=true
 export LANGCHAIN_API_KEY=ls_...
 ```
 
-## 🚀 Launch the UI
+## 🚀 Launch the Svelte Based UI
 
 To access the frontend, open the following URL in your browser: `http://{host_ip}:5173`. By default, the UI runs on port 5173 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
-  codegen-xeon-ui-server:
+  codegen-gaudi-ui-server:
     image: opea/codegen-ui:latest
     ...
     ports:
@@ -157,6 +167,20 @@ To access the frontend, open the following URL in your browser: `http://{host_ip
 
 ![project-screenshot](../../assets/img/codeGen_ui_init.jpg)
 
+## 🚀 Launch the React Based UI
+
+To access the frontend, open the following URL in your browser: `http://{host_ip}:5174`. By default, the UI runs on port 5174 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
+  codegen-gaudi-react-ui-server:
+    image: opea/codegen-react-ui:latest
+    ...
+    ports:
+      - "80:5174"
+```
+
+![project-screenshot](../../assets/img/codegen_react.png)
+
 ## Install Copilot VSCode extension from Plugin Marketplace as the frontend
 
 In addition to the Svelte UI, users can also install the Copilot VSCode extension from the Plugin Marketplace as the frontend.

CodeGen/docker/gaudi/docker_compose.yaml

@@ -72,6 +72,19 @@ services:
     ipc: host
     restart: always
 
+  codegen-gaudi-react-ui-server:
+    image: opea/codegen-react-ui:latest
+    container_name: codegen-gaudi-react-ui-server
+    depends_on:
+      - codegen-gaudi-backend-server
+    ports:
+      - "5174:80"
+    build:
+      args:
+        - BACKEND_SERVICE_ENDPOINT=${BACKEND_SERVICE_ENDPOINT}
+    ipc: host
+    restart: always
+
 networks:
   default:
     driver: bridge

CodeGen/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_CODE_GEN_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;"]

CodeGen/docker/ui/react/.env

@@ -0,0 +1 @@
+VITE_CODE_GEN_URL=http://ip_address:7778/v1/codegen

CodeGen/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 }],
+  },
+};

CodeGen/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?

CodeGen/docker/ui/react/README.md

@@ -0,0 +1,25 @@
+<h1 align="center" id="title">Code Gen</h1>
+
+### 📸 Project Screenshots
+
+![project-screenshot](../../../assets/img/codegen_ui_react.png)
+
+<h2>🧐 Features</h2>
+
+Here're some of the project's features:
+
+- Generate code: generate the corresponding code based on the current user's input.
+
+<h2>🛠️ Get it Running:</h2>
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+3. Modify the required .env variables.
+   ```
+   VITE_CODE_GEN_URL = ''
+   ```
+4. Execute `npm install` to install the corresponding dependencies.
+
+5. Execute `npm run dev` in both environments

CodeGen/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>Conversations UI</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

CodeGen/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;
+    }
+  }
+}

CodeGen/docker/ui/react/package.json

@@ -0,0 +1,51 @@
+{
+  "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.10.0",
+    "@mantine/hooks": "^7.10.0",
+    "@mantine/notifications": "^7.10.2",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@tabler/icons-react": "^3.5.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"
+  }
+}

CodeGen/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",
+      },
+    },
+  },
+};

CodeGen/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;
+}

CodeGen/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 { IconMessages } from "@tabler/icons-react"
+import { Notifications } from '@mantine/notifications';
+import CodeGen from "./components/CodeGen/CodeGen";
+
+const title = "Code Gen"
+const navList: SidebarNavList = [
+  { icon: IconMessages, label: title }
+]
+
+function App() {
+
+  return (
+    <MantineProvider>
+      <Notifications position="top-right" />
+      <div className="layout-wrapper">
+        <SideNavbar navList={navList} />
+        <div className="content">
+          <CodeGen  />
+        </div>
+      </div>
+    </MantineProvider>
+  )
+}
+
+export default App

CodeGen/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));
+  });
+});