AI_Diplomacy/elevenlabs-test.html at main · Tylermarques/AI_Diplomacy · GitHub

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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ElevenLabs API Test</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .container {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        textarea, input {
            width: 100%;
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
        #response {
            white-space: pre-wrap;
            background-color: #f5f5f5;
            padding: 10px;
            border-radius: 4px;
            max-height: 300px;
            overflow-y: auto;
        }
        .status {
            font-weight: bold;
            margin-top: 10px;
        }
        .success { color: green; }
        .error { color: red; }
        .loading { color: blue; }
    </style>
</head>
<body>
    <h1>ElevenLabs API Test</h1>

    <div class="container">
        <h2>API Configuration</h2>
        <label for="apiKey">API Key:</label>
        <input type="text" id="apiKey" placeholder="Enter your ElevenLabs API key">

        <label for="voiceId">Voice ID:</label>
        <input type="text" id="voiceId" value="onwK4e9ZLuTAKqWW03F9" placeholder="Voice ID">

        <label for="modelId">Model ID:</label>
        <input type="text" id="modelId" value="eleven_multilingual_v2" placeholder="Model ID">
    </div>

    <div class="container">
        <h2>Test Text-to-Speech</h2>
        <label for="textInput">Text to convert to speech:</label>
        <textarea id="textInput" rows="4" placeholder="Enter text to convert to speech">This is a test of the ElevenLabs API. If you can hear this, your API key is working correctly.</textarea>

        <button id="testBtn">Test API</button>
        <button id="listVoicesBtn">List Available Voices</button>

        <div class="status" id="status"></div>

        <h3>Audio Result:</h3>
        <audio id="audioPlayer" controls style="width: 100%; display: none;"></audio>

        <h3>API Response:</h3>
        <div id="response"></div>
    </div>

    <script>
        document.getElementById('testBtn').addEventListener('click', testTTS);
        document.getElementById('listVoicesBtn').addEventListener('click', listVoices);

        // Check for API key in localStorage
        if (localStorage.getItem('elevenLabsApiKey')) {
            document.getElementById('apiKey').value = localStorage.getItem('elevenLabsApiKey');
        }

        async function testTTS() {
            const apiKey = document.getElementById('apiKey').value.trim();
            const voiceId = document.getElementById('voiceId').value.trim();
            const modelId = document.getElementById('modelId').value.trim();
            const text = document.getElementById('textInput').value.trim();
            const statusEl = document.getElementById('status');
            const responseEl = document.getElementById('response');
            const audioPlayer = document.getElementById('audioPlayer');

            // Save API key for convenience
            localStorage.setItem('elevenLabsApiKey', apiKey);

            if (!apiKey) {
                statusEl.textContent = 'Please enter an API key';
                statusEl.className = 'status error';
                return;
            }

            if (!text) {
                statusEl.textContent = 'Please enter some text';
                statusEl.className = 'status error';
                return;
            }

            statusEl.textContent = 'Sending request to ElevenLabs...';
            statusEl.className = 'status loading';
            responseEl.textContent = '';
            audioPlayer.style.display = 'none';

            try {
                // Log the request details
                console.log('Request details:', {
                    url: `https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`,
                    headers: {
                        'xi-api-key': apiKey.substring(0, 4) + '...',
                        'Content-Type': 'application/json',
                        'Accept': 'audio/mpeg'
                    },
                    body: {
                        text: text.substring(0, 20) + '...',
                        model_id: modelId
                    }
                });

                const response = await fetch(`https://api.elevenlabs.io/v1/text-to-speech/${voiceId}`, {
                    method: 'POST',
                    headers: {
                        'xi-api-key': apiKey,
                        'Content-Type': 'application/json',
                        'Accept': 'audio/mpeg'
                    },
                    body: JSON.stringify({
                        text: text,
                        model_id: modelId
                    })
                });

                // Log the response status
                console.log('Response status:', response.status);
                console.log('Response headers:', Object.fromEntries([...response.headers.entries()]));

                if (!response.ok) {
                    const errorText = await response.text();
                    throw new Error(`ElevenLabs API error (${response.status}): ${errorText}`);
                }

                // Convert response to blob and play audio
                const audioBlob = await response.blob();
                const audioUrl = URL.createObjectURL(audioBlob);

                audioPlayer.src = audioUrl;
                audioPlayer.style.display = 'block';
                audioPlayer.play();

                statusEl.textContent = 'Success! Audio is playing.';
                statusEl.className = 'status success';
                responseEl.textContent = 'Audio generated successfully. Check the audio player above.';

            } catch (error) {
                console.error('Error:', error);
                statusEl.textContent = 'Error: ' + error.message;
                statusEl.className = 'status error';
                responseEl.textContent = 'Full error details:\n' + error.stack;
            }
        }

        async function listVoices() {
            const apiKey = document.getElementById('apiKey').value.trim();
            const statusEl = document.getElementById('status');
            const responseEl = document.getElementById('response');

            // Save API key for convenience
            localStorage.setItem('elevenLabsApiKey', apiKey);

            if (!apiKey) {
                statusEl.textContent = 'Please enter an API key';
                statusEl.className = 'status error';
                return;
            }

            statusEl.textContent = 'Fetching available voices...';
            statusEl.className = 'status loading';

            try {
                const response = await fetch('https://api.elevenlabs.io/v1/voices', {
                    method: 'GET',
                    headers: {
                        'xi-api-key': apiKey,
                        'Content-Type': 'application/json'
                    }
                });

                if (!response.ok) {
                    const errorText = await response.text();
                    throw new Error(`ElevenLabs API error (${response.status}): ${errorText}`);
                }

                const data = await response.json();

                statusEl.textContent = 'Successfully retrieved voices!';
                statusEl.className = 'status success';

                // Format the voice list nicely
                let voiceList = 'Available Voices:\n\n';
                data.voices.forEach(voice => {
                    voiceList += `Name: ${voice.name}\n`;
                    voiceList += `Voice ID: ${voice.voice_id}\n`;
                    voiceList += `Description: ${voice.description || 'No description'}\n\n`;
                });

                responseEl.textContent = voiceList;

            } catch (error) {
                console.error('Error:', error);
                statusEl.textContent = 'Error: ' + error.message;
                statusEl.className = 'status error';
                responseEl.textContent = 'Full error details:\n' + error.stack;
            }
        }
    </script>
</body>
</html>