basics-generate-speech-elevenlabs

import type { SVGProps } from "react";

import { SpeechSandbox } from "../components/speech-sandbox";

export default function AIGenerateAudioPage() {
  return (
    <main className="flex min-h-screen flex-col bg-muted/30">
      <div className="mx-auto w-full max-w-2xl flex-1 px-4 pt-16 pb-16">
        <div className="mb-8 space-y-1">
          <div className="flex items-center space-x-2">
            <ElevenLabsIcon className="w-24 text-black dark:text-white" />
            <h1 className="text-balance font-normal text-xl tracking-tight md:text-2xl">
              <span>generateAudio</span>
            </h1>
          </div>
          <p className="text-pretty text-muted-foreground text-xs md:text-lg">
            Generate natural-sounding speech from text using ElevenLabs' TTS
            model.
          </p>
        </div>

        <div className="w-full">
          <SpeechSandbox />
        </div>
      </div>
      <footer className="pb-4 shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.06)] dark:shadow-[0px_-1px_0px_0px_rgba(255,255,255,0.06)]">
        <div className="flex w-full items-center justify-center px-4 py-6">
          <p className="text-muted-foreground text-xs">
            <UpstashIcon className="mr-2 inline-block h-4 w-4" />
            Rate limited to 3 requests per day
          </p>
        </div>
      </footer>
    </main>
  );
}

function ElevenLabsIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      fill="none"
      height={20}
      viewBox="0 0 694 90"
      width={694}
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <title>ElevenLabs</title>
      <path
        d="M248.261 22.19h-17.795l21.502 66.322h19.155l21.502-66.322H274.83L261.365 72.15 248.261 22.19zM0 0h18.413v88.512H0V0zM36.579 0h18.413v88.512H36.579V0zM73.155 0h54.497v14.752H91.568v21.074h33.613v14.752H91.568V73.76h36.084v14.752H73.155V0zM138.896 0h17.424v88.512h-17.424V0zM166.824 55.29c0-24.174 11.987-34.587 30.647-34.587 18.66 0 29.288 10.289 29.288 34.834v3.967h-42.758c.618 14.38 4.943 19.215 13.223 19.215 6.549 0 10.627-3.843 11.369-10.537h17.424C224.905 82.81 212.795 90 197.224 90c-19.772 0-30.4-10.537-30.4-34.71zm42.758-7.315c-.865-12.149-5.067-16.116-12.358-16.116s-11.864 4.091-13.099 16.116h25.457zM295.962 55.29c0-24.174 11.987-34.587 30.647-34.587 18.66 0 29.288 10.289 29.288 34.834v3.967h-42.758c.618 14.38 4.943 19.215 13.223 19.215 6.549 0 10.627-3.843 11.369-10.537h17.424C354.043 82.81 341.932 90 326.362 90c-19.773 0-30.4-10.537-30.4-34.71zm42.757-7.315c-.865-12.149-5.066-16.116-12.357-16.116-7.291 0-11.864 4.091-13.099 16.116h25.456zM438.443 0h18.413v73.76h34.601v14.752h-53.014V0z"
        fill="currentColor"
      />
      <path
        clipRule="evenodd"
        d="M495.783 55.29c0-25.29 11.616-34.587 26.569-34.587 7.414 0 14.211 4.214 16.93 8.677v-7.19h17.795v66.322h-17.301v-7.81C537.181 85.91 529.89 90 521.857 90c-15.817 0-26.074-10.165-26.074-34.71zm31.141-21.571c8.65 0 13.346 6.57 13.346 21.57s-4.696 21.695-13.346 21.695-13.593-6.695-13.593-21.695 4.943-21.57 13.593-21.57zM587.847 80.703v7.81h-17.3V0h17.424v29.38c2.966-4.587 9.886-8.677 17.301-8.677 14.582 0 26.198 9.297 26.198 34.586C631.47 80.58 620.101 90 604.901 90c-8.032 0-14.582-4.09-17.054-9.297zm12.482-46.86c8.65 0 13.593 6.446 13.593 21.446 0 15-4.943 21.695-13.593 21.695-8.651 0-13.347-6.695-13.347-21.695s4.696-21.446 13.347-21.446z"
        fill="currentColor"
        fillRule="evenodd"
      />
      <path
        d="M638.638 68.802h17.424c.247 6.942 3.954 10.289 10.504 10.289 6.549 0 10.257-2.975 10.257-8.182 0-4.71-2.842-6.446-9.021-7.934l-5.314-1.363c-15.076-3.843-22.615-7.934-22.615-20.455 0-12.52 11.617-20.454 26.446-20.454s26.075 5.826 26.569 19.586h-17.425c-.37-6.074-4.078-8.677-9.391-8.677-5.314 0-9.022 2.603-9.022 7.562 0 4.586 2.966 6.322 8.157 7.562l5.437 1.363C684.979 51.694 694 55.29 694 68.678 694 82.066 682.137 90 666.072 90c-17.425 0-27.064-6.57-27.434-21.198zM384.072 49.463c0-10.413 4.943-16.116 12.605-16.116 6.302 0 9.886 3.967 9.886 12.52v42.645h17.424V43.141c0-15.372-8.65-22.438-21.255-22.438-8.527 0-15.57 4.338-18.66 10.04V22.19h-17.671v66.322h17.671v-39.05z"
        fill="currentColor"
      />
    </svg>
  );
}

function UpstashIcon(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      {...props}
      height="341"
      preserveAspectRatio="xMidYMid"
      viewBox="0 0 256 341"
      width="256"
      xmlns="http://www.w3.org/2000/svg"
    >
      <title>Upstash</title>
      <path
        d="M0 298.417c56.554 56.553 148.247 56.553 204.801 0 56.554-56.554 56.554-148.247 0-204.801l-25.6 25.6c42.415 42.416 42.415 111.185 0 153.6-42.416 42.416-111.185 42.416-153.601 0L0 298.416Z"
        fill="#00C98D"
      />
      <path
        d="M51.2 247.216c28.277 28.277 74.123 28.277 102.4 0 28.277-28.276 28.277-74.123 0-102.4l-25.6 25.6c14.14 14.138 14.14 37.061 0 51.2-14.138 14.139-37.061 14.139-51.2 0l-25.6 25.6ZM256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
        fill="#00C98D"
      />
      <path
        d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
        fill="#00C98D"
      />
      <path
        d="M256 42.415c-56.554-56.553-148.247-56.553-204.8 0-56.555 56.555-56.555 148.247 0 204.801l25.599-25.6c-42.415-42.415-42.415-111.185 0-153.6 42.416-42.416 111.185-42.416 153.6 0L256 42.416Z"
        fill="#FFF"
        fillOpacity=".4"
      />
      <path
        d="M204.8 93.616c-28.276-28.277-74.124-28.277-102.4 0-28.278 28.277-28.278 74.123 0 102.4l25.6-25.6c-14.14-14.138-14.14-37.061 0-51.2 14.138-14.139 37.06-14.139 51.2 0l25.6-25.6Z"
        fill="#FFF"
        fillOpacity=".4"
      />
    </svg>
  );
}