Merge branch 'vllm-default' of https://github.com/wangkl2/GenAIExamples…

… into vllm-default

AgentQnA/README.md

@@ -3,7 +3,7 @@
 ## Overview
 
 This example showcases a hierarchical multi-agent system for question-answering applications. The architecture diagram is shown below. The supervisor agent interfaces with the user and dispatch tasks to two worker agents to gather information and come up with answers. The worker RAG agent uses the retrieval tool to retrieve relevant documents from the knowledge base (a vector database). The worker SQL agent retrieve relevant data from the SQL database. Although not included in this example, but other tools such as a web search tool or a knowledge graph query tool can be used by the supervisor agent to gather information from additional sources.
-![Architecture Overview](assets/agent_qna_arch.png)
+![Architecture Overview](assets/img/agent_qna_arch.png)
 
 The AgentQnA example is implemented using the component-level microservices defined in [GenAIComps](https://github.com/opea-project/GenAIComps). The flow chart below shows the information flow between different microservices for this example.
 
@@ -264,6 +264,12 @@ curl http://${host_ip}:9090/v1/chat/completions -X POST -H "Content-Type: applic
     }'
 ```
 
+## Deploy AgentQnA UI
+
+The AgentQnA UI can be deployed locally or using Docker.
+
+For detailed instructions on deploying AgentQnA UI, refer to the [AgentQnA UI Guide](./ui/svelte/README.md).
+
 ## How to register your own tools with agent
 
 You can take a look at the tools yaml and python files in this example. For more details, please refer to the "Provide your own tools" section in the instructions [here](https://github.com/opea-project/GenAIComps/tree/main/comps/agent/src/README.md).

AgentQnA/docker_image_build/build.yaml

@@ -11,3 +11,9 @@ services:
         https_proxy: ${https_proxy}
         no_proxy: ${no_proxy}
     image: ${REGISTRY:-opea}/agent:${TAG:-latest}
+  agent-ui:
+    build:
+      context: ../ui
+      dockerfile: ./docker/Dockerfile
+    extends: agent
+    image: ${REGISTRY:-opea}/agent-ui:${TAG:-latest}

AgentQnA/tests/step1_build_images.sh

@@ -21,7 +21,7 @@ function build_docker_images_for_retrieval_tool(){
     # git clone https://github.com/opea-project/GenAIComps.git && cd GenAIComps && git checkout "${opea_branch:-"main"}" && cd ../
     get_genai_comps
     echo "Build all the images with --no-cache..."
-    service_list="doc-index-retriever dataprep-redis embedding retriever-redis reranking"
+    service_list="doc-index-retriever dataprep-redis embedding retriever reranking"
     docker compose -f build.yaml build ${service_list} --no-cache
     docker pull ghcr.io/huggingface/text-embeddings-inference:cpu-1.5
 

AgentQnA/ui/docker/Dockerfile

@@ -0,0 +1,26 @@
+# 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
+
+# Update package manager and install Git
+RUN apt-get update -y && apt-get install -y git
+
+# Copy the front-end code repository
+COPY svelte /home/user/svelte
+
+# Set the working directory
+WORKDIR /home/user/svelte
+
+# Install front-end dependencies
+RUN npm install
+
+# Build the front-end application
+RUN npm run build
+
+# Expose the port of the front-end application
+EXPOSE 5173
+
+# Run the front-end application in preview mode
+CMD ["npm", "run", "preview", "--", "--port", "5173", "--host", "0.0.0.0"]

AgentQnA/ui/svelte/.editorconfig

@@ -0,0 +1,10 @@
+[*]
+indent_style = tab
+
+[package.json]
+indent_style = space
+indent_size = 2
+
+[*.md]
+indent_style = space
+indent_size = 2

AgentQnA/ui/svelte/.env

@@ -0,0 +1 @@
+AGENT_URL = '/v1/chat/completions'

AgentQnA/ui/svelte/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

AgentQnA/ui/svelte/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: "@typescript-eslint/parser",
+	extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
+	plugins: ["svelte3", "@typescript-eslint", "neverthrow"],
+	ignorePatterns: ["*.cjs"],
+	overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
+	settings: {
+		"svelte3/typescript": () => require("typescript"),
+	},
+	parserOptions: {
+		sourceType: "module",
+		ecmaVersion: 2020,
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true,
+	},
+};

AgentQnA/ui/svelte/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

AgentQnA/ui/svelte/.prettierrc

@@ -0,0 +1,13 @@
+{
+	"pluginSearchDirs": [
+		"."
+	],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

AgentQnA/ui/svelte/README.md

@@ -0,0 +1,60 @@
+# AgentQnA
+
+## 📸 Project Screenshots
+
+![project-screenshot](../../assets/img/agent_ui.png)
+![project-screenshot](../../assets/img/agent_ui_result.png)
+
+## 🧐 Features
+
+Here're some of the project's features:
+
+- Create Agent：Provide more precise answers based on user queries, showcase the high-quality output process of complex queries across different dimensions, and consolidate information to present comprehensive answers.
+
+## 🛠️ Get it Running
+
+1. Clone the repo.
+
+2. cd command to the current folder.
+
+   ```
+   cd AgentQnA/ui
+   ```
+
+3. Modify the required .env variables.
+
+   ```
+   AGENT_URL = ''
+   ```
+
+4. **For Local Development:**
+
+- Install the dependencies:
+
+  ```
+  npm install
+  ```
+
+- Start the development server:
+
+  ```
+  npm run dev
+  ```
+
+- The application will be available at `http://localhost:3000`.
+
+5. **For Docker Setup:**
+
+- Build the Docker image:
+
+  ```
+  docker build -t opea:agent-ui .
+  ```
+
+- Run the Docker container:
+
+  ```
+  docker run -d -p 3000:3000 --name agent-ui opea:agent-ui
+  ```
+
+- The application will be available at `http://localhost:3000`.

AgentQnA/ui/svelte/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "agent-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "vite dev --host 0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
+  },
+  "devDependencies": {
+    "@fortawesome/free-solid-svg-icons": "6.2.0",
+    "@sveltejs/adapter-auto": "1.0.0-next.75",
+    "@sveltejs/kit": "^1.20.1",
+    "@tailwindcss/typography": "0.5.7",
+    "@types/debug": "4.1.7",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "autoprefixer": "^10.4.7",
+    "daisyui": "^2.52.0",
+    "debug": "4.3.4",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-neverthrow": "1.1.4",
+    "eslint-plugin-svelte3": "^4.0.0",
+    "neverthrow": "5.0.0",
+    "pocketbase": "0.7.0",
+    "postcss": "^8.4.23",
+    "postcss-load-config": "^4.0.1",
+    "postcss-preset-env": "^8.3.2",
+    "prettier": "^2.8.8",
+    "prettier-plugin-svelte": "^2.7.0",
+    "prettier-plugin-tailwindcss": "^0.3.0",
+    "svelte": "^3.59.1",
+    "svelte-check": "^2.7.1",
+    "svelte-fa": "3.0.3",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.5",
+    "ts-pattern": "4.0.5",
+    "tslib": "^2.3.1",
+    "typescript": "^4.7.4",
+    "vite": "^4.3.9"
+  },
+  "type": "module",
+  "dependencies": {
+    "@heroicons/vue": "^2.1.5",
+    "echarts": "^5.4.2",
+    "flowbite-svelte": "^0.38.5",
+    "flowbite-svelte-icons": "^0.3.6",
+    "fuse.js": "^6.6.2",
+    "marked": "^15.0.0",
+    "ramda": "^0.29.0",
+    "sjcl": "^1.0.8",
+    "sse.js": "^0.6.1",
+    "svelte-notifications": "^0.9.98"
+  }
+}

AgentQnA/ui/svelte/postcss.config.cjs

@@ -0,0 +1,13 @@
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+
+const config = {
+	plugins: [
+		//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+		tailwindcss(),
+		//But others, like autoprefixer, need to run after,
+		autoprefixer,
+	],
+};
+
+module.exports = config;

AgentQnA/ui/svelte/src/app.d.ts

@@ -0,0 +1,50 @@
+// Copyright (C) 2025 Intel Corporation
+// SPDX-License-Identifier: Apache-2.0
+
+// See: https://kit.svelte.dev/docs/types#app
+// import { Result} from "neverthrow";
+
+declare namespace App {
+	interface Locals {
+		user?: User;
+	}
+	// interface PageData { }
+	// interface PageError {}
+	// interface Platform {}
+}
+
+interface User {
+	id?: string;
+	email: string;
+	password?: string;
+	token?: string;
+	[key: string]: any;
+}
+
+type AuthResponse = Result<User>;
+
+interface AuthAdapter {
+	login(props: { email: string; password: string }): Promise<AuthResponse>;
+	signup(props: { email: string; password: string; password_confirm: string }): Promise<AuthResponse>;
+	validate_session(props: { token: string }): Promise<AuthResponse>;
+	logout(props: { token: string; email: string }): Promise<Result<void>>;
+	forgotPassword(props: { email: string; password: string }): Promise<Result<void>>;
+}
+
+interface ChatAdapter {
+	modelList(props: {}): Promise<Result<void>>;
+	txt2img(props: {}): Promise<Result<void>>;
+}
+
+interface ChatMessage {
+	role: string;
+	content: string;
+}
+
+interface ChatMessageType {
+	model: string;
+	knowledge: string;
+	temperature: string;
+	max_new_tokens: string;
+	topk: string;
+}

AgentQnA/ui/svelte/src/app.html

@@ -0,0 +1,17 @@
+<!--
+  Copyright (C) 2025 Intel Corporation
+  SPDX-License-Identifier: Apache-2.0
+-->
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>