frontend/src/routes/+page.svelte

<script>
  import { Play, Download, Loader2, AlertCircle, ChevronDown, Copy, RefreshCw, Share, MoreHorizontal, Settings, Sliders, Pause, SkipBack, SkipForward } from 'lucide-svelte';
  
  let text = `Adam was playing outside when he heard a tiny meow! He looked around. Meow! There it was again! He tiptoed toward the bushes. Pushing the leaves aside, he gasped. A fluffy, orange kitten with big, curious eyes stared up at him. "Oh no! Where is your home?" Adam asked. The kitten just blinked and let out a tiny mew!

"Mama! I found a lost kitten!" Adam called as he carried the little furball inside. The kitten sniffed around, then jumped up—boing!—right onto the couch. "Oh!" Mama laughed. "Let's give it some milk while we find its owner." The kitten licked the milk happily and purred, prrrr! Adam giggled. "I think he likes it here!"

That evening, there was a knock at the door. A little girl stood there, eyes wide. "Have you seen my kitten, Biscuit?" she asked. Adam smiled and pointed. The kitten ran to her, mew mew mew! The girl hugged Biscuit tightly. "Thank you!" she said. As she left, Adam waved. "Goodbye, Biscuit!" he whispered. And in the quiet, he could still hear a happy prrrr!`;
  let selectedVoice = 'Novia';
  let selectedModel = 'Chatterbox';
  let mode = 'api'; // 'api' or 'local'
  let modelDropdownOpen = false;
  let isGenerating = false;
  let audioUrl = null;
  let speed = 1.0;
  let stability = 0.5;
  let similarity = 0.75;
  let styleExaggeration = 0;
  let showSettings = true;
  let isPlaying = false;
  let currentTime = 0;
  let duration = 0;
  let audioTitle = '';
  let audioElement = null;
  
  const models = [
    { id: 'chatterbox', name: 'Chatterbox', badge: 'recommended' },
    { id: 'kokoro', name: 'Kokoro', badge: 'faster but lower quality' },
  ];
  
  const voices = [
    { id: 'novia', name: 'Novia', description: 'Warm, conversational voice' },
    { id: 'sarah', name: 'Sarah', description: 'Clear, professional tone' },
    { id: 'alex', name: 'Alex', description: 'Friendly, approachable voice' },
    { id: 'emma', name: 'Emma', description: 'Calm, soothing delivery' },
  ];
  
  async function generateSpeech() {
    if (!text.trim()) return;
    
    isGenerating = true;
    audioUrl = null;
    currentTime = 0;
    isPlaying = false;
    
    // Create title from first part of text
    audioTitle = text.length > 30 ? text.substring(0, 30) + '...' : text;
    
    // Simulate API call
    setTimeout(() => {
      audioUrl = '/samples/harvard.wav';
      isGenerating = false;
    }, 2000);
  }
  
  function togglePlayPause() {
    if (audioElement) {
      if (isPlaying) {
        audioElement.pause();
      } else {
        audioElement.play();
      }
    }
  }
  
  function handleAudioLoad() {
    if (audioElement) {
      duration = audioElement.duration;
      // Auto-play when audio loads
      audioElement.play();
    }
  }
  
  function handleTimeUpdate() {
    if (audioElement) {
      currentTime = audioElement.currentTime;
    }
  }
  
  function handlePlay() {
    isPlaying = true;
  }
  
  function handlePause() {
    isPlaying = false;
  }
  
  function formatTime(seconds) {
    const mins = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${mins}:${secs.toString().padStart(2, '0')}`;
  }
  
  function downloadAudio() {
    if (audioUrl) {
      const a = document.createElement('a');
      a.href = audioUrl;
      a.download = 'speech.wav';
      a.click();
    }
  }
  
  function shareAudio() {
    // Share functionality would go here
    console.log('Share audio');
  }
  
  function handleKeyDown(event) {
    if (event.key === 'Enter' && !event.shiftKey) {
      event.preventDefault();
      generateSpeech();
    }
  }
  
  function handleClickOutside(event) {
    if (!event.target.closest('.model-dropdown')) {
      modelDropdownOpen = false;
    }
  }
  
  function clearText() {
    text = '';
    audioUrl = null;
  }
</script>

<div class="flex flex-col h-full" on:click={handleClickOutside}>
  <!-- Header -->
  <header class="border-b border-gray-200 bg-white">
    <div class="flex items-center justify-between px-4 py-2">
      <div class="flex items-center gap-3">
        <!-- Mode toggle -->
        <div class="flex items-center bg-gray-100 rounded-md p-0.5">
          <button
            class="px-3 py-1 text-sm font-medium rounded transition-colors {mode === 'api' ? 'bg-white shadow-sm' : 'text-gray-600'}"
            on:click={() => mode = 'api'}
          >
            API
          </button>
          <button
            class="px-3 py-1 text-sm font-medium rounded transition-colors {mode === 'local' ? 'bg-white shadow-sm' : 'text-gray-600'}"
            on:click={() => mode = 'local'}
          >
            Local
          </button>
        </div>
      </div>
      
      <div class="flex items-center gap-2">
        <button class="p-2 hover:bg-gray-50 rounded-md" title="Settings">
          <Settings size={18} class="text-gray-600" />
        </button>
        <button class="p-2 hover:bg-gray-50 rounded-md" title="Share">
          <Share size={18} class="text-gray-600" />
        </button>
        <button class="p-2 hover:bg-gray-50 rounded-md" title="More">
          <MoreHorizontal size={18} class="text-gray-600" />
        </button>
      </div>
    </div>
  </header>
  
  <!-- Main content area -->
  <div class="flex-1 flex">
    <!-- Main content area -->
    <div class="flex-1 flex flex-col p-6">
      {#if mode === 'local'}
      <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-2">
        <AlertCircle size={18} class="text-blue-600 mt-0.5 flex-shrink-0" />
        <div class="text-sm">
          <p class="font-medium text-blue-900">To run locally:</p>
          <code class="text-xs bg-blue-100 px-1.5 py-0.5 rounded">pip install hfstudio</code>
          <span class="text-blue-700"> and run </span>
          <code class="text-xs bg-blue-100 px-1.5 py-0.5 rounded">hfstudio</code>
          <span class="text-blue-700"> from your terminal</span>
        </div>
      </div>
      {/if}
      
      <!-- Text input area -->
      <div class="flex-1 pb-24">
        <textarea
          bind:value={text}
          class="w-full h-full p-6 bg-white resize-none border-0 focus:outline-none text-gray-900 text-base leading-relaxed"
          placeholder="Enter text to convert to speech..."
        />
        
        {#if text}
        <button 
          on:click={clearText}
          class="absolute top-4 right-6 text-sm text-gray-400 hover:text-gray-600"
        >
          Clear
        </button>
        {/if}
      </div>
      
      <!-- Fixed bottom generate button -->
      <div class="fixed bottom-0 left-56 right-80 p-4 bg-white border-t border-gray-200">
        <div class="flex items-center justify-between mb-3">
          <span class="text-sm text-gray-500">{text.length} / 5,000 characters</span>
        </div>
        <button
          on:click={generateSpeech}
          disabled={isGenerating || !text.trim()}
          class="w-full px-6 py-3 bg-gradient-to-r from-amber-400 to-orange-500 text-white rounded-lg font-medium hover:from-amber-500 hover:to-orange-600 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2 shadow-sm"
        >
          {#if isGenerating}
            <Loader2 size={20} class="animate-spin" />
            Generating...
          {:else}
            <Play size={20} />
            Generate speech
          {/if}
        </button>
      </div>
      
      <!-- Generated audio section -->
      {#if audioUrl}
      <div class="p-4 border border-gray-200 rounded-lg bg-white">
        <!-- Audio title and voice info -->
        <div class="flex items-center gap-3 mb-4">
          <div class="w-2 h-2 bg-green-500 rounded-full"></div>
          <div class="flex-1">
            <h3 class="font-medium text-gray-900 text-sm">{audioTitle}</h3>
            <p class="text-xs text-gray-500">{selectedVoice} • Created 1 second ago</p>
          </div>
          <!-- Mini action buttons -->
          <div class="flex items-center gap-2">
            <button 
              on:click={shareAudio}
              class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
            >
              <Share size={14} class="text-gray-600" />
              <span class="text-gray-700">Share</span>
            </button>
            <button 
              on:click={downloadAudio}
              class="flex items-center gap-1.5 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50 transition-colors"
            >
              <span class="text-gray-700">Download</span>
              <Download size={14} class="text-gray-600" />
            </button>
          </div>
        </div>
        
        <!-- Mini audio controls -->
        <div class="flex items-center gap-3 mb-4">
          <!-- Play/Pause button -->
          <button 
            on:click={togglePlayPause}
            class="w-8 h-8 bg-black rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"
          >
            {#if isPlaying}
              <div class="pause-filled text-white"></div>
            {:else}
              <Play size={14} class="text-white ml-0.5" />
            {/if}
          </button>
          
          <!-- Progress bar -->
          <div class="flex-1 flex items-center gap-2">
            <span class="text-xs text-gray-500 font-mono">{formatTime(currentTime)}</span>
            <div class="flex-1 h-1 bg-gray-200 rounded-full cursor-pointer">
              <div 
                class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all"
                style="width: {(currentTime / duration) * 100}%"
              ></div>
            </div>
            <span class="text-xs text-gray-500 font-mono">{formatTime(duration)}</span>
          </div>
        </div>
        
        <!-- Full audio player controls -->
        <div class="flex items-center gap-4 mb-4">
          <!-- Skip back button -->
          <button class="p-2 hover:bg-gray-100 rounded-full" title="Skip back">
            <SkipBack size={20} class="text-gray-600" />
          </button>
          
          <!-- Play/Pause button -->
          <button 
            on:click={togglePlayPause}
            class="w-12 h-12 bg-black rounded-full flex items-center justify-center hover:bg-gray-800 transition-colors"
          >
            {#if isPlaying}
              <div class="pause-filled text-white scale-150"></div>
            {:else}
              <Play size={20} class="text-white ml-0.5" />
            {/if}
          </button>
          
          <!-- Skip forward button -->
          <button class="p-2 hover:bg-gray-100 rounded-full" title="Skip forward">
            <SkipForward size={20} class="text-gray-600" />
          </button>
          
          <!-- Progress bar -->
          <div class="flex-1 flex items-center gap-3">
            <span class="text-xs text-gray-500 font-mono">{formatTime(currentTime)}</span>
            <div class="flex-1 h-1 bg-gray-200 rounded-full">
              <div 
                class="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all"
                style="width: {(currentTime / duration) * 100}%"
              ></div>
            </div>
            <span class="text-xs text-gray-500 font-mono">{formatTime(duration)}</span>
          </div>
          
          <!-- Action buttons -->
          <div class="flex items-center gap-2">
            <button 
              on:click={shareAudio}
              class="flex items-center gap-2 px-3 py-1.5 text-sm border border-gray-200 rounded-md hover:bg-gray-50"
            >
              <Share size={14} />
              Share
            </button>
            <button 
              on:click={downloadAudio}
              class="p-2 hover:bg-gray-100 rounded-md" 
              title="Download"
            >
              <Download size={16} class="text-gray-600" />
            </button>
            <button class="p-2 hover:bg-gray-100 rounded-md" title="More options">
              <MoreHorizontal size={16} class="text-gray-600" />
            </button>
          </div>
        </div>
        
        <!-- Hidden audio element -->
        {#if audioUrl}
        <audio 
          bind:this={audioElement}
          src={audioUrl}
          on:loadedmetadata={handleAudioLoad}
          on:timeupdate={handleTimeUpdate}
          on:play={handlePlay}
          on:pause={handlePause}
          style="display: none;"
        />
        {/if}
      </div>
      {/if}
    </div>
    
    <!-- Right panel -->
    <div class="w-80 border-l border-gray-200 bg-white p-4 overflow-y-auto">
      <!-- Model selector -->
      <div class="mb-6 relative model-dropdown">
        <h3 class="font-medium text-gray-900 mb-3">Model</h3>
        <button
          on:click={() => modelDropdownOpen = !modelDropdownOpen}
          class="w-full p-3 border border-gray-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent appearance-none bg-no-repeat bg-right pr-10 shadow-sm text-left flex items-center justify-between"
        >
          <span>
            {#each models as model}
              {#if model.name === selectedModel}
                {model.name}{#if model.badge}&nbsp;<span class="text-xs text-gray-500">({model.badge})</span>{/if}
              {/if}
            {/each}
          </span>
          <ChevronDown size={16} class="text-gray-500" />
        </button>
        
        {#if modelDropdownOpen}
        <div class="absolute top-full left-0 right-0 mt-1 bg-white border border-gray-200 rounded-lg shadow-lg z-10">
          {#each models as model}
          <button
            class="w-full px-3 py-2 text-left hover:bg-gray-50 transition-colors text-sm {model.name === selectedModel ? 'bg-gray-100' : ''}"
            on:click={() => {
              selectedModel = model.name;
              modelDropdownOpen = false;
            }}
          >
            {model.name}{#if model.badge}&nbsp;<span class="text-xs text-gray-500">({model.badge})</span>{/if}
          </button>
          {/each}
        </div>
        {/if}
      </div>
      
      <div class="mb-6">
        <div class="mb-3">
          <h3 class="font-medium text-gray-900">Voice</h3>
        </div>
        
        <div class="space-y-1">
          {#each voices as voice}
          <button
            class="w-full flex items-center justify-between p-2 rounded-md hover:bg-gray-50 transition-colors text-left
                   {voice.name === selectedVoice ? 'bg-gray-100' : ''}"
            on:click={() => selectedVoice = voice.name}
          >
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center text-white text-xs font-medium">
                {voice.name[0]}
              </div>
              <span class="text-sm font-medium">{voice.name}</span>
            </div>
            <div class="text-xs text-gray-500">
              {voice.description}
            </div>
          </button>
          {/each}
          
          <!-- Clone voice option -->
          <button
            class="w-full flex items-center justify-between p-2 rounded-md opacity-50 cursor-not-allowed text-left"
            disabled
          >
            <div class="flex items-center gap-2">
              <div class="w-8 h-8 bg-gray-400 rounded-full flex items-center justify-center text-white text-xs font-medium">
                +
              </div>
              <span class="text-sm font-medium text-gray-600">Clone your voice</span>
            </div>
            <div class="text-xs text-gray-400">
              (coming soon)
            </div>
          </button>
        </div>
      </div>
      
      <div class="space-y-4 pt-4 border-t border-gray-200">
        <!-- Speed control -->
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Speed</label>
            <span class="text-sm text-gray-500">{speed.toFixed(1)}x</span>
          </div>
          <input
            type="range"
            bind:value={speed}
            min="0.5"
            max="2"
            step="0.1"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
          <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0.5x</span>
            <span>2.0x</span>
          </div>
        </div>
        
        <!-- Stability control -->
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Stability</label>
            <span class="text-sm text-gray-500">{(stability * 100).toFixed(0)}%</span>
          </div>
          <input
            type="range"
            bind:value={stability}
            min="0"
            max="1"
            step="0.01"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
        
        <!-- Similarity control -->
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Similarity</label>
            <span class="text-sm text-gray-500">{(similarity * 100).toFixed(0)}%</span>
          </div>
          <input
            type="range"
            bind:value={similarity}
            min="0"
            max="1"
            step="0.01"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
        
        <!-- Style control -->
        <div>
          <div class="flex justify-between mb-1">
            <label class="text-sm font-medium text-gray-700">Style</label>
            <span class="text-sm text-gray-500">
              {styleExaggeration === 0 ? 'None' : 'Exaggerated'}
            </span>
          </div>
          <input
            type="range"
            bind:value={styleExaggeration}
            min="0"
            max="1"
            step="1"
            class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-hf"
          />
        </div>
      </div>
    </div>
  </div>
</div>