add function to generate lyrics

2025-11-12 20:23:46 +08:00 · 2024-07-28 10:04:53 +08:00
parent 013ee98f53
commit 088a614160
19 changed files with 168 additions and 102 deletions
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -12,18 +12,18 @@

      <div class="navbar">
        <el-tooltip
-            v-if="!licenseConfig.de_copy"
+            v-if="!license.de_copy"
            class="box-item"
            effect="light"
            content="部署文档"
            placement="bottom">
-          <a href="https://ai.r9it.com/docs/install/" class="link-button" target="_blank">
+          <a href="https://docs.geekai.me/install/" class="link-button" target="_blank">
            <i class="iconfont icon-book"></i>
          </a>
        </el-tooltip>

        <el-tooltip
-            v-if="!licenseConfig.de_copy"
+            v-if="!license.de_copy"
            class="box-item"
            effect="light"
            content="项目源码"
@@ -46,7 +46,7 @@
                <span class="username">{{ loginUser.nickname }}</span>
              </el-dropdown-item>

-              <div  v-if="!licenseConfig.de_copy">
+              <div  v-if="!license.de_copy">
                <el-dropdown-item>
                  <i class="iconfont icon-book"></i>
                  <a :href="docsURL" target="_blank">
@@ -156,7 +156,7 @@ const loginUser = ref({})
 const version = ref(process.env.VUE_APP_VERSION)
 const routerViewKey = ref(0)
 const showConfigDialog = ref(false)
-const licenseConfig = ref({})
+const license = ref({de_copy: true})
 const docsURL = ref(process.env.VUE_APP_DOCS_URL)
 const gitURL = ref(process.env.VUE_APP_GIT_URL)

@@ -205,8 +205,9 @@ onMounted(() => {
  })

  httpGet("/api/config/license").then(res => {
-    licenseConfig.value = res.data
+    license.value = res.data
  }).catch(e => {
+    license.value = {de_copy: false}
    showMessageError("获取 License 配置：" + e.message)
  })

--- a/web/src/views/Index.vue
+++ b/web/src/views/Index.vue
@@ -73,7 +73,7 @@ if (isMobile()) {
 const title = ref("")
 const logo = ref("")
 const slogan = ref("")
-const license = ref({})
+const license = ref({de_copy: true})
 const winHeight = window.innerHeight - 150
 const isLogin = ref(false)
 const docsURL = ref(process.env.VUE_APP_DOCS_URL)
@@ -158,6 +158,7 @@ onMounted(() => {
  httpGet("/api/config/license").then(res => {
    license.value = res.data
  }).catch(e => {
+    license.value = {de_copy: false}
    ElMessage.error("获取 License 配置失败：" + e.message)
  })

--- a/web/src/views/Register.vue
+++ b/web/src/views/Register.vue
@@ -196,7 +196,7 @@ const data = ref({
 const enableMobile = ref(false)
 const enableEmail = ref(false)
 const enableUser = ref(false)
-const enableRegister = ref(false)
+const enableRegister = ref(true)
 const activeName = ref("mobile")
 const wxImg = ref("/images/wx.png")
 const licenseConfig = ref({})
--- a/web/src/views/Song.vue
+++ b/web/src/views/Song.vue
@@ -33,13 +33,13 @@
    </div>

    <div class="music-player" v-if="playList.length > 0">
-      <music-player :songs="playList" ref="playerRef"/>
+      <music-player :songs="playList" ref="playerRef" @play="song.play_times += 1"/>
    </div>
  </div>
 </template>

 <script setup>
-import {nextTick, onMounted, onUnmounted, ref} from "vue"
+import {onMounted, onUnmounted, ref} from "vue"
 import {useRouter} from "vue-router";
 import {httpGet} from "@/utils/http";
 import {showMessageError} from "@/utils/dialog";
@@ -54,7 +54,7 @@ const song = ref({title:""})
 const playList = ref([])
 const playerRef = ref(null)

-httpGet("/api/suno/detail",{id:id}).then(res => {
+httpGet("/api/suno/detail",{song_id:id}).then(res => {
  song.value = res.data
  playList.value = [song.value]
  document.title = song.value?.title+ " | By "+song.value?.user.nickname+" | Suno音乐"
@@ -84,7 +84,7 @@ const play = () => {
 }


-const winHeight = ref(window.innerHeight-60)
+const winHeight = ref(window.innerHeight-50)
 const getShareURL = (item) => {
  return `${location.protocol}//${location.host}/song/${item.id}`
 }
--- a/web/src/views/Suno.vue
+++ b/web/src/views/Suno.vue
@@ -27,8 +27,12 @@
                </template>
              </el-popover>
            </div>
-            <div class="item">
+            <div class="item"
+                 v-loading="generating"
+                 element-loading-text="正在生成歌词..."
+                 element-loading-background="rgba(122, 122, 122, 0.8)">
              <black-input v-model:value="data.lyrics" type="textarea" :rows="10" placeholder="请在这里输入你自己写的歌词..."/>
+              <button class="btn btn-lyric" @click="createLyric">生成歌词</button>
            </div>
          </div>

@@ -146,7 +150,7 @@
            </div>
            <div class="center">
              <div class="title">
-                <a :href="'/song/'+item.id"  target="_blank">{{item.title}}</a>
+                <a :href="'/song/'+item.song_id"  target="_blank">{{item.title}}</a>
                <span class="model">{{item.major_model_version}}</span>
                <span class="model" v-if="item.ref_song">
                    <i class="iconfont icon-link"></i>
@@ -328,7 +332,6 @@ const editData = ref({title:"",cover:"",id:0})

 const socket = ref(null)
 const userId = ref(0)
-const heartbeatHandle = ref(null)
 const connect = () => {
  let host = process.env.VUE_APP_WS_HOST
  if (host === '') {
@@ -339,25 +342,9 @@ const connect = () => {
    }
  }

-  // 心跳函数
-  const sendHeartbeat = () => {
-    clearTimeout(heartbeatHandle.value)
-    new Promise((resolve, reject) => {
-      if (socket.value !== null) {
-        socket.value.send(JSON.stringify({type: "heartbeat", content: "ping"}))
-      }
-      resolve("success")
-    }).then(() => {
-      heartbeatHandle.value = setTimeout(() => sendHeartbeat(), 5000)
-    });
-  }
-
  const _socket = new WebSocket(host + `/api/suno/client?user_id=${userId.value}`);
  _socket.addEventListener('open', () => {
    socket.value = _socket;
-
-    // 发送心跳消息
-    sendHeartbeat()
  });

  _socket.addEventListener('message', event => {
@@ -564,6 +551,24 @@ const uploadCover = (file) => {
  });
 }

+const generating = ref(false)
+const createLyric = () => {
+  if (data.value.lyrics === "") {
+    return showMessageError("请输入歌词描述")
+  }
+  generating.value = true
+  httpPost("/api/suno/lyric", {prompt: data.value.lyrics}).then(res => {
+    const lines = res.data.split('\n');
+    data.value.title = lines.shift().replace(/\*/g,"")
+    lines.shift()
+    data.value.lyrics = lines.join('\n');
+    generating.value = false
+  }).catch(e => {
+    showMessageError("歌词生成失败："+e.message)
+    generating.value = false
+  })
+}
+
 </script>

 <style lang="stylus" scoped>
--- a/web/src/views/mobile/Profile.vue
+++ b/web/src/views/mobile/Profile.vue
@@ -3,10 +3,11 @@
    <div class="content">
      <van-form>
        <div class="avatar">
-          <van-uploader v-model="fileList"
-                        reupload max-count="1"
-                        :deletable="false"
-                        :after-read="afterRead"/>
+          <van-image :src="fileList[0].url" size="80" width="80" fit="cover" round />
+<!--          <van-uploader v-model="fileList"-->
+<!--                        reupload max-count="1"-->
+<!--                        :deletable="false"-->
+<!--                        :after-read="afterRead"/>-->
        </div>
        <van-cell-group inset v-model="form">
          <van-field
@@ -154,7 +155,7 @@

 <script setup>
 import {onMounted, ref} from "vue";
-import {showFailToast, showNotify, showSuccessToast, showToast} from "vant";
+import {showFailToast, showNotify, showSuccessToast} from "vant";
 import {httpGet, httpPost} from "@/utils/http";
 import Compressor from 'compressorjs';
 import {dateFormat, isWeChatBrowser, showLoginDialog} from "@/utils/libs";