added images

.env

@@ -2,6 +2,9 @@
 AI_BEDTIME_STORY_API_GRADIO_URL="https://jbilcke-hf-ai-bedtime-story-server.hf.space"
 AI_BEDTIME_STORY_API_SECRET_TOKEN=
 
+FAST_IMAGE_SERVER_API_GRADIO_URL="https://jbilcke-hf-fast-image-server.hf.space"
+FAST_IMAGE_SERVER_API_SECRET_TOKEN=
+
 # ----------- CENSORSHIP -------
 ENABLE_CENSORSHIP=
 FINGERPRINT_KEY=

package-lock.json

@@ -46,6 +46,7 @@
         "react": "18.2.0",
         "react-circular-progressbar": "^2.1.0",
         "react-dom": "18.2.0",
+        "react-smooth-scroll-hook": "^1.3.4",
         "react-snowfall": "^1.2.1",
         "react-virtualized-auto-sizer": "^1.0.20",
         "replicate": "^0.17.0",
@@ -5531,6 +5532,18 @@
         }
       }
     },
+    "node_modules/react-smooth-scroll-hook": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/react-smooth-scroll-hook/-/react-smooth-scroll-hook-1.3.4.tgz",
+      "integrity": "sha512-nPNSQStr8gz1ogQbWTmeXiOEValKKr7hImucipoUlP7mK1n54qOBoFpO1aGE9yZEB7vSnkRx3mTH9zwO4nj8MQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-snowfall": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/react-snowfall/-/react-snowfall-1.2.1.tgz",

package.json

@@ -47,6 +47,7 @@
     "react": "18.2.0",
     "react-circular-progressbar": "^2.1.0",
     "react-dom": "18.2.0",
+    "react-smooth-scroll-hook": "^1.3.4",
     "react-snowfall": "^1.2.1",
     "react-virtualized-auto-sizer": "^1.0.20",
     "replicate": "^0.17.0",

src/app/interface/generate/index.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState, useTransition } from "react"
 import { useSpring, animated } from "@react-spring/web"
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import useSmoothScroll from "react-smooth-scroll-hook"
 import { split } from "sentence-splitter"
 
 import { useToast } from "@/components/ui/use-toast"
@@ -16,6 +17,7 @@ import { useCountdown } from "@/lib/useCountdown"
 import { useAudio } from "@/lib/useAudio"
 
 import { Countdown } from "../countdown"
+import { generateImage } from "@/app/server/actions/generateImage"
 
 type Stage = "generate" | "finished"
 
@@ -32,6 +34,7 @@ export function Generate() {
   const [promptDraft, setPromptDraft] = useState("")
   const [assetUrl, setAssetUrl] = useState("")
   const [isOverSubmitButton, setOverSubmitButton] = useState(false)
+  const [isOverPauseButton, setOverPauseButton] = useState(false)
 
   const [runs, setRuns] = useState(0)
   const runsRef = useRef(0)
@@ -39,13 +42,30 @@ export function Generate() {
   const currentLineIndexRef = useRef(0)
   const [currentLineIndex, setCurrentLineIndex] = useState(0)
 
+  const voices: TTSVoice[] = ["Cloée", "Julian"]
+  const [voice, setVoice] = useState<TTSVoice>("Cloée")
+
+  const { scrollTo } = useSmoothScroll({
+    ref: scrollRef,
+    speed: 2000,
+    direction: 'y',
+  });
+
   useEffect(() => {
     currentLineIndexRef.current = currentLineIndex
   }, [currentLineIndex])
-  
+
   const [storyLines, setStoryLines] = useState<StoryLine[]>([])
 
+  const [images, setImages] = useState<string[]>([])
+  const imagesRef = useRef<string[]>([])
+  const imageListKey = images.join("")
+  useEffect(() => {
+    imagesRef.current = images
+  }, [imageListKey])
+
   // computing those is cheap
+
   const wholeStory = storyLines.map(line => line.text).join("\n")
   const currentLine = storyLines.at(currentLineIndex)
   const currentLineText = currentLine?.text || ""
@@ -60,30 +80,12 @@ export function Generate() {
   
   const { toast } = useToast()
 
-  const audio = useAudio()
-
-  /*
-  // to simulate a "typing" effect
-  however.. we don't need this as we already have an audio player!
+  const { playback, isPlaying, isSwitchingTracks, isLoaded, progress, togglePause } = useAudio()
 
-  const [typedStoryText, setTypedStoryText] = useState("")
-  const [typedStoryCharacterIndex, setTypedStoryCharacterIndex] = useState(0)
-
-  useEffect(() => {
-    if (storyText && typedStoryCharacterIndex < storyText.length) {
-      setTimeout(() => {
-        setTypedStoryText(typedStoryText + story.text[typedStoryCharacterIndex])
-        setTypedStoryCharacterIndex(typedStoryCharacterIndex + 1)
-        console.log("boom")
-      }, 40)
-    }
-  }, [storyText, typedStoryCharacterIndex])
-  */
-  
   const { progressPercent, remainingTimeInSec } = useCountdown({
     isActive: isLocked,
     timerId: runs, // everytime we change this, the timer will reset
-    durationInSec: /*stage === "interpolate" ? 30 :*/ 35, // it usually takes 40 seconds, but there might be lag
+    durationInSec: /*stage === "interpolate" ? 30 :*/ 50, // it usually takes 40 seconds, but there might be lag
     onEnd: () => {}
   })
   
@@ -107,6 +109,20 @@ export function Generate() {
     },
   })
 
+  const pauseButtonBouncer = useSpring({
+    transform: isOverPauseButton
+      ? 'scale(1.05)'
+      : 'scale(1.0)',
+    boxShadow: isOverPauseButton 
+      ? `0px 5px 15px 0px rgba(0, 0, 0, 0.05)`
+      : `0px 0px 0px 0px rgba(0, 0, 0, 0.05)`,
+    loop: true,
+    config: {
+      tension: 300,
+      friction: 10,
+    },
+  })
+
   const handleSubmit = () => {
     if (isLocked) { return }
     if (!promptDraft) { return }
@@ -187,11 +203,47 @@ export function Generate() {
       console.log("story audio changed!")
 
       try {
-        console.log("playing audio!")
-        await audio(currentLineAudio) // play
-        console.log("audio has ended, I think? let's go next!")
-        setCurrentLineIndex(currentLineIndexRef.current += 1)
-        // TODO change the line
+        const isLastLine =
+          (storyLines.length === 0) ||
+          (currentLineIndexRef.current === (storyLines.length - 1))
+
+        scrollTo(`#story-line-${currentLineIndexRef.current}`)
+
+        const nextLineIndex = (currentLineIndexRef.current += 1)
+        const nextLineText = storyLines[nextLineIndex]?.text || ""
+
+        if (nextLineText) {
+          setTimeout(() => {
+            startTransition(async () => {
+              try {
+                const newImage = await generateImage({
+                  positivePrompt: [
+                    "bedtime story illustration",
+                    "painting illustration",
+                    promptDraft,
+                    nextLineText,
+                  ].join(", "),
+                  width: 1024,
+                  height: 800
+                })
+                // console.log("newImage:", newImage.slice(0, 50))
+                setImages(imagesRef.current.concat(newImage))
+              } catch (err) {
+                setImages(imagesRef.current.concat(""))
+              }
+            })
+          }, 100)
+        } else {
+          setImages(imagesRef.current.concat(""))
+        }
+
+        await playback(currentLineAudio, isLastLine) // play
+        
+        if (!isLastLine && nextLineText) {
+          setTimeout(() => {
+            setCurrentLineIndex(nextLineIndex)
+          }, 1000)
+        }
       } catch (err) {
         console.error(err)
       }
@@ -199,9 +251,9 @@ export function Generate() {
     fn()
 
     return () => {
-      audio() // stop
+      playback() // stop
     }
-  }, [currentLineAudio])
+  }, [currentLineText, currentLineAudio])
 
   return (
     <div
@@ -254,7 +306,7 @@ export function Generate() {
 
             <div className={cn(
               `flex flex-col md:flex-row`,
-              `space-y-3 md:space-y-0 md:space-x-3`,
+              `space-y-4 md:space-y-0 md:space-x-4`,
               ` w-full md:max-w-[1024px]`,
               `items-center justify-between`
             )}>
@@ -270,13 +322,16 @@ export function Generate() {
                     `input input-bordered rounded-full`,
                     `transition-all duration-300 ease-in-out`,
                      `backdrop-blur-md `,
-                    `placeholder:text-gray-400`,
-                    `disabled:bg-gray-500 disabled:text-yellow-300 disabled:border-transparent`,
+                    `placeholder:text-gray-400/90`,
+                    `disabled:bg-blue-900/70 disabled:text-blue-300/60 disabled:border-transparent`,
                     isLocked
-                      ? `bg-white/10 text-yellow-400/60 selection:bg-yellow-200/60  selection:text-yellow-200/60 border-transparent`
+                      ? `bg-blue-100/80 text-yellow-400/60 selection:bg-yellow-200/60  selection:text-yellow-200/60 border-transparent`
                       : `bg-white/10 text-yellow-400/100 selection:bg-yellow-200/100 selection:text-yellow-200/100`,
                     `text-left`,
-                    `text-2xl leading-10 px-6 h-16 pt-1`,
+                    ``,
+                    storyLines?.length
+                    ? `text-2xl leading-10 px-6 h-16 pt-1`
+                    : `text-3xl leading-14 px-8 h-[70px] pt-1`
                   )}
                   value={promptDraft}
                   onChange={e => setPromptDraft(e.target.value)}
@@ -306,39 +361,82 @@ export function Generate() {
                   <span>{nbCharsLimits}</span>
                 </div>
               </div>
-              <div className="flex flex-row w-44">
-                <animated.button
-                  style={{
-                    textShadow: "0px 0px 1px #000000ab",
-                    ...submitButtonBouncer
-                  }}
-                  onMouseEnter={() => setOverSubmitButton(true)}
-                  onMouseLeave={() => setOverSubmitButton(false)}
-                  className={cn(
-                    `px-4 h-16`,
-                    `rounded-full`,
-                    `transition-all duration-300 ease-in-out`,
-                    `backdrop-blur-sm`,
-                    isLocked
-                      ? `bg-orange-200/50 text-sky-50/80 border-yellow-600/10`
-                      : `bg-yellow-400/70 text-sky-50  border-yellow-800/20 hover:bg-yellow-400/80`,
-                    `text-center`,
-                    `w-full`,
-                    `text-2xl `,
-                    `border`,
-                    headingFont.className,
-                    // `transition-all duration-300`,
-                    // `hover:animate-bounce`
-                  )}
-                  disabled={isLocked}
-                  onClick={handleSubmit}
-                  >
-                  {isLocked
-                    ? `Dreaming..`
-                    : "Dream"
-                  }
-                </animated.button>
-              </div>
+              <div className="flex flex-row w-full md:w-auto justify-center">
+                <div className="flex flex-row w-1/2 md:w-52">
+                  <animated.button
+                    style={{
+                      textShadow: "0px 0px 1px #000000ab",
+                      ...submitButtonBouncer
+                    }}
+                    onMouseEnter={() => setOverSubmitButton(true)}
+                    onMouseLeave={() => setOverSubmitButton(false)}
+                    className={cn(
+                      storyLines?.length
+                      ? `text-2xl leading-10 px-4 h-16`
+                      : `text-3xl leading-14 px-6 h-[70px]`,
+                      `rounded-full`,
+                      `transition-all duration-300 ease-in-out`,
+                      `backdrop-blur-sm`,
+                      isLocked
+                        ? `bg-blue-900/70 text-sky-50/80 border-yellow-600/10`
+                        : `bg-yellow-400/70 text-sky-50  border-yellow-800/20 hover:bg-yellow-400/80`,
+                      `text-center`,
+                      `w-full`,
+                      `border`,
+                      headingFont.className,
+                      // `transition-all duration-300`,
+                      // `hover:animate-bounce`
+                    )}
+                    disabled={isLocked}
+                    onClick={handleSubmit}
+                    >
+                    {isLocked
+                      ? `Dreaming..`
+                      : "Dream 🌙"
+                    }
+                  </animated.button>
+                </div>
+                {
+                  /*
+                !!storyLines.length && <div className={cn(
+                  `flex flex-row w-1/2 md:w-44`,
+                  `transition-all duration-300 ease-in-out`,
+                    isLoaded ? 'scale-100' : 'scale-0'
+                  )}>
+                    <animated.button
+                      style={{
+                        textShadow: "0px 0px 1px #000000ab",
+                        ...pauseButtonBouncer
+                      }}
+                      onMouseEnter={() => setOverPauseButton(true)}
+                      onMouseLeave={() => setOverPauseButton(false)}
+                      className={cn(
+                        `px-4 h-16`,
+                        `rounded-full`,
+                        `transition-all duration-300 ease-in-out`,
+                        `backdrop-blur-sm`,
+                        isLocked
+                          ? `bg-orange-200/30 text-sky-50/60 border-yellow-600/10`
+                          : `bg-yellow-400/50 text-sky-50  border-yellow-800/20 hover:bg-yellow-400/60`,
+                        `text-center`,
+                        `w-full`,
+                        `text-2xl `,
+                        `border`,
+                        headingFont.className,
+                        // `transition-all duration-300`,
+                        // `hover:animate-bounce`
+                      )}
+                      disabled={isLocked}
+                      onClick={togglePause}
+                      >
+                      {isPlaying || isSwitchingTracks
+                        ? "Pause 🔊"
+                        : "Play 🔊"
+                      }
+                    </animated.button>
+                  </div>
+                */
+                }</div>
             </div>
           </div>
 
@@ -350,6 +448,7 @@ export function Generate() {
         `space-y-8`,
        //  `transition-all duration-300 ease-in-out`,
       )}>
+        
       
         <div
           className={cn(
@@ -379,6 +478,7 @@ export function Generate() {
                 />}
             </div> : null}
 
+
             <div className={cn(
               `flex flex-col md:flex-row`,
               `space-y-3 md:space-y-0 md:space-x-3`,
@@ -386,17 +486,41 @@ export function Generate() {
               `items-center justify-between`
             )}>
               <div className={cn(
-                `flex flex-col flex-grow w-full space-y-2 text-2xl text-blue-200/90`
+                `flex flex-col flex-grow w-full items-center space-y-2 text-2xl text-blue-200/60`
               )}>
                 {storyLines.map((line, i) =>
                   <div
-                    key={`${line.text}_${i}`}
+                    id={`story-line-${i}`}
+                    key={`${line.text}_${i}`}>
+                    <div
 
                     // TODO change a color if we have progressed at the current index (i)
-                    className={cn()}
-                    >{
-                      line.text
-                    }</div>)}
+                    className={cn(
+                      "flex flex-col items-center w-full "
+                      //i < currentLineIndex
+                      //? 'text-yellow-200'
+                      //: 'text-blue-200/80'
+                    )}
+                    style={{}}
+                    >
+                      <div className="w-full md:w-2/3 text-center"> {
+                      line.text.split("").map((c, j, arr) => <span
+                      key={`${c}_${j}`}
+                      className={cn(
+                        `transition-all duration-100 ease-in-out`,
+                        i < currentLineIndex || (isLoaded && i === currentLineIndex && j <= (progress * 1.3 * arr.length))
+                      ? 'text-yellow-400/90'
+                      : ''
+                      )}>{c || " "}</span>)
+                    }</div>
+                    <div className="flex flex-col items-center justify-center w-full p-8">
+                      {images.at(i) ? <img
+                        className="h-[400px] rounded-lg overflow-hidden"
+                        src={images.at(i)}
+                      /> : null}
+                    </div>
+                    </div>
+                  </div>)}
               </div>
             </div>
           </div>

src/app/server/actions/generateImage.ts

@@ -0,0 +1,106 @@
+"use server"
+
+// TODO add a system to mark failed instances as "unavailable" for a couple of minutes
+// console.log("process.env:", process.env)
+
+import { generateSeed } from "@/lib/generateSeed";
+import { getValidNumber } from "@/lib/getValidNumber";
+
+// note: to reduce costs I use the small A10s (not the large)
+// anyway, we will soon not need to use this cloud anymore 
+// since we will be able to leverage the Inference API
+const instance = `${process.env.FAST_IMAGE_SERVER_API_GRADIO_URL || ""}`
+const secretToken = `${process.env.FAST_IMAGE_SERVER_API_SECRET_TOKEN || ""}`
+
+// console.log("DEBUG:", JSON.stringify({ instances, secretToken }, null, 2))
+
+export async function generateImage(options: {
+  positivePrompt: string;
+  negativePrompt?: string;
+  seed?: number;
+  width?: number;
+  height?: number;
+  nbSteps?: number;
+}): Promise<string> {
+
+  // console.log("querying " + instance)
+  const positivePrompt = options?.positivePrompt || ""
+  if (!positivePrompt) {
+    throw new Error("missing prompt")
+  }
+
+  // the negative prompt CAN be missing, since we use a trick
+  // where we make the interface mandatory in the TS doc,
+  // but browsers might send something partial
+  const negativePrompt = options?.negativePrompt || ""
+  
+  // we treat 0 as meaning "random seed"
+  const seed = (options?.seed ? options.seed : 0) || generateSeed()
+
+  const width = getValidNumber(options?.width, 256, 1024, 512)
+  const height = getValidNumber(options?.height, 256, 1024, 512)
+  const nbSteps = getValidNumber(options?.nbSteps, 1, 8, 4)
+  // console.log("SEED:", seed)
+
+  const positive = [
+
+    // oh well.. is it too late to move this to the bottom?
+    "beautiful",
+
+    // too opinionated, so let's remove it
+    // "intricate details",
+
+    positivePrompt,
+
+    "award winning",
+    "high resolution"
+  ].filter(word => word)
+  .join(", ")
+
+  const negative =  [
+    negativePrompt,
+    "watermark",
+    "copyright",
+    "blurry",
+    // "artificial",
+    // "cropped",
+    "low quality",
+    "ugly"
+  ].filter(word => word)
+  .join(", ")
+
+  const res = await fetch(instance + (instance.endsWith("/") ? "" : "/") + "api/predict", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      // Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({
+      fn_index: 0, // <- important!
+      data: [	
+        positive, // string  in 'Prompt' Textbox component		
+        negative, // string  in 'Negative prompt' Textbox component		
+        seed, // number (numeric value between 0 and 2147483647) in 'Seed' Slider component		
+        width, // number (numeric value between 256 and 1024) in 'Width' Slider component		
+        height, // number (numeric value between 256 and 1024) in 'Height' Slider component		
+        0.0, // can be disabled for LCM SDXL
+        nbSteps, // number (numeric value between 2 and 8) in 'Number of inference steps for base' Slider component			
+        secretToken
+      ]
+    }),
+    cache: "no-store",
+  })
+
+  const { data } = await res.json()
+
+  if (res.status !== 200 || !Array.isArray(data)) {
+    // This will activate the closest `error.js` Error Boundary
+    throw new Error(`Failed to fetch data (status: ${res.status})`)
+  }
+
+  if (!data[0]) {
+    throw new Error(`the returned image was empty`)
+  }
+
+  return data[0] as string
+}

src/lib/getValidNumber.ts

@@ -0,0 +1,10 @@
+export const getValidNumber = (something: any, minValue: number, maxValue: number, defaultValue: number) => {
+  const strValue = `${something || defaultValue}`
+  const numValue = Number(strValue)
+  const isValid = !isNaN(numValue) && isFinite(numValue)
+  if (!isValid) {
+    return defaultValue
+  }
+  return Math.max(minValue, Math.min(maxValue, numValue))
+ 
+}

src/lib/useAudio.ts

@@ -1,11 +1,37 @@
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
-export function useAudio() {
-  const audioContextRef = useRef<AudioContext | null>(null);
+// Helper Types
+type UseAudioResponse = {
+  playback: (base64Data?: string, isLastTrackOfPlaylist?: boolean) => Promise<boolean>;
+  progress: number;
+  isLoaded: boolean;
+  isPlaying: boolean;
+  isSwitchingTracks: boolean; // when audio is temporary cut (but it's not a real pause)
+  togglePause: () => void;
+};
 
+export function useAudio(): UseAudioResponse {
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const sourceNodeRef = useRef<AudioBufferSourceNode | null>(null);
+  const [progress, setProgress] = useState(0.0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isSwitchingTracks, setSwitchingTracks] = useState(false);
+  const startTimeRef = useRef(0);
+  const pauseTimeRef = useRef(0);
+  
   const stopAudio = useCallback(() => {
-    audioContextRef.current?.close();
-    audioContextRef.current = null;
+    try {
+      audioContextRef.current?.close();
+    } catch (err) {
+      // already closed probably
+    }
+    setSwitchingTracks(false);
+
+    sourceNodeRef.current = null;
+    sourceNodeRef.current = null;
+
+    // setProgress(0); // Reset progress
   }, []);
 
   // Helper function to handle conversion from Base64 to an ArrayBuffer
@@ -14,13 +40,13 @@ export function useAudio() {
     return response.arrayBuffer();
   }
 
-  const playAudio = useCallback(
-    async (base64Data?: string) => {
+  const playback = useCallback(
+    async (base64Data?: string, isLastTrackOfPlaylist?: boolean): Promise<boolean> => {
       stopAudio(); // Stop any playing audio first
 
       // If no base64 data provided, we don't attempt to play any audio
       if (!base64Data) {
-        return;
+        return false;
       }
 
       // Initialize AudioContext
@@ -52,13 +78,41 @@ export function useAudio() {
           source.connect(gainNode);
           gainNode.connect(audioContext.destination);
 
-          // Start playback and handle finishing
-          source.start();
+          // Assign source node to ref for progress tracking
+          sourceNodeRef.current = source;
+          source.start(0, pauseTimeRef.current % audioBuffer.duration); // Start at the correct offset if paused previously
+          startTimeRef.current = audioContextRef.current!.currentTime - pauseTimeRef.current;
           
-          source.onended = () => {
-            stopAudio();
-            resolve(true);
-          };
+          setSwitchingTracks(false);
+          setProgress(0);
+          setIsLoaded(true);
+          setIsPlaying(true);
+
+          // Set up progress interval
+          const totalDuration = audioBuffer.duration;
+          const updateProgressInterval = setInterval(() => {
+            if (sourceNodeRef.current && audioContextRef.current) {
+              const currentTime = audioContextRef.current.currentTime;
+              const currentProgress = currentTime / totalDuration;
+              setProgress(currentProgress);
+              if (currentProgress >= 1.0) {
+                clearInterval(updateProgressInterval);
+              }
+            }
+          }, 50); // Update every 50ms
+          
+          if (source) {
+            source.onended = () => {
+              // used to indicate a temporary stop, while we switch tracks
+              if (!isLastTrackOfPlaylist) {
+                setSwitchingTracks(true);
+              }
+              setIsPlaying(false);
+              clearInterval(updateProgressInterval);
+              stopAudio();
+              resolve(true);
+            };
+          }
         }, (error) => {
           console.error('Error decoding audio data:', error);
           reject(error);
@@ -68,6 +122,25 @@ export function useAudio() {
     [stopAudio]
   );
 
+  const togglePause = useCallback(() => {
+    if (!audioContextRef.current || !sourceNodeRef.current) {
+      return; // Do nothing if audio is not initialized
+    }
+
+    if (isPlaying) {
+      // Pause the audio
+      pauseTimeRef.current += audioContextRef.current.currentTime - startTimeRef.current;
+      sourceNodeRef.current.stop(); // This effectively "pauses" the audio, but it also means the sourceNode will be unusable
+      sourceNodeRef.current = null; // As the node is now unusable, we nullify it
+      setIsPlaying(false);
+    } else {
+      // Resume playing
+      audioContextRef.current.resume().then(() => {
+        playback(); // This will pick up where we left off due to pauseTimeRef
+      });
+    }
+  }, [audioContextRef, sourceNodeRef, isPlaying, playback]);
+
   // Effect to handle cleanup on component unmount
   useEffect(() => {
     return () => {
@@ -75,6 +148,5 @@ export function useAudio() {
     };
   }, [stopAudio]);
 
-  // Return the playAudio function from the hook
-  return playAudio;
+  return { playback, isPlaying, isSwitchingTracks, isLoaded, progress, togglePause };
 }