The audioUrl received is empty
Closed this issue · 0 comments
L0o0p commented
Describe the bug
Following the documentation process, I was able to successfully send the request, but the audioinfo.audioUrl returned was empty, which I was confused about. And thanks for the experts for being tolerant of newcomers
To Reproduce
here is my code
import { useState } from 'react';
import axios from 'axios';
import { useCurrentAudio } from '../store';
interface AudioInfo {
id: string;
status: string;
audio_url: string;
}
function AudioGenerator() {
const [prompt, setPrompt] = useState<string>('');
const [audioInfo, setAudioInfo] = useState<AudioInfo | null>(null);
const [loading, setLoading] = useState<boolean>(false);
const { setCurrentAudioUrl } = useCurrentAudio();
const baseUrl = "http://localhost:3000";
const handleGenerateAudio = async () => {
setLoading(true);
try {
const response = await axios.post(`${baseUrl}/api/generate`, {
prompt: prompt,
make_instrumental: false,
wait_audio: false
}, {
headers: { "Content-Type": "application/json" }
});
console.log(response.data);
if (response.data.status === "processing") {
const intervalId = setInterval(async () => {
const checkResponse = await axios.get(`${baseUrl}/api/get?ids=${response.data.id}`);
if (checkResponse.data.status !== "processing") {
clearInterval(intervalId);
updateAudioInfo(checkResponse.data);
}
}, 5000);
}
else {
updateAudioInfo(response.data);
}
} catch (error) {
console.error('Error generating audio:', error);
alert('Failed to generate audio. Check console for more details.');
}
setLoading(false);
};
const updateAudioInfo = (data: AudioInfo) => {
setAudioInfo(data);
if (!data.audio_url) { console.log('No available audioUrl received') }
const newUrl = data.audio_url;
setCurrentAudioUrl(newUrl);
console.log(newUrl);
};
return (
<div>
<h1>Audio Generator</h1>
<textarea
value={prompt}
onChange={e => setPrompt(e.target.value)}
placeholder="Enter description..."
style={{ resize: 'none', width: '300px', height: '100px' }}
/>
<button onClick={handleGenerateAudio} disabled={loading}>
{loading ? 'Generating...' : 'Generating audio'}
</button>
{audioInfo && (
<div>
<h2>Audio information</h2>
<p>ID: {audioInfo.id}</p>
<p>Status: {audioInfo.status}</p>
<p>URL: {audioInfo.audio_url}</p>
</div>
)}
</div>
);
}
export default AudioGenerator;
Expected behavior
maybe the useful url should be return here
Screenshots
here is the console.log:
Desktop (please complete the following information):
- OS: [macOS]
- Browser [chrome]
- Version [e.g. 22]