suno add new function for merging full songs and upload custom music

web/src/assets/css/suno.styl

@@ -13,6 +13,13 @@
       display flex
       flex-flow row
       justify-content: space-between;
+
+      .upload-music {
+        .iconfont {
+          margin-right 5px
+          font-size 14px
+        }
+      }
     }
 
     .params {
@@ -85,6 +92,10 @@
             height 50px
             border-radius 10px
           }
+          .icon-mp3 {
+            font-size 42px
+            color #A85295
+          }
           .title {
             display flex
             margin-left 10px
@@ -266,7 +277,7 @@
         }
 
         .right {
-          min-width 320px;
+          min-width 350px;
           font-size 14px
           padding 0 15px
 

web/src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4125778 */
-  src: url('iconfont.woff2?t=1723593727785') format('woff2'),
-       url('iconfont.woff?t=1723593727785') format('woff'),
-       url('iconfont.ttf?t=1723593727785') format('truetype');
+  src: url('iconfont.woff2?t=1725000514997') format('woff2'),
+       url('iconfont.woff?t=1725000514997') format('woff'),
+       url('iconfont.ttf?t=1725000514997') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-merge:before {
+  content: "\e901";
+}
+
+.icon-upload:before {
+  content: "\e611";
+}
+
+.icon-concat:before {
+  content: "\e630";
+}
+
 .icon-email:before {
   content: "\e670";
 }
@@ -77,7 +89,7 @@
   content: "\e608";
 }
 
-.icon-mp:before {
+.icon-mp3:before {
   content: "\e6c4";
 }
 

web/src/assets/iconfont/iconfont.json

@@ -1,10 +1,31 @@
 {
   "id": "4125778",
-  "name": "chatgpt",
+  "name": "geekai",
   "font_family": "iconfont",
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "8094809",
+      "name": "merge-cells",
+      "font_class": "merge",
+      "unicode": "e901",
+      "unicode_decimal": 59649
+    },
+    {
+      "icon_id": "10278208",
+      "name": "上传",
+      "font_class": "upload",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "23538484",
+      "name": "拼接",
+      "font_class": "concat",
+      "unicode": "e630",
+      "unicode_decimal": 58928
+    },
     {
       "icon_id": "15838472",
       "name": "email",
@@ -120,7 +141,7 @@
     {
       "icon_id": "4318807",
       "name": "mp3",
-      "font_class": "mp",
+      "font_class": "mp3",
       "unicode": "e6c4",
       "unicode_decimal": 59076
     },

web/src/components/InviteList.vue

@@ -33,11 +33,10 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
-import {httpGet, httpPost} from "@/utils/http";
+import {onMounted, ref} from "vue";
+import {httpGet} from "@/utils/http";
 import {ElMessage} from "element-plus";
 import {dateFormat} from "@/utils/libs";
-import {DocumentCopy} from "@element-plus/icons-vue";
 import Clipboard from "clipboard";
 
 const items = ref([])
@@ -60,7 +59,7 @@ onMounted(() => {
 
 // 获取数据
 const fetchData = () => {
-  httpPost('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
+  httpGet('/api/invite/list', {page: page.value, page_size: pageSize.value}).then((res) => {
     if (res.data) {
       items.value = res.data.items
       total.value = res.data.total

web/src/views/Luma.vue

@@ -35,7 +35,7 @@
 
         <div class="params">
           <div class="item-group">
-            <span class="label">循环</span>
+            <span class="label">循环参考图</span>
             <el-switch  v-model="loop" size="small" style="--el-switch-on-color:#BF78BF;" />
           </div>
           <div class="item-group">

web/src/views/Register.vue

@@ -211,6 +211,11 @@ const licenseConfig = ref({})
 const enableVerify = ref(false)
 const captchaRef = ref(null)
 
+// 记录邀请码点击次数
+if (data.value.invite_code) {
+  httpGet("/api/invite/hits",{code: data.value.invite_code})
+}
+
 getSystemInfo().then(res => {
   if (res.data) {
     title.value = res.data.title

web/src/views/Suno.vue

@@ -5,6 +5,20 @@
         <el-tooltip effect="light" content="定义模式" placement="top">
           <black-switch  v-model:value="custom" size="large"  />
         </el-tooltip>
+        <el-tooltip effect="light" content="请上传6-60秒的原始音频，检测到人声的音频将仅设为私人音频。" placement="bottom-end">
+          <el-upload
+              class="avatar-uploader"
+              :auto-upload="true"
+              :show-file-list="false"
+              :http-request="uploadAudio"
+              accept=".wav,.mp3"
+          >
+          <el-button class="upload-music" color="#363030" round>
+            <i class="iconfont icon-upload"></i>
+            <span>上传音乐</span>
+          </el-button>
+          </el-upload>
+        </el-tooltip>
         <black-select v-model:value="data.model" :options="models" placeholder="请选择模型" style="width: 100px" />
       </div>
 
@@ -28,10 +42,10 @@
               </el-popover>
             </div>
             <div class="item"
-                 v-loading="generating"
+                 v-loading="isGenerating"
                  element-loading-text="正在生成歌词..."
                  element-loading-background="rgba(122, 122, 122, 0.8)">
-              <black-input v-model:value="data.lyrics" type="textarea" :rows="10" placeholder="请在这里输入你自己写的歌词..."/>
+              <black-input v-model:value="data.lyrics" type="textarea" :rows="10" :placeholder="promptPlaceholder"/>
               <button class="btn btn-lyric" @click="createLyric">生成歌词</button>
             </div>
           </div>
@@ -137,7 +151,7 @@
     </div>
     <div class="right-box" v-loading="loading" element-loading-background="rgba(100,100,100,0.3)">
       <div class="list-box" v-if="!noData">
-        <div v-for="item in list">
+        <div v-for="item in list" :key="item.id">
           <div class="item" v-if="item.progress === 100">
             <div class="left">
               <div class="container">
@@ -151,13 +165,18 @@
             <div class="center">
               <div class="title">
                 <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.major_model_version">{{item.major_model_version}}</span>
+                <span class="model" v-if="item.type === 4">用户上传</span>
+                <span class="model" v-if="item.type === 3">
+                  <i class="iconfont icon-mp3"></i>
+                  完整歌曲
+                </span>
                 <span class="model" v-if="item.ref_song">
                     <i class="iconfont icon-link"></i>
                     {{item.ref_song.title}}
                   </span>
               </div>
-              <div class="tags">{{item.tags}}</div>
+              <div class="tags" v-if="item.tags">{{item.tags}}</div>
             </div>
             <div class="right">
               <div class="tools">
@@ -178,6 +197,12 @@
                   </a>
                 </el-tooltip>
 
+                <el-tooltip effect="light" content="获取完整歌曲" placement="top" v-if="item.ref_song">
+                  <button class="btn btn-icon" @click="merge(item)">
+                    <i class="iconfont icon-concat"></i>
+                  </button>
+                </el-tooltip>
+
                 <el-tooltip effect="light" content="复制歌曲链接" placement="top">
                   <button class="btn btn-icon copy-link" :data-clipboard-text="getShareURL(item)" >
                     <i class="iconfont icon-share1"></i>
@@ -276,13 +301,13 @@ import MusicPlayer from "@/components/MusicPlayer.vue";
 import {compact} from "lodash";
 import {httpGet, httpPost} from "@/utils/http";
 import {showMessageError, showMessageOK} from "@/utils/dialog";
-import Generating from "@/components/ui/Generating.vue";
 import {checkSession} from "@/store/cache";
 import {ElMessage, ElMessageBox} from "element-plus";
 import {formatTime} from "@/utils/libs";
 import Clipboard from "clipboard";
 import BlackDialog from "@/components/ui/BlackDialog.vue";
 import Compressor from "compressorjs";
+import Generating from "@/components/ui/Generating.vue";
 
 const winHeight = ref(window.innerHeight - 50)
 const custom = ref(false)
@@ -329,6 +354,7 @@ const btnText = ref("开始创作")
 const refSong = ref(null)
 const showDialog = ref(false)
 const editData = ref({title:"",cover:"",id:0})
+const promptPlaceholder = ref('请在这里输入你自己写的歌词...')
 
 const socket = ref(null)
 const userId = ref(0)
@@ -422,7 +448,11 @@ const create = () => {
   data.value.ref_task_id = refSong.value ? refSong.value.task_id : ""
   data.value.ref_song_id = refSong.value ? refSong.value.song_id : ""
   data.value.extend_secs = refSong.value ? refSong.value.extend_secs : 0
-  if (custom.value) {
+  if (refSong.value) {
+    if (data.value.extend_secs > refSong.value.duration) {
+      return showMessageError("续写开始时间不能超过原歌曲长度")
+    }
+  } else if (custom.value) {
     if (data.value.lyrics === "") {
       return showMessageError("请输入歌词")
     }
@@ -434,9 +464,6 @@ const create = () => {
       return showMessageError("请输入歌曲描述")
     }
   }
-  if (refSong.value && data.value.extend_secs > refSong.value.duration) {
-    return showMessageError("续写开始时间不能超过原歌曲长度")
-  }
 
   httpPost("/api/suno/create", data.value).then(() => {
     fetchData(1)
@@ -446,6 +473,35 @@ const create = () => {
   })
 }
 
+// 拼接歌曲
+const merge = (item) => {
+  httpPost("/api/suno/create", {song_id: item.song_id, type:3}).then(() => {
+    fetchData(1)
+    showMessageOK("创建任务成功")
+  }).catch(e => {
+    showMessageError("合并歌曲失败："+e.message)
+  })
+}
+
+const uploadAudio = (file) => {
+  const formData = new FormData();
+  formData.append('file', file.file, file.name);
+  // 执行上传操作
+  httpPost('/api/upload', formData).then((res) => {
+    httpPost("/api/suno/create", {audio_url: res.data.url, title:res.data.name, type:4}).then(() => {
+      fetchData(1)
+      showMessageOK("歌曲上传成功")
+    }).catch(e => {
+      showMessageError("歌曲上传失败："+e.message)
+    })
+    removeRefSong()
+    ElMessage.success({message: "上传成功", duration: 500})
+  }).catch((e) => {
+    ElMessage.error('文件传失败:' + e.message)
+  })
+};
+
+
 // 续写歌曲
 const extend = (item) => {
   refSong.value = item
@@ -453,6 +509,7 @@ const extend = (item) => {
   data.value.title = item.title
   custom.value = true
   btnText.value = "续写歌曲"
+  promptPlaceholder.value = "输入额外的歌词，根据您之前的歌词来扩展歌曲..."
 }
 
 // 更细歌曲
@@ -485,6 +542,7 @@ watch(() => custom.value, (newValue) => {
 const removeRefSong = () => {
   refSong.value = null
   btnText.value = "开始创作"
+  promptPlaceholder.value = "请在这里输入你自己写的歌词..."
 }
 
 const play = (item) => {
@@ -553,21 +611,21 @@ const uploadCover = (file) => {
   });
 }
 
-const generating = ref(false)
+const isGenerating = ref(false)
 const createLyric = () => {
   if (data.value.lyrics === "") {
     return showMessageError("请输入歌词描述")
   }
-  generating.value = true
+  isGenerating.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
+    isGenerating.value = false
   }).catch(e => {
     showMessageError("歌词生成失败："+e.message)
-    generating.value = false
+    isGenerating.value = false
   })
 }