Text to Speech Player

\n \n {error && (\n

\n {error}\n \n

\n )}\n \n

\n        \n        <div className=\"controls-row\">\n          <button \n            onClick={() => setShowSettings(!showSettings)} \n            className=\"settings-btn\"\n            title=\"Settings\"\n          >\n            ⚙️\n          </button>\n          <button \n            onClick={generateSpeech} \n            className=\"generate-btn\"\n            disabled={!text.trim() || isProcessing}\n          >\n            {isProcessing ? \"Generating...\" : \"Generate Speech\"}\n          </button>\n        </div>\n        \n        {showSettings && (\n          <div className=\"settings-panel\">\n            <label htmlFor=\"voice-select\">Voice:</label>\n            <select \n              id=\"voice-select\" \n              value={selectedVoice} \n              onChange={handleVoiceChange}\n              className=\"voice-select\"\n            >\n              {voices.map(voice => (\n                <option key={voice.id} value={voice.id}>\n                  {voice.name} - {voice.description}\n                </option>\n              ))}\n            </select>\n            <button \n              onClick={useRandomVoice}\n              className=\"random-voice-btn\"\n              title=\"Use a random voice\"\n            >\n              🎲\n            </button>\n          </div>\n        )}\n      </div>\n\n      <audio ref={audioRef} />\n\n      {audioSrc && (\n        <div className=\"player-controls\">\n          <div className=\"time-display\">\n            <span>{formatTime(currentTime)}</span>\n            <span>-{formatTime(Math.max(0, duration - currentTime))}</span>\n          </div>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max={duration || 0}\n            value={currentTime}\n            onChange={handleSeek}\n            className=\"time-slider\"\n          />\n\n          <div className=\"controls-row\">\n            <button onClick={() => changePlaybackRate()} className=\"rate-btn\">\n              {playbackRate.toFixed(1)}x\n            </button>\n            <button onClick={() => skipTime(-10)} className=\"skip-btn\">\n              -10s\n            </button>\n            <button onClick={togglePlayPause} className=\"play-btn\">\n              {isPlaying ? \"❚❚\" : \"▶\"}\n            </button>\n            <button onClick={() => skipTime(10)} className=\"skip-btn\">\n              +10s\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n// Main App component\nfunction App() {\n  return (\n    <div className=\"container\">\n      <AudioPlayer />\n      <footer>\n        <p>\n          <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} target=\"_top\">\n            View Source\n          </a>\n        </p>\n      </footer>\n    </div>\n  );\n}\n\n// Client-side rendering\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\n// Server handler\nexport default async function server(request: Request): Promise<Response> {\n  const url = new URL(request.url);\n\n  // Handle the API endpoint to generate speech from text\n  if (url.pathname === '/generate-speech' && request.method === 'POST') {\n    try {\n      const { text, voice } = await request.json();\n      \n      if (!text || !text.trim()) {\n        return new Response(JSON.stringify({ error: 'No text provided' }), {\n          status: 400,\n          headers: { 'Content-Type': 'application/json' }\n        });\n      }\n      \n      // Using the OpenAI standard library for TTS\n      const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n      const openai = new OpenAI();\n      \n      const mp3 = await openai.audio.speech.create({\n        model: \"tts-1\",\n        voice: voice || \"alloy\",\n        input: text,\n      });\n      \n      const buffer = await mp3.arrayBuffer();\n      \n      return new Response(buffer, {\n        headers: {\n          'Content-Type': 'audio/mpeg',\n          'Cache-Control': 'public, max-age=86400'\n        }\n      });\n    } catch (error) {\n      console.error('Error generating speech:', error);\n      return new Response(JSON.stringify({ \n        error: error instanceof Error ? error.message : 'Failed to generate speech' \n      }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Handle manifest.json for PWA\n  if (url.pathname === '/manifest.json') {\n    return new Response(JSON.stringify({\n      name: \"Simple Audio Player\",\n      short_name: \"Audio Player\",\n      start_url: \"/\",\n      display: \"standalone\",\n      background_color: \"#242424\",\n      theme_color: \"#4a4a9a\",\n      icons: [\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"192x192\",\n          type: \"image/png\"\n        },\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"512x512\",\n          type: \"image/png\"\n        }\n      ]\n    }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle service worker for PWA\n  if (url.pathname === '/sw.js') {\n    return new Response(`\n      self.addEventListener('install', (event) => {\n        self.skipWaiting();\n        event.waitUntil(\n          caches.open('v1').then((cache) => {\n            return cache.addAll([\n              '/',\n              '/manifest.json'\n            ]);\n          })\n        );\n      });\n\n      self.addEventListener('activate', (event) => {\n        event.waitUntil(clients.claim());\n      });\n\n      self.addEventListener('fetch', (event) => {\n        event.respondWith(\n          caches.match(event.request).then((response) => {\n            return response || fetch(event.request);\n          })\n        );\n      });\n    `, {\n      headers: { 'Content-Type': 'application/javascript' }\n    });\n  }\n\n  // Main HTML\n  return new Response(\n    `<!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Simple Audio Player</title>\n        <meta name=\"description\" content=\"A simple text-to-speech player with podcast-style controls\">\n        <link rel=\"manifest\" href=\"/manifest.json\">\n        <meta name=\"theme-color\" content=\"#4a4a9a\">\n        <link rel=\"apple-touch-icon\" href=\"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n        <script>\n          if ('serviceWorker' in navigator) {\n            navigator.serviceWorker.register('/sw.js')\n              .then(registration => {\n                console.log('ServiceWorker registration successful');\n              })\n              .catch(err => {\n                console.log('ServiceWorker registration failed:', err);\n              });\n          }\n        </script>\n      </body>\n    </html>`,\n    {\n      headers: {\n        \"content-type\": \"text/html\",\n      },\n    }\n  );\n}\n\nconst css = `\n  :root {\n    --primary-color: #4a4a9a;\n    --secondary-color: #7272d8;\n    --text-color: #e0e0e0;\n    --background-color: #242424;\n    --card-bg-color: #333333;\n    --control-bg-color: #444444;\n    --accent-color: #5cbbf6;\n    --error-color: #e74c3c;\n  }\n\n  * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    background-color: var(--background-color);\n    color: var(--text-color);\n    line-height: 1.6;\n    overflow-x: hidden;\n  }\n\n  .container {\n    max-width: 600px;\n    margin: 0 auto;\n    padding: 1rem;\n  }\n\n  h1 {\n    font-size: 1.5rem;\n    text-align: center;\n    margin-bottom: 1.5rem;\n    color: var(--accent-color);\n  }\n\n  .audio-player {\n    background-color: var(--card-bg-color);\n    border-radius: 10px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    margin-bottom: 1.5rem;\n  }\n\n  .error-message {\n    background-color: rgba(231, 76, 60, 0.2);\n    color: var(--error-color);\n    padding: 10px;\n    border-radius: 6px;\n    margin-bottom: 1rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .close-btn {\n    background: none;\n    border: none;\n    color: var(--error-color);\n    font-size: 1.2rem;\n    cursor: pointer;\n  }\n\n  .text-input-container {\n    margin-bottom: 1.5rem;\n  }\n\n  .text-input {\n    width: 100%;\n    padding: 12px;\n    border-radius: 6px;\n    border: 1px solid #555;\n    background-color: #222;\n    color: var(--text-color);\n    font-size: 1rem;\n    resize: vertical;\n    margin-bottom: 1rem;\n    transition: border-color 0.3s;\n  }\n\n  .text-input:focus {\n    outline: none;\n    border-color: var(--primary-color);\n  }\n\n  .controls-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .generate-btn {\n    flex: 1;\n    padding: 12px;\n    background-color: var(--primary-color);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: background-color 0.3s;\n  }\n\n  .generate-btn:hover {\n    background-color: var(--secondary-color);\n  }\n\n  .generate-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .settings-btn {\n    padding: 12px;\n    background-color: var(--control-bg-color);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: background-color 0.3s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .settings-btn:hover {\n    background-color: #555;\n  }\n\n  .settings-panel {\n    margin-top: 1rem;\n    padding: 1rem;\n    background-color: var(--control-bg-color);\n    border-radius: 6px;\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .voice-select {\n    flex: 1;\n    padding: 8px;\n    background-color: #222;\n    color: var(--text-color);\n    border: 1px solid #555;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .random-voice-btn {\n    padding: 8px;\n    background-color: var(--primary-color);\n    color: white;\n    border: none;\n    border-radius: 4px;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: background-color 0.3s;\n  }\n\n  .random-voice-btn:hover {\n    background-color: var(--secondary-color);\n  }\n\n  .player-controls {\n    background-color: var(--control-bg-color);\n    border-radius: 8px;\n    padding: 1rem;\n  }\n\n  .time-display {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.875rem;\n    margin-bottom: 0.5rem;\n    color: #aaa;\n  }\n\n  .time-slider {\n    width: 100%;\n    height: 4px;\n    -webkit-appearance: none;\n    background: #555;\n    border-radius: 2px;\n    outline: none;\n    margin-bottom: 1rem;\n  }\n\n  .time-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 15px;\n    height: 15px;\n    background: var(--accent-color);\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  .controls-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .controls-row button {\n    background-color: transparent;\n    border: none;\n    color: var(--text-color);\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .controls-row button:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .play-btn {\n    width: 50px;\n    height: 50px;\n    background-color: var(--primary-color) !important;\n    font-size: 1.25rem;\n    border-radius: 50%;\n  }\n\n  .play-btn:hover {\n    background-color: var(--secondary-color) !important;\n  }\n\n  .rate-btn {\n    font-size: 0.875rem;\n    width: 40px;\n    height: 40px;\n  }\n\n  .skip-btn {\n    font-size: 0.875rem;\n  }\n\n  footer {\n    text-align: center;\n    font-size: 0.875rem;\n    opacity: 0.7;\n  }\n\n  footer a {\n    color: var(--accent-color);\n    text-decoration: none;\n  }\n\n  footer a:hover {\n    text-decoration: underline;\n  }\n\n  @media (max-width: 480px) {\n    .container {\n      padding: 0.75rem;\n    }\n    \n    .audio-player {\n      padding: 1rem;\n    }\n    \n    h1 {\n      font-size: 1.25rem;\n    }\n    \n    .play-btn {\n      width: 45px;\n      height: 45px;\n    }\n    \n    .rate-btn, .skip-btn {\n      width: 36px;\n      height: 36px;\n      font-size: 0.75rem;\n    }\n    \n    .settings-panel {\n      flex-direction: column;\n      align-items: stretch;\n    }\n  }\n`;",[],[185],{"_102":193,"_95":194,"_146":115,"_148":-5,"_149":135,"_150":195,"_152":117,"_104":196,"_99":151,"_154":188,"_156":197,"_157":27,"_158":-5,"_159":198,"_98":199},"3cf0aae4-23dd-11f0-aeb0-569c3dd06744","index.ts",9,["D",1745809356554],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\n\n// Available TTS voices\nconst voices = [\n  { id: \"alloy\", name: \"Alloy\" },\n  { id: \"echo\", name: \"Echo\" },\n  { id: \"fable\", name: \"Fable\" },\n  { id: \"onyx\", name: \"Onyx\" },\n  { id: \"nova\", name: \"Nova\" },\n  { id: \"shimmer\", name: \"Shimmer\" },\n];\n\nfunction AudioPlayer() {\n  const [text, setText] = useState(\"\");\n  const [isPlaying, setIsPlaying] = useState(false);\n  const [currentTime, setCurrentTime] = useState(0);\n  const [duration, setDuration] = useState(0);\n  const [playbackRate, setPlaybackRate] = useState(1.0);\n  const [audioSrc, setAudioSrc] = useState(\"\");\n  const [selectedVoice, setSelectedVoice] = useState(\"alloy\");\n  const [isLoading, setIsLoading] = useState(false);\n  const audioRef = useRef<HTMLAudioElement | null>(null);\n\n  useEffect(() => {\n    const audio = audioRef.current;\n    if (!audio) return;\n\n    const handleTimeUpdate = () => setCurrentTime(audio.currentTime);\n    const handleDurationChange = () => setDuration(audio.duration);\n    const handlePlayPause = () => setIsPlaying(!audio.paused);\n    const handleEnded = () => setIsPlaying(false);\n\n    audio.addEventListener('timeupdate', handleTimeUpdate);\n    audio.addEventListener('durationchange', handleDurationChange);\n    audio.addEventListener('play', handlePlayPause);\n    audio.addEventListener('pause', handlePlayPause);\n    audio.addEventListener('ended', handleEnded);\n\n    return () => {\n      audio.removeEventListener('timeupdate', handleTimeUpdate);\n      audio.removeEventListener('durationchange', handleDurationChange);\n      audio.removeEventListener('play', handlePlayPause);\n      audio.removeEventListener('pause', handlePlayPause);\n      audio.removeEventListener('ended', handleEnded);\n    };\n  }, []);\n\n  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    setText(e.target.value);\n  };\n\n  const generateSpeech = async () => {\n    if (!text.trim()) return;\n    setIsLoading(true);\n\n    try {\n      const response = await fetch('/generate-speech', {\n        method: 'POST',\n        headers: { 'Content-Type': 'application/json' },\n        body: JSON.stringify({ text, voice: selectedVoice }),\n      });\n\n      if (!response.ok) {\n        throw new Error('Failed to generate speech');\n      }\n\n      const blob = await response.blob();\n      const url = URL.createObjectURL(blob);\n      setAudioSrc(url);\n      \n      if (audioRef.current) {\n        audioRef.current.src = url;\n        audioRef.current.playbackRate = playbackRate;\n        audioRef.current.play();\n      }\n    } catch (error) {\n      console.error('Error generating speech:', error);\n    } finally {\n      setIsLoading(false);\n    }\n  };\n\n  const togglePlayPause = () => {\n    if (!audioRef.current || !audioSrc) return;\n    \n    if (isPlaying) {\n      audioRef.current.pause();\n    } else {\n      audioRef.current.play();\n    }\n  };\n\n  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (!audioRef.current) return;\n    const newTime = parseFloat(e.target.value);\n    audioRef.current.currentTime = newTime;\n    setCurrentTime(newTime);\n  };\n\n  const changePlaybackRate = () => {\n    if (!audioRef.current) return;\n    const newRate = playbackRate >= 2 ? 0.5 : playbackRate + 0.25;\n    setPlaybackRate(newRate);\n    audioRef.current.playbackRate = newRate;\n  };\n\n  const skipTime = (seconds: number) => {\n    if (!audioRef.current) return;\n    const newTime = audioRef.current.currentTime + seconds;\n    audioRef.current.currentTime = Math.max(0, Math.min(newTime, audioRef.current.duration || 0));\n  };\n\n  const formatTime = (time: number) => {\n    const minutes = Math.floor(time / 60);\n    const seconds = Math.floor(time % 60);\n    return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n  };\n\n  return (\n    <div className=\"audio-player\">\n      <h1>Text to Speech Player</h1>\n      \n      <div className=\"text-input-container\">\n        <textarea \n          value={text} \n          onChange={handleTextChange} \n          placeholder=\"Paste or type text here to listen to...\"\n          rows={5}\n          className=\"text-input\"\n        />\n        \n        <div className=\"voice-selector\">\n          <label htmlFor=\"voice-select\">Voice:</label>\n          <select \n            id=\"voice-select\" \n            value={selectedVoice} \n            onChange={(e) => setSelectedVoice(e.target.value)}\n            className=\"voice-select\"\n          >\n            {voices.map(voice => (\n              <option key={voice.id} value={voice.id}>{voice.name}</option>\n            ))}\n          </select>\n          <button \n            onClick={generateSpeech} \n            className=\"generate-btn\"\n            disabled={isLoading || !text.trim()}\n          >\n            {isLoading ? \"Generating...\" : \"Generate Speech\"}\n          </button>\n        </div>\n      </div>\n\n      <audio ref={audioRef} />\n\n      {audioSrc && (\n        <div className=\"player-controls\">\n          <div className=\"time-display\">\n            <span>{formatTime(currentTime)}</span>\n            <span>-{formatTime(Math.max(0, duration - currentTime))}</span>\n          </div>\n\n          <input\n            type=\"range\"\n            min=\"0\"\n            max={duration || 0}\n            value={currentTime}\n            onChange={handleSeek}\n            className=\"time-slider\"\n          />\n\n          <div className=\"controls-row\">\n            <button onClick={() => changePlaybackRate()} className=\"rate-btn\">\n              {playbackRate.toFixed(1)}x\n            </button>\n            <button onClick={() => skipTime(-10)} className=\"skip-btn\">\n              -10s\n            </button>\n            <button onClick={togglePlayPause} className=\"play-btn\">\n              {isPlaying ? \"❚❚\" : \"▶\"}\n            </button>\n            <button onClick={() => skipTime(10)} className=\"skip-btn\">\n              +10s\n            </button>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <div className=\"container\">\n      <AudioPlayer />\n      <footer>\n        <p>\n          <a href={import.meta.url.replace(\"esm.town\", \"val.town\")} target=\"_top\">\n            View Source\n          </a>\n        </p>\n      </footer>\n    </div>\n  );\n}\n\nfunction client() {\n  createRoot(document.getElementById(\"root\")).render(<App />);\n}\n\nif (typeof document !== \"undefined\") {\n  client();\n}\n\nexport default async function server(request: Request): Promise<Response> {\n  const url = new URL(request.url);\n\n  // Handle the API endpoint to generate speech from text\n  if (url.pathname === '/generate-speech' && request.method === 'POST') {\n    try {\n      const { text, voice } = await request.json();\n      \n      // Using the OpenAI standard library for TTS\n      const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n      const openai = new OpenAI();\n      \n      const mp3 = await openai.audio.speech.create({\n        model: \"tts-1\",\n        voice: voice || \"alloy\",\n        input: text,\n      });\n      \n      const buffer = await mp3.arrayBuffer();\n      \n      return new Response(buffer, {\n        headers: {\n          'Content-Type': 'audio/mpeg',\n          'Cache-Control': 'public, max-age=86400'\n        }\n      });\n    } catch (error) {\n      console.error('Error generating speech:', error);\n      return new Response(JSON.stringify({ error: 'Failed to generate speech' }), {\n        status: 500,\n        headers: { 'Content-Type': 'application/json' }\n      });\n    }\n  }\n\n  // Handle manifest.json for PWA\n  if (url.pathname === '/manifest.json') {\n    return new Response(JSON.stringify({\n      name: \"Simple Audio Player\",\n      short_name: \"Audio Player\",\n      start_url: \"/\",\n      display: \"standalone\",\n      background_color: \"#2a2a2a\",\n      theme_color: \"#4a4a9a\",\n      icons: [\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"192x192\",\n          type: \"image/png\"\n        },\n        {\n          src: \"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\",\n          sizes: \"512x512\",\n          type: \"image/png\"\n        }\n      ]\n    }), {\n      headers: { 'Content-Type': 'application/json' }\n    });\n  }\n\n  // Handle service worker for PWA\n  if (url.pathname === '/sw.js') {\n    return new Response(`\n      self.addEventListener('install', (event) => {\n        self.skipWaiting();\n        event.waitUntil(\n          caches.open('v1').then((cache) => {\n            return cache.addAll([\n              '/',\n              '/manifest.json'\n            ]);\n          })\n        );\n      });\n\n      self.addEventListener('activate', (event) => {\n        event.waitUntil(clients.claim());\n      });\n\n      self.addEventListener('fetch', (event) => {\n        event.respondWith(\n          caches.match(event.request).then((response) => {\n            return response || fetch(event.request);\n          })\n        );\n      });\n    `, {\n      headers: { 'Content-Type': 'application/javascript' }\n    });\n  }\n\n  // Main HTML\n  return new Response(\n    `<!DOCTYPE html>\n    <html lang=\"en\">\n      <head>\n        <meta charset=\"UTF-8\">\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n        <title>Simple Audio Player</title>\n        <meta name=\"description\" content=\"A simple text-to-speech player with podcast-style controls\">\n        <link rel=\"manifest\" href=\"/manifest.json\">\n        <meta name=\"theme-color\" content=\"#4a4a9a\">\n        <link rel=\"apple-touch-icon\" href=\"https://maxm-imggenurl.web.val.run/audio-player-icon-minimal-design\">\n        <style>${css}</style>\n      </head>\n      <body>\n        <div id=\"root\"></div>\n        <script src=\"https://esm.town/v/std/catch\"></script>\n        <script type=\"module\" src=\"${import.meta.url}\"></script>\n        <script>\n          if ('serviceWorker' in navigator) {\n            navigator.serviceWorker.register('/sw.js')\n              .then(registration => {\n                console.log('ServiceWorker registration successful');\n              })\n              .catch(err => {\n                console.log('ServiceWorker registration failed:', err);\n              });\n          }\n        </script>\n      </body>\n    </html>`,\n    {\n      headers: {\n        \"content-type\": \"text/html\",\n      },\n    }\n  );\n}\n\nconst css = `\n  :root {\n    --primary-color: #4a4a9a;\n    --secondary-color: #7272d8;\n    --text-color: #e0e0e0;\n    --background-color: #242424;\n    --card-bg-color: #333333;\n    --control-bg-color: #444444;\n    --accent-color: #5cbbf6;\n  }\n\n  * {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n  }\n\n  body {\n    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,\n      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n    background-color: var(--background-color);\n    color: var(--text-color);\n    line-height: 1.6;\n    overflow-x: hidden;\n  }\n\n  .container {\n    max-width: 600px;\n    margin: 0 auto;\n    padding: 1rem;\n  }\n\n  h1 {\n    font-size: 1.5rem;\n    text-align: center;\n    margin-bottom: 1.5rem;\n    color: var(--accent-color);\n  }\n\n  .audio-player {\n    background-color: var(--card-bg-color);\n    border-radius: 10px;\n    padding: 1.5rem;\n    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n    margin-bottom: 1.5rem;\n  }\n\n  .text-input-container {\n    margin-bottom: 1.5rem;\n  }\n\n  .text-input {\n    width: 100%;\n    padding: 12px;\n    border-radius: 6px;\n    border: 1px solid #555;\n    background-color: #222;\n    color: var(--text-color);\n    font-size: 1rem;\n    resize: vertical;\n    margin-bottom: 1rem;\n    transition: border-color 0.3s;\n  }\n\n  .text-input:focus {\n    outline: none;\n    border-color: var(--primary-color);\n  }\n\n  .voice-selector {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .voice-select {\n    flex: 1;\n    padding: 8px;\n    background-color: #222;\n    color: var(--text-color);\n    border: 1px solid #555;\n    border-radius: 4px;\n    cursor: pointer;\n  }\n\n  .generate-btn {\n    padding: 10px 15px;\n    background-color: var(--primary-color);\n    color: white;\n    border: none;\n    border-radius: 6px;\n    font-size: 1rem;\n    cursor: pointer;\n    transition: background-color 0.3s;\n  }\n\n  .generate-btn:hover {\n    background-color: var(--secondary-color);\n  }\n\n  .generate-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .player-controls {\n    background-color: var(--control-bg-color);\n    border-radius: 8px;\n    padding: 1rem;\n    margin-top: 1rem;\n  }\n\n  .time-display {\n    display: flex;\n    justify-content: space-between;\n    font-size: 0.875rem;\n    margin-bottom: 0.5rem;\n    color: #aaa;\n  }\n\n  .time-slider {\n    width: 100%;\n    height: 4px;\n    -webkit-appearance: none;\n    background: #555;\n    border-radius: 2px;\n    outline: none;\n    margin-bottom: 1rem;\n  }\n\n  .time-slider::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    width: 15px;\n    height: 15px;\n    background: var(--accent-color);\n    border-radius: 50%;\n    cursor: pointer;\n  }\n\n  .controls-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n\n  .controls-row button {\n    background-color: transparent;\n    border: none;\n    color: var(--text-color);\n    cursor: pointer;\n    padding: 0.5rem;\n    border-radius: 50%;\n    transition: background-color 0.2s;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .controls-row button:hover {\n    background-color: rgba(255, 255, 255, 0.1);\n  }\n\n  .play-btn {\n    width: 50px;\n    height: 50px;\n    background-color: var(--primary-color) !important;\n    font-size: 1.25rem;\n    border-radius: 50%;\n  }\n\n  .play-btn:hover {\n    background-color: var(--secondary-color) !important;\n  }\n\n  .rate-btn {\n    font-size: 0.875rem;\n    width: 40px;\n    height: 40px;\n  }\n\n  .skip-btn {\n    font-size: 0.875rem;\n  }\n\n  footer {\n    text-align: center;\n    font-size: 0.875rem;\n    opacity: 0.7;\n  }\n\n  footer a {\n    color: var(--accent-color);\n    text-decoration: none;\n  }\n\n  footer a:hover {\n    text-decoration: underline;\n  }\n\n  @media (max-width: 480px) {\n    .container {\n      padding: 0.75rem;\n    }\n    \n    .audio-player {\n      padding: 1rem;\n    }\n    \n    h1 {\n      font-size: 1.25rem;\n    }\n    \n    .voice-selector {\n      flex-direction: column;\n    }\n    \n    .play-btn {\n      width: 45px;\n      height: 45px;\n    }\n    \n    .rate-btn, .skip-btn {\n      width: 36px;\n      height: 36px;\n      font-size: 0.75rem;\n    }\n  }\n`;\n",[],[194],"files",[143,161,172,183,192],"counts",{"_204":31,"_205":178,"_206":31,"_207":31},"pulls","branches","forks","envVars","contents",[210,213,216,219],{"_102":144,"_95":145,"_146":147,"_148":-5,"_149":135,"_150":151,"_152":117,"_104":211,"_99":31,"_154":155,"_156":-5,"_157":27,"_158":-5,"_98":212},["D",1745808623463],[145],{"_102":173,"_95":174,"_146":175,"_148":-5,"_149":135,"_150":176,"_152":117,"_104":214,"_99":178,"_154":179,"_156":180,"_157":27,"_158":-5,"_98":215},["D",1745809366237],[174],{"_102":184,"_95":185,"_146":186,"_148":-5,"_149":135,"_150":119,"_152":117,"_104":217,"_99":178,"_154":188,"_156":189,"_157":27,"_158":-5,"_98":218},["D",1745809476326],[185],{"_102":193,"_95":194,"_146":115,"_148":-5,"_149":135,"_150":195,"_152":117,"_104":220,"_99":151,"_154":188,"_156":197,"_157":27,"_158":-5,"_98":221},["D",1745809356554],[194],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.search",{"_200":227,"_100":228,"_232":-5,"_93":94},[],{"_102":103,"_95":96,"_104":229,"_106":-5,"_107":27,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":119,"_120":31,"_121":122,"_123":122,"_124":125,"_126":125,"_127":125,"_128":122,"_129":27,"_21":230,"_133":231},["D",1745808544157],{"_93":94,"_131":132},{"_99":119,"_95":41,"_102":135,"_136":103,"_137":-5,"_138":-5,"_139":-5,"_140":-5},"query","routes/_app","actionData","errors"]
</article></body></html>