xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-17 08:46:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'dev'

Browse Source
This commit is contained in:
RockYang 2025-03-05 18:42:44 +08:00
commit 89ded74345
70 changed files with 4731 additions and 258 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -1,4 +1,12 @@
# 更新日志
## v4.1.6
* 功能新增：**支持OpenAI实时语音对话功能** :rocket: :rocket: :rocket:, Beta 版，目前没有做算力计费控制，目前只有 VIP 用户可以使用。
* 功能优化：优化MysQL容器配置文档，解决MysQL容器资源占用过高问题
* 功能新增：管理后台增加AI绘图任务管理，可在管理后台浏览和删除用户的绘图任务
* 功能新增：管理后台增加Suno和Luma任务管理功能
* Bug修复：修复管理后台删除兑换码报 404 错误
* 功能优化：优化充值产品定价逻辑，可以设置原价和优惠价，**升级当前版本之后请务必要到管理后台去重新设置一下产品价格，以免造成损失！！！**，**升级当前版本之后请务必要到管理后台去重新设置一下产品价格，以免造成损失！！！**，**升级当前版本之后请务必要到管理后台去重新设置一下产品价格，以免造成损失！！！**。
## v4.1.5
* 功能优化：重构 websocket 组件，减少 websocket 连接数，全站共享一个 websocket 连接
* Bug修复：兼容手机端原生微信支付和支付宝支付渠道

11
api/core/app_server.go
View File

@ -124,12 +124,19 @@ func corsMiddleware() gin.HandlerFunc {
// 用户授权验证
func authorizeMiddleware(s *AppServer, client *redis.Client) gin.HandlerFunc {
return func(c *gin.Context) {
clientProtocols := c.GetHeader("Sec-WebSocket-Protocol")
var tokenString string
isAdminApi := strings.Contains(c.Request.URL.Path, "/api/admin/")
if isAdminApi { // 后台管理 API
tokenString = c.GetHeader(types.AdminAuthHeader)
} else if c.Request.URL.Path == "/api/ws" { // Websocket 连接
tokenString = c.Query("token")
} else if clientProtocols != "" { // Websocket 连接
// 解析子协议内容
protocols := strings.Split(clientProtocols, ",")
if protocols[0] == "realtime" {
tokenString = strings.TrimSpace(protocols[1][25:])
} else if protocols[0] == "token" {
tokenString = strings.TrimSpace(protocols[1])
}
} else {
tokenString = c.GetHeader(types.UserAuthHeader)
}

122
api/handler/admin/config_handler.go
View File

@ -143,65 +143,67 @@ func (h *ConfigHandler) GetLicense(c *gin.Context) {
// FixData 修复数据
func (h *ConfigHandler) FixData(c *gin.Context) {
var fixed bool
version := "data_fix_4.1.4"
err := h.levelDB.Get(version, &fixed)
if err == nil || fixed {
resp.ERROR(c, "当前版本数据修复已完成，请不要重复执行操作")
resp.ERROR(c, "当前升级版本没有数据需要修正！")
return
}
tx := h.DB.Begin()
var users []model.User
err = tx.Find(&users).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
for _, user := range users {
if user.Email != "" || user.Mobile != "" {
continue
}
if utils.IsValidEmail(user.Username) {
user.Email = user.Username
} else if utils.IsValidMobile(user.Username) {
user.Mobile = user.Username
}
err = tx.Save(&user).Error
if err != nil {
resp.ERROR(c, err.Error())
tx.Rollback()
return
}
}
var orders []model.Order
err = h.DB.Find(&orders).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
for _, order := range orders {
if order.PayWay == "支付宝" {
order.PayWay = "alipay"
order.PayType = "alipay"
} else if order.PayWay == "微信支付" {
order.PayWay = "wechat"
order.PayType = "wxpay"
} else if order.PayWay == "hupi" {
order.PayType = "wxpay"
}
err = tx.Save(&order).Error
if err != nil {
resp.ERROR(c, err.Error())
tx.Rollback()
return
}
}
tx.Commit()
err = h.levelDB.Put(version, true)
if err != nil {
resp.ERROR(c, err.Error())
return
}
resp.SUCCESS(c)
//var fixed bool
//version := "data_fix_4.1.4"
//err := h.levelDB.Get(version, &fixed)
//if err == nil || fixed {
// resp.ERROR(c, "当前版本数据修复已完成，请不要重复执行操作")
// return
//}
//tx := h.DB.Begin()
//var users []model.User
//err = tx.Find(&users).Error
//if err != nil {
// resp.ERROR(c, err.Error())
// return
//}
//for _, user := range users {
// if user.Email != "" || user.Mobile != "" {
// continue
// }
// if utils.IsValidEmail(user.Username) {
// user.Email = user.Username
// } else if utils.IsValidMobile(user.Username) {
// user.Mobile = user.Username
// }
// err = tx.Save(&user).Error
// if err != nil {
// resp.ERROR(c, err.Error())
// tx.Rollback()
// return
// }
//}
//
//var orders []model.Order
//err = h.DB.Find(&orders).Error
//if err != nil {
// resp.ERROR(c, err.Error())
// return
//}
//for _, order := range orders {
// if order.PayWay == "支付宝" {
// order.PayWay = "alipay"
// order.PayType = "alipay"
// } else if order.PayWay == "微信支付" {
// order.PayWay = "wechat"
// order.PayType = "wxpay"
// } else if order.PayWay == "hupi" {
// order.PayType = "wxpay"
// }
// err = tx.Save(&order).Error
// if err != nil {
// resp.ERROR(c, err.Error())
// tx.Rollback()
// return
// }
//}
//tx.Commit()
//err = h.levelDB.Put(version, true)
//if err != nil {
// resp.ERROR(c, err.Error())
// return
//}
//resp.SUCCESS(c)
}

254
api/handler/admin/image_handler.go Normal file
View File

@ -0,0 +1,254 @@
package admin
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// * Copyright 2023 The Geek-AI Authors. All rights reserved.
// * Use of this source code is governed by a Apache-2.0 license
// * that can be found in the LICENSE file.
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import (
"fmt"
"geekai/core"
"geekai/core/types"
"geekai/handler"
"geekai/service"
"geekai/service/oss"
"geekai/store/model"
"geekai/store/vo"
"geekai/utils"
"geekai/utils/resp"
"github.com/gin-gonic/gin"
"gorm.io/gorm"
)
type ImageHandler struct {
handler.BaseHandler
userService *service.UserService
uploader *oss.UploaderManager
}
func NewImageHandler(app *core.AppServer, db *gorm.DB, userService *service.UserService, manager *oss.UploaderManager) *ImageHandler {
return &ImageHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}, userService: userService, uploader: manager}
}
type imageQuery struct {
Prompt string `json:"prompt"`
Username string `json:"username"`
CreatedAt []string `json:"created_at"`
Page int `json:"page"`
PageSize int `json:"page_size"`
}
// MjList Midjourney 任务列表
func (h *ImageHandler) MjList(c *gin.Context) {
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.MidJourneyJob{}).Count(&total)
var list []model.MidJourneyJob
var items = make([]vo.MidJourneyJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.MidJourneyJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
// SdList Stable Diffusion 任务列表
func (h *ImageHandler) SdList(c *gin.Context) {
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.SdJob{}).Count(&total)
var list []model.SdJob
var items = make([]vo.SdJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.SdJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
// DallList DALL-E 任务列表
func (h *ImageHandler) DallList(c *gin.Context) {
var data imageQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.DallJob{}).Count(&total)
var list []model.DallJob
var items = make([]vo.DallJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.DallJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
func (h *ImageHandler) Remove(c *gin.Context) {
id := h.GetInt(c, "id", 0)
tab := c.Query("tab")
tx := h.DB.Begin()
var md, remark, imgURL string
var power, userId, progress int
switch tab {
case "mj":
var job model.MidJourneyJob
if err := h.DB.Where("id", id).First(&job).Error; err != nil {
resp.ERROR(c, "记录不存在")
return
}
tx.Delete(&job)
md = "mid-journey"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
case "sd":
var job model.SdJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = "stable-diffusion"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
case "dall":
var job model.DallJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = "dall-e-3"
power = job.Power
userId = int(job.UserId)
remark = fmt.Sprintf("任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
imgURL = job.ImgURL
break
default:
resp.ERROR(c, types.InvalidArgs)
return
}
if progress != 100 {
err := h.userService.IncreasePower(userId, power, model.PowerLog{
Type: types.PowerRefund,
Model: md,
Remark: remark,
})
if err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
}
tx.Commit()
// remove image
err := h.uploader.GetUploadHandler().Delete(imgURL)
if err != nil {
logger.Error("remove image failed: ", err)
}
resp.SUCCESS(c)
}

200
api/handler/admin/media_handler.go Normal file
View File

@ -0,0 +1,200 @@
package admin
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// * Copyright 2023 The Geek-AI Authors. All rights reserved.
// * Use of this source code is governed by a Apache-2.0 license
// * that can be found in the LICENSE file.
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import (
"fmt"
"geekai/core"
"geekai/core/types"
"geekai/handler"
"geekai/service"
"geekai/service/oss"
"geekai/store/model"
"geekai/store/vo"
"geekai/utils"
"geekai/utils/resp"
"github.com/gin-gonic/gin"
"gorm.io/gorm"
)
type MediaHandler struct {
handler.BaseHandler
userService *service.UserService
uploader *oss.UploaderManager
}
func NewMediaHandler(app *core.AppServer, db *gorm.DB, userService *service.UserService, manager *oss.UploaderManager) *MediaHandler {
return &MediaHandler{BaseHandler: handler.BaseHandler{App: app, DB: db}, userService: userService, uploader: manager}
}
type mediaQuery struct {
Prompt string `json:"prompt"`
Username string `json:"username"`
CreatedAt []string `json:"created_at"`
Page int `json:"page"`
PageSize int `json:"page_size"`
}
// SunoList Suno 任务列表
func (h *MediaHandler) SunoList(c *gin.Context) {
var data mediaQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.SunoJob{}).Count(&total)
var list []model.SunoJob
var items = make([]vo.SunoJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.SunoJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
// LumaList Luma 视频任务列表
func (h *MediaHandler) LumaList(c *gin.Context) {
var data mediaQuery
if err := c.ShouldBindJSON(&data); err != nil {
resp.ERROR(c, types.InvalidArgs)
return
}
session := h.DB.Session(&gorm.Session{})
if data.Username != "" {
var user model.User
err := h.DB.Where("username", data.Username).First(&user).Error
if err == nil {
session = session.Where("user_id", user.Id)
}
}
if data.Prompt != "" {
session = session.Where("prompt LIKE ?", "%"+data.Prompt+"%")
}
if len(data.CreatedAt) == 2 {
session = session.Where("created_at >= ? AND created_at <= ?", data.CreatedAt[0], data.CreatedAt[1])
}
var total int64
session.Model(&model.VideoJob{}).Count(&total)
var list []model.VideoJob
var items = make([]vo.VideoJob, 0)
offset := (data.Page - 1) * data.PageSize
err := session.Order("id DESC").Offset(offset).Limit(data.PageSize).Find(&list).Error
if err == nil {
// 填充数据
for _, item := range list {
var job vo.VideoJob
err = utils.CopyObject(item, &job)
if err != nil {
continue
}
job.CreatedAt = item.CreatedAt.Unix()
if job.VideoURL == "" {
job.VideoURL = job.WaterURL
}
items = append(items, job)
}
}
resp.SUCCESS(c, vo.NewPage(total, data.Page, data.PageSize, items))
}
func (h *MediaHandler) Remove(c *gin.Context) {
id := h.GetInt(c, "id", 0)
tab := c.Query("tab")
tx := h.DB.Begin()
var md, remark, fileURL string
var power, userId, progress int
switch tab {
case "suno":
var job model.SunoJob
if err := h.DB.Where("id", id).First(&job).Error; err != nil {
resp.ERROR(c, "记录不存在")
return
}
tx.Delete(&job)
md = "suno"
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("SUNO 任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
fileURL = job.AudioURL
break
case "luma":
var job model.VideoJob
if res := h.DB.Where("id", id).First(&job); res.Error != nil {
resp.ERROR(c, "记录不存在")
return
}
// 删除任务
tx.Delete(&job)
md = job.Type
power = job.Power
userId = job.UserId
remark = fmt.Sprintf("LUMA 任务失败，退回算力。任务ID：%d，Err: %s", job.Id, job.ErrMsg)
progress = job.Progress
fileURL = job.VideoURL
if fileURL == "" {
fileURL = job.WaterURL
}
break
default:
resp.ERROR(c, types.InvalidArgs)
return
}
if progress != 100 {
err := h.userService.IncreasePower(userId, power, model.PowerLog{
Type: types.PowerRefund,
Model: md,
Remark: remark,
})
if err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
}
tx.Commit()
// remove image
err := h.uploader.GetUploadHandler().Delete(fileURL)
if err != nil {
logger.Error("remove image failed: ", err)
}
resp.SUCCESS(c)
}

10
api/handler/admin/redeem_handler.go
View File

@ -146,19 +146,15 @@ func (h *RedeemHandler) Set(c *gin.Context) {
}
func (h *RedeemHandler) Remove(c *gin.Context) {
var data struct {
Id uint
}
if err := c.ShouldBindJSON(&data); err != nil {
id := h.GetInt(c, "id", 0)
if id <= 0 {
resp.ERROR(c, types.InvalidArgs)
return
}
if data.Id > 0 {
err := h.DB.Where("id", data.Id).Delete(&model.Redeem{}).Error
err := h.DB.Where("id", id).Delete(&model.Redeem{}).Error
if err != nil {
resp.ERROR(c, err.Error())
return
}
}
resp.SUCCESS(c)
}

7
api/handler/dalle_handler.go
View File

@ -180,12 +180,7 @@ func (h *DallJobHandler) Remove(c *gin.Context) {
// 删除任务
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(int(job.UserId), job.Power, model.PowerLog{

7
api/handler/mj_handler.go
View File

@ -403,12 +403,7 @@ func (h *MidJourneyHandler) Remove(c *gin.Context) {
// remove job recode
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{

3
api/handler/payment_handler.go
View File

@ -17,7 +17,6 @@ import (
"geekai/store/model"
"geekai/utils"
"geekai/utils/resp"
"github.com/shopspring/decimal"
"net/http"
"sync"
"time"
@ -105,7 +104,7 @@ func (h *PaymentHandler) Pay(c *gin.Context) {
return
}
amount, _ := decimal.NewFromFloat(product.Price).Sub(decimal.NewFromFloat(product.Discount)).Float64()
amount := product.Discount
var payURL, returnURL, notifyURL string
switch data.PayWay {
case "alipay":

128
api/handler/realtime_handler.go Normal file
View File

@ -0,0 +1,128 @@
package handler
import (
"fmt"
"geekai/core"
"geekai/store/model"
"github.com/gin-gonic/gin"
"github.com/gorilla/websocket"
"gorm.io/gorm"
"net/http"
"strings"
"time"
)
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// * Copyright 2023 The Geek-AI Authors. All rights reserved.
// * Use of this source code is governed by a Apache-2.0 license
// * that can be found in the LICENSE file.
// * @Author yangjian102621@163.com
// * +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// OpenAI Realtime API Relay Server
type RealtimeHandler struct {
BaseHandler
}
func NewRealtimeHandler(server *core.AppServer, db *gorm.DB) *RealtimeHandler {
return &RealtimeHandler{BaseHandler{App: server, DB: db}}
}
func (h *RealtimeHandler) Connection(c *gin.Context) {
// 获取客户端请求中指定的子协议
clientProtocols := c.GetHeader("Sec-WebSocket-Protocol")
md := c.Query("model")
userId := h.GetLoginUserId(c)
var user model.User
if err := h.DB.Where("id", userId).First(&user).Error; err != nil {
c.Abort()
return
}
// 将 HTTP 协议升级为 Websocket 协议
subProtocols := strings.Split(clientProtocols, ",")
ws, err := (&websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool { return true },
Subprotocols: subProtocols,
}).Upgrade(c.Writer, c.Request, nil)
if err != nil {
logger.Error(err)
c.Abort()
return
}
defer ws.Close()
// 目前只针对 VIP 用户可以访问
if !user.Vip {
sendError(ws, "当前功能只针对 VIP 用户开放")
c.Abort()
return
}
var apiKey model.ApiKey
h.DB.Where("type", "realtime").Where("enabled", true).Order("last_used_at ASC").First(&apiKey)
if apiKey.Id == 0 {
sendError(ws, "管理员未配置 Realtime API KEY")
c.Abort()
return
}
apiURL := fmt.Sprintf("%s/v1/realtime?model=%s", apiKey.ApiURL, md)
// 连接到真实的后端服务器，传入相同的子协议
headers := http.Header{}
// 修正子协议内容
subProtocols[1] = "openai-insecure-api-key." + apiKey.Value
if clientProtocols != "" {
headers.Set("Sec-WebSocket-Protocol", strings.Join(subProtocols, ","))
}
backendConn, _, err := websocket.DefaultDialer.Dial(apiURL, headers)
if err != nil {
sendError(ws, "桥接后端 API 失败："+err.Error())
c.Abort()
return
}
defer backendConn.Close()
// 确保协议一致性，如果失败返回
if ws.Subprotocol() != backendConn.Subprotocol() {
sendError(ws, "Websocket 子协议不匹配")
c.Abort()
return
}
// 更新API KEY 最后使用时间
h.DB.Model(&model.ApiKey{}).Where("id", apiKey.Id).UpdateColumn("last_used_at", time.Now().Unix())
// 开始双向转发
errorChan := make(chan error, 2)
go relay(ws, backendConn, errorChan)
go relay(backendConn, ws, errorChan)
// 等待其中一个连接关闭
err = <-errorChan
logger.Infof("Relay ended: %v", err)
}
func relay(src, dst *websocket.Conn, errorChan chan error) {
for {
messageType, message, err := src.ReadMessage()
if err != nil {
errorChan <- err
return
}
err = dst.WriteMessage(messageType, message)
if err != nil {
errorChan <- err
return
}
}
}
func sendError(ws *websocket.Conn, message string) {
err := ws.WriteJSON(map[string]string{"event_id": "event_01", "type": "error", "error": message})
if err != nil {
logger.Error(err)
}
}

9
api/handler/sd_handler.go
View File

@ -250,18 +250,13 @@ func (h *SdJobHandler) Remove(c *gin.Context) {
// 删除任务
tx := h.DB.Begin()
if err := tx.Delete(&job).Error; err != nil {
tx.Rollback()
resp.ERROR(c, err.Error())
return
}
tx.Delete(&job)
// 如果任务未完成，或者任务失败，则恢复用户算力
if job.Progress != 100 {
err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{
Type: types.PowerRefund,
Model: "stable-diffusion",
Remark: fmt.Sprintf("任务失败，退回算力。任务ID：%s， Err: %s", job.TaskId, job.ErrMsg),
Remark: fmt.Sprintf("任务失败，退回算力。任务ID：%d， Err: %s", job.Id, job.ErrMsg),
})
if err != nil {
tx.Rollback()

3
api/handler/video_handler.go
View File

@ -156,6 +156,9 @@ func (h *VideoHandler) List(c *gin.Context) {
continue
}
item.CreatedAt = v.CreatedAt.Unix()
if item.VideoURL == "" {
item.VideoURL = v.WaterURL
}
items = append(items, item)
}

7
api/handler/ws_handler.go
View File

@ -18,6 +18,7 @@ import (
"github.com/gorilla/websocket"
"gorm.io/gorm"
"net/http"
"strings"
)
// Websocket 连接处理 handler
@ -37,7 +38,11 @@ func NewWebsocketHandler(app *core.AppServer, s *service.WebsocketService, db *g
}
func (h *WebsocketHandler) Client(c *gin.Context) {
ws, err := (&websocket.Upgrader{CheckOrigin: func(r *http.Request) bool { return true }}).Upgrade(c.Writer, c.Request, nil)
clientProtocols := c.GetHeader("Sec-WebSocket-Protocol")
ws, err := (&websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool { return true },
Subprotocols: strings.Split(clientProtocols, ","),
}).Upgrade(c.Writer, c.Request, nil)
if err != nil {
logger.Error(err)
c.Abort()

21
api/main.go
View File

@ -349,7 +349,7 @@ func main() {
group.GET("list", h.List)
group.POST("create", h.Create)
group.POST("set", h.Set)
group.POST("remove", h.Remove)
group.GET("remove", h.Remove)
}),
fx.Invoke(func(s *core.AppServer, h *admin.DashboardHandler) {
group := s.Engine.Group("/api/admin/dashboard/")
@ -539,6 +539,25 @@ func main() {
},
})
}),
fx.Provide(admin.NewImageHandler),
fx.Invoke(func(s *core.AppServer, h *admin.ImageHandler) {
group := s.Engine.Group("/api/admin/image")
group.POST("/list/mj", h.MjList)
group.POST("/list/sd", h.SdList)
group.POST("/list/dall", h.DallList)
group.GET("/remove", h.Remove)
}),
fx.Provide(admin.NewMediaHandler),
fx.Invoke(func(s *core.AppServer, h *admin.MediaHandler) {
group := s.Engine.Group("/api/admin/media")
group.POST("/list/suno", h.SunoList)
group.POST("/list/luma", h.LumaList)
group.GET("/remove", h.Remove)
}),
fx.Provide(handler.NewRealtimeHandler),
fx.Invoke(func(s *core.AppServer, h *handler.RealtimeHandler) {
s.Engine.Any("/api/realtime", h.Connection)
}),
)
// 启动应用程序
go func() {

4
api/store/vo/mj_job.go
View File

@ -1,7 +1,5 @@
package vo
import "time"
type MidJourneyJob struct {
Id uint `json:"id"`
Type string `json:"type"`
@ -19,5 +17,5 @@ type MidJourneyJob struct {
Publish bool `json:"publish"`
ErrMsg string `json:"err_msg"`
Power int `json:"power"`
CreatedAt time.Time `json:"created_at"`
CreatedAt int64 `json:"created_at"`
}

3
api/store/vo/sd_job.go
View File

@ -2,7 +2,6 @@ package vo
import (
"geekai/core/types"
"time"
)
type SdJob struct {
@ -17,5 +16,5 @@ type SdJob struct {
Publish bool `json:"publish"`
ErrMsg string `json:"err_msg"`
Power int `json:"power"`
CreatedAt time.Time `json:"created_at"`
CreatedAt int64 `json:"created_at"`
}

5
database/geekai_plus-v4.1.5.sql
View File

@ -3,11 +3,6 @@
-- https://www.phpmyadmin.net/
--
-- 主机： 127.0.0.1
<<<<<<<< HEAD:database/geekai_plus-v4.1.5.sql
-- 生成日期： 2024-09-30 17:03:37
========
-- 生成日期： 2024-09-23 14:54:46
>>>>>>>> 5213bdf08ba96a15d550a92e561a29a71a3ac841:deploy/data/mysql/init.d/geekai_plus-v4.1.4.sql
-- 服务器版本： 8.0.33
-- PHP 版本： 8.1.2-1ubuntu2.18

1
database/update-v4.1.6.sql Normal file
View File

@ -0,0 +1 @@
ALTER TABLE `chatgpt_chat_models` CHANGE `value` `value` VARCHAR(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '模型值';

21
deploy/data/mysql/init.d/geekai_plus-v4.1.5.sql → deploy/data/mysql/init.d/geekai_plus-v4.1.6.sql
View File

@ -3,9 +3,9 @@
-- https://www.phpmyadmin.net/
--
-- 主机： 127.0.0.1
-- 生成日期： 2024-09-30 17:03:37
-- 生成日期： 2024-10-23 18:15:28
-- 服务器版本： 8.0.33
-- PHP 版本： 8.1.2-1ubuntu2.18
-- PHP 版本： 8.1.2-1ubuntu2.19
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
@ -47,7 +47,7 @@ CREATE TABLE `chatgpt_admin_users` (
--
INSERT INTO `chatgpt_admin_users` (`id`, `username`, `password`, `salt`, `status`, `last_login_at`, `last_login_ip`, `created_at`, `updated_at`) VALUES
(1, 'admin', '6d17e80c87d209efb84ca4b2e0824f549d09fac8b2e1cc698de5bb5e1d75dfd0', 'mmrql75o', 1, 1727062596, '::1', '2024-03-11 16:30:20', '2024-09-23 11:36:37');
(1, 'admin', '6d17e80c87d209efb84ca4b2e0824f549d09fac8b2e1cc698de5bb5e1d75dfd0', 'mmrql75o', 1, 1729506124, '172.22.11.200', '2024-03-11 16:30:20', '2024-10-21 18:22:04');
-- --------------------------------------------------------
@ -69,7 +69,6 @@ CREATE TABLE `chatgpt_api_keys` (
`updated_at` datetime NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='OpenAI API ';
-- --------------------------------------------------------
--
-- 表的结构 `chatgpt_app_types`
@ -139,7 +138,7 @@ DROP TABLE IF EXISTS `chatgpt_chat_models`;
CREATE TABLE `chatgpt_chat_models` (
`id` int NOT NULL,
`name` varchar(50) NOT NULL COMMENT '模型名称',
`value` varchar(50) NOT NULL COMMENT '模型值',
`value` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT '模型值',
`sort_num` tinyint(1) NOT NULL COMMENT '排序数字',
`enabled` tinyint(1) NOT NULL DEFAULT '0' COMMENT '是否启用模型',
`power` smallint NOT NULL COMMENT '消耗算力点数',
@ -161,7 +160,7 @@ INSERT INTO `chatgpt_chat_models` (`id`, `name`, `value`, `sort_num`, `enabled`,
(15, 'GPT-超级模型', 'gpt-4-all', 4, 1, 30, 1.0, 4096, 32768, 1, 0, '2024-01-15 11:32:52', '2024-09-13 18:01:08'),
(36, 'GPT-4O', 'gpt-4o', 3, 1, 15, 1.0, 4096, 16384, 1, 66, '2024-05-14 09:25:15', '2024-09-29 19:08:53'),
(39, 'Claude35-snonet', 'claude-3-5-sonnet-20240620', 5, 1, 2, 1.0, 4000, 200000, 1, 0, '2024-05-29 15:04:19', '2024-09-14 18:07:25'),
(41, '通义千问', 'qwen-turbo', 7, 1, 2, 1.0, 1024, 8192, 1, 44, '2024-06-06 11:40:46', '2024-08-06 10:51:37'),
(41, 'Suno对话模型', 'suno-v3.5', 7, 1, 10, 1.0, 1024, 8192, 1, 57, '2024-06-06 11:40:46', '2024-10-14 15:07:05'),
(42, 'DeekSeek', 'deepseek-chat', 8, 1, 1, 1.0, 4096, 32768, 1, 0, '2024-06-27 16:13:01', '2024-08-05 16:05:33'),
(44, 'Claude3-opus', 'claude-3-opus-20240229', 6, 1, 5, 1.0, 4000, 128000, 1, 44, '2024-07-22 11:24:30', '2024-09-04 10:32:29'),
(46, 'gpt-3.5-turbo', 'gpt-3.5-turbo', 2, 1, 1, 1.0, 1024, 4096, 1, 73, '2024-07-22 13:53:41', '2024-09-13 18:00:47'),
@ -234,7 +233,7 @@ CREATE TABLE `chatgpt_configs` (
INSERT INTO `chatgpt_configs` (`id`, `marker`, `config_json`) VALUES
(1, 'system', '{\"title\":\"GeekAI 创作助手\",\"slogan\":\"我辈之人，先干为敬，让每一个人都能用好AI\",\"admin_title\":\"GeekAI 控制台\",\"logo\":\"/images/logo.png\",\"init_power\":100,\"invite_power\":200,\"vip_month_power\":1000,\"register_ways\":[\"username\",\"email\",\"mobile\"],\"enabled_register\":true,\"order_pay_timeout\":600,\"vip_info_text\":\"月度会员，年度会员每月赠送 1000 点算力，赠送算力当月有效当月没有消费完的算力不结余到下个月。 点卡充值的算力长期有效。\",\"default_models\":[1],\"mj_power\":20,\"mj_action_power\":5,\"sd_power\":5,\"dall_power\":10,\"suno_power\":10,\"luma_power\":120,\"wechat_card_url\":\"/images/wx.png\",\"enable_context\":true,\"context_deep\":4,\"sd_neg_prompt\":\"nsfw, paintings,low quality,easynegative,ng_deepnegative ,lowres,bad anatomy,bad hands,bad feet\",\"mj_mode\":\"fast\",\"index_bg_url\":\"color\",\"index_navs\":[1,5,13,19,9,12,6,20,8,10],\"copyright\":\"极客学长 © 2022- 2024 All rights reserved\",\"mark_map_text\":\"# GeekAI 演示站\\n\\n- 完整的开源系统，前端应用和后台管理系统皆可开箱即用。\\n- 基于 Websocket 实现，完美的打字机体验。\\n- 内置了各种预训练好的角色应用,轻松满足你的各种聊天和应用需求。\\n- 支持 OPenAI，Azure，文心一言，讯飞星火，清华 ChatGLM等多个大语言模型。\\n- 支持 MidJourney / Stable Diffusion AI 绘画集成，开箱即用。\\n- 支持使用个人微信二维码作为充值收费的支付渠道，无需企业支付通道。\\n- 已集成支付宝支付功能，微信支付，支持多种会员套餐和点卡购买功能。\\n- 集成插件 API 功能，可结合大语言模型的 function 功能开发各种强大的插件。\",\"enabled_verify\":false,\"email_white_list\":[\"qq.com\",\"163.com\",\"gmail.com\",\"hotmail.com\",\"126.com\",\"outlook.com\",\"foxmail.com\",\"yahoo.com\"]}'),
(3, 'notice', '{\"sd_neg_prompt\":\"\",\"mj_mode\":\"\",\"index_bg_url\":\"\",\"index_navs\":null,\"copyright\":\"\",\"mark_map_text\":\"\",\"enabled_verify\":false,\"email_white_list\":null,\"content\":\"## v4.1.5 更新日志\\n\\n* 功能优化：重构 websocket 组件，减少 websocket 连接数，全站共享一个 websocket 连接\\n* Bug修复：兼容手机端原生微信支付和支付宝支付渠道\\n* Bug修复：修复删除绘图任务时候因为字段长度过短导致SQL执行失败问题\\n* 功能优化：优化 Vue 组件通信代码，使用共享数据来替换之前的事件订阅模式，效率更高一些\\n* 功能优化：优化思维导图生成功果页面，优化用户体验\\n\\n注意：当前站点仅为开源项目 \\u003ca style=\\\"color: #F56C6C\\\" href=\\\"https://github.com/yangjian102621/geekai\\\" target=\\\"_blank\\\"\\u003eGeekAI-Plus\\u003c/a\\u003e 的演示项目，本项目单纯就是给大家体验项目功能使用。\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n 如果觉得好用你就花几分钟自己部署一套，没有API KEY 的同学可以去下面几个推荐的中转站购买：\\n1、\\u003ca href=\\\"https://api.chat-plus.net\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://api.chat-plus.net\\u003c/a\\u003e\\n2、\\u003ca href=\\\"https://api.geekai.me\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://api.geekai.me\\u003c/a\\u003e\\n支持MidJourney，GPT，Claude，Google Gemmi，以及国内各个厂家的大模型，现在有超级优惠，价格远低于 OpenAI 官方。关于中转 API 的优势和劣势请参考 [中转API技术原理](https://docs.geekai.me/config/chat/#%E4%B8%AD%E8%BD%ACapi%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86)。GPT-3.5，GPT-4，DALL-E3 绘图......你都可以随意使用，无需魔法。\\n接入教程： \\u003ca href=\\\"https://docs.geekai.me\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://docs.geekai.me\\u003c/a\\u003e\\n本项目源码地址：\\u003ca href=\\\"https://github.com/yangjian102621/geekai\\\" target=\\\"_blank\\\"\\u003ehttps://github.com/yangjian102621/geekai\\u003c/a\\u003e\",\"updated\":true}');
(3, 'notice', '{\"sd_neg_prompt\":\"\",\"mj_mode\":\"\",\"index_bg_url\":\"\",\"index_navs\":null,\"copyright\":\"\",\"mark_map_text\":\"\",\"enabled_verify\":false,\"email_white_list\":null,\"content\":\"## v4.1.6 更新日志\\n\\n* 功能新增：**支持OpenAI实时语音对话功能** Beta 版，目前没有做算力计费控制，目前只有 VIP 用户可以使用。\\n* 功能优化：优化MysQL容器配置文档，解决MysQL容器资源占用过高问题\\n* 功能新增：管理后台增加AI绘图任务管理，可在管理后台浏览和删除用户的绘图任务\\n* 功能新增：管理后台增加Suno和Luma任务管理功能\\n* Bug修复：修复管理后台删除兑换码报 404 错误\\n* 功能优化：优化充值产品定价逻辑，可以设置原价和优惠价，**升级当前版本之后请务必要到管理后台去重新设置一下产品价格，以免造成损失！！！\\n\\n注意：当前站点仅为开源项目 \\u003ca style=\\\"color: #F56C6C\\\" href=\\\"https://github.com/yangjian102621/geekai\\\" target=\\\"_blank\\\"\\u003eGeekAI-Plus\\u003c/a\\u003e 的演示项目，本项目单纯就是给大家体验项目功能使用。\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n\\u003cstrong style=\\\"color: #F56C6C\\\"\\u003e体验额度用完之后请不要在当前站点进行任何充值操作！！！\\u003c/strong\\u003e\\n 如果觉得好用你就花几分钟自己部署一套，没有API KEY 的同学可以去下面几个推荐的中转站购买：\\n1、\\u003ca href=\\\"https://api.chat-plus.net\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://api.chat-plus.net\\u003c/a\\u003e\\n2、\\u003ca href=\\\"https://api.geekai.me\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://api.geekai.me\\u003c/a\\u003e\\n支持MidJourney，GPT，Claude，Google Gemmi，以及国内各个厂家的大模型，现在有超级优惠，价格远低于 OpenAI 官方。关于中转 API 的优势和劣势请参考 [中转API技术原理](https://docs.geekai.me/config/chat/#%E4%B8%AD%E8%BD%ACapi%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86)。GPT-3.5，GPT-4，DALL-E3 绘图......你都可以随意使用，无需魔法。\\n接入教程： \\u003ca href=\\\"https://docs.geekai.me\\\" target=\\\"_blank\\\"\\n style=\\\"font-size: 20px;color:#F56C6C\\\"\\u003ehttps://docs.geekai.me\\u003c/a\\u003e\\n本项目源码地址：\\u003ca href=\\\"https://github.com/yangjian102621/geekai\\\" target=\\\"_blank\\\"\\u003ehttps://github.com/yangjian102621/geekai\\u003c/a\\u003e\",\"updated\":true}');
-- --------------------------------------------------------
@ -471,8 +470,8 @@ CREATE TABLE `chatgpt_products` (
--
INSERT INTO `chatgpt_products` (`id`, `name`, `price`, `discount`, `days`, `power`, `enabled`, `sales`, `sort_num`, `created_at`, `updated_at`, `app_url`, `url`) VALUES
(5, '100次点卡', 9.99, 9.88, 0, 100, 1, 19, 0, '2023-08-28 10:55:08', '2024-09-18 16:41:10', NULL, NULL),
(6, '200次点卡', 19.90, 15.00, 0, 200, 1, 2, 2, '1970-01-01 08:00:00', '2024-08-05 16:05:46', NULL, NULL);
(5, '100次点卡', 9.99, 6.99, 0, 100, 1, 0, 0, '2023-08-28 10:55:08', '2024-10-23 18:12:29', NULL, NULL),
(6, '200次点卡', 19.90, 15.99, 0, 200, 1, 0, 0, '1970-01-01 08:00:00', '2024-10-23 18:12:36', NULL, NULL);
-- --------------------------------------------------------
@ -584,7 +583,7 @@ CREATE TABLE `chatgpt_users` (
--
INSERT INTO `chatgpt_users` (`id`, `username`, `mobile`, `email`, `nickname`, `password`, `avatar`, `salt`, `power`, `expired_time`, `status`, `chat_config_json`, `chat_roles_json`, `chat_models_json`, `last_login_at`, `vip`, `last_login_ip`, `openid`, `platform`, `created_at`, `updated_at`) VALUES
(4, '18888888888', '18575670126', '', '极客学长', 'ccc3fb7ab61b8b5d096a4a166ae21d121fc38c71bbd1be6173d9ab973214a63b', 'http://localhost:5678/static/upload/2024/5/1715651569509929.png', 'ueedue5l', 5823, 0, 1, '{\"api_keys\":{\"Azure\":\"\",\"ChatGLM\":\"\",\"OpenAI\":\"\"}}', '[\"gpt\",\"programmer\",\"teacher\"]', '[1]', 1727683253, 1, '172.22.11.200', 'oCs0t64FaOLfiTbHZpOqk3aUp_94', NULL, '2023-06-12 16:47:17', '2024-09-30 16:00:53'),
(4, '18888888888', '18575670126', '', '极客学长', 'ccc3fb7ab61b8b5d096a4a166ae21d121fc38c71bbd1be6173d9ab973214a63b', 'http://localhost:5678/static/upload/2024/5/1715651569509929.png', 'ueedue5l', 6051, 0, 1, '{\"api_keys\":{\"Azure\":\"\",\"ChatGLM\":\"\",\"OpenAI\":\"\"}}', '[\"gpt\",\"programmer\",\"teacher\"]', '[1]', 1729650760, 1, '::1', 'oCs0t64FaOLfiTbHZpOqk3aUp_94', NULL, '2023-06-12 16:47:17', '2024-10-23 10:32:40'),
(42, 'yangjian@pvc123.com', '', 'yangjian@pvc123.com', '极客学长@263103', '672992fe8be51df479b9727cf70ca2ae26bc6a6c0c51ff8f836d3a8748387632', '/images/avatar/user.png', 'ahmgvvgc', 99, 0, 1, '', '[\"gpt\"]', '[1]', 1726133100, 0, '::1', '', '', '2024-09-12 15:08:52', '2024-09-12 17:25:00'),
(43, '18575670125', '18575670125', '', '极客学长@394312', '83a5f04d5fea15419c2a324d5fcc8e1f93f62c2e2f5b883307d591ee92234fcc', '/images/avatar/user.png', 'rfml917k', 100, 0, 1, '', '[\"gpt\"]', '[1]', 1726132554, 0, '::1', '', '', '2024-09-12 15:38:38', '2024-09-12 17:15:55'),
(44, '13666666666', '13666666666', '', '极客学长@172197', '2c57a40f938d2ee134dffdf0fba6c45907b9bcf1c6decab8f57f034e39b71b26', '/images/avatar/user.png', 'f9wlaiuy', 83, 0, 1, '', '[\"gpt\"]', '[1]', 0, 0, '', '', '', '2024-09-20 11:55:53', '2024-09-20 16:47:31');
@ -808,7 +807,7 @@ ALTER TABLE `chatgpt_admin_users`
-- 使用表AUTO_INCREMENT `chatgpt_api_keys`
--
ALTER TABLE `chatgpt_api_keys`
MODIFY `id` int NOT NULL AUTO_INCREMENT;
MODIFY `id` int NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=77;
--
-- 使用表AUTO_INCREMENT `chatgpt_app_types`

4
deploy/docker-compose.yaml
View File

@ -68,7 +68,7 @@ services:
# 后端 API 程序
geekai-api:
image: registry.cn-shenzhen.aliyuncs.com/geekmaster/geekai-api:v4.1.5-amd64
image: registry.cn-shenzhen.aliyuncs.com/geekmaster/geekai-api:v4.1.6-amd64
container_name: geekai-api
restart: always
depends_on:
@ -92,7 +92,7 @@ services:
# 前端应用
geekai-web:
image: registry.cn-shenzhen.aliyuncs.com/geekmaster/geekai-web:v4.1.5-amd64
image: registry.cn-shenzhen.aliyuncs.com/geekmaster/geekai-web:v4.1.6-amd64
container_name: geekai-web
restart: always
depends_on:

2
web/.env.development
View File

@ -6,6 +6,6 @@ VUE_APP_ADMIN_USER=admin
VUE_APP_ADMIN_PASS=admin123
VUE_APP_KEY_PREFIX=GeekAI_DEV_
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.1.5
VUE_APP_VERSION=v4.1.6
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

2
web/.env.production
View File

@ -1,7 +1,7 @@
VUE_APP_API_HOST=
VUE_APP_WS_HOST=
VUE_APP_KEY_PREFIX=GeekAI_
VUE_APP_VERSION=v4.1.5
VUE_APP_TITLE="Geek-AI 创作系统"
VUE_APP_VERSION=v4.1.6
VUE_APP_DOCS_URL=https://docs.geekai.me
VUE_APP_GIT_URL=https://github.com/yangjian102621/geekai

54
web/package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
"axios": "^0.27.2",
"clipboard": "^2.0.11",
"compressorjs": "^1.2.1",
@ -27,7 +28,6 @@
"markmap-view": "^0.16.0",
"md-editor-v3": "^2.2.1",
"memfs": "^4.9.3",
"mitt": "^3.0.1",
"pinia": "^2.1.4",
"qrcode": "^1.5.3",
"qs": "^6.11.1",
@ -2022,6 +2022,33 @@
"node": ">= 8"
}
},
"node_modules/@openai/realtime-api-beta": {
"version": "0.0.0",
"resolved": "git+ssh://git@github.com/openai/openai-realtime-api-beta.git#339e9553a757ef1cf8c767272fc750c1e62effbb",
"dependencies": {
"ws": "^8.18.0"
}
},
"node_modules/@openai/realtime-api-beta/node_modules/ws": {
"version": "8.18.0",
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
"engines": {
"node": ">=10.0.0"
},
"peerDependencies": {
"bufferutil": "^4.0.1",
"utf-8-validate": ">=5.0.2"
},
"peerDependenciesMeta": {
"bufferutil": {
"optional": true
},
"utf-8-validate": {
"optional": true
}
}
},
"node_modules/@polka/url": {
"version": "1.0.0-next.21",
"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz",
@ -8769,11 +8796,6 @@
"node": ">=8"
}
},
"node_modules/mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"node_modules/mj-context-menu": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
@ -14196,6 +14218,21 @@
"fastq": "^1.6.0"
}
},
"@openai/realtime-api-beta": {
"version": "git+ssh://git@github.com/openai/openai-realtime-api-beta.git#339e9553a757ef1cf8c767272fc750c1e62effbb",
"from": "@openai/realtime-api-beta@github:openai/openai-realtime-api-beta",
"requires": {
"ws": "^8.18.0"
},
"dependencies": {
"ws": {
"version": "8.18.0",
"resolved": "https://registry.npmmirror.com/ws/-/ws-8.18.0.tgz",
"integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
"requires": {}
}
}
},
"@polka/url": {
"version": "1.0.0-next.21",
"resolved": "https://registry.npmmirror.com/@polka/url/-/url-1.0.0-next.21.tgz",
@ -19700,11 +19737,6 @@
"yallist": "^4.0.0"
}
},
"mitt": {
"version": "3.0.1",
"resolved": "https://registry.npmmirror.com/mitt/-/mitt-3.0.1.tgz",
"integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw=="
},
"mj-context-menu": {
"version": "0.6.1",
"resolved": "https://registry.npmmirror.com/mj-context-menu/-/mj-context-menu-0.6.1.tgz",

1
web/package.json
View File

@ -9,6 +9,7 @@
},
"dependencies": {
"@element-plus/icons-vue": "^2.1.0",
"@openai/realtime-api-beta": "github:openai/openai-realtime-api-beta",
"axios": "^0.27.2",
"clipboard": "^2.0.11",
"compressorjs": "^1.2.1",

BIN
web/public/medias/calling.mp3 Normal file
View File

Binary file not shown.

BIN
web/public/medias/hang-up.mp3 Normal file
View File

Binary file not shown.

6
web/src/App.vue
View File

@ -12,8 +12,6 @@ import {isChrome, isMobile} from "@/utils/libs";
import {showMessageInfo} from "@/utils/dialog";
import {useSharedStore} from "@/store/sharedata";
import {getUserToken} from "@/store/session";
import {router} from "@/router";
import {onBeforeRouteLeave, onBeforeRouteUpdate} from "vue-router";
const debounce = (fn, delay) => {
let timer
@ -71,7 +69,7 @@ const connect = () => {
}
}
const clientId = getClientId()
const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}&token=${getUserToken()}`);
const _socket = new WebSocket(host + `/api/ws?client_id=${clientId}`,["token",getUserToken()]);
_socket.addEventListener('open', () => {
console.log('WebSocket 已连接')
handler.value = setInterval(() => {
@ -116,7 +114,7 @@ html, body {
margin 0;
.el-dialog__body {
max-height 80vh
//max-height 80vh
overflow-y auto
}
}

2
web/src/assets/css/chat-plus.styl
View File

@ -14,7 +14,7 @@ $borderColor = #4676d0;
padding 10px
width var(--el-aside-width, 320px)
.chat-list {
.media-page {
display: flex
flex-flow: column
//background-color: $sideBgColor

3
web/src/assets/css/member.styl
View File

@ -112,8 +112,9 @@
justify-content right
}
.price {
.discount {
color #f56c6c
font-size 20px
}
.expire {

189
web/src/assets/css/realtime.styl Normal file
View File

@ -0,0 +1,189 @@
.realtime-conversation {
/********************** connection ****************************/
.connection-container {
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
width 100%
.phone-container {
position: relative;
width: 200px;
height: 200px;
}
.phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #00ffcc;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
mask-size: cover;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-webkit-mask-size: cover;
animation: shake 0.5s ease-in-out infinite;
}
.signal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px dashed #00ffcc;
border-radius: 50%;
opacity: 0;
animation: signal 2s linear infinite;
}
.signal:nth-child(2) {
animation-delay: 0.5s;
}
.signal:nth-child(3) {
animation-delay: 1s;
}
.status-text {
color: #00ffcc;
font-size: 18px;
margin-top: 20px;
height: 1.2em;
overflow: hidden;
}
@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-52%, -48%) rotate(-5deg); }
75% { transform: translate(-48%, -52%) rotate(5deg); }
}
@keyframes signal {
0% {
width: 60px;
height: 60px;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
}
/*********** end of connection ************/
.conversation-container {
background: linear-gradient(to right, #2c3e50, #4a5568, #6b46c1);
display: flex;
height 100%
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 0;
width 100%
.wave-container {
padding 3rem
.wave-animation {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
.wave-ellipse {
width: 40px;
height: 40px;
background-color: white;
border-radius: 20px;
animation: wave 0.8s infinite ease-in-out;
}
.wave-ellipse:nth-child(odd) {
height: 60px;
}
.wave-ellipse:nth-child(even) {
height: 80px;
}
}
}
@keyframes wave {
0%, 100% {
transform: scaleY(0.8);
}
50% {
transform: scaleY(1.2);
}
}
.wave-ellipse:nth-child(2) {
animation-delay: 0.1s;
}
.wave-ellipse:nth-child(3) {
animation-delay: 0.2s;
}
.wave-ellipse:nth-child(4) {
animation-delay: 0.3s;
}
.wave-ellipse:nth-child(5) {
animation-delay: 0.4s;
}
.voice-indicators {
display flex
flex-flow row
justify-content: space-between;
width 100%
}
.call-controls {
display: flex;
justify-content: center;
gap: 3rem;
padding 3rem
.call-button {
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
color: white;
cursor: pointer;
.iconfont {
font-size 24px
}
}
.hangup {
background-color: #e74c3c;
}
.answer {
background-color: #2ecc71;
}
.icon {
font-size: 28px;
}
}
}
}

14
web/src/assets/iconfont/iconfont.css
View File

@ -1,8 +1,8 @@
@font-face {
font-family: "iconfont"; /* Project id 4125778 */
src: url('iconfont.woff2?t=1726622198991') format('woff2'),
url('iconfont.woff?t=1726622198991') format('woff'),
url('iconfont.ttf?t=1726622198991') format('truetype');
src: url('iconfont.woff2?t=1728891448746') format('woff2'),
url('iconfont.woff?t=1728891448746') format('woff'),
url('iconfont.ttf?t=1728891448746') format('truetype');
}
.iconfont {
@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.icon-call:before {
content: "\e769";
}
.icon-hung-up:before {
content: "\e609";
}
.icon-paypal:before {
content: "\e666";
}

2
web/src/assets/iconfont/iconfont.js
View File

File diff suppressed because one or more lines are too long

14
web/src/assets/iconfont/iconfont.json
View File

@ -5,6 +5,20 @@
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"icon_id": "11231556",
"name": "打电话",
"font_class": "call",
"unicode": "e769",
"unicode_decimal": 59241
},
{
"icon_id": "21969717",
"name": "挂机",
"font_class": "hung-up",
"unicode": "e609",
"unicode_decimal": 58889
},
{
"icon_id": "7443846",
"name": "PayPal",

BIN
web/src/assets/iconfont/iconfont.ttf
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff
View File

Binary file not shown.

BIN
web/src/assets/iconfont/iconfont.woff2
View File

Binary file not shown.

BIN
web/src/assets/img/admin-login-bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 455 KiB

BIN
web/src/assets/img/reg-bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 166 KiB

BIN
web/src/assets/img/reg_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 264 KiB

130
web/src/components/Calling.vue Normal file
View File

@ -0,0 +1,130 @@
<template>
<!--拨号组件-->
<el-container class="calling-container" :style="{height: height}">
<div class="phone-container">
<div class="signal"></div>
<div class="signal"></div>
<div class="signal"></div>
<div class="phone"></div>
</div>
<div class="status-text">{{ text }}</div>
</el-container>
</template>
<script setup>
import {onMounted, ref} from "vue";
const fullText = "正在接通中...";
const text = ref("")
let index = 0;
const props = defineProps({
height: {
type: String,
default: '100vh'
}
})
function typeText() {
if (index < fullText.length) {
text.value += fullText[index];
index++;
setTimeout(typeText, 300); // 每300毫秒显示一个字
} else {
setTimeout(() => {
text.value = '';
index = 0;
typeText();
}, 1000); // 等待1秒后重新开始
}
}
onMounted(() => {
typeText()
})
</script>
<style scoped lang="stylus">
.calling-container {
background-color: #000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
overflow: hidden;
font-family: Arial, sans-serif;
width 100vw
.phone-container {
position: relative;
width: 200px;
height: 200px;
}
.phone {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background-color: #00ffcc;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
mask-size: cover;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57a1.02 1.02 0 0 0-1.02.24l-2.2 2.2a15.074 15.074 0 0 1-6.59-6.59l2.2-2.2c.27-.27.35-.68.24-1.02a11.36 11.36 0 0 1-.57-3.57c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1zM5.03 5h1.5c.07.89.22 1.76.46 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79zM19 18.97c-1.32-.09-2.59-.35-3.8-.75l1.2-1.2c.85.24 1.72.39 2.6.45v1.5z'/%3E%3C/svg%3E") no-repeat 50% 50%;
-webkit-mask-size: cover;
animation: shake 0.5s ease-in-out infinite;
}
.signal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border: 2px dashed #00ffcc;
border-radius: 50%;
opacity: 0;
animation: signal 2s linear infinite;
}
.signal:nth-child(2) {
animation-delay: 0.5s;
}
.signal:nth-child(3) {
animation-delay: 1s;
}
.status-text {
color: #00ffcc;
font-size: 18px;
margin-top: 20px;
height: 1.2em;
overflow: hidden;
}
@keyframes shake {
0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
25% { transform: translate(-52%, -48%) rotate(-5deg); }
75% { transform: translate(-48%, -52%) rotate(5deg); }
}
@keyframes signal {
0% {
width: 60px;
height: 60px;
opacity: 1;
}
100% {
width: 200px;
height: 200px;
opacity: 0;
}
}
}
</style>

2
web/src/components/FileList.vue
View File

@ -1,6 +1,6 @@
<template>
<el-container class="chat-file-list">
<div v-for="file in fileList">
<div v-for="file in fileList" :key="file.url">
<div class="image" v-if="isImage(file.ext)">
<el-image :src="file.url" fit="cover"/>
<div class="action">

5
web/src/components/FileSelect.vue
View File

@ -70,7 +70,6 @@ const props = defineProps({
});
const emits = defineEmits(['selected']);
const show = ref(false)
const fileList = ref([])
const scrollbarRef = ref(null)
const fileData = reactive({
items:[],
@ -116,7 +115,7 @@ const afterRead = (file) => {
formData.append('file', file.file, file.name);
// 执行上传操作
httpPost('/api/upload', formData).then((res) => {
fileList.value.unshift(res.data)
fileData.items.unshift(res.data)
ElMessage.success({message: "上传成功", duration: 500})
}).catch((e) => {
ElMessage.error('图片上传失败:' + e.message)
@ -125,7 +124,7 @@ const afterRead = (file) => {
const removeFile = (file) => {
httpGet('/api/upload/remove?id=' + file.id).then(() => {
fileList.value = removeArrayItem(fileList.value, file, (v1, v2) => {
fileData.items = removeArrayItem(fileData.items, file, (v1, v2) => {
return v1.id === v2.id
})
ElMessage.success("文件删除成功！")

335
web/src/components/RealtimeConversation.vue Normal file
View File

@ -0,0 +1,335 @@
<template>
<el-container class="realtime-conversation" :style="{height: height}">
<!-- connection animation -->
<el-container class="connection-container" v-if="!isConnected">
<div class="phone-container">
<div class="signal"></div>
<div class="signal"></div>
<div class="signal"></div>
<div class="phone"></div>
</div>
<div class="status-text">{{ connectingText }}</div>
<audio ref="backgroundAudio" loop>
<source src="/medias/calling.mp3" type="audio/mp3" />
您的浏览器不支持音频元素。
</audio>
<audio ref="hangUpAudio">
<source src="/medias/hang-up.mp3" type="audio/mp3" />
您的浏览器不支持音频元素。
</audio>
</el-container>
<!-- conversation body -->
<div class="conversation-container" v-else>
<div class="wave-container">
<div class="wave-animation">
<div v-for="i in 5" :key="i" class="wave-ellipse"></div>
</div>
</div>
<!-- 其余部分保持不变 -->
<div class="voice-indicators">
<div class="voice-indicator left">
<canvas ref="clientCanvasRef"></canvas>
</div>
<div class="voice-indicator right">
<canvas ref="serverCanvasRef"></canvas>
</div>
</div>
<div class="call-controls">
<el-tooltip content="长按发送语音" placement="top" effect="light">
<ripple-button>
<button class="call-button answer" @mousedown="startRecording" @mouseup="stopRecording">
<i class="iconfont icon-mic-bold"></i>
</button>
</ripple-button>
</el-tooltip>
<el-tooltip content="结束通话" placement="top" effect="light">
<button class="call-button hangup" @click="hangUp">
<i class="iconfont icon-hung-up"></i>
</button>
</el-tooltip>
</div>
</div>
</el-container>
</template>
<script setup>
import RippleButton from "@/components/ui/RippleButton.vue";
import { ref, onMounted, onUnmounted } from 'vue';
import { RealtimeClient } from '@openai/realtime-api-beta';
import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js';
import { instructions } from '@/utils/conversation_config.js';
import { WavRenderer } from '@/utils/wav_renderer';
import {showMessageError} from "@/utils/dialog";
import {getUserToken} from "@/store/session";
// eslint-disable-next-line no-unused-vars,no-undef
const props = defineProps({
height: {
type: String,
default: '100vh'
}
})
// eslint-disable-next-line no-undef
const emits = defineEmits(['close']);
/********************** connection animation code *************************/
const fullText = "正在接通中...";
const connectingText = ref("")
let index = 0;
const typeText = () => {
if (index < fullText.length) {
connectingText.value += fullText[index];
index++;
setTimeout(typeText, 200); // 每300毫秒显示一个字
} else {
setTimeout(() => {
connectingText.value = '';
index = 0;
typeText();
}, 1000); // 等待1秒后重新开始
}
}
/*************************** end of code ****************************************/
/********************** conversation process code ***************************/
const leftVoiceActive = ref(false);
const rightVoiceActive = ref(false);
const animateVoice = () => {
leftVoiceActive.value = Math.random() > 0.5;
rightVoiceActive.value = Math.random() > 0.5;
};
const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
let host = process.env.VUE_APP_WS_HOST
if (host === '') {
if (location.protocol === 'https:') {
host = 'wss://' + location.host;
} else {
host = 'ws://' + location.host;
}
}
const client = ref(
new RealtimeClient({
url: `${host}/api/realtime`,
apiKey: getUserToken(),
dangerouslyAllowAPIKeyInBrowser: true,
})
);
// // Set up client instructions and transcription
client.value.updateSession({
instructions: instructions,
turn_detection: null,
input_audio_transcription: { model: 'whisper-1' },
voice: 'alloy',
});
// set voice wave canvas
const clientCanvasRef = ref(null);
const serverCanvasRef = ref(null);
const isConnected = ref(false);
const isRecording = ref(false);
const backgroundAudio = ref(null);
const hangUpAudio = ref(null);
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
const connect = async () => {
if (isConnected.value) {
return
}
// 播放背景音乐
if (backgroundAudio.value) {
backgroundAudio.value.play().catch(error => {
console.error('播放失败，可能是浏览器的自动播放策略导致的:', error);
});
}
// 模拟拨号延时
await sleep(3000)
try {
await client.value.connect();
await wavRecorder.value.begin();
await wavStreamPlayer.value.connect();
console.log("对话连接成功！")
if (!client.value.isConnected()) {
return
}
isConnected.value = true;
backgroundAudio.value?.pause()
backgroundAudio.value.currentTime = 0
client.value.sendUserMessageContent([
{
type: 'input_text',
text: '你好，我是极客学长!',
},
]);
if (client.value.getTurnDetectionType() === 'server_vad') {
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
}
} catch (e) {
console.error(e)
}
};
// 开始语音输入
const startRecording = async () => {
if (isRecording.value) {
return
}
isRecording.value = true;
try {
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
client.value.cancelResponse(trackId, offset);
}
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
} catch (e) {
console.error(e)
}
};
// 结束语音输入
const stopRecording = async () => {
try {
isRecording.value = false;
await wavRecorder.value.pause();
client.value.createResponse();
} catch (e) {
console.error(e)
}
};
// const changeTurnEndType = async (value) => {
// if (value === 'none' && wavRecorder.value.getStatus() === 'recording') {
// await wavRecorder.value.pause();
// }
// client.value.updateSession({
// turn_detection: value === 'none' ? null : { type: 'server_vad' },
// });
// if (value === 'server_vad' && client.value.isConnected()) {
// await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
// }
// canPushToTalk.value = value === 'none';
// };
// 初始化 WaveRecorder 组件和 RealtimeClient 事件处理
const initialize = async () => {
// Set up render loops for the visualization canvas
let isLoaded = true;
const render = () => {
if (isLoaded) {
if (clientCanvasRef.value) {
const canvas = clientCanvasRef.value;
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const result = wavRecorder.value.recording
? wavRecorder.value.getFrequencies('voice')
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8);
}
}
if (serverCanvasRef.value) {
const canvas = serverCanvasRef.value;
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const result = wavStreamPlayer.value.analyser
? wavStreamPlayer.value.getFrequencies('voice')
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8);
}
}
requestAnimationFrame(render);
}
};
render();
client.value.on('error', (event) => {
showMessageError(event.error)
});
client.value.on('realtime.event', (re) => {
if (re.event.type === 'error') {
showMessageError(re.event.error)
}
});
client.value.on('conversation.interrupted', async () => {
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
client.value.cancelResponse(trackId, offset);
}
});
client.value.on('conversation.updated', async ({ item, delta }) => {
// console.log('item updated', item, delta)
if (delta?.audio) {
wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
}
});
}
const voiceInterval = ref(null);
onMounted(() => {
initialize()
// 启动聊天进行中的动画
voiceInterval.value = setInterval(animateVoice, 200);
typeText()
});
onUnmounted(() => {
clearInterval(voiceInterval.value);
client.value.reset();
});
// 挂断通话
const hangUp = async () => {
try {
isConnected.value = false
// 停止播放拨号音乐
if (backgroundAudio.value?.currentTime) {
backgroundAudio.value?.pause()
backgroundAudio.value.currentTime = 0
}
// 断开客户端的连接
client.value.reset()
// 中断语音输入和输出服务
await wavRecorder.value.end()
await wavStreamPlayer.value.interrupt()
} catch (e) {
console.error(e)
} finally {
// 播放挂断音乐
hangUpAudio.value?.play()
emits('close')
}
};
// eslint-disable-next-line no-undef
defineExpose({ connect,hangUp });
</script>
<style scoped lang="stylus">
@import "@/assets/css/realtime.styl"
</style>

16
web/src/components/admin/AdminSidebar.vue
View File

@ -33,7 +33,7 @@
{{ threeItem.title }}
</el-menu-item>
</el-sub-menu>
<el-menu-item v-else :index="subItem.index">
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
<i v-if="subItem.icon" :class="'iconfont icon-'+subItem.icon"></i>
{{ subItem.title }}
</el-menu-item>
@ -64,8 +64,8 @@ const logo = ref('')
// 加载系统配置
httpGet('/api/admin/config/get?key=system').then(res => {
title.value = res.data['admin_title']
logo.value = res.data['logo']
title.value = res.data.admin_title
logo.value = res.data.logo
}).catch(e => {
ElMessage.error("加载系统配置失败: " + e.message)
})
@ -137,6 +137,16 @@ const items = [
index: '/admin/chats',
title: '对话管理',
},
{
icon: 'image',
index: '/admin/images',
title: '绘图管理',
},
{
icon: 'mp3',
index: '/admin/medias',
title: '音视频管理',
},
{
icon: 'role',
index: '/admin/manger',

102
web/src/components/ui/RippleButton.vue Normal file
View File

@ -0,0 +1,102 @@
<template>
<button
class="ripple-button"
@mousedown="startRipples"
@mouseup="stopRipples"
@mouseleave="stopRipples"
>
<slot></slot>
<span
v-for="ripple in ripples"
:key="ripple.id"
class="ripple"
:style="getRippleStyle(ripple)"
></span>
</button>
</template>
<script setup>
import { ref } from 'vue';
const ripples = ref([]);
let rippleCount = 0;
let animationId;
const startRipples = (event) => {
const button = event.currentTarget;
const rect = button.getBoundingClientRect();
const size = Math.max(rect.width, rect.height);
// const x = event.clientX - rect.left;
// const y = event.clientY - rect.top;
const x = rect.right - rect.left - size/2;
const y = rect.bottom - rect.top - size/2;
const createRipple = () => {
ripples.value.push({
id: rippleCount++,
x,
y,
size: 0,
opacity: 0.5
});
if (ripples.value.length > 3) {
ripples.value.shift();
}
};
const animate = () => {
ripples.value.forEach(ripple => {
ripple.size += 2;
ripple.opacity -= 0.01;
});
ripples.value = ripples.value.filter(ripple => ripple.opacity > 0);
if (ripples.value.length < 3) {
createRipple();
}
animationId = requestAnimationFrame(animate);
};
createRipple();
animate();
};
const stopRipples = () => {
cancelAnimationFrame(animationId);
ripples.value = [];
};
const getRippleStyle = (ripple) => ({
left: `${ripple.x}px`,
top: `${ripple.y}px`,
width: `${ripple.size}px`,
height: `${ripple.size}px`,
opacity: ripple.opacity
});
</script>
<style scoped lang="stylus">
.ripple-button {
position: relative;
overflow: hidden;
border: none;
background none;
color: white;
cursor: pointer;
border-radius: 50%;
outline: none;
margin 0
padding 0
}
.ripple {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.7);
transform: translate(-50%, -50%);
pointer-events: none;
}
</style>

6
web/src/lib/wavtools/index.js Normal file
View File

@ -0,0 +1,6 @@
import { WavPacker } from './lib/wav_packer.js';
import { AudioAnalysis } from './lib/analysis/audio_analysis.js';
import { WavStreamPlayer } from './lib/wav_stream_player.js';
import { WavRecorder } from './lib/wav_recorder.js';
export { AudioAnalysis, WavPacker, WavStreamPlayer, WavRecorder };

203
web/src/lib/wavtools/lib/analysis/audio_analysis.js Normal file
View File

@ -0,0 +1,203 @@
import {
noteFrequencies,
noteFrequencyLabels,
voiceFrequencies,
voiceFrequencyLabels,
} from './constants.js';
/**
* Output of AudioAnalysis for the frequency domain of the audio
* @typedef {Object} AudioAnalysisOutputType
* @property {Float32Array} values Amplitude of this frequency between {0, 1} inclusive
* @property {number[]} frequencies Raw frequency bucket values
* @property {string[]} labels Labels for the frequency bucket values
*/
/**
* Analyzes audio for visual output
* @class
*/
export class AudioAnalysis {
/**
* Retrieves frequency domain data from an AnalyserNode adjusted to a decibel range
* returns human-readable formatting and labels
* @param {AnalyserNode} analyser
* @param {number} sampleRate
* @param {Float32Array} [fftResult]
* @param {"frequency"|"music"|"voice"} [analysisType]
* @param {number} [minDecibels] default -100
* @param {number} [maxDecibels] default -30
* @returns {AudioAnalysisOutputType}
*/
static getFrequencies(
analyser,
sampleRate,
fftResult,
analysisType = 'frequency',
minDecibels = -100,
maxDecibels = -30,
) {
if (!fftResult) {
fftResult = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(fftResult);
}
const nyquistFrequency = sampleRate / 2;
const frequencyStep = (1 / fftResult.length) * nyquistFrequency;
let outputValues;
let frequencies;
let labels;
if (analysisType === 'music' || analysisType === 'voice') {
const useFrequencies =
analysisType === 'voice' ? voiceFrequencies : noteFrequencies;
const aggregateOutput = Array(useFrequencies.length).fill(minDecibels);
for (let i = 0; i < fftResult.length; i++) {
const frequency = i * frequencyStep;
const amplitude = fftResult[i];
for (let n = useFrequencies.length - 1; n >= 0; n--) {
if (frequency > useFrequencies[n]) {
aggregateOutput[n] = Math.max(aggregateOutput[n], amplitude);
break;
}
}
}
outputValues = aggregateOutput;
frequencies =
analysisType === 'voice' ? voiceFrequencies : noteFrequencies;
labels =
analysisType === 'voice' ? voiceFrequencyLabels : noteFrequencyLabels;
} else {
outputValues = Array.from(fftResult);
frequencies = outputValues.map((_, i) => frequencyStep * i);
labels = frequencies.map((f) => `${f.toFixed(2)} Hz`);
}
// We normalize to {0, 1}
const normalizedOutput = outputValues.map((v) => {
return Math.max(
0,
Math.min((v - minDecibels) / (maxDecibels - minDecibels), 1),
);
});
const values = new Float32Array(normalizedOutput);
return {
values,
frequencies,
labels,
};
}
/**
* Creates a new AudioAnalysis instance for an HTMLAudioElement
* @param {HTMLAudioElement} audioElement
* @param {AudioBuffer|null} [audioBuffer] If provided, will cache all frequency domain data from the buffer
* @returns {AudioAnalysis}
*/
constructor(audioElement, audioBuffer = null) {
this.fftResults = [];
if (audioBuffer) {
/**
* Modified from
* https://stackoverflow.com/questions/75063715/using-the-web-audio-api-to-analyze-a-song-without-playing
*
* We do this to populate FFT values for the audio if provided an `audioBuffer`
* The reason to do this is that Safari fails when using `createMediaElementSource`
* This has a non-zero RAM cost so we only opt-in to run it on Safari, Chrome is better
*/
const { length, sampleRate } = audioBuffer;
const offlineAudioContext = new OfflineAudioContext({
length,
sampleRate,
});
const source = offlineAudioContext.createBufferSource();
source.buffer = audioBuffer;
const analyser = offlineAudioContext.createAnalyser();
analyser.fftSize = 8192;
analyser.smoothingTimeConstant = 0.1;
source.connect(analyser);
// limit is :: 128 / sampleRate;
// but we just want 60fps - cuts ~1s from 6MB to 1MB of RAM
const renderQuantumInSeconds = 1 / 60;
const durationInSeconds = length / sampleRate;
const analyze = (index) => {
const suspendTime = renderQuantumInSeconds * index;
if (suspendTime < durationInSeconds) {
offlineAudioContext.suspend(suspendTime).then(() => {
const fftResult = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(fftResult);
this.fftResults.push(fftResult);
analyze(index + 1);
});
}
if (index === 1) {
offlineAudioContext.startRendering();
} else {
offlineAudioContext.resume();
}
};
source.start(0);
analyze(1);
this.audio = audioElement;
this.context = offlineAudioContext;
this.analyser = analyser;
this.sampleRate = sampleRate;
this.audioBuffer = audioBuffer;
} else {
const audioContext = new AudioContext();
const track = audioContext.createMediaElementSource(audioElement);
const analyser = audioContext.createAnalyser();
analyser.fftSize = 8192;
analyser.smoothingTimeConstant = 0.1;
track.connect(analyser);
analyser.connect(audioContext.destination);
this.audio = audioElement;
this.context = audioContext;
this.analyser = analyser;
this.sampleRate = this.context.sampleRate;
this.audioBuffer = null;
}
}
/**
* Gets the current frequency domain data from the playing audio track
* @param {"frequency"|"music"|"voice"} [analysisType]
* @param {number} [minDecibels] default -100
* @param {number} [maxDecibels] default -30
* @returns {AudioAnalysisOutputType}
*/
getFrequencies(
analysisType = 'frequency',
minDecibels = -100,
maxDecibels = -30,
) {
let fftResult = null;
if (this.audioBuffer && this.fftResults.length) {
const pct = this.audio.currentTime / this.audio.duration;
const index = Math.min(
(pct * this.fftResults.length) | 0,
this.fftResults.length - 1,
);
fftResult = this.fftResults[index];
}
return AudioAnalysis.getFrequencies(
this.analyser,
this.sampleRate,
fftResult,
analysisType,
minDecibels,
maxDecibels,
);
}
/**
* Resume the internal AudioContext if it was suspended due to the lack of
* user interaction when the AudioAnalysis was instantiated.
* @returns {Promise<true>}
*/
async resumeIfSuspended() {
if (this.context.state === 'suspended') {
await this.context.resume();
}
return true;
}
}
globalThis.AudioAnalysis = AudioAnalysis;

60
web/src/lib/wavtools/lib/analysis/constants.js Normal file
View File

@ -0,0 +1,60 @@
/**
* Constants for help with visualization
* Helps map frequency ranges from Fast Fourier Transform
* to human-interpretable ranges, notably music ranges and
* human vocal ranges.
*/
// Eighth octave frequencies
const octave8Frequencies = [
4186.01, 4434.92, 4698.63, 4978.03, 5274.04, 5587.65, 5919.91, 6271.93,
6644.88, 7040.0, 7458.62, 7902.13,
];
// Labels for each of the above frequencies
const octave8FrequencyLabels = [
'C',
'C#',
'D',
'D#',
'E',
'F',
'F#',
'G',
'G#',
'A',
'A#',
'B',
];
/**
* All note frequencies from 1st to 8th octave
* in format "A#8" (A#, 8th octave)
*/
export const noteFrequencies = [];
export const noteFrequencyLabels = [];
for (let i = 1; i <= 8; i++) {
for (let f = 0; f < octave8Frequencies.length; f++) {
const freq = octave8Frequencies[f];
noteFrequencies.push(freq / Math.pow(2, 8 - i));
noteFrequencyLabels.push(octave8FrequencyLabels[f] + i);
}
}
/**
* Subset of the note frequencies between 32 and 2000 Hz
* 6 octave range: C1 to B6
*/
const voiceFrequencyRange = [32.0, 2000.0];
export const voiceFrequencies = noteFrequencies.filter((_, i) => {
return (
noteFrequencies[i] > voiceFrequencyRange[0] &&
noteFrequencies[i] < voiceFrequencyRange[1]
);
});
export const voiceFrequencyLabels = noteFrequencyLabels.filter((_, i) => {
return (
noteFrequencies[i] > voiceFrequencyRange[0] &&
noteFrequencies[i] < voiceFrequencyRange[1]
);
});

113
web/src/lib/wavtools/lib/wav_packer.js Normal file
View File

@ -0,0 +1,113 @@
/**
* Raw wav audio file contents
* @typedef {Object} WavPackerAudioType
* @property {Blob} blob
* @property {string} url
* @property {number} channelCount
* @property {number} sampleRate
* @property {number} duration
*/
/**
* Utility class for assembling PCM16 "audio/wav" data
* @class
*/
export class WavPacker {
/**
* Converts Float32Array of amplitude data to ArrayBuffer in Int16Array format
* @param {Float32Array} float32Array
* @returns {ArrayBuffer}
*/
static floatTo16BitPCM(float32Array) {
const buffer = new ArrayBuffer(float32Array.length * 2);
const view = new DataView(buffer);
let offset = 0;
for (let i = 0; i < float32Array.length; i++, offset += 2) {
let s = Math.max(-1, Math.min(1, float32Array[i]));
view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
}
return buffer;
}
/**
* Concatenates two ArrayBuffers
* @param {ArrayBuffer} leftBuffer
* @param {ArrayBuffer} rightBuffer
* @returns {ArrayBuffer}
*/
static mergeBuffers(leftBuffer, rightBuffer) {
const tmpArray = new Uint8Array(
leftBuffer.byteLength + rightBuffer.byteLength
);
tmpArray.set(new Uint8Array(leftBuffer), 0);
tmpArray.set(new Uint8Array(rightBuffer), leftBuffer.byteLength);
return tmpArray.buffer;
}
/**
* Packs data into an Int16 format
* @private
* @param {number} size 0 = 1x Int16, 1 = 2x Int16
* @param {number} arg value to pack
* @returns
*/
_packData(size, arg) {
return [
new Uint8Array([arg, arg >> 8]),
new Uint8Array([arg, arg >> 8, arg >> 16, arg >> 24]),
][size];
}
/**
* Packs audio into "audio/wav" Blob
* @param {number} sampleRate
* @param {{bitsPerSample: number, channels: Array<Float32Array>, data: Int16Array}} audio
* @returns {WavPackerAudioType}
*/
pack(sampleRate, audio) {
if (!audio?.bitsPerSample) {
throw new Error(`Missing "bitsPerSample"`);
} else if (!audio?.channels) {
throw new Error(`Missing "channels"`);
} else if (!audio?.data) {
throw new Error(`Missing "data"`);
}
const { bitsPerSample, channels, data } = audio;
const output = [
// Header
'RIFF',
this._packData(
1,
4 + (8 + 24) /* chunk 1 length */ + (8 + 8) /* chunk 2 length */
), // Length
'WAVE',
// chunk 1
'fmt ', // Sub-chunk identifier
this._packData(1, 16), // Chunk length
this._packData(0, 1), // Audio format (1 is linear quantization)
this._packData(0, channels.length),
this._packData(1, sampleRate),
this._packData(1, (sampleRate * channels.length * bitsPerSample) / 8), // Byte rate
this._packData(0, (channels.length * bitsPerSample) / 8),
this._packData(0, bitsPerSample),
// chunk 2
'data', // Sub-chunk identifier
this._packData(
1,
(channels[0].length * channels.length * bitsPerSample) / 8
), // Chunk length
data,
];
const blob = new Blob(output, { type: 'audio/mpeg' });
const url = URL.createObjectURL(blob);
return {
blob,
url,
channelCount: channels.length,
sampleRate,
duration: data.byteLength / (channels.length * sampleRate * 2),
};
}
}
globalThis.WavPacker = WavPacker;

548
web/src/lib/wavtools/lib/wav_recorder.js Normal file
View File

@ -0,0 +1,548 @@
import { AudioProcessorSrc } from './worklets/audio_processor.js';
import { AudioAnalysis } from './analysis/audio_analysis.js';
import { WavPacker } from './wav_packer.js';
/**
* Decodes audio into a wav file
* @typedef {Object} DecodedAudioType
* @property {Blob} blob
* @property {string} url
* @property {Float32Array} values
* @property {AudioBuffer} audioBuffer
*/
/**
* Records live stream of user audio as PCM16 "audio/wav" data
* @class
*/
export class WavRecorder {
/**
* Create a new WavRecorder instance
* @param {{sampleRate?: number, outputToSpeakers?: boolean, debug?: boolean}} [options]
* @returns {WavRecorder}
*/
constructor({
sampleRate = 44100,
outputToSpeakers = false,
debug = false,
} = {}) {
// Script source
this.scriptSrc = AudioProcessorSrc;
// Config
this.sampleRate = sampleRate;
this.outputToSpeakers = outputToSpeakers;
this.debug = !!debug;
this._deviceChangeCallback = null;
this._devices = [];
// State variables
this.stream = null;
this.processor = null;
this.source = null;
this.node = null;
this.recording = false;
// Event handling with AudioWorklet
this._lastEventId = 0;
this.eventReceipts = {};
this.eventTimeout = 5000;
// Process chunks of audio
this._chunkProcessor = () => {};
this._chunkProcessorSize = void 0;
this._chunkProcessorBuffer = {
raw: new ArrayBuffer(0),
mono: new ArrayBuffer(0),
};
}
/**
* Decodes audio data from multiple formats to a Blob, url, Float32Array and AudioBuffer
* @param {Blob|Float32Array|Int16Array|ArrayBuffer|number[]} audioData
* @param {number} sampleRate
* @param {number} fromSampleRate
* @returns {Promise<DecodedAudioType>}
*/
static async decode(audioData, sampleRate = 44100, fromSampleRate = -1) {
const context = new AudioContext({ sampleRate });
let arrayBuffer;
let blob;
if (audioData instanceof Blob) {
if (fromSampleRate !== -1) {
throw new Error(
`Can not specify "fromSampleRate" when reading from Blob`,
);
}
blob = audioData;
arrayBuffer = await blob.arrayBuffer();
} else if (audioData instanceof ArrayBuffer) {
if (fromSampleRate !== -1) {
throw new Error(
`Can not specify "fromSampleRate" when reading from ArrayBuffer`,
);
}
arrayBuffer = audioData;
blob = new Blob([arrayBuffer], { type: 'audio/wav' });
} else {
let float32Array;
let data;
if (audioData instanceof Int16Array) {
data = audioData;
float32Array = new Float32Array(audioData.length);
for (let i = 0; i < audioData.length; i++) {
float32Array[i] = audioData[i] / 0x8000;
}
} else if (audioData instanceof Float32Array) {
float32Array = audioData;
} else if (audioData instanceof Array) {
float32Array = new Float32Array(audioData);
} else {
throw new Error(
`"audioData" must be one of: Blob, Float32Arrray, Int16Array, ArrayBuffer, Array<number>`,
);
}
if (fromSampleRate === -1) {
throw new Error(
`Must specify "fromSampleRate" when reading from Float32Array, In16Array or Array`,
);
} else if (fromSampleRate < 3000) {
throw new Error(`Minimum "fromSampleRate" is 3000 (3kHz)`);
}
if (!data) {
data = WavPacker.floatTo16BitPCM(float32Array);
}
const audio = {
bitsPerSample: 16,
channels: [float32Array],
data,
};
const packer = new WavPacker();
const result = packer.pack(fromSampleRate, audio);
blob = result.blob;
arrayBuffer = await blob.arrayBuffer();
}
const audioBuffer = await context.decodeAudioData(arrayBuffer);
const values = audioBuffer.getChannelData(0);
const url = URL.createObjectURL(blob);
return {
blob,
url,
values,
audioBuffer,
};
}
/**
* Logs data in debug mode
* @param {...any} arguments
* @returns {true}
*/
log() {
if (this.debug) {
this.log(...arguments);
}
return true;
}
/**
* Retrieves the current sampleRate for the recorder
* @returns {number}
*/
getSampleRate() {
return this.sampleRate;
}
/**
* Retrieves the current status of the recording
* @returns {"ended"|"paused"|"recording"}
*/
getStatus() {
if (!this.processor) {
return 'ended';
} else if (!this.recording) {
return 'paused';
} else {
return 'recording';
}
}
/**
* Sends an event to the AudioWorklet
* @private
* @param {string} name
* @param {{[key: string]: any}} data
* @param {AudioWorkletNode} [_processor]
* @returns {Promise<{[key: string]: any}>}
*/
async _event(name, data = {}, _processor = null) {
_processor = _processor || this.processor;
if (!_processor) {
throw new Error('Can not send events without recording first');
}
const message = {
event: name,
id: this._lastEventId++,
data,
};
_processor.port.postMessage(message);
const t0 = new Date().valueOf();
while (!this.eventReceipts[message.id]) {
if (new Date().valueOf() - t0 > this.eventTimeout) {
throw new Error(`Timeout waiting for "${name}" event`);
}
await new Promise((res) => setTimeout(() => res(true), 1));
}
const payload = this.eventReceipts[message.id];
delete this.eventReceipts[message.id];
return payload;
}
/**
* Sets device change callback, remove if callback provided is `null`
* @param {(Array<MediaDeviceInfo & {default: boolean}>): void|null} callback
* @returns {true}
*/
listenForDeviceChange(callback) {
if (callback === null && this._deviceChangeCallback) {
navigator.mediaDevices.removeEventListener(
'devicechange',
this._deviceChangeCallback,
);
this._deviceChangeCallback = null;
} else if (callback !== null) {
// Basically a debounce; we only want this called once when devices change
// And we only want the most recent callback() to be executed
// if a few are operating at the same time
let lastId = 0;
let lastDevices = [];
const serializeDevices = (devices) =>
devices
.map((d) => d.deviceId)
.sort()
.join(',');
const cb = async () => {
let id = ++lastId;
const devices = await this.listDevices();
if (id === lastId) {
if (serializeDevices(lastDevices) !== serializeDevices(devices)) {
lastDevices = devices;
callback(devices.slice());
}
}
};
navigator.mediaDevices.addEventListener('devicechange', cb);
cb();
this._deviceChangeCallback = cb;
}
return true;
}
/**
* Manually request permission to use the microphone
* @returns {Promise<true>}
*/
async requestPermission() {
const permissionStatus = await navigator.permissions.query({
name: 'microphone',
});
if (permissionStatus.state === 'denied') {
window.alert('You must grant microphone access to use this feature.');
} else if (permissionStatus.state === 'prompt') {
try {
const stream = await navigator.mediaDevices.getUserMedia({
audio: true,
});
const tracks = stream.getTracks();
tracks.forEach((track) => track.stop());
} catch (e) {
window.alert('You must grant microphone access to use this feature.');
}
}
return true;
}
/**
* List all eligible devices for recording, will request permission to use microphone
* @returns {Promise<Array<MediaDeviceInfo & {default: boolean}>>}
*/
async listDevices() {
if (
!navigator.mediaDevices ||
!('enumerateDevices' in navigator.mediaDevices)
) {
throw new Error('Could not request user devices');
}
await this.requestPermission();
const devices = await navigator.mediaDevices.enumerateDevices();
const audioDevices = devices.filter(
(device) => device.kind === 'audioinput',
);
const defaultDeviceIndex = audioDevices.findIndex(
(device) => device.deviceId === 'default',
);
const deviceList = [];
if (defaultDeviceIndex !== -1) {
let defaultDevice = audioDevices.splice(defaultDeviceIndex, 1)[0];
let existingIndex = audioDevices.findIndex(
(device) => device.groupId === defaultDevice.groupId,
);
if (existingIndex !== -1) {
defaultDevice = audioDevices.splice(existingIndex, 1)[0];
}
defaultDevice.default = true;
deviceList.push(defaultDevice);
}
return deviceList.concat(audioDevices);
}
/**
* Begins a recording session and requests microphone permissions if not already granted
* Microphone recording indicator will appear on browser tab but status will be "paused"
* @param {string} [deviceId] if no device provided, default device will be used
* @returns {Promise<true>}
*/
async begin(deviceId) {
if (this.processor) {
throw new Error(
`Already connected: please call .end() to start a new session`,
);
}
if (
!navigator.mediaDevices ||
!('getUserMedia' in navigator.mediaDevices)
) {
throw new Error('Could not request user media');
}
try {
const config = { audio: true };
if (deviceId) {
config.audio = { deviceId: { exact: deviceId } };
}
this.stream = await navigator.mediaDevices.getUserMedia(config);
} catch (err) {
throw new Error('Could not start media stream');
}
const context = new AudioContext({ sampleRate: this.sampleRate });
const source = context.createMediaStreamSource(this.stream);
// Load and execute the module script.
try {
await context.audioWorklet.addModule(this.scriptSrc);
} catch (e) {
console.error(e);
throw new Error(`Could not add audioWorklet module: ${this.scriptSrc}`);
}
const processor = new AudioWorkletNode(context, 'audio_processor');
processor.port.onmessage = (e) => {
const { event, id, data } = e.data;
if (event === 'receipt') {
this.eventReceipts[id] = data;
} else if (event === 'chunk') {
if (this._chunkProcessorSize) {
const buffer = this._chunkProcessorBuffer;
this._chunkProcessorBuffer = {
raw: WavPacker.mergeBuffers(buffer.raw, data.raw),
mono: WavPacker.mergeBuffers(buffer.mono, data.mono),
};
if (
this._chunkProcessorBuffer.mono.byteLength >=
this._chunkProcessorSize
) {
this._chunkProcessor(this._chunkProcessorBuffer);
this._chunkProcessorBuffer = {
raw: new ArrayBuffer(0),
mono: new ArrayBuffer(0),
};
}
} else {
this._chunkProcessor(data);
}
}
};
const node = source.connect(processor);
const analyser = context.createAnalyser();
analyser.fftSize = 8192;
analyser.smoothingTimeConstant = 0.1;
node.connect(analyser);
if (this.outputToSpeakers) {
// eslint-disable-next-line no-console
console.warn(
'Warning: Output to speakers may affect sound quality,\n' +
'especially due to system audio feedback preventative measures.\n' +
'use only for debugging',
);
analyser.connect(context.destination);
}
this.source = source;
this.node = node;
this.analyser = analyser;
this.processor = processor;
return true;
}
/**
* Gets the current frequency domain data from the recording track
* @param {"frequency"|"music"|"voice"} [analysisType]
* @param {number} [minDecibels] default -100
* @param {number} [maxDecibels] default -30
* @returns {import('./analysis/audio_analysis.js').AudioAnalysisOutputType}
*/
getFrequencies(
analysisType = 'frequency',
minDecibels = -100,
maxDecibels = -30,
) {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
}
return AudioAnalysis.getFrequencies(
this.analyser,
this.sampleRate,
null,
analysisType,
minDecibels,
maxDecibels,
);
}
/**
* Pauses the recording
* Keeps microphone stream open but halts storage of audio
* @returns {Promise<true>}
*/
async pause() {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
} else if (!this.recording) {
throw new Error('Already paused: please call .record() first');
}
if (this._chunkProcessorBuffer.raw.byteLength) {
this._chunkProcessor(this._chunkProcessorBuffer);
}
this.log('Pausing ...');
await this._event('stop');
this.recording = false;
return true;
}
/**
* Start recording stream and storing to memory from the connected audio source
* @param {(data: { mono: Int16Array; raw: Int16Array }) => any} [chunkProcessor]
* @param {number} [chunkSize] chunkProcessor will not be triggered until this size threshold met in mono audio
* @returns {Promise<true>}
*/
async record(chunkProcessor = () => {}, chunkSize = 8192) {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
} else if (this.recording) {
throw new Error('Already recording: please call .pause() first');
} else if (typeof chunkProcessor !== 'function') {
throw new Error(`chunkProcessor must be a function`);
}
this._chunkProcessor = chunkProcessor;
this._chunkProcessorSize = chunkSize;
this._chunkProcessorBuffer = {
raw: new ArrayBuffer(0),
mono: new ArrayBuffer(0),
};
this.log('Recording ...');
await this._event('start');
this.recording = true;
return true;
}
/**
* Clears the audio buffer, empties stored recording
* @returns {Promise<true>}
*/
async clear() {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
}
await this._event('clear');
return true;
}
/**
* Reads the current audio stream data
* @returns {Promise<{meanValues: Float32Array, channels: Array<Float32Array>}>}
*/
async read() {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
}
this.log('Reading ...');
const result = await this._event('read');
return result;
}
/**
* Saves the current audio stream to a file
* @param {boolean} [force] Force saving while still recording
* @returns {Promise<import('./wav_packer.js').WavPackerAudioType>}
*/
async save(force = false) {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
}
if (!force && this.recording) {
throw new Error(
'Currently recording: please call .pause() first, or call .save(true) to force',
);
}
this.log('Exporting ...');
const exportData = await this._event('export');
const packer = new WavPacker();
const result = packer.pack(this.sampleRate, exportData.audio);
return result;
}
/**
* Ends the current recording session and saves the result
* @returns {Promise<import('./wav_packer.js').WavPackerAudioType>}
*/
async end() {
if (!this.processor) {
throw new Error('Session ended: please call .begin() first');
}
const _processor = this.processor;
this.log('Stopping ...');
await this._event('stop');
this.recording = false;
const tracks = this.stream.getTracks();
tracks.forEach((track) => track.stop());
this.log('Exporting ...');
const exportData = await this._event('export', {}, _processor);
this.processor.disconnect();
this.source.disconnect();
this.node.disconnect();
this.analyser.disconnect();
this.stream = null;
this.processor = null;
this.source = null;
this.node = null;
const packer = new WavPacker();
const result = packer.pack(this.sampleRate, exportData.audio);
return result;
}
/**
* Performs a full cleanup of WavRecorder instance
* Stops actively listening via microphone and removes existing listeners
* @returns {Promise<true>}
*/
async quit() {
this.listenForDeviceChange(null);
if (this.processor) {
await this.end();
}
return true;
}
}
globalThis.WavRecorder = WavRecorder;

160
web/src/lib/wavtools/lib/wav_stream_player.js Normal file
View File

@ -0,0 +1,160 @@
import { StreamProcessorSrc } from './worklets/stream_processor.js';
import { AudioAnalysis } from './analysis/audio_analysis.js';
/**
* Plays audio streams received in raw PCM16 chunks from the browser
* @class
*/
export class WavStreamPlayer {
/**
* Creates a new WavStreamPlayer instance
* @param {{sampleRate?: number}} options
* @returns {WavStreamPlayer}
*/
constructor({ sampleRate = 44100 } = {}) {
this.scriptSrc = StreamProcessorSrc;
this.sampleRate = sampleRate;
this.context = null;
this.stream = null;
this.analyser = null;
this.trackSampleOffsets = {};
this.interruptedTrackIds = {};
}
/**
* Connects the audio context and enables output to speakers
* @returns {Promise<true>}
*/
async connect() {
this.context = new AudioContext({ sampleRate: this.sampleRate });
if (this.context.state === 'suspended') {
await this.context.resume();
}
try {
await this.context.audioWorklet.addModule(this.scriptSrc);
} catch (e) {
console.error(e);
throw new Error(`Could not add audioWorklet module: ${this.scriptSrc}`);
}
const analyser = this.context.createAnalyser();
analyser.fftSize = 8192;
analyser.smoothingTimeConstant = 0.1;
this.analyser = analyser;
return true;
}
/**
* Gets the current frequency domain data from the playing track
* @param {"frequency"|"music"|"voice"} [analysisType]
* @param {number} [minDecibels] default -100
* @param {number} [maxDecibels] default -30
* @returns {import('./analysis/audio_analysis.js').AudioAnalysisOutputType}
*/
getFrequencies(
analysisType = 'frequency',
minDecibels = -100,
maxDecibels = -30
) {
if (!this.analyser) {
throw new Error('Not connected, please call .connect() first');
}
return AudioAnalysis.getFrequencies(
this.analyser,
this.sampleRate,
null,
analysisType,
minDecibels,
maxDecibels
);
}
/**
* Starts audio streaming
* @private
* @returns {Promise<true>}
*/
_start() {
const streamNode = new AudioWorkletNode(this.context, 'stream_processor');
streamNode.connect(this.context.destination);
streamNode.port.onmessage = (e) => {
const { event } = e.data;
if (event === 'stop') {
streamNode.disconnect();
this.stream = null;
} else if (event === 'offset') {
const { requestId, trackId, offset } = e.data;
const currentTime = offset / this.sampleRate;
this.trackSampleOffsets[requestId] = { trackId, offset, currentTime };
}
};
this.analyser.disconnect();
streamNode.connect(this.analyser);
this.stream = streamNode;
return true;
}
/**
* Adds 16BitPCM data to the currently playing audio stream
* You can add chunks beyond the current play point and they will be queued for play
* @param {ArrayBuffer|Int16Array} arrayBuffer
* @param {string} [trackId]
* @returns {Int16Array}
*/
add16BitPCM(arrayBuffer, trackId = 'default') {
if (typeof trackId !== 'string') {
throw new Error(`trackId must be a string`);
} else if (this.interruptedTrackIds[trackId]) {
return;
}
if (!this.stream) {
this._start();
}
let buffer;
if (arrayBuffer instanceof Int16Array) {
buffer = arrayBuffer;
} else if (arrayBuffer instanceof ArrayBuffer) {
buffer = new Int16Array(arrayBuffer);
} else {
throw new Error(`argument must be Int16Array or ArrayBuffer`);
}
this.stream.port.postMessage({ event: 'write', buffer, trackId });
return buffer;
}
/**
* Gets the offset (sample count) of the currently playing stream
* @param {boolean} [interrupt]
* @returns {{trackId: string|null, offset: number, currentTime: number}}
*/
async getTrackSampleOffset(interrupt = false) {
if (!this.stream) {
return null;
}
const requestId = crypto.randomUUID();
this.stream.port.postMessage({
event: interrupt ? 'interrupt' : 'offset',
requestId,
});
let trackSampleOffset;
while (!trackSampleOffset) {
trackSampleOffset = this.trackSampleOffsets[requestId];
await new Promise((r) => setTimeout(() => r(), 1));
}
const { trackId } = trackSampleOffset;
if (interrupt && trackId) {
this.interruptedTrackIds[trackId] = true;
}
return trackSampleOffset;
}
/**
* Strips the current stream and returns the sample offset of the audio
* @param {boolean} [interrupt]
* @returns {{trackId: string|null, offset: number, currentTime: number}}
*/
async interrupt() {
return this.getTrackSampleOffset(true);
}
}
globalThis.WavStreamPlayer = WavStreamPlayer;

214
web/src/lib/wavtools/lib/worklets/audio_processor.js Normal file
View File

@ -0,0 +1,214 @@
const AudioProcessorWorklet = `
class AudioProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.port.onmessage = this.receive.bind(this);
this.initialize();
}
initialize() {
this.foundAudio = false;
this.recording = false;
this.chunks = [];
}
/**
* Concatenates sampled chunks into channels
* Format is chunk[Left[], Right[]]
*/
readChannelData(chunks, channel = -1, maxChannels = 9) {
let channelLimit;
if (channel !== -1) {
if (chunks[0] && chunks[0].length - 1 < channel) {
throw new Error(
\`Channel \${channel} out of range: max \${chunks[0].length}\`
);
}
channelLimit = channel + 1;
} else {
channel = 0;
channelLimit = Math.min(chunks[0] ? chunks[0].length : 1, maxChannels);
}
const channels = [];
for (let n = channel; n < channelLimit; n++) {
const length = chunks.reduce((sum, chunk) => {
return sum + chunk[n].length;
}, 0);
const buffers = chunks.map((chunk) => chunk[n]);
const result = new Float32Array(length);
let offset = 0;
for (let i = 0; i < buffers.length; i++) {
result.set(buffers[i], offset);
offset += buffers[i].length;
}
channels[n] = result;
}
return channels;
}
/**
* Combines parallel audio data into correct format,
* channels[Left[], Right[]] to float32Array[LRLRLRLR...]
*/
formatAudioData(channels) {
if (channels.length === 1) {
// Simple case is only one channel
const float32Array = channels[0].slice();
const meanValues = channels[0].slice();
return { float32Array, meanValues };
} else {
const float32Array = new Float32Array(
channels[0].length * channels.length
);
const meanValues = new Float32Array(channels[0].length);
for (let i = 0; i < channels[0].length; i++) {
const offset = i * channels.length;
let meanValue = 0;
for (let n = 0; n < channels.length; n++) {
float32Array[offset + n] = channels[n][i];
meanValue += channels[n][i];
}
meanValues[i] = meanValue / channels.length;
}
return { float32Array, meanValues };
}
}
/**
* Converts 32-bit float data to 16-bit integers
*/
floatTo16BitPCM(float32Array) {
const buffer = new ArrayBuffer(float32Array.length * 2);
const view = new DataView(buffer);
let offset = 0;
for (let i = 0; i < float32Array.length; i++, offset += 2) {
let s = Math.max(-1, Math.min(1, float32Array[i]));
view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7fff, true);
}
return buffer;
}
/**
* Retrieves the most recent amplitude values from the audio stream
* @param {number} channel
*/
getValues(channel = -1) {
const channels = this.readChannelData(this.chunks, channel);
const { meanValues } = this.formatAudioData(channels);
return { meanValues, channels };
}
/**
* Exports chunks as an audio/wav file
*/
export() {
const channels = this.readChannelData(this.chunks);
const { float32Array, meanValues } = this.formatAudioData(channels);
const audioData = this.floatTo16BitPCM(float32Array);
return {
meanValues: meanValues,
audio: {
bitsPerSample: 16,
channels: channels,
data: audioData,
},
};
}
receive(e) {
const { event, id } = e.data;
let receiptData = {};
switch (event) {
case 'start':
this.recording = true;
break;
case 'stop':
this.recording = false;
break;
case 'clear':
this.initialize();
break;
case 'export':
receiptData = this.export();
break;
case 'read':
receiptData = this.getValues();
break;
default:
break;
}
// Always send back receipt
this.port.postMessage({ event: 'receipt', id, data: receiptData });
}
sendChunk(chunk) {
const channels = this.readChannelData([chunk]);
const { float32Array, meanValues } = this.formatAudioData(channels);
const rawAudioData = this.floatTo16BitPCM(float32Array);
const monoAudioData = this.floatTo16BitPCM(meanValues);
this.port.postMessage({
event: 'chunk',
data: {
mono: monoAudioData,
raw: rawAudioData,
},
});
}
process(inputList, outputList, parameters) {
// Copy input to output (e.g. speakers)
// Note that this creates choppy sounds with Mac products
const sourceLimit = Math.min(inputList.length, outputList.length);
for (let inputNum = 0; inputNum < sourceLimit; inputNum++) {
const input = inputList[inputNum];
const output = outputList[inputNum];
const channelCount = Math.min(input.length, output.length);
for (let channelNum = 0; channelNum < channelCount; channelNum++) {
input[channelNum].forEach((sample, i) => {
output[channelNum][i] = sample;
});
}
}
const inputs = inputList[0];
// There's latency at the beginning of a stream before recording starts
// Make sure we actually receive audio data before we start storing chunks
let sliceIndex = 0;
if (!this.foundAudio) {
for (const channel of inputs) {
sliceIndex = 0; // reset for each channel
if (this.foundAudio) {
break;
}
if (channel) {
for (const value of channel) {
if (value !== 0) {
// find only one non-zero entry in any channel
this.foundAudio = true;
break;
} else {
sliceIndex++;
}
}
}
}
}
if (inputs && inputs[0] && this.foundAudio && this.recording) {
// We need to copy the TypedArray, because the \`process\`
// internals will reuse the same buffer to hold each input
const chunk = inputs.map((input) => input.slice(sliceIndex));
this.chunks.push(chunk);
this.sendChunk(chunk);
}
return true;
}
}
registerProcessor('audio_processor', AudioProcessor);
`;
const script = new Blob([AudioProcessorWorklet], {
type: 'application/javascript',
});
const src = URL.createObjectURL(script);
export const AudioProcessorSrc = src;

96
web/src/lib/wavtools/lib/worklets/stream_processor.js Normal file
View File

@ -0,0 +1,96 @@
export const StreamProcessorWorklet = `
class StreamProcessor extends AudioWorkletProcessor {
constructor() {
super();
this.hasStarted = false;
this.hasInterrupted = false;
this.outputBuffers = [];
this.bufferLength = 128;
this.write = { buffer: new Float32Array(this.bufferLength), trackId: null };
this.writeOffset = 0;
this.trackSampleOffsets = {};
this.port.onmessage = (event) => {
if (event.data) {
const payload = event.data;
if (payload.event === 'write') {
const int16Array = payload.buffer;
const float32Array = new Float32Array(int16Array.length);
for (let i = 0; i < int16Array.length; i++) {
float32Array[i] = int16Array[i] / 0x8000; // Convert Int16 to Float32
}
this.writeData(float32Array, payload.trackId);
} else if (
payload.event === 'offset' ||
payload.event === 'interrupt'
) {
const requestId = payload.requestId;
const trackId = this.write.trackId;
const offset = this.trackSampleOffsets[trackId] || 0;
this.port.postMessage({
event: 'offset',
requestId,
trackId,
offset,
});
if (payload.event === 'interrupt') {
this.hasInterrupted = true;
}
} else {
throw new Error(\`Unhandled event "\${payload.event}"\`);
}
}
};
}
writeData(float32Array, trackId = null) {
let { buffer } = this.write;
let offset = this.writeOffset;
for (let i = 0; i < float32Array.length; i++) {
buffer[offset++] = float32Array[i];
if (offset >= buffer.length) {
this.outputBuffers.push(this.write);
this.write = { buffer: new Float32Array(this.bufferLength), trackId };
buffer = this.write.buffer;
offset = 0;
}
}
this.writeOffset = offset;
return true;
}
process(inputs, outputs, parameters) {
const output = outputs[0];
const outputChannelData = output[0];
const outputBuffers = this.outputBuffers;
if (this.hasInterrupted) {
this.port.postMessage({ event: 'stop' });
return false;
} else if (outputBuffers.length) {
this.hasStarted = true;
const { buffer, trackId } = outputBuffers.shift();
for (let i = 0; i < outputChannelData.length; i++) {
outputChannelData[i] = buffer[i] || 0;
}
if (trackId) {
this.trackSampleOffsets[trackId] =
this.trackSampleOffsets[trackId] || 0;
this.trackSampleOffsets[trackId] += buffer.length;
}
return true;
} else if (this.hasStarted) {
this.port.postMessage({ event: 'stop' });
return false;
} else {
return true;
}
}
}
registerProcessor('stream_processor', StreamProcessor);
`;
const script = new Blob([StreamProcessorWorklet], {
type: 'application/javascript',
});
const src = URL.createObjectURL(script);
export const StreamProcessorSrc = src;

18
web/src/router.js
View File

@ -233,6 +233,18 @@ const routes = [
meta: {title: '对话管理'},
component: () => import('@/views/admin/ChatList.vue'),
},
{
path: '/admin/images',
name: 'admin-images',
meta: {title: '绘图管理'},
component: () => import('@/views/admin/ImageList.vue'),
},
{
path: '/admin/medias',
name: 'admin-medias',
meta: {title: '音视频管理'},
component: () => import('@/views/admin/Medias.vue'),
},
{
path: '/admin/powerLog',
name: 'admin-power-log',
@ -312,6 +324,12 @@ const routes = [
meta: {title: '测试页面'},
component: () => import('@/views/Test.vue'),
},
{
name: 'test2',
path: '/test2',
meta: {title: '测试页面'},
component: () => import('@/views/RealtimeTest.vue'),
},
{
name: 'NotFound',
path: '/:all(.*)',

16
web/src/utils/conversation_config.js Normal file
View File

@ -0,0 +1,16 @@
export const instructions = `System settings:
Tool use: enabled.
Instructions:
- You are an artificial intelligence agent responsible for helping test realtime voice capabilities
- Please make sure to respond with a helpful voice via audio
- Be kind, helpful, and curteous
- It is okay to ask the user questions
- Use tools and functions you have available liberally, it is part of the training apparatus
- Be open to exploration and conversation
- Remember: this is just for fun and testing!
Personality:
- Be upbeat and genuine
- Try speaking quickly as if excited
`;

27
web/src/utils/wav_player.js Normal file
View File

@ -0,0 +1,27 @@
// 播放 PCM16 语音流
export const playPCM16 = (pcm16Array, sampleRate = 44100) => {
try {
// 创建 AudioContext
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 将 Int16Array 转换为 Float32Array (Web Audio API 使用 Float32)
let float32Array = new Float32Array(pcm16Array.length);
for (let i = 0; i < pcm16Array.length; i++) {
float32Array[i] = pcm16Array[i] / 32768; // Int16 转换为 Float32
}
// 创建 AudioBuffer
const audioBuffer = audioContext.createBuffer(1, float32Array.length, sampleRate); // 单声道
audioBuffer.getChannelData(0).set(float32Array); // 设置音频数据
// 创建 AudioBufferSourceNode 并播放音频
const source = audioContext.createBufferSource();
source.buffer = audioBuffer;
source.connect(audioContext.destination); // 连接到扬声器
source.start(); // 播放
return source
} catch (e) {
console.warn(e)
return null
}
}

81
web/src/utils/wav_renderer.js Normal file
View File

@ -0,0 +1,81 @@
const dataMap = new WeakMap();
const normalizeArray = (data, m, downsamplePeaks = false, memoize = false) => {
let cache, mKey, dKey;
if (memoize) {
mKey = m.toString();
dKey = downsamplePeaks.toString();
cache = dataMap.has(data)? dataMap.get(data) : {};
dataMap.set(data, cache);
cache[mKey] = cache[mKey] || {};
if (cache[mKey][dKey]) {
return cache[mKey][dKey];
}
}
const n = data.length;
const result = new Array(m);
if (m <= n) {
// Downsampling
result.fill(0);
const count = new Array(m).fill(0);
for (let i = 0; i < n; i++) {
const index = Math.floor(i * (m / n));
if (downsamplePeaks) {
// take highest result in the set
result[index] = Math.max(result[index], Math.abs(data[i]));
} else {
result[index] += Math.abs(data[i]);
}
count[index]++;
}
if (!downsamplePeaks) {
for (let i = 0; i < result.length; i++) {
result[i] = result[i] / count[i];
}
}
} else {
for (let i = 0; i < m; i++) {
const index = (i * (n - 1)) / (m - 1);
const low = Math.floor(index);
const high = Math.ceil(index);
const t = index - low;
if (high >= n) {
result[i] = data[n - 1];
} else {
result[i] = data[low] * (1 - t) + data[high] * t;
}
}
}
if (memoize) {
cache[mKey][dKey] = result;
}
return result;
};
export const WavRenderer = {
drawBars: (canvas, ctx, data, color, pointCount = 0, barWidth = 0, barSpacing = 0, center = false) => {
pointCount = Math.floor(
Math.min(
pointCount,
(canvas.width - barSpacing) / (Math.max(barWidth, 1) + barSpacing)
)
);
if (!pointCount) {
pointCount = Math.floor(
(canvas.width - barSpacing) / (Math.max(barWidth, 1) + barSpacing)
);
}
if (!barWidth) {
barWidth = (canvas.width - barSpacing) / pointCount - barSpacing;
}
const points = normalizeArray(data, pointCount, true);
for (let i = 0; i < pointCount; i++) {
const amplitude = Math.abs(points[i]);
const height = Math.max(1, amplitude * canvas.height);
const x = barSpacing + i * (barWidth + barSpacing);
const y = center? (canvas.height - height) / 2 : canvas.height - height;
ctx.fillStyle = color;
ctx.fillRect(x, y, barWidth, height);
}
},
};

30
web/src/views/ChatPlus.vue
View File

@ -2,7 +2,7 @@
<div class="chat-page">
<el-container>
<el-aside>
<div class="chat-list">
<div class="media-page">
<el-button @click="_newChat" color="#21aa93">
<el-icon style="margin-right: 5px">
<Plus/>
@ -138,8 +138,8 @@
<div class="input-box">
<div class="input-box-inner">
<span class="tool-item" @click="ElMessage.info('暂时不支持语音输入')">
<el-tooltip class="box-item" effect="dark" content="语音输入">
<span class="tool-item" @click="realtimeChat">
<el-tooltip class="box-item" effect="dark" content="实时语音对话">
<i class="iconfont icon-mic-bold"></i>
</el-tooltip>
</span>
@ -208,6 +208,10 @@
</el-dialog>
<ChatSetting :show="showChatSetting" @hide="showChatSetting = false"/>
<el-dialog v-model="showConversationDialog" title="实时语音通话" :before-close="hangUp">
<realtime-conversation @close="showConversationDialog = false" ref="conversationRef" :height="dialogHeight+'px'" />
</el-dialog>
</div>
@ -236,6 +240,7 @@ import FileList from "@/components/FileList.vue";
import ChatSetting from "@/components/ChatSetting.vue";
import BackTop from "@/components/BackTop.vue";
import {showMessageError} from "@/utils/dialog";
import RealtimeConversation from "@/components/RealtimeConversation.vue";
const title = ref('GeekAI-智能助手');
const models = ref([])
@ -891,6 +896,25 @@ const insertFile = (file) => {
const removeFile = (file) => {
files.value = removeArrayItem(files.value, file, (v1,v2) => v1.url===v2.url)
}
// 实时语音对话
const showConversationDialog = ref(false)
const conversationRef = ref(null)
const dialogHeight = ref(window.innerHeight - 75);
const realtimeChat = () => {
if (!isLogin.value) {
store.setShowLoginDialog(true)
return
}
showConversationDialog.value = true;
nextTick(() => {
conversationRef.value.connect()
})
}
const hangUp = () => {
showConversationDialog.value = false;
conversationRef.value.hangUp()
}
</script>
<style scoped lang="stylus">

12
web/src/views/Member.vue
View File

@ -44,11 +44,11 @@
<div class="product-info">
<div class="info-line">
<span class="label">商品原价：</span>
<span class="price">￥{{ item.price }}</span>
<span class="price"><del>￥{{ item.price }}</del></span>
</div>
<div class="info-line">
<span class="label">促销立减：</span>
<span class="price">￥{{ item.discount }}</span>
<span class="label">优惠价：</span>
<span class="discount">￥{{ item.discount }}</span>
</div>
<div class="info-line">
<span class="label">有效期：</span>
@ -93,7 +93,7 @@
<h2 class="headline">消费账单</h2>
<div class="user-order">
<user-order v-if="isLogin"/>
<user-order v-if="isLogin" :key="userOrderKey"/>
</div>
</div>
</div>
@ -154,6 +154,7 @@ const payWays = ref([])
const vipInfoText = ref("")
const store = useSharedStore()
const profileKey = ref(0)
const userOrderKey = ref(0)
const showDialog = ref(false)
const qrImg = ref("")
const price = ref(0)
@ -215,7 +216,7 @@ const pay = (product, payWay) => {
showDialog.value = true
loading.value = false
if (payWay.pay_way === 'wechat') {
price.value = Number((product.price - product.discount).toFixed(2))
price.value = Number(product.discount)
QRCode.toDataURL(res.data, {width: 300, height: 300, margin: 2}, (error, url) => {
if (error) {
console.error(error)
@ -245,6 +246,7 @@ const payCallback = (success) => {
showDialog.value = false
if (success) {
profileKey.value += 1
userOrderKey.value += 1
}
}

471
web/src/views/RealtimeTest.vue Normal file
View File

@ -0,0 +1,471 @@
<template>
<div data-component="ConsolePage">
<div class="content-top">
<div class="content-title">
<img src="/openai-logomark.svg" alt="OpenAI Logo" />
<span>realtime console</span>
</div>
</div>
<div class="content-main">
<div class="content-logs">
<div class="content-block events">
<div class="visualization">
<div class="visualization-entry client">
<canvas ref="clientCanvasRef" />
</div>
<div class="visualization-entry server">
<canvas ref="serverCanvasRef" />
</div>
</div>
<div class="content-block-title">events</div>
<div class="content-block-body" ref="eventsScrollRef">
<template v-if="!realtimeEvents.length">
awaiting connection...
</template>
<template v-else>
<div v-for="(realtimeEvent, i) in realtimeEvents" :key="realtimeEvent.event.event_id" class="event">
<div class="event-timestamp">
{{ formatTime(realtimeEvent.time) }}
</div>
<div class="event-details">
<div
class="event-summary"
@click="toggleEventDetails(realtimeEvent.event.event_id)"
>
<div
:class="[
'event-source',
realtimeEvent.event.type === 'error'
? 'error'
: realtimeEvent.source,
]"
>
<component :is="realtimeEvent.source === 'client' ? ArrowUp : ArrowDown" />
<span>
{{ realtimeEvent.event.type === 'error'
? 'error!'
: realtimeEvent.source }}
</span>
</div>
<div class="event-type">
{{ realtimeEvent.event.type }}
{{ realtimeEvent.count ? `(${realtimeEvent.count})` : '' }}
</div>
</div>
<div
v-if="expandedEvents[realtimeEvent.event.event_id]"
class="event-payload"
>
{{ JSON.stringify(realtimeEvent.event, null, 2) }}
</div>
</div>
</div>
</template>
</div>
</div>
<div class="content-block conversation">
<div class="content-block-title">conversation</div>
<div class="content-block-body" data-conversation-content>
<template v-if="!items.length">
awaiting connection...
</template>
<template v-else>
<div
v-for="(conversationItem, i) in items"
:key="conversationItem.id"
class="conversation-item"
>
<div :class="['speaker', conversationItem.role || '']">
<div>
{{
(conversationItem.role || conversationItem.type).replaceAll(
'_',
' '
)
}}
</div>
<div class="close" @click="deleteConversationItem(conversationItem.id)">
<X />
</div>
</div>
<div class="speaker-content">
<!-- tool response -->
<div v-if="conversationItem.type === 'function_call_output'">
{{ conversationItem.formatted.output }}
</div>
<!-- tool call -->
<div v-if="conversationItem.formatted.tool">
{{ conversationItem.formatted.tool.name }}(
{{ conversationItem.formatted.tool.arguments }})
</div>
<div
v-if="
!conversationItem.formatted.tool &&
conversationItem.role === 'user'
"
>
{{
conversationItem.formatted.transcript ||
(conversationItem.formatted.audio?.length
? '(awaiting transcript)'
: conversationItem.formatted.text || '(item sent)')
}}
</div>
<div
v-if="
!conversationItem.formatted.tool &&
conversationItem.role === 'assistant'
"
>
{{
conversationItem.formatted.transcript ||
conversationItem.formatted.text ||
'(truncated)'
}}
</div>
<audio
v-if="conversationItem.formatted.file"
:src="conversationItem.formatted.file.url"
controls
/>
</div>
</div>
</template>
</div>
</div>
<div class="content-actions" style="position:absolute; top: 0; left: 0">
<el-button
:type="isConnected ? '' : 'primary'"
@click="connectConversation"
>
{{isConnected ? '断开连接' : '连接对话'}}
</el-button>
<el-button @mousedown="startRecording" @mouseup="stopRecording">开始讲话</el-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, watch } from 'vue';
import { RealtimeClient } from '@openai/realtime-api-beta';
import { WavRecorder, WavStreamPlayer } from '@/lib/wavtools/index.js';
import { instructions } from '@/utils/conversation_config.js';
import { WavRenderer } from '@/utils/wav_renderer';
// Constants
const LOCAL_RELAY_SERVER_URL = process.env.REACT_APP_LOCAL_RELAY_SERVER_URL || '';
// Reactive state
const apiKey = ref(
LOCAL_RELAY_SERVER_URL
? ''
: localStorage.getItem('tmp::voice_api_key') || prompt('OpenAI API Key') || ''
);
const wavRecorder = ref(new WavRecorder({ sampleRate: 24000 }));
const wavStreamPlayer = ref(new WavStreamPlayer({ sampleRate: 24000 }));
const client = ref(
new RealtimeClient({
url: "ws://localhost:5678/api/realtime",
apiKey: "sk-Gc5cEzDzGQLIqxWA9d62089350F3454bB359C4A3Fa21B3E4",
dangerouslyAllowAPIKeyInBrowser: true,
})
);
const clientCanvasRef = ref(null);
const serverCanvasRef = ref(null);
const eventsScrollRef = ref(null);
const startTime = ref(new Date().toISOString());
const items = ref([]);
const realtimeEvents = ref([]);
const expandedEvents = reactive({});
const isConnected = ref(false);
const canPushToTalk = ref(true);
const isRecording = ref(false);
const memoryKv = ref({});
const coords = ref({ lat: 37.775593, lng: -122.418137 });
const marker = ref(null);
// Methods
const formatTime = (timestamp) => {
const t0 = new Date(startTime.value).valueOf();
const t1 = new Date(timestamp).valueOf();
const delta = t1 - t0;
const hs = Math.floor(delta / 10) % 100;
const s = Math.floor(delta / 1000) % 60;
const m = Math.floor(delta / 60_000) % 60;
const pad = (n) => {
let s = n + '';
while (s.length < 2) {
s = '0' + s;
}
return s;
};
return `${pad(m)}:${pad(s)}.${pad(hs)}`;
};
const connectConversation = async () => {
alert(123)
startTime.value = new Date().toISOString();
isConnected.value = true;
realtimeEvents.value = [];
items.value = client.value.conversation.getItems();
await wavRecorder.value.begin();
await wavStreamPlayer.value.connect();
await client.value.connect();
client.value.sendUserMessageContent([
{
type: 'input_text',
text: '你好，我是老阳!',
},
]);
if (client.value.getTurnDetectionType() === 'server_vad') {
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
}
};
const disconnectConversation = async () => {
isConnected.value = false;
realtimeEvents.value = [];
items.value = [];
memoryKv.value = {};
coords.value = { lat: 37.775593, lng: -122.418137 };
marker.value = null;
client.value.disconnect();
await wavRecorder.value.end();
await wavStreamPlayer.value.interrupt();
};
const deleteConversationItem = async (id) => {
client.value.deleteItem(id);
};
const startRecording = async () => {
isRecording.value = true;
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
await client.value.cancelResponse(trackId, offset);
}
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
};
const stopRecording = async () => {
isRecording.value = false;
await wavRecorder.value.pause();
client.value.createResponse();
};
const changeTurnEndType = async (value) => {
if (value === 'none' && wavRecorder.value.getStatus() === 'recording') {
await wavRecorder.value.pause();
}
client.value.updateSession({
turn_detection: value === 'none' ? null : { type: 'server_vad' },
});
if (value === 'server_vad' && client.value.isConnected()) {
await wavRecorder.value.record((data) => client.value.appendInputAudio(data.mono));
}
canPushToTalk.value = value === 'none';
};
const toggleEventDetails = (eventId) => {
if (expandedEvents[eventId]) {
delete expandedEvents[eventId];
} else {
expandedEvents[eventId] = true;
}
};
// Lifecycle hooks and watchers
onMounted(() => {
if (apiKey.value !== '') {
localStorage.setItem('tmp::voice_api_key', apiKey.value);
}
// Set up render loops for the visualization canvas
let isLoaded = true;
const render = () => {
if (isLoaded) {
if (clientCanvasRef.value) {
const canvas = clientCanvasRef.value;
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const result = wavRecorder.value.recording
? wavRecorder.value.getFrequencies('voice')
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, '#0099ff', 10, 0, 8);
}
}
if (serverCanvasRef.value) {
const canvas = serverCanvasRef.value;
if (!canvas.width || !canvas.height) {
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
}
const ctx = canvas.getContext('2d');
if (ctx) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const result = wavStreamPlayer.value.analyser
? wavStreamPlayer.value.getFrequencies('voice')
: { values: new Float32Array([0]) };
WavRenderer.drawBars(canvas, ctx, result.values, '#009900', 10, 0, 8);
}
}
requestAnimationFrame(render);
}
};
render();
// Set up client event listeners
client.value.on('realtime.event', (realtimeEvent) => {
realtimeEvents.value = realtimeEvents.value.slice();
const lastEvent = realtimeEvents.value[realtimeEvents.value.length - 1];
if (lastEvent?.event.type === realtimeEvent.event.type) {
lastEvent.count = (lastEvent.count || 0) + 1;
realtimeEvents.value.splice(-1, 1, lastEvent);
} else {
realtimeEvents.value.push(realtimeEvent);
}
});
client.value.on('error', (event) => console.error(event));
client.value.on('conversation.interrupted', async () => {
const trackSampleOffset = await wavStreamPlayer.value.interrupt();
if (trackSampleOffset?.trackId) {
const { trackId, offset } = trackSampleOffset;
await client.value.cancelResponse(trackId, offset);
}
});
client.value.on('conversation.updated', async ({ item, delta }) => {
items.value = client.value.conversation.getItems();
if (delta?.audio) {
wavStreamPlayer.value.add16BitPCM(delta.audio, item.id);
}
if (item.status === 'completed' && item.formatted.audio?.length) {
const wavFile = await WavRecorder.decode(
item.formatted.audio,
24000,
24000
);
item.formatted.file = wavFile;
}
});
// Set up client instructions and tools
client.value.updateSession({ instructions: instructions });
client.value.updateSession({ input_audio_transcription: { model: 'whisper-1' } });
client.value.addTool(
{
name: 'set_memory',
description: 'Saves important data about the user into memory.',
parameters: {
type: 'object',
properties: {
key: {
type: 'string',
description:
'The key of the memory value. Always use lowercase and underscores, no other characters.',
},
value: {
type: 'string',
description: 'Value can be anything represented as a string',
},
},
required: ['key', 'value'],
},
},
async ({ key, value }) => {
memoryKv.value = { ...memoryKv.value, [key]: value };
return { ok: true };
}
);
client.value.addTool(
{
name: 'get_weather',
description:
'Retrieves the weather for a given lat, lng coordinate pair. Specify a label for the location.',
parameters: {
type: 'object',
properties: {
lat: {
type: 'number',
description: 'Latitude',
},
lng: {
type: 'number',
description: 'Longitude',
},
location: {
type: 'string',
description: 'Name of the location',
},
},
required: ['lat', 'lng', 'location'],
},
},
async ({ lat, lng, location }) => {
marker.value = { lat, lng, location };
coords.value = { lat, lng, location };
const result = await fetch(
`https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&current=temperature_2m,wind_speed_10m`
);
const json = await result.json();
const temperature = {
value: json.current.temperature_2m,
units: json.current_units.temperature_2m,
};
const wind_speed = {
value: json.current.wind_speed_10m,
units: json.current_units.wind_speed_10m,
};
marker.value = { lat, lng, location, temperature, wind_speed };
return json;
}
);
items.value = client.value.conversation.getItems();
});
onUnmounted(() => {
client.value.reset();
});
// Watchers
watch(realtimeEvents, () => {
if (eventsScrollRef.value) {
const eventsEl = eventsScrollRef.value;
eventsEl.scrollTop = eventsEl.scrollHeight;
}
});
watch(items, () => {
const conversationEls = document.querySelectorAll('[data-conversation-content]');
conversationEls.forEach((el) => {
el.scrollTop = el.scrollHeight;
});
});
</script>
<style scoped>
/* You can add your component-specific styles here */
/* If you're using SCSS, you might want to import your existing SCSS file */
/* @import './ConsolePage.scss'; */
</style>

13
web/src/views/Register.vue
View File

@ -141,10 +141,10 @@
<el-row class="text-line" :gutter="24">
<el-col :span="12">
<el-link type="primary" @click="router.push('/login')">登录</el-link>
<el-link type="primary" class="text-link" @click="router.push('/login')">登录</el-link>
</el-col>
<el-col :span="12">
<el-link type="primary" @click="router.push('/')">首页</el-link>
<el-link type="primary" class="text-link" @click="router.push('/')">首页</el-link>
</el-col>
</el-row>
</el-form>
@ -315,11 +315,11 @@ const doSubmitRegister = (verifyData) => {
top 0
bottom 0
background-color #091519
background-image url("~@/assets/img/reg-bg.jpg")
background-image url("~@/assets/img/reg_bg.png")
background-size cover
background-position center
background-repeat no-repeat
//filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
}
.register-page {
@ -379,6 +379,7 @@ const doSubmitRegister = (verifyData) => {
}
}
.btn-row {
padding-top 10px;
@ -389,6 +390,10 @@ const doSubmitRegister = (verifyData) => {
}
}
.text-link {
color #ffffff
}
.text-line {
justify-content center
padding-top 10px;

29
web/src/views/Test.vue
View File

@ -1,16 +1,27 @@
<template>
<div>
{{data}}
<div class="audio-chat-page">
<el-button style="margin: 20px" type="primary" size="large" @click="connect()">开始语音对话</el-button>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
const data = ref('abc')
onMounted(() => {
})
const connect = () => {
}
</script>
<style scoped lang="stylus">
.audio-chat-page {
display flex
flex-flow column
justify-content center
align-items center
}
canvas {
background-color: transparent;
}
</style>

35
web/src/views/admin/ApiKey.vue
View File

@ -79,7 +79,7 @@
<el-input v-model="item.name" autocomplete="off"/>
</el-form-item>
<el-form-item label="类型：" prop="type">
<el-select v-model="item.type" placeholder="请选择类型">
<el-select v-model="item.type" placeholder="请选择类型" @change="changeType">
<el-option v-for="item in types" :value="item.value" :label="item.label" :key="item.value">{{
item.label
}}
@ -91,13 +91,13 @@
</el-form-item>
<el-form-item label="API URL：" prop="api_url">
<el-input v-model="item.api_url" autocomplete="off"
placeholder="只填 BASE URL 即可，如：https://api.openai.com"/>
placeholder="只填 BASE URL 即可，如：https://api.openai.com 或者 wss://api.openai.com"/>
</el-form-item>
<el-form-item label="代理地址：" prop="proxy_url">
<el-input v-model="item.proxy_url" autocomplete="off"/>
<div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>
</el-form-item>
<!-- <el-form-item label="代理地址：" prop="proxy_url">-->
<!-- <el-input v-model="item.proxy_url" autocomplete="off"/>-->
<!-- <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
<!-- </el-form-item>-->
<el-form-item label="启用状态：" prop="enable">
<el-switch v-model="item.enabled"/>
@ -125,7 +125,9 @@ import ClipboardJS from "clipboard";
// 变量定义
const items = ref([])
const query = ref({type: ''})
const item = ref({})
const item = ref({
enabled: true, api_url: ""
})
const showDialog = ref(false)
const rules = reactive({
name: [{required: true, message: '请输入名称', trigger: 'change',}],
@ -143,9 +145,9 @@ const types = ref([
{label: "DALL-E", value:"dalle"},
{label: "Suno文生歌", value:"suno"},
{label: "Luma视频", value:"luma"},
{label: "Realtime API", value:"realtime"},
])
const isEdit = ref(false)
const clipboard = ref(null)
onMounted(() => {
clipboard.value = new ClipboardJS('.copy-key');
@ -164,6 +166,18 @@ onUnmounted(() => {
clipboard.value.destroy()
})
const changeType = (event) => {
if (isEdit.value) {
return
}
if (event === 'realtime') {
item.value.api_url = "wss://api.geekai.pro"
} else {
item.value.api_url = "https://api.geekai.pro"
}
}
const getTypeName = (type) => {
for (let v of types.value) {
if (v.value === type) {
@ -194,13 +208,14 @@ const fetchData = () => {
const add = function () {
showDialog.value = true
title.value = "新增 API KEY"
item.value = {enabled: true,api_url: "https://api.geekai.pro"}
isEdit.value = false
}
const edit = function (row) {
showDialog.value = true
title.value = "修改 API KEY"
item.value = row
isEdit.value = true
}
const save = function () {

51
web/src/views/admin/ChatList.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="container chat-list">
<div class="container chat-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="对话列表" name="chat" v-loading="data.chat.loading">
<div class="handle-box">
@ -145,13 +145,19 @@
<el-dialog
v-model="showContentDialog"
title="消息详情"
class="chat-dialog"
style="--el-dialog-width:60%"
>
<div v-html="dialogContent" style="overflow: auto; max-height: 300px"></div>
<div class="chat-detail">
<div class="chat-line" v-html="dialogContent"></div>
</div>
</el-dialog>
<el-dialog
v-model="showChatItemDialog"
title="对话详情"
class="chat-dialog"
style="--el-dialog-width:60%"
>
<div class="chat-box chat-page">
<div v-for="item in messages" :key="item.id">
@ -197,12 +203,6 @@ const data = ref({
loading: true
}
})
const items = ref([])
const query = ref({title: "", created_at: []})
const total = ref(0)
const page = ref(1)
const pageSize = ref(15)
const loading = ref(true)
const activeName = ref("chat")
onMounted(() => {
@ -284,11 +284,33 @@ const removeMessage = function (row) {
})
}
const mathjaxPlugin = require('markdown-it-mathjax3')
const md = require('markdown-it')({
breaks: true,
html: true,
linkify: true,
typographer: true,
highlight: function (str, lang) {
if (lang && hl.getLanguage(lang)) {
// 处理代码高亮
const preCode = hl.highlight(lang, str, true).value
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
}
// 处理代码高亮
const preCode = md.utils.escapeHtml(str)
// 将代码包裹在 pre 中
return `<pre class="code-container"><code class="language-${lang} hljs">${preCode}</code></pre>`
}
});
md.use(mathjaxPlugin)
const showContentDialog = ref(false)
const dialogContent = ref("")
const showContent = (content) => {
showContentDialog.value = true
dialogContent.value = processContent(content)
dialogContent.value = md.render(processContent(content))
}
const showChatItemDialog = ref(false)
@ -309,7 +331,7 @@ const showMessages = (row) => {
</script>
<style lang="stylus" scoped>
.chat-list {
.chat-page {
.handle-box {
margin-bottom 20px
.handle-input {
@ -338,16 +360,19 @@ const showMessages = (row) => {
justify-content right
}
.chat-detail {
max-height 90vh
overflow auto
}
.chat-box {
overflow-y: auto;
overflow-x hidden
overflow auto
// 变量定义
--content-font-size: 16px;
--content-color: #c1c1c1;
font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
height 90vh
max-height 90vh
.chat-line {
// 隐藏滚动条

485
web/src/views/admin/ImageList.vue Normal file
View File

@ -0,0 +1,485 @@
<template>
<div class="container image-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Midjourney" name="mj" v-loading="data.mj.loading">
<div class="handle-box">
<el-input v-model="data.mj.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'mj')" clearable />
<el-input v-model="data.mj.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'mj')" clearable />
<el-date-picker
v-model="data.mj.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchMjData">搜索</el-button>
</div>
<div v-if="data.mj.items.length > 0">
<el-row>
<el-table :data="data.mj.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column label="任务类型">
<template #default="scope">
<el-button :color="taskTypeTheme[scope.row.type].color" size="small" plain>{{taskTypeTheme[scope.row.type].text}}</el-button>
</template>
</el-table-column>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column label="结果图片">
<template #default="scope">
<el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
</template>
</el-table-column>
<el-table-column label="提示词">
<template #default="scope">
<el-popover
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'mj')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.mj.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.mj.page"
v-model:page-size="data.mj.pageSize"
@current-change="fetchMjData()"
:total="data.mj.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
<el-tab-pane label="Stable-Diffusion" name="sd" v-loading="data.sd.loading">
<div class="handle-box">
<el-input v-model="data.sd.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-input v-model="data.sd.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-date-picker
v-model="data.sd.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchSdData">搜索</el-button>
</div>
<div v-if="data.sd.items.length > 0">
<el-row>
<el-table :data="data.sd.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column label="结果图片">
<template #default="scope">
<el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
</template>
</el-table-column>
<el-table-column label="提示词">
<template #default="scope">
<el-popover
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'sd')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.sd.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.sd.page"
v-model:page-size="data.sd.pageSize"
@current-change="fetchSdData()"
:total="data.sd.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
<el-tab-pane label="DALL-E" name="dall">
<div class="handle-box">
<el-input v-model="data.dall.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'dall')" clearable />
<el-input v-model="data.dall.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'dall')" clearable />
<el-date-picker
v-model="data.dall.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchDallData">搜索</el-button>
</div>
<div v-if="data.dall.items.length > 0">
<el-row>
<el-table :data="data.dall.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column label="结果图片">
<template #default="scope">
<el-button size="small" type="success" @click="showImage(scope.row.img_url)" v-if="scope.row.img_url !== ''" plain>预览图片</el-button>
</template>
</el-table-column>
<el-table-column label="提示词">
<template #default="scope">
<el-popover
placement="top-start"
title="绘画提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'dall')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.dall.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.dall.page"
v-model:page-size="data.dall.pageSize"
@current-change="fetchDallData()"
:total="data.dall.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="showImageDialog"
title="图片预览"
>
<el-image
:src="imgURL"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:preview-src-list="[imgURL]"
:initial-index="0"
fit="cover"
/>
</el-dialog>
</div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat, substr} from "@/utils/libs";
import {Search} from "@element-plus/icons-vue";
// 变量定义
const data = ref({
"mj": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 15,
loading: true
},
"sd": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 15,
loading: true
},
"dall": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 15,
loading: true
}
})
const activeName = ref("mj")
const taskTypeTheme = {
image: {text: "绘图", color: "#2185d0"},
upscale: {text: "放大", color: "#f2711c" },
variation: {text: "变换", color: "#00b5ad"},
blend: {text: "融图", color: "#21ba45"},
swapFace: {text: "换脸", color: "#a333c8"}
}
onMounted(() => {
fetchMjData()
})
const handleChange = (tab) => {
switch (tab) {
case "mj":
fetchMjData()
break
case "sd":
fetchSdData()
break
case "dall":
fetchDallData()
break
}
}
// 搜索对话
const search = (evt,tab) => {
if (evt.keyCode === 13) {
handleChange(tab)
}
}
// 获取数据
const fetchMjData = () => {
const d = data.value.mj
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/image/list/mj', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const fetchSdData = () => {
const d = data.value.sd
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/image/list/sd', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const fetchDallData = () => {
const d = data.value.dall
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/image/list/dall', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const remove = function (row,tab) {
httpGet(`/api/admin/image/remove?id=${row.id}&tab=${tab}`).then(() => {
ElMessage.success("删除成功！")
handleChange(tab)
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
}
const showImageDialog = ref(false)
const imgURL = ref('')
const showImage = (url) => {
showImageDialog.value = true
imgURL.value = url
}
</script>
<style lang="stylus" scoped>
.image-page {
.handle-box {
margin-bottom 20px
.handle-input {
max-width 150px;
margin-right 10px;
}
}
.opt-box {
padding-bottom: 10px;
display flex;
justify-content flex-end
.el-icon {
margin-right: 5px;
}
}
.el-select {
width: 100%
}
.pagination {
padding 20px 0
display flex
justify-content right
}
}
</style>

40
web/src/views/admin/Login.vue
View File

@ -1,4 +1,6 @@
<template>
<div>
<div class="bg"></div>
<div class="admin-login">
<div class="main">
<div class="contain">
@ -6,7 +8,7 @@
<el-image :src="logo" fit="cover"/>
</div>
<h1 class="header">{{ title }}</h1>
<h1 class="header">登录 {{ title }}</h1>
<div class="content">
<el-input v-model="username" placeholder="请输入用户名" size="large"
autocomplete="off" autofocus @keyup.enter="login">
@ -36,13 +38,14 @@
<footer-bar class="footer"/>
</div>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {Lock, UserFilled} from "@element-plus/icons-vue";
import {httpGet, httpPost} from "@/utils/http";
import {httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
@ -105,14 +108,33 @@ const doLogin = function (verifyData) {
</script>
<style lang="stylus" scoped>
.bg {
position absolute
left 0
right 0
top 0
bottom 0
background-color #091519
background-image url("~@/assets/img/admin-login-bg.jpg")
background-size cover
background-position center
background-repeat no-repeat
filter: blur(10px); /* 调整模糊程度，可以根据需要修改值 */
z-index 0
}
.admin-login {
position absolute
left 0
top 0
z-index 10
display flex
justify-content center
width: 100%
background #2D3A4B
height: 100vh
.main {
width 400px;
max-width 400px
display flex
justify-content center
align-items center
@ -120,10 +142,10 @@ const doLogin = function (verifyData) {
.contain {
width 100%
padding 20px 40px;
padding 40px;
color #ffffff
border-radius 10px;
background rgba(255, 255, 255, 0.3)
background rgba(0, 0, 0, 0.3)
.logo {
text-align center
@ -137,7 +159,7 @@ const doLogin = function (verifyData) {
.header {
width 100%
margin-bottom 20px
//margin-bottom 20px
padding 10px
font-size 26px
text-align center
@ -148,6 +170,10 @@ const doLogin = function (verifyData) {
height: auto
border-radius 3px
.el-input {
margin 10px 0
}
.block {
margin-bottom 16px

450
web/src/views/admin/Medias.vue Normal file
View File

@ -0,0 +1,450 @@
<template>
<div class="container media-page">
<el-tabs v-model="activeName" @tab-change="handleChange">
<el-tab-pane label="Suno音乐" name="suno" v-loading="data.suno.loading">
<div class="handle-box">
<el-input v-model="data.suno.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event,'suno')" clearable />
<el-input v-model="data.suno.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event,'suno')" clearable />
<el-date-picker
v-model="data.suno.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchSunoData">搜索</el-button>
</div>
<div v-if="data.suno.items.length > 0">
<el-row>
<el-table :data="data.suno.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column label="歌曲预览">
<template #default="scope">
<div class="container" v-if="scope.row.cover_url">
<el-image :src="scope.row.cover_url" fit="cover" />
<div class="duration">{{formatTime(scope.row.duration)}}</div>
<button class="play" @click="playMusic(scope.row)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
<el-image v-else src="/images/failed.jpg" style="height: 90px" fit="cover" />
</template>
</el-table-column>
<el-table-column prop="title" label="标题"/>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column prop="tags" label="风格"/>
<el-table-column prop="play_times" label="播放次数"/>
<el-table-column label="歌词">
<template #default="scope">
<el-button size="small" type="primary" plain @click="showLyric(scope.row)">查看歌词</el-button>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'suno')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.suno.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.suno.page"
v-model:page-size="data.suno.pageSize"
@current-change="fetchSunoData()"
:total="data.suno.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
<el-tab-pane label="Luma视频" name="luma" v-loading="data.luma.loading">
<div class="handle-box">
<el-input v-model="data.luma.query.username" placeholder="用户名" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-input v-model="data.luma.query.prompt" placeholder="提示词" class="handle-input mr10"
@keyup="search($event, 'sd')" clearable />
<el-date-picker
v-model="data.luma.query.created_at"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"
style="margin-right: 10px;width: 200px; position: relative;top:3px;"
/>
<el-button type="primary" :icon="Search" @click="fetchLumaData">搜索</el-button>
</div>
<div v-if="data.luma.items.length > 0">
<el-row>
<el-table :data="data.luma.items" :row-key="row => row.id" table-layout="auto">
<el-table-column prop="user_id" label="用户ID"/>
<el-table-column label="视频预览">
<template #default="scope">
<div class="container">
<div v-if="scope.row.progress === 100">
<video class="video" :src="replaceImg(scope.row.video_url)" preload="auto" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
<button class="play" @click="playVideo(scope.row)">
<img src="/images/play.svg" alt=""/>
</button>
</div>
<el-image :src="scope.row.cover_url" fit="cover" v-else-if="scope.row.progress > 100" />
<generating message="正在生成视频" v-else />
</div>
</template>
</el-table-column>
<el-table-column prop="progress" label="任务进度">
<template #default="scope">
<span v-if="scope.row.progress <= 100">{{scope.row.progress}}%</span>
<el-tag v-else type="danger">已失败</el-tag>
</template>
</el-table-column>
<el-table-column prop="power" label="消耗算力"/>
<el-table-column label="提示词">
<template #default="scope">
<el-popover
placement="top-start"
title="提示词"
:width="300"
trigger="hover"
:content="scope.row.prompt"
>
<template #reference>
<span>{{ substr(scope.row.prompt, 20) }}</span>
</template>
</el-popover>
</template>
</el-table-column>
<el-table-column label="创建时间">
<template #default="scope">
<span>{{ dateFormat(scope.row['created_at']) }}</span>
</template>
</el-table-column>
<el-table-column label="失败原因">
<template #default="scope">
<el-popover
placement="top-start"
title="失败原因"
:width="300"
trigger="hover"
:content="scope.row.err_msg"
v-if="scope.row.progress === 101"
>
<template #reference>
<el-text type="danger">{{ substr(scope.row.err_msg, 20) }}</el-text>
</template>
</el-popover>
<span v-else>无</span>
</template>
</el-table-column>
<el-table-column label="操作" width="180">
<template #default="scope">
<el-popconfirm title="确定要删除当前记录吗?" @confirm="remove(scope.row, 'luma')">
<template #reference>
<el-button size="small" type="danger">删除</el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="pagination">
<el-pagination v-if="data.luma.total > 0" background
layout="total,prev, pager, next"
:hide-on-single-page="true"
v-model:current-page="data.luma.page"
v-model:page-size="data.luma.pageSize"
@current-change="fetchLumaData()"
:total="data.luma.total"/>
</div>
</div>
<el-empty v-else />
</el-tab-pane>
</el-tabs>
<el-dialog
v-model="showVideoDialog"
title="视频预览"
>
<video style="width: 100%; max-height: 90vh;" :src="currentVideoUrl" preload="auto" :autoplay="true" loop="loop" muted="muted">
您的浏览器不支持视频播放
</video>
</el-dialog>
<div class="music-player" v-if="showPlayer">
<music-player :songs="playList" ref="playerRef" :show-close="true" @close="showPlayer = false" />
</div>
<el-dialog
v-model="showLyricDialog"
title="歌词"
>
<div class="chat-line" v-html="lyrics"></div>
</el-dialog>
</div>
</template>
<script setup>
import {nextTick, onMounted, ref} from "vue";
import {httpGet, httpPost} from "@/utils/http";
import {ElMessage} from "element-plus";
import {dateFormat, formatTime, replaceImg, substr} from "@/utils/libs";
import {Search} from "@element-plus/icons-vue";
import MusicPlayer from "@/components/MusicPlayer.vue";
import Generating from "@/components/ui/Generating.vue";
// 变量定义
const data = ref({
"suno": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 10,
loading: true
},
"luma": {
items: [],
query: {prompt: "", username: "", created_at: [], page: 1, page_size: 15},
total: 0,
page: 1,
pageSize: 10,
loading: true
}
})
const activeName = ref("suno")
const playList = ref([])
const playerRef = ref(null)
const showPlayer = ref(false)
const showLyricDialog = ref(false)
const lyrics = ref("")
const showVideoDialog = ref(false)
const currentVideoUrl = ref('')
onMounted(() => {
fetchSunoData()
})
const handleChange = (tab) => {
switch (tab) {
case "suno":
fetchSunoData()
break
case "luma":
fetchLumaData()
break
}
}
// 搜索对话
const search = (evt,tab) => {
if (evt.keyCode === 13) {
handleChange(tab)
}
}
// 获取数据
const fetchSunoData = () => {
const d = data.value.suno
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/media/list/suno', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const fetchLumaData = () => {
const d = data.value.luma
d.query.page = d.page
d.query.page_size = d.pageSize
httpPost('/api/admin/media/list/luma', d.query).then((res) => {
if (res.data) {
d.items = res.data.items
d.total = res.data.total
d.page = res.data.page
d.pageSize = res.data.page_size
}
d.loading = false
}).catch(e => {
ElMessage.error("获取数据失败：" + e.message);
})
}
const remove = function (row,tab) {
httpGet(`/api/admin/media/remove?id=${row.id}&tab=${tab}`).then(() => {
ElMessage.success("删除成功！")
handleChange(tab)
}).catch((e) => {
ElMessage.error("删除失败：" + e.message)
})
}
const playMusic = (item) => {
playList.value = [item]
showPlayer.value = true
nextTick(()=> playerRef.value.play())
}
const playVideo = (item) => {
currentVideoUrl.value = replaceImg(item.video_url)
showVideoDialog.value = true
}
const md = require('markdown-it')({
breaks: true,
html: true,
linkify: true,
});
const showLyric = (item) => {
showLyricDialog.value = true
lyrics.value = md.render(item.prompt)
}
</script>
<style lang="stylus" scoped>
.media-page {
.handle-box {
margin-bottom 20px
.handle-input {
max-width 150px;
margin-right 10px;
}
}
.opt-box {
padding-bottom: 10px;
display flex;
justify-content flex-end
.el-icon {
margin-right: 5px;
}
}
.el-select {
width: 100%
}
.pagination {
padding 20px 0
display flex
justify-content right
}
.container {
width 160px
position relative
.video{
width 160px
border-radius 5px
}
.el-image {
width 160px
height 90px
border-radius 5px
}
.duration {
position absolute
bottom 6px
right 0
background-color rgba(255, 255, 255,.7)
padding 0 3px
font-family 'Input Sans'
font-size 14px
font-weight 700
border-radius .125rem
}
.play {
position absolute
width: 100%
height 100%
top: 0;
left: 50%;
border none
border-radius 5px
background rgba(100, 100, 100, 0.3)
cursor pointer
color #ffffff
opacity 0
transform: translate(-50%, 0px);
transition opacity 0.3s ease 0s
}
&:hover {
.play {
opacity 1
//display block
}
}
}
.music-player {
position absolute
bottom 20px
z-index 99999
width 100%
}
}
</style>

10
web/src/views/admin/Product.vue
View File

@ -15,8 +15,8 @@
</span>
</template>
</el-table-column>
<el-table-column prop="price" label="产品价格"/>
<el-table-column prop="discount" label="优惠金额"/>
<el-table-column prop="price" label="商品原价"/>
<el-table-column prop="discount" label="优惠价"/>
<el-table-column prop="days" label="有效期(天)">
<template #default="scope">
<el-tag v-if="scope.row.days === 0">长期有效</el-tag>
@ -56,15 +56,15 @@
:close-on-click-modal="false"
>
<el-form :model="item" label-width="120px" ref="formRef" :rules="rules">
<el-form-item label="产品名称：" prop="name">
<el-form-item label="商品名称：" prop="name">
<el-input v-model="item.name" autocomplete="off"/>
</el-form-item>
<el-form-item label="产品价格：" prop="price">
<el-form-item label="商品原价：" prop="price">
<el-input v-model="item.price" autocomplete="off"/>
</el-form-item>
<el-form-item label="优惠金额：" prop="discount">
<el-form-item label="优惠价：" prop="discount">
<el-input v-model="item.discount" autocomplete="off"/>
</el-form-item>

6
web/src/views/admin/SysConfig.vue
View File

@ -403,11 +403,11 @@
<el-tab-pane label="修复数据" name="fixData">
<div class="container">
<p class="text">有些版本升级的时候更新了数据库的结构，比如字段名字改了，需要把之前的字段的值转移到其他字段，这些无法通过简单的 SQL 语句可以实现的，需要手动写程序修正数据。</p>
<!-- <p class="text">有些版本升级的时候更新了数据库的结构，比如字段名字改了，需要把之前的字段的值转移到其他字段，这些无法通过简单的 SQL 语句可以实现的，需要手动写程序修正数据。</p>-->
<p class="text">当前版本 v4.1.4 需要修正用户数据，增加了 mobile 和 email 字段，需要把之前用手机号或者邮箱注册的用户的 username 字段数据初始化到 mobile 或者 email 字段。另外，需要把订单的支付渠道从名字称修正为 key。</p>
<!-- <p class="text">当前版本 v4.1.4 需要修正用户数据，增加了 mobile 和 email 字段，需要把之前用手机号或者邮箱注册的用户的 username 字段数据初始化到 mobile 或者 email 字段。另外，需要把订单的支付渠道从名字称修正为 key。</p>-->
<el-text type="danger">请注意：在修复数据前，请先备份好数据库，以免数据丢失！</el-text>
<!-- <el-text type="danger">请注意：在修复数据前，请先备份好数据库，以免数据丢失！</el-text>-->
<p><el-button type="primary" @click="fixData">立即修复</el-button></p>
</div>

2
web/src/views/mobile/Profile.vue
View File

@ -75,7 +75,7 @@
<van-cell-group>
<van-cell title="商品价格">
<span class="price">
￥{{ (item.price - item.discount).toFixed(2) }}
￥{{ item.discount }}
</span>
（
<del>￥{{ item.price }}</del>