fix: add error handling for podcast generation (#59)

Co-authored-by: Jiang Feng <jiangfeng.11@bytedance.com>
This commit is contained in:
Henry Li 2025-05-12 20:56:38 +08:00 committed by GitHub
parent 77a7f8f8ab
commit b845b1ca01
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 50 additions and 17 deletions

View File

@ -328,7 +328,7 @@ function PlanCard({
<Card className={cn("w-full", className)}> <Card className={cn("w-full", className)}>
<CardHeader> <CardHeader>
<CardTitle> <CardTitle>
<Markdown animated> <Markdown animate>
{`### ${ {`### ${
plan.title !== undefined && plan.title !== "" plan.title !== undefined && plan.title !== ""
? plan.title ? plan.title
@ -404,6 +404,9 @@ function PodcastCard({
const isGenerating = useMemo(() => { const isGenerating = useMemo(() => {
return message.isStreaming; return message.isStreaming;
}, [message.isStreaming]); }, [message.isStreaming]);
const hasError = useMemo(() => {
return data?.error !== undefined;
}, [data]);
const [isPlaying, setIsPlaying] = useState(false); const [isPlaying, setIsPlaying] = useState(false);
return ( return (
<Card className={cn("w-[508px]", className)}> <Card className={cn("w-[508px]", className)}>
@ -411,6 +414,7 @@ function PodcastCard({
<div className="text-muted-foreground flex items-center justify-between text-sm"> <div className="text-muted-foreground flex items-center justify-between text-sm">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isGenerating ? <LoadingOutlined /> : <Headphones size={16} />} {isGenerating ? <LoadingOutlined /> : <Headphones size={16} />}
{!hasError ? (
<RainbowText animated={isGenerating}> <RainbowText animated={isGenerating}>
{isGenerating {isGenerating
? "Generating podcast..." ? "Generating podcast..."
@ -418,8 +422,13 @@ function PodcastCard({
? "Now playing podcast..." ? "Now playing podcast..."
: "Podcast"} : "Podcast"}
</RainbowText> </RainbowText>
) : (
<div className="text-red-500">
Error when generating podcast. Please try again.
</div> </div>
{!isGenerating && ( )}
</div>
{!hasError && !isGenerating && (
<div className="flex"> <div className="flex">
<Tooltip title="Download podcast"> <Tooltip title="Download podcast">
<Button variant="ghost" size="icon" asChild> <Button variant="ghost" size="icon" asChild>
@ -441,6 +450,7 @@ function PodcastCard({
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent> <CardContent>
{audioUrl ? (
<audio <audio
className="w-full" className="w-full"
src={audioUrl} src={audioUrl}
@ -448,6 +458,9 @@ function PodcastCard({
onPlay={() => setIsPlaying(true)} onPlay={() => setIsPlaying(true)}
onPause={() => setIsPlaying(false)} onPause={() => setIsPlaying(false)}
/> />
) : (
<div className="w-full"></div>
)}
</CardContent> </CardContent>
</Card> </Card>
); );

View File

@ -294,7 +294,27 @@ export async function listenToPodcast(researchId: string) {
}; };
appendMessage(podcastMessage); appendMessage(podcastMessage);
// Generating podcast... // Generating podcast...
const audioUrl = await generatePodcast(reportMessage.content); let audioUrl: string | undefined;
try {
audioUrl = await generatePodcast(reportMessage.content);
} catch (e) {
console.error(e);
useStore.setState((state) => ({
messages: new Map(useStore.getState().messages).set(
podCastMessageId,
{
...state.messages.get(podCastMessageId)!,
content: JSON.stringify({
...podcastObject,
error: e instanceof Error ? e.message : "Unknown error",
}),
isStreaming: false,
},
),
}));
toast("An error occurred while generating podcast. Please try again.");
return;
}
useStore.setState((state) => ({ useStore.setState((state) => ({
messages: new Map(useStore.getState().messages).set(podCastMessageId, { messages: new Map(useStore.getState().messages).set(podCastMessageId, {
...state.messages.get(podCastMessageId)!, ...state.messages.get(podCastMessageId)!,