|
|
@@ -1,217 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="model-body">
|
|
|
- <div class="body-item">
|
|
|
- <div class="item-title">
|
|
|
- <div class="title">{{ $t('management.addedModel') }}</div>
|
|
|
- <div class="icon" @click="changeStatusAdd">
|
|
|
- <template v-if="added_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
|
|
|
- <template v-if="!added_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
|
|
|
- <div v-if="added_show_status">
|
|
|
- <ModelList v-for="item in added_data" :key="item.id" :model_item="item" @showMore="showMoreModel"></ModelList>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- <div class="body-item">
|
|
|
- <div class="item-title">
|
|
|
- <div class="title">{{ $t('management.unaddModel') }}</div>
|
|
|
- <div class="icon" @click="changeStatusUnAdd">
|
|
|
- <template v-if="unadd_show_status"> {{ $t('management.upBtn') }} <icon-up /> </template>
|
|
|
- <template v-if="!unadd_show_status"> {{ $t('management.downBtn') }} <icon-down /> </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <transition name="expand-collapse" @before-enter="beforeEnter" @enter="enter" @leave="leave">
|
|
|
- <div v-if="unadd_show_status" class="card-list">
|
|
|
- <CardItem v-for="item in un_added_data" :key="item.id" :name="item.name" :img_src="item.img_src" is_model>
|
|
|
- <template #labels>
|
|
|
- <div class="labels">{{ item.keyword }}</div>
|
|
|
- </template>
|
|
|
- <template #description>
|
|
|
- <div class="desc">{{ item.desc }}</div>
|
|
|
- </template>
|
|
|
- <template #bottom>
|
|
|
- <a-button>
|
|
|
- <template #icon> <icon-plus /> </template>{{ $t('management.addModelBtn') }}</a-button
|
|
|
- ></template
|
|
|
- >
|
|
|
- </CardItem>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { ref } from 'vue';
|
|
|
-import ModelList from './ModelList.vue';
|
|
|
-import CardItem from '../../views/manage/CardItem.vue';
|
|
|
-import { useCollapse } from './use-collapse';
|
|
|
-
|
|
|
-const { beforeEnter, enter, leave } = useCollapse(1000);
|
|
|
-
|
|
|
-const added_data = ref([
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- name: 'OpenAl-APl-Compatible',
|
|
|
- desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION ',
|
|
|
- img_src: 'modelFrame1',
|
|
|
- show_more: false,
|
|
|
- models: [
|
|
|
- {
|
|
|
- id: '1-1',
|
|
|
- name: 'qwen-2.5-72b-instruct OpenAl-APl'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '1-2',
|
|
|
- name: 'qwen-2.5-72b-instruct-gptq-int4 OpenAI-API'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- name: 'Tongyi-Qianwen',
|
|
|
- desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION',
|
|
|
- img_src: 'modelFrame2',
|
|
|
- show_more: false,
|
|
|
- models: [
|
|
|
- {
|
|
|
- id: '2-1',
|
|
|
- name: 'qwen-plus'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2-2',
|
|
|
- name: 'qwen-turbo'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2-3',
|
|
|
- name: 'qwen-vl-plus'
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- {
|
|
|
- id: '3',
|
|
|
- name: 'Xinference',
|
|
|
- desc: 'LLM,TEXT EMBEDDING,SPEECH2TEXT,MODERATION,TEXT RE-RANK',
|
|
|
- img_src: 'modelFrame3',
|
|
|
- show_more: false,
|
|
|
- models: [
|
|
|
- {
|
|
|
- id: '3-1',
|
|
|
- name: 'basic-bge-large-zh-v1.5'
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
-]);
|
|
|
-const un_added_data = ref([
|
|
|
- {
|
|
|
- id: '1',
|
|
|
- name: 'OpenAl',
|
|
|
- keyword: 'LLM,TEXT',
|
|
|
- desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
|
|
|
- img_src: 'modelFrame4'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '2',
|
|
|
- name: 'Moonshot',
|
|
|
- keyword: 'LLM,TEXT EMBEDDING',
|
|
|
- desc: '',
|
|
|
- img_src: 'modelFrame5'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '3',
|
|
|
- name: 'ZHIPU-AI',
|
|
|
- keyword: 'LLM,TEXT',
|
|
|
- desc: 'EMBEDDING,SPEECH2TEXT,MODERATION',
|
|
|
- img_src: 'modelFrame6'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '4',
|
|
|
- name: 'BaiChuan',
|
|
|
- keyword: 'LLM,TEXT EMBEDDING',
|
|
|
- desc: '',
|
|
|
- img_src: 'modelFrame7'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '5',
|
|
|
- name: 'DeepSeek',
|
|
|
- keyword: 'LLM',
|
|
|
- desc: '',
|
|
|
- img_src: 'modelFrame8'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '6',
|
|
|
- name: 'Mistral',
|
|
|
- keyword: 'LLM,TEXT EMBEDDING',
|
|
|
- desc: '',
|
|
|
- img_src: 'modelFrame9'
|
|
|
- },
|
|
|
- {
|
|
|
- id: '7',
|
|
|
- name: 'StepFun',
|
|
|
- keyword: 'LLM',
|
|
|
- desc: '',
|
|
|
- img_src: 'modelFrame10'
|
|
|
- }
|
|
|
-]);
|
|
|
-// 展开收起状态
|
|
|
-const added_show_status = ref(true);
|
|
|
-const unadd_show_status = ref(true);
|
|
|
-
|
|
|
-const changeStatusAdd = () => {
|
|
|
- added_show_status.value = !added_show_status.value;
|
|
|
- if (!added_show_status.value) {
|
|
|
- added_data.value.forEach((item) => {
|
|
|
- item.show_more = false;
|
|
|
- });
|
|
|
- }
|
|
|
-};
|
|
|
-const changeStatusUnAdd = () => {
|
|
|
- unadd_show_status.value = !unadd_show_status.value;
|
|
|
-};
|
|
|
-
|
|
|
-const showMoreModel = (item) => {
|
|
|
- const index = added_data.value.findIndex((u) => u.id === item.id);
|
|
|
- if (index !== -1) {
|
|
|
- added_data.value[index].show_more = !added_data.value[index].show_more;
|
|
|
- }
|
|
|
-};
|
|
|
-</script>
|
|
|
-<style scoped lang="css">
|
|
|
-.model-body {
|
|
|
- height: calc(100% - 80px);
|
|
|
- overflow-y: auto;
|
|
|
-}
|
|
|
-.model-body::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
-}
|
|
|
-.body-item {
|
|
|
- margin-bottom: 50px;
|
|
|
-}
|
|
|
-
|
|
|
-.item-title {
|
|
|
- display: flex;
|
|
|
- flex-direction: row;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 20px;
|
|
|
- cursor: pointer;
|
|
|
-}
|
|
|
-.title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: var(--color-text-1);
|
|
|
-}
|
|
|
-.card-list {
|
|
|
- display: grid;
|
|
|
- grid-template-columns: repeat(5, 1fr);
|
|
|
- gap: 20px;
|
|
|
- transition: all 0.3s ease;
|
|
|
- .labels {
|
|
|
- color: var(--color-text-3);
|
|
|
- }
|
|
|
- .desc {
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|