Hugging Face's logo

Spaces:
redfr
/
VIST-UI
Running

App Files Community
VIST-UI
File size: 3,433 Bytes 
2b7fd6e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
<template>
  <div class="svc-container">
    <div class="svc-wrapper">
      <div class="form-panel single-run">
        <h1 class="form-title">歌曲音声分离</h1>
        <h3 class="model-tips">上传歌曲，运行可下载人声（vocals.wav）与背景音乐（accompaniment.wav）</h3>
        <el-form class="svc-form single-run-form" :model="singleForm" label-width="150px">
          <el-upload
              ref="audioSingleUpload"
              class="audio-upload"
              action=""
              accept=".wav,.mp3,.flac"
              :http-request="handleSingleUpload"
          >
            <template #trigger>
              <el-button type="primary" v-loading="isRuningSingle">选择音频文件并开始转换！</el-button>
            </template>

            <template #tip>
              <div class="el-upload__tip">
                需要是wav或者mp3文件哦
              </div>
            </template>
          </el-upload>
        </el-form>
      </div>

    </div>

<!--    <GreetingAudio :title="audioTitle" :src="audioSrc" v-if="audioLoaded"></GreetingAudio>-->
  </div>
</template>

<script>
import axios from "axios";
import JSZip from "jszip";
import GreetingAudio from "@/components/GreetingAudio.vue";

export default {
  name: 'RMView',
  components: {GreetingAudio},
  data() {
    return {
      singleForm: {
        srcaudio: null,
      },
      isRuningSingle: false,
    }
  },
  mounted() {
  },
  methods: {
    async handleSingleUpload(file) {
      try {
        this.isRuningSingle = true
        console.log("HANDLE UPLOAD")
        console.log(file)
        let srcaudio = file.file
        if (srcaudio) {
          console.log(srcaudio)
          let runData = new FormData()
          runData.append("srcaudio", srcaudio)

          let resp = await axios.post('/api/vm/run', runData, {
            responseType: 'arraybuffer'
          })
          if (resp.status === 200) {
            const zipBlob = new Blob([resp.data], { type: 'application/zip' });

            // Create a temporary link element to trigger the download
            const link = document.createElement('a');
            link.href = URL.createObjectURL(zipBlob);
            link.download = 'output.zip';

            // Trigger the download
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);

            this.isRuningSingle = false
          } else {
            this.$message.error('Failed to load model: ' + resp.data.msg)
            this.isRuningSingle = false
          }
        } else {
          this.$message.error('Error unable to get audio files')
          this.isRuningSingle = false
        }
      } catch (e) {
        this.$message.error('Failed to run: ' + e)
      } finally {
        this.isRuningSingle = false
      }
    },
    getFileURL(file) {
      // Create a blob URL for the file
      const blob = new Blob([file], { type: 'audio/wav' })
      return URL.createObjectURL(blob)
    }
  }
}
</script>

<style scoped>
.svc-container {
  height: 100%;
  width: 100%;
}

.svc-wrapper {
  top: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*background-color: #ccc;*/
}

.svc-form {
  max-width: 460px;
}

.svc-form el-alert {
  margin: 10px auto;
}

.svc-form el-form-item {
  margin-top: 10px;
}

.form-title {
  margin: 20px auto;
}
</style>