1

Author: coder-sett

src/assets/ChatGPT.png

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, created, onMounted, computed } from "vue"
 import { Refresh, CircleClose, Delete } from "@element-plus/icons-vue"
-import { ThumbsUp, CloseOne } from "@icon-park/vue-next"
+import { ThumbsUp, CloseOne, CommentOne, Comments } from "@icon-park/vue-next"
 import { fetchBotList, fetchChatAPIProcess } from "@/api"
 import Compare from "@/components/Bot/Compare.vue"
 import MessageBox from "@/components/Bot/MessageBox.vue"
@@ -27,6 +27,7 @@ const prompt = ref<string>("")
 const botList = ref<any>([])
 const showName = ref<boolean>(false)
 const showBtn = ref<boolean>(false)
+const isContext = ref<boolean>(false)
 
 let controllerList = []
 let prePrompt = ""
@@ -292,13 +293,35 @@ onMounted(() => {
       <el-tooltip effect="dark" content="清除历史记录" placement="top">
         <el-button
           size="large"
-          type="danger"
           circle
           :icon="Delete"
           :disabled="loading"
           @click="handleDelete"
         ></el-button>
       </el-tooltip>
+      <el-tooltip
+        v-if="isContext"
+        effect="dark"
+        content="当前是多轮对话，点击切换单轮对话"
+        placement="top"
+      >
+        <el-button
+          size="large"
+          circle
+          :icon="Comments"
+          :disabled="loading"
+          @click="isContext = !isContext"
+        ></el-button>
+      </el-tooltip>
+      <el-tooltip v-else effect="dark" content="当前是单轮对话，点击切换多轮对话" placement="top">
+        <el-button
+          size="large"
+          circle
+          :icon="CommentOne"
+          :disabled="loading"
+          @click="isContext = !isContext"
+        ></el-button>
+      </el-tooltip>
 
       <el-input
         class="my-box"
@@ -329,4 +352,7 @@ onMounted(() => {
 .el-input__wrapper:hover {
   /* box-shadow: 0 0 2px #dcdfe6, 0 2px 6px #dcdfe6; */
 }
+.el-icon {
+  font-size: 18px;
+}
 </style>

src/assets/t5.png

@@ -1,18 +1,18 @@
 import { valueEquals } from 'element-plus'; import { log } from 'console';
 <script setup lang="ts">
-import { ref, computed, nextTick } from "vue"
+import { ref, computed, onUnmounted } from "vue"
 import { useCompareStore, useChatStore } from "@/store"
 import { onClickOutside } from "@vueuse/core"
+import { useRoute } from "vue-router"
 
 const compareStore = useCompareStore()
 const chatStore = useChatStore()
 const compareList = computed(() => compareStore.CompareList)
 
 const inputref = ref()
-const activeName = ref("first")
 const isSearch = ref(false)
-const allList = ref(["ChatGPT-3.5", "ChatGPT-4", "vicuna-7b-v1.5", "chatGLM"])
-const searchList2 = ref(["ChatGPT-3.5", "ChatGPT-4", "vicuna-7b-v1.5", "chatGLM"])
+const allList = ref(["ChatGPT-3.5", "T5-3b", "vicuna-7b-v1.5", "chatGLM"])
+const searchList2 = ref(["ChatGPT-3.5", "T5-3b", "vicuna-7b-v1.5", "chatGLM"])
 
 const target = ref(null)
 onClickOutside(target, (event) => (isSearch.value = false))
@@ -31,6 +31,16 @@ const deleteCompare = (name) => {
   compareStore.deleteCompareItem({ name })
   chatStore.deleteSources(name)
 }
+
+const route = useRoute()
+addCompare(route?.query.name || "ChatGPT")
+
+onUnmounted(() => {
+  compareStore.clearCompareList()
+  // compareList.value.forEach((item) => {
+  //   deleteCompare(item.name)
+  // })
+})
 </script>
 
 <template>

src/components/Bot/BotBattle.vue

@@ -7,7 +7,7 @@ export interface CompareStore {
 export const useCompareStore = defineStore("compare-store", {
   state: () => {
     return {
-      CompareList: [{ name: "ChatGPT-3.5" }],
+      CompareList: [],
     }
   },
 
@@ -27,5 +27,8 @@ export const useCompareStore = defineStore("compare-store", {
     getCompareList() {
       return this.$state.CompareList
     },
+    clearCompareList() {
+      this.CompareList = []
+    },
   },
 })

src/components/Bot/Compare.vue

@@ -3,7 +3,10 @@ import { ref } from "vue"
 import type { TabsPaneContext } from "element-plus"
 import Battle from "./Battle.vue"
 import BotBattle from "@/components/Bot/BotBattle.vue"
+import { useRoute } from "vue-router"
 
+const route = useRoute()
+console.log(route.query.name)
 defineProps<{ msg: string }>()
 
 const activeName = ref("first")

src/store/modules/compare/index.ts

@@ -3,15 +3,21 @@ import { ref } from "vue"
 import Header from "@/components/Header/index.vue"
 import Footer from "@/components/Footer/index.vue"
 import { useRouter } from "vue-router"
+import ChatGPT from "@/assets/ChatGPT.png"
+import T5 from "@/assets/t5.png"
 
 const router = useRouter()
 const input = ref("")
-const imgList = ref<any>(["图像识别", "语音识别", "自然语言处理", "推荐系统", "人脸识别"])
-const activeName = ref("图像识别")
+const imgList = ref<any>(["基础大模型", "行业大模型", "领域大模型"])
+const modelList = ref<any>(["ChatGPT", "T5-3b", "ChatGLM", "Other", "Other", "Other"])
+const activeName = ref("基础大模型")
 const img2List = ref<any>([
-  "https://img.jsdesign2.com/assets/img/6455ebf47e26e5aacb2ab830.png#2310fb77ad1762404ab25101fd5ce24b",
+  ChatGPT,
+  T5,
   "https://img.jsdesign2.com/assets/img/6475a9536be6533b8a7441f0.png#ebade77ad960ea0306274202cbfdb640",
   "https://img.jsdesign2.com/assets/img/652ca2e6454393a7d697adb0.png#c349e97700e81fe55284332a6d77cd93",
+  "https://img.jsdesign2.com/assets/img/652ca2e6454393a7d697adb0.png#c349e97700e81fe55284332a6d77cd93",
+  "https://img.jsdesign2.com/assets/img/652ca2e6454393a7d697adb0.png#c349e97700e81fe55284332a6d77cd93",
 ])
 </script>
 
@@ -48,37 +54,18 @@ const img2List = ref<any>([
         <div class="flex-1 ml-10 grid grid-cols-3 gap-6">
           <div
             class="py-2 items-center cursor-pointer"
-            @click="router.push('/modelDetail')"
-            v-for="item in img2List"
+            @click="
+              router.push({
+                path: '/modelDetail',
+                query: {
+                  name: modelList[index],
+                },
+              })
+            "
+            v-for="(item, index) in img2List"
           >
             <div class="rounded-xl overflow-hidden"><img :src="item" /></div>
-            <div class="mt-3 font-bold">智能助手</div>
-            <div class="mt-2 text-sm text-ellipsis whitespace-nowrap overflow-hidden">
-              人工智能助手可以帮助您完成各种任务，提高工作效率
-            </div>
-            <div class="mt-2 text-sm flex">
-              <img
-                class="w-5 h-5 mr-2"
-                src="https://img.jsdesign2.com/assets/element/ai_AheJcMcjCpO/image/c55515821e36c495c64b891645a48b0039c951d6.png"
-              />
-              <img
-                class="w-5 h-5 mr-2"
-                src="https://img.jsdesign2.com/assets/element/ai_AheJcMcjCpO/image/c55515821e36c495c64b891645a48b0039c951d6.png"
-              />
-              <img
-                class="w-5 h-5 mr-2"
-                src="https://img.jsdesign2.com/assets/element/ai_AheJcMcjCpO/image/c55515821e36c495c64b891645a48b0039c951d6.png"
-              />
-              <img
-                class="w-5 h-5 mr-2"
-                src="https://img.jsdesign2.com/assets/element/ai_AheJcMcjCpO/image/c55515821e36c495c64b891645a48b0039c951d6.png"
-              />
-              <div class="ml-4">4星</div>
-            </div>
-          </div>
-          <div class="py-2 items-center cursor-pointer" v-for="item in img2List">
-            <div class="rounded-xl overflow-hidden"><img :src="item" /></div>
-            <div class="mt-3 font-bold">智能助手</div>
+            <div class="mt-3 font-bold">{{ modelList[index] }}</div>
             <div class="mt-2 text-sm text-ellipsis whitespace-nowrap overflow-hidden">
               人工智能助手可以帮助您完成各种任务，提高工作效率
             </div>

src/views/Evaluate.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { ThumbsUp } from "@icon-park/vue-next"
-import { useRouter } from "vue-router"
+import { useRoute, useRouter } from "vue-router"
 import Header from "@/components/Header/index.vue"
 import Footer from "@/components/Footer/index.vue"
 
+const route = useRoute()
 const router = useRouter()
+
 const activeName = ref("first")
 const input = ref("")
+console.log(route.query.name)
+const model = route.query?.name || "ChatGPT"
 </script>
 
 <template>
@@ -17,7 +21,7 @@ const input = ref("")
       <div class="flex">
         <div class="mt-40 flex-1">
           <div class="h-30">
-            <div class="text-4xl font-bold mb-10">AI模型详情</div>
+            <div class="text-4xl font-bold mb-10">{{ model }}</div>
             <div>
               这是一个AI模型点评页面，提供模型介绍、参数、相关产品、用户评价和模型试用等功能模块。
             </div>
@@ -81,9 +85,16 @@ const input = ref("")
           </div>
           <div
             class="bg-[#333] rounded-md w-full mt-10 py-2 text-[#fff] text-center cursor-pointer"
-            @click="router.push('/evaluate')"
+            @click="
+              router.push({
+                path: '/evaluate',
+                query: {
+                  name: model,
+                },
+              })
+            "
           >
-            申请试用
+            立即试用
           </div>
         </div>
       </div>