mirror of
https://gitee.com/blackfox/geekai.git
synced 2024-12-01 19:57:37 +08:00
adjust chat records layout styles
This commit is contained in:
RockYang
parent
59301df073
commit
f6f8748521
@ -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/") ||
|
||||
|
||||
@ -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"` // 是否纯音乐
|
||||
|
||||
@ -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)
|
||||
}
|
||||
|
||||
@ -214,6 +214,8 @@ func main() {
|
||||
fx.Invoke(func(s *suno.Service) {
|
||||
s.Run()
|
||||
s.SyncTaskProgress()
|
||||
s.CheckTaskNotify()
|
||||
s.DownloadImages()
|
||||
}),
|
||||
|
||||
fx.Provide(payment.NewAlipayService),
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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
97
web/src/components/ui/Generating.vue
Normal 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>
|
||||
@ -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) {
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user