Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 8af03e3

Browse files
committed
feat: 请求封装
1 parent 283d4c7 commit 8af03e3

File tree

10 files changed

+186
-130
lines changed

10 files changed

+186
-130
lines changed

‎index.html

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/Coffee.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Vue + TS</title>
7+
<!-- <title>Creativity</title> -->
8+
<title>Build With Curiosity</title>
89
</head>
910
<body>
1011
<div id="app"></div>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@types/uuid": "^9.0.1",
1818
"@vitejs/plugin-vue": "^4.1.0",
1919
"autoprefixer": "^10.4.14",
20+
"axios": "^1.4.0",
2021
"postcss": "^8.4.24",
2122
"tailwindcss": "^3.3.2",
2223
"typescript": "^5.0.2",

‎public/Coffee.svg

Lines changed: 1 addition & 0 deletions
Loading[フレーム]

‎src/DrawPanel.vue

Lines changed: 32 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
11
<script setup lang="ts">
22
import { reactive, ref, onMounted } from 'vue';
3-
import { Message } from './interfaces/message'
3+
import { Message, MessageStatus } from './interfaces/message'
44
import MessageItem from './Message.vue'
5-
import { getMessagesCache, setMessagesCache } from './utils/storage'
65
import * as uuid from 'uuid'
7-
import { ImagineAPI, UpscaleAPI } from './api/midjourney'
6+
import { getMessagesAPI, createMessageAPI, upscaleMessageAPI } from './api/midjourney'
87
98
const contentWrap = ref<HTMLDivElement>()
109
const data = reactive<{
1110
messages: Message[],
1211
prompt: string
1312
}>({
1413
prompt: '',
15-
messages: getMessagesCache() asMessage[]
14+
messages: []
1615
})
1716
1817
const onClickSend = () => {
@@ -25,100 +24,52 @@ const onKeyDown = (event: Event) => {
2524
sendPrompt()
2625
}
2726
28-
const sendPrompt = () => {
27+
const getList = () => {
28+
getMessagesAPI().then((resData) => {
29+
data.messages = resData as any;
30+
scrollToBottom()
31+
})
32+
}
33+
34+
const sendPrompt = async () => {
2935
data.prompt = data.prompt.trim()
3036
if (!data.prompt) return
37+
const msgId = await createMessageAPI(data.prompt) as any;
38+
console.log("msgId: ", msgId)
3139
const msgObj: Message = {
3240
prompt: data.prompt,
3341
createTime: Date.now(),
3442
uri: "",
35-
uuid: uuid.v1()
43+
id: msgId
3644
}
37-
console.log(msgObj.uuid);
38-
45+
3946
data.messages.push(msgObj)
4047
data.prompt = ''
41-
createImagine(msgObj)
4248
scrollToBottom()
43-
setMessagesCache(data.messages)
44-
45-
}
46-
47-
const findOneAndUpdate = (uuid: string, msg: Partial<Message>) => {
48-
if (!uuid) {
49-
return
50-
}
51-
const index = data.messages.findIndex(item => item.uuid === uuid)
52-
if (index === -1) {
53-
return
54-
}
55-
const target: Message = data.messages[index]
56-
Object.keys(msg).forEach((key: string) => {
57-
const value = msg[key as keyof Message]
58-
target[key] = value
59-
})
60-
}
61-
62-
const createImagine = (msg: Message) => {
63-
const { uuid } = msg
64-
if (!uuid) return
65-
ImagineAPI(JSON.stringify({ prompt: msg.prompt }), (resData) => {
66-
findOneAndUpdate(uuid, {
67-
...resData,
68-
msgId: resData.id,
69-
msgHash: resData.hash
70-
})
71-
if (resData && resData.progress === 'done') {
72-
findOneAndUpdate(uuid, {
73-
done: true,
74-
msgId: resData.id,
75-
msgHash: resData.hash
76-
})
77-
}
78-
})
79-
setMessagesCache(data.messages)
8049
}
8150
82-
const onUpscale = (msg: Message) => {
51+
const onUpscale = async(msg: Message) => {
8352
const { index, msgId, msgHash, prompt } = msg
8453
console.log('upscale: ', msg)
8554
if (!msgHash || !msgId || !index || !prompt) {
86-
return
55+
returnconsole.log('upscale消息体不完整')
8756
}
88-
89-
const id = uuid.v1()
90-
const newMsg: Message = {
91-
uuid: id,
57+
58+
const newId = await upscaleMessageAPI({
9259
prompt,
9360
index,
94-
createTime: Date.now(),
95-
generateText: `生成第 ${index} 张图片(Upscale)`,
61+
msgHash,
62+
msgId
63+
}) as any;
64+
console.log("newId: ", newId);
65+
const newMsg: Message = {
66+
id: newId,
67+
prompt: data.prompt,
68+
index,
69+
status: MessageStatus.START,
9670
}
97-
9871
data.messages.push(newMsg)
99-
setMessagesCache(data.messages)
10072
scrollToBottom()
101-
102-
UpscaleAPI({
103-
index,
104-
msgHash,
105-
msgId,
106-
prompt
107-
}, (resData) => {
108-
findOneAndUpdate(id, {
109-
...resData,
110-
msgId: resData.id,
111-
msgHash: resData.hash
112-
})
113-
if (resData && resData.progress === 'done') {
114-
findOneAndUpdate(id, {
115-
done: true,
116-
msgId: resData.id,
117-
msgHash: resData.hash
118-
})
119-
}
120-
setMessagesCache(data.messages)
121-
})
12273
}
12374
12475
const scrollToBottom = () => {
@@ -131,19 +82,20 @@ const scrollToBottom = () => {
13182
13283
onMounted(() => {
13384
scrollToBottom()
85+
getList()
13486
})
13587
13688
</script>
13789

13890
<template>
139-
<div class="h-full py-4">
140-
<div class="relative h-full max-w-[980px] m-auto bg-gray-600 text-white px-10 py-4 rounded-xl">
91+
<div class="h-full py-4 max-sm:py-0">
92+
<div class="relative h-full max-w-[980px] m-auto bg-gray-600 text-white px-10 py-4 rounded-lg sm:py-0 max-sm:py-2 max-sm:px-4">
14193
<div id="contentWrap" ref="contentWrap" class="h-full pb-[120px] overflow-auto m-auto">
14294
<div class="border-b-2 border-purple-400" v-for="(item, index) in data.messages" :key="index">
14395
<MessageItem :message="item" @on-upscale="onUpscale" />
14496
</div>
14597
</div>
146-
<div class="absolute left-10 right-10 bottom-6 flex-row items-center justify-between px-2 py-2 bg-gray-100 border-gray-400 rounded-[4px]">
98+
<div class="absolute left-10 right-10 max-sm:left-2 max-sm:right-2 bottom-4 max-sm:bottom-2 flex-row items-center justify-between px-2 py-2 bg-gray-100 border-gray-400 rounded-[4px]">
14799
<!-- 快捷/帮助区域 -->
148100
<div class="flex w-full pb-1 text-sm">
149101
<p class="underline text-orange-400 pr-1 cursor-pointer">垫图</p>

‎src/Message.vue

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import { Message } from './interfaces/message';
2+
import { Message, MessageStatus } from './interfaces/message';
33
import { copyString } from './utils/clipboard';
44
import Tag from './components/Tag.vue';
55
@@ -25,29 +25,41 @@ const onClickUV = (index: number) => {
2525
index
2626
})
2727
}
28+
29+
const getMessageStatus = (status: number) => {
30+
switch (status) {
31+
case MessageStatus.INIT:
32+
return '排队中'
33+
case MessageStatus.START:
34+
return '绘制中'
35+
case MessageStatus.DONE:
36+
return '已完成'
37+
case MessageStatus.TIMEOUT:
38+
return '已超时'
39+
}
40+
}
2841
</script>
2942

3043
<template>
3144
<div class="flex max-w-[500px] py-4">
32-
<div class="w-[50px] h-[50px] mr-4 rounded-full bg-gray-300"></div>
45+
<div class="w-[50px] h-[50px] mr-4 rounded-full bg-gray-300 max-sm:w-[35px] max-sm:h-[35px]"></div>
3346
<div class="flex-col flex-1">
34-
<div v-if="message?.generateText">{{ message?.generateText }}</div>
35-
<div class="flex flex-row w-full items-start">
47+
<div v-if="message?.index">升级第 {{ message?.index }} 张图片</div>
48+
<div class="flex flex-row w-full items-start"v-if="message.prompt">
3649
<div class="flex-1 leading-relaxed font-bold break-all mr-1">{{ message?.prompt }}</div>
3750
<div @click.stop="clickToCopy(message?.prompt!)" class="text-sm px-2 py-1 border-orange-400 bg-orange-400 cursor-pointer text-white border rounded">复制咒语</div>
3851
</div>
39-
<div class="text-sm text-slate-300 pt-1">状态:{{ message?.done ? '已完成' : '进行中' }}</div>
52+
<div class="text-sm text-slate-300 pt-1">状态:{{ getMessageStatus(message.status) }}</div>
4053
<div class="text-sm text-slate-300">时间:{{ message?.createTime ? getTimeStr(message?.createTime) : '2023年6月2日 下午6:06:32' }}</div>
4154
<div v-if="!message?.uri" class="flex flex-col items-center mt-2 p-4 bg-[#999] w-[140px] h-[140px] rounded-lg justify-center">
42-
<!-- <img class="block w-[100px]" src="/src/assets/image.png" alt=""> -->
4355
<img class="block w-[50px]" src="/src/assets/image.png" alt="">
4456
<p class="pt-4 text-sm">正在排队生成中</p>
4557
</div>
4658
<div v-else class="flex-col w-full mt-2">
4759
<img class="block" :src="message.uri" alt="">
4860
</div>
4961
<!-- upscale area -->
50-
<div v-if="message?.done && !message.index">
62+
<div v-if="message?.status == MessageStatus.DONE && !message.index">
5163
<Tag text="U1" @click="onClickUV(1)" />
5264
<Tag text="U2" @click="onClickUV(2)" />
5365
<Tag text="U3" @click="onClickUV(3)" />

‎src/api/midjourney.ts

Lines changed: 26 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,27 @@
1-
const host = "http://43.153.50.34:8999"
2-
// const host = "http://localhost:8999"
1+
import { $http, host } from '../utils/axios'
2+
interface IUpscaleAPI {
3+
prompt: string
4+
msgHash: string
5+
msgId: string
6+
index: number
7+
}
8+
9+
export const getMessagesAPI = (params?: any) => {
10+
return $http.get('/list', {
11+
params
12+
})
13+
}
14+
15+
export const createMessageAPI = (prompt: string) => {
16+
return $http.post('/imagine', {
17+
prompt
18+
})
19+
}
20+
21+
export const upscaleMessageAPI = (body: IUpscaleAPI) => {
22+
return $http.post('/upscale', body)
23+
}
24+
325

426
const decoder = () => {
527
const encoder = new TextEncoder();
@@ -68,45 +90,11 @@ const streamFetch = async (url: string, body: string, loadingHandler?: LoadingHa
6890
}
6991
}
7092

71-
export const ImagineAPI = (body: string,loadingHandler: LoadingHandle) => {
72-
return streamFetch("/api/imagine", body,loadingHandler)
93+
export const ImagineAPI = (body) => {
94+
return streamFetch("/api/imagine", body)
7395
}
7496

7597

76-
interface IUpscaleAPI {
77-
prompt: string
78-
msgHash: string
79-
msgId: string
80-
index: number
81-
}
8298
export const UpscaleAPI = (body: IUpscaleAPI, loadingHandler?: LoadingHandle) => {
83-
// export const UpscaleAPI = (body: string, loadingHandler: LoadingHandle) => {
8499
return streamFetch("/api/upscale", JSON.stringify(body), loadingHandler)
85100
}
86-
87-
export const createImagineTask = () => {
88-
ImagineAPI(JSON.stringify({ prompt: "a cute girl" }), (data) => {
89-
console.log("data: ", data)
90-
if (data && data.uri) {
91-
}
92-
if (data && data.progress === 'done') {
93-
console.log('绘画完成')
94-
}
95-
})
96-
}
97-
98-
export const createUpscaleTask = () => {
99-
// UpscaleAPI(JSON.stringify({
100-
// prompt: "a cute girl",
101-
// msgHash: "7369e1c1-fc43-40b3-bc84-b4a216a3c83a",
102-
// msgId: "1113817853808885831",
103-
// index: 1
104-
// }), (data) => {
105-
// console.log("data: ", data)
106-
// if (data && data.uri) {
107-
// }
108-
// if (data && data.progress === 'done') {
109-
// console.log('upscale完成')
110-
// }
111-
// })
112-
}

‎src/interfaces/message.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,20 @@
11
export interface Message {
2+
id: string
23
prompt: string
3-
uuid?: string
44
done?: boolean
55
uri?: string
66
msgId?: string
77
msgHash?: string
88
index?: number
9-
status?: string
9+
status?: number
1010
createTime?: string | number
1111
// 生成描述,比如我是upscale第四张
1212
generateText?: string
13+
}
14+
15+
export enum MessageStatus {
16+
INIT = 10,
17+
START = 11,
18+
DONE = 12,
19+
TIMEOUT = 13,
1320
}

‎src/styles/common.css

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,21 @@ body, html {
99

1010
#app {
1111
height: 100%;
12-
}
12+
}
13+
14+
15+
/*滚动条样式*/
16+
::-webkit-scrollbar {/*滚动条整体样式*/
17+
width: 0px; /*高宽分别对应横竖滚动条的尺寸*/
18+
height: 4px;
19+
}
20+
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
21+
border-radius: 5px;
22+
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
23+
background: rgba(0,0,0,0.2);
24+
}
25+
::-webkit-scrollbar-track {/*滚动条里面轨道*/
26+
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
27+
border-radius: 0;
28+
background: rgba(0,0,0,0.1);
29+
}

‎src/utils/axios.ts

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import axios from 'axios'
2+
3+
// export const host = "http://localhost:8999";
4+
export const host = "http://43.153.50.34:8999";
5+
6+
export const $http = axios.create({
7+
baseURL: host + '/api'
8+
});
9+
10+
$http.interceptors.response.use(function onFulfilled(value) {
11+
if ([200, 201].includes(value.status)) {
12+
return value.data;
13+
}
14+
return value;
15+
}, function onRejected(error) {
16+
console.log(error);
17+
})
18+
19+
20+
export default $http;

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /