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

adjust chat records layout styles

Browse Source
This commit is contained in:
RockYang
2024-07-25 11:01:27 +08:00
parent 2a0c657ca3
commit dc46ed0e05
14 changed files with 559 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
web/src/assets/css/image-mj.styl
View File

@@ -427,22 +427,18 @@
.err-msg-container {
overflow hidden
word-break break-all
padding 0 10px 20px 10px
padding 15px
.title {
font-size 16px
font-size 20px
text-align center
font-weight bold
color #f56c6c
margin-bottom 20px
margin-bottom 30px
}
.text {
font-size 14px
color #E9F1F6
line-height 1.5
text-overflow ellipsis
height 100px
overflow hidden
.opt {
display flex
justify-content center
}
}
.iconfont {

37
web/src/assets/css/suno.styl
View File

@@ -96,7 +96,7 @@
.right-box {
width 100%
color rgb(250 247 245)
overflow hidden
overflow auto
.list-box {
padding 0 0 0 20px
@@ -105,9 +105,10 @@
flex-flow row
padding 5px 0
cursor pointer
margin-bottom 10px
&:hover {
background-color #1C1616
background-color #2A2525
}
.left {
@@ -246,11 +247,41 @@
}
}
.item.active {
.task {
height 100px
background-color #2A2525
display flex
margin-bottom 10px
.left {
display flex
justify-content left
align-items center
padding 20px
width 320px
.title {
font-size 14px
color #e1e1e1
white-space: nowrap; /* 防止文字换行 */
overflow: hidden; /* 隐藏溢出的内容 */
text-overflow: ellipsis; /* 用省略号表示溢出的内容 */
}
}
.right {
display flex
width 100%
justify-content center
}
}
}
.pagination {
padding 10px 20px
display flex
justify-content center
}
.music-player {
width 100%
position: fixed;

20
web/src/components/ChatPrompt.vue
View File

@@ -70,7 +70,7 @@
</div>
<div class="bar" v-if="data.created_at > 0">
<span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
<span class="bar-item">tokens: {{ finalTokens }}</span>
<!-- <span class="bar-item">tokens: {{ finalTokens }}</span>-->
</div>
</div>
</div>
@@ -132,12 +132,12 @@ const content =ref(processPrompt(props.data.content))
const files = ref([])
onMounted(() => {
if (!finalTokens.value) {
httpPost("/api/chat/tokens", {text: props.data.content, model: props.data.model}).then(res => {
finalTokens.value = res.data;
}).catch(() => {
})
}
// if (!finalTokens.value) {
// httpPost("/api/chat/tokens", {text: props.data.content, model: props.data.model}).then(res => {
// finalTokens.value = res.data;
// }).catch(() => {
// })
// }
const linkRegex = /(https?:\/\/\S+)/g;
const links = props.data.content.match(linkRegex);
@@ -308,9 +308,10 @@ const isExternalImg = (link, files) => {
display flex;
width 100%;
padding 0 25px;
flex-flow row-reverse
.chat-icon {
margin-right 20px;
margin-left 20px;
img {
width: 36px;
@@ -377,6 +378,7 @@ const isExternalImg = (link, files) => {
.content-wrapper {
display flex
flex-flow row-reverse
.content {
word-break break-word;
padding: 1rem
@@ -384,7 +386,7 @@ const isExternalImg = (link, files) => {
font-size: var(--content-font-size);
overflow: auto;
background-color #98e165
border-radius: 0 10px 10px 10px;
border-radius: 10px 0 10px 10px;
img {
max-width: 600px;

11
web/src/components/ChatReply.vue
View File

@@ -67,14 +67,13 @@
<div class="chat-icon">
<img :src="data.icon" alt="ChatGPT">
</div>
<div class="chat-item">
<div class="content-wrapper">
<div class="content" v-html="data.content"></div>
</div>
<div class="bar" v-if="data.created_at">
<span class="bar-item"><el-icon><Clock/></el-icon> {{ dateFormat(data.created_at) }}</span>
<span class="bar-item">tokens: {{ data.tokens }}</span>
<!-- <span class="bar-item">tokens: {{ data.tokens }}</span>-->
<span class="bar-item bg">
<el-tooltip
class="box-item"
@@ -178,7 +177,7 @@ const reGenerate = (prompt) => {
padding-left 10px;
.chat-icon {
margin-right 20px;
margin-left 20px;
img {
width: 36px;
@@ -348,10 +347,10 @@ const reGenerate = (prompt) => {
display flex;
padding 0 25px;
width 100%
flex-flow row-reverse
flex-flow row
.chat-icon {
margin-left 20px;
margin-right 20px;
img {
width: 36px;
@@ -378,7 +377,7 @@ const reGenerate = (prompt) => {
font-size: var(--content-font-size);
overflow auto;
background-color #F5F5F5
border-radius: 10px 0 10px 10px;
border-radius: 0 10px 10px 10px;
img {
max-width: 600px;

23
web/src/components/MusicPlayer.vue
View File

@@ -9,7 +9,7 @@
<div class="style">
<span class="tags">{{ tags }}</span>
<span class="text-lightGray"> | </span>
<span class="time">{{ formatTime(currentTime) }} /{{ formatTime(duration) }}</span>
<span class="time">{{ formatTime(currentTime) }}<span class="split">/</span>{{ formatTime(duration) }}</span>
</div>
</div>
@@ -42,6 +42,7 @@
import {ref, onMounted, watch} from 'vue';
import {showMessageError} from "@/utils/dialog";
import {Close} from "@element-plus/icons-vue";
import {formatTime} from "@/utils/libs";
const audio = ref(null);
const isPlaying = ref(false);
@@ -121,12 +122,6 @@ const updateProgress = () => {
}
};
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
const setProgress = (event) => {
const totalWidth = progressBarRef.value.offsetWidth;
const clickX = event.offsetX;
@@ -172,7 +167,7 @@ onMounted(() => {
.info {
padding 0 10px
width 300px
min-width 300px
display flex
justify-content center
align-items flex-start
@@ -186,8 +181,14 @@ onMounted(() => {
.style {
font-size 14px
display flex
color #e1e1e1
.tags {
font-weight 600
white-space: nowrap; /* 防止文本换行 */
overflow: hidden; /* 隐藏溢出的文本 */
text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
max-width 200px
}
.text-lightGray {
color: rgb(114 110 108);
@@ -196,6 +197,12 @@ onMounted(() => {
.time {
font-family 'Input Sans'
font-weight 700
.split {
font-size 12px
position relative
top -2px
margin 0 1px 0 3px
}
}
}
}

97
web/src/components/ui/Generating.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div class="container">
<div class="wave">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<div class="text">正在生成歌曲</div>
</div>
</template>
<style scoped lang="stylus">
.container {
display: flex;
flex-flow column
justify-content: center;
align-items: center;
margin: 0;
font-family: 'Arial', sans-serif;
color: #e1e1e1;
.wave {
display: flex;
justify-content: center;
align-items: flex-end;
height: 30px;
margin-bottom: 5px
.bar {
width: 8px;
margin: 0 2px;
background-color: #919191;
animation: wave 1.5s infinite;
}
.bar:nth-child(1) {
animation-delay: 0s;
}
.bar:nth-child(2) {
animation-delay: 0.1s;
}
.bar:nth-child(3) {
animation-delay: 0.2s;
}
.bar:nth-child(4) {
animation-delay: 0.3s;
}
.bar:nth-child(5) {
animation-delay: 0.4s;
}
.bar:nth-child(6) {
animation-delay: 0.5s;
}
.bar:nth-child(7) {
animation-delay: 0.6s;
}
.bar:nth-child(8) {
animation-delay: 0.7s;
}
.bar:nth-child(9) {
animation-delay: 0.8s;
}
.bar:nth-child(10) {
animation-delay: 0.9s;
}
}
}
@keyframes wave {
0%, 100% {
height: 10px;
}
50% {
height: 30px;
}
}
.text {
font-size: 14px;
}
</style>

6
web/src/utils/libs.js
View File

@@ -90,6 +90,12 @@ export function dateFormat(timestamp, format) {
return timeDate;
}
export function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}
// 判断数组中是否包含某个元素
export function arrayContains(array, value, compare) {
if (!array) {

8
web/src/views/ImageMj.vue
View File

@@ -492,15 +492,15 @@
<div class="image-slot">
<div class="err-msg-container">
<div class="title">任务失败</div>
<div class="text">
<el-popover title="错误详情" trigger="hover" :width="250" :content="slotProp.item['err_msg']" placement="top">
<div class="opt">
<el-popover title="错误详情" trigger="click" :width="250" :content="slotProp.item['err_msg']" placement="top">
<template #reference>
{{ slotProp.item['err_msg'] }}
<el-button type="info">详情</el-button>
</template>
</el-popover>
<el-button type="danger" @click="removeImage(slotProp.item)">删除</el-button>
</div>
</div>
<el-button type="danger" @click="removeImage(slotProp.item)">删除</el-button>
</div>
</template>
</el-image>

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

@@ -108,65 +108,94 @@
</div>
<div class="right-box" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
<div class="list-box" v-if="!noData">
<div class="item" v-for="item in list">
<div class="left">
<div class="container">
<el-image :src="item.thumb_img_url" fit="cover" />
<div class="duration">{{duration(item.duration)}}</div>
<button class="play" @click="play(item)">
<img src="/images/play.svg" alt=""/>
</button>
<div v-for="item in list">
<div class="item" v-if="item.progress === 100">
<div class="left">
<div class="container">
<el-image :src="item.thumb_img_url" fit="cover" />
<div class="duration">{{formatTime(item.duration)}}</div>
<button class="play" @click="play(item)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
</div>
</div>
<div class="center">
<div class="title">
<a href="/song/xxxxx">{{item.title}}</a>
<span class="model">{{item.model}}</span>
<div class="center">
<div class="title">
<a href="/song/xxxxx">{{item.title}}</a>
<span class="model">{{item.major_model_version}}</span>
</div>
<div class="tags">{{item.tags}}</div>
</div>
<div class="tags">{{item.tags}}</div>
</div>
<div class="right">
<div class="tools">
<el-tooltip effect="light" content="以当前歌曲为素材继续创作" placement="top">
<button class="btn">续写</button>
</el-tooltip>
<div class="right">
<div class="tools">
<el-tooltip effect="light" content="以当前歌曲为素材继续创作" placement="top">
<button class="btn">续写</button>
</el-tooltip>
<button class="btn btn-publish">
<span class="text">发布</span>
<black-switch v-model:value="item.publish" size="small" />
</button>
<button class="btn btn-publish">
<span class="text">发布</span>
<black-switch v-model:value="item.publish" @change="publishJob(item)" size="small" />
</button>
<el-tooltip effect="light" content="下载歌曲" placement="top">
<a :href="item.audio_url" :download="item.title+'.mp3'">
<el-tooltip effect="light" content="下载歌曲" placement="top">
<a :href="item.audio_url" :download="item.title+'.mp3'" target="_blank">
<button class="btn btn-icon">
<i class="iconfont icon-download"></i>
</button>
</a>
</el-tooltip>
<el-tooltip effect="light" content="复制歌曲链接" placement="top">
<button class="btn btn-icon">
<i class="iconfont icon-download"></i>
<i class="iconfont icon-share1"></i>
</button>
</a>
</el-tooltip>
</el-tooltip>
<el-tooltip effect="light" content="复制歌曲链接" placement="top">
<button class="btn btn-icon">
<i class="iconfont icon-share1"></i>
</button>
</el-tooltip>
<el-tooltip effect="light" content="编辑" placement="top">
<button class="btn btn-icon">
<i class="iconfont icon-edit"></i>
</button>
</el-tooltip>
<el-tooltip effect="light" content="编辑" placement="top">
<button class="btn btn-icon">
<i class="iconfont icon-edit"></i>
</button>
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top">
<button class="btn btn-icon">
<i class="iconfont icon-remove"></i>
</button>
</el-tooltip>
<el-tooltip effect="light" content="删除" placement="top">
<button class="btn btn-icon" @click="removeJob(item)">
<i class="iconfont icon-remove"></i>
</button>
</el-tooltip>
</div>
</div>
</div>
<div class="task" v-else>
<div class="left">
<div class="title">
<span v-if="item.title">{{item.title}}</span>
<span v-else>{{item.prompt}}</span>
</div>
</div>
<div class="right">
<generating />
</div>
</div>
</div>
</div>
<el-empty :image-size="100" description="没有任何作品，赶紧去创作吧！" v-else/>
<div class="pagination">
<el-pagination v-if="total > pageSize" background
style="--el-pagination-button-bg-color:#414141;
--el-pagination-button-color:#d1d1d1;
--el-disabled-bg-color:#414141;
--el-color-primary:#666666;
--el-pagination-hover-color:#e1e1e1"
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="page"
v-model:page-size="pageSize"
@current-change="fetchData(page)"
:total="total"/>
</div>
<div class="music-player" v-if="showPlayer">
<music-player :songs="playList" ref="playerRef" @close="showPlayer = false" />
</div>
@@ -175,16 +204,19 @@
</template>
<script setup>
import {nextTick, ref} from "vue"
import {nextTick, onMounted, ref} from "vue"
import {InfoFilled} from "@element-plus/icons-vue";
import BlackSelect from "@/components/ui/BlackSelect.vue";
import BlackSwitch from "@/components/ui/BlackSwitch.vue";
import BlackInput from "@/components/ui/BlackInput.vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import {compact} from "lodash";
import {httpPost} from "@/utils/http";
import {httpGet, httpPost} from "@/utils/http";
import {showMessageError, showMessageOK} from "@/utils/dialog";
import {showSuccessToast} from "vant";
import Generating from "@/components/ui/Generating.vue";
import {checkSession} from "@/action/session";
import {ElMessage, ElMessageBox} from "element-plus";
import {formatTime} from "@/utils/libs";
const winHeight = ref(window.innerHeight - 50)
const custom = ref(false)
@@ -218,59 +250,101 @@ const data = ref({
title: "",
instrumental:false
})
const loading = ref(false)
const loading = ref(true)
const noData = ref(false)
const playList = ref([])
const playerRef = ref(null)
const showPlayer = ref(false)
const list = ref([
{
id: 1,
title: "鸟人传说 (Birdman Legend)",
model: "v3",
tags: "uplifting pop",
thumb_img_url: "https://cdn2.suno.ai/image_047796ce-7bf3-4051-a59c-66ce60448ff2.jpeg?width=100",
audio_url: "/files/suno.mp3",
publish: true,
duration: 134,
},
{
id: 1,
title: "我是一个鸟人",
model: "v3",
tags: "摇滚",
publish: false,
thumb_img_url: "https://cdn2.suno.ai/image_e5d25fd0-06a5-4cd7-910c-4b62872cd503.jpeg?width=100",
audio_url: "/files/test.mp3",
duration: 194,
},
{
id: 1,
title: "鸟人传说 (Birdman Legend)",
model: "v3",
tags: "uplifting pop",
publish: true,
thumb_img_url: "https://cdn2.suno.ai/image_047796ce-7bf3-4051-a59c-66ce60448ff2.jpeg?width=100",
audio_url: "/files/suno.mp3",
duration: 138,
},
{
id: 1,
title: "我是一个鸟人",
model: "v3",
tags: "摇滚",
publish: false,
thumb_img_url: "https://cdn2.suno.ai/image_e5d25fd0-06a5-4cd7-910c-4b62872cd503.jpeg?width=100",
audio_url: "/files/suno.mp3",
duration: 144,
},
])
const list = ref([])
const socket = ref(null)
const userId = ref(0)
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 sendHeartbeat = () => {
clearTimeout(heartbeatHandle.value)
new Promise((resolve, reject) => {
if (socket.value !== null) {
socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
}
resolve("success")
}).then(() => {
heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
});
}
const _socket = new WebSocket(host + `/api/suno/client?user_id=${userId.value}`);
_socket.addEventListener('open', () => {
socket.value = _socket;
// 发送心跳消息
sendHeartbeat()
});
_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()
}
});
}
onMounted(() => {
checkSession().then(user => {
userId.value = user.id
fetchData(1)
connect()
})
})
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
const fetchData = (page) => {
httpGet("/api/suno/list",{page:page, page_size:pageSize.value}).then(res => {
total.value = res.data.total
const items = []
for (let v of res.data.items) {
if (v.progress === 100) {
v.major_model_version = v['raw_data']['major_model_version']
}
items.push(v)
}
loading.value = false
list.value = items
noData.value = list.value.length === 0
}).catch(e => {
showMessageError("获取作品列表失败："+e.message)
})
}
const create = () => {
data.value.type = custom.value ? 2 : 1
console.log(data.value)
httpPost("/api/suno/create", data.value).then(res => {
console.log(res)
httpPost("/api/suno/create", data.value).then(() => {
fetchData(1)
showMessageOK("创建任务成功")
}).catch(e => {
showMessageError("创建任务失败："+e.message)
@@ -282,12 +356,6 @@ const play = (item) => {
showPlayer.value = true
nextTick(()=> playerRef.value.play())
}
// 格式化音频时长
const duration = (secs) => {
const minutes =Math.floor(secs/60)
const seconds = secs%60
return `${minutes}:${seconds}`
}
const selectTag = (tag) => {
if (data.value.tags.length + tag.value.length >= 119) {
@@ -296,6 +364,34 @@ const selectTag = (tag) => {
data.value.tags = compact([...data.value.tags.split(","), tag.value]).join(",")
}
const removeJob = (item) => {
ElMessageBox.confirm(
'此操作将会删除任务相关文件，继续操作码?',
'删除提示',
{
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning',
}
).then(() => {
httpGet("/api/suno/remove", {id: item.id}).then(() => {
ElMessage.success("任务删除成功")
fetchData()
}).catch(e => {
ElMessage.error("任务删除失败：" + e.message)
})
}).catch(() => {
})
}
const publishJob = (item) => {
httpGet("/api/suno/publish", {id: item.id, publish:item.publish}).then(() => {
ElMessage.success("操作成功")
}).catch(e => {
ElMessage.error("操作失败：" + e.message)
})
}
</script>
<style lang="stylus" scoped>