feat: add inference applicationModel compare page

package.json

@@ -21,6 +21,7 @@
     "@antv/g2": "^5.1.10",
     "@dao-style/core": "1.9.0",
     "@dao-style/extend": "1.7.2-beta.3",
+    "@types/showdown": "^2.0.6",
     "@vueuse/core": "^8.5.0",
     "@vueuse/shared": "^8.5.0",
     "axios": "^1.6.2",
@@ -30,6 +31,7 @@
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
+    "showdown": "^2.1.0",
     "vee-validate": "^4.12.0",
     "vue": "^3.3.8",
     "vue-i18n": "9.7.1",

src/locales/en-US/views/InferenceApplication.json

@@ -44,5 +44,13 @@
     "llmCheckpoint": "Model",
     "createSuccess": "Inference application created successfully",
     "createFailed": "Failed to create inference application"
+  },
+
+  "compare": {
+    "header": "Multi-model Comparison",
+    "elapsedTime": "Elapsed Time(s)",
+    "tokensTotalQuantity": "Tokens Total Quantity",
+    "perSecond": "tokens/s",
+    "send": "Send"
   }
 }

src/locales/zh-CN/views/InferenceApplication.json

@@ -43,5 +43,13 @@
     "llmCheckpoint": "模型",
     "createSuccess": "推理应用创建成功",
     "createFailed": "推理应用创建失败"
+  },
+
+  "compare": {
+    "header": "多模型对比",
+    "elapsedTime": "用时(s)",
+    "tokensTotalQuantity": "tokens总数",
+    "perSecond": "tokens/每秒",
+    "send": "发送"
   }
 }

src/plugins/axios/index.ts

@@ -37,7 +37,16 @@ httpClient.interceptors.request.use(
 
 httpClient.interceptors.response.use(
   (response) => response,
-  (error) => Promise.reject(error.response?.data),
+  (error) => {
+    const { response = {} } = error;
+
+    if (response?.status === 401 || response?.status === 403) {
+      localStorage.removeItem(TOKEN);
+      window.location.reload();
+    }
+
+    return Promise.reject(error.response?.data);
+  },
 );
 
 export default httpClient;

src/router/index.ts

@@ -24,6 +24,7 @@ import FinetuneExperimentJobDetail from '@/views/finetune-experiment-job/Finetun
 import ModelRegistryList from '@/views/model-registry/ModelRegistryList.vue';
 
 import InferenceApplicationList from '@/views/inference-application/InferenceApplicationList.vue';
+import InferenceApplicationModelCompare from '@/views/inference-application/InferenceApplicationModelCompare.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -137,6 +138,11 @@ const routes: Array<RouteRecordRaw> = [
                 name: 'InferenceApplicationList',
                 component: InferenceApplicationList,
               },
+              {
+                path: 'inference-application-model-compare',
+                name: 'InferenceApplicationModelCompare',
+                component: InferenceApplicationModelCompare,
+              },
             ],
           },
 

src/views/inference-application/InferenceApplicationList.vue

@@ -12,6 +12,7 @@ import { useDeleteInferenceApplication } from './composition/inference-applicati
 
 const { namespace } = storeToRefs(useNamespaceStore());
 const { t } = useI18n();
+const router = useRouter();
 
 const columns = defineColumns([
   {
@@ -70,6 +71,16 @@ const selectable = (row: RayService) => {
 
   return false;
 };
+
+const onCompare = () => {
+  const queryList = selectedRows.value?.map(({ metadata }) => metadata?.name);
+
+  router.push({
+    name: 'InferenceApplicationModelCompare',
+    query: { servicename: queryList },
+  });
+};
+
 </script>
 
 <template>
@@ -100,7 +111,10 @@ const selectable = (row: RayService) => {
           :content="$t('views.InferenceApplication.list.compareLimit')"
           simple
         />
-        <dao-button v-else>
+        <dao-button
+          v-else
+          @click="onCompare"
+        >
           {{ t("views.InferenceApplication.list.compare") }}
         </dao-button>
       </template>

src/views/inference-application/InferenceApplicationModelCompare.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+import { LabelExtendColor } from '@dao-style/extend';
+import ComparisonChatItem from './components/comparison-chat-item.vue';
+import ComparisonChatTextarea from './components/comparison-chat-textarea.vue';
+
+interface ExampleMap {
+  text: string;
+  color: LabelExtendColor;
+}
+
+const { t } = useI18n();
+const router = useRouter();
+const { query } = useRoute();
+
+const servicename = computed(() => query.servicename as string[]);
+
+const examples: ExampleMap[] = [
+  {
+    text: 'aaaaahjshas',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaajkbadhjhwohuijhduiow',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaa',
+    color: 'skyblue',
+  },
+  {
+    text: 'aaaaa',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaasjhsjkahdsjlna',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaa',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaa',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaanjskalnkalna',
+    color: 'skyblue',
+  },
+  {
+    text: 'aaamnsdjlkbnwajlbaa',
+    color: 'pink',
+  },
+  {
+    text: 'aaaaa',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaa',
+    color: 'yellow',
+  },
+  {
+    text: 'aaaaa',
+    color: 'pink',
+  },
+
+];
+
+</script>
+
+<template>
+  <div class="inference-list console-main-container">
+    <dao-header type="3rd">
+      <template #breadcrumb>
+        <dao-breadcrumb
+          icon="icon-cluster"
+          :list="[
+            {
+              label: t('views.InferenceApplication.list.header'),
+              to: { name: 'InferenceApplicationList'},
+            },
+            {
+              label: t('views.InferenceApplication.compare.header'),
+            },
+          ]"
+          @navigate="router.push"
+        />
+      </template>
+    </dao-header>
+    <dao-card
+      type="headless"
+      class="compare-card"
+    >
+      <dao-card-item
+        v-for="(name, index) in servicename"
+        :key="index"
+      >
+        <ComparisonChatItem :name="name" />
+      </dao-card-item>
+    </dao-card>
+    <div class="compare-input-card">
+      <ComparisonChatTextarea
+        :placeholder="'在这里输入问题，或挑选指令模板'"
+        :maxlength="4000"
+        :rows="4"
+      />
+      <div class="issue-example">
+        <div class="issue-example-header">
+          <dao-icon
+            name="icon-list-view"
+            class="issue-example-header-icon"
+            use-font
+          />示例
+        </div>
+        <div class="issue-example-container">
+          <dao-label-extend
+            v-for="({ text, color }, index) in examples"
+            :key="index"
+            :color="color"
+            class="issue-example-container-item"
+          >
+            {{ text }}
+          </dao-label-extend>
+          <!-- eslint-disable-next-line vue/html-self-closing -->
+          <i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.compare-card {
+  :deep(.dao-card-container) {
+    padding: 16px;
+
+    .dao-card-item  {
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+.compare-input-card {
+  padding: 16px;
+  margin-top: 20px;
+  overflow: hidden;
+  background: var(--dao-pure-white);
+  border-radius: 6px;
+  box-shadow: 0 2px 5px 0 rgba(var(--dao-pure-black-rgb),.1);
+  transition: box-shadow .3s ease-in;
+
+  .issue-example {
+    margin-top: 16px;
+
+    &-header {
+      display: inline-flex;
+      align-items: center;
+      color: var(--dao-gray-090);
+
+      &-icon {
+        margin-right: 4px;
+      }
+    }
+
+    &-container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-right: -12px;
+
+      &-item {
+        margin-top: 8px;
+        margin-right: 12px;
+      }
+
+      >i {
+          width: 100px;
+          margin-right: 10px;
+      }
+    }
+  }
+}
+
+</style>