xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-04 08:13: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

1
api/core/app_server.go
View File

@@ -224,6 +224,7 @@ func needLogin(c *gin.Context) bool {
c.Request.URL.Path == "/api/payment/wechat/notify" ||
c.Request.URL.Path == "/api/payment/doPay" ||
c.Request.URL.Path == "/api/payment/payWays" ||
c.Request.URL.Path == "/api/suno/client" ||
strings.HasPrefix(c.Request.URL.Path, "/api/test") ||
strings.HasPrefix(c.Request.URL.Path, "/api/user/clogin") ||
strings.HasPrefix(c.Request.URL.Path, "/api/config/") ||

3
api/core/types/task.go
View File

@@ -88,8 +88,7 @@ type SunoTask struct {
Title string `json:"title"`
RefTaskId string `json:"ref_task_id"`
RefSongId string `json:"ref_song_id"`
Lyrics string `json:"lyrics"` // 歌词：自定义模式
Prompt string `json:"prompt"` // 提示词：灵感模式
Prompt string `json:"prompt"` // 提示词/歌词
Tags string `json:"tags"`
Model string `json:"model"`
Instrumental bool `json:"instrumental"` // 是否纯音乐

110
api/handler/suno_handler.go
View File

@@ -11,48 +11,55 @@ import (
"fmt"
"geekai/core"
"geekai/core/types"
"geekai/service/oss"
"geekai/service/suno"
"geekai/store/model"
"geekai/store/vo"
"geekai/utils"
"geekai/utils/resp"
"github.com/gin-gonic/gin"
"github.com/gorilla/websocket"
"gorm.io/gorm"
"net/http"
"time"
)
type SunoHandler struct {
BaseHandler
service *suno.Service
service *suno.Service
uploader *oss.UploaderManager
}
func NewSunoHandler(app *core.AppServer, db *gorm.DB) *SunoHandler {
func NewSunoHandler(app *core.AppServer, db *gorm.DB, service *suno.Service, uploader *oss.UploaderManager) *SunoHandler {
return &SunoHandler{
BaseHandler: BaseHandler{
App: app,
DB: db,
},
service: service,
uploader: uploader,
}
}
// Client WebSocket 客户端，用于通知任务状态变更
func (h *SunoHandler) Client(c *gin.Context) {
//ws, err := (&websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}).Upgrade(c.Writer, c.Request, nil)
//if err != nil {
// logger.Error(err)
// c.Abort()
// return
//}
//
//userId := h.GetInt(c, "user_id", 0)
//if userId == 0 {
// logger.Info("Invalid user ID")
// c.Abort()
// return
//}
//
////client := types.NewWsClient(ws)
//logger.Infof("New websocket connected, IP: %s", c.RemoteIP())
ws, err := (&websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}).Upgrade(c.Writer, c.Request, nil)
if err != nil {
logger.Error(err)
c.Abort()
return
}
userId := h.GetInt(c, "user_id", 0)
if userId == 0 {
logger.Info("Invalid user ID")
c.Abort()
return
}
client := types.NewWsClient(ws)
h.service.Clients.Put(uint(userId), client)
logger.Infof("New websocket connected, IP: %s", c.RemoteIP())
}
func (h *SunoHandler) Create(c *gin.Context) {
@@ -88,6 +95,9 @@ func (h *SunoHandler) Create(c *gin.Context) {
ExtendSecs: data.ExtendSecs,
Power: h.App.SysConfig.SunoPower,
}
if data.Lyrics != "" {
job.Prompt = data.Lyrics
}
tx := h.DB.Create(&job)
if tx.Error != nil {
resp.ERROR(c, tx.Error.Error())
@@ -100,7 +110,6 @@ func (h *SunoHandler) Create(c *gin.Context) {
UserId: job.UserId,
Type: job.Type,
Title: job.Title,
Lyrics: data.Lyrics,
RefTaskId: data.RefTaskId,
RefSongId: data.RefSongId,
ExtendSecs: data.ExtendSecs,
@@ -128,19 +137,74 @@ func (h *SunoHandler) Create(c *gin.Context) {
})
}
var itemVo vo.SunoJob
_ = utils.CopyObject(job, &itemVo)
resp.SUCCESS(c, itemVo)
client := h.service.Clients.Get(uint(job.UserId))
if client != nil {
_ = client.Send([]byte("Task Updated"))
}
resp.SUCCESS(c)
}
func (h *SunoHandler) List(c *gin.Context) {
userId := h.GetLoginUserId(c)
page := h.GetInt(c, "page", 0)
pageSize := h.GetInt(c, "page_size", 0)
session := h.DB.Session(&gorm.Session{}).Where("user_id", userId)
// 统计总数
var total int64
session.Debug().Model(&model.SunoJob{}).Count(&total)
if page > 0 && pageSize > 0 {
offset := (page - 1) * pageSize
session = session.Offset(offset).Limit(pageSize)
}
var list []model.SunoJob
err := session.Order("id desc").Find(&list).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
// 转换为 VO
items := make([]vo.SunoJob, 0)
for _, v := range list {
var item vo.SunoJob
err = utils.CopyObject(v, &item)
if err != nil {
continue
}
items = append(items, item)
}
resp.SUCCESS(c, vo.NewPage(total, page, pageSize, items))
}
func (h *SunoHandler) Remove(c *gin.Context) {
id := h.GetInt(c, "id", 0)
userId := h.GetLoginUserId(c)
var job model.SunoJob
err := h.DB.Where("id = ?", id).Where("user_id", userId).First(&job).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
// 删除任务
h.DB.Delete(&job)
// 删除文件
_ = h.uploader.GetUploadHandler().Delete(job.ThumbImgURL)
_ = h.uploader.GetUploadHandler().Delete(job.CoverImgURL)
_ = h.uploader.GetUploadHandler().Delete(job.AudioURL)
}
func (h *SunoHandler) Publish(c *gin.Context) {
id := h.GetInt(c, "id", 0)
userId := h.GetLoginUserId(c)
publish := h.GetBool(c, "publish")
err := h.DB.Model(&model.SunoJob{}).Where("id", id).Where("user_id", userId).UpdateColumn("publish", publish).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
resp.SUCCESS(c)
}

2
api/main.go
View File

@@ -214,6 +214,8 @@ func main() {
fx.Invoke(func(s *suno.Service) {
s.Run()
s.SyncTaskProgress()
s.CheckTaskNotify()
s.DownloadImages()
}),
fx.Provide(payment.NewAlipayService),

120
api/service/suno/service.go
View File

@@ -14,6 +14,7 @@ import (
"geekai/core/types"
logger2 "geekai/logger"
"geekai/service/oss"
"geekai/service/sd"
"geekai/store"
"geekai/store/model"
"geekai/utils"
@@ -53,6 +54,25 @@ func (s *Service) PushTask(task types.SunoTask) {
}
func (s *Service) Run() {
// 将数据库中未提交的人物加载到队列
var jobs []model.SunoJob
s.db.Where("task_id", "").Find(&jobs)
for _, v := range jobs {
s.PushTask(types.SunoTask{
Id: v.Id,
Channel: v.Channel,
UserId: v.UserId,
Type: v.Type,
Title: v.Title,
RefTaskId: v.RefTaskId,
RefSongId: v.RefSongId,
Prompt: v.Prompt,
Tags: v.Tags,
Model: v.ModelName,
Instrumental: v.Instrumental,
ExtendSecs: v.ExtendSecs,
})
}
logger.Info("Starting Suno job consumer...")
go func() {
for {
@@ -83,7 +103,7 @@ func (s *Service) Run() {
}
type RespVo struct {
Code int `json:"code"`
Code string `json:"code"`
Message string `json:"message"`
Data string `json:"data"`
Channel string `json:"channel,omitempty"`
@@ -111,7 +131,7 @@ func (s *Service) Create(task types.SunoTask) (RespVo, error) {
if task.Type == 1 {
reqBody["gpt_description_prompt"] = task.Prompt
} else { // 自定义模式
reqBody["prompt"] = task.Lyrics
reqBody["prompt"] = task.Prompt
reqBody["tags"] = task.Tags
reqBody["mv"] = task.Model
reqBody["title"] = task.Title
@@ -131,12 +151,77 @@ func (s *Service) Create(task types.SunoTask) (RespVo, error) {
body, _ := io.ReadAll(r.Body)
err = json.Unmarshal(body, &res)
if err != nil {
return RespVo{}, fmt.Errorf("解析API数据失败：%s", string(body))
return RespVo{}, fmt.Errorf("解析API数据失败：%v, %s", err, string(body))
}
res.Channel = apiKey.ApiURL
return res, nil
}
func (s *Service) CheckTaskNotify() {
go func() {
logger.Info("Running Suno task notify checking ...")
for {
var message sd.NotifyMessage
err := s.notifyQueue.LPop(&message)
if err != nil {
continue
}
client := s.Clients.Get(uint(message.UserId))
if client == nil {
continue
}
err = client.Send([]byte(message.Message))
if err != nil {
continue
}
}
}()
}
func (s *Service) DownloadImages() {
go func() {
var items []model.SunoJob
for {
res := s.db.Where("progress", 102).Find(&items)
if res.Error != nil {
continue
}
for _, v := range items {
// 下载图片和音频
logger.Infof("try download thumb image: %s", v.ThumbImgURL)
thumbURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.ThumbImgURL, true)
if err != nil {
logger.Errorf("download image with error: %v", err)
continue
}
logger.Infof("try download cover image: %s", v.CoverImgURL)
coverURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.CoverImgURL, true)
if err != nil {
logger.Errorf("download image with error: %v", err)
continue
}
logger.Infof("try download audio: %s", v.AudioURL)
audioURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.AudioURL, true)
if err != nil {
logger.Errorf("download audio with error: %v", err)
continue
}
v.ThumbImgURL = thumbURL
v.CoverImgURL = coverURL
v.AudioURL = audioURL
v.Progress = 100
s.db.Updates(&v)
s.notifyQueue.RPush(sd.NotifyMessage{UserId: v.UserId, JobId: int(v.Id), Message: sd.Finished})
}
time.Sleep(time.Second * 10)
}
}()
}
// SyncTaskProgress 异步拉取任务
func (s *Service) SyncTaskProgress() {
go func() {
@@ -167,7 +252,7 @@ func (s *Service) SyncTaskProgress() {
tx := s.db.Begin()
for _, v := range task.Data.Data {
job.Id = 0
job.Progress = 100
job.Progress = 102 // 102 表示资源未下载完成
job.Title = v.Title
job.SongId = v.Id
job.Duration = int(v.Metadata.Duration)
@@ -175,26 +260,9 @@ func (s *Service) SyncTaskProgress() {
job.Tags = v.Metadata.Tags
job.ModelName = v.ModelName
job.RawData = utils.JsonEncode(v)
// 下载图片和音频
thumbURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.ImageUrl, true)
if err != nil {
logger.Errorf("download image with error: %v", err)
continue
}
coverURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.ImageLargeUrl, true)
if err != nil {
logger.Errorf("download image with error: %v", err)
continue
}
audioURL, err := s.uploadManager.GetUploadHandler().PutUrlFile(v.AudioUrl, true)
if err != nil {
logger.Errorf("download audio with error: %v", err)
continue
}
job.ThumbImgURL = thumbURL
job.CoverImgURL = coverURL
job.AudioURL = audioURL
job.ThumbImgURL = v.ImageUrl
job.CoverImgURL = v.ImageLargeUrl
job.AudioURL = v.AudioUrl
if err = tx.Create(&job).Error; err != nil {
logger.Error("create job with error: %v", err)
@@ -212,13 +280,13 @@ func (s *Service) SyncTaskProgress() {
continue
}
}
tx.Commit()
} else if task.Data.FailReason != "" {
job.Progress = 101
job.ErrMsg = task.Data.FailReason
s.db.Updates(&job)
s.notifyQueue.RPush(sd.NotifyMessage{UserId: job.UserId, JobId: int(job.Id), Message: sd.Failed})
}
}
@@ -285,7 +353,7 @@ func (s *Service) QueryTask(taskId string, channel string) (QueryRespVo, error)
body, _ := io.ReadAll(r.Body)
err = json.Unmarshal(body, &res)
if err != nil {
return QueryRespVo{}, fmt.Errorf("解析API数据失败：%s", string(body))
return QueryRespVo{}, fmt.Errorf("解析API数据失败：%v, %s", err, string(body))
}
return res, nil

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>