ui(frontend): add embedding model page

pingcap · Aug 1, 2024 · 354d515 · 354d515
1 parent e221e60
commit 354d515
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 8 deletions.
diff --git a/frontend/app/src/api/embedding-model.ts b/frontend/app/src/api/embedding-model.ts
@@ -8,7 +8,6 @@ export interface EmbeddingModel {
   provider: string;
   model: string;
   config?: any;
-  is_default: boolean;
   created_at: Date | null;
   updated_at: Date | null;
 }
@@ -28,7 +27,6 @@ export interface CreateEmbeddingModel {
   provider: string;
   model: string;
   config?: any;
-  is_default?: boolean;
   credentials: string | object;
 }
 
@@ -38,7 +36,6 @@ const embeddingModelSchema = z.object({
   provider: z.string(),
   model: z.string(),
   config: z.any(),
-  is_default: z.boolean(),
   created_at: zodJsonDate().nullable(),
   updated_at: zodJsonDate().nullable(),
 }) satisfies ZodType<EmbeddingModel, ZodTypeDef, any>;

diff --git a/frontend/app/src/app/(main)/(admin)/embedding-model/page.tsx b/frontend/app/src/app/(main)/(admin)/embedding-model/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { getEmbeddingModel } from '@/api/embedding-model';
+import { AdminPageHeading } from '@/components/admin-page-heading';
+import { ConfigViewer } from '@/components/config-viewer';
+import { DateFormat } from '@/components/date-format';
+import { OptionDetail } from '@/components/option-detail';
+import { Loader2Icon } from 'lucide-react';
+import useSWR from 'swr';
+
+export default function EmbeddingModelPage () {
+  const { data: embeddingModel, isLoading } = useSWR('api.embedding-models.get', () => getEmbeddingModel());
+
+  if (isLoading) {
+    return <>
+      <AdminPageHeading title="Embedding Model" />
+      <Loader2Icon className="animate-spin repeat-infinite size-4" />
+    </>;
+  }
+
+  if (!embeddingModel) {
+    return (
+      <>
+        <AdminPageHeading title="Embedding Model" />
+        <div className="p-8 bg-accent text-accent-foreground rounded-lg">
+          Embedding Model not configured.
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <AdminPageHeading title="Embedding Model" description="Embedding Model is not configurable after setup." />
+      <div className="max-w-screen-sm space-y-4">
+        <div className="space-y-2 text-sm rounded p-4 border">
+          <OptionDetail title="ID" value={embeddingModel.id} />
+          <OptionDetail title="Name" value={embeddingModel.name} />
+          <OptionDetail title="Provider" value={embeddingModel.provider} />
+          <OptionDetail title="Model" value={embeddingModel.model} />
+          <OptionDetail title="Config" value={embeddingModel.config && <ConfigViewer value={embeddingModel.config}></ConfigViewer>} />
+          <OptionDetail title="Created At" value={<DateFormat date={embeddingModel.created_at} />} />
+          <OptionDetail title="Updated At" value={<DateFormat date={embeddingModel.updated_at} />} />
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/frontend/app/src/app/(main)/nav.tsx b/frontend/app/src/app/(main)/nav.tsx
@@ -14,7 +14,7 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useHref } from '@/components/use-href';
 import { cn } from '@/lib/utils';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { BotMessageSquareIcon, BrainCircuitIcon, CogIcon, CommandIcon, FilesIcon, GaugeIcon, HomeIcon, LibraryIcon, MenuIcon, MessageCircleQuestionIcon, MessagesSquareIcon, PlusIcon, WaypointsIcon } from 'lucide-react';
+import { BinaryIcon, BotMessageSquareIcon, BrainCircuitIcon, CogIcon, CommandIcon, FilesIcon, GaugeIcon, HomeIcon, LibraryIcon, MenuIcon, MessageCircleQuestionIcon, MessagesSquareIcon, PlusIcon, WaypointsIcon } from 'lucide-react';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
 import useSWR from 'swr';
@@ -95,6 +95,7 @@ export function Nav () {
           { href: '/datasources', title: 'Datasources', icon: LibraryIcon },
           { href: '/chat-engines', title: 'Chat Engines', icon: BotMessageSquareIcon },
           { href: '/llms', title: 'LLMs', icon: BrainCircuitIcon },
+          { href: '/embedding-model', title: 'Embedding Model', icon: BinaryIcon },
           { href: '/index-progress', title: 'Index Progress', icon: GaugeIcon },
           { href: '/knowledge-graph', title: 'Knowledge Graph', icon: WaypointsIcon },
           { href: '/site-settings', title: 'Settings', icon: CogIcon },

diff --git a/frontend/app/src/components/embedding-model/CreateEmbeddingModelForm.tsx b/frontend/app/src/components/embedding-model/CreateEmbeddingModelForm.tsx
@@ -23,7 +23,6 @@ const unsetForm = z.object({
   name: z.string().min(1, 'Must not empty'),
   provider: z.string().min(1, 'Must not empty'),
   config: zodJsonText().optional(),
-  is_default: z.boolean().optional(),
 });
 
 const strCredentialForm = unsetForm.extend({
@@ -53,7 +52,6 @@ export function CreateEmbeddingModelForm ({ transitioning, onCreated }: { transi
       provider: '',
       model: '',
       credentials: '',
-      is_default: true,
     },
   });
 
@@ -65,10 +63,9 @@ export function CreateEmbeddingModelForm ({ transitioning, onCreated }: { transi
         credentials: provider.credentials_type === 'dict' ? undefined : '',
       });
     } else {
-      const { name, is_default } = form.getValues();
+      const { name } = form.getValues();
       form.reset({
         name,
-        is_default,
         provider: '',
         credentials: '',
         model: '',