Sync from GitHub: b110eba71afe95ef3e43dd1d91c79c3e172e36f7

.gitattributes

@@ -7,3 +7,9 @@
 *.mp4 filter=lfs diff=lfs merge=lfs -text
 *.webm filter=lfs diff=lfs merge=lfs -text
 *.pdf filter=lfs diff=lfs merge=lfs -text
+hfstudio/static/assets/hf-logo.png filter=lfs diff=lfs merge=lfs -text
+hfstudio/static/assets/hf-studio-logo.png filter=lfs diff=lfs merge=lfs -text
+frontend/static/assets/hf-logo.png filter=lfs diff=lfs merge=lfs -text
+frontend/static/assets/hf-studio-logo.png filter=lfs diff=lfs merge=lfs -text
+hfstudio/static/samples/harvard.wav filter=lfs diff=lfs merge=lfs -text
+frontend/static/samples/harvard.wav filter=lfs diff=lfs merge=lfs -text

format.sh

@@ -0,0 +1,15 @@
+#!/bin/bash
+
+# format.sh - Format both backend and frontend code
+
+set -e
+
+echo "🔧 Formatting backend with ruff..."
+ruff format .
+
+echo "✨ Formatting frontend with prettier..."
+cd frontend
+npx prettier --write "src/**/*.{js,ts,svelte,html,css,json}" --config .prettierrc
+cd ..
+
+echo "✅ All formatting complete!"

frontend/.prettierrc

@@ -0,0 +1,15 @@
+{
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [
+    {
+      "files": "*.svelte",
+      "options": {
+        "parser": "svelte"
+      }
+    }
+  ]
+}

frontend/package-lock.json

@@ -18,6 +18,8 @@
         "@sveltejs/vite-plugin-svelte": "^3.0.0",
         "autoprefixer": "^10.4.16",
         "postcss": "^8.4.32",
+        "prettier": "^3.6.2",
+        "prettier-plugin-svelte": "^3.4.0",
         "svelte": "^4.2.7",
         "tailwindcss": "^3.3.0",
         "vite": "^5.0.3"
@@ -2112,6 +2114,33 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-svelte": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.4.0.tgz",
+      "integrity": "sha512-pn1ra/0mPObzqoIQn/vUTR3ZZI6UuZ0sHqMK5x2jMLGrs53h0sXhkVuDcrlssHwIMk7FYrMjHBPoUSyyEEDlBQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "prettier": "^3.0.0",
+        "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
+      }
+    },
     "node_modules/prismjs": {
       "version": "1.30.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",

frontend/package.json

@@ -13,6 +13,8 @@
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
     "svelte": "^4.2.7",
     "tailwindcss": "^3.3.0",
     "vite": "^5.0.3"

frontend/src/app.css

@@ -3,10 +3,10 @@
 @tailwind utilities;
 
 /* Prism.js Theme - Light with good contrast */
-code[class*="language-"],
-pre[class*="language-"] {
-  color: #393A34;
-  font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #393a34;
+  font-family: 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
   direction: ltr;
   text-align: left;
   white-space: pre;
@@ -18,7 +18,7 @@ pre[class*="language-"] {
   hyphens: none;
 }
 
-pre[class*="language-"] {
+pre[class*='language-'] {
   padding: 1rem;
   margin: 0;
   overflow: auto;
@@ -35,7 +35,7 @@ pre[class*="language-"] {
 }
 
 .token.punctuation {
-  color: #393A34;
+  color: #393a34;
 }
 
 .token.property,
@@ -88,13 +88,13 @@ pre[class*="language-"] {
 }
 .slider-hf::-webkit-slider-thumb {
   @apply appearance-none w-4 h-4 rounded-full cursor-pointer;
-  background: linear-gradient(45deg, #FFD21E, #FF9D00);
+  background: linear-gradient(45deg, #ffd21e, #ff9d00);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .slider-hf::-moz-range-thumb {
   @apply w-4 h-4 rounded-full cursor-pointer border-0;
-  background: linear-gradient(45deg, #FFD21E, #FF9D00);
+  background: linear-gradient(45deg, #ffd21e, #ff9d00);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -122,4 +122,4 @@ pre[class*="language-"] {
 
 .pause-filled::after {
   margin-left: 2px;
-}
+}

frontend/src/app.html

@@ -1,13 +1,13 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/assets/hf-studio-logo.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>HFStudio - Text to Speech</title>
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/assets/hf-studio-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>HFStudio - Text to Speech</title>
+    %sveltekit.head%
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
+</html>

frontend/src/routes/+layout.svelte

@@ -2,19 +2,21 @@
   import '../app.css';
   import { Home, Settings, History, Github, Menu } from 'lucide-svelte';
   import { onMount } from 'svelte';
-  
+
   let currentPage = 'tts';
   let sidebarOpen = true;
-  
+
   // Initialize from cache immediately to avoid "Checking..." flash
   const initToken = typeof window !== 'undefined' ? localStorage.getItem('hf_access_token') : null;
-  const initCachedToken = typeof window !== 'undefined' ? localStorage.getItem('hf_cached_token') : null;
-  const initCachedUserInfo = typeof window !== 'undefined' ? localStorage.getItem('hf_user_info') : null;
-  
+  const initCachedToken =
+    typeof window !== 'undefined' ? localStorage.getItem('hf_cached_token') : null;
+  const initCachedUserInfo =
+    typeof window !== 'undefined' ? localStorage.getItem('hf_user_info') : null;
+
   let isLoggedIn = false;
   let username = '';
   let isCheckingAuth = false; // Start as false by default
-  
+
   // Check if we have valid cached data
   let hasCachedData = false;
   if (initToken && initToken === initCachedToken && initCachedUserInfo) {
@@ -31,13 +33,13 @@
     // We have a token but no valid cache, need to check
     isCheckingAuth = true;
   }
-  
+
   let showTokenInput = false;
   let tokenInput = '';
   let tokenError = '';
   let isLocalEnvironment = false;
   let showSignInPopover = false;
-  
+
   onMount(() => {
     window.addEventListener('show-signin-popover', () => {
       showSignInPopover = true;
@@ -45,7 +47,7 @@
         showSignInPopover = false;
       }, 4000);
     });
-    
+
     // Only check if we don't already have valid cached info or need to verify
     if (!hasCachedData && initToken) {
       checkLocalTokenAvailability();
@@ -54,45 +56,45 @@
       // No token at all, check for local availability
       checkLocalTokenAvailability();
     }
-    
+
     document.addEventListener('visibilitychange', () => {
       if (!document.hidden) {
         checkLoginStatus();
       }
     });
-    
+
     window.addEventListener('storage', checkLoginStatus);
-    
+
     const interval = setInterval(checkLoginStatus, 1000);
-    
+
     return () => {
       window.removeEventListener('storage', checkLoginStatus);
       clearInterval(interval);
     };
   });
-  
+
   async function checkLocalTokenAvailability() {
     // Skip if we already have valid cached info
     if (isLoggedIn && hasCachedData) {
       return;
     }
-    
+
     isCheckingAuth = true;
-    
+
     try {
       const response = await fetch('/api/auth/local-token');
       const data = await response.json();
-      
+
       if (data.available) {
         isLocalEnvironment = true;
         localStorage.setItem('hf_access_token', data.token);
-        
-        if (data.user_info && data.user_info.name !== "Local User") {
+
+        if (data.user_info && data.user_info.name !== 'Local User') {
           isLoggedIn = true;
           username = data.user_info.name.split(' ')[0];
         } else {
           isLoggedIn = true;
-          username = "Local User";
+          username = 'Local User';
         }
       } else {
         isLocalEnvironment = false;
@@ -108,7 +110,7 @@
     const token = localStorage.getItem('hf_access_token');
     const cachedUserInfo = localStorage.getItem('hf_user_info');
     const cachedToken = localStorage.getItem('hf_cached_token');
-    
+
     if (token) {
       // If token hasn't changed and we have cached info, use it
       if (token === cachedToken && cachedUserInfo) {
@@ -133,23 +135,24 @@
       localStorage.removeItem('hf_cached_token');
     }
   }
-  
+
   async function fetchUserInfo(token) {
     isCheckingAuth = true;
-    
+
     try {
       const response = await fetch('https://huggingface.co/api/whoami-v2', {
         headers: {
-          'Authorization': `Bearer ${token}`
-        }
+          Authorization: `Bearer ${token}`,
+        },
       });
-      
+
       if (response.ok) {
         const userData = await response.json();
         isLoggedIn = true;
-        const fullName = userData.name || userData.fullname || userData.login || userData.username || 'User';
+        const fullName =
+          userData.name || userData.fullname || userData.login || userData.username || 'User';
         username = fullName.split(' ')[0];
-        
+
         // Cache the user info and token
         const userInfo = { username, fullName };
         localStorage.setItem('hf_user_info', JSON.stringify(userInfo));
@@ -185,7 +188,7 @@
       isCheckingAuth = false;
     }
   }
-  
+
   async function handleAuthAction() {
     if (isLoggedIn) {
       localStorage.removeItem('hf_access_token');
@@ -195,7 +198,10 @@
       isLoggedIn = false;
       username = '';
     } else {
-      if (window.location.hostname.includes('hf.space') || window.location.hostname.includes('huggingface.co')) {
+      if (
+        window.location.hostname.includes('hf.space') ||
+        window.location.hostname.includes('huggingface.co')
+      ) {
         try {
           const response = await fetch('/api/auth/oauth-config');
           const config = await response.json();
@@ -235,8 +241,8 @@
     try {
       const response = await fetch('https://huggingface.co/api/whoami-v2', {
         headers: {
-          'Authorization': `Bearer ${tokenInput.trim()}`
-        }
+          Authorization: `Bearer ${tokenInput.trim()}`,
+        },
       });
 
       if (response.ok) {
@@ -244,14 +250,15 @@
         const token = tokenInput.trim();
         localStorage.setItem('hf_access_token', token);
         isLoggedIn = true;
-        const fullName = userData.name || userData.fullname || userData.login || userData.username || 'User';
+        const fullName =
+          userData.name || userData.fullname || userData.login || userData.username || 'User';
         username = fullName.split(' ')[0];
-        
+
         // Cache the user info and token
         const userInfo = { username, fullName };
         localStorage.setItem('hf_user_info', JSON.stringify(userInfo));
         localStorage.setItem('hf_cached_token', token);
-        
+
         closeTokenInput();
       } else {
         tokenError = `Invalid token (${response.status}). Please check your token and try again.`;
@@ -264,28 +271,32 @@
 
 <div class="flex h-screen bg-white">
   <!-- Sidebar -->
-  <aside class="w-56 border-r border-gray-200 bg-white flex-shrink-0 flex flex-col h-full {sidebarOpen ? '' : 'hidden'}">
+  <aside
+    class="w-56 border-r border-gray-200 bg-white flex-shrink-0 flex flex-col h-full {sidebarOpen
+      ? ''
+      : 'hidden'}"
+  >
     <div class="p-4 border-b border-gray-200">
       <div class="flex items-center gap-3">
         <img src="/assets/hf-studio-logo.png" alt="HF Logo" class="w-8 h-8" />
-        <h1 class="text-xl font-semibold">HFStudio<sup class="text-xs text-gray-500 ml-1">BETA</sup></h1>
+        <h1 class="text-xl font-semibold">
+          HFStudio<sup class="text-xs text-gray-500 ml-1">BETA</sup>
+        </h1>
       </div>
     </div>
-    
-    <nav class="p-2 text-sm flex-1">      
-      <div class="mt-2 mb-1 px-2 text-xs font-medium text-gray-500 uppercase">
-        Tasks
-      </div>
-      
+
+    <nav class="p-2 text-sm flex-1">
+      <div class="mt-2 mb-1 px-2 text-xs font-medium text-gray-500 uppercase">Tasks</div>
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 transition-colors text-left
                {currentPage === 'tts' ? 'bg-gray-100' : ''}"
-        on:click={() => currentPage = 'tts'}
+        on:click={() => (currentPage = 'tts')}
       >
         <span>🎙️</span>
         <span>Text to Speech</span>
       </button>
-      
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"
         disabled
@@ -293,7 +304,7 @@
         <span>🎵</span>
         <span>Voice Cloning</span>
       </button>
-      
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"
         disabled
@@ -301,7 +312,7 @@
         <span>🎧</span>
         <span>Speech to Text</span>
       </button>
-      
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"
         disabled
@@ -309,7 +320,7 @@
         <span>🎼</span>
         <span>Sound Effects</span>
       </button>
-      
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"
         disabled
@@ -317,7 +328,7 @@
         <span>🎸</span>
         <span>Music Generation</span>
       </button>
-      
+
       <button
         class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"
         disabled
@@ -325,9 +336,8 @@
         <span>🔊</span>
         <span>Audio Enhancement</span>
       </button>
-      
     </nav>
-    
+
     <!-- Sign in with Hugging Face at bottom -->
     <div class="p-2 relative">
       <button
@@ -344,30 +354,39 @@
           <span>Sign In</span>
         {/if}
       </button>
-      
+
       <!-- Sign In Popover -->
       {#if showSignInPopover && !isLoggedIn}
-      <div class="absolute bottom-full left-0 right-0 mb-2 z-50">
-        <div class="bg-blue-600 text-white text-sm rounded-lg p-3 shadow-lg relative">
-          <div class="flex items-start gap-2">
-            <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
-            </svg>
-            <div>
-              <p class="font-medium">Sign in required</p>
-              <p class="text-blue-100 text-xs mt-1">You need to sign in to use HuggingFace Inference Providers for text-to-speech generation.</p>
+        <div class="absolute bottom-full left-0 right-0 mb-2 z-50">
+          <div class="bg-blue-600 text-white text-sm rounded-lg p-3 shadow-lg relative">
+            <div class="flex items-start gap-2">
+              <svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
+                <path
+                  fill-rule="evenodd"
+                  d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+              <div>
+                <p class="font-medium">Sign in required</p>
+                <p class="text-blue-100 text-xs mt-1">
+                  You need to sign in to use HuggingFace Inference Providers for text-to-speech
+                  generation.
+                </p>
+              </div>
+            </div>
+            <!-- Arrow pointing down -->
+            <div class="absolute top-full left-1/2 transform -translate-x-1/2">
+              <div
+                class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-blue-600"
+              ></div>
             </div>
-          </div>
-          <!-- Arrow pointing down -->
-          <div class="absolute top-full left-1/2 transform -translate-x-1/2">
-            <div class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-blue-600"></div>
           </div>
         </div>
-      </div>
       {/if}
     </div>
   </aside>
-  
+
   <!-- Main content -->
   <main class="flex-1 overflow-auto">
     <slot />
@@ -378,19 +397,24 @@
     <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
       <div class="bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-xl">
         <h2 class="text-xl font-semibold mb-4">Sign In with HuggingFace Token</h2>
-        
+
         <div class="mb-4 p-3 bg-blue-50 rounded-md text-sm">
           <p class="text-blue-800 mb-2">
             <strong>Manual Token Entry:</strong> Please enter your HuggingFace token.
           </p>
           <p class="text-blue-700">
-            1. Go to <a href="https://huggingface.co/settings/tokens" target="_blank" class="underline text-blue-600">HuggingFace Settings</a><br>
-            2. Create a new token with "Inference API" permissions<br>
+            1. Go to <a
+              href="https://huggingface.co/settings/tokens"
+              target="_blank"
+              class="underline text-blue-600">HuggingFace Settings</a
+            ><br />
+            2. Create a new token with "Inference API" permissions<br />
             3. Copy and paste it below
           </p>
           {#if isLocalEnvironment}
             <p class="text-blue-600 mt-2">
-              <strong>Tip:</strong> You can also run <code>huggingface-cli login</code> in your terminal to automatically use your local token.
+              <strong>Tip:</strong> You can also run <code>huggingface-cli login</code> in your terminal
+              to automatically use your local token.
             </p>
           {/if}
         </div>
@@ -429,4 +453,4 @@
       </div>
     </div>
   {/if}
-</div>
+</div>

frontend/src/routes/+page.svelte

@@ -1,10 +1,29 @@
 <script>
-  import { Play, Download, Loader2, AlertCircle, ChevronDown, Copy, RefreshCw, Share, MoreHorizontal, Settings, Sliders, Pause, SkipBack, SkipForward, Layout, Code, X, RotateCcw } from 'lucide-svelte';
+  import {
+    Play,
+    Download,
+    Loader2,
+    AlertCircle,
+    ChevronDown,
+    Copy,
+    RefreshCw,
+    Share,
+    MoreHorizontal,
+    Settings,
+    Sliders,
+    Pause,
+    SkipBack,
+    SkipForward,
+    Layout,
+    Code,
+    X,
+    RotateCcw,
+  } from 'lucide-svelte';
   import { onMount } from 'svelte';
   import Prism from 'prismjs';
   import 'prismjs/components/prism-python';
   import 'prismjs/components/prism-bash';
-  
+
   let text = `In a hole in the ground there lived a hobbit.`;
   let selectedVoice = 'Lily';
   let selectedModel = 'Chatterbox';
@@ -32,32 +51,52 @@
   let errorMessage = '';
   let errorDetails = '';
   let currentUsername = null;
-  
+
   const models = [
     { id: 'chatterbox', name: 'Chatterbox', badge: 'recommended' },
     { id: 'kokoro', name: 'Kokoro', badge: 'coming soon', disabled: true },
   ];
-  
+
   const voices = [
-    { id: 'lily', name: 'Lily', description: 'Warm, conversational voice from a female in her 30s', sample: '/voices/lily.mp3' },
-    { id: 'andrew', name: 'Andrew', description: 'Older British man who speaks clearly and kindly', sample: '/voices/andrew.mp3' },
-    { id: 'fairy', name: 'Fairy', description: 'High and airy female voice that bursts with excitement', sample: '/voices/fairy.mp3' },
-    { id: 'pirate', name: 'Pirate', description: 'Young pirate that speaks gruffly and passionately', sample: '/voices/pirate.mp3' },
+    {
+      id: 'lily',
+      name: 'Lily',
+      description: 'Warm, conversational voice from a female in her 30s',
+      sample: '/voices/lily.mp3',
+    },
+    {
+      id: 'andrew',
+      name: 'Andrew',
+      description: 'Older British man who speaks clearly and kindly',
+      sample: '/voices/andrew.mp3',
+    },
+    {
+      id: 'fairy',
+      name: 'Fairy',
+      description: 'High and airy female voice that bursts with excitement',
+      sample: '/voices/fairy.mp3',
+    },
+    {
+      id: 'pirate',
+      name: 'Pirate',
+      description: 'Young pirate that speaks gruffly and passionately',
+      sample: '/voices/pirate.mp3',
+    },
   ];
-  
+
   async function generateSpeech() {
     if (!text.trim()) return;
-    
+
     const accessToken = getAccessToken();
     if (!accessToken) {
       window.dispatchEvent(new CustomEvent('show-signin-popover'));
       return;
     }
-    
+
     isGenerating = true;
     audioUrl = null;
     currentTime = 0;
-    
+
     // Generate setup codes if not already present
     if (!setupCode) {
       setupCode = generateSetupCode();
@@ -65,9 +104,9 @@
     if (!importCode) {
       importCode = generateImportCode();
     }
-    
+
     const ttsCode = generateTTSCode();
-    
+
     if (viewMode === 'ui') {
       codeButtonFlash = true;
       setTimeout(() => {
@@ -75,12 +114,12 @@
       }, 2500);
     }
     isPlaying = false;
-    
+
     audioTitle = text.length > 30 ? text.substring(0, 30) + '...' : text;
-    
+
     try {
       const accessToken = getAccessToken();
-      
+
       const requestBody = {
         text: text,
         voice_id: selectedVoice.toLowerCase(),
@@ -89,36 +128,36 @@
         access_token: accessToken,
         parameters: {
           exaggeration: exaggeration,
-          temperature: temperature
-        }
+          temperature: temperature,
+        },
       };
-      
+
       const response = await fetch('/api/tts/generate', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify(requestBody)
+        body: JSON.stringify(requestBody),
       });
-      
+
       if (!response.ok) {
         const errorText = await response.text();
         throw new Error(`HTTP error! status: ${response.status}, body: ${errorText}`);
       }
-      
+
       const result = await response.json();
-      
+
       if (result.success && result.audio_url) {
         audioUrl = result.audio_url;
-        
+
         // Add to history with result
         addCodeToHistory(ttsCode, {
           type: 'audio',
           url: result.audio_url,
           title: audioTitle,
-          duration: result.duration
+          duration: result.duration,
         });
-        
+
         if (viewMode === 'ui') {
           codeButtonFlash = true;
           setTimeout(() => {
@@ -130,20 +169,22 @@
         showError('Generation Failed', errorMessage);
         audioUrl = null;
       }
-      
     } catch (error) {
-      showError('Network Error', 'Failed to connect to the server. Please check your connection and try again.');
+      showError(
+        'Network Error',
+        'Failed to connect to the server. Please check your connection and try again.'
+      );
       audioUrl = null;
     } finally {
       isGenerating = false;
     }
   }
-  
+
   function getAccessToken() {
     if (typeof window !== 'undefined' && window.gradio && window.gradio.auth_token) {
       return window.gradio.auth_token;
     }
-    
+
     const metaToken = document.querySelector('meta[name="hf-oauth-token"]');
     if (metaToken) {
       const token = metaToken.getAttribute('content');
@@ -151,29 +192,29 @@
         return token;
       }
     }
-    
+
     const possibleKeys = [
       'hf_access_token',
-      'hf_token', 
+      'hf_token',
       'huggingface_token',
       'oauth_token',
-      'access_token'
+      'access_token',
     ];
-    
+
     for (const key of possibleKeys) {
       const token = localStorage.getItem(key);
       if (token) {
         return token;
       }
     }
-    
+
     for (const key of possibleKeys) {
       const token = sessionStorage.getItem(key);
       if (token) {
         return token;
       }
     }
-    
+
     const cookies = document.cookie.split(';');
     for (const cookie of cookies) {
       const [name, value] = cookie.trim().split('=');
@@ -181,7 +222,7 @@
         return decodeURIComponent(value);
       }
     }
-    
+
     try {
       const authHeader = document.querySelector('script[data-hf-token]');
       if (authHeader) {
@@ -191,10 +232,10 @@
         }
       }
     } catch (e) {}
-    
+
     return null;
   }
-  
+
   function togglePlayPause() {
     if (audioElement) {
       if (isPlaying) {
@@ -204,33 +245,33 @@
       }
     }
   }
-  
+
   function handleAudioLoad() {
     if (audioElement) {
       duration = audioElement.duration;
     }
   }
-  
+
   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');
@@ -239,13 +280,12 @@
       a.click();
     }
   }
-  
-  function shareAudio() {
-  }
-  
+
+  function shareAudio() {}
+
   function playSampleVoice(voice, event) {
     event.stopPropagation();
-    
+
     if (playingSampleVoice === voice.name) {
       if (sampleAudioElement) {
         sampleAudioElement.pause();
@@ -257,9 +297,9 @@
         sampleAudioElement.pause();
       }
       playingSampleVoice = voice.name;
-      
+
       const sampleUrl = voice.sample || '/samples/harvard.wav';
-      
+
       if (!sampleAudioElement) {
         sampleAudioElement = new Audio(sampleUrl);
         sampleAudioElement.addEventListener('ended', () => {
@@ -268,20 +308,20 @@
       } else {
         sampleAudioElement.src = sampleUrl;
       }
-      
-      sampleAudioElement.play().catch(err => {
+
+      sampleAudioElement.play().catch((err) => {
         playingSampleVoice = null;
       });
     }
   }
-  
+
   function handleKeyDown(event) {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault();
       generateSpeech();
     }
   }
-  
+
   function handleClickOutside(event) {
     if (!event.target.closest('.model-dropdown')) {
       modelDropdownOpen = false;
@@ -292,13 +332,13 @@
     const entry = {
       id: Date.now() + Math.random(),
       code,
-      result
+      result,
     };
     codeHistory = [...codeHistory, entry];
     saveHistoryToStorage();
     return entry;
   }
-  
+
   function saveHistoryToStorage() {
     if (!currentUsername) return;
     const storageKey = `hfstudio_history_${currentUsername}`;
@@ -306,11 +346,11 @@
       username: currentUsername,
       setupCode,
       importCode,
-      history: codeHistory
+      history: codeHistory,
     };
     localStorage.setItem(storageKey, JSON.stringify(historyData));
   }
-  
+
   function loadHistoryFromStorage() {
     if (!currentUsername) return;
     const storageKey = `hfstudio_history_${currentUsername}`;
@@ -328,7 +368,7 @@
       }
     }
   }
-  
+
   function resetHistory() {
     codeHistory = [];
     setupCode = null;
@@ -348,7 +388,7 @@ hfstudio start ${selectedModel.toLowerCase()} --port 7861`;
 pip install huggingface-hub`;
     }
   }
-  
+
   function generateImportCode() {
     if (mode === 'local') {
       return `from huggingface_hub import InferenceClient
@@ -371,12 +411,12 @@ client = InferenceClient(
 
   function generateTTSCode() {
     const voiceUrls = {
-      lily: "https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/lily.mp3",
-      andrew: "https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/andrew.mp3",
-      fairy: "https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/fairy.mp3",
-      pirate: "https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/pirate.mp3"
+      lily: 'https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/lily.mp3',
+      andrew: 'https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/andrew.mp3',
+      fairy: 'https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/fairy.mp3',
+      pirate: 'https://huggingface.co/spaces/Abradi/hfstudio/resolve/main/voices/pirate.mp3',
     };
-    
+
     if (mode === 'local') {
       return `# Generate speech
 text = """${text}"""
@@ -464,9 +504,9 @@ print(f"✓ Audio saved to {output_filename}")
         fetchUserInfo(token);
       }
     };
-    
+
     checkUsername();
-    
+
     // Listen for auth changes
     window.addEventListener('storage', (e) => {
       if (e.key === 'hf_access_token') {
@@ -474,32 +514,32 @@ print(f"✓ Audio saved to {output_filename}")
       }
     });
   });
-  
+
   async function fetchUserInfo(token) {
     try {
       const response = await fetch('https://huggingface.co/api/whoami-v2', {
         headers: {
-          'Authorization': `Bearer ${token}`
-        }
+          Authorization: `Bearer ${token}`,
+        },
       });
-      
+
       if (response.ok) {
         const userData = await response.json();
-        currentUsername = userData.name || userData.fullname || userData.login || userData.username || 'User';
+        currentUsername =
+          userData.name || userData.fullname || userData.login || userData.username || 'User';
         loadHistoryFromStorage();
       }
     } catch (error) {
       console.error('Error fetching user info:', error);
     }
   }
-  
+
   // Update setup/import codes when mode changes
   $: if (mode) {
     setupCode = generateSetupCode();
     importCode = generateImportCode();
   }
-  
-  
+
   function toggleHistoryAudio(entry) {
     if (!entry.audioElement) {
       // Create audio element if it doesn't exist
@@ -509,13 +549,13 @@ print(f"✓ Audio saved to {output_filename}")
         codeHistory = [...codeHistory]; // Trigger reactivity
       });
     }
-    
+
     if (entry.isPlaying) {
       entry.audioElement.pause();
       entry.isPlaying = false;
     } else {
       // Pause any other playing audio
-      codeHistory.forEach(e => {
+      codeHistory.forEach((e) => {
         if (e !== entry && e.isPlaying && e.audioElement) {
           e.audioElement.pause();
           e.isPlaying = false;
@@ -526,7 +566,7 @@ print(f"✓ Audio saved to {output_filename}")
     }
     codeHistory = [...codeHistory]; // Trigger reactivity
   }
-  
+
   function downloadHistoryAudio(url, title) {
     const link = document.createElement('a');
     link.href = url;
@@ -535,14 +575,13 @@ print(f"✓ Audio saved to {output_filename}")
     link.click();
     document.body.removeChild(link);
   }
-  
+
   function formatDuration(seconds) {
     if (!seconds) return '0:00';
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   }
-  
 </script>
 
 <div class="flex flex-col h-full" on:click={handleClickOutside}>
@@ -553,596 +592,659 @@ print(f"✓ Audio saved to {output_filename}")
         <!-- View mode toggle -->
         <div class="flex items-center bg-gray-100 rounded-md p-0.5">
           <button
-            class="flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded transition-colors {viewMode === 'ui' ? 'bg-white shadow-sm' : 'text-gray-600'}"
-            on:click={() => viewMode = 'ui'}
+            class="flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded transition-colors {viewMode ===
+            'ui'
+              ? 'bg-white shadow-sm'
+              : 'text-gray-600'}"
+            on:click={() => (viewMode = 'ui')}
           >
             <Layout size={14} />
             UI
           </button>
           <button
-            class="flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded transition-colors relative overflow-hidden {viewMode === 'code' ? 'bg-white shadow-sm' : 'text-gray-600'} {codeButtonFlash ? 'code-flash' : ''}"
-            on:click={() => viewMode = 'code'}
+            class="flex items-center gap-1.5 px-3 py-1 text-sm font-medium rounded transition-colors relative overflow-hidden {viewMode ===
+            'code'
+              ? 'bg-white shadow-sm'
+              : 'text-gray-600'} {codeButtonFlash ? 'code-flash' : ''}"
+            on:click={() => (viewMode = 'code')}
           >
             <Code size={14} />
             Code Recorder
             {#if codeButtonFlash}
-            <span class="flash-sweep"></span>
+              <span class="flash-sweep"></span>
             {/if}
           </button>
         </div>
       </div>
     </div>
   </header>
-  
+
   <!-- Main content area -->
   {#if viewMode === 'ui'}
-  <div class="flex-1 flex">
-    <!-- Main content area -->
-    <div class="flex-1 flex flex-col p-6">
-      
-      <!-- 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="In a hole in the ground there lived a hobbit."
-        />
-        
-      </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 class="flex-1 flex">
+      <!-- Main content area -->
+      <div class="flex-1 flex flex-col p-6">
+        <!-- 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="In a hole in the ground there lived a hobbit."
+          />
         </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>
+
+        <!-- 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>
-        </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"
+          <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 isPlaying}
-              <div class="pause-filled text-white scale-150"></div>
+            {#if isGenerating}
+              <Loader2 size={20} class="animate-spin" />
+              Generating...
             {:else}
-              <Play size={20} class="text-white ml-0.5" />
+              <Play size={20} />
+              Generate speech
             {/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 -->
+
+        <!-- Generated audio section -->
         {#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 transition-colors text-sm {model.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-gray-50'} {model.name === selectedModel ? 'bg-gray-100' : ''}"
-            disabled={model.disabled}
-            on:click={() => {
-              if (!model.disabled) {
-                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}
-        
-        <!-- Pricing info -->
-        <div class="mt-2 text-xs text-gray-500">
-          Estimated $0.025 per 1000 characters • <a href="https://huggingface.co/settings/billing" target="_blank" class="text-amber-600 hover:text-amber-700 underline">Billing ⤴</a>
-        </div>
-      </div>
-      
-      <div class="mb-6">
-        <div class="mb-3">
-          <h3 class="font-medium text-gray-900">Voice</h3>
-        </div>
-        
-        <div class="space-y-2">
-          {#each voices as voice}
-          <button
-            class="w-full flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors text-left group border border-transparent
-                   {voice.name === selectedVoice ? 'bg-gray-100 border-gray-200' : ''}"
-            on:click={() => selectedVoice = voice.name}
-          >
-            <div class="flex items-center gap-3 flex-1 min-w-0">
-              <div class="w-10 h-10 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center text-white text-sm font-semibold flex-shrink-0">
-                {voice.name[0]}
+          <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>
-              <div class="flex-1 min-w-0">
-                <div class="text-sm font-medium text-gray-900 mb-1">{voice.name}</div>
-                <div class="text-xs text-gray-500 leading-relaxed">
-                  {voice.description}
-                </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>
-            <button
-              on:click={(e) => playSampleVoice(voice, e)}
-              class="p-2 rounded-full hover:bg-gray-200 transition-colors flex-shrink-0 ml-2"
-              title="Play sample"
-            >
-              {#if playingSampleVoice === voice.name}
-                <Pause size={16} class="text-gray-600" />
-              {:else}
-                <Play size={16} class="text-gray-600" />
-              {/if}
-            </button>
-          </button>
-          {/each}
-          
-          <!-- Clone voice option -->
-          <button
-            class="w-full flex items-center justify-between p-2 rounded-lg opacity-50 cursor-not-allowed text-left border border-transparent"
-            disabled
-          >
-            <div class="flex items-center gap-3 flex-1 min-w-0">
-              <div class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center text-white text-sm font-medium flex-shrink-0">
-                +
+
+            <!-- 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 class="flex-1 min-w-0">
-                <div class="text-sm font-medium text-gray-600 mb-1">Clone your voice</div>
-                <div class="text-xs text-gray-400">
-                  (coming soon)
+            </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>
-          </button>
-        </div>
-      </div>
-      
-      <div class="space-y-4 pt-4 border-t border-gray-200">
-        <!-- Exaggeration control -->
-        <div>
-          <div class="flex justify-between mb-1">
-            <label for="exaggeration-slider" class="text-sm font-medium text-gray-700">Exaggeration</label>
-            <span class="text-sm text-gray-500">{exaggeration.toFixed(2)}</span>
-          </div>
-          <input
-            id="exaggeration-slider"
-            type="range"
-            bind:value={exaggeration}
-            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 class="flex justify-between text-xs text-gray-400 mt-1">
-            <span>None</span>
-            <span>Exaggerated</span>
-          </div>
-        </div>
-        
-        <!-- Stability control -->
-        <div>
-          <div class="flex justify-between mb-1">
-            <label for="temperature-slider" class="text-sm font-medium text-gray-700">Stability</label>
-            <span class="text-sm text-gray-500">{temperature.toFixed(2)}</span>
-          </div>
-          <input
-            id="temperature-slider"
-            type="range"
-            bind:value={temperature}
-            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 class="flex justify-between text-xs text-gray-400 mt-1">
-            <span>More stable</span>
-            <span>More variable</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  {:else}
-  <!-- Code view -->
-  <div class="flex-1 bg-gray-50 overflow-y-auto">
-    <div class="max-w-4xl mx-auto p-8">
-      <!-- Header -->
-      <div class="mb-6">
-        <div>
-          <h2 class="text-2xl font-semibold text-gray-900">Integration Code</h2>
-          <p class="text-sm text-gray-600 mt-1">
-            {#if mode === 'local'}
-              Python code to reproduce your actions using a local HFStudio server
-            {:else}
-              Python code to reproduce your actions via the API
+
+            <!-- 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}
-          </p>
-        </div>
-        
-        <!-- Toggle and Copy All button row -->
-        <div class="flex items-center justify-between mt-4">
-          <!-- API/Local 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>
-          
-          {#if codeHistory.length > 0 || setupCode || importCode}
-          <div class="flex items-center gap-2">
-            <button
-              on:click={resetHistory}
-              class="flex items-center bg-red-50 hover:bg-red-100 rounded-md px-3 py-1.5 transition-colors"
-              title="Clear history"
+        {/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"
             >
-              <RotateCcw size={16} class="text-red-600" />
-              <span class="ml-2 text-sm font-medium text-red-600">Reset</span>
-            </button>
-            <button
-              on:click={copyAllCode}
-              class="flex items-center bg-gray-100 hover:bg-gray-200 rounded-md px-3 py-1.5 transition-colors"
+              {#each models as model}
+                <button
+                  class="w-full px-3 py-2 text-left transition-colors text-sm {model.disabled
+                    ? 'opacity-50 cursor-not-allowed'
+                    : 'hover:bg-gray-50'} {model.name === selectedModel ? 'bg-gray-100' : ''}"
+                  disabled={model.disabled}
+                  on:click={() => {
+                    if (!model.disabled) {
+                      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}
+
+          <!-- Pricing info -->
+          <div class="mt-2 text-xs text-gray-500">
+            Estimated $0.025 per 1000 characters • <a
+              href="https://huggingface.co/settings/billing"
+              target="_blank"
+              class="text-amber-600 hover:text-amber-700 underline">Billing ⤴</a
             >
-              <Copy size={16} class="text-gray-600" />
-              <span class="ml-2 text-sm font-medium text-gray-600">Copy All</span>
-            </button>
           </div>
-          {/if}
         </div>
-      </div>
 
-      <!-- Code sections -->
-      {#if !setupCode && !importCode && codeHistory.length === 0}
-      <div class="bg-white rounded-lg border border-gray-200 p-8 text-center">
-        <p class="text-gray-500">Start using the UI to see generated code here</p>
-        {#if currentUsername}
-        <p class="text-xs text-gray-400 mt-2">Logged in as: {currentUsername}</p>
-        {/if}
-      </div>
-      {:else}
-      <div class="space-y-6">
-        <!-- Setup Section -->
-        {#if setupCode}
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-          <div class="flex items-center justify-between px-4 py-2 bg-amber-50 border-b border-amber-200">
-            <div class="flex items-center gap-2">
-              <span class="text-sm font-medium text-amber-900">Setup (Terminal)</span>
-              <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded">Run once</span>
-            </div>
+        <div class="mb-6">
+          <div class="mb-3">
+            <h3 class="font-medium text-gray-900">Voice</h3>
+          </div>
+
+          <div class="space-y-2">
+            {#each voices as voice}
+              <button
+                class="w-full flex items-center justify-between p-2 rounded-lg hover:bg-gray-50 transition-colors text-left group border border-transparent
+                   {voice.name === selectedVoice ? 'bg-gray-100 border-gray-200' : ''}"
+                on:click={() => (selectedVoice = voice.name)}
+              >
+                <div class="flex items-center gap-3 flex-1 min-w-0">
+                  <div
+                    class="w-10 h-10 bg-gradient-to-br from-amber-400 to-orange-500 rounded-full flex items-center justify-center text-white text-sm font-semibold flex-shrink-0"
+                  >
+                    {voice.name[0]}
+                  </div>
+                  <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-gray-900 mb-1">{voice.name}</div>
+                    <div class="text-xs text-gray-500 leading-relaxed">
+                      {voice.description}
+                    </div>
+                  </div>
+                </div>
+                <button
+                  on:click={(e) => playSampleVoice(voice, e)}
+                  class="p-2 rounded-full hover:bg-gray-200 transition-colors flex-shrink-0 ml-2"
+                  title="Play sample"
+                >
+                  {#if playingSampleVoice === voice.name}
+                    <Pause size={16} class="text-gray-600" />
+                  {:else}
+                    <Play size={16} class="text-gray-600" />
+                  {/if}
+                </button>
+              </button>
+            {/each}
+
+            <!-- Clone voice option -->
             <button
-              on:click={() => copyToClipboard(setupCode)}
-              class="p-1.5 hover:bg-amber-100 rounded transition-colors"
-              title="Copy setup code"
+              class="w-full flex items-center justify-between p-2 rounded-lg opacity-50 cursor-not-allowed text-left border border-transparent"
+              disabled
             >
-              <Copy size={14} class="text-amber-600" />
+              <div class="flex items-center gap-3 flex-1 min-w-0">
+                <div
+                  class="w-10 h-10 bg-gray-400 rounded-full flex items-center justify-center text-white text-sm font-medium flex-shrink-0"
+                >
+                  +
+                </div>
+                <div class="flex-1 min-w-0">
+                  <div class="text-sm font-medium text-gray-600 mb-1">Clone your voice</div>
+                  <div class="text-xs text-gray-400">(coming soon)</div>
+                </div>
+              </div>
             </button>
           </div>
-          <div class="relative">
-            <pre class="p-4 overflow-x-auto bg-gray-50"><code class="language-bash text-sm">{@html Prism.highlight(setupCode, Prism.languages.bash, 'bash')}</code></pre>
-          </div>
         </div>
-        {/if}
-        
-        <!-- Import Section -->
-        {#if importCode}
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
-          <div class="flex items-center justify-between px-4 py-2 bg-blue-50 border-b border-blue-200">
-            <div class="flex items-center gap-2">
-              <span class="text-sm font-medium text-blue-900">Imports (Python)</span>
-              <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded">Run once</span>
+
+        <div class="space-y-4 pt-4 border-t border-gray-200">
+          <!-- Exaggeration control -->
+          <div>
+            <div class="flex justify-between mb-1">
+              <label for="exaggeration-slider" class="text-sm font-medium text-gray-700"
+                >Exaggeration</label
+              >
+              <span class="text-sm text-gray-500">{exaggeration.toFixed(2)}</span>
+            </div>
+            <input
+              id="exaggeration-slider"
+              type="range"
+              bind:value={exaggeration}
+              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 class="flex justify-between text-xs text-gray-400 mt-1">
+              <span>None</span>
+              <span>Exaggerated</span>
             </div>
-            <button
-              on:click={() => copyToClipboard(importCode)}
-              class="p-1.5 hover:bg-blue-100 rounded transition-colors"
-              title="Copy import code"
-            >
-              <Copy size={14} class="text-blue-600" />
-            </button>
           </div>
-          <div class="relative">
-            <pre class="p-4 overflow-x-auto bg-gray-50"><code class="language-python text-sm">{@html Prism.highlight(importCode, Prism.languages.python, 'python')}</code></pre>
+
+          <!-- Stability control -->
+          <div>
+            <div class="flex justify-between mb-1">
+              <label for="temperature-slider" class="text-sm font-medium text-gray-700"
+                >Stability</label
+              >
+              <span class="text-sm text-gray-500">{temperature.toFixed(2)}</span>
+            </div>
+            <input
+              id="temperature-slider"
+              type="range"
+              bind:value={temperature}
+              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 class="flex justify-between text-xs text-gray-400 mt-1">
+              <span>More stable</span>
+              <span>More variable</span>
+            </div>
           </div>
         </div>
-        {/if}
-        
-        <!-- History entries -->
-        {#each codeHistory as entry, i (entry.id)}
-        <div class="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
-          <!-- Code cell -->
-          <div class="border-b border-gray-200">
-            <div class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-100">
-              <span class="text-sm font-medium text-gray-700">Cell {i + 1}</span>
+      </div>
+    </div>
+  {:else}
+    <!-- Code view -->
+    <div class="flex-1 bg-gray-50 overflow-y-auto">
+      <div class="max-w-4xl mx-auto p-8">
+        <!-- Header -->
+        <div class="mb-6">
+          <div>
+            <h2 class="text-2xl font-semibold text-gray-900">Integration Code</h2>
+            <p class="text-sm text-gray-600 mt-1">
+              {#if mode === 'local'}
+                Python code to reproduce your actions using a local HFStudio server
+              {:else}
+                Python code to reproduce your actions via the API
+              {/if}
+            </p>
+          </div>
+
+          <!-- Toggle and Copy All button row -->
+          <div class="flex items-center justify-between mt-4">
+            <!-- API/Local Mode Toggle -->
+            <div class="flex items-center bg-gray-100 rounded-md p-0.5">
               <button
-                on:click={() => copyToClipboard(entry.code)}
-                class="p-1.5 hover:bg-gray-200 rounded transition-colors"
-                title="Copy code"
+                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')}
               >
-                <Copy size={14} class="text-gray-600" />
+                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 class="relative">
-              <pre class="p-4 overflow-x-auto bg-gray-50"><code class="language-python text-sm">{@html Prism.highlight(entry.code, Prism.languages.python, 'python')}</code></pre>
-            </div>
+
+            {#if codeHistory.length > 0 || setupCode || importCode}
+              <div class="flex items-center gap-2">
+                <button
+                  on:click={resetHistory}
+                  class="flex items-center bg-red-50 hover:bg-red-100 rounded-md px-3 py-1.5 transition-colors"
+                  title="Clear history"
+                >
+                  <RotateCcw size={16} class="text-red-600" />
+                  <span class="ml-2 text-sm font-medium text-red-600">Reset</span>
+                </button>
+                <button
+                  on:click={copyAllCode}
+                  class="flex items-center bg-gray-100 hover:bg-gray-200 rounded-md px-3 py-1.5 transition-colors"
+                >
+                  <Copy size={16} class="text-gray-600" />
+                  <span class="ml-2 text-sm font-medium text-gray-600">Copy All</span>
+                </button>
+              </div>
+            {/if}
+          </div>
+        </div>
+
+        <!-- Code sections -->
+        {#if !setupCode && !importCode && codeHistory.length === 0}
+          <div class="bg-white rounded-lg border border-gray-200 p-8 text-center">
+            <p class="text-gray-500">Start using the UI to see generated code here</p>
+            {#if currentUsername}
+              <p class="text-xs text-gray-400 mt-2">Logged in as: {currentUsername}</p>
+            {/if}
           </div>
-          
-          <!-- Result (audio player) -->
-          {#if entry.result && entry.result.type === 'audio'}
-          <div class="bg-gradient-to-b from-gray-50 to-white p-4">
-            <div class="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
-              <div class="flex items-center justify-between">
-                <div class="flex items-center gap-3 flex-1">
+        {:else}
+          <div class="space-y-6">
+            <!-- Setup Section -->
+            {#if setupCode}
+              <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                <div
+                  class="flex items-center justify-between px-4 py-2 bg-amber-50 border-b border-amber-200"
+                >
+                  <div class="flex items-center gap-2">
+                    <span class="text-sm font-medium text-amber-900">Setup (Terminal)</span>
+                    <span class="text-xs bg-amber-100 text-amber-700 px-2 py-0.5 rounded"
+                      >Run once</span
+                    >
+                  </div>
                   <button
-                    on:click={() => toggleHistoryAudio(entry)}
-                    class="w-10 h-10 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full flex items-center justify-center text-white hover:from-amber-600 hover:to-orange-600 transition-colors shadow-md"
+                    on:click={() => copyToClipboard(setupCode)}
+                    class="p-1.5 hover:bg-amber-100 rounded transition-colors"
+                    title="Copy setup code"
                   >
-                    {#if entry.isPlaying}
-                    <Pause size={18} />
-                    {:else}
-                    <Play size={18} class="ml-0.5" />
-                    {/if}
+                    <Copy size={14} class="text-amber-600" />
                   </button>
-                  <div class="flex-1">
-                    <div class="text-sm font-medium text-gray-900 truncate">{entry.result.title || 'Generated Audio'}</div>
-                    <div class="text-xs text-gray-500">Duration: {formatDuration(entry.result.duration || 0)}</div>
-                  </div>
                 </div>
-                <div class="flex items-center gap-1">
+                <div class="relative">
+                  <pre class="p-4 overflow-x-auto bg-gray-50"><code class="language-bash text-sm"
+                      >{@html Prism.highlight(setupCode, Prism.languages.bash, 'bash')}</code
+                    ></pre>
+                </div>
+              </div>
+            {/if}
+
+            <!-- Import Section -->
+            {#if importCode}
+              <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+                <div
+                  class="flex items-center justify-between px-4 py-2 bg-blue-50 border-b border-blue-200"
+                >
+                  <div class="flex items-center gap-2">
+                    <span class="text-sm font-medium text-blue-900">Imports (Python)</span>
+                    <span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded"
+                      >Run once</span
+                    >
+                  </div>
                   <button
-                    on:click={() => downloadHistoryAudio(entry.result.url, entry.result.title)}
-                    class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    title="Download"
+                    on:click={() => copyToClipboard(importCode)}
+                    class="p-1.5 hover:bg-blue-100 rounded transition-colors"
+                    title="Copy import code"
                   >
-                    <Download size={16} class="text-gray-600" />
+                    <Copy size={14} class="text-blue-600" />
                   </button>
-                  <button
-                    class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
-                    title="Share"
+                </div>
+                <div class="relative">
+                  <pre class="p-4 overflow-x-auto bg-gray-50"><code class="language-python text-sm"
+                      >{@html Prism.highlight(importCode, Prism.languages.python, 'python')}</code
+                    ></pre>
+                </div>
+              </div>
+            {/if}
+
+            <!-- History entries -->
+            {#each codeHistory as entry, i (entry.id)}
+              <div class="bg-white rounded-lg border border-gray-200 overflow-hidden shadow-sm">
+                <!-- Code cell -->
+                <div class="border-b border-gray-200">
+                  <div
+                    class="flex items-center justify-between px-4 py-2 bg-gray-50 border-b border-gray-100"
                   >
-                    <Share size={16} class="text-gray-600" />
-                  </button>
+                    <span class="text-sm font-medium text-gray-700">Cell {i + 1}</span>
+                    <button
+                      on:click={() => copyToClipboard(entry.code)}
+                      class="p-1.5 hover:bg-gray-200 rounded transition-colors"
+                      title="Copy code"
+                    >
+                      <Copy size={14} class="text-gray-600" />
+                    </button>
+                  </div>
+                  <div class="relative">
+                    <pre class="p-4 overflow-x-auto bg-gray-50"><code
+                        class="language-python text-sm"
+                        >{@html Prism.highlight(entry.code, Prism.languages.python, 'python')}</code
+                      ></pre>
+                  </div>
                 </div>
+
+                <!-- Result (audio player) -->
+                {#if entry.result && entry.result.type === 'audio'}
+                  <div class="bg-gradient-to-b from-gray-50 to-white p-4">
+                    <div class="bg-white rounded-lg border border-gray-200 p-4 shadow-sm">
+                      <div class="flex items-center justify-between">
+                        <div class="flex items-center gap-3 flex-1">
+                          <button
+                            on:click={() => toggleHistoryAudio(entry)}
+                            class="w-10 h-10 bg-gradient-to-r from-amber-500 to-orange-500 rounded-full flex items-center justify-center text-white hover:from-amber-600 hover:to-orange-600 transition-colors shadow-md"
+                          >
+                            {#if entry.isPlaying}
+                              <Pause size={18} />
+                            {:else}
+                              <Play size={18} class="ml-0.5" />
+                            {/if}
+                          </button>
+                          <div class="flex-1">
+                            <div class="text-sm font-medium text-gray-900 truncate">
+                              {entry.result.title || 'Generated Audio'}
+                            </div>
+                            <div class="text-xs text-gray-500">
+                              Duration: {formatDuration(entry.result.duration || 0)}
+                            </div>
+                          </div>
+                        </div>
+                        <div class="flex items-center gap-1">
+                          <button
+                            on:click={() =>
+                              downloadHistoryAudio(entry.result.url, entry.result.title)}
+                            class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="Download"
+                          >
+                            <Download size={16} class="text-gray-600" />
+                          </button>
+                          <button
+                            class="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+                            title="Share"
+                          >
+                            <Share size={16} class="text-gray-600" />
+                          </button>
+                        </div>
+                      </div>
+                      <audio
+                        bind:this={entry.audioElement}
+                        src={entry.result.url}
+                        on:ended={() => (entry.isPlaying = false)}
+                        class="hidden"
+                      />
+                    </div>
+                  </div>
+                {/if}
               </div>
-              <audio
-                bind:this={entry.audioElement}
-                src={entry.result.url}
-                on:ended={() => entry.isPlaying = false}
-                class="hidden"
-              />
-            </div>
+            {/each}
           </div>
-          {/if}
-        </div>
-        {/each}
+        {/if}
       </div>
-      {/if}
     </div>
-  </div>
   {/if}
-  
+
   <!-- Copy notification toast -->
   {#if copyNotification}
-  <div class="fixed bottom-4 right-4 px-4 py-2 bg-gray-900 text-white rounded-lg shadow-lg z-50 animate-fade-in">
-    {copyNotification}
-  </div>
+    <div
+      class="fixed bottom-4 right-4 px-4 py-2 bg-gray-900 text-white rounded-lg shadow-lg z-50 animate-fade-in"
+    >
+      {copyNotification}
+    </div>
   {/if}
 
   <!-- Error Modal -->
   {#if showErrorModal}
-  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-    <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
-      <!-- Header -->
-      <div class="flex items-center justify-between p-6 border-b border-gray-200 bg-red-50 flex-shrink-0">
-        <div class="flex items-center gap-3 min-w-0">
-          <div class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0">
-            <AlertCircle size={20} class="text-red-600" />
-          </div>
-          <div class="min-w-0">
-            <h3 class="text-lg font-semibold text-gray-900 truncate">{errorMessage}</h3>
-            <p class="text-sm text-gray-600">An error occurred while processing your request</p>
+    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
+        <!-- Header -->
+        <div
+          class="flex items-center justify-between p-6 border-b border-gray-200 bg-red-50 flex-shrink-0"
+        >
+          <div class="flex items-center gap-3 min-w-0">
+            <div
+              class="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center flex-shrink-0"
+            >
+              <AlertCircle size={20} class="text-red-600" />
+            </div>
+            <div class="min-w-0">
+              <h3 class="text-lg font-semibold text-gray-900 truncate">{errorMessage}</h3>
+              <p class="text-sm text-gray-600">An error occurred while processing your request</p>
+            </div>
           </div>
+          <button
+            on:click={closeErrorModal}
+            class="p-2 hover:bg-red-100 rounded-full transition-colors flex-shrink-0"
+            title="Close"
+          >
+            <X size={20} class="text-gray-500" />
+          </button>
         </div>
-        <button
-          on:click={closeErrorModal}
-          class="p-2 hover:bg-red-100 rounded-full transition-colors flex-shrink-0"
-          title="Close"
-        >
-          <X size={20} class="text-gray-500" />
-        </button>
-      </div>
 
-      <!-- Content -->
-      <div class="p-6 overflow-y-auto flex-1 min-h-0">
-        {#if errorDetails}
-        <div class="bg-gray-50 rounded-lg p-4 border">
-          <h4 class="text-sm font-medium text-gray-900 mb-2">Error Details:</h4>
-          <pre class="text-xs text-gray-700 whitespace-pre-wrap font-mono leading-relaxed break-words">{errorDetails}</pre>
+        <!-- Content -->
+        <div class="p-6 overflow-y-auto flex-1 min-h-0">
+          {#if errorDetails}
+            <div class="bg-gray-50 rounded-lg p-4 border">
+              <h4 class="text-sm font-medium text-gray-900 mb-2">Error Details:</h4>
+              <pre
+                class="text-xs text-gray-700 whitespace-pre-wrap font-mono leading-relaxed break-words">{errorDetails}</pre>
+            </div>
+          {/if}
         </div>
-        {/if}
-      </div>
 
-      <!-- Footer -->
-      <div class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0">
-        <button
-          on:click={copyErrorMessage}
-          class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors"
+        <!-- Footer -->
+        <div
+          class="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-50 flex-shrink-0"
         >
-          <Copy size={16} />
-          Copy Error
-        </button>
-        <button
-          on:click={closeErrorModal}
-          class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
-        >
-          Close
-        </button>
+          <button
+            on:click={copyErrorMessage}
+            class="flex items-center gap-2 px-4 py-2 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors"
+          >
+            <Copy size={16} />
+            Copy Error
+          </button>
+          <button
+            on:click={closeErrorModal}
+            class="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
+          >
+            Close
+          </button>
+        </div>
       </div>
     </div>
-  </div>
   {/if}
 </div>
 
 <style>
   @keyframes fade-in {
-    from { opacity: 0; transform: translateY(10px); }
-    to { opacity: 1; transform: translateY(0); }
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-  
+
   .animate-fade-in {
     animation: fade-in 0.3s ease-out;
   }
-  
+
   @keyframes sweep {
     0% {
       left: -100%;
@@ -1157,27 +1259,29 @@ print(f"✓ Audio saved to {output_filename}")
       left: 100%;
     }
   }
-  
+
   .flash-sweep {
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
-    background: linear-gradient(90deg, 
-      transparent 0%, 
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
       rgba(251, 191, 36, 0.5) 25%,
       rgba(249, 115, 22, 0.8) 50%,
       rgba(251, 191, 36, 0.5) 75%,
-      transparent 100%);
+      transparent 100%
+    );
     animation: sweep 2s ease-in-out;
     pointer-events: none;
   }
-  
+
   .code-flash {
     animation: pulse 0.5s ease-out;
   }
-  
+
   @keyframes pulse {
     0% {
       box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
@@ -1189,5 +1293,4 @@ print(f"✓ Audio saved to {output_filename}")
       box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
     }
   }
-  
-</style>
+</style>

hfstudio/__init__.py

@@ -4,14 +4,16 @@ import json
 import os
 from pathlib import Path
 
+
 def _get_version():
     """Read version from frontend/package.json"""
     # Get the project root (one level up from this package)
     package_root = Path(__file__).parent.parent
     package_json_path = package_root / "frontend" / "package.json"
-    
-    with open(package_json_path, 'r') as f:
+
+    with open(package_json_path, "r") as f:
         package_data = json.load(f)
-        return package_data['version']
+        return package_data["version"]
+
 
-__version__ = _get_version()
+__version__ = _get_version()

hfstudio/__main__.py

@@ -1,4 +1,4 @@
 from hfstudio.cli import main
 
 if __name__ == "__main__":
-    main()
+    main()

hfstudio/cli.py

@@ -13,6 +13,7 @@ from rich.table import Table
 console = Console()
 app = typer.Typer(help="HFStudio - Local and API-based Text-to-Speech Studio")
 
+
 def get_project_root() -> Path:
     """Find the project root directory containing models/"""
     current_dir = Path(__file__).parent
@@ -20,70 +21,76 @@ def get_project_root() -> Path:
         if (current_dir / "models").exists():
             return current_dir
         current_dir = current_dir.parent
-    
+
     # Fallback to current working directory
     if (Path.cwd() / "models").exists():
         return Path.cwd()
-    
+
     raise FileNotFoundError("Could not find models/ directory")
 
+
 def get_sample_audio_path() -> str:
     """Get path to sample audio file"""
     project_root = get_project_root()
     sample_path = project_root / "frontend" / "static" / "samples" / "harvard.wav"
     if sample_path.exists():
         return str(sample_path)
-    
+
     # Fallback paths
     fallback_paths = [
         project_root / "samples" / "harvard.wav",
-        Path.cwd() / "harvard.wav"
+        Path.cwd() / "harvard.wav",
     ]
-    
+
     for path in fallback_paths:
         if path.exists():
             return str(path)
-    
+
     raise FileNotFoundError("Could not find sample audio file (harvard.wav)")
 
+
 def load_model_specs():
     """Load model specifications from models/ directory"""
     project_root = get_project_root()
     models_dir = project_root / "models"
-    
+
     model_registry = {}
-    
+
     # Scan for model directories with spec.json files
     for model_dir in models_dir.iterdir():
         if model_dir.is_dir():
             spec_file = model_dir / "spec.json"
             local_script = model_dir / "local.py"
-            
+
             if spec_file.exists():
                 try:
-                    with open(spec_file, 'r') as f:
+                    with open(spec_file, "r") as f:
                         spec = json.load(f)
-                    
+
                     model_name = model_dir.name
                     model_registry[model_name] = {
                         "script": str(local_script) if local_script.exists() else None,
                         "spec": spec,
                         "description": spec.get("description", ""),
-                        "status": "Available" if local_script.exists() else "Spec Only"
+                        "status": "Available" if local_script.exists() else "Spec Only",
                     }
-                    
+
                     # Also register by full model_id if different
                     if spec.get("model_id") and spec["model_id"] != model_name:
                         model_registry[spec["model_id"]] = model_registry[model_name]
-                        
+
                 except json.JSONDecodeError:
-                    console.print(f"[yellow]Warning: Invalid JSON in {spec_file}[/yellow]")
-    
+                    console.print(
+                        f"[yellow]Warning: Invalid JSON in {spec_file}[/yellow]"
+                    )
+
     return model_registry
 
+
 # Load models dynamically
 MODEL_REGISTRY = load_model_specs()
 
+
 def run_model_script(model_name: str, port: int, host: str):
     """Run a model's UV script"""
     if model_name not in MODEL_REGISTRY:
@@ -91,39 +98,44 @@ def run_model_script(model_name: str, port: int, host: str):
         console.print(f"[red]Error: Unknown model '{model_name}'[/red]")
         console.print(f"[yellow]Available models: {available_models}[/yellow]")
         return False
-    
+
     model_info = MODEL_REGISTRY[model_name]
     script_path = model_info["script"]
-    
+
     if not script_path:
         console.print(f"[red]Error: Model '{model_name}' is not yet implemented[/red]")
         return False
-    
+
     project_root = get_project_root()
     full_script_path = project_root / script_path
-    
+
     if not full_script_path.exists():
         console.print(f"[red]Error: Model script not found: {full_script_path}[/red]")
         return False
-    
+
     try:
         sample_audio = get_sample_audio_path()
     except FileNotFoundError as e:
         console.print(f"[red]Error: {e}[/red]")
         return False
-    
+
     console.print(f"[green]Starting {model_name} on {host}:{port}[/green]")
     console.print(f"[dim]Script: {full_script_path}[/dim]")
     console.print(f"[dim]Sample audio: {sample_audio}[/dim]")
-    
+
     # Run the UV script
     cmd = [
-        "uv", "run", str(full_script_path),
-        "--port", str(port),
-        "--host", host,
-        "--sample-audio", sample_audio
+        "uv",
+        "run",
+        str(full_script_path),
+        "--port",
+        str(port),
+        "--host",
+        host,
+        "--sample-audio",
+        sample_audio,
     ]
-    
+
     try:
         subprocess.run(cmd, check=True)
     except subprocess.CalledProcessError as e:
@@ -132,24 +144,28 @@ def run_model_script(model_name: str, port: int, host: str):
     except KeyboardInterrupt:
         console.print("\n[yellow]Model server stopped[/yellow]")
         return True
-    
+
     return True
 
+
 @app.callback(invoke_without_command=True)
 def main(ctx: typer.Context):
     """Welcome to HFStudio CLI"""
     if ctx.invoked_subcommand is None:
-        console.print(Panel.fit(
-            "[bold yellow]🎙️ HFStudio CLI[/bold yellow]\n\n"
-            "[green]Available Commands:[/green]\n"
-            "• [cyan]hfstudio start[/cyan] <model>    - Start a TTS model locally\n"
-            "• [cyan]hfstudio list[/cyan]             - List available models\n"
-            "• [cyan]hfstudio dev-server[/cyan]       - Start development server\n"
-            "• [cyan]hfstudio --help[/cyan]           - Show detailed help\n\n"
-            "[dim]Example: hfstudio start resambleai/chatterbox --port 1234[/dim]",
-            title="🎙️ HFStudio",
-            border_style="yellow"
-        ))
+        console.print(
+            Panel.fit(
+                "[bold yellow]🎙️ HFStudio CLI[/bold yellow]\n\n"
+                "[green]Available Commands:[/green]\n"
+                "• [cyan]hfstudio start[/cyan] <model>    - Start a TTS model locally\n"
+                "• [cyan]hfstudio list[/cyan]             - List available models\n"
+                "• [cyan]hfstudio dev-server[/cyan]       - Start development server\n"
+                "• [cyan]hfstudio --help[/cyan]           - Show detailed help\n\n"
+                "[dim]Example: hfstudio start resambleai/chatterbox --port 1234[/dim]",
+                title="🎙️ HFStudio",
+                border_style="yellow",
+            )
+        )
+
 
 @app.command()
 def start(
@@ -162,6 +178,7 @@ def start(
     if not success:
         raise typer.Exit(1)
 
+
 @app.command()
 def list():
     """List available TTS models"""
@@ -169,12 +186,13 @@ def list():
     table.add_column("Model", style="cyan")
     table.add_column("Description", style="green")
     table.add_column("Status", style="yellow")
-    
+
     for model_name, model_info in MODEL_REGISTRY.items():
         table.add_row(model_name, model_info["description"], model_info["status"])
-    
+
     console.print(table)
 
+
 @app.command()
 def dev_server(
     port: int = typer.Option(7860, "--port", "-p", help="Port to run the server on"),
@@ -182,22 +200,25 @@ def dev_server(
     dev: bool = typer.Option(False, "--dev", help="Run in development mode"),
 ):
     """Start the HFStudio development server"""
-    
-    console.print(Panel.fit(
-        "[bold green]HFStudio Development Server[/bold green]\n"
-        f"Running on http://{host if host != '0.0.0.0' else 'localhost'}:{port}\n"
-        f"API docs: http://localhost:{port}/docs",
-        title="🎙️ HFStudio Dev Server",
-        border_style="green"
-    ))
-    
+
+    console.print(
+        Panel.fit(
+            "[bold green]HFStudio Development Server[/bold green]\n"
+            f"Running on http://{host if host != '0.0.0.0' else 'localhost'}:{port}\n"
+            f"API docs: http://localhost:{port}/docs",
+            title="🎙️ HFStudio Dev Server",
+            border_style="green",
+        )
+    )
+
     uvicorn.run(
         "hfstudio.server:app",
         host=host,
         port=port,
         reload=dev,
-        log_level="info" if not dev else "debug"
+        log_level="info" if not dev else "debug",
     )
 
+
 if __name__ == "__main__":
-    app()
+    app()

hfstudio/server.py

@@ -11,9 +11,10 @@ import json
 from pathlib import Path
 from huggingface_hub import InferenceClient, get_token, whoami
 
+
 class TTSRequest(BaseModel):
     model_config = {"protected_namespaces": ()}
-    
+
     text: str
     voice_id: str = "default"
     model_id: str = "coqui-tts"
@@ -21,6 +22,7 @@ class TTSRequest(BaseModel):
     mode: str = "api"
     access_token: Optional[str] = None
 
+
 class TTSResponse(BaseModel):
     audio_url: Optional[str] = None
     duration: Optional[float] = None
@@ -28,80 +30,86 @@ class TTSResponse(BaseModel):
     error: Optional[str] = None
     success: bool = True
 
+
 app = FastAPI(title="HFStudio API", version="0.1.0")
 
 static_dir = Path(__file__).parent / "static"
 models_dir = Path(__file__).parent.parent / "models"
 
+
 def load_model_spec(model_id: str) -> Optional[Dict[str, Any]]:
     """Load model specification from JSON file."""
     spec_path = models_dir / model_id / "spec.json"
     if spec_path.exists():
         try:
-            with open(spec_path, 'r') as f:
+            with open(spec_path, "r") as f:
                 return json.load(f)
         except (json.JSONDecodeError, IOError):
             return None
     return None
 
-def generate_tts_with_client(client: InferenceClient, request: TTSRequest, model_spec: Dict[str, Any]) -> TTSResponse:
+
+def generate_tts_with_client(
+    client: InferenceClient, request: TTSRequest, model_spec: Dict[str, Any]
+) -> TTSResponse:
     """Generate TTS using InferenceClient with model specifications."""
     try:
         # Build extra_body with parameters from spec
         extra_body = {}
-        
+
         if request.parameters and "api" in model_spec:
             api_params = model_spec["api"].get("parameters", {})
             for param_name, param_value in request.parameters.items():
                 if param_name in api_params:
                     extra_body[param_name] = param_value
-        
+
         # Add voice URL from spec
         voice_urls = model_spec.get("api", {}).get("voice_urls", {})
         if request.voice_id.lower() in voice_urls:
             extra_body["audio_url"] = voice_urls[request.voice_id.lower()]
-        
+
         # Generate audio
         audio_bytes = client.text_to_speech(
             request.text,
             extra_body=extra_body if extra_body else None,
         )
-        
+
         # Convert to base64 data URL
-        audio_base64 = base64.b64encode(audio_bytes).decode('utf-8')
+        audio_base64 = base64.b64encode(audio_bytes).decode("utf-8")
         audio_url = f"data:audio/wav;base64,{audio_base64}"
-        
+
         # Estimate duration (simple heuristic)
         duration = len(request.text) * 0.05
-        
-        return TTSResponse(
-            audio_url=audio_url,
-            duration=duration,
-            format="wav"
-        )
+
+        return TTSResponse(audio_url=audio_url, duration=duration, format="wav")
     except Exception as e:
         error_str = str(e)
-        
+
         if "403 Forbidden" in error_str and "permissions" in error_str:
             return TTSResponse(
                 success=False,
-                error="Your HuggingFace token doesn't have permission to use Inference Providers. Please create a new token with 'Inference API' permissions at https://huggingface.co/settings/tokens"
+                error="Your HuggingFace token doesn't have permission to use Inference Providers. Please create a new token with 'Inference API' permissions at https://huggingface.co/settings/tokens",
             )
         elif "authentication" in error_str.lower():
             return TTSResponse(
                 success=False,
-                error="Authentication failed. Please check your HuggingFace token or log in again."
+                error="Authentication failed. Please check your HuggingFace token or log in again.",
             )
         else:
             return TTSResponse(
-                success=False,
-                error=f"TTS generation error: {error_str}"
+                success=False, error=f"TTS generation error: {error_str}"
             )
+
+
 if static_dir.exists():
     app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
     app.mount("/_app", StaticFiles(directory=str(static_dir / "_app")), name="app")
-    app.mount("/assets", StaticFiles(directory=str(static_dir / "assets")), name="assets")
-    app.mount("/samples", StaticFiles(directory=str(static_dir / "samples")), name="samples")
+    app.mount(
+        "/assets", StaticFiles(directory=str(static_dir / "assets")), name="assets"
+    )
+    app.mount(
+        "/samples", StaticFiles(directory=str(static_dir / "samples")), name="samples"
+    )
 
 app.add_middleware(
     CORSMiddleware,
@@ -111,26 +119,31 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
+
 class Voice(BaseModel):
     id: str
     name: str
     preview_url: Optional[str] = None
     supported_models: list[str] = []
 
+
 class Model(BaseModel):
     id: str
     name: str
     type: str
     status: str
 
+
 class OAuthTokenRequest(BaseModel):
     code: str
 
+
 class OAuthTokenResponse(BaseModel):
     access_token: str
     token_type: str
     scope: str
 
+
 @app.get("/")
 async def root():
     index_path = static_dir / "index.html"
@@ -139,47 +152,50 @@ async def root():
     else:
         return {"message": "HFStudio API is running"}
 
+
 @app.get("/api/status")
 async def get_status():
-    return {
-        "mode": "api",
-        "local_available": False,
-        "api_configured": True
-    }
+    return {"mode": "api", "local_available": False, "api_configured": True}
+
 
 @app.get("/api/auth/oauth-config")
 async def get_oauth_config():
-    scopes = os.getenv("OAUTH_SCOPES", "read-repos write-repos manage-repos inference-api")
-    
+    scopes = os.getenv(
+        "OAUTH_SCOPES", "read-repos write-repos manage-repos inference-api"
+    )
+
     return {
-        "client_id": os.getenv("OAUTH_CLIENT_ID", "cdf32a17-e40f-4a84-b683-f66aa1105793"),
+        "client_id": os.getenv(
+            "OAUTH_CLIENT_ID", "cdf32a17-e40f-4a84-b683-f66aa1105793"
+        ),
         "scopes": scopes,
-        "is_spaces": bool(os.getenv("SPACE_HOST"))
+        "is_spaces": bool(os.getenv("SPACE_HOST")),
     }
 
+
 @app.get("/api/auth/local-token")
 async def get_local_token():
     try:
         if os.getenv("SPACE_HOST"):
             return {"available": False, "reason": "running_on_spaces"}
-        
+
         token = get_token()
         if not token:
             return {"available": False, "reason": "no_local_token"}
-        
+
         try:
             user_info = whoami(token=token)
             if user_info.get("type") != "user":
                 return {"available": False, "reason": "invalid_token_type"}
-            
+
             return {
                 "available": True,
                 "token": token,
                 "user_info": {
                     "name": user_info.get("name"),
                     "fullname": user_info.get("fullname"),
-                    "avatarUrl": user_info.get("avatarUrl")
-                }
+                    "avatarUrl": user_info.get("avatarUrl"),
+                },
             }
         except Exception as api_error:
             if "429" in str(api_error) or "rate limit" in str(api_error).lower():
@@ -189,20 +205,24 @@ async def get_local_token():
                     "user_info": {
                         "name": "Local User",
                         "fullname": "Local User",
-                        "avatarUrl": None
+                        "avatarUrl": None,
                     },
-                    "warning": "Token validation skipped due to rate limiting"
+                    "warning": "Token validation skipped due to rate limiting",
                 }
             else:
-                return {"available": False, "reason": f"token_validation_error: {str(api_error)}"}
-        
+                return {
+                    "available": False,
+                    "reason": f"token_validation_error: {str(api_error)}",
+                }
+
     except Exception as e:
         return {"available": False, "reason": f"error: {str(e)}"}
 
+
 @app.get("/api/voices")
 async def get_voices():
     voices = []
-    
+
     # Load voices from all model specifications
     for model_dir in models_dir.iterdir():
         if model_dir.is_dir():
@@ -212,17 +232,20 @@ async def get_voices():
                     voice = Voice(
                         id=voice_spec["id"],
                         name=voice_spec["name"],
-                        preview_url=model_spec.get("api", {}).get("voice_urls", {}).get(voice_spec["id"]),
-                        supported_models=[model_dir.name]
+                        preview_url=model_spec.get("api", {})
+                        .get("voice_urls", {})
+                        .get(voice_spec["id"]),
+                        supported_models=[model_dir.name],
                     )
                     voices.append(voice)
-    
+
     return {"voices": voices}
 
+
 @app.get("/api/models")
 async def get_models():
     models = []
-    
+
     # Load models from specifications
     for model_dir in models_dir.iterdir():
         if model_dir.is_dir():
@@ -230,17 +253,18 @@ async def get_models():
             if model_spec:
                 model_type = "api" if "api" in model_spec else "local"
                 status = "available" if model_type == "api" else "downloadable"
-                
+
                 model = Model(
                     id=model_dir.name,
                     name=model_spec.get("name", model_dir.name),
                     type=model_type,
-                    status=status
+                    status=status,
                 )
                 models.append(model)
-    
+
     return {"models": models}
 
+
 @app.post("/api/tts/generate")
 async def generate_tts(request: TTSRequest):
     try:
@@ -249,19 +273,20 @@ async def generate_tts(request: TTSRequest):
         if not model_spec:
             return TTSResponse(
                 success=False,
-                error=f"Model specification not found for {request.model_id}"
+                error=f"Model specification not found for {request.model_id}",
             )
-        
+
         # Create client based on mode
         if request.mode == "api":
             if not request.access_token:
                 return TTSResponse(
-                    success=False,
-                    error="Please log in to HuggingFace to use the API."
+                    success=False, error="Please log in to HuggingFace to use the API."
                 )
-            
+
             # Get model endpoint from spec
-            endpoint_model = model_spec.get("api", {}).get("endpoint_model", request.model_id)
+            endpoint_model = model_spec.get("api", {}).get(
+                "endpoint_model", request.model_id
+            )
             client = InferenceClient(
                 api_key=request.access_token,
                 model=endpoint_model,
@@ -273,30 +298,32 @@ async def generate_tts(request: TTSRequest):
             client = InferenceClient(base_url=f"http://localhost:{port}/v1/")
         else:
             return TTSResponse(
-                success=False,
-                error="Invalid mode. Use 'api' or 'local'."
+                success=False, error="Invalid mode. Use 'api' or 'local'."
             )
-        
+
         # Generate TTS using the unified helper function
         result = generate_tts_with_client(client, request, model_spec)
-        
+
         # Add specific error handling for local mode
         if not result.success and request.mode == "local":
             result.error = f"Local server error: {result.error}. Make sure to run 'hfstudio start {request.model_id}' first."
-        
+
         return result
-        
+
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
+
 @app.post("/api/auth/token")
 async def exchange_oauth_token(request: OAuthTokenRequest, http_request: Request):
     try:
         token_url = "https://huggingface.co/oauth/token"
-        
+
         client_id = os.getenv("OAUTH_CLIENT_ID", "cdf32a17-e40f-4a84-b683-f66aa1105793")
-        client_secret = os.getenv("OAUTH_CLIENT_SECRET", "f590cb2d-6eac-4cef-a0cb-d0116825295c")
-        
+        client_secret = os.getenv(
+            "OAUTH_CLIENT_SECRET", "f590cb2d-6eac-4cef-a0cb-d0116825295c"
+        )
+
         if os.getenv("SPACE_HOST"):
             space_host = os.getenv("SPACE_HOST").split(",")[0]
             redirect_uri = f"https://{space_host}/auth/callback"
@@ -304,11 +331,12 @@ async def exchange_oauth_token(request: OAuthTokenRequest, http_request: Request
             referer = http_request.headers.get("referer", "")
             if referer:
                 from urllib.parse import urlparse
+
                 parsed = urlparse(referer)
                 redirect_uri = f"{parsed.scheme}://{parsed.netloc}/auth/callback"
             else:
                 redirect_uri = "http://localhost:7860/auth/callback"
-        
+
         token_data = {
             "client_id": client_id,
             "client_secret": client_secret,
@@ -316,37 +344,36 @@ async def exchange_oauth_token(request: OAuthTokenRequest, http_request: Request
             "grant_type": "authorization_code",
             "redirect_uri": redirect_uri,
         }
-        
+
         async with httpx.AsyncClient() as client:
             response = await client.post(
-                token_url,
-                data=token_data,
-                headers={"Accept": "application/json"}
+                token_url, data=token_data, headers={"Accept": "application/json"}
             )
-            
+
             if response.status_code != 200:
                 raise HTTPException(
-                    status_code=400, 
-                    detail=f"Token exchange failed: {response.text}"
+                    status_code=400, detail=f"Token exchange failed: {response.text}"
                 )
-            
+
             token_response = response.json()
-            
+
             return OAuthTokenResponse(
                 access_token=token_response["access_token"],
                 token_type=token_response.get("token_type", "Bearer"),
-                scope=token_response.get("scope", "")
+                scope=token_response.get("scope", ""),
             )
-            
+
     except httpx.RequestError as e:
         raise HTTPException(status_code=500, detail=f"Network error: {str(e)}")
     except Exception as e:
         raise HTTPException(status_code=500, detail=str(e))
 
+
 @app.get("/auth/callback")
 async def oauth_callback(code: str = None, state: str = None, request: Request = None):
     if not code:
-        return HTMLResponse("""
+        return HTMLResponse(
+            """
         <html>
             <head><title>OAuth Error</title></head>
             <body>
@@ -355,20 +382,24 @@ async def oauth_callback(code: str = None, state: str = None, request: Request =
                 <script>window.close();</script>
             </body>
         </html>
-        """, status_code=400)
-    
+        """,
+            status_code=400,
+        )
+
     try:
         token_url = "https://huggingface.co/oauth/token"
-        
+
         client_id = os.getenv("OAUTH_CLIENT_ID", "cdf32a17-e40f-4a84-b683-f66aa1105793")
-        client_secret = os.getenv("OAUTH_CLIENT_SECRET", "f590cb2d-6eac-4cef-a0cb-d0116825295c")
-        
+        client_secret = os.getenv(
+            "OAUTH_CLIENT_SECRET", "f590cb2d-6eac-4cef-a0cb-d0116825295c"
+        )
+
         if os.getenv("SPACE_HOST"):
             space_host = os.getenv("SPACE_HOST").split(",")[0]
             redirect_uri = f"https://{space_host}/auth/callback"
         else:
             redirect_uri = "http://localhost:7860/auth/callback"
-        
+
         token_data = {
             "client_id": client_id,
             "client_secret": client_secret,
@@ -376,18 +407,16 @@ async def oauth_callback(code: str = None, state: str = None, request: Request =
             "grant_type": "authorization_code",
             "redirect_uri": redirect_uri,
         }
-        
+
         async with httpx.AsyncClient() as client:
             response = await client.post(
-                token_url,
-                data=token_data,
-                headers={"Accept": "application/json"}
+                token_url, data=token_data, headers={"Accept": "application/json"}
             )
-            
+
             if response.status_code == 200:
                 token_response = response.json()
                 access_token = token_response["access_token"]
-                
+
                 return HTMLResponse(f"""
                 <html>
                     <head><title>OAuth Success</title></head>
@@ -402,7 +431,8 @@ async def oauth_callback(code: str = None, state: str = None, request: Request =
                 </html>
                 """)
             else:
-                return HTMLResponse(f"""
+                return HTMLResponse(
+                    f"""
                 <html>
                     <head><title>OAuth Error</title></head>
                     <body>
@@ -411,10 +441,13 @@ async def oauth_callback(code: str = None, state: str = None, request: Request =
                         <a href="/">Return to app</a>
                     </body>
                 </html>
-                """, status_code=400)
-                
+                """,
+                    status_code=400,
+                )
+
     except Exception as e:
-        return HTMLResponse(f"""
+        return HTMLResponse(
+            f"""
         <html>
             <head><title>OAuth Error</title></head>
             <body>
@@ -423,13 +456,20 @@ async def oauth_callback(code: str = None, state: str = None, request: Request =
                 <a href="/">Return to app</a>
             </body>
         </html>
-        """, status_code=500)
+        """,
+            status_code=500,
+        )
+
 
 @app.get("/{path:path}")
 async def serve_spa(path: str):
-    if path.startswith("api/") or path.startswith("docs") or path.startswith("openapi.json"):
+    if (
+        path.startswith("api/")
+        or path.startswith("docs")
+        or path.startswith("openapi.json")
+    ):
         raise HTTPException(status_code=404, detail="Not found")
-    
+
     index_path = static_dir / "index.html"
     if index_path.exists():
         return FileResponse(str(index_path), media_type="text/html")
@@ -445,6 +485,8 @@ async def serve_spa(path: str):
         </html>
         """)
 
+
 if __name__ == "__main__":
     import uvicorn
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+
+    uvicorn.run(app, host="0.0.0.0", port=7860)

hfstudio/static/_app/immutable/assets/2.D7LovqyU.css

@@ -0,0 +1 @@
+@keyframes svelte-1sw3914-fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in.svelte-1sw3914{animation:svelte-1sw3914-fade-in .3s ease-out}@keyframes svelte-1sw3914-sweep{0%{left:-100%}20%{left:-100%}80%{left:100%}to{left:100%}}.flash-sweep.svelte-1sw3914{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(251,191,36,.5) 25%,rgba(249,115,22,.8) 50%,rgba(251,191,36,.5) 75%,transparent 100%);animation:svelte-1sw3914-sweep 2s ease-in-out;pointer-events:none}.code-flash.svelte-1sw3914{animation:svelte-1sw3914-pulse .5s ease-out}@keyframes svelte-1sw3914-pulse{0%{box-shadow:0 0 #fbbf2400}50%{box-shadow:0 0 0 6px #fbbf2466}to{box-shadow:0 0 #fbbf2400}}

hfstudio/static/_app/immutable/chunks/DVK2ASb7.js

@@ -0,0 +1,3 @@
+var St=Object.defineProperty;var kt=(e,t,n)=>t in e?St(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n;var R=(e,t,n)=>kt(e,typeof t!="symbol"?t+"":t,n);import{S as Et,F as At,Z as Rt,_ as Tt,$ as It,a0 as Ut,a1 as Lt,a2 as $t,v as ve,a3 as xt,G as be,A as ge,s as Ct}from"./BF3xBGh8.js";class Ze extends Et{constructor(n){if(!n||!n.target&&!n.$$inline)throw new Error("'target' is a required option");super();R(this,"$$prop_def");R(this,"$$events_def");R(this,"$$slot_def")}$destroy(){super.$destroy(),this.$destroy=()=>{console.warn("Component was already destroyed")}}$capture_state(){}$inject_state(){}}class Pt extends Ze{}const Ot=Object.freeze(Object.defineProperty({__proto__:null,SvelteComponent:Ze,SvelteComponentTyped:Pt,afterUpdate:At,beforeUpdate:Rt,createEventDispatcher:Tt,getAllContexts:It,getContext:Ut,hasContext:Lt,onDestroy:$t,onMount:ve,setContext:xt,tick:be},Symbol.toStringTag,{value:"Module"}));class ie{constructor(t,n){this.status=t,typeof n=="string"?this.body={message:n}:n?this.body=n:this.body={message:`Error: ${t}`}}toString(){return JSON.stringify(this.body)}}class Re{constructor(t,n){this.status=t,this.location=n}}class Te extends Error{constructor(t,n,r){super(r),this.status=t,this.text=n}}new URL("sveltekit-internal://");function Nt(e,t){return e==="/"||t==="ignore"?e:t==="never"?e.endsWith("/")?e.slice(0,-1):e:t==="always"&&!e.endsWith("/")?e+"/":e}function jt(e){return e.split("%25").map(decodeURI).join("%25")}function Dt(e){for(const t in e)e[t]=decodeURIComponent(e[t]);return e}function me({href:e}){return e.split("#")[0]}function Ft(e,t,n,r=!1){const a=new URL(e);Object.defineProperty(a,"searchParams",{value:new Proxy(a.searchParams,{get(i,o){if(o==="get"||o==="getAll"||o==="has")return l=>(n(l),i[o](l));t();const c=Reflect.get(i,o);return typeof c=="function"?c.bind(i):c}}),enumerable:!0,configurable:!0});const s=["href","pathname","search","toString","toJSON"];r&&s.push("hash");for(const i of s)Object.defineProperty(a,i,{get(){return t(),e[i]},enumerable:!0,configurable:!0});return a}function Bt(...e){let t=5381;for(const n of e)if(typeof n=="string"){let r=n.length;for(;r;)t=t*33^n.charCodeAt(--r)}else if(ArrayBuffer.isView(n)){const r=new Uint8Array(n.buffer,n.byteOffset,n.byteLength);let a=r.length;for(;a;)t=t*33^r[--a]}else throw new TypeError("value must be a string or TypedArray");return(t>>>0).toString(36)}new TextEncoder;const Mt=new TextDecoder;function Vt(e){const t=atob(e),n=new Uint8Array(t.length);for(let r=0;r<t.length;r++)n[r]=t.charCodeAt(r);return n}const qt=window.fetch;window.fetch=(e,t)=>((e instanceof Request?e.method:(t==null?void 0:t.method)||"GET")!=="GET"&&G.delete(Ie(e)),qt(e,t));const G=new Map;function zt(e,t){const n=Ie(e,t),r=document.querySelector(n);if(r!=null&&r.textContent){r.remove();let{body:a,...s}=JSON.parse(r.textContent);const i=r.getAttribute("data-ttl");return i&&G.set(n,{body:a,init:s,ttl:1e3*Number(i)}),r.getAttribute("data-b64")!==null&&(a=Vt(a)),Promise.resolve(new Response(a,s))}return window.fetch(e,t)}function Gt(e,t,n){if(G.size>0){const r=Ie(e,n),a=G.get(r);if(a){if(performance.now()<a.ttl&&["default","force-cache","only-if-cached",void 0].includes(n==null?void 0:n.cache))return new Response(a.body,a.init);G.delete(r)}}return window.fetch(t,n)}function Ie(e,t){let r=`script[data-sveltekit-fetched][data-url=${JSON.stringify(e instanceof Request?e.url:e)}]`;if(t!=null&&t.headers||t!=null&&t.body){const a=[];t.headers&&a.push([...new Headers(t.headers)].join(",")),t.body&&(typeof t.body=="string"||ArrayBuffer.isView(t.body))&&a.push(t.body),r+=`[data-hash="${Bt(...a)}"]`}return r}const Yt=/^(\[)?(\.\.\.)?(\w+)(?:=(\w+))?(\])?$/;function Ht(e){const t=[];return{pattern:e==="/"?/^\/$/:new RegExp(`^${Wt(e).map(r=>{const a=/^\[\.\.\.(\w+)(?:=(\w+))?\]$/.exec(r);if(a)return t.push({name:a[1],matcher:a[2],optional:!1,rest:!0,chained:!0}),"(?:/([^]*))?";const s=/^\[\[(\w+)(?:=(\w+))?\]\]$/.exec(r);if(s)return t.push({name:s[1],matcher:s[2],optional:!0,rest:!1,chained:!0}),"(?:/([^/]+))?";if(!r)return;const i=r.split(/\[(.+?)\](?!\])/);return"/"+i.map((c,l)=>{if(l%2){if(c.startsWith("x+"))return _e(String.fromCharCode(parseInt(c.slice(2),16)));if(c.startsWith("u+"))return _e(String.fromCharCode(...c.slice(2).split("-").map(u=>parseInt(u,16))));const d=Yt.exec(c),[,h,y,f,p]=d;return t.push({name:f,matcher:p,optional:!!h,rest:!!y,chained:y?l===1&&i[0]==="":!1}),y?"([^]*?)":h?"([^/]*)?":"([^/]+?)"}return _e(c)}).join("")}).join("")}/?$`),params:t}}function Kt(e){return e!==""&&!/^\([^)]+\)$/.test(e)}function Wt(e){return e.slice(1).split("/").filter(Kt)}function Jt(e,t,n){const r={},a=e.slice(1),s=a.filter(o=>o!==void 0);let i=0;for(let o=0;o<t.length;o+=1){const c=t[o];let l=a[o-i];if(c.chained&&c.rest&&i&&(l=a.slice(o-i,o+1).filter(d=>d).join("/"),i=0),l===void 0){c.rest&&(r[c.name]="");continue}if(!c.matcher||n[c.matcher](l)){r[c.name]=l;const d=t[o+1],h=a[o+1];d&&!d.rest&&d.optional&&h&&c.chained&&(i=0),!d&&!h&&Object.keys(r).length===s.length&&(i=0);continue}if(c.optional&&c.chained){i++;continue}return}if(!i)return r}function _e(e){return e.normalize().replace(/[[\]]/g,"\\$&").replace(/%/g,"%25").replace(/\//g,"%2[Ff]").replace(/\?/g,"%3[Ff]").replace(/#/g,"%23").replace(/[.*+?^${}()|\\]/g,"\\$&")}function Xt({nodes:e,server_loads:t,dictionary:n,matchers:r}){const a=new Set(t);return Object.entries(n).map(([o,[c,l,d]])=>{const{pattern:h,params:y}=Ht(o),f={id:o,exec:p=>{const u=h.exec(p);if(u)return Jt(u,y,r)},errors:[1,...d||[]].map(p=>e[p]),layouts:[0,...l||[]].map(i),leaf:s(c)};return f.errors.length=f.layouts.length=Math.max(f.errors.length,f.layouts.length),f});function s(o){const c=o<0;return c&&(o=~o),[c,e[o]]}function i(o){return o===void 0?o:[a.has(o),e[o]]}}function Qe(e,t=JSON.parse){try{return t(sessionStorage[e])}catch{}}function Be(e,t,n=JSON.stringify){const r=n(t);try{sessionStorage[e]=r}catch{}}const D=[];function Ue(e,t=ge){let n;const r=new Set;function a(o){if(Ct(e,o)&&(e=o,n)){const c=!D.length;for(const l of r)l[1](),D.push(l,e);if(c){for(let l=0;l<D.length;l+=2)D[l][0](D[l+1]);D.length=0}}}function s(o){a(o(e))}function i(o,c=ge){const l=[o,c];return r.add(l),r.size===1&&(n=t(a,s)||ge),o(e),()=>{r.delete(l),r.size===0&&n&&(n(),n=null)}}return{set:a,update:s,subscribe:i}}var Je;const $=((Je=globalThis.__sveltekit_rw16zh)==null?void 0:Je.base)??"";var Xe;const Zt=((Xe=globalThis.__sveltekit_rw16zh)==null?void 0:Xe.assets)??$??"",Qt="1761004654684",et="sveltekit:snapshot",tt="sveltekit:scroll",nt="sveltekit:states",en="sveltekit:pageurl",B="sveltekit:history",K="sveltekit:navigation",O={tap:1,hover:2,viewport:3,eager:4,off:-1,false:-1},ce=location.origin;function at(e){if(e instanceof URL)return e;let t=document.baseURI;if(!t){const n=document.getElementsByTagName("base");t=n.length?n[0].href:document.URL}return new URL(e,t)}function le(){return{x:pageXOffset,y:pageYOffset}}function F(e,t){return e.getAttribute(`data-sveltekit-${t}`)}const Me={...O,"":O.hover};function rt(e){let t=e.assignedSlot??e.parentNode;return(t==null?void 0:t.nodeType)===11&&(t=t.host),t}function ot(e,t){for(;e&&e!==t;){if(e.nodeName.toUpperCase()==="A"&&e.hasAttribute("href"))return e;e=rt(e)}}function Se(e,t,n){let r;try{if(r=new URL(e instanceof SVGAElement?e.href.baseVal:e.href,document.baseURI),n&&r.hash.match(/^#[^/]/)){const o=location.hash.split("#")[1]||"/";r.hash=`#${o}${r.hash}`}}catch{}const a=e instanceof SVGAElement?e.target.baseVal:e.target,s=!r||!!a||fe(r,t,n)||(e.getAttribute("rel")||"").split(/\s+/).includes("external"),i=(r==null?void 0:r.origin)===ce&&e.hasAttribute("download");return{url:r,external:s,target:a,download:i}}function Q(e){let t=null,n=null,r=null,a=null,s=null,i=null,o=e;for(;o&&o!==document.documentElement;)r===null&&(r=F(o,"preload-code")),a===null&&(a=F(o,"preload-data")),t===null&&(t=F(o,"keepfocus")),n===null&&(n=F(o,"noscroll")),s===null&&(s=F(o,"reload")),i===null&&(i=F(o,"replacestate")),o=rt(o);function c(l){switch(l){case"":case"true":return!0;case"off":case"false":return!1;default:return}}return{preload_code:Me[r??"off"],preload_data:Me[a??"off"],keepfocus:c(t),noscroll:c(n),reload:c(s),replace_state:c(i)}}function Ve(e){const t=Ue(e);let n=!0;function r(){n=!0,t.update(i=>i)}function a(i){n=!1,t.set(i)}function s(i){let o;return t.subscribe(c=>{(o===void 0||n&&c!==o)&&i(o=c)})}return{notify:r,set:a,subscribe:s}}const st={v:()=>{}};function tn(){const{set:e,subscribe:t}=Ue(!1);let n;async function r(){clearTimeout(n);try{const a=await fetch(`${Zt}/_app/version.json`,{headers:{pragma:"no-cache","cache-control":"no-cache"}});if(!a.ok)return!1;const i=(await a.json()).version!==Qt;return i&&(e(!0),st.v(),clearTimeout(n)),i}catch{return!1}}return{subscribe:t,check:r}}function fe(e,t,n){return e.origin!==ce||!e.pathname.startsWith(t)?!0:n?!(e.pathname===t+"/"||e.pathname===t+"/index.html"||e.protocol==="file:"&&e.pathname.replace(/\/[^/]+\.html?$/,"")===t):!1}function qn(e){}function nn(e){const t=rn(e),n=new ArrayBuffer(t.length),r=new DataView(n);for(let a=0;a<n.byteLength;a++)r.setUint8(a,t.charCodeAt(a));return n}const an="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";function rn(e){e.length%4===0&&(e=e.replace(/==?$/,""));let t="",n=0,r=0;for(let a=0;a<e.length;a++)n<<=6,n|=an.indexOf(e[a]),r+=6,r===24&&(t+=String.fromCharCode((n&16711680)>>16),t+=String.fromCharCode((n&65280)>>8),t+=String.fromCharCode(n&255),n=r=0);return r===12?(n>>=4,t+=String.fromCharCode(n)):r===18&&(n>>=2,t+=String.fromCharCode((n&65280)>>8),t+=String.fromCharCode(n&255)),t}const on=-1,sn=-2,cn=-3,ln=-4,fn=-5,un=-6;function dn(e,t){if(typeof e=="number")return a(e,!0);if(!Array.isArray(e)||e.length===0)throw new Error("Invalid input");const n=e,r=Array(n.length);function a(s,i=!1){if(s===on)return;if(s===cn)return NaN;if(s===ln)return 1/0;if(s===fn)return-1/0;if(s===un)return-0;if(i||typeof s!="number")throw new Error("Invalid input");if(s in r)return r[s];const o=n[s];if(!o||typeof o!="object")r[s]=o;else if(Array.isArray(o))if(typeof o[0]=="string"){const c=o[0],l=t==null?void 0:t[c];if(l)return r[s]=l(a(o[1]));switch(c){case"Date":r[s]=new Date(o[1]);break;case"Set":const d=new Set;r[s]=d;for(let f=1;f<o.length;f+=1)d.add(a(o[f]));break;case"Map":const h=new Map;r[s]=h;for(let f=1;f<o.length;f+=2)h.set(a(o[f]),a(o[f+1]));break;case"RegExp":r[s]=new RegExp(o[1],o[2]);break;case"Object":r[s]=Object(o[1]);break;case"BigInt":r[s]=BigInt(o[1]);break;case"null":const y=Object.create(null);r[s]=y;for(let f=1;f<o.length;f+=2)y[o[f]]=a(o[f+1]);break;case"Int8Array":case"Uint8Array":case"Uint8ClampedArray":case"Int16Array":case"Uint16Array":case"Int32Array":case"Uint32Array":case"Float32Array":case"Float64Array":case"BigInt64Array":case"BigUint64Array":{const f=globalThis[c],p=new f(a(o[1]));r[s]=o[2]!==void 0?p.subarray(o[2],o[3]):p;break}case"ArrayBuffer":{const f=o[1],p=nn(f);r[s]=p;break}case"Temporal.Duration":case"Temporal.Instant":case"Temporal.PlainDate":case"Temporal.PlainTime":case"Temporal.PlainDateTime":case"Temporal.PlainMonthDay":case"Temporal.PlainYearMonth":case"Temporal.ZonedDateTime":{const f=c.slice(9);r[s]=Temporal[f].from(o[1]);break}case"URL":{const f=new URL(o[1]);r[s]=f;break}case"URLSearchParams":{const f=new URLSearchParams(o[1]);r[s]=f;break}default:throw new Error(`Unknown type ${c}`)}}else{const c=new Array(o.length);r[s]=c;for(let l=0;l<o.length;l+=1){const d=o[l];d!==sn&&(c[l]=a(d))}}else{const c={};r[s]=c;for(const l in o){if(l==="__proto__")throw new Error("Cannot parse an object with a `__proto__` property");const d=o[l];c[l]=a(d)}}return r[s]}return a(0)}const it=new Set(["load","prerender","csr","ssr","trailingSlash","config"]);[...it];const hn=new Set([...it]);[...hn];function pn(e){return e.filter(t=>t!=null)}const gn="x-sveltekit-invalidated",mn="x-sveltekit-trailing-slash";function ee(e){return e instanceof ie||e instanceof Te?e.status:500}function _n(e){return e instanceof Te?e.text:"Internal Error"}let T,W,we;const wn=ve.toString().includes("$$")||/function \w+\(\) \{\}/.test(ve.toString());wn?(T={data:{},form:null,error:null,params:{},route:{id:null},state:{},status:-1,url:new URL("https://example.com")},W={current:null},we={current:!1}):(T=new class{constructor(){R(this,"data",$state.raw({}));R(this,"form",$state.raw(null));R(this,"error",$state.raw(null));R(this,"params",$state.raw({}));R(this,"route",$state.raw({id:null}));R(this,"state",$state.raw({}));R(this,"status",$state.raw(-1));R(this,"url",$state.raw(new URL("https://example.com")))}},W=new class{constructor(){R(this,"current",$state.raw(null))}},we=new class{constructor(){R(this,"current",$state.raw(!1))}},st.v=()=>we.current=!0);function yn(e){Object.assign(T,e)}const vn="/__data.json",bn=".html__data.json";function Sn(e){return e.endsWith(".html")?e.replace(/\.html$/,bn):e.replace(/\/$/,"")+vn}const qe={spanContext(){return kn},setAttribute(){return this},setAttributes(){return this},addEvent(){return this},setStatus(){return this},updateName(){return this},end(){return this},isRecording(){return!1},recordException(){return this},addLink(){return this},addLinks(){return this}},kn={traceId:"",spanId:"",traceFlags:0},{tick:En}=Ot,An=new Set(["icon","shortcut icon","apple-touch-icon"]),j=Qe(tt)??{},J=Qe(et)??{},C={url:Ve({}),page:Ve({}),navigating:Ue(null),updated:tn()};function Le(e){j[e]=le()}function Rn(e,t){let n=e+1;for(;j[n];)delete j[n],n+=1;for(n=t+1;J[n];)delete J[n],n+=1}function q(e,t=!1){return t?location.replace(e.href):location.href=e.href,new Promise(()=>{})}async function ct(){if("serviceWorker"in navigator){const e=await navigator.serviceWorker.getRegistration($||"/");e&&await e.update()}}function ze(){}let $e,ke,te,x,Ee,k;const ne=[],ae=[];let U=null;const Z=new Map,lt=new Set,Tn=new Set,Y=new Set;let b={branch:[],error:null,url:null},xe=!1,re=!1,Ge=!0,X=!1,z=!1,ft=!1,Ce=!1,ut,A,L,N;const H=new Set,Ye=new Map;async function Hn(e,t,n){var s,i,o,c,l;(s=globalThis.__sveltekit_rw16zh)!=null&&s.data&&globalThis.__sveltekit_rw16zh.data,document.URL!==location.href&&(location.href=location.href),k=e,await((o=(i=e.hooks).init)==null?void 0:o.call(i)),$e=Xt(e),x=document.documentElement,Ee=t,ke=e.nodes[0],te=e.nodes[1],ke(),te(),A=(c=history.state)==null?void 0:c[B],L=(l=history.state)==null?void 0:l[K],A||(A=L=Date.now(),history.replaceState({...history.state,[B]:A,[K]:L},""));const r=j[A];function a(){r&&(history.scrollRestoration="manual",scrollTo(r.x,r.y))}n?(a(),await Dn(Ee,n)):(await M({type:"enter",url:at(k.hash?Bn(new URL(location.href)):location.href),replace_state:!0}),a()),jn()}function In(){ne.length=0,Ce=!1}function dt(e){ae.some(t=>t==null?void 0:t.snapshot)&&(J[e]=ae.map(t=>{var n;return(n=t==null?void 0:t.snapshot)==null?void 0:n.capture()}))}function ht(e){var t;(t=J[e])==null||t.forEach((n,r)=>{var a,s;(s=(a=ae[r])==null?void 0:a.snapshot)==null||s.restore(n)})}function He(){Le(A),Be(tt,j),dt(L),Be(et,J)}async function Un(e,t,n,r){let a;t.invalidateAll&&(U=null),await M({type:"goto",url:at(e),keepfocus:t.keepFocus,noscroll:t.noScroll,replace_state:t.replaceState,state:t.state,redirect_count:n,nav_token:r,accept:()=>{t.invalidateAll&&(Ce=!0,a=[...Ye.keys()]),t.invalidate&&t.invalidate.forEach(Nn)}}),t.invalidateAll&&be().then(be).then(()=>{Ye.forEach(({resource:s},i)=>{var o;a!=null&&a.includes(i)&&((o=s.refresh)==null||o.call(s))})})}async function Ln(e){if(e.id!==(U==null?void 0:U.id)){const t={};H.add(t),U={id:e.id,token:t,promise:mt({...e,preload:t}).then(n=>(H.delete(t),n.type==="loaded"&&n.state.error&&(U=null),n))}}return U.promise}async function ye(e){var n;const t=(n=await de(e,!1))==null?void 0:n.route;t&&await Promise.all([...t.layouts,t.leaf].map(r=>r==null?void 0:r[1]()))}function pt(e,t,n){var a;b=e.state;const r=document.querySelector("style[data-sveltekit]");if(r&&r.remove(),Object.assign(T,e.props.page),ut=new k.root({target:t,props:{...e.props,stores:C,components:ae},hydrate:n,sync:!1}),ht(L),n){const s={from:null,to:{params:b.params,route:{id:((a=b.route)==null?void 0:a.id)??null},url:new URL(location.href)},willUnload:!1,type:"enter",complete:Promise.resolve()};Y.forEach(i=>i(s))}re=!0}function oe({url:e,params:t,branch:n,status:r,error:a,route:s,form:i}){let o="never";if($&&(e.pathname===$||e.pathname===$+"/"))o="always";else for(const f of n)(f==null?void 0:f.slash)!==void 0&&(o=f.slash);e.pathname=Nt(e.pathname,o),e.search=e.search;const c={type:"loaded",state:{url:e,params:t,branch:n,error:a,route:s},props:{constructors:pn(n).map(f=>f.node.component),page:je(T)}};i!==void 0&&(c.props.form=i);let l={},d=!T,h=0;for(let f=0;f<Math.max(n.length,b.branch.length);f+=1){const p=n[f],u=b.branch[f];(p==null?void 0:p.data)!==(u==null?void 0:u.data)&&(d=!0),p&&(l={...l,...p.data},d&&(c.props[`data_${h}`]=l),h+=1)}return(!b.url||e.href!==b.url.href||b.error!==a||i!==void 0&&i!==T.form||d)&&(c.props.page={error:a,params:t,route:{id:(s==null?void 0:s.id)??null},state:{},status:r,url:new URL(e),form:i??null,data:d?l:T.data}),c}async function Pe({loader:e,parent:t,url:n,params:r,route:a,server_data_node:s}){var d,h,y;let i=null,o=!0;const c={dependencies:new Set,params:new Set,parent:!1,route:!1,url:!1,search_params:new Set},l=await e();if((d=l.universal)!=null&&d.load){let f=function(...u){for(const g of u){const{href:_}=new URL(g,n);c.dependencies.add(_)}};const p={tracing:{enabled:!1,root:qe,current:qe},route:new Proxy(a,{get:(u,g)=>(o&&(c.route=!0),u[g])}),params:new Proxy(r,{get:(u,g)=>(o&&c.params.add(g),u[g])}),data:(s==null?void 0:s.data)??null,url:Ft(n,()=>{o&&(c.url=!0)},u=>{o&&c.search_params.add(u)},k.hash),async fetch(u,g){u instanceof Request&&(g={body:u.method==="GET"||u.method==="HEAD"?void 0:await u.blob(),cache:u.cache,credentials:u.credentials,headers:[...u.headers].length>0?u==null?void 0:u.headers:void 0,integrity:u.integrity,keepalive:u.keepalive,method:u.method,mode:u.mode,redirect:u.redirect,referrer:u.referrer,referrerPolicy:u.referrerPolicy,signal:u.signal,...g});const{resolved:_,promise:I}=gt(u,g,n);return o&&f(_.href),I},setHeaders:()=>{},depends:f,parent(){return o&&(c.parent=!0),t()},untrack(u){o=!1;try{return u()}finally{o=!0}}};i=await l.universal.load.call(null,p)??null}return{node:l,loader:e,server:s,universal:(h=l.universal)!=null&&h.load?{type:"data",data:i,uses:c}:null,data:i??(s==null?void 0:s.data)??null,slash:((y=l.universal)==null?void 0:y.trailingSlash)??(s==null?void 0:s.slash)}}function gt(e,t,n){let r=e instanceof Request?e.url:e;const a=new URL(r,n);a.origin===n.origin&&(r=a.href.slice(n.origin.length));const s=re?Gt(r,a.href,t):zt(r,t);return{resolved:a,promise:s}}function Ke(e,t,n,r,a,s){if(Ce)return!0;if(!a)return!1;if(a.parent&&e||a.route&&t||a.url&&n)return!0;for(const i of a.search_params)if(r.has(i))return!0;for(const i of a.params)if(s[i]!==b.params[i])return!0;for(const i of a.dependencies)if(ne.some(o=>o(new URL(i))))return!0;return!1}function Oe(e,t){return(e==null?void 0:e.type)==="data"?e:(e==null?void 0:e.type)==="skip"?t??null:null}function $n(e,t){if(!e)return new Set(t.searchParams.keys());const n=new Set([...e.searchParams.keys(),...t.searchParams.keys()]);for(const r of n){const a=e.searchParams.getAll(r),s=t.searchParams.getAll(r);a.every(i=>s.includes(i))&&s.every(i=>a.includes(i))&&n.delete(r)}return n}function We({error:e,url:t,route:n,params:r}){return{type:"loaded",state:{error:e,url:t,route:n,params:r,branch:[]},props:{page:je(T),constructors:[]}}}async function mt({id:e,invalidating:t,url:n,params:r,route:a,preload:s}){if((U==null?void 0:U.id)===e)return H.delete(U.token),U.promise;const{errors:i,layouts:o,leaf:c}=a,l=[...o,c];i.forEach(w=>w==null?void 0:w().catch(()=>{})),l.forEach(w=>w==null?void 0:w[1]().catch(()=>{}));let d=null;const h=b.url?e!==se(b.url):!1,y=b.route?a.id!==b.route.id:!1,f=$n(b.url,n);let p=!1;const u=l.map((w,m)=>{var P;const v=b.branch[m],S=!!(w!=null&&w[0])&&((v==null?void 0:v.loader)!==w[1]||Ke(p,y,h,f,(P=v.server)==null?void 0:P.uses,r));return S&&(p=!0),S});if(u.some(Boolean)){try{d=await yt(n,u)}catch(w){const m=await V(w,{url:n,params:r,route:{id:e}});return H.has(s)?We({error:m,url:n,params:r,route:a}):ue({status:ee(w),error:m,url:n,route:a})}if(d.type==="redirect")return d}const g=d==null?void 0:d.nodes;let _=!1;const I=l.map(async(w,m)=>{var he;if(!w)return;const v=b.branch[m],S=g==null?void 0:g[m];if((!S||S.type==="skip")&&w[1]===(v==null?void 0:v.loader)&&!Ke(_,y,h,f,(he=v.universal)==null?void 0:he.uses,r))return v;if(_=!0,(S==null?void 0:S.type)==="error")throw S;return Pe({loader:w[1],url:n,params:r,route:a,parent:async()=>{var Fe;const De={};for(let pe=0;pe<m;pe+=1)Object.assign(De,(Fe=await I[pe])==null?void 0:Fe.data);return De},server_data_node:Oe(S===void 0&&w[0]?{type:"skip"}:S??null,w[0]?v==null?void 0:v.server:void 0)})});for(const w of I)w.catch(()=>{});const E=[];for(let w=0;w<l.length;w+=1)if(l[w])try{E.push(await I[w])}catch(m){if(m instanceof Re)return{type:"redirect",location:m.location};if(H.has(s))return We({error:await V(m,{params:r,url:n,route:{id:a.id}}),url:n,params:r,route:a});let v=ee(m),S;if(g!=null&&g.includes(m))v=m.status??v,S=m.error;else if(m instanceof ie)S=m.body;else{if(await C.updated.check())return await ct(),await q(n);S=await V(m,{params:r,url:n,route:{id:a.id}})}const P=await xn(w,E,i);return P?oe({url:n,params:r,branch:E.slice(0,P.idx).concat(P.node),status:v,error:S,route:a}):await wt(n,{id:a.id},S,v)}else E.push(void 0);return oe({url:n,params:r,branch:E,status:200,error:null,route:a,form:t?void 0:null})}async function xn(e,t,n){for(;e--;)if(n[e]){let r=e;for(;!t[r];)r-=1;try{return{idx:r+1,node:{node:await n[e](),loader:n[e],data:{},server:null,universal:null}}}catch{continue}}}async function ue({status:e,error:t,url:n,route:r}){const a={};let s=null;if(k.server_loads[0]===0)try{const o=await yt(n,[!0]);if(o.type!=="data"||o.nodes[0]&&o.nodes[0].type!=="data")throw 0;s=o.nodes[0]??null}catch{(n.origin!==ce||n.pathname!==location.pathname||xe)&&await q(n)}try{const o=await Pe({loader:ke,url:n,params:a,route:r,parent:()=>Promise.resolve({}),server_data_node:Oe(s)}),c={node:await te(),loader:te,universal:null,server:null,data:null};return oe({url:n,params:a,branch:[o,c],status:e,error:t,route:null})}catch(o){if(o instanceof Re)return Un(new URL(o.location,location.href),{},0);throw o}}async function Cn(e){const t=e.href;if(Z.has(t))return Z.get(t);let n;try{const r=(async()=>{let a=await k.hooks.reroute({url:new URL(e),fetch:async(s,i)=>gt(s,i,e).promise})??e;if(typeof a=="string"){const s=new URL(e);k.hash?s.hash=a:s.pathname=a,a=s}return a})();Z.set(t,r),n=await r}catch{Z.delete(t);return}return n}async function de(e,t){if(e&&!fe(e,$,k.hash)){const n=await Cn(e);if(!n)return;const r=Pn(n);for(const a of $e){const s=a.exec(r);if(s)return{id:se(e),invalidating:t,route:a,params:Dt(s),url:e}}}}function Pn(e){return jt(k.hash?e.hash.replace(/^#/,"").replace(/[?#].+/,""):e.pathname.slice($.length))||"/"}function se(e){return(k.hash?e.hash.replace(/^#/,""):e.pathname)+e.search}function _t({url:e,type:t,intent:n,delta:r,event:a}){let s=!1;const i=Ne(b,n,e,t);r!==void 0&&(i.navigation.delta=r),a!==void 0&&(i.navigation.event=a);const o={...i.navigation,cancel:()=>{s=!0,i.reject(new Error("navigation cancelled"))}};return X||lt.forEach(c=>c(o)),s?null:i}async function M({type:e,url:t,popped:n,keepfocus:r,noscroll:a,replace_state:s,state:i={},redirect_count:o=0,nav_token:c={},accept:l=ze,block:d=ze,event:h}){const y=N;N=c;const f=await de(t,!1),p=e==="enter"?Ne(b,f,t,e):_t({url:t,type:e,delta:n==null?void 0:n.delta,intent:f,event:h});if(!p){d(),N===c&&(N=y);return}const u=A,g=L;l(),X=!0,re&&p.navigation.type!=="enter"&&C.navigating.set(W.current=p.navigation);let _=f&&await mt(f);if(!_){if(fe(t,$,k.hash))return await q(t,s);_=await wt(t,{id:null},await V(new Te(404,"Not Found",`Not found: ${t.pathname}`),{url:t,params:{},route:{id:null}}),404,s)}if(t=(f==null?void 0:f.url)||t,N!==c)return p.reject(new Error("navigation aborted")),!1;if(_.type==="redirect"){if(o<20){await M({type:e,url:new URL(_.location,t),popped:n,keepfocus:r,noscroll:a,replace_state:s,state:i,redirect_count:o+1,nav_token:c}),p.fulfil(void 0);return}_=await ue({status:500,error:await V(new Error("Redirect loop"),{url:t,params:{},route:{id:null}}),url:t,route:{id:null}})}else _.props.page.status>=400&&await C.updated.check()&&(await ct(),await q(t,s));if(In(),Le(u),dt(g),_.props.page.url.pathname!==t.pathname&&(t.pathname=_.props.page.url.pathname),i=n?n.state:i,!n){const m=s?0:1,v={[B]:A+=m,[K]:L+=m,[nt]:i};(s?history.replaceState:history.pushState).call(history,v,"",t),s||Rn(A,L)}if(U=null,_.props.page.state=i,re){const m=(await Promise.all(Array.from(Tn,v=>v(p.navigation)))).filter(v=>typeof v=="function");if(m.length>0){let v=function(){m.forEach(S=>{Y.delete(S)})};m.push(v),m.forEach(S=>{Y.add(S)})}b=_.state,_.props.page&&(_.props.page.url=t),ut.$set(_.props),yn(_.props.page),ft=!0}else pt(_,Ee,!1);const{activeElement:I}=document;await En();let E=n?n.scroll:a?le():null;if(Ge){const m=t.hash&&document.getElementById(bt(t));if(E)scrollTo(E.x,E.y);else if(m){m.scrollIntoView();const{top:v,left:S}=m.getBoundingClientRect();E={x:pageXOffset+S,y:pageYOffset+v}}else scrollTo(0,0)}const w=document.activeElement!==I&&document.activeElement!==document.body;!r&&!w&&Fn(t,E),Ge=!0,_.props.page&&Object.assign(T,_.props.page),X=!1,e==="popstate"&&ht(L),p.fulfil(void 0),Y.forEach(m=>m(p.navigation)),C.navigating.set(W.current=null)}async function wt(e,t,n,r,a){return e.origin===ce&&e.pathname===location.pathname&&!xe?await ue({status:r,error:n,url:e,route:t}):await q(e,a)}function On(){let e,t,n;x.addEventListener("mousemove",o=>{const c=o.target;clearTimeout(e),e=setTimeout(()=>{s(c,O.hover)},20)});function r(o){o.defaultPrevented||s(o.composedPath()[0],O.tap)}x.addEventListener("mousedown",r),x.addEventListener("touchstart",r,{passive:!0});const a=new IntersectionObserver(o=>{for(const c of o)c.isIntersecting&&(ye(new URL(c.target.href)),a.unobserve(c.target))},{threshold:0});async function s(o,c){const l=ot(o,x),d=l===t&&c>=n;if(!l||d)return;const{url:h,external:y,download:f}=Se(l,$,k.hash);if(y||f)return;const p=Q(l),u=h&&se(b.url)===se(h);if(!(p.reload||u))if(c<=p.preload_data){t=l,n=O.tap;const g=await de(h,!1);if(!g)return;Ln(g)}else c<=p.preload_code&&(t=l,n=c,ye(h))}function i(){a.disconnect();for(const o of x.querySelectorAll("a")){const{url:c,external:l,download:d}=Se(o,$,k.hash);if(l||d)continue;const h=Q(o);h.reload||(h.preload_code===O.viewport&&a.observe(o),h.preload_code===O.eager&&ye(c))}}Y.add(i),i()}function V(e,t){if(e instanceof ie)return e.body;const n=ee(e),r=_n(e);return k.hooks.handleError({error:e,event:t,status:n,message:r})??{message:r}}function Nn(e){if(typeof e=="function")ne.push(e);else{const{href:t}=new URL(e,location.href);ne.push(n=>n.href===t)}}function jn(){var t;history.scrollRestoration="manual",addEventListener("beforeunload",n=>{let r=!1;if(He(),!X){const a=Ne(b,void 0,null,"leave"),s={...a.navigation,cancel:()=>{r=!0,a.reject(new Error("navigation cancelled"))}};lt.forEach(i=>i(s))}r?(n.preventDefault(),n.returnValue=""):history.scrollRestoration="auto"}),addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&He()}),(t=navigator.connection)!=null&&t.saveData||On(),x.addEventListener("click",async n=>{if(n.button||n.which!==1||n.metaKey||n.ctrlKey||n.shiftKey||n.altKey||n.defaultPrevented)return;const r=ot(n.composedPath()[0],x);if(!r)return;const{url:a,external:s,target:i,download:o}=Se(r,$,k.hash);if(!a)return;if(i==="_parent"||i==="_top"){if(window.parent!==window)return}else if(i&&i!=="_self")return;const c=Q(r);if(!(r instanceof SVGAElement)&&a.protocol!==location.protocol&&!(a.protocol==="https:"||a.protocol==="http:")||o)return;const[d,h]=(k.hash?a.hash.replace(/^#/,""):a.href).split("#"),y=d===me(location);if(s||c.reload&&(!y||!h)){_t({url:a,type:"link",event:n})?X=!0:n.preventDefault();return}if(h!==void 0&&y){const[,f]=b.url.href.split("#");if(f===h){if(n.preventDefault(),h===""||h==="top"&&r.ownerDocument.getElementById("top")===null)scrollTo({top:0});else{const p=r.ownerDocument.getElementById(decodeURIComponent(h));p&&(p.scrollIntoView(),p.focus())}return}if(z=!0,Le(A),e(a),!c.replace_state)return;z=!1}n.preventDefault(),await new Promise(f=>{requestAnimationFrame(()=>{setTimeout(f,0)}),setTimeout(f,100)}),await M({type:"link",url:a,keepfocus:c.keepfocus,noscroll:c.noscroll,replace_state:c.replace_state??a.href===location.href,event:n})}),x.addEventListener("submit",n=>{if(n.defaultPrevented)return;const r=HTMLFormElement.prototype.cloneNode.call(n.target),a=n.submitter;if(((a==null?void 0:a.formTarget)||r.target)==="_blank"||((a==null?void 0:a.formMethod)||r.method)!=="get")return;const o=new URL((a==null?void 0:a.hasAttribute("formaction"))&&(a==null?void 0:a.formAction)||r.action);if(fe(o,$,!1))return;const c=n.target,l=Q(c);if(l.reload)return;n.preventDefault(),n.stopPropagation();const d=new FormData(c,a);o.search=new URLSearchParams(d).toString(),M({type:"form",url:o,keepfocus:l.keepfocus,noscroll:l.noscroll,replace_state:l.replace_state??o.href===location.href,event:n})}),addEventListener("popstate",async n=>{var r;if(!Ae){if((r=n.state)!=null&&r[B]){const a=n.state[B];if(N={},a===A)return;const s=j[a],i=n.state[nt]??{},o=new URL(n.state[en]??location.href),c=n.state[K],l=b.url?me(location)===me(b.url):!1;if(c===L&&(ft||l)){i!==T.state&&(T.state=i),e(o),j[A]=le(),s&&scrollTo(s.x,s.y),A=a;return}const h=a-A;await M({type:"popstate",url:o,popped:{state:i,scroll:s,delta:h},accept:()=>{A=a,L=c},block:()=>{history.go(-h)},nav_token:N,event:n})}else if(!z){const a=new URL(location.href);e(a),k.hash&&location.reload()}}}),addEventListener("hashchange",()=>{z&&(z=!1,history.replaceState({...history.state,[B]:++A,[K]:L},"",location.href))});for(const n of document.querySelectorAll("link"))An.has(n.rel)&&(n.href=n.href);addEventListener("pageshow",n=>{n.persisted&&C.navigating.set(W.current=null)});function e(n){b.url=T.url=n,C.page.set(je(T)),C.page.notify()}}async function Dn(e,{status:t=200,error:n,node_ids:r,params:a,route:s,server_route:i,data:o,form:c}){xe=!0;const l=new URL(location.href);let d;({params:a={},route:s={id:null}}=await de(l,!1)||{}),d=$e.find(({id:f})=>f===s.id);let h,y=!0;try{const f=r.map(async(u,g)=>{const _=o[g];return _!=null&&_.uses&&(_.uses=vt(_.uses)),Pe({loader:k.nodes[u],url:l,params:a,route:s,parent:async()=>{const I={};for(let E=0;E<g;E+=1)Object.assign(I,(await f[E]).data);return I},server_data_node:Oe(_)})}),p=await Promise.all(f);if(d){const u=d.layouts;for(let g=0;g<u.length;g++)u[g]||p.splice(g,0,void 0)}h=oe({url:l,params:a,branch:p,status:t,error:n,form:c,route:d??null})}catch(f){if(f instanceof Re){await q(new URL(f.location,location.href));return}h=await ue({status:ee(f),error:await V(f,{url:l,params:a,route:s}),url:l,route:s}),e.textContent="",y=!1}h.props.page&&(h.props.page.state={}),pt(h,e,y)}async function yt(e,t){var s;const n=new URL(e);n.pathname=Sn(e.pathname),e.pathname.endsWith("/")&&n.searchParams.append(mn,"1"),n.searchParams.append(gn,t.map(i=>i?"1":"0").join(""));const r=window.fetch,a=await r(n.href,{});if(!a.ok){let i;throw(s=a.headers.get("content-type"))!=null&&s.includes("application/json")?i=await a.json():a.status===404?i="Not Found":a.status===500&&(i="Internal Error"),new ie(a.status,i)}return new Promise(async i=>{var h;const o=new Map,c=a.body.getReader();function l(y){return dn(y,{...k.decoders,Promise:f=>new Promise((p,u)=>{o.set(f,{fulfil:p,reject:u})})})}let d="";for(;;){const{done:y,value:f}=await c.read();if(y&&!d)break;for(d+=!f&&d?`
+`:Mt.decode(f,{stream:!0});;){const p=d.indexOf(`
+`);if(p===-1)break;const u=JSON.parse(d.slice(0,p));if(d=d.slice(p+1),u.type==="redirect")return i(u);if(u.type==="data")(h=u.nodes)==null||h.forEach(g=>{(g==null?void 0:g.type)==="data"&&(g.uses=vt(g.uses),g.data=l(g.data))}),i(u);else if(u.type==="chunk"){const{id:g,data:_,error:I}=u,E=o.get(g);o.delete(g),I?E.reject(l(I)):E.fulfil(l(_))}}}})}function vt(e){return{dependencies:new Set((e==null?void 0:e.dependencies)??[]),params:new Set((e==null?void 0:e.params)??[]),parent:!!(e!=null&&e.parent),route:!!(e!=null&&e.route),url:!!(e!=null&&e.url),search_params:new Set((e==null?void 0:e.search_params)??[])}}let Ae=!1;function Fn(e,t=null){const n=document.querySelector("[autofocus]");if(n)n.focus();else{const r=bt(e);if(r&&document.getElementById(r)){const{x:s,y:i}=t??le();setTimeout(()=>{const o=history.state;Ae=!0,location.replace(`#${r}`),k.hash&&location.replace(e.hash),history.replaceState(o,"",e.hash),scrollTo(s,i),Ae=!1})}else{const s=document.body,i=s.getAttribute("tabindex");s.tabIndex=-1,s.focus({preventScroll:!0,focusVisible:!1}),i!==null?s.setAttribute("tabindex",i):s.removeAttribute("tabindex")}const a=getSelection();if(a&&a.type!=="None"){const s=[];for(let i=0;i<a.rangeCount;i+=1)s.push(a.getRangeAt(i));setTimeout(()=>{if(a.rangeCount===s.length){for(let i=0;i<a.rangeCount;i+=1){const o=s[i],c=a.getRangeAt(i);if(o.commonAncestorContainer!==c.commonAncestorContainer||o.startContainer!==c.startContainer||o.endContainer!==c.endContainer||o.startOffset!==c.startOffset||o.endOffset!==c.endOffset)return}a.removeAllRanges()}})}}}function Ne(e,t,n,r){var c,l;let a,s;const i=new Promise((d,h)=>{a=d,s=h});return i.catch(()=>{}),{navigation:{from:{params:e.params,route:{id:((c=e.route)==null?void 0:c.id)??null},url:e.url},to:n&&{params:(t==null?void 0:t.params)??null,route:{id:((l=t==null?void 0:t.route)==null?void 0:l.id)??null},url:n},willUnload:!t,type:r,complete:i},fulfil:a,reject:s}}function je(e){return{data:e.data,error:e.error,form:e.form,params:e.params,route:e.route,state:e.state,status:e.status,url:e.url}}function Bn(e){const t=new URL(e);return t.hash=decodeURIComponent(e.hash),t}function bt(e){let t;if(k.hash){const[,,n]=e.hash.split("#",3);t=n??""}else t=e.hash.slice(1);return decodeURIComponent(t)}export{Hn as a,qn as l,C as s};

hfstudio/static/_app/immutable/entry/app.CIwzfQ6B.js

@@ -0,0 +1,2 @@
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../nodes/0.UMzK7bBX.js","../chunks/BF3xBGh8.js","../chunks/IHki7fMi.js","../assets/0.DBGxRMBA.css","../nodes/1.i8TJb2hr.js","../chunks/DVK2ASb7.js","../nodes/2.1jor8E63.js","../assets/2.D7LovqyU.css"])))=>i.map(i=>d[i]);
+import{S as V,i as j,s as B,d,t as h,a as g,C as S,D as O,f as v,o as U,E as w,q as z,F,v as G,G as H,H as y,I as P,J as R,K as L,L as I,b as A,M as p,k as J,m as K,p as W,N as C,x as Q,y as X,z as Y}from"../chunks/BF3xBGh8.js";import"../chunks/IHki7fMi.js";const Z="modulepreload",M=function(o,e){return new URL(o,e).href},N={},D=function(e,n,i){let r=Promise.resolve();if(n&&n.length>0){const t=document.getElementsByTagName("link"),s=document.querySelector("meta[property=csp-nonce]"),a=(s==null?void 0:s.nonce)||(s==null?void 0:s.getAttribute("nonce"));r=Promise.allSettled(n.map(f=>{if(f=M(f,i),f in N)return;N[f]=!0;const l=f.endsWith(".css"),_=l?'[rel="stylesheet"]':"";if(!!i)for(let k=t.length-1;k>=0;k--){const E=t[k];if(E.href===f&&(!l||E.rel==="stylesheet"))return}else if(document.querySelector(`link[href="${f}"]${_}`))return;const m=document.createElement("link");if(m.rel=l?"stylesheet":Z,l||(m.as="script"),m.crossOrigin="",m.href=f,a&&m.setAttribute("nonce",a),document.head.appendChild(m),l)return new Promise((k,E)=>{m.addEventListener("load",k),m.addEventListener("error",()=>E(new Error(`Unable to preload CSS for ${f}`)))})}))}function u(t){const s=new Event("vite:preloadError",{cancelable:!0});if(s.payload=t,window.dispatchEvent(s),!s.defaultPrevented)throw t}return r.then(t=>{for(const s of t||[])s.status==="rejected"&&u(s.reason);return e().catch(u)})},ae={};function $(o){let e,n,i;var r=o[2][0];function u(t,s){return{props:{data:t[4],form:t[3],params:t[1].params}}}return r&&(e=y(r,u(o)),o[12](e)),{c(){e&&R(e.$$.fragment),n=w()},l(t){e&&I(e.$$.fragment,t),n=w()},m(t,s){e&&L(e,t,s),v(t,n,s),i=!0},p(t,s){if(s&4&&r!==(r=t[2][0])){if(e){S();const a=e;h(a.$$.fragment,1,0,()=>{P(a,1)}),O()}r?(e=y(r,u(t)),t[12](e),R(e.$$.fragment),g(e.$$.fragment,1),L(e,n.parentNode,n)):e=null}else if(r){const a={};s&16&&(a.data=t[4]),s&8&&(a.form=t[3]),s&2&&(a.params=t[1].params),e.$set(a)}},i(t){i||(e&&g(e.$$.fragment,t),i=!0)},o(t){e&&h(e.$$.fragment,t),i=!1},d(t){t&&d(n),o[12](null),e&&P(e,t)}}}function x(o){let e,n,i;var r=o[2][0];function u(t,s){return{props:{data:t[4],params:t[1].params,$$slots:{default:[ee]},$$scope:{ctx:t}}}}return r&&(e=y(r,u(o)),o[11](e)),{c(){e&&R(e.$$.fragment),n=w()},l(t){e&&I(e.$$.fragment,t),n=w()},m(t,s){e&&L(e,t,s),v(t,n,s),i=!0},p(t,s){if(s&4&&r!==(r=t[2][0])){if(e){S();const a=e;h(a.$$.fragment,1,0,()=>{P(a,1)}),O()}r?(e=y(r,u(t)),t[11](e),R(e.$$.fragment),g(e.$$.fragment,1),L(e,n.parentNode,n)):e=null}else if(r){const a={};s&16&&(a.data=t[4]),s&2&&(a.params=t[1].params),s&8239&&(a.$$scope={dirty:s,ctx:t}),e.$set(a)}},i(t){i||(e&&g(e.$$.fragment,t),i=!0)},o(t){e&&h(e.$$.fragment,t),i=!1},d(t){t&&d(n),o[11](null),e&&P(e,t)}}}function ee(o){let e,n,i;var r=o[2][1];function u(t,s){return{props:{data:t[5],form:t[3],params:t[1].params}}}return r&&(e=y(r,u(o)),o[10](e)),{c(){e&&R(e.$$.fragment),n=w()},l(t){e&&I(e.$$.fragment,t),n=w()},m(t,s){e&&L(e,t,s),v(t,n,s),i=!0},p(t,s){if(s&4&&r!==(r=t[2][1])){if(e){S();const a=e;h(a.$$.fragment,1,0,()=>{P(a,1)}),O()}r?(e=y(r,u(t)),t[10](e),R(e.$$.fragment),g(e.$$.fragment,1),L(e,n.parentNode,n)):e=null}else if(r){const a={};s&32&&(a.data=t[5]),s&8&&(a.form=t[3]),s&2&&(a.params=t[1].params),e.$set(a)}},i(t){i||(e&&g(e.$$.fragment,t),i=!0)},o(t){e&&h(e.$$.fragment,t),i=!1},d(t){t&&d(n),o[10](null),e&&P(e,t)}}}function q(o){let e,n=o[7]&&T(o);return{c(){e=W("div"),n&&n.c(),this.h()},l(i){e=J(i,"DIV",{id:!0,"aria-live":!0,"aria-atomic":!0,style:!0});var r=K(e);n&&n.l(r),r.forEach(d),this.h()},h(){A(e,"id","svelte-announcer"),A(e,"aria-live","assertive"),A(e,"aria-atomic","true"),p(e,"position","absolute"),p(e,"left","0"),p(e,"top","0"),p(e,"clip","rect(0 0 0 0)"),p(e,"clip-path","inset(50%)"),p(e,"overflow","hidden"),p(e,"white-space","nowrap"),p(e,"width","1px"),p(e,"height","1px")},m(i,r){v(i,e,r),n&&n.m(e,null)},p(i,r){i[7]?n?n.p(i,r):(n=T(i),n.c(),n.m(e,null)):n&&(n.d(1),n=null)},d(i){i&&d(e),n&&n.d()}}}function T(o){let e;return{c(){e=Y(o[8])},l(n){e=X(n,o[8])},m(n,i){v(n,e,i)},p(n,i){i&256&&Q(e,n[8])},d(n){n&&d(e)}}}function te(o){let e,n,i,r,u;const t=[x,$],s=[];function a(l,_){return l[2][1]?0:1}e=a(o),n=s[e]=t[e](o);let f=o[6]&&q(o);return{c(){n.c(),i=z(),f&&f.c(),r=w()},l(l){n.l(l),i=U(l),f&&f.l(l),r=w()},m(l,_){s[e].m(l,_),v(l,i,_),f&&f.m(l,_),v(l,r,_),u=!0},p(l,[_]){let b=e;e=a(l),e===b?s[e].p(l,_):(S(),h(s[b],1,1,()=>{s[b]=null}),O(),n=s[e],n?n.p(l,_):(n=s[e]=t[e](l),n.c()),g(n,1),n.m(i.parentNode,i)),l[6]?f?f.p(l,_):(f=q(l),f.c(),f.m(r.parentNode,r)):f&&(f.d(1),f=null)},i(l){u||(g(n),u=!0)},o(l){h(n),u=!1},d(l){l&&(d(i),d(r)),s[e].d(l),f&&f.d(l)}}}function ne(o,e,n){let{stores:i}=e,{page:r}=e,{constructors:u}=e,{components:t=[]}=e,{form:s}=e,{data_0:a=null}=e,{data_1:f=null}=e;F(i.page.notify);let l=!1,_=!1,b=null;G(()=>{const c=i.page.subscribe(()=>{l&&(n(7,_=!0),H().then(()=>{n(8,b=document.title||"untitled page")}))});return n(6,l=!0),c});function m(c){C[c?"unshift":"push"](()=>{t[1]=c,n(0,t)})}function k(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}function E(c){C[c?"unshift":"push"](()=>{t[0]=c,n(0,t)})}return o.$$set=c=>{"stores"in c&&n(9,i=c.stores),"page"in c&&n(1,r=c.page),"constructors"in c&&n(2,u=c.constructors),"components"in c&&n(0,t=c.components),"form"in c&&n(3,s=c.form),"data_0"in c&&n(4,a=c.data_0),"data_1"in c&&n(5,f=c.data_1)},o.$$.update=()=>{o.$$.dirty&514&&i.page.set(r)},[t,r,u,s,a,f,l,_,b,i,m,k,E]}class le extends V{constructor(e){super(),j(this,e,ne,te,B,{stores:9,page:1,constructors:2,components:0,form:3,data_0:4,data_1:5})}}const fe=[()=>D(()=>import("../nodes/0.UMzK7bBX.js"),__vite__mapDeps([0,1,2,3]),import.meta.url),()=>D(()=>import("../nodes/1.i8TJb2hr.js"),__vite__mapDeps([4,1,2,5]),import.meta.url),()=>D(()=>import("../nodes/2.1jor8E63.js"),__vite__mapDeps([6,1,2,7]),import.meta.url)],ce=[],ue={"/":[2]},se={handleError:({error:o})=>{console.error(o)},reroute:()=>{},transport:{}},ie=Object.fromEntries(Object.entries(se.transport).map(([o,e])=>[o,e.decode])),_e=!1,me=(o,e)=>ie[o](e);export{me as decode,ie as decoders,ue as dictionary,_e as hash,se as hooks,ae as matchers,fe as nodes,le as root,ce as server_loads};

hfstudio/static/_app/immutable/entry/start.jV5w9ZfR.js

@@ -0,0 +1 @@
+import{l as o,a as r}from"../chunks/DVK2ASb7.js";export{o as load_css,r as start};

hfstudio/static/_app/immutable/nodes/0.UMzK7bBX.js

@@ -0,0 +1,5 @@
+import{S as Se,i as Ce,s as Le,c as He,d as x,r as Te,t as Ee,a as Me,b as r,u as Ne,g as Ue,e as Ae,f as $,h as s,l as le,j as Pe,k as u,m as A,n as H,o as w,p as f,q as y,v as De,w as xe,x as me,y as te,z as se,A as Be}from"../chunks/BF3xBGh8.js";import"../chunks/IHki7fMi.js";function Oe(c){let t,e="Sign In";return{c(){t=f("span"),t.textContent=e},l(n){t=u(n,"SPAN",{"data-svelte-h":!0}),H(t)!=="svelte-6n3gky"&&(t.textContent=e)},m(n,h){$(n,t,h)},p:Be,d(n){n&&x(t)}}}function Ve(c){let t,e,n,h;return{c(){t=f("span"),e=se("Sign out ("),n=se(c[2]),h=se(")")},l(k){t=u(k,"SPAN",{});var o=A(t);e=te(o,"Sign out ("),n=te(o,c[2]),h=te(o,")"),o.forEach(x)},m(k,o){$(k,t,o),s(t,e),s(t,n),s(t,h)},p(k,o){o&4&&me(n,k[2])},d(k){k&&x(t)}}}function je(c){let t,e,n=c[1]?"logged in":"not logged in",h,k;return{c(){t=f("span"),e=se("Checking... ("),h=se(n),k=se(")")},l(o){t=u(o,"SPAN",{});var m=A(t);e=te(m,"Checking... ("),h=te(m,n),k=te(m,")"),m.forEach(x)},m(o,m){$(o,t,m),s(t,e),s(t,h),s(t,k)},p(o,m){m&2&&n!==(n=o[1]?"logged in":"not logged in")&&me(h,n)},d(o){o&&x(t)}}}function ke(c){let t,e=`<div class="bg-blue-600 text-white text-sm rounded-lg p-3 shadow-lg relative"><div class="flex items-start gap-2"><svg class="w-4 h-4 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> <div><p class="font-medium">Sign in required</p> <p class="text-blue-100 text-xs mt-1">You need to sign in to use HuggingFace Inference Providers for text-to-speech
+                  generation.</p></div></div> <div class="absolute top-full left-1/2 transform -translate-x-1/2"><div class="w-0 h-0 border-l-4 border-r-4 border-t-4 border-l-transparent border-r-transparent border-t-blue-600"></div></div></div>`;return{c(){t=f("div"),t.innerHTML=e,this.h()},l(n){t=u(n,"DIV",{class:!0,"data-svelte-h":!0}),H(t)!=="svelte-4csry"&&(t.innerHTML=e),this.h()},h(){r(t,"class","absolute bottom-full left-0 right-0 mb-2 z-50")},m(n,h){$(n,t,h)},d(n){n&&x(t)}}}function we(c){let t,e,n,h="Sign In with HuggingFace Token",k,o,m,Q="<strong>Manual Token Entry:</strong> Please enter your HuggingFace token.",v,d,E=`1. Go to <a href="https://huggingface.co/settings/tokens" target="_blank" class="underline text-blue-600">HuggingFace Settings</a><br/>
+            2. Create a new token with &quot;Inference API&quot; permissions<br/>
+            3. Copy and paste it below`,Y,z,p,I,F="HuggingFace Token",J,b,q,W,T,P,K="Cancel",D,V,X="Sign In",l,_,i=c[7]&&ye(),a=c[6]&&Ie(c);return{c(){t=f("div"),e=f("div"),n=f("h2"),n.textContent=h,k=y(),o=f("div"),m=f("p"),m.innerHTML=Q,v=y(),d=f("p"),d.innerHTML=E,Y=y(),i&&i.c(),z=y(),p=f("div"),I=f("label"),I.textContent=F,J=y(),b=f("input"),q=y(),a&&a.c(),W=y(),T=f("div"),P=f("button"),P.textContent=K,D=y(),V=f("button"),V.textContent=X,this.h()},l(S){t=u(S,"DIV",{class:!0});var G=A(t);e=u(G,"DIV",{class:!0});var L=A(e);n=u(L,"H2",{class:!0,"data-svelte-h":!0}),H(n)!=="svelte-1t0ehet"&&(n.textContent=h),k=w(L),o=u(L,"DIV",{class:!0});var C=A(o);m=u(C,"P",{class:!0,"data-svelte-h":!0}),H(m)!=="svelte-344vn4"&&(m.innerHTML=Q),v=w(C),d=u(C,"P",{class:!0,"data-svelte-h":!0}),H(d)!=="svelte-orsfwv"&&(d.innerHTML=E),Y=w(C),i&&i.l(C),C.forEach(x),z=w(L),p=u(L,"DIV",{class:!0});var B=A(p);I=u(B,"LABEL",{for:!0,class:!0,"data-svelte-h":!0}),H(I)!=="svelte-vtbmxo"&&(I.textContent=F),J=w(B),b=u(B,"INPUT",{id:!0,type:!0,placeholder:!0,class:!0}),q=w(B),a&&a.l(B),B.forEach(x),W=w(L),T=u(L,"DIV",{class:!0});var ee=A(T);P=u(ee,"BUTTON",{class:!0,"data-svelte-h":!0}),H(P)!=="svelte-csk0rj"&&(P.textContent=K),D=w(ee),V=u(ee,"BUTTON",{class:!0,"data-svelte-h":!0}),H(V)!=="svelte-1nxas5u"&&(V.textContent=X),ee.forEach(x),L.forEach(x),G.forEach(x),this.h()},h(){r(n,"class","text-xl font-semibold mb-4"),r(m,"class","text-blue-800 mb-2"),r(d,"class","text-blue-700"),r(o,"class","mb-4 p-3 bg-blue-50 rounded-md text-sm"),r(I,"for","token"),r(I,"class","block text-sm font-medium text-gray-700 mb-2"),r(b,"id","token"),r(b,"type","password"),r(b,"placeholder","hf_..."),r(b,"class","w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent"),r(p,"class","mb-4"),r(P,"class","px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors"),r(V,"class","px-4 py-2 bg-orange-500 text-white rounded-md hover:bg-orange-600 transition-colors"),r(T,"class","flex justify-end gap-3"),r(e,"class","bg-white rounded-lg p-6 max-w-md w-full mx-4 shadow-xl"),r(t,"class","fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50")},m(S,G){$(S,t,G),s(t,e),s(e,n),s(e,k),s(e,o),s(o,m),s(o,v),s(o,d),s(o,Y),i&&i.m(o,null),s(e,z),s(e,p),s(p,I),s(p,J),s(p,b),xe(b,c[5]),s(p,q),a&&a.m(p,null),s(e,W),s(e,T),s(T,P),s(T,D),s(T,V),l||(_=[le(b,"input",c[15]),le(b,"keydown",c[16]),le(P,"click",c[10]),le(V,"click",c[11])],l=!0)},p(S,G){S[7]?i||(i=ye(),i.c(),i.m(o,null)):i&&(i.d(1),i=null),G&32&&b.value!==S[5]&&xe(b,S[5]),S[6]?a?a.p(S,G):(a=Ie(S),a.c(),a.m(p,null)):a&&(a.d(1),a=null)},d(S){S&&x(t),i&&i.d(),a&&a.d(),l=!1,Te(_)}}}function ye(c){let t,e=`<strong>Tip:</strong> You can also run <code>huggingface-cli login</code> in your terminal
+              to automatically use your local token.`;return{c(){t=f("p"),t.innerHTML=e,this.h()},l(n){t=u(n,"P",{class:!0,"data-svelte-h":!0}),H(t)!=="svelte-xrut8w"&&(t.innerHTML=e),this.h()},h(){r(t,"class","text-blue-600 mt-2")},m(n,h){$(n,t,h)},d(n){n&&x(t)}}}function Ie(c){let t,e;return{c(){t=f("p"),e=se(c[6]),this.h()},l(n){t=u(n,"P",{class:!0});var h=A(t);e=te(h,c[6]),h.forEach(x),this.h()},h(){r(t,"class","text-red-600 text-sm mt-1")},m(n,h){$(n,t,h),s(t,e)},p(n,h){h&64&&me(e,n[6])},d(n){n&&x(t)}}}function ze(c){let t,e,n,h='<div class="flex items-center gap-3"><img src="/assets/hf-studio-logo.png" alt="HF Logo" class="w-8 h-8"/> <h1 class="text-xl font-semibold">HFStudio<sup class="text-xs text-gray-500 ml-1">BETA</sup></h1></div>',k,o,m,Q="Tasks",v,d,E,Y="🎙️",z,p,I="Text to Speech",F,J,b,q="<span>🎵</span> <span>Voice Cloning</span>",W,T,P="<span>🎧</span> <span>Speech to Text</span>",K,D,V="<span>🎼</span> <span>Sound Effects</span>",X,l,_="<span>🎸</span> <span>Music Generation</span>",i,a,S="<span>🔊</span> <span>Audio Enhancement</span>",G,L,C,B,ee,ue,fe,de,ne,he,Z,pe,_e;function be(g,N){return g[3]?je:g[1]?Ve:Oe}let ae=be(c),R=ae(c),U=c[8]&&!c[1]&&ke();const ge=c[13].default,j=He(ge,c,c[12],null);let M=c[4]&&we(c);return{c(){t=f("div"),e=f("aside"),n=f("div"),n.innerHTML=h,k=y(),o=f("nav"),m=f("div"),m.textContent=Q,v=y(),d=f("button"),E=f("span"),E.textContent=Y,z=y(),p=f("span"),p.textContent=I,J=y(),b=f("button"),b.innerHTML=q,W=y(),T=f("button"),T.innerHTML=P,K=y(),D=f("button"),D.innerHTML=V,X=y(),l=f("button"),l.innerHTML=_,i=y(),a=f("button"),a.innerHTML=S,G=y(),L=f("div"),C=f("button"),B=f("img"),ue=y(),R.c(),fe=y(),U&&U.c(),de=y(),ne=f("main"),j&&j.c(),he=y(),M&&M.c(),this.h()},l(g){t=u(g,"DIV",{class:!0});var N=A(t);e=u(N,"ASIDE",{class:!0});var oe=A(e);n=u(oe,"DIV",{class:!0,"data-svelte-h":!0}),H(n)!=="svelte-60or62"&&(n.innerHTML=h),k=w(oe),o=u(oe,"NAV",{class:!0});var O=A(o);m=u(O,"DIV",{class:!0,"data-svelte-h":!0}),H(m)!=="svelte-pii1fa"&&(m.textContent=Q),v=w(O),d=u(O,"BUTTON",{class:!0});var re=A(d);E=u(re,"SPAN",{"data-svelte-h":!0}),H(E)!=="svelte-1yx42xi"&&(E.textContent=Y),z=w(re),p=u(re,"SPAN",{"data-svelte-h":!0}),H(p)!=="svelte-2j89jk"&&(p.textContent=I),re.forEach(x),J=w(O),b=u(O,"BUTTON",{class:!0,"data-svelte-h":!0}),H(b)!=="svelte-10dl8nf"&&(b.innerHTML=q),W=w(O),T=u(O,"BUTTON",{class:!0,"data-svelte-h":!0}),H(T)!=="svelte-wf0x5d"&&(T.innerHTML=P),K=w(O),D=u(O,"BUTTON",{class:!0,"data-svelte-h":!0}),H(D)!=="svelte-x7bha3"&&(D.innerHTML=V),X=w(O),l=u(O,"BUTTON",{class:!0,"data-svelte-h":!0}),H(l)!=="svelte-1tyblmt"&&(l.innerHTML=_),i=w(O),a=u(O,"BUTTON",{class:!0,"data-svelte-h":!0}),H(a)!=="svelte-1emrjb3"&&(a.innerHTML=S),O.forEach(x),G=w(oe),L=u(oe,"DIV",{class:!0});var ce=A(L);C=u(ce,"BUTTON",{class:!0});var ie=A(C);B=u(ie,"IMG",{src:!0,alt:!0,class:!0}),ue=w(ie),R.l(ie),ie.forEach(x),fe=w(ce),U&&U.l(ce),ce.forEach(x),oe.forEach(x),de=w(N),ne=u(N,"MAIN",{class:!0});var ve=A(ne);j&&j.l(ve),ve.forEach(x),he=w(N),M&&M.l(N),N.forEach(x),this.h()},h(){r(n,"class","p-4 border-b border-gray-200"),r(m,"class","mt-2 mb-1 px-2 text-xs font-medium text-gray-500 uppercase"),r(d,"class",F="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 transition-colors text-left "+(c[0]==="tts"?"bg-gray-100":"")),r(b,"class","w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"),b.disabled=!0,r(T,"class","w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"),T.disabled=!0,r(D,"class","w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"),D.disabled=!0,r(l,"class","w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"),l.disabled=!0,r(a,"class","w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left opacity-40 cursor-not-allowed"),a.disabled=!0,r(o,"class","p-2 text-sm flex-1"),Pe(B.src,ee="/assets/hf-logo.png")||r(B,"src",ee),r(B,"alt","HF Logo"),r(B,"class","w-5 h-5"),C.disabled=c[3],r(C,"class","w-full px-6 py-3 bg-black text-white rounded-lg font-medium hover:bg-gray-800 transition-colors shadow-sm flex items-center justify-center gap-2 text-sm disabled:opacity-50 disabled:cursor-not-allowed"),r(L,"class","p-2 relative"),r(e,"class","w-56 border-r border-gray-200 bg-white flex-shrink-0 flex flex-col h-full "),r(ne,"class","flex-1 overflow-auto"),r(t,"class","flex h-screen bg-white")},m(g,N){$(g,t,N),s(t,e),s(e,n),s(e,k),s(e,o),s(o,m),s(o,v),s(o,d),s(d,E),s(d,z),s(d,p),s(o,J),s(o,b),s(o,W),s(o,T),s(o,K),s(o,D),s(o,X),s(o,l),s(o,i),s(o,a),s(e,G),s(e,L),s(L,C),s(C,B),s(C,ue),R.m(C,null),s(L,fe),U&&U.m(L,null),s(t,de),s(t,ne),j&&j.m(ne,null),s(t,he),M&&M.m(t,null),Z=!0,pe||(_e=[le(d,"click",c[14]),le(C,"click",c[9])],pe=!0)},p(g,[N]){(!Z||N&1&&F!==(F="w-full flex items-center gap-2 px-2 py-1.5 rounded-md hover:bg-gray-100 transition-colors text-left "+(g[0]==="tts"?"bg-gray-100":"")))&&r(d,"class",F),ae===(ae=be(g))&&R?R.p(g,N):(R.d(1),R=ae(g),R&&(R.c(),R.m(C,null))),(!Z||N&8)&&(C.disabled=g[3]),g[8]&&!g[1]?U||(U=ke(),U.c(),U.m(L,null)):U&&(U.d(1),U=null),j&&j.p&&(!Z||N&4096)&&Ne(j,ge,g,g[12],Z?Ae(ge,g[12],N,null):Ue(g[12]),null),g[4]?M?M.p(g,N):(M=we(g),M.c(),M.m(t,null)):M&&(M.d(1),M=null)},i(g){Z||(Me(j,g),Z=!0)},o(g){Ee(j,g),Z=!1},d(g){g&&x(t),R.d(),U&&U.d(),j&&j.d(g),M&&M.d(),pe=!1,Te(_e)}}}function Fe(c,t,e){let{$$slots:n={},$$scope:h}=t,k="tts";const o=typeof window<"u"?localStorage.getItem("hf_access_token"):null,m=typeof window<"u"?localStorage.getItem("hf_cached_token"):null,Q=typeof window<"u"?localStorage.getItem("hf_user_info"):null;let v=!1,d="",E=!1,Y=!1;if(o&&o===m&&Q)try{const l=JSON.parse(Q);v=!0,d=l.username,Y=!0}catch{E=!0}else o&&(E=!0);let z=!1,p="",I="",F=!1,J=!1;De(()=>{window.addEventListener("show-signin-popover",()=>{e(8,J=!0),setTimeout(()=>{e(8,J=!1)},4e3)}),!Y&&o?(b(),q()):o||b(),document.addEventListener("visibilitychange",()=>{document.hidden||q()}),window.addEventListener("storage",q);const l=setInterval(q,1e3);return()=>{window.removeEventListener("storage",q),clearInterval(l)}});async function b(){if(!(v&&Y)){e(3,E=!0);try{const _=await(await fetch("/api/auth/local-token")).json();_.available?(e(7,F=!0),localStorage.setItem("hf_access_token",_.token),_.user_info&&_.user_info.name!=="Local User"?(e(1,v=!0),e(2,d=_.user_info.name.split(" ")[0])):(e(1,v=!0),e(2,d="Local User"))):e(7,F=!1)}catch{e(7,F=!1)}finally{e(3,E=!1)}}}function q(){const l=localStorage.getItem("hf_access_token"),_=localStorage.getItem("hf_user_info"),i=localStorage.getItem("hf_cached_token");if(l){if(l===i&&_)try{const a=JSON.parse(_);e(1,v=!0),e(2,d=a.username);return}catch{}(!v||l!==i)&&W(l)}else e(1,v=!1),e(2,d=""),localStorage.removeItem("hf_user_info"),localStorage.removeItem("hf_cached_token")}async function W(l){e(3,E=!0);try{const _=await fetch("https://huggingface.co/api/whoami-v2",{headers:{Authorization:`Bearer ${l}`}});if(_.ok){const i=await _.json();e(1,v=!0);const a=i.name||i.fullname||i.login||i.username||"User";e(2,d=a.split(" ")[0]);const S={username:d,fullName:a};localStorage.setItem("hf_user_info",JSON.stringify(S)),localStorage.setItem("hf_cached_token",l)}else localStorage.removeItem("hf_access_token"),localStorage.removeItem("hf_user_info"),localStorage.removeItem("hf_cached_token"),e(1,v=!1),e(2,d="")}catch{const i=localStorage.getItem("hf_user_info");if(i)try{const a=JSON.parse(i);e(1,v=!0),e(2,d=a.username);return}catch{}localStorage.removeItem("hf_access_token"),localStorage.removeItem("hf_user_info"),localStorage.removeItem("hf_cached_token"),e(1,v=!1),e(2,d="")}finally{e(3,E=!1)}}async function T(){if(v)localStorage.removeItem("hf_access_token"),localStorage.removeItem("hf_user_info"),localStorage.removeItem("hf_cached_token"),sessionStorage.removeItem("oauth_state"),e(1,v=!1),e(2,d="");else if(window.location.hostname.includes("hf.space")||window.location.hostname.includes("huggingface.co"))try{const _=await(await fetch("/api/auth/oauth-config")).json(),i=_.scopes||"read-repos write-repos manage-repos inference-api",a=`https://huggingface.co/oauth/authorize?client_id=${_.client_id}&redirect_uri=${encodeURIComponent(window.location.origin+"/auth/callback")}&scope=${encodeURIComponent(i)}&response_type=code&state=${Date.now()}`;window.location.href=a}catch{e(4,z=!0),e(5,p=""),e(6,I="")}else e(4,z=!0),e(5,p=""),e(6,I="")}function P(){e(4,z=!1),e(5,p=""),e(6,I="")}async function K(){if(!p.trim()){e(6,I="Please enter a token");return}if(!p.startsWith("hf_")){e(6,I='Token should start with "hf_"');return}try{const l=await fetch("https://huggingface.co/api/whoami-v2",{headers:{Authorization:`Bearer ${p.trim()}`}});if(l.ok){const _=await l.json(),i=p.trim();localStorage.setItem("hf_access_token",i),e(1,v=!0);const a=_.name||_.fullname||_.login||_.username||"User";e(2,d=a.split(" ")[0]);const S={username:d,fullName:a};localStorage.setItem("hf_user_info",JSON.stringify(S)),localStorage.setItem("hf_cached_token",i),P()}else e(6,I=`Invalid token (${l.status}). Please check your token and try again.`)}catch{e(6,I="Error validating token. Please try again.")}}const D=()=>e(0,k="tts");function V(){p=this.value,e(5,p)}const X=l=>l.key==="Enter"&&K();return c.$$set=l=>{"$$scope"in l&&e(12,h=l.$$scope)},[k,v,d,E,z,p,I,F,J,T,P,K,h,n,D,V,X]}class Ge extends Se{constructor(t){super(),Ce(this,t,Fe,ze,Le,{})}}export{Ge as component};

hfstudio/static/_app/immutable/nodes/1.i8TJb2hr.js

@@ -0,0 +1 @@
+import{S as x,i as S,s as q,A as _,d as u,x as d,f as m,h as f,k as g,m as h,y as v,o as y,p as $,z as E,q as k,B as z}from"../chunks/BF3xBGh8.js";import"../chunks/IHki7fMi.js";import{s as A}from"../chunks/DVK2ASb7.js";const B=()=>{const s=A;return{page:{subscribe:s.page.subscribe},navigating:{subscribe:s.navigating.subscribe},updated:s.updated}},C={subscribe(s){return B().page.subscribe(s)}};function H(s){var b;let t,r=s[0].status+"",o,n,i,p=((b=s[0].error)==null?void 0:b.message)+"",l;return{c(){t=$("h1"),o=E(r),n=k(),i=$("p"),l=E(p)},l(e){t=g(e,"H1",{});var a=h(t);o=v(a,r),a.forEach(u),n=y(e),i=g(e,"P",{});var c=h(i);l=v(c,p),c.forEach(u)},m(e,a){m(e,t,a),f(t,o),m(e,n,a),m(e,i,a),f(i,l)},p(e,[a]){var c;a&1&&r!==(r=e[0].status+"")&&d(o,r),a&1&&p!==(p=((c=e[0].error)==null?void 0:c.message)+"")&&d(l,p)},i:_,o:_,d(e){e&&(u(t),u(n),u(i))}}}function P(s,t,r){let o;return z(s,C,n=>r(0,o=n)),[o]}let F=class extends x{constructor(t){super(),S(this,t,P,H,q,{})}};export{F as component};

hfstudio/static/_app/version.json

@@ -1 +1 @@
-{"version":"1761004481087"}
+{"version":"1761004654684"}

hfstudio/static/index.html

@@ -1,35 +1,35 @@
 <!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/assets/hf-studio-logo.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>HFStudio - Text to Speech</title>
-		
-		<link rel="modulepreload" href="/_app/immutable/entry/start.CSDWo18g.js">
-		<link rel="modulepreload" href="/_app/immutable/chunks/58WuCvUx.js">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/assets/hf-studio-logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>HFStudio - Text to Speech</title>
+    
+		<link rel="modulepreload" href="/_app/immutable/entry/start.jV5w9ZfR.js">
+		<link rel="modulepreload" href="/_app/immutable/chunks/DVK2ASb7.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/BF3xBGh8.js">
-		<link rel="modulepreload" href="/_app/immutable/entry/app.pFM9bQvm.js">
+		<link rel="modulepreload" href="/_app/immutable/entry/app.CIwzfQ6B.js">
 		<link rel="modulepreload" href="/_app/immutable/chunks/IHki7fMi.js">
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">
+  </head>
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">
 			<script>
 				{
-					__sveltekit_7hn0aa = {
+					__sveltekit_rw16zh = {
 						base: ""
 					};
 
 					const element = document.currentScript.parentElement;
 
 					Promise.all([
-						import("/_app/immutable/entry/start.CSDWo18g.js"),
-						import("/_app/immutable/entry/app.pFM9bQvm.js")
+						import("/_app/immutable/entry/start.jV5w9ZfR.js"),
+						import("/_app/immutable/entry/app.CIwzfQ6B.js")
 					]).then(([kit, app]) => {
 						kit.start(app, element);
 					});
 				}
 			</script>
 		</div>
-	</body>
-</html>
+  </body>
+</html>

models/chatterbox/local.py

@@ -33,7 +33,7 @@ class TTSRequest(BaseModel):
 
 
 class InferenceClientTTSRequest(BaseModel):
-    inputs: str  # text to synthesize  
+    inputs: str  # text to synthesize
     extra_body: Optional[Dict[str, Any]] = None
 
 
@@ -65,17 +65,17 @@ async def text_to_speech(request: TTSRequest):
     """
     if not SAMPLE_AUDIO_PATH or not os.path.exists(SAMPLE_AUDIO_PATH):
         raise HTTPException(
-            status_code=500, 
-            detail="Sample audio file not found. Please provide --sample-audio path."
+            status_code=500,
+            detail="Sample audio file not found. Please provide --sample-audio path.",
         )
-    
-    print(f"TTS Request - Text: '{request.inputs[:50]}...' Parameters: {request.parameters}")
-    
+
+    print(
+        f"TTS Request - Text: '{request.inputs[:50]}...' Parameters: {request.parameters}"
+    )
+
     # Return the sample audio file
     return FileResponse(
-        SAMPLE_AUDIO_PATH,
-        media_type="audio/wav",
-        filename="generated_audio.wav"
+        SAMPLE_AUDIO_PATH, media_type="audio/wav", filename="generated_audio.wav"
     )
 
 
@@ -87,48 +87,47 @@ async def inference_client_text_to_speech(request: InferenceClientTTSRequest):
     """
     if not SAMPLE_AUDIO_PATH or not os.path.exists(SAMPLE_AUDIO_PATH):
         raise HTTPException(
-            status_code=500, 
-            detail="Sample audio file not found. Please provide --sample-audio path."
+            status_code=500,
+            detail="Sample audio file not found. Please provide --sample-audio path.",
         )
-    
-    print(f"InferenceClient TTS Request - Text: '{request.inputs[:50]}...' Extra body: {request.extra_body}")
-    
+
+    print(
+        f"InferenceClient TTS Request - Text: '{request.inputs[:50]}...' Extra body: {request.extra_body}"
+    )
+
     # Return the sample audio file
     return FileResponse(
-        SAMPLE_AUDIO_PATH,
-        media_type="audio/wav",
-        filename="generated_audio.wav"
+        SAMPLE_AUDIO_PATH, media_type="audio/wav", filename="generated_audio.wav"
     )
 
 
 def main():
     global SAMPLE_AUDIO_PATH
-    
+
     parser = argparse.ArgumentParser(description="Start Chatterbox TTS Server")
-    parser.add_argument("--port", "-p", type=int, default=7860, help="Port to run server on")
+    parser.add_argument(
+        "--port", "-p", type=int, default=7860, help="Port to run server on"
+    )
     parser.add_argument("--host", default="0.0.0.0", help="Host to bind to")
-    parser.add_argument("--sample-audio", required=True, help="Path to sample audio file to return")
-    
+    parser.add_argument(
+        "--sample-audio", required=True, help="Path to sample audio file to return"
+    )
+
     args = parser.parse_args()
-    
+
     # Validate sample audio file exists
     if not os.path.exists(args.sample_audio):
         print(f"Error: Sample audio file not found: {args.sample_audio}")
         exit(1)
-    
+
     SAMPLE_AUDIO_PATH = args.sample_audio
-    
+
     print(f"🎙️ Starting Chatterbox TTS Server on {args.host}:{args.port}")
     print(f"📁 Using sample audio: {args.sample_audio}")
     print(f"🌐 API endpoint: http://localhost:{args.port}/")
-    
-    uvicorn.run(
-        app,
-        host=args.host,
-        port=args.port,
-        log_level="info"
-    )
+
+    uvicorn.run(app, host=args.host, port=args.port, log_level="info")
 
 
 if __name__ == "__main__":
-    main()
+    main()

test_chatterbox.py

@@ -13,7 +13,7 @@ text = "In a hole in the ground there lived a hobbit."
 extra_body = {
     "exaggeration": 0.25,
     "temperature": 0.7,
-    "audio_url": "https://huggingface.co/spaces/abidlabs/hfstudio/resolve/main/frontend/static/voices/lily.mp3"
+    "audio_url": "https://huggingface.co/spaces/abidlabs/hfstudio/resolve/main/frontend/static/voices/lily.mp3",
 }
 
 bytes = client.text_to_speech(
@@ -22,4 +22,4 @@ bytes = client.text_to_speech(
     extra_body=extra_body,
 )
 
-print(bytes)
+print(bytes)