Merge branch 'dev'

CHANGELOG.md

@@ -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修复：兼容手机端原生微信支付和支付宝支付渠道

api/core/app_server.go

@@ -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 连接
+		} else if clientProtocols != "" { // Websocket 连接
-			tokenString = c.Query("token")
+			// 解析子协议内容
+			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)
 		}

api/handler/admin/config_handler.go

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

api/handler/admin/image_handler.go

@@ -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)
+}

api/handler/admin/media_handler.go

@@ -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)
+}

api/handler/admin/redeem_handler.go

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

api/handler/dalle_handler.go

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

api/handler/mj_handler.go

@@ -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.Delete(&job)
-		tx.Rollback()
-		resp.ERROR(c, err.Error())
-		return
-	}
-
 	// 如果任务未完成，或者任务失败，则恢复用户算力
 	if job.Progress != 100 {
 		err := h.userService.IncreasePower(job.UserId, job.Power, model.PowerLog{

api/handler/payment_handler.go

@@ -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":

api/handler/realtime_handler.go

@@ -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)
+	}
+}

api/handler/sd_handler.go

@@ -250,18 +250,13 @@ func (h *SdJobHandler) Remove(c *gin.Context) {
 
 	// 删除任务
 	tx := h.DB.Begin()
-	if err := tx.Delete(&job).Error; err != nil {
+	tx.Delete(&job)
-		tx.Rollback()
-		resp.ERROR(c, err.Error())
-		return
-	}
-
 	// 如果任务未完成，或者任务失败，则恢复用户算力
 	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()

api/handler/video_handler.go

@@ -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)
 	}
 

api/handler/ws_handler.go

@@ -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()

api/main.go

@@ -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() {

api/store/vo/mj_job.go

@@ -1,23 +1,21 @@
 package vo
 
-import "time"
-
 type MidJourneyJob struct {
-	Id          uint      `json:"id"`
+	Id          uint   `json:"id"`
-	Type        string    `json:"type"`
+	Type        string `json:"type"`
-	UserId      int       `json:"user_id"`
+	UserId      int    `json:"user_id"`
-	ChannelId   string    `json:"channel_id"`
+	ChannelId   string `json:"channel_id"`
-	TaskId      string    `json:"task_id"`
+	TaskId      string `json:"task_id"`
-	MessageId   string    `json:"message_id"`
+	MessageId   string `json:"message_id"`
-	ReferenceId string    `json:"reference_id"`
+	ReferenceId string `json:"reference_id"`
-	ImgURL      string    `json:"img_url"`
+	ImgURL      string `json:"img_url"`
-	OrgURL      string    `json:"org_url"`
+	OrgURL      string `json:"org_url"`
-	Hash        string    `json:"hash"`
+	Hash        string `json:"hash"`
-	Progress    int       `json:"progress"`
+	Progress    int    `json:"progress"`
-	Prompt      string    `json:"prompt"`
+	Prompt      string `json:"prompt"`
-	UseProxy    bool      `json:"use_proxy"`
+	UseProxy    bool   `json:"use_proxy"`
-	Publish     bool      `json:"publish"`
+	Publish     bool   `json:"publish"`
-	ErrMsg      string    `json:"err_msg"`
+	ErrMsg      string `json:"err_msg"`
-	Power       int       `json:"power"`
+	Power       int    `json:"power"`
-	CreatedAt   time.Time `json:"created_at"`
+	CreatedAt   int64  `json:"created_at"`
 }

api/store/vo/sd_job.go

@@ -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"`
 }

database/geekai_plus-v4.1.5.sql

@@ -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
 

database/update-v4.1.6.sql

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

deploy/data/mysql/init.d/geekai_plus-v4.1.6.sql

@@ -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),
+(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.00, 0, 200, 1, 2, 2, '1970-01-01 08:00:00', '2024-08-05 16:05:46', 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`

deploy/docker-compose.yaml

@@ -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:

web/.env.development

@@ -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

web/.env.production

@@ -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

web/package-lock.json

@@ -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",

web/package.json

@@ -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",

web/src/App.vue

@@ -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
     }
   }

web/src/assets/css/chat-plus.styl

@@ -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

web/src/assets/css/member.styl

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

web/src/assets/css/realtime.styl

@@ -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;
+      }
+    }
+
+  }
+}

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1726622198991') format('woff2'),
+  src: url('iconfont.woff2?t=1728891448746') format('woff2'),
-       url('iconfont.woff?t=1726622198991') format('woff'),
+       url('iconfont.woff?t=1728891448746') format('woff'),
-       url('iconfont.ttf?t=1726622198991') format('truetype');
+       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";
 }

web/src/assets/iconfont/iconfont.json

@@ -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",

web/src/components/Calling.vue

@@ -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>

web/src/components/FileList.vue

@@ -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">

web/src/components/FileSelect.vue

@@ -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("文件删除成功！")

web/src/components/RealtimeConversation.vue

@@ -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>

web/src/components/admin/AdminSidebar.vue

@@ -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']
+  title.value = res.data.admin_title
-  logo.value = res.data['logo']
+  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',

web/src/components/ui/RippleButton.vue

@@ -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>

web/src/lib/wavtools/index.js

@@ -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 };

web/src/lib/wavtools/lib/analysis/audio_analysis.js

@@ -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;

web/src/lib/wavtools/lib/analysis/constants.js

@@ -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]
+  );
+});

web/src/lib/wavtools/lib/wav_packer.js

@@ -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;

web/src/lib/wavtools/lib/wav_recorder.js

@@ -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;

web/src/lib/wavtools/lib/wav_stream_player.js

@@ -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;

web/src/lib/wavtools/lib/worklets/audio_processor.js

@@ -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;

web/src/lib/wavtools/lib/worklets/stream_processor.js

@@ -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;

web/src/router.js

@@ -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(.*)',

web/src/utils/conversation_config.js

@@ -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
+`;

web/src/utils/wav_player.js

@@ -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
+    }
+}

web/src/utils/wav_renderer.js

@@ -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);
+    }
+  },
+};

web/src/views/ChatPlus.vue

@@ -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('暂时不支持语音输入')">
+                  <span class="tool-item" @click="realtimeChat">
-                    <el-tooltip class="box-item" effect="dark" content="语音输入">
+                    <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">

web/src/views/Member.vue

@@ -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="label">优惠价：</span>
-                    <span class="price">￥{{ item.discount }}</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
   }
 }
 

web/src/views/RealtimeTest.vue

@@ -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>

web/src/views/Register.vue

@@ -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;

web/src/views/Test.vue

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

web/src/views/admin/ApiKey.vue

@@ -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-form-item label="代理地址：" prop="proxy_url">-->
-          <el-input v-model="item.proxy_url" autocomplete="off"/>
+<!--          <el-input v-model="item.proxy_url" autocomplete="off"/>-->
-          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>
+<!--          <div class="info">如果想要通过代理来访问 API，请填写代理地址，如：http://127.0.0.1:7890</div>-->
-        </el-form-item>
+<!--        </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 () {

web/src/views/admin/ChatList.vue

@@ -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 auto
-    overflow-x hidden
 
     // 变量定义
     --content-font-size: 16px;
     --content-color: #c1c1c1;
 
     font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    height 90vh
+    max-height 90vh
 
     .chat-line {
       // 隐藏滚动条

web/src/views/admin/ImageList.vue

@@ -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>

web/src/views/admin/Login.vue

@@ -1,39 +1,42 @@
 <template>
-  <div class="admin-login">
+  <div>
-    <div class="main">
+    <div class="bg"></div>
-      <div class="contain">
+    <div class="admin-login">
-        <div class="logo" @click="router.push('/')">
+      <div class="main">
-          <el-image :src="logo" fit="cover"/>
+        <div class="contain">
+          <div class="logo" @click="router.push('/')">
+            <el-image :src="logo" fit="cover"/>
+          </div>
+
+          <h1 class="header">登录 {{ title }}</h1>
+          <div class="content">
+            <el-input v-model="username" placeholder="请输入用户名" size="large"
+                      autocomplete="off" autofocus @keyup.enter="login">
+              <template #prefix>
+                <el-icon>
+                  <UserFilled/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-input v-model="password" placeholder="请输入密码" size="large"
+                      show-password autocomplete="off" @keyup.enter="login">
+              <template #prefix>
+                <el-icon>
+                  <Lock/>
+                </el-icon>
+              </template>
+            </el-input>
+
+            <el-row class="btn-row">
+              <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
+            </el-row>
+          </div>
         </div>
 
-        <h1 class="header">{{ title }}</h1>
+        <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
-        <div class="content">
+        <footer-bar class="footer"/>
-          <el-input v-model="username" placeholder="请输入用户名" size="large"
-                    autocomplete="off" autofocus @keyup.enter="login">
-            <template #prefix>
-              <el-icon>
-                <UserFilled/>
-              </el-icon>
-            </template>
-          </el-input>
-
-          <el-input v-model="password" placeholder="请输入密码" size="large"
-                    show-password autocomplete="off" @keyup.enter="login">
-            <template #prefix>
-              <el-icon>
-                <Lock/>
-              </el-icon>
-            </template>
-          </el-input>
-
-          <el-row class="btn-row">
-            <el-button class="login-btn" size="large" type="primary" @click="login">登录</el-button>
-          </el-row>
-        </div>
       </div>
-
-      <captcha v-if="enableVerify" @success="doLogin" ref="captchaRef"/>
-      <footer-bar class="footer"/>
     </div>
   </div>
 </template>
@@ -42,7 +45,7 @@
 
 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
 

web/src/views/admin/Medias.vue

@@ -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>

web/src/views/admin/Product.vue

@@ -15,8 +15,8 @@
             </span>
           </template>
         </el-table-column>
-        <el-table-column prop="price" label="产品价格"/>
+        <el-table-column prop="price" label="商品原价"/>
-        <el-table-column prop="discount" 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>
 

web/src/views/admin/SysConfig.vue

@@ -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>

web/src/views/mobile/Profile.vue

@@ -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>