From db4bcfc5d6aea23e0c28056ebf2ae32295c12bae Mon Sep 17 00:00:00 2001
From: Brian Yang <youngzm339@outlook.com>
Date: Sun, 28 Apr 2024 11:59:57 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=A2=9E=E5=8A=A0=E4=BA=86=E6=9B=B4?=
 =?UTF-8?q?=E5=A4=9A=E5=B8=B8=E7=94=A8=E7=9A=84OpenAI=E6=A8=A1=E5=9E=8B?=
 =?UTF-8?q?=E5=8F=8A=E5=85=B6=E6=8F=8F=E8=BF=B0=20&=20=E7=8E=B0=E5=9C=A8?=
 =?UTF-8?q?=E5=8F=AF=E4=BB=A5=E9=80=9A=E8=BF=87tooltip=E6=AD=A3=E5=B8=B8?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BAModelInfo=E4=B8=ADdesc=E7=9A=84=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9=20(#269)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../openai_model_provider.py                  | 35 ++++++-
 .../template/component/CreateModelDialog.vue  | 96 +++++++------------
 ui/src/views/template/component/EditModel.vue | 89 ++++++-----------
 3 files changed, 93 insertions(+), 127 deletions(-)

diff --git a/apps/setting/models_provider/impl/openai_model_provider/openai_model_provider.py b/apps/setting/models_provider/impl/openai_model_provider/openai_model_provider.py
index aab6ac08cc3..983561b95a1 100644
--- a/apps/setting/models_provider/impl/openai_model_provider/openai_model_provider.py
+++ b/apps/setting/models_provider/impl/openai_model_provider/openai_model_provider.py
@@ -57,12 +57,39 @@ def encryption_dict(self, model: Dict[str, object]):
 openai_llm_model_credential = OpenAILLMModelCredential()
 
 model_dict = {
-    'gpt-3.5-turbo': ModelInfo('gpt-3.5-turbo', '', ModelTypeConst.LLM, openai_llm_model_credential,
+    'gpt-3.5-turbo': ModelInfo('gpt-3.5-turbo', '最新的gpt-3.5-turbo，随OpenAI调整而更新', ModelTypeConst.LLM,
+                               openai_llm_model_credential,
                                ),
-    'gpt-3.5-turbo-0613': ModelInfo('gpt-3.5-turbo-0613', '', ModelTypeConst.LLM, openai_llm_model_credential,
+    'gpt-3.5-turbo-0125': ModelInfo('gpt-3.5-turbo-0125',
+                                    '2024年1月25日的gpt-3.5-turbo快照，支持上下文长度16,385 tokens', ModelTypeConst.LLM,
+                                    openai_llm_model_credential,
+                                    ),
+    'gpt-3.5-turbo-1106': ModelInfo('gpt-3.5-turbo-1106',
+                                    '2023年11月6日的gpt-3.5-turbo快照，支持上下文长度16,385 tokens', ModelTypeConst.LLM,
+                                    openai_llm_model_credential,
+                                    ),
+    'gpt-3.5-turbo-0613': ModelInfo('gpt-3.5-turbo-0613',
+                                    '[Legacy] 2023年6月13日的gpt-3.5-turbo快照，将于2024年6月13日弃用',
+                                    ModelTypeConst.LLM, openai_llm_model_credential,
+                                    ),
+    'gpt-4': ModelInfo('gpt-4', '最新的gpt-4，随OpenAI调整而更新', ModelTypeConst.LLM, openai_llm_model_credential,
+                       ),
+    'gpt-4-turbo': ModelInfo('gpt-4-turbo', '最新的gpt-4-turbo，随OpenAI调整而更新', ModelTypeConst.LLM,
+                             openai_llm_model_credential,
+                             ),
+    'gpt-4-turbo-preview': ModelInfo('gpt-4-turbo-preview', '最新的gpt-4-turbo-preview，随OpenAI调整而更新',
+                                     ModelTypeConst.LLM, openai_llm_model_credential,
+                                     ),
+    'gpt-4-turbo-2024-04-09': ModelInfo('gpt-4-turbo-2024-04-09',
+                                        '2024年4月9日的gpt-4-turbo快照，支持上下文长度128,000 tokens',
+                                        ModelTypeConst.LLM, openai_llm_model_credential,
+                                        ),
+    'gpt-4-0125-preview': ModelInfo('gpt-4-0125-preview', '2024年1月25日的gpt-4-turbo快照，支持上下文长度128,000 tokens',
+                                    ModelTypeConst.LLM, openai_llm_model_credential,
+                                    ),
+    'gpt-4-1106-preview': ModelInfo('gpt-4-1106-preview', '2023年11月6日的gpt-4-turbo快照，支持上下文长度128,000 tokens',
+                                    ModelTypeConst.LLM, openai_llm_model_credential,
                                     ),
-    'gpt-4': ModelInfo('gpt-4', '', ModelTypeConst.LLM, openai_llm_model_credential,
-                       )
 }
 
 
diff --git a/ui/src/views/template/component/CreateModelDialog.vue b/ui/src/views/template/component/CreateModelDialog.vue
index 3741c0d488c..b62d0a3ffb4 100644
--- a/ui/src/views/template/component/CreateModelDialog.vue
+++ b/ui/src/views/template/component/CreateModelDialog.vue
@@ -1,37 +1,18 @@
 <template>
-  <el-dialog
-    v-model="dialogVisible"
-    width="600px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :destroy-on-close="true"
-    :before-close="close"
-  >
+  <el-dialog v-model="dialogVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false"
+    :destroy-on-close="true" :before-close="close">
     <template #header="{ close, titleId, titleClass }">
       <el-breadcrumb separator=">">
         <el-breadcrumb-item>
-          <span @click="toSelectProvider" class="select-provider"
-            >选择供应商</span
-          ></el-breadcrumb-item
-        >
-        <el-breadcrumb-item
-          ><span class="active-breadcrumb">{{
-            `添加 ${providerValue?.name}`
-          }}</span></el-breadcrumb-item
-        >
+          <span @click="toSelectProvider" class="select-provider">选择供应商</span></el-breadcrumb-item>
+        <el-breadcrumb-item><span class="active-breadcrumb">{{
+          `添加 ${providerValue?.name}`
+            }}</span></el-breadcrumb-item>
       </el-breadcrumb>
     </template>
 
-    <DynamicsForm
-      v-model="form_data"
-      :render_data="model_form_field"
-      :model="form_data"
-      ref="dynamicsFormRef"
-      label-position="top"
-      require-asterisk-position="right"
-      class="mb-24"
-      label-width="auto"
-    >
+    <DynamicsForm v-model="form_data" :render_data="model_form_field" :model="form_data" ref="dynamicsFormRef"
+      label-position="top" require-asterisk-position="right" class="mb-24" label-width="auto">
       <template #default>
         <el-form-item prop="name" :rules="base_form_data_rule.name">
           <template #label>
@@ -47,30 +28,16 @@
               </el-tooltip>
             </div>
           </template>
-          <el-input
-            v-model="base_form_data.name"
-            maxlength="20"
-            show-word-limit
-            placeholder="请给基础模型设置一个名称"
-          />
+          <el-input v-model="base_form_data.name" maxlength="20" show-word-limit placeholder="请给基础模型设置一个名称" />
         </el-form-item>
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
           <template #label>
             <span>模型类型</span>
           </template>
-          <el-select
-            v-loading="model_type_loading"
-            @change="list_base_model($event)"
-            v-model="base_form_data.model_type"
-            class="w-full m-2"
-            placeholder="请选择模型类型"
-          >
-            <el-option
-              v-for="item in model_type_list"
-              :key="item.value"
-              :label="item.key"
-              :value="item.value"
-            ></el-option>
+          <el-select v-loading="model_type_loading" @change="list_base_model($event)"
+            v-model="base_form_data.model_type" class="w-full m-2" placeholder="请选择模型类型">
+            <el-option v-for="item in model_type_list" :key="item.value" :label="item.key"
+              :value="item.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
@@ -83,30 +50,30 @@
                 <template #content>
                   <p>为供应商的 LLM 模型，支持自定义输入</p>
                   <p>
-                    下拉选项是 OpenAI
-                    常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等
+                    下拉选项是常用的一些大语言模型如：gpt-3.5-turbo、gpt-4 等
                   </p>
                 </template>
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
             </div>
           </template>
-          <el-select
-            @change="getModelForm($event)"
-            v-loading="base_model_loading"
-            v-model="base_form_data.model_name"
-            class="w-full m-2"
-            placeholder="自定义输入基础模型后回车即可"
-            filterable
-            allow-create
-            default-first-option
-          >
-            <el-option
-              v-for="item in base_model_list"
-              :key="item.name"
-              :label="item.name"
-              :value="item.name"
-            ></el-option>
+          <el-select @change="getModelForm($event)" v-loading="base_model_loading" v-model="base_form_data.model_name"
+            class="w-full m-2" placeholder="自定义输入基础模型后回车即可" filterable allow-create default-first-option>
+            <el-option v-for="item in base_model_list" :key="item.name" :value="item.name">
+              <template #default>
+                <div class="flex align-center" style="display: inline-flex">
+                  <div class="flex-between mr-4">
+                    <span>{{ item.name }} </span>
+                  </div>
+                  <el-tooltip effect="dark" placement="right" v-if="item.desc">
+                    <template #content>
+                      <p>{{ item.desc }}</p>
+                    </template>
+                    <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-option>
           </el-select>
         </el-form-item>
       </template>
@@ -204,6 +171,7 @@ const list_base_model = (model_type: any) => {
     )
   }
 }
+
 const close = () => {
   base_form_data.value = { name: '', model_type: '', model_name: '' }
   credential_form_data.value = {}
diff --git a/ui/src/views/template/component/EditModel.vue b/ui/src/views/template/component/EditModel.vue
index 07b81508d3c..18503e468b0 100644
--- a/ui/src/views/template/component/EditModel.vue
+++ b/ui/src/views/template/component/EditModel.vue
@@ -1,31 +1,16 @@
 <template>
-  <el-dialog
-    v-model="dialogVisible"
-    width="600px"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    :destroy-on-close="true"
-    :before-close="close"
-  >
+  <el-dialog v-model="dialogVisible" width="600px" :close-on-click-modal="false" :close-on-press-escape="false"
+    :destroy-on-close="true" :before-close="close">
     <template #header="{ close, titleId, titleClass }">
       <el-breadcrumb separator=">">
-        <el-breadcrumb-item
-          ><span class="active-breadcrumb">{{
-            `编辑 ${providerValue?.name}`
-          }}</span></el-breadcrumb-item
-        >
+        <el-breadcrumb-item><span class="active-breadcrumb">{{
+          `编辑 ${providerValue?.name}`
+            }}</span></el-breadcrumb-item>
       </el-breadcrumb>
     </template>
 
-    <DynamicsForm
-      v-loading="formLoading"
-      v-model="form_data"
-      :render_data="model_form_field"
-      :model="form_data"
-      ref="dynamicsFormRef"
-      label-position="top"
-      require-asterisk-position="right"
-    >
+    <DynamicsForm v-loading="formLoading" v-model="form_data" :render_data="model_form_field" :model="form_data"
+      ref="dynamicsFormRef" label-position="top" require-asterisk-position="right">
       <template #default>
         <el-form-item prop="name" :rules="base_form_data_rule.name">
           <template #label>
@@ -41,30 +26,16 @@
               </el-tooltip>
             </div>
           </template>
-          <el-input
-            v-model="base_form_data.name"
-            maxlength="20"
-            show-word-limit
-            placeholder="请给基础模型设置一个名称"
-          />
+          <el-input v-model="base_form_data.name" maxlength="20" show-word-limit placeholder="请给基础模型设置一个名称" />
         </el-form-item>
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
           <template #label>
             <span>模型类型</span>
           </template>
-          <el-select
-            v-loading="model_type_loading"
-            @change="list_base_model($event)"
-            v-model="base_form_data.model_type"
-            class="w-full m-2"
-            placeholder="请选择模型类型"
-          >
-            <el-option
-              v-for="item in model_type_list"
-              :key="item.value"
-              :label="item.key"
-              :value="item.value"
-            ></el-option>
+          <el-select v-loading="model_type_loading" @change="list_base_model($event)"
+            v-model="base_form_data.model_type" class="w-full m-2" placeholder="请选择模型类型">
+            <el-option v-for="item in model_type_list" :key="item.value" :label="item.key"
+              :value="item.value"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item prop="model_name" :rules="base_form_data_rule.model_name">
@@ -77,30 +48,30 @@
                 <template #content>
                   <p>为供应商的 LLM 模型，支持自定义输入</p>
                   <p>
-                    下拉选项是 OpenAI
-                    常用的一些大语言模型如：gpt-3.5-turbo-0613、gpt-3.5-turbo、gpt-4 等
+                    下拉选项是常用的一些大语言模型如：gpt-3.5-turbo、gpt-4 等
                   </p>
                 </template>
                 <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
               </el-tooltip>
             </div>
           </template>
-          <el-select
-            @change="getModelForm($event)"
-            v-loading="base_model_loading"
-            v-model="base_form_data.model_name"
-            class="w-full m-2"
-            placeholder="请选择基础模型"
-            filterable
-            allow-create
-            default-first-option
-          >
-            <el-option
-              v-for="item in base_model_list"
-              :key="item.name"
-              :label="item.name"
-              :value="item.name"
-            ></el-option>
+          <el-select @change="getModelForm($event)" v-loading="base_model_loading" v-model="base_form_data.model_name"
+            class="w-full m-2" placeholder="请选择基础模型" filterable allow-create default-first-option>
+            <el-option v-for="item in base_model_list" :key="item.name" :value="item.name">
+              <template #default>
+                <div class="flex align-center" style="display: inline-flex">
+                  <div class="flex-between mr-4">
+                    <span>{{ item.name }} </span>
+                  </div>
+                  <el-tooltip effect="dark" placement="right" v-if="item.desc">
+                    <template #content>
+                      <p>{{ item.desc }}</p>
+                    </template>
+                    <AppIcon iconName="app-warning" class="app-warning-icon"></AppIcon>
+                  </el-tooltip>
+                </div>
+              </template>
+            </el-option>
           </el-select>
         </el-form-item>
       </template>