-
Notifications
You must be signed in to change notification settings - Fork 0
/
text2song.html
123 lines (118 loc) · 4.95 KB
/
text2song.html
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
<!DOCTYPE html>
<html>
<head>
<title>Text to Speech Generator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
#text-prompt {
width: 80%;
height: 100px;
margin-bottom: 10px;
}
#generate-button {
display: inline-block;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#generate-button:hover {
background-color: #45a049;
}
#loading-indicator {
margin-top: 20px;
}
audio {
margin-top: 20px;
width: 80%;
}
.slider-container {
margin: 10px;
}
#prompt-link {
margin-top: 10px;
display: none;
}
.voice-dropdown {
margin-top: 10px;
}
</style>
</head>
<body>
<div id="app">
<textarea id="text-prompt" placeholder="Enter your text here..."></textarea><br>
<select id="voice-dropdown" class="voice-dropdown">
<option value="https://replicate.delivery/pbxt/OL6K2fhMNsxekkustwzrXaQf9WR7MrIEqKToZv1zDeI1dU0IB/prompt.npz">Voice1 Male</option>
<option value="https://replicate.delivery/pbxt/RfCjH3xwllQZdCMIlP4dqLyV5uH31bqEet6ip6eWdIHaBjakA/prompt.npz">Voice2 Male</option>
<option value="https://replicate.delivery/pbxt/AA4kD7egUywgF6m1Wis0oq13ZyHemMO0TD2QTWwV5ez2EJakA/prompt.npz">Voice3 Male</option>
<option value="https://replicate.delivery/pbxt/fcEkvcLR5szpCCYaWJxP5jfMwewJFHGXlfQJ2T6cOAP5GH1IB/prompt.npz">Voice1 Female</option>
<option value="https://replicate.delivery/pbxt/9eegSPoO8Ktub0aeb4CeuTK6YCsywoXaasNiFTOyfczUAVqRC/prompt.npz">Voice2 Female</option>
<!-- Add more options for other voices if needed -->
</select>
<div class="slider-container">
<label for="text-temp-slider">Text Temperature: <span id="text-temp-value">0.8</span></label>
<input type="range" id="text-temp-slider" min="0" max="1" step="0.1" value="0.8">
</div>
<div class="slider-container">
<label for="waveform-temp-slider">Waveform Temperature: <span id="waveform-temp-value">0.8</span></label>
<input type="range" id="waveform-temp-slider" min="0" max="1" step="0.1" value="0.8">
</div>
<button id="generate-button">Generate</button>
<div id="loading-indicator" hidden>Loading...</div>
<audio id="audio-player" controls hidden></audio>
<a id="prompt-link" href="#" download="prompt_npz.zip">Download Prompt NPZ</a>
</div>
<script>
document.getElementById('generate-button').addEventListener('click', function() {
var promptText = document.getElementById('text-prompt').value;
var textTemp = document.getElementById('text-temp-slider').value;
var waveformTemp = document.getElementById('waveform-temp-slider').value;
var loadingIndicator = document.getElementById('loading-indicator');
var audioPlayer = document.getElementById('audio-player');
var promptLink = document.getElementById('prompt-link');
var customHistoryPrompt = document.getElementById('voice-dropdown').value;
loadingIndicator.hidden = false;
audioPlayer.hidden = true;
fetch('https://v1.test.socket.araby.ai/demo/text-to-song', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
prompt: promptText,
text_temp: textTemp,
waveform_temp: waveformTemp,
custom_history_prompt: customHistoryPrompt
}),
})
.then(response => response.json())
.then(data => {
audioPlayer.src = data.data.audio_out;
audioPlayer.hidden = false;
// Set the link to download the prompt_npz file
promptLink.href = data.data.prompt_npz;
promptLink.style.display = 'block';
})
.catch(error => {
console.error(`An error occurred while generating the audio.`);
alert(`An error occurred while generating the audio.`);
})
.finally(() => {
loadingIndicator.hidden = true;
});
});
document.getElementById('text-temp-slider').oninput = function() {
document.getElementById('text-temp-value').textContent = this.value;
}
document.getElementById('waveform-temp-slider').oninput = function() {
document.getElementById('waveform-temp-value').textContent = this.value;
}
</script>
</body>
</html>