Skip to content

Commit f3ed26f

Browse files
coder-settcoder-sett
committed
1
1 parent 9409bfe commit f3ed26f

30 files changed

+1455
-46
lines changed

‎components.d.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,22 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10+
BotBattle: typeof import('./src/components/Bot/BotBattle.vue')['default']
11+
Compare: typeof import('./src/components/Bot/Compare.vue')['default']
12+
copy: typeof import('./src/components/Header copy/index.vue')['default']
1013
ElButton: typeof import('element-plus/es')['ElButton']
14+
ElCarousel: typeof import('element-plus/es')['ElCarousel']
15+
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
1116
ElIcon: typeof import('element-plus/es')['ElIcon']
1217
ElInput: typeof import('element-plus/es')['ElInput']
1318
ElOption: typeof import('element-plus/es')['ElOption']
1419
ElSelect: typeof import('element-plus/es')['ElSelect']
1520
ElTabPane: typeof import('element-plus/es')['ElTabPane']
1621
ElTabs: typeof import('element-plus/es')['ElTabs']
22+
Footer: typeof import('./src/components/Footer/index.vue')['default']
23+
Header: typeof import('./src/components/Header/index.vue')['default']
1724
Message: typeof import('./src/components/Message/index.vue')['default']
25+
MessageBox: typeof import('./src/components/Bot/MessageBox.vue')['default']
1826
RouterLink: typeof import('vue-router')['RouterLink']
1927
RouterView: typeof import('vue-router')['RouterView']
2028
Text: typeof import('./src/components/Message/Text.vue')['default']

‎package.json

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,9 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@traptitech/markdown-it-katex": "^3.6.0",
1211
"@element-plus/icons-vue": "^2.1.0",
12+
"@icon-park/vue-next": "^1.4.2",
13+
"@traptitech/markdown-it-katex": "^3.6.0",
1314
"@vueuse/core": "^9.13.0",
1415
"element-plus": "^2.3.14",
1516
"highlight.js": "^11.7.0",
@@ -21,11 +22,11 @@
2122
},
2223
"devDependencies": {
2324
"@antfu/eslint-config": "^0.35.3",
24-
"@types/node": "^18.14.6",
25-
"@vitejs/plugin-vue": "^4.2.3",
2625
"@types/katex": "^0.16.0",
2726
"@types/markdown-it": "^12.2.3",
2827
"@types/markdown-it-link-attributes": "^3.0.1",
28+
"@types/node": "^18.14.6",
29+
"@vitejs/plugin-vue": "^4.2.3",
2930
"autoprefixer": "^10.4.16",
3031
"axios": "^1.3.4",
3132
"eslint": "^8.35.0",

‎pnpm-lock.yaml

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,9 @@ import { ref } from "vue"
66
</script>
77

88
<template>
9-
<ElConfigProvider size="large">
10-
<Main msg="Vite + Vue" />
9+
<ElConfigProvider>
10+
<!-- <Main /> -->
11+
<RouterView />
1112
</ElConfigProvider>
1213
</template>
1314

‎src/components/Bot/BotBattle.vue

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
<script setup lang="ts">
2+
import { ref, created, onMounted, computed } from "vue"
3+
import { Refresh, CircleClose, Delete } from "@element-plus/icons-vue"
4+
import { fetchBotList, fetchChatAPIProcess } from "@/api"
5+
import Compare from "@/components/Bot/Compare.vue"
6+
import MessageBox from "@/components/Bot/MessageBox.vue"
7+
import Message from "@/components/Message/index.vue"
8+
import { useCompareStore } from "@/store"
9+
import { useChatStore } from "@/store"
10+
11+
interface Chat {
12+
dateTime: string
13+
text: string
14+
inversion?: boolean
15+
error?: boolean
16+
loading?: boolean
17+
conversationOptions?: null
18+
requestOptions: { prompt: string; options?: null }
19+
}
20+
const compareStore = useCompareStore()
21+
const chatStore = useChatStore()
22+
23+
const compareList = computed(() => compareStore.CompareList)
24+
const loading = ref<boolean>(false)
25+
const prompt = ref<string>("")
26+
const botList = ref<any>([])
27+
const showName = ref<boolean>(false)
28+
const showBtn = ref<boolean>(false)
29+
30+
let controllerList = []
31+
let prePrompt = ""
32+
33+
function getRandomElements(arr: any[], count: number) {
34+
const shuffled = arr.sort(() => Math.random() - 0.5)
35+
return shuffled.slice(0, count)
36+
}
37+
const init = async () => {
38+
try {
39+
loading.value = true
40+
const { data } = await fetchBotList()
41+
botList.value = data
42+
loading.value = false
43+
const list = getRandomElements(botList.value, 2)
44+
} catch (err) {
45+
console.log(err)
46+
} finally {
47+
loading.value = false
48+
}
49+
}
50+
const buttonDisabled = computed(() => {
51+
return loading.value || !prompt.value || prompt.value.trim() === ""
52+
})
53+
54+
const addChat = (obj: Chat, name: string) => {
55+
chatStore.addChatByName(name, obj)
56+
}
57+
const updateChat = (obj: Chat, name: string) => {
58+
chatStore.updateChatByName(name, obj)
59+
}
60+
61+
const fetchChatAPIOnce = async (
62+
model: string,
63+
message,
64+
controller: { signal: any } | undefined
65+
) => {
66+
return await fetchChatAPIProcess({
67+
model: model,
68+
prompt: message,
69+
signal: controller?.signal,
70+
onDownloadProgress: ({ event }) => {
71+
const xhr = event.target
72+
// console.log(xhr)
73+
const { responseText } = xhr
74+
const list = responseText.split("data:")
75+
list.shift()
76+
const text = list.map((item: string) => JSON.parse(item).choices[0].delta.content).join("")
77+
try {
78+
updateChat(
79+
{
80+
dateTime: new Date().toLocaleString(),
81+
text: text,
82+
inversion: false,
83+
error: false,
84+
loading: false,
85+
conversationOptions: null,
86+
requestOptions: { prompt: message, options: null },
87+
},
88+
model
89+
)
90+
} catch (error) {
91+
console.log(error)
92+
//
93+
}
94+
},
95+
})
96+
}
97+
const handleSubmit = async () => {
98+
let message = prompt.value
99+
prePrompt = prompt.value
100+
if (loading.value) return
101+
102+
if (!prePrompt || prePrompt.trim() === "") return
103+
loading.value = true
104+
105+
const promiseList = []
106+
const botList = []
107+
controllerList = []
108+
109+
compareList.value.forEach((element) => {
110+
addChat(
111+
{
112+
dateTime: new Date().toLocaleString(),
113+
text: prePrompt,
114+
inversion: true,
115+
error: false,
116+
conversationOptions: null,
117+
requestOptions: { prompt: prePrompt, options: null },
118+
},
119+
element.name
120+
)
121+
addChat(
122+
{
123+
dateTime: new Date().toLocaleString(),
124+
text: "",
125+
loading: true,
126+
inversion: false,
127+
error: false,
128+
conversationOptions: null,
129+
requestOptions: { prompt: prePrompt, options: null },
130+
},
131+
element.name
132+
)
133+
botList.push(element.name)
134+
let controller = new AbortController()
135+
controllerList.push(controller)
136+
promiseList.push(fetchChatAPIOnce(element.name, prePrompt, controller))
137+
})
138+
139+
try {
140+
const resultList = await Promise.allSettled(promiseList)
141+
resultList.forEach((item, index) => {
142+
if (item.status === "rejected") {
143+
updateChat(
144+
{
145+
dateTime: new Date().toLocaleString(),
146+
text: item.reason.message ?? "出错了",
147+
inversion: false,
148+
error: true,
149+
loading: false,
150+
conversationOptions: null,
151+
requestOptions: { prompt: prePrompt, options: null },
152+
},
153+
botList[index]
154+
)
155+
}
156+
})
157+
158+
showBtn.value = true
159+
} catch (error: any) {
160+
const errorMessage = error?.message ?? "出错了"
161+
console.log(errorMessage, error)
162+
} finally {
163+
loading.value = false
164+
}
165+
prompt.value = ""
166+
}
167+
168+
const handleEnter = (event: KeyboardEvent) => {
169+
if (event.key === "Enter" && !event.shiftKey) {
170+
event.preventDefault()
171+
handleSubmit()
172+
}
173+
}
174+
const handleDelete = () => {
175+
chatStore.clearChat()
176+
showBtn.value = false
177+
prePrompt = ""
178+
}
179+
const handleRegenerate = async () => {
180+
console.log(prePrompt)
181+
if (loading.value || prePrompt == "") return
182+
loading.value = true
183+
const promiseList = []
184+
const botList = []
185+
controllerList = []
186+
let message = prePrompt
187+
console.log(message)
188+
compareList.value.forEach((element) => {
189+
addChat(
190+
{
191+
dateTime: new Date().toLocaleString(),
192+
text: message,
193+
inversion: true,
194+
error: false,
195+
conversationOptions: null,
196+
requestOptions: { prompt: message, options: null },
197+
},
198+
element.name
199+
)
200+
addChat(
201+
{
202+
dateTime: new Date().toLocaleString(),
203+
text: "",
204+
loading: true,
205+
inversion: false,
206+
error: false,
207+
conversationOptions: null,
208+
requestOptions: { prompt: message, options: null },
209+
},
210+
element.name
211+
)
212+
botList.push(element.name)
213+
let controller = new AbortController()
214+
controllerList.push(controller)
215+
promiseList.push(fetchChatAPIOnce(element.name, message, controller))
216+
})
217+
218+
try {
219+
const resultList = await Promise.allSettled(promiseList)
220+
resultList.forEach((item, index) => {
221+
if (item.status === "rejected") {
222+
updateChat(
223+
{
224+
dateTime: new Date().toLocaleString(),
225+
text: item.reason.message ?? "出错了",
226+
inversion: false,
227+
error: true,
228+
loading: false,
229+
conversationOptions: null,
230+
requestOptions: { prompt: message, options: null },
231+
},
232+
botList[index]
233+
)
234+
}
235+
})
236+
showBtn.value = true
237+
} catch (error: any) {
238+
const errorMessage = error?.message ?? "出错了"
239+
console.log(errorMessage, error)
240+
} finally {
241+
loading.value = false
242+
}
243+
prompt.value = ""
244+
}
245+
const handleStop = () => {
246+
if (loading.value) {
247+
controllerList.forEach((item) => {
248+
item?.abort()
249+
})
250+
loading.value = false
251+
}
252+
}
253+
const handleShowName = () => {
254+
showName.value = true
255+
}
256+
257+
onMounted(() => {
258+
// init()
259+
})
260+
</script>
261+
262+
<template>
263+
<div class="w-full mb-4 px-2">
264+
<Compare />
265+
<div class="w-full h-[640px] py-4 flex flex-col">
266+
<div class="flex-1 w-full flex gap-4 h-full">
267+
<MessageBox v-for="item in compareList" :bot="item" />
268+
</div>
269+
</div>
270+
<div v-if="showBtn" class="w-full grid grid-cols-4 gap-4 mt-4">
271+
<el-button class="!ml-0" @click="handleShowName" type="primary">A is better</el-button>
272+
<el-button class="!ml-0" @click="handleShowName" type="primary">B is better</el-button>
273+
<el-button class="!ml-0" @click="handleShowName" type="primary">Tie</el-button>
274+
<el-button class="!ml-0" @click="handleShowName" type="primary">Both are bad</el-button>
275+
</div>
276+
<div class="mt-8 flex items-center justify-between space-x-2">
277+
<el-button size="large" circle :icon="CircleClose" :disabled="!loading" @click="handleStop">
278+
</el-button>
279+
<el-button
280+
size="large"
281+
circle
282+
:icon="Refresh"
283+
:disabled="loading"
284+
@click="handleRegenerate"
285+
></el-button>
286+
<el-button
287+
size="large"
288+
type="danger"
289+
circle
290+
class=""
291+
:icon="Delete"
292+
:disabled="loading"
293+
@click="handleDelete"
294+
></el-button>
295+
296+
<el-input size="large" v-model="prompt" placeholder="" @keypress="handleEnter" />
297+
<el-button
298+
size="large"
299+
class="ml-4"
300+
type="primary"
301+
:disabled="buttonDisabled"
302+
@click="handleSubmit"
303+
>发送</el-button
304+
>
305+
</div>
306+
</div>
307+
</template>
308+
309+
<style scoped>
310+
.my-box {
311+
box-shadow: 0 0 2px #919eab33, 0 4px 24px #919eab24;
312+
}
313+
</style>

0 commit comments

Comments
 (0)