xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-05 00:33:47 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

websocket api refactor is ready

Browse Source
This commit is contained in:
RockYang
2024-09-29 19:28:47 +08:00
parent 8093a3eeb2
commit 1a1734abf0
19 changed files with 210 additions and 464 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/views/Dalle.vue
View File

@@ -208,7 +208,7 @@ import {Delete, InfoFilled, Picture} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage, ElMessageBox} from "element-plus";
import Clipboard from "clipboard";
import {checkSession, getSystemInfo} from "@/store/cache";
import {checkSession, getClientId, getSystemInfo} from "@/store/cache";
import {useSharedStore} from "@/store/sharedata";
import TaskList from "@/components/TaskList.vue";
import BackTop from "@/components/BackTop.vue";
@@ -240,6 +240,7 @@ const styles = [
{name: "自然", value: "natural"}
]
const params = ref({
client_id: getClientId(),
quality: "standard",
size: "1024x1024",
style: "vivid",
@@ -268,14 +269,24 @@ onMounted(() => {
}).catch(e => {
ElMessage.error("获取系统配置失败：" + e.message)
})
store.addMessageHandler("dall",(data) => {
// 丢弃无关消息
if (data.channel !== "dall" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs()
}
nextTick(() => fetchRunningJobs())
})
})
onUnmounted(() => {
clipboard.value.destroy()
if (socket.value !== null) {
socket.value.close()
socket.value = null
}
})
const initData = () => {
@@ -287,51 +298,10 @@ const initData = () => {
page.value = 0
fetchRunningJobs()
fetchFinishJobs()
connect()
}).catch(() => {
});
}
const socket = ref(null)
const heartbeatHandle = ref(null)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/dall/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
page.value = 0
isOver.value = false
fetchFinishJobs(page.value)
}
nextTick(() => fetchRunningJobs())
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
})
}
const fetchRunningJobs = () => {
if (!isLogin.value) {
return
@@ -391,6 +361,7 @@ const generate = () => {
httpPost("/api/dall/image", params.value).then(() => {
ElMessage.success("任务执行成功！")
power.value -= dallPower.value
fetchRunningJobs()
}).catch(e => {
ElMessage.error("任务执行失败：" + e.message)
})

78
web/src/views/Luma.vue
View File

@@ -55,25 +55,6 @@
<el-container class="video-container" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
<h2 class="h-title">你的作品</h2>
<!-- <el-row :gutter="20" class="videos" v-if="!noData">-->
<!-- <el-col :span="8" class="item" :key="item.id" v-for="item in videos">-->
<!-- <div class="video-box" @mouseover="item.playing = true" @mouseout="item.playing = false">-->
<!-- <img :src="item.cover" :alt="item.name" v-show="!item.playing"/>-->
<!-- <video :src="item.url" preload="auto" :autoplay="true" loop="loop" muted="muted" v-show="item.playing">-->
<!-- 您的浏览器不支持视频播放-->
<!-- </video>-->
<!-- </div>-->
<!-- <div class="video-name">{{item.name}}</div>-->
<!-- <div class="opts">-->
<!-- <button class="btn" @click="download(item)" :disabled="item.downloading">-->
<!-- <i class="iconfont icon-download" v-if="!item.downloading"></i>-->
<!-- <el-image src="/images/loading.gif" fit="cover" v-else />-->
<!-- <span>下载</span>-->
<!-- </button>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<div class="list-box" v-if="!noData">
<div v-for="item in list" :key="item.id">
<div class="item">
@@ -153,13 +134,14 @@
import {onMounted, reactive, ref} from "vue";
import {CircleCloseFilled} from "@element-plus/icons-vue";
import {httpDownload, httpPost, httpGet} from "@/utils/http";
import {checkSession} from "@/store/cache";
import {checkSession, getClientId} from "@/store/cache";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import { replaceImg } from "@/utils/libs"
import {ElMessage, ElMessageBox} from "element-plus";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import Generating from "@/components/ui/Generating.vue";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import {useSharedStore} from "@/store/sharedata";
const showDialog = ref(false)
const currentVideoUrl = ref('')
@@ -167,6 +149,7 @@ const row = ref(1)
const images = ref([])
const formData = reactive({
client_id: getClientId(),
prompt: '',
expand_prompt: false,
loop: false,
@@ -174,49 +157,22 @@ const formData = reactive({
end_frame_img: ''
})
const socket = ref(null)
const userId = ref(0)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/video/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
if (message === "FINISH" || message === "FAIL") {
fetchData()
}
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
onMounted(()=>{
checkSession().then(user => {
userId.value = user.id
connect()
checkSession().then(() => {
fetchData(1)
})
store.addMessageHandler("luma",(data) => {
// 丢弃无关消息
if (data.channel !== "luma" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
fetchData(1)
}
})
fetchData(1)
})
const download = (item) => {

111
web/src/views/MarkMap.vue
View File

@@ -45,7 +45,7 @@
<div class="param-line">
<el-button color="#47fff1" :dark="false" round @click="generateAI" :loading="loading">
智能生成思维导图
生成思维导图
</el-button>
</div>
@@ -79,10 +79,7 @@
</el-button>
</div>
<div class="markdown" v-if="loading">
<div :style="{ height: rightBoxHeight + 'px', overflow:'auto',width:'80%' }" v-html="html"></div>
</div>
<div class="body" id="markmap" v-show="!loading">
<div class="body" id="markmap">
<svg ref="svgRef" :style="{ height: rightBoxHeight + 'px' }"/>
<div id="toolbar"></div>
</div>
@@ -94,11 +91,11 @@
</template>
<script setup>
import {nextTick, onUnmounted, ref} from 'vue';
import {nextTick, ref} from 'vue';
import {Markmap} from 'markmap-view';
import {Transformer} from 'markmap-lib';
import {checkSession, getSystemInfo} from "@/store/cache";
import {httpGet} from "@/utils/http";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {Download} from "@element-plus/icons-vue";
import {Toolbar} from 'markmap-toolbar';
@@ -106,11 +103,9 @@ import {useSharedStore} from "@/store/sharedata";
const leftBoxHeight = ref(window.innerHeight - 105)
const rightBoxHeight = ref(window.innerHeight - 115)
const title = ref("")
const prompt = ref("")
const text = ref("")
const md = require('markdown-it')({breaks: true});
const content = ref(text.value)
const html = ref("")
@@ -118,13 +113,12 @@ const isLogin = ref(false)
const loginUser = ref({power: 0})
const transformer = new Transformer();
const store = useSharedStore();
const loading = ref(false)
const svgRef = ref(null)
const markMap = ref(null)
const models = ref([])
const modelID = ref(0)
const loading = ref(false)
getSystemInfo().then(res => {
text.value = res.data['mark_map_text']
@@ -147,9 +141,7 @@ getSystemInfo().then(res => {
const initData = () => {
httpGet("/api/model/list").then(res => {
for (let v of res.data) {
if (v.value.indexOf("gpt-4-gizmo") === -1) {
models.value.push(v)
}
models.value.push(v)
}
modelID.value = models.value[0].id
}).catch(e => {
@@ -159,7 +151,6 @@ const initData = () => {
checkSession().then(user => {
loginUser.value = user
isLogin.value = true
connect(user.id)
}).catch(() => {
});
}
@@ -191,74 +182,11 @@ const processContent = (text) => {
return arr.join("\n")
}
onUnmounted(() => {
if (socket.value !== null) {
socket.value.close()
}
socket.value = null
})
window.onresize = () => {
leftBoxHeight.value = window.innerHeight - 145
rightBoxHeight.value = window.innerHeight - 85
}
const socket = ref(null)
const connect = (userId) => {
if (socket.value !== null) {
socket.value.close()
}
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/markMap/client?user_id=${userId}&model_id=${modelID.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
const model = getModelById(modelID.value)
reader.onload = () => {
const data = JSON.parse(String(reader.result))
switch (data.type) {
case "content":
text.value += data.content
html.value = md.render(processContent(text.value))
break
case "end":
loading.value = false
content.value = processContent(text.value)
loginUser.value.power -= model.power
nextTick(() => update())
break
case "error":
loading.value = false
ElMessage.error(data.content)
break
}
}
}
})
_socket.addEventListener('close', () => {
loading.value = false
checkSession().then(() => {
connect(userId)
}).catch(() => {
})
});
}
const generate = () => {
text.value = content.value
update()
@@ -276,19 +204,26 @@ const generateAI = () => {
return
}
loading.value = true
socket.value.send(JSON.stringify({type: "message", content: prompt.value}))
}
const changeModel = () => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "model_id", content: modelID.value}))
}
httpPost("/api/markMap/gen", {
prompt:prompt.value,
model_id: modelID.value
}).then(res => {
text.value = res.data
content.value = processContent(text.value)
const model = getModelById(modelID.value)
loginUser.value.power -= model.power
nextTick(() => update())
loading.value = false
}).catch(e => {
ElMessage.error("生成思维导图失败：" + e.message)
loading.value = false
})
}
const getModelById = (modelId) => {
for (let e of models.value) {
if (e.id === modelId) {
return e
for (let m of models.value) {
if (m.id === modelId) {
return m
}
}
}

59
web/src/views/Suno.vue
View File

@@ -300,13 +300,14 @@ import MusicPlayer from "@/components/MusicPlayer.vue";
import {compact} from "lodash";
import {httpDownload, httpGet, httpPost} from "@/utils/http";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import {checkSession} from "@/store/cache";
import {checkSession, getClientId} from "@/store/cache";
import {ElMessage, ElMessageBox} from "element-plus";
import {formatTime, replaceImg} from "@/utils/libs";
import Clipboard from "clipboard";
import BlackDialog from "@/components/ui/BlackDialog.vue";
import Compressor from "compressorjs";
import Generating from "@/components/ui/Generating.vue";
import {useSharedStore} from "@/store/sharedata";
const winHeight = ref(window.innerHeight - 50)
const custom = ref(false)
@@ -333,6 +334,7 @@ const tags = ref([
{label: "嘻哈", value: "hip hop"},
])
const data = ref({
client_id: getClientId(),
model: "chirp-v3-0",
tags: "",
lyrics: "",
@@ -354,45 +356,7 @@ const refSong = ref(null)
const showDialog = ref(false)
const editData = ref({title:"",cover:"",id:0})
const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
const socket = ref(null)
const userId = ref(0)
const connect = () => {
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const _socket = new WebSocket(host + `/api/suno/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
});
_socket.addEventListener('message', event => {
if (event.data instanceof Blob) {
const reader = new FileReader();
reader.readAsText(event.data, "UTF-8")
reader.onload = () => {
const message = String(reader.result)
console.log(message)
if (message === "FINISH" || message === "FAIL") {
fetchData()
}
}
}
});
_socket.addEventListener('close', () => {
if (socket.value !== null) {
connect()
}
});
}
const store = useSharedStore()
const clipboard = ref(null)
onMounted(() => {
clipboard.value = new Clipboard('.copy-link');
@@ -405,10 +369,19 @@ onMounted(() => {
})
checkSession().then(user => {
userId.value = user.id
connect()
fetchData(1)
})
store.addMessageHandler("suno",(data) => {
// 丢弃无关消息
if (data.channel !== "suno" || data.clientId !== getClientId()) {
return
}
if (data.body === "FINISH" || data.body === "FAIL") {
fetchData(1)
}
})
fetchData(1)
})
onUnmounted(() => {