From 32cf566a087d2c2f27751c34678bcb179d057e87 Mon Sep 17 00:00:00 2001 From: balibabu Date: Tue, 26 Nov 2024 09:10:48 +0800 Subject: [PATCH] Feat: Add ModelManagement page #3221 (#3638) ### What problem does this PR solve? Feat: Add ModelManagement page #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality) --- web/src/components/ui/button.tsx | 2 +- web/src/pages/profile-setting/model/index.tsx | 47 ++++++ .../profile-setting/model/model-card.tsx | 136 ++++++++++++++++++ web/src/pages/profile-setting/team/index.tsx | 6 +- web/src/routes.ts | 4 + 5 files changed, 191 insertions(+), 4 deletions(-) create mode 100644 web/src/pages/profile-setting/model/index.tsx create mode 100644 web/src/pages/profile-setting/model/model-card.tsx diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx index 10c902afda..a4fc760e49 100644 --- a/web/src/components/ui/button.tsx +++ b/web/src/components/ui/button.tsx @@ -13,7 +13,7 @@ const buttonVariants = cva( destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90', outline: - 'border border-input bg-background hover:bg-accent hover:text-accent-foreground', + 'border border-colors-outline-sentiment-primary bg-background hover:bg-accent hover:text-accent-foreground', secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80', ghost: 'hover:bg-accent hover:text-accent-foreground', diff --git a/web/src/pages/profile-setting/model/index.tsx b/web/src/pages/profile-setting/model/index.tsx new file mode 100644 index 0000000000..65941e1a30 --- /dev/null +++ b/web/src/pages/profile-setting/model/index.tsx @@ -0,0 +1,47 @@ +import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; +import { + AddModelCard, + ModelLibraryCard, + SystemModelSetting, +} from './model-card'; + +const addedModelList = new Array(4).fill(1); + +const modelLibraryList = new Array(4).fill(1); + +export default function ModelManagement() { + return ( +
+
+

Team management

+ +
+ +
+

Added model

+
+ {addedModelList.map((x, idx) => ( + + ))} +
+
+
+
+

Model library

+ +
+
+ {modelLibraryList.map((x, idx) => ( + + ))} +
+
+
+ ); +} diff --git a/web/src/pages/profile-setting/model/model-card.tsx b/web/src/pages/profile-setting/model/model-card.tsx new file mode 100644 index 0000000000..23c8006fc1 --- /dev/null +++ b/web/src/pages/profile-setting/model/model-card.tsx @@ -0,0 +1,136 @@ +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { Button } from '@/components/ui/button'; +import { Card, CardContent } from '@/components/ui/card'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { Key, MoreVertical, Plus, Trash2 } from 'lucide-react'; +import { PropsWithChildren } from 'react'; + +const settings = [ + { + title: 'GPT Model', + description: + 'The default chat LLM all the newly created knowledgebase will use.', + model: 'DeepseekChat', + }, + { + title: 'Embedding Model', + description: + 'The default embedding model all the newly created knowledgebase will use.', + model: 'DeepseekChat', + }, + { + title: 'Image Model', + description: + 'The default multi-capable model all the newly created knowledgebase will use. It can generate a picture or video.', + model: 'DeepseekChat', + }, + { + title: 'Speech2TXT Model', + description: + 'The default ASR model all the newly created knowledgebase will use. Use this model to translate voices to text something text.', + model: 'DeepseekChat', + }, + { + title: 'TTS Model', + description: + 'The default text to speech model all the newly created knowledgebase will use.', + model: 'DeepseekChat', + }, +]; + +function Title({ children }: PropsWithChildren) { + return {children}; +} + +export function SystemModelSetting() { + return ( + + + {settings.map((x, idx) => ( +
+
+ {x.title} + + {x.description} + +
+
+ +
+
+ ))} +
+
+ ); +} + +export function AddModelCard() { + return ( + + +
+ + + CN + + +
+ Deep seek +

LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION

+ + + + + + +
+ + +
+
+
+ ); +} + +export function ModelLibraryCard() { + return ( + + + + + CN + + + Deep seek +

LLM,TEXT EMBEDDING, SPEECH2TEXT, MODERATION

+ +
+ +
+
+
+ ); +} diff --git a/web/src/pages/profile-setting/team/index.tsx b/web/src/pages/profile-setting/team/index.tsx index cd629f3ac0..d919b2f30f 100644 --- a/web/src/pages/profile-setting/team/index.tsx +++ b/web/src/pages/profile-setting/team/index.tsx @@ -28,11 +28,11 @@ const TeamManagement = () => { }; return ( -
-
+
+

Team management

- diff --git a/web/src/routes.ts b/web/src/routes.ts index e7c7545bc7..1a182b6481 100644 --- a/web/src/routes.ts +++ b/web/src/routes.ts @@ -149,6 +149,10 @@ const routes = [ path: '/profile-setting/plan', component: '@/pages/profile-setting/plan', }, + { + path: '/profile-setting/model', + component: '@/pages/profile-setting/model', + }, ], }, ];