Function AudioGenerationForm

examples/ts-react-chat/src/routes/generations.audio.tsx:61–105

({
  mode,
  config,
}: {
  mode: Mode
  config: AudioProviderConfig
})

}

function AudioGenerationForm({
  mode,
  config,
}: {
  mode: Mode
  config: AudioProviderConfig
}) {
  const [prompt, setPrompt] = useState('')
  const [duration, setDuration] = useState<number | undefined>(
    config.defaultDuration,
  )
  const [selectedModel, setSelectedModel] = useState<string>(config.model)

  const hookOptions = useMemo(() => {
    if (mode === 'hooks') {
      return {
        connection: fetchServerSentEvents('/api/generate/audio'),
        body: { provider: config.id, model: selectedModel },
        onResult: toAudioOutput,
      }
    }
    return {
      fetcher: (input: { prompt: string; duration?: number }) =>
        generateAudioFn({
          data: { ...input, provider: config.id, model: selectedModel },
        }),
      onResult: toAudioOutput,
    }
  }, [mode, config.id, selectedModel])

  const hookReturn = useGenerateAudio(hookOptions)

  return (
    <AudioGenerationUI
      {...hookReturn}
      config={config}
      prompt={prompt}
      setPrompt={setPrompt}
      duration={duration}
      setDuration={setDuration}
      selectedModel={selectedModel}
      setSelectedModel={setSelectedModel}
    />
  )
}

function AudioGenerationUI({
  config,