From e1b647303d8d6cb96490a85146bf6c88db77c349 Mon Sep 17 00:00:00 2001
From: carolsi <qin.si@daocloud.io>
Date: Fri, 15 Dec 2023 09:34:06 +0800
Subject: [PATCH] feat: add inference applicationModel compare page

---
 package.json                                  |   2 +
 .../en-US/views/InferenceApplication.json     |   8 +
 .../zh-CN/views/InferenceApplication.json     |   8 +
 src/plugins/axios/index.ts                    |  11 +-
 src/router/index.ts                           |   6 +
 .../InferenceApplicationList.vue              |  16 +-
 .../InferenceApplicationModelCompare.vue      | 185 ++++++++++++++++++
 .../components/comparison-chat-item.vue       |  97 +++++++++
 .../components/comparison-chat-markdown.vue   |  23 +++
 .../components/comparison-chat-textarea.vue   |  86 ++++++++
 10 files changed, 440 insertions(+), 2 deletions(-)
 create mode 100644 src/views/inference-application/InferenceApplicationModelCompare.vue
 create mode 100644 src/views/inference-application/components/comparison-chat-item.vue
 create mode 100644 src/views/inference-application/components/comparison-chat-markdown.vue
 create mode 100644 src/views/inference-application/components/comparison-chat-textarea.vue

diff --git a/package.json b/package.json
index 7bb99ff..55bb5a1 100644
--- a/package.json
+++ b/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",
diff --git a/src/locales/en-US/views/InferenceApplication.json b/src/locales/en-US/views/InferenceApplication.json
index 2aa0d45..039287b 100644
--- a/src/locales/en-US/views/InferenceApplication.json
+++ b/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"
   }
 }
diff --git a/src/locales/zh-CN/views/InferenceApplication.json b/src/locales/zh-CN/views/InferenceApplication.json
index 64d6dfc..7662d73 100644
--- a/src/locales/zh-CN/views/InferenceApplication.json
+++ b/src/locales/zh-CN/views/InferenceApplication.json
@@ -43,5 +43,13 @@
     "llmCheckpoint": "模型",
     "createSuccess": "推理应用创建成功",
     "createFailed": "推理应用创建失败"
+  },
+
+  "compare": {
+    "header": "多模型对比",
+    "elapsedTime": "用时(s)",
+    "tokensTotalQuantity": "tokens总数",
+    "perSecond": "tokens/每秒",
+    "send": "发送"
   }
 }
diff --git a/src/plugins/axios/index.ts b/src/plugins/axios/index.ts
index fcc46a5..746a08f 100644
--- a/src/plugins/axios/index.ts
+++ b/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;
diff --git a/src/router/index.ts b/src/router/index.ts
index c647b77..fb7998b 100644
--- a/src/router/index.ts
+++ b/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,
+              },
             ],
           },
 
diff --git a/src/views/inference-application/InferenceApplicationList.vue b/src/views/inference-application/InferenceApplicationList.vue
index f136644..107b529 100644
--- a/src/views/inference-application/InferenceApplicationList.vue
+++ b/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>
diff --git a/src/views/inference-application/InferenceApplicationModelCompare.vue b/src/views/inference-application/InferenceApplicationModelCompare.vue
new file mode 100644
index 0000000..5395b07
--- /dev/null
+++ b/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>
diff --git a/src/views/inference-application/components/comparison-chat-item.vue b/src/views/inference-application/components/comparison-chat-item.vue
new file mode 100644
index 0000000..0a695f4
--- /dev/null
+++ b/src/views/inference-application/components/comparison-chat-item.vue
@@ -0,0 +1,97 @@
+<script lang="ts" setup>
+// import showdown from 'showdown';
+import ComparisonChatMarkdown from './comparison-chat-markdown.vue';
+
+const props = defineProps({
+  name: {
+    type: String,
+    default: '',
+  },
+});
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <div class="comparison-chat-item-container">
+    <div class="comparison-chat-item-container-header">
+      <div class="app-name">
+        <dao-icon
+          name="icon-apps"
+          use-font
+        />
+        <span class="app-name-text">{{ props.name }}</span>
+      </div>
+      <dao-tag>aaa</dao-tag>
+    </div>
+    <div class="chat-markdown">
+      <ComparisonChatMarkdown />
+    </div>
+    <div class="comparison-chat-item-container-footer">
+      <div class="footer-item">
+        <div>16.3s</div>
+        <div class="footer-item-label">
+          {{ t('views.InferenceApplication.compare.elapsedTime') }}
+        </div>
+      </div>
+      <div class="footer-item">
+        <div>100.0</div>
+        <div class="footer-item-label">
+          {{ t('views.InferenceApplication.compare.tokensTotalQuantity') }}
+        </div>
+      </div>
+      <div class="footer-item">
+        <div>22.3</div>
+        <div class="footer-item-label">
+          {{ t('views.InferenceApplication.compare.perSecond') }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.comparison-chat-item-container {
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .app-name {
+      display: flex;
+      align-items: center;
+      font-weight: 500;
+      color: var(--dao-icon-primary);
+
+      &-text {
+        margin-left: 4px;
+      }
+    }
+  }
+
+  .chat-markdown {
+    min-height: 200px;
+    margin: 16px 0;
+    border: 1px solid var(--dao-gray-blue-050);
+    border-radius: 5px;
+  }
+
+  &-footer{
+    display: flex;
+    justify-content: flex-end;
+
+    .footer-item {
+      line-height: 20px;
+
+      &:not(:last-child) {
+        margin-right: 20px;
+      }
+
+      &-label{
+        font-weight: 400;
+        color: var(--dao-gray-090);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/inference-application/components/comparison-chat-markdown.vue b/src/views/inference-application/components/comparison-chat-markdown.vue
new file mode 100644
index 0000000..ea4d708
--- /dev/null
+++ b/src/views/inference-application/components/comparison-chat-markdown.vue
@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import showdown from 'showdown';
+
+const transformMsg = (msgInfo:string) => {
+  const converter = new showdown.Converter();
+
+  return converter.makeHtml(msgInfo);
+};
+</script>
+<!-- eslint-disable vue/no-v-html -->
+<template>
+  <!-- eslint-disable-next-line vue/html-self-closing -->
+  <div
+    class="markdown-viewer"
+    v-html="transformMsg('bbbbbb')"
+  ></div>
+</template>
+<style lang="scss" scoped>
+// .markdown-viewer {
+  //
+
+// }
+</style>
diff --git a/src/views/inference-application/components/comparison-chat-textarea.vue b/src/views/inference-application/components/comparison-chat-textarea.vue
new file mode 100644
index 0000000..25b0c7a
--- /dev/null
+++ b/src/views/inference-application/components/comparison-chat-textarea.vue
@@ -0,0 +1,86 @@
+<script lang="ts" setup>
+const { t } = useI18n();
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  maxlength: {
+    type: Number,
+    default: 100,
+  },
+  rows: {
+    type: Number,
+    default: 3,
+  },
+});
+const chatInput = ref<string>('');
+
+const chatInputLength = computed(() => chatInput.value.length);
+
+</script>
+
+<template>
+  <div class="dao-textarea-container">
+    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
+    <textarea
+      v-model="chatInput"
+      class="dao-textarea"
+      :rows="props.rows"
+      :maxlength="props.maxlength"
+      :placeholder="props.placeholder"
+    />
+    <div class="dao-textarea-footer">
+      {{ `${chatInputLength}/${props.maxlength}` }}
+      <!-- <dao-action-icon
+      name="icon-slim-check"
+      class="dao-textarea-footer-icon"
+      size="xs"
+      type="button"
+    /> -->
+      <div class="dao-textarea-footer-button">
+        {{ t('views.InferenceApplication.compare.send') }}
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.dao-textarea-container {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  vertical-align: bottom;
+  background-color: var(--dao-gray-blue-090);
+  border-radius: 3px;
+
+  .dao-textarea {
+    position: relative;
+    width: 100%;
+    resize: vertical;
+    background-color: var(--dao-gray-blue-090);
+    border-color: var(--dao-gray-blue-050);
+
+    &-footer {
+      position: absolute;
+      right: 10px;
+      bottom: 6px;
+      display: flex;
+      align-items: center;
+      padding: 2px 4px;
+      font-size: 12px;
+      line-height: 14px;
+      color: var(--dao-gray-090);
+      background: rgb(241 243 246 / 76%);
+      backdrop-filter: blur(4px);
+      border-radius: 4px;
+
+      &-button {
+        margin-left: 6px;
+        cursor: pointer;
+      }
+    }
+  }
+
+}
+</style>