Add quantization selection to NewEndpoint.vue (#962)

- Add quantization form item
- Add quantization validation rule
- Fetch available quantizations on model select
- Update locale files with quantization translation

Author: hiveer

frontend/src/components/endpoints/NewEndpoint.vue

@@ -61,7 +61,7 @@
               v-model="dataForm.model_id"
               :fetch-suggestions="fetchModels"
               :placeholder="t('all.pleaseInput', { value: t('endpoints.new.modelId') })"
-              @select="updateRuntimeFramework"
+              @select="loadRequiredData"
             />
           </el-form-item>
         </div>
@@ -153,6 +153,7 @@
           </p>
         </el-form-item>
 
+        <!-- runtime framework -->
         <el-form-item
           :label="t('endpoints.new.framework')"
           class="w-full"
@@ -172,6 +173,26 @@
           </el-select>
         </el-form-item>
 
+        <!-- quantization -->
+        <el-form-item
+          :label="t('endpoints.new.quantization')"
+          class="w-full"
+          prop="quantization">
+          <el-select
+            v-model="dataForm.quantization"
+            :placeholder="
+              t('all.pleaseSelect', { value: t('endpoints.new.quantization') })
+            "
+            size="large"
+            style="width: 100%">
+            <el-option
+              v-for="item in availableQuantizations"
+              :key="item.name"
+              :label="item.name"
+              :value="item.name" />
+          </el-select>
+        </el-form-item>
+
         <el-form-item class="w-full">
           <PublicAndPrivateRadioGroup
             v-model="dataForm.visibility"
@@ -221,6 +242,7 @@
   const endpointClusters = ref([])
   const endpointResources = ref([])
   const loading = ref(false)
+  const availableQuantizations = ref([])
 
   const replicaRanges = [1, 2, 3, 4, 5]
 
@@ -304,6 +326,15 @@
         }),
         trigger: 'blur'
       }
+    ],
+    quantization: [
+      {
+        required: true,
+        message: t('all.pleaseSelect', {
+          value: t('endpoints.new.quantization')
+        }),
+        trigger: 'blur'
+      }
     ]
   })
 
@@ -355,6 +386,11 @@
     }
   }
 
+  const loadRequiredData = () => {
+    updateRuntimeFramework()
+    fetchQuantizations()
+  }
+
   const updateRuntimeFramework = async () => {
     if (!dataForm.value.model_id) return
     const { data, error } = await useFetchApi(
@@ -437,6 +473,16 @@
     }
   }
 
+  const fetchQuantizations = async () => {
+    const quantizationEndpoint = `/models/${dataForm.value.model_id}/quantizations`
+    const { data, error } = await useFetchApi(quantizationEndpoint).json()
+    if (data.value) {
+      availableQuantizations.value = data.value.data
+    } else {
+      console.log(error.value.msg)
+    }
+  }
+
   onMounted(() => {
     fetchClusters()
   })

frontend/src/locales/en_js/endpoints.js

@@ -33,6 +33,7 @@ export const endpoints = {
     dedicated: "Dedicated endpoint",
     tip: "Applied to the endpoint, cannot be changed after creation",
     createFail: "Failed to create endpoint",
+    quantization: "Quantization"
   },
   settings: {
     stop: "Stop",

frontend/src/locales/zh_js/endpoints.js

@@ -33,6 +33,7 @@ export const endpoints = {
     tip: "应用于专属实例，创建后不可更改",
     createSuccess: "专属实例创建成功",
     createFail: "专属实例创建失败",
+    quantization: "量化"
   },
   settings: {
     stop: "暂停",