fix: async audio task

frontend/src/components/content.tsx

@@ -3,8 +3,8 @@ import Audio from "./audio";
 import Transcript from "./transcript";
 import { useEffect } from "react";
 import { BASE_URL } from "@/lib/constant";
-import { useJsonData } from "@/hooks/useJsonData";
 import { useStreamText } from "@/hooks/useStreamText";
+import { useAudioGeneration } from "@/hooks/useTaskData";
 
 interface ContentProps {
   summaryTextChunks: string[];
@@ -37,11 +37,11 @@ export default function Content({
   setActiveTab,
 }: ContentProps) {
   const {
-    data: audioData,
     error: audioError,
     isLoading: isAudioLoading,
-    fetchJsonData: audioFetchJsonData
-  } = useJsonData();
+    generateAudio,
+    audioUrl: audioData
+  } = useAudioGeneration();
 
   const {
     textChunks: transcriptTextChunks,
@@ -61,12 +61,15 @@ export default function Content({
 
 
   useEffect(() => {
-    if (transcriptFinalResult) {
-      const audioFormData = new FormData();
-      audioFormData.append('text', transcriptFinalResult.content);
-      audioFormData.append('language', formData.get('language') as string);
-      audioFetchJsonData(`${BASE_URL}/generate_audio`, audioFormData);
-    }
+    (async () => {
+      if (transcriptFinalResult) {
+        const audioFormData = new FormData();
+        audioFormData.append('text', transcriptFinalResult.content);
+        audioFormData.append('language', formData.get('language') as string);
+
+        generateAudio(audioFormData)
+      }
+    })()
   }, [transcriptFinalResult])
 
   useEffect(() => {
@@ -106,8 +109,7 @@ export default function Content({
       <div className="flex-shrink-0 flex-basis-auto">
         <Audio
           audioError={audioError}
-          // @ts-ignore
-          audioUrl={audioData?.audio_url}
+          audioUrl={audioData}
           isAudioLoading={isAudioLoading}
         />
       </div>

frontend/src/components/episode.tsx

@@ -14,15 +14,15 @@ interface EpisodeProps {
 export default function Episode({ isPodInfoLoading, podInfoError, podInfoData }: EpisodeProps) {
 
   return (
-    <div className="flex items-start bg-gradient-to-br from-blue-100 via-purple-50 to-pink-50  p-8 rounded-2xl shadow-xl shadow-gray-200/50 mx-12 my-4">
+    <div className="flex items-start bg-gradient-to-br from-blue-100 via-purple-50 to-pink-50 p-4 rounded-2xl shadow-xl shadow-gray-200/50 mx-12 my-2">
       <img 
         src="/cover1.png" 
         alt={podInfoData?.title || "Episode thumbnail"} 
-        className="w-40 h-40 mr-4 bg-gray-300 rounded-2xl object-cover"
+        className="w-14 h-14 m-2 bg-gray-300 rounded-2xl object-cover"
       />
       {
         isPodInfoLoading && (
-          <div className="flex-1 h-40 flex flex-col">
+          <div className="flex-1 flex flex-col">
             <Skeleton className="h-6 my-2 w-3/4 rounded-xl" />
             <Skeleton className="h-6 w-1/2 rounded-xl" />
           </div>
@@ -41,7 +41,7 @@ export default function Episode({ isPodInfoLoading, podInfoError, podInfoData }:
       }
       {
         !isPodInfoLoading && !podInfoError && (
-          <div className="flex-1 h-40 flex flex-col">
+          <div className="flex-1 flex flex-col">
             <h2 className="text-xl font-bold my-2">{podInfoData?.title || "播客标题"}</h2>
           <p className="text-sm text-gray-600">主讲人: {podInfoData?.host_name || "未知"}</p>
         </div>

frontend/src/components/menu.tsx

@@ -54,8 +54,6 @@ export default function Menu({ handleGenerate, isGenerating }: { handleGenerate:
     formData.append('duration', duration);
     formData.append('language', language);
 
-    console.log(formData);
-
     handleGenerate(formData);
   };
 

frontend/src/components/transcript.tsx

@@ -48,7 +48,7 @@ export default function Transcript({
     <div className="w-full px-12 py-6 overflow-hidden">
       <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
         <div className="flex justify-center mb-4">
-          <TabsList className="inline-flex bg-gray-100 rounded-xl p-1">
+          <TabsList className="inline-flex bg-gray-200 rounded-xl p-1">
             <TabsTrigger 
               value="summary" 
               className="data-[state=active]:bg-white rounded-[5px] m-1"
@@ -64,9 +64,9 @@ export default function Transcript({
           </TabsList>
         </div>
         <TabsContent value="summary">
-          <Card>
+          <Card className="p-8 bg-[rgb(249,249,249)]">
             <CardContent
-              className={`h-[calc(100vh-500px)] overflow-y-auto bg-[rgb(249,249,249)] rounded-xl box-content`}
+              className={`h-[calc(100vh-400px)] overflow-y-auto`}
               ref={summaryContentRef}
             >
               {
@@ -79,8 +79,8 @@ export default function Transcript({
           </Card>
         </TabsContent>
         <TabsContent value="transcript">
-          <Card>
-            <CardContent className={`p-8 h-[calc(100vh-500px)] overflow-y-auto bg-[rgb(249,249,249)] rounded-xl box-content`} ref={transcriptContentRef}>
+          <Card className="p-8 bg-[rgb(249,249,249)]">
+            <CardContent className={`h-[calc(100vh-400px)] overflow-y-auto`} ref={transcriptContentRef}>
               <DialogueList
                 textChunks={transcriptTextChunks}
                 transcriptError={transcriptError}
@@ -125,7 +125,7 @@ function renderContent(isLoading: boolean, error: string | null, textChunks: str
       ) : (
         <div className="prose max-w-none h-full">
           {textChunks.length > 0 ? (
-            <ReactMarkdown className="p-8">{textChunks.join('')}</ReactMarkdown>
+            <ReactMarkdown>{textChunks.join('')}</ReactMarkdown>
           ) : (
             <div className="relative flex flex-col items-center justify-center h-full text-center relative overflow-hidden">
               <div className="transform transition-all duration-500">

frontend/src/hooks/useJsonData.ts

@@ -27,7 +27,6 @@ export function useJsonData() {
 
       const jsonData = await response.json();
       setData(jsonData);
-      console.log(jsonData, 'jsonData')
     } catch (error) {
       setError('获取数据时发生错误: ' + (error as Error).message);
     } finally {

frontend/src/hooks/useStreamText.ts

@@ -49,7 +49,6 @@ export function useStreamText() {
     }
 
     try {
-      console.log('fetching')
       const response = await fetch(url, {
         method: 'POST',
         body: formData,

frontend/src/hooks/useTaskData.ts

@@ -0,0 +1,50 @@
+import { useState, useCallback } from 'react';
+import { BASE_URL } from "@/lib/constant";
+
+interface AudioGenerationState {
+  isLoading: boolean;
+  error: string | null;
+  audioUrl: string | null;
+}
+
+export function useAudioGeneration() {
+  const [state, setState] = useState<AudioGenerationState>({
+    isLoading: false,
+    error: null,
+    audioUrl: null,
+  });
+
+  const generateAudio = useCallback(async (formData: FormData) => {
+    setState({ isLoading: true, error: null, audioUrl: null });
+
+    try {
+      const response = await fetch(`${BASE_URL}/generate_audio`, {
+        method: 'POST',
+        body: formData
+      });
+
+      const { task_id } = await response.json();
+
+      while (true) {
+        await new Promise(resolve => setTimeout(resolve, 2000));  // 等待2秒
+
+        const statusResponse = await fetch(`${BASE_URL}/audio_status/${task_id}`);
+        const status = await statusResponse.json();
+
+        if (status.status === 'completed') {
+          setState({ isLoading: false, error: null, audioUrl: status.audio_url });
+          return;
+        } else if (status.status === 'failed') {
+          throw new Error(status.error);
+        }
+      }
+    } catch (error) {
+      setState({ isLoading: false, error: error instanceof Error ? error.message : '未知错误', audioUrl: null });
+    }
+  }, []);
+
+  return {
+    ...state,
+    generateAudio,
+  };
+}

frontend/src/index.css

@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .gBtwiJ .interface-grid {
-  background: #fff !important;
+  background: rgba(249, 249, 249, 1) !important;
 }
 
 :root {

frontend/src/lib/constant.ts

@@ -1,2 +1,5 @@
-export const BASE_URL = "https://zhang-xxx-podcastlm-backend.hf.space/api/v1/chat"
-export const HOST_URL = "https://zhang-xxx-podcastlm-backend.hf.space"
+// export const BASE_URL = "https://zhang-xxx-podcastlm-backend.hf.space/api/v1/chat"
+// export const HOST_URL = "https://zhang-xxx-podcastlm-backend.hf.space"
+
+export const BASE_URL = "http://localhost:8000/api/v1/chat"
+export const HOST_URL = "http://localhost:8000"