Merge branch 'rc/new-plugin' into refactor/new-plugin-system

web/src/app/home/models/component/ICreateEmbeddingField.ts

@@ -0,0 +1,7 @@
+export interface ICreateEmbeddingField {
+  name: string;
+  model_provider: string;
+  url: string;
+  api_key: string;
+  extra_args?: string[];
+}

web/src/app/home/models/component/embedding-card/EmbeddingCard.module.css

@@ -0,0 +1,128 @@
+.cardContainer {
+  width: 100%;
+  height: 10rem;
+  background-color: #fff;
+  border-radius: 10px;
+  box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
+  padding: 1.2rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+:global(.dark) .cardContainer {
+  background-color: #1f1f22;
+  box-shadow: 0;
+}
+
+.cardContainer:hover {
+  box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
+}
+
+:global(.dark) .cardContainer:hover {
+  box-shadow: 0;
+}
+
+.iconBasicInfoContainer {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 0.8rem;
+  user-select: none;
+}
+
+.iconImage {
+  width: 3.8rem;
+  height: 3.8rem;
+  margin: 0.2rem;
+  border-radius: 50%;
+}
+
+.basicInfoContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  min-width: 0;
+  width: 100%;
+}
+
+.basicInfoText {
+  font-size: 1.4rem;
+  font-weight: bold;
+  color: #1a1a1a;
+}
+
+:global(.dark) .basicInfoText {
+  color: #f0f0f0;
+}
+
+.providerContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+}
+
+.providerIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+  margin-top: 0.2rem;
+  color: #626262;
+}
+
+:global(.dark) .providerIcon {
+  color: #a0a0a0;
+}
+
+.providerLabel {
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: #626262;
+}
+
+:global(.dark) .providerLabel {
+  color: #a0a0a0;
+}
+
+.baseURLContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.2rem;
+  width: calc(100% - 3rem);
+}
+
+.baseURLIcon {
+  width: 1.2rem;
+  height: 1.2rem;
+  color: #626262;
+}
+
+:global(.dark) .baseURLIcon {
+  color: #a0a0a0;
+}
+
+.baseURLText {
+  font-size: 1rem;
+  width: 100%;
+  color: #626262;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+:global(.dark) .baseURLText {
+  color: #a0a0a0;
+}
+
+.bigText {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.4rem;
+  font-weight: bold;
+  max-width: 100%;
+}

web/src/app/home/models/component/embedding-card/EmbeddingCard.tsx

@@ -0,0 +1,53 @@
+import styles from './EmbeddingCard.module.css';
+import { EmbeddingCardVO } from '@/app/home/models/component/embedding-card/EmbeddingCardVO';
+
+export default function EmbeddingCard({ cardVO }: { cardVO: EmbeddingCardVO }) {
+  return (
+    <div className={`${styles.cardContainer}`}>
+      <div className={`${styles.iconBasicInfoContainer}`}>
+        <img
+          className={`${styles.iconImage}`}
+          src={cardVO.iconURL}
+          alt="icon"
+        />
+
+        <div className={`${styles.basicInfoContainer}`}>
+          {/* 名称 */}
+          <div className={`${styles.basicInfoText} ${styles.bigText}`}>
+            {cardVO.name}
+          </div>
+          {/* 厂商 */}
+          <div className={`${styles.providerContainer}`}>
+            <svg
+              className={`${styles.providerIcon}`}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="36"
+              height="36"
+              fill="currentColor"
+            >
+              <path d="M21 13.2422V20H22V22H2V20H3V13.2422C1.79401 12.435 1 11.0602 1 9.5C1 8.67286 1.22443 7.87621 1.63322 7.19746L4.3453 2.5C4.52393 2.1906 4.85406 2 5.21132 2H18.7887C19.1459 2 19.4761 2.1906 19.6547 2.5L22.3575 7.18172C22.7756 7.87621 23 8.67286 23 9.5C23 11.0602 22.206 12.435 21 13.2422ZM19 13.9725C18.8358 13.9907 18.669 14 18.5 14C17.2409 14 16.0789 13.478 15.25 12.6132C14.4211 13.478 13.2591 14 12 14C10.7409 14 9.5789 13.478 8.75 12.6132C7.9211 13.478 6.75911 14 5.5 14C5.331 14 5.16417 13.9907 5 13.9725V20H19V13.9725ZM5.78865 4L3.35598 8.21321C3.12409 8.59843 3 9.0389 3 9.5C3 10.8807 4.11929 12 5.5 12C6.53096 12 7.44467 11.3703 7.82179 10.4295C8.1574 9.59223 9.3426 9.59223 9.67821 10.4295C10.0553 11.3703 10.969 12 12 12C13.031 12 13.9447 11.3703 14.3218 10.4295C14.6574 9.59223 15.8426 9.59223 16.1782 10.4295C16.5553 11.3703 17.469 12 18.5 12C19.8807 12 21 10.8807 21 9.5C21 9.0389 20.8759 8.59843 20.6347 8.19746L18.2113 4H5.78865Z"></path>
+            </svg>
+            <span className={`${styles.providerLabel}`}>
+              {cardVO.providerLabel}
+            </span>
+          </div>
+          {/* baseURL */}
+          <div className={`${styles.baseURLContainer}`}>
+            <svg
+              className={`${styles.baseURLIcon}`}
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              width="36"
+              height="36"
+              fill="rgba(98,98,98,1)"
+            >
+              <path d="M13.0607 8.11097L14.4749 9.52518C17.2086 12.2589 17.2086 16.691 14.4749 19.4247L14.1214 19.7782C11.3877 22.5119 6.95555 22.5119 4.22188 19.7782C1.48821 17.0446 1.48821 12.6124 4.22188 9.87874L5.6361 11.293C3.68348 13.2456 3.68348 16.4114 5.6361 18.364C7.58872 20.3166 10.7545 20.3166 12.7072 18.364L13.0607 18.0105C15.0133 16.0578 15.0133 12.892 13.0607 10.9394L11.6465 9.52518L13.0607 8.11097ZM19.7782 14.1214L18.364 12.7072C20.3166 10.7545 20.3166 7.58872 18.364 5.6361C16.4114 3.68348 13.2456 3.68348 11.293 5.6361L10.9394 5.98965C8.98678 7.94227 8.98678 11.1081 10.9394 13.0607L12.3536 14.4749L10.9394 15.8891L9.52518 14.4749C6.79151 11.7413 6.79151 7.30911 9.52518 4.57544L9.87874 4.22188C12.6124 1.48821 17.0446 1.48821 19.7782 4.22188C22.5119 6.95555 22.5119 11.3877 19.7782 14.1214Z"></path>
+            </svg>
+            <span className={`${styles.baseURLText}`}>{cardVO.baseURL}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/app/home/models/component/embedding-card/EmbeddingCardVO.ts

@@ -0,0 +1,23 @@
+export interface IEmbeddingCardVO {
+  id: string;
+  iconURL: string;
+  name: string;
+  providerLabel: string;
+  baseURL: string;
+}
+
+export class EmbeddingCardVO implements IEmbeddingCardVO {
+  id: string;
+  iconURL: string;
+  providerLabel: string;
+  name: string;
+  baseURL: string;
+
+  constructor(props: IEmbeddingCardVO) {
+    this.id = props.id;
+    this.iconURL = props.iconURL;
+    this.providerLabel = props.providerLabel;
+    this.name = props.name;
+    this.baseURL = props.baseURL;
+  }
+}

web/src/app/home/models/component/embedding-form/EmbeddingForm.tsx

@@ -0,0 +1,579 @@
+import { ICreateEmbeddingField } from '@/app/home/models/component/ICreateEmbeddingField';
+import { useEffect, useState } from 'react';
+import { IChooseRequesterEntity } from '@/app/home/models/component/ChooseRequesterEntity';
+import { httpClient } from '@/app/infra/http/HttpClient';
+import { EmbeddingModel } from '@/app/infra/entities/api';
+import { UUID } from 'uuidjs';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { useTranslation } from 'react-i18next';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { toast } from 'sonner';
+import { i18nObj } from '@/i18n/I18nProvider';
+
+const getExtraArgSchema = (t: (key: string) => string) =>
+  z
+    .object({
+      key: z.string().min(1, { message: t('models.keyNameRequired') }),
+      type: z.enum(['string', 'number', 'boolean']),
+      value: z.string(),
+    })
+    .superRefine((data, ctx) => {
+      if (data.type === 'number' && isNaN(Number(data.value))) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('models.mustBeValidNumber'),
+          path: ['value'],
+        });
+      }
+      if (
+        data.type === 'boolean' &&
+        data.value !== 'true' &&
+        data.value !== 'false'
+      ) {
+        ctx.addIssue({
+          code: z.ZodIssueCode.custom,
+          message: t('models.mustBeTrueOrFalse'),
+          path: ['value'],
+        });
+      }
+    });
+
+const getFormSchema = (t: (key: string) => string) =>
+  z.object({
+    name: z.string().min(1, { message: t('models.modelNameRequired') }),
+    model_provider: z
+      .string()
+      .min(1, { message: t('models.modelProviderRequired') }),
+    url: z.string().min(1, { message: t('models.requestURLRequired') }),
+    api_key: z.string().min(1, { message: t('models.apiKeyRequired') }),
+    extra_args: z.array(getExtraArgSchema(t)).optional(),
+  });
+
+export default function EmbeddingForm({
+  editMode,
+  initEmbeddingId,
+  onFormSubmit,
+  onFormCancel,
+  onEmbeddingDeleted,
+}: {
+  editMode: boolean;
+  initEmbeddingId?: string;
+  onFormSubmit: () => void;
+  onFormCancel: () => void;
+  onEmbeddingDeleted: () => void;
+}) {
+  const { t } = useTranslation();
+  const formSchema = getFormSchema(t);
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      model_provider: '',
+      url: '',
+      api_key: 'sk-xxxxx',
+      extra_args: [],
+    },
+  });
+
+  const [extraArgs, setExtraArgs] = useState<
+    { key: string; type: 'string' | 'number' | 'boolean'; value: string }[]
+  >([]);
+
+  const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState(false);
+  const [requesterNameList, setRequesterNameList] = useState<
+    IChooseRequesterEntity[]
+  >([]);
+  const [requesterDefaultURLList, setRequesterDefaultURLList] = useState<
+    string[]
+  >([]);
+  const [modelTesting, setModelTesting] = useState(false);
+  const [currentModelProvider, setCurrentModelProvider] = useState('');
+
+  useEffect(() => {
+    initEmbeddingModelFormComponent().then(() => {
+      if (editMode && initEmbeddingId) {
+        getEmbeddingConfig(initEmbeddingId).then((val) => {
+          form.setValue('name', val.name);
+          form.setValue('model_provider', val.model_provider);
+          setCurrentModelProvider(val.model_provider);
+          form.setValue('url', val.url);
+          form.setValue('api_key', val.api_key);
+          if (val.extra_args) {
+            const args = val.extra_args.map((arg) => {
+              const [key, value] = arg.split(':');
+              let type: 'string' | 'number' | 'boolean' = 'string';
+              if (!isNaN(Number(value))) {
+                type = 'number';
+              } else if (value === 'true' || value === 'false') {
+                type = 'boolean';
+              }
+              return {
+                key,
+                type,
+                value,
+              };
+            });
+            setExtraArgs(args);
+            form.setValue('extra_args', args);
+          }
+        });
+      } else {
+        form.reset();
+      }
+    });
+  }, []);
+
+  const addExtraArg = () => {
+    setExtraArgs([...extraArgs, { key: '', type: 'string', value: '' }]);
+  };
+
+  const updateExtraArg = (
+    index: number,
+    field: 'key' | 'type' | 'value',
+    value: string,
+  ) => {
+    const newArgs = [...extraArgs];
+    newArgs[index] = {
+      ...newArgs[index],
+      [field]: value,
+    };
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  const removeExtraArg = (index: number) => {
+    const newArgs = extraArgs.filter((_, i) => i !== index);
+    setExtraArgs(newArgs);
+    form.setValue('extra_args', newArgs);
+  };
+
+  async function initEmbeddingModelFormComponent() {
+    const requesterNameList =
+      await httpClient.getProviderRequesters('text-embedding');
+    setRequesterNameList(
+      requesterNameList.requesters.map((item) => {
+        return {
+          label: i18nObj(item.label),
+          value: item.name,
+        };
+      }),
+    );
+    setRequesterDefaultURLList(
+      requesterNameList.requesters.map((item) => {
+        const config = item.spec.config;
+        for (let i = 0; i < config.length; i++) {
+          if (config[i].name == 'base_url') {
+            return config[i].default?.toString() || '';
+          }
+        }
+        return '';
+      }),
+    );
+  }
+
+  async function getEmbeddingConfig(
+    id: string,
+  ): Promise<ICreateEmbeddingField> {
+    const embeddingModel = await httpClient.getProviderEmbeddingModel(id);
+
+    const fakeExtraArgs = [];
+    const extraArgs = embeddingModel.model.extra_args as Record<string, string>;
+    for (const key in extraArgs) {
+      fakeExtraArgs.push(`${key}:${extraArgs[key]}`);
+    }
+    return {
+      name: embeddingModel.model.name,
+      model_provider: embeddingModel.model.requester,
+      url: embeddingModel.model.requester_config?.base_url,
+      api_key: embeddingModel.model.api_keys[0],
+      extra_args: fakeExtraArgs,
+    };
+  }
+
+  function handleFormSubmit(value: z.infer<typeof formSchema>) {
+    const extraArgsObj: Record<string, string | number | boolean> = {};
+    value.extra_args?.forEach(
+      (arg: { key: string; type: string; value: string }) => {
+        if (arg.type === 'number') {
+          extraArgsObj[arg.key] = Number(arg.value);
+        } else if (arg.type === 'boolean') {
+          extraArgsObj[arg.key] = arg.value === 'true';
+        } else {
+          extraArgsObj[arg.key] = arg.value;
+        }
+      },
+    );
+
+    const embeddingModel: EmbeddingModel = {
+      uuid: editMode ? initEmbeddingId || '' : UUID.generate(),
+      name: value.name,
+      description: '',
+      requester: value.model_provider,
+      requester_config: {
+        base_url: value.url,
+        timeout: 120,
+      },
+      extra_args: extraArgsObj,
+      api_keys: [value.api_key],
+    };
+
+    if (editMode) {
+      onSaveEdit(embeddingModel).then(() => {
+        form.reset();
+      });
+    } else {
+      onCreateEmbedding(embeddingModel).then(() => {
+        form.reset();
+      });
+    }
+  }
+
+  async function onCreateEmbedding(embeddingModel: EmbeddingModel) {
+    try {
+      await httpClient.createProviderEmbeddingModel(embeddingModel);
+      onFormSubmit();
+      toast.success(t('models.createSuccess'));
+    } catch (err) {
+      toast.error(t('models.createError') + (err as Error).message);
+    }
+  }
+
+  async function onSaveEdit(embeddingModel: EmbeddingModel) {
+    try {
+      await httpClient.updateProviderEmbeddingModel(
+        initEmbeddingId || '',
+        embeddingModel,
+      );
+      onFormSubmit();
+      toast.success(t('models.saveSuccess'));
+    } catch (err) {
+      toast.error(t('models.saveError') + (err as Error).message);
+    }
+  }
+
+  function deleteModel() {
+    if (initEmbeddingId) {
+      httpClient
+        .deleteProviderEmbeddingModel(initEmbeddingId)
+        .then(() => {
+          onEmbeddingDeleted();
+          toast.success(t('models.deleteSuccess'));
+        })
+        .catch((err) => {
+          toast.error(t('models.deleteError') + err.message);
+        });
+    }
+  }
+
+  function testEmbeddingModelInForm() {
+    setModelTesting(true);
+    const extraArgsObj: Record<string, string | number | boolean> = {};
+    form
+      .getValues('extra_args')
+      ?.forEach((arg: { key: string; type: string; value: string }) => {
+        if (arg.type === 'number') {
+          extraArgsObj[arg.key] = Number(arg.value);
+        } else if (arg.type === 'boolean') {
+          extraArgsObj[arg.key] = arg.value === 'true';
+        } else {
+          extraArgsObj[arg.key] = arg.value;
+        }
+      });
+    httpClient
+      .testEmbeddingModel('_', {
+        uuid: '',
+        name: form.getValues('name'),
+        description: '',
+        requester: form.getValues('model_provider'),
+        requester_config: {
+          base_url: form.getValues('url'),
+          timeout: 120,
+        },
+        api_keys: [form.getValues('api_key')],
+        extra_args: extraArgsObj,
+      })
+      .then((res) => {
+        console.log(res);
+        toast.success(t('models.testSuccess'));
+      })
+      .catch(() => {
+        toast.error(t('models.testError'));
+      })
+      .finally(() => {
+        setModelTesting(false);
+      });
+  }
+
+  return (
+    <div>
+      <Dialog
+        open={showDeleteConfirmModal}
+        onOpenChange={setShowDeleteConfirmModal}
+      >
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t('common.confirmDelete')}</DialogTitle>
+          </DialogHeader>
+          <DialogDescription>
+            {t('models.deleteConfirmation')}
+          </DialogDescription>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => setShowDeleteConfirmModal(false)}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={() => {
+                deleteModel();
+                setShowDeleteConfirmModal(false);
+              }}
+            >
+              {t('common.confirmDelete')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Form {...form}>
+        <form
+          onSubmit={form.handleSubmit(handleFormSubmit)}
+          className="space-y-8"
+        >
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t('models.modelName')}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                  <FormDescription>
+                    {t('models.modelProviderDescription')}
+                  </FormDescription>
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="model_provider"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t('models.modelProvider')}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Select
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        setCurrentModelProvider(value);
+                        const index = requesterNameList.findIndex(
+                          (item) => item.value === value,
+                        );
+                        if (index !== -1) {
+                          form.setValue('url', requesterDefaultURLList[index]);
+                        }
+                      }}
+                      value={field.value}
+                    >
+                      <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
+                        <SelectValue
+                          placeholder={t('models.selectModelProvider')}
+                        />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectGroup>
+                          {requesterNameList.map((item) => (
+                            <SelectItem key={item.value} value={item.value}>
+                              {item.label}
+                            </SelectItem>
+                          ))}
+                        </SelectGroup>
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="url"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>
+                    {t('models.requestURL')}
+                    <span className="text-red-500">*</span>
+                  </FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {!['ollama-chat'].includes(currentModelProvider) && (
+              <FormField
+                control={form.control}
+                name="api_key"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>
+                      {t('models.apiKey')}
+                      <span className="text-red-500">*</span>
+                    </FormLabel>
+                    <FormControl>
+                      <Input {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            )}
+
+            <FormItem>
+              <FormLabel>{t('models.extraParameters')}</FormLabel>
+              <div className="space-y-2">
+                {extraArgs.map((arg, index) => (
+                  <div key={index} className="flex gap-2">
+                    <Input
+                      placeholder={t('models.keyName')}
+                      value={arg.key}
+                      onChange={(e) =>
+                        updateExtraArg(index, 'key', e.target.value)
+                      }
+                    />
+                    <Select
+                      value={arg.type}
+                      onValueChange={(value) =>
+                        updateExtraArg(index, 'type', value)
+                      }
+                    >
+                      <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
+                        <SelectValue placeholder={t('models.type')} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="string">
+                          {t('models.string')}
+                        </SelectItem>
+                        <SelectItem value="number">
+                          {t('models.number')}
+                        </SelectItem>
+                        <SelectItem value="boolean">
+                          {t('models.boolean')}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <Input
+                      placeholder={t('models.value')}
+                      value={arg.value}
+                      onChange={(e) =>
+                        updateExtraArg(index, 'value', e.target.value)
+                      }
+                    />
+                    <button
+                      type="button"
+                      className="p-2 hover:bg-gray-100 rounded"
+                      onClick={() => removeExtraArg(index)}
+                    >
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        className="w-5 h-5 text-red-500"
+                      >
+                        <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
+                      </svg>
+                    </button>
+                  </div>
+                ))}
+                <Button type="button" variant="outline" onClick={addExtraArg}>
+                  {t('models.addParameter')}
+                </Button>
+              </div>
+              <FormDescription>
+                {t('embedding.extraParametersDescription')}
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          </div>
+          <DialogFooter>
+            {editMode && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => setShowDeleteConfirmModal(true)}
+              >
+                {t('common.delete')}
+              </Button>
+            )}
+
+            <Button type="submit">
+              {editMode ? t('common.save') : t('common.submit')}
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => testEmbeddingModelInForm()}
+              disabled={modelTesting}
+            >
+              {t('common.test')}
+            </Button>
+
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onFormCancel()}
+            >
+              {t('common.cancel')}
+            </Button>
+          </DialogFooter>
+        </form>
+      </Form>
+    </div>
+  );
+}

web/src/app/home/models/component/llm-card/LLMCard.module.css

@@ -6,12 +6,22 @@
   box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.2);
   padding: 1.2rem;
   cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+:global(.dark) .cardContainer {
+  background-color: #1f1f22;
+  box-shadow: 0;
 }
 
 .cardContainer:hover {
   box-shadow: 0px 2px 8px 0 rgba(0, 0, 0, 0.1);
 }
 
+:global(.dark) .cardContainer:hover {
+  box-shadow: 0;
+}
+
 .iconBasicInfoContainer {
   width: 100%;
   height: 100%;
@@ -40,6 +50,11 @@
 .basicInfoText {
   font-size: 1.4rem;
   font-weight: bold;
+  color: #1a1a1a;
+}
+
+:global(.dark) .basicInfoText {
+  color: #f0f0f0;
 }
 
 .providerContainer {
@@ -57,12 +72,20 @@
   color: #626262;
 }
 
+:global(.dark) .providerIcon {
+  color: #a0a0a0;
+}
+
 .providerLabel {
   font-size: 1.2rem;
   font-weight: 600;
   color: #626262;
 }
 
+:global(.dark) .providerLabel {
+  color: #a0a0a0;
+}
+
 .baseURLContainer {
   display: flex;
   flex-direction: row;
@@ -78,6 +101,10 @@
   color: #626262;
 }
 
+:global(.dark) .baseURLIcon {
+  color: #a0a0a0;
+}
+
 .baseURLText {
   font-size: 1rem;
   width: 100%;
@@ -88,6 +115,10 @@
   max-width: 100%;
 }
 
+:global(.dark) .baseURLText {
+  color: #a0a0a0;
+}
+
 .abilitiesContainer {
   display: flex;
   flex-direction: row;
@@ -108,18 +139,30 @@
   background-color: #66baff80;
 }
 
+:global(.dark) .abilityBadge {
+  background-color: rgba(34, 136, 238, 0.3);
+}
+
 .abilityIcon {
   width: 1rem;
   height: 1rem;
   color: #2288ee;
 }
 
+:global(.dark) .abilityIcon {
+  color: #66baff;
+}
+
 .abilityLabel {
   font-size: 0.8rem;
   font-weight: 400;
   color: #2288ee;
 }
 
+:global(.dark) .abilityLabel {
+  color: #66baff;
+}
+
 .bigText {
   white-space: nowrap;
   overflow: hidden;

web/src/app/home/models/component/llm-form/LLMForm.tsx

@@ -1,6 +1,6 @@
-import { ICreateLLMField } from '@/app/home/models/ICreateLLMField';
+import { ICreateLLMField } from '@/app/home/models/component/ICreateLLMField';
 import { useEffect, useState } from 'react';
-import { IChooseRequesterEntity } from '@/app/home/models/component/llm-form/ChooseRequesterEntity';
+import { IChooseRequesterEntity } from '@/app/home/models/component/ChooseRequesterEntity';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { LLMModel } from '@/app/infra/entities/api';
 import { UUID } from 'uuidjs';
@@ -197,7 +197,7 @@ export default function LLMForm({
   };
 
   async function initLLMModelFormComponent() {
-    const requesterNameList = await httpClient.getProviderRequesters();
+    const requesterNameList = await httpClient.getProviderRequesters('llm');
     setRequesterNameList(
       requesterNameList.requesters.map((item) => {
         return {
@@ -312,6 +312,18 @@ export default function LLMForm({
 
   function testLLMModelInForm() {
     setModelTesting(true);
+    const extraArgsObj: Record<string, string | number | boolean> = {};
+    form
+      .getValues('extra_args')
+      ?.forEach((arg: { key: string; type: string; value: string }) => {
+        if (arg.type === 'number') {
+          extraArgsObj[arg.key] = Number(arg.value);
+        } else if (arg.type === 'boolean') {
+          extraArgsObj[arg.key] = arg.value === 'true';
+        } else {
+          extraArgsObj[arg.key] = arg.value;
+        }
+      });
     httpClient
       .testLLMModel('_', {
         uuid: '',
@@ -324,7 +336,7 @@ export default function LLMForm({
         },
         api_keys: [form.getValues('api_key')],
         abilities: form.getValues('abilities'),
-        extra_args: form.getValues('extra_args'),
+        extra_args: extraArgsObj,
       })
       .then((res) => {
         console.log(res);
@@ -420,7 +432,7 @@ export default function LLMForm({
                       }}
                       value={field.value}
                     >
-                      <SelectTrigger className="w-[180px]">
+                      <SelectTrigger className="w-[180px] bg-[#ffffff] dark:bg-[#2a2a2e]">
                         <SelectValue
                           placeholder={t('models.selectModelProvider')}
                         />
@@ -553,7 +565,7 @@ export default function LLMForm({
                         updateExtraArg(index, 'type', value)
                       }
                     >
-                      <SelectTrigger className="w-[120px]">
+                      <SelectTrigger className="w-[120px] bg-[#ffffff] dark:bg-[#2a2a2e]">
                         <SelectValue placeholder={t('models.type')} />
                       </SelectTrigger>
                       <SelectContent>
@@ -596,7 +608,7 @@ export default function LLMForm({
                 </Button>
               </div>
               <FormDescription>
-                {t('models.extraParametersDescription')}
+                {t('llm.extraParametersDescription')}
               </FormDescription>
               <FormMessage />
             </FormItem>

web/src/app/home/models/page.tsx

@@ -8,6 +8,7 @@ import LLMForm from '@/app/home/models/component/llm-form/LLMForm';
 import CreateCardComponent from '@/app/infra/basic-component/create-card-component/CreateCardComponent';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { LLMModel } from '@/app/infra/entities/api';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import {
   Dialog,
   DialogContent,
@@ -17,6 +18,9 @@ import {
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
+import { EmbeddingCardVO } from '@/app/home/models/component/embedding-card/EmbeddingCardVO';
+import EmbeddingCard from '@/app/home/models/component/embedding-card/EmbeddingCard';
+import EmbeddingForm from '@/app/home/models/component/embedding-form/EmbeddingForm';
 
 export default function LLMConfigPage() {
   const { t } = useTranslation();
@@ -24,13 +28,21 @@ export default function LLMConfigPage() {
   const [modalOpen, setModalOpen] = useState<boolean>(false);
   const [isEditForm, setIsEditForm] = useState(false);
   const [nowSelectedLLM, setNowSelectedLLM] = useState<LLMCardVO | null>(null);
+  const [embeddingCardList, setEmbeddingCardList] = useState<EmbeddingCardVO[]>(
+    [],
+  );
+  const [embeddingModalOpen, setEmbeddingModalOpen] = useState<boolean>(false);
+  const [isEditEmbeddingForm, setIsEditEmbeddingForm] = useState(false);
+  const [nowSelectedEmbedding, setNowSelectedEmbedding] =
+    useState<EmbeddingCardVO | null>(null);
 
   useEffect(() => {
     getLLMModelList();
+    getEmbeddingModelList();
   }, []);
 
   async function getLLMModelList() {
-    const requesterNameListResp = await httpClient.getProviderRequesters();
+    const requesterNameListResp = await httpClient.getProviderRequesters('llm');
     const requesterNameList = requesterNameListResp.requesters.map((item) => {
       return {
         label: extractI18nObject(item.label),
@@ -74,6 +86,55 @@ export default function LLMConfigPage() {
     setNowSelectedLLM(null);
     setModalOpen(true);
   }
+  function selectEmbedding(cardVO: EmbeddingCardVO) {
+    setIsEditEmbeddingForm(true);
+    setNowSelectedEmbedding(cardVO);
+    setEmbeddingModalOpen(true);
+  }
+
+  function handleCreateEmbeddingModelClick() {
+    setIsEditEmbeddingForm(false);
+    setNowSelectedEmbedding(null);
+    setEmbeddingModalOpen(true);
+  }
+  async function getEmbeddingModelList() {
+    const requesterNameListResp =
+      await httpClient.getProviderRequesters('text-embedding');
+    const requesterNameList = requesterNameListResp.requesters.map((item) => {
+      return {
+        label: extractI18nObject(item.label),
+        value: item.name,
+      };
+    });
+
+    httpClient
+      .getProviderEmbeddingModels()
+      .then((resp) => {
+        const embeddingModelList: EmbeddingCardVO[] = resp.models.map(
+          (model: {
+            uuid: string;
+            requester: string;
+            name: string;
+            requester_config?: { base_url?: string };
+          }) => {
+            return new EmbeddingCardVO({
+              id: model.uuid,
+              iconURL: httpClient.getProviderRequesterIconURL(model.requester),
+              name: model.name,
+              providerLabel:
+                requesterNameList.find((item) => item.value === model.requester)
+                  ?.label || model.requester.substring(0, 10),
+              baseURL: model.requester_config?.base_url || '',
+            });
+          },
+        );
+        setEmbeddingCardList(embeddingModelList);
+      })
+      .catch((err) => {
+        console.error('get Embedding model list error', err);
+        toast.error(t('embedding.getModelListError') + err.message);
+      });
+  }
 
   return (
     <div>
@@ -101,26 +162,110 @@ export default function LLMConfigPage() {
           />
         </DialogContent>
       </Dialog>
-      <div className={`${styles.modelListContainer}`}>
-        <CreateCardComponent
-          width={'100%'}
-          height={'10rem'}
-          plusSize={'90px'}
-          onClick={handleCreateModelClick}
-        />
-        {cardList.map((cardVO) => {
-          return (
-            <div
-              key={cardVO.id}
-              onClick={() => {
-                selectLLM(cardVO);
-              }}
-            >
-              <LLMCard cardVO={cardVO}></LLMCard>
+      <Dialog open={embeddingModalOpen} onOpenChange={setEmbeddingModalOpen}>
+        <DialogContent className="w-[700px] p-6">
+          <DialogHeader>
+            <DialogTitle>
+              {isEditEmbeddingForm
+                ? t('embedding.editModel')
+                : t('embedding.createModel')}
+            </DialogTitle>
+          </DialogHeader>
+          <EmbeddingForm
+            editMode={isEditEmbeddingForm}
+            initEmbeddingId={nowSelectedEmbedding?.id}
+            onFormSubmit={() => {
+              setEmbeddingModalOpen(false);
+              getEmbeddingModelList();
+            }}
+            onFormCancel={() => {
+              setEmbeddingModalOpen(false);
+            }}
+            onEmbeddingDeleted={() => {
+              setEmbeddingModalOpen(false);
+              getEmbeddingModelList();
+            }}
+          />
+        </DialogContent>
+      </Dialog>
+
+      <Tabs defaultValue="llm" className="w-full">
+        <div className="flex flex-row gap-0 mb-4">
+          <div className="flex flex-row justify-between items-center px-[0.8rem]">
+            <TabsList className="shadow-md py-5 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
+              <TabsTrigger value="llm" className="px-6 py-4 cursor-pointer">
+                {t('llm.llmModels')}
+              </TabsTrigger>
+              <TabsTrigger
+                value="embedding"
+                className="px-6 py-4 cursor-pointer"
+              >
+                {t('embedding.embeddingModels')}
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="llm">
+            <div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {t('llm.description')}
+              </p>
             </div>
-          );
-        })}
-      </div>
+          </TabsContent>
+          <TabsContent value="embedding">
+            <div className="flex flex-row justify-between items-center px-[0.4rem] h-full">
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                {t('embedding.description')}
+              </p>
+            </div>
+          </TabsContent>
+        </div>
+
+        <TabsContent value="llm">
+          <div className={`${styles.modelListContainer}`}>
+            <CreateCardComponent
+              width={'100%'}
+              height={'10rem'}
+              plusSize={'90px'}
+              onClick={handleCreateModelClick}
+            />
+            {cardList.map((cardVO) => {
+              return (
+                <div
+                  key={cardVO.id}
+                  onClick={() => {
+                    selectLLM(cardVO);
+                  }}
+                >
+                  <LLMCard cardVO={cardVO}></LLMCard>
+                </div>
+              );
+            })}
+          </div>
+        </TabsContent>
+
+        <TabsContent value="embedding">
+          <div className={`${styles.modelListContainer}`}>
+            <CreateCardComponent
+              width={'100%'}
+              height={'10rem'}
+              plusSize={'90px'}
+              onClick={handleCreateEmbeddingModelClick}
+            />
+            {embeddingCardList.map((cardVO) => {
+              return (
+                <div
+                  key={cardVO.id}
+                  onClick={() => {
+                    selectEmbedding(cardVO);
+                  }}
+                >
+                  <EmbeddingCard cardVO={cardVO}></EmbeddingCard>
+                </div>
+              );
+            })}
+          </div>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }