Skip to content

Commit 3a9a24a

Browse files
WenjiaoYuepre-commit-ci[bot]
WenjiaoYue
and
pre-commit-ci[bot]
authored
Agent ui (#1389)
Signed-off-by: WenjiaoYue <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> Co-authored-by: WenjiaoYue <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> Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
1 parent 301b5e9 commit 3a9a24a

File tree

95 files changed

+3840
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

95 files changed

+3840
-2
lines changed

‎AgentQnA/README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
## Overview
44

55
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.
6-
![Architecture Overview](assets/agent_qna_arch.png)
6+
![Architecture Overview](assets/img/agent_qna_arch.png)
77

88
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.
99

@@ -264,6 +264,12 @@ curl http://${host_ip}:9090/v1/chat/completions -X POST -H "Content-Type: applic
264264
}'
265265
```
266266

267+
## Deploy AgentQnA UI
268+
269+
The AgentQnA UI can be deployed locally or using Docker.
270+
271+
For detailed instructions on deploying AgentQnA UI, refer to the [AgentQnA UI Guide](./ui/svelte/README.md).
272+
267273
## How to register your own tools with agent
268274

269275
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/assets/agent_qna_arch.png renamed to ‎AgentQnA/assets/img/agent_qna_arch.png

File renamed without changes.

‎AgentQnA/assets/img/agent_ui.png

55.8 KB
Loading

‎AgentQnA/assets/img/agent_ui_result.png

56.9 KB
Loading

‎AgentQnA/docker_image_build/build.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,9 @@ services:
1111
https_proxy: ${https_proxy}
1212
no_proxy: ${no_proxy}
1313
image: ${REGISTRY:-opea}/agent:${TAG:-latest}
14+
agent-ui:
15+
build:
16+
context: ../ui
17+
dockerfile: ./docker/Dockerfile
18+
extends: agent
19+
image: ${REGISTRY:-opea}/agent-ui:${TAG:-latest}

‎AgentQnA/tests/step1_build_images.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ function build_docker_images_for_retrieval_tool(){
2121
# git clone https://github.com/opea-project/GenAIComps.git && cd GenAIComps && git checkout "${opea_branch:-"main"}" && cd ../
2222
get_genai_comps
2323
echo "Build all the images with --no-cache..."
24-
service_list="doc-index-retriever dataprep-redis embedding retriever-redis reranking"
24+
service_list="doc-index-retriever dataprep-redis embedding retriever reranking"
2525
docker compose -f build.yaml build ${service_list} --no-cache
2626
docker pull ghcr.io/huggingface/text-embeddings-inference:cpu-1.5
2727

‎AgentQnA/ui/docker/Dockerfile

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Copyright (C) 2024 Intel Corporation
2+
# SPDX-License-Identifier: Apache-2.0
3+
4+
# Use node 20.11.1 as the base image
5+
FROM node:20.11.1
6+
7+
# Update package manager and install Git
8+
RUN apt-get update -y && apt-get install -y git
9+
10+
# Copy the front-end code repository
11+
COPY svelte /home/user/svelte
12+
13+
# Set the working directory
14+
WORKDIR /home/user/svelte
15+
16+
# Install front-end dependencies
17+
RUN npm install
18+
19+
# Build the front-end application
20+
RUN npm run build
21+
22+
# Expose the port of the front-end application
23+
EXPOSE 5173
24+
25+
# Run the front-end application in preview mode
26+
CMD ["npm", "run", "preview", "--", "--port", "5173", "--host", "0.0.0.0"]

‎AgentQnA/ui/svelte/.editorconfig

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
[*]
2+
indent_style = tab
3+
4+
[package.json]
5+
indent_style = space
6+
indent_size = 2
7+
8+
[*.md]
9+
indent_style = space
10+
indent_size = 2

‎AgentQnA/ui/svelte/.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
AGENT_URL = '/v1/chat/completions'

‎AgentQnA/ui/svelte/.eslintignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎AgentQnA/ui/svelte/.eslintrc.cjs

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
parser: "@typescript-eslint/parser",
4+
extends: ["eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier"],
5+
plugins: ["svelte3", "@typescript-eslint", "neverthrow"],
6+
ignorePatterns: ["*.cjs"],
7+
overrides: [{ files: ["*.svelte"], processor: "svelte3/svelte3" }],
8+
settings: {
9+
"svelte3/typescript": () => require("typescript"),
10+
},
11+
parserOptions: {
12+
sourceType: "module",
13+
ecmaVersion: 2020,
14+
},
15+
env: {
16+
browser: true,
17+
es2017: true,
18+
node: true,
19+
},
20+
};

‎AgentQnA/ui/svelte/.prettierignore

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
.DS_Store
2+
node_modules
3+
/build
4+
/.svelte-kit
5+
/package
6+
.env
7+
.env.*
8+
!.env.example
9+
10+
# Ignore files for PNPM, NPM and YARN
11+
pnpm-lock.yaml
12+
package-lock.json
13+
yarn.lock

‎AgentQnA/ui/svelte/.prettierrc

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"pluginSearchDirs": [
3+
"."
4+
],
5+
"overrides": [
6+
{
7+
"files": "*.svelte",
8+
"options": {
9+
"parser": "svelte"
10+
}
11+
}
12+
]
13+
}

‎AgentQnA/ui/svelte/README.md

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
# AgentQnA
2+
3+
## 📸 Project Screenshots
4+
5+
![project-screenshot](../../assets/img/agent_ui.png)
6+
![project-screenshot](../../assets/img/agent_ui_result.png)
7+
8+
## 🧐 Features
9+
10+
Here're some of the project's features:
11+
12+
- 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.
13+
14+
## 🛠️ Get it Running
15+
16+
1. Clone the repo.
17+
18+
2. cd command to the current folder.
19+
20+
```
21+
cd AgentQnA/ui
22+
```
23+
24+
3. Modify the required .env variables.
25+
26+
```
27+
AGENT_URL = ''
28+
```
29+
30+
4. **For Local Development:**
31+
32+
- Install the dependencies:
33+
34+
```
35+
npm install
36+
```
37+
38+
- Start the development server:
39+
40+
```
41+
npm run dev
42+
```
43+
44+
- The application will be available at `http://localhost:3000`.
45+
46+
5. **For Docker Setup:**
47+
48+
- Build the Docker image:
49+
50+
```
51+
docker build -t opea:agent-ui .
52+
```
53+
54+
- Run the Docker container:
55+
56+
```
57+
docker run -d -p 3000:3000 --name agent-ui opea:agent-ui
58+
```
59+
60+
- The application will be available at `http://localhost:3000`.

‎AgentQnA/ui/svelte/package.json

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
{
2+
"name": "agent-example",
3+
"version": "0.0.1",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite dev --host 0.0.0.0",
7+
"build": "vite build",
8+
"preview": "vite preview",
9+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
10+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
11+
"lint": "prettier --check . && eslint .",
12+
"format": "prettier --write ."
13+
},
14+
"devDependencies": {
15+
"@fortawesome/free-solid-svg-icons": "6.2.0",
16+
"@sveltejs/adapter-auto": "1.0.0-next.75",
17+
"@sveltejs/kit": "^1.20.1",
18+
"@tailwindcss/typography": "0.5.7",
19+
"@types/debug": "4.1.7",
20+
"@typescript-eslint/eslint-plugin": "^5.27.0",
21+
"@typescript-eslint/parser": "^5.27.0",
22+
"autoprefixer": "^10.4.7",
23+
"daisyui": "^2.52.0",
24+
"debug": "4.3.4",
25+
"eslint": "^8.16.0",
26+
"eslint-config-prettier": "^8.3.0",
27+
"eslint-plugin-neverthrow": "1.1.4",
28+
"eslint-plugin-svelte3": "^4.0.0",
29+
"neverthrow": "5.0.0",
30+
"pocketbase": "0.7.0",
31+
"postcss": "^8.4.23",
32+
"postcss-load-config": "^4.0.1",
33+
"postcss-preset-env": "^8.3.2",
34+
"prettier": "^2.8.8",
35+
"prettier-plugin-svelte": "^2.7.0",
36+
"prettier-plugin-tailwindcss": "^0.3.0",
37+
"svelte": "^3.59.1",
38+
"svelte-check": "^2.7.1",
39+
"svelte-fa": "3.0.3",
40+
"svelte-preprocess": "^4.10.7",
41+
"tailwindcss": "^3.1.5",
42+
"ts-pattern": "4.0.5",
43+
"tslib": "^2.3.1",
44+
"typescript": "^4.7.4",
45+
"vite": "^4.3.9"
46+
},
47+
"type": "module",
48+
"dependencies": {
49+
"@heroicons/vue": "^2.1.5",
50+
"echarts": "^5.4.2",
51+
"flowbite-svelte": "^0.38.5",
52+
"flowbite-svelte-icons": "^0.3.6",
53+
"fuse.js": "^6.6.2",
54+
"marked": "^15.0.0",
55+
"ramda": "^0.29.0",
56+
"sjcl": "^1.0.8",
57+
"sse.js": "^0.6.1",
58+
"svelte-notifications": "^0.9.98"
59+
}
60+
}

‎AgentQnA/ui/svelte/postcss.config.cjs

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const tailwindcss = require("tailwindcss");
2+
const autoprefixer = require("autoprefixer");
3+
4+
const config = {
5+
plugins: [
6+
//Some plugins, like tailwindcss/nesting, need to run before Tailwind,
7+
tailwindcss(),
8+
//But others, like autoprefixer, need to run after,
9+
autoprefixer,
10+
],
11+
};
12+
13+
module.exports = config;

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

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
// Copyright (C) 2025 Intel Corporation
2+
// SPDX-License-Identifier: Apache-2.0
3+
4+
// See: https://kit.svelte.dev/docs/types#app
5+
// import { Result} from "neverthrow";
6+
7+
declare namespace App {
8+
interface Locals {
9+
user?: User;
10+
}
11+
// interface PageData { }
12+
// interface PageError {}
13+
// interface Platform {}
14+
}
15+
16+
interface User {
17+
id?: string;
18+
email: string;
19+
password?: string;
20+
token?: string;
21+
[key: string]: any;
22+
}
23+
24+
type AuthResponse = Result<User>;
25+
26+
interface AuthAdapter {
27+
login(props: { email: string; password: string }): Promise<AuthResponse>;
28+
signup(props: { email: string; password: string; password_confirm: string }): Promise<AuthResponse>;
29+
validate_session(props: { token: string }): Promise<AuthResponse>;
30+
logout(props: { token: string; email: string }): Promise<Result<void>>;
31+
forgotPassword(props: { email: string; password: string }): Promise<Result<void>>;
32+
}
33+
34+
interface ChatAdapter {
35+
modelList(props: {}): Promise<Result<void>>;
36+
txt2img(props: {}): Promise<Result<void>>;
37+
}
38+
39+
interface ChatMessage {
40+
role: string;
41+
content: string;
42+
}
43+
44+
interface ChatMessageType {
45+
model: string;
46+
knowledge: string;
47+
temperature: string;
48+
max_new_tokens: string;
49+
topk: string;
50+
}

‎AgentQnA/ui/svelte/src/app.html

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!--
2+
Copyright (C) 2025 Intel Corporation
3+
SPDX-License-Identifier: Apache-2.0
4+
-->
5+
6+
<!doctype html>
7+
<html lang="en">
8+
<head>
9+
<meta charset="utf-8" />
10+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
11+
<meta name="viewport" content="width=device-width" />
12+
%sveltekit.head%
13+
</head>
14+
<body>
15+
<div>%sveltekit.body%</div>
16+
</body>
17+
</html>

0 commit comments

Comments
 (0)