Update index.html

index.html

@@ -53,15 +53,19 @@
                 <h1 class="text-4xl font-extrabold tracking-tight text-white">Cartesia <span class="text-blue-500">AI</span></h1>
                 <p class="text-gray-400">TTS + Voice Cloning 🎤</p>
             </div>
-            <div class="space-y-2">
-                <div class="flex items-center gap-3 cartesia-card p-2 px-4 rounded-full">
-                    <span id="statusDot" class="h-3 w-3 rounded-full bg-red-500 pulse-red"></span>
-                    <span id="statusText" class="text-sm font-medium text-gray-300 uppercase">Disconnected</span>
+            <div class="space-y-2 w-full md:w-auto">
+                <div class="flex items-center gap-3 cartesia-card p-2 px-4 rounded-full justify-between md:justify-start">
+                    <div class="flex items-center gap-3">
+                        <span id="statusDot" class="h-3 w-3 rounded-full bg-red-500 pulse-red flex-shrink-0"></span>
+                        <span id="statusText" class="text-sm font-medium text-gray-300 uppercase">Disconnected</span>
+                    </div>
+                    <div id="creditArea" class="hidden flex items-center gap-2">
+                        <span class="text-xs text-gray-400">|</span>
+                        <div class="credit-badge" id="creditBadge">💰 Loading...</div>
+                    </div>
                 </div>
-                <div id="creditArea" class="hidden text-right">
-                    <p class="text-xs text-gray-500 mb-1">Available:</p>
-                    <div class="credit-badge" id="creditBadge">💰 Loading...</div>
-                    <button id="refreshCreditsBtn" class="text-xs text-gray-500 hover:text-gray-300 mt-1">🔄 Refresh</button>
+                <div id="creditRefreshArea" class="hidden text-center md:text-right">
+                    <button id="refreshCreditsBtn" class="text-xs text-gray-500 hover:text-gray-300">🔄 Refresh Credits</button>
                 </div>
             </div>
         </div>
@@ -225,6 +229,8 @@
         const shareBtn = document.getElementById('shareBtn');
         const creditArea = document.getElementById('creditArea');
         const creditBadge = document.getElementById('creditBadge');
+        const refreshCreditsBtn = document.getElementById('refreshCreditsBtn');
+        const creditRefreshArea = document.getElementById('creditRefreshArea');
 
         // Clone elements
         const uploadArea = document.getElementById('uploadArea');
@@ -282,6 +288,65 @@
             }
         }
 
+        // Fetch and display credits
+        async function fetchCredits(key) {
+            try {
+                let credits = null;
+                
+                // Try endpoint 1
+                try {
+                    const creditsResponse = await fetch(`${CARTESIA_API_URL}/account/billing/credits`, {
+                        headers: { 
+                            "X-API-Key": key,
+                            "Cartesia-Version": "2024-06-10"
+                        }
+                    });
+
+                    if (creditsResponse.ok) {
+                        const creditsData = await creditsResponse.json();
+                        credits = creditsData.credits || creditsData.remaining_credits || creditsData.balance || 0;
+                        console.log("Credits from /account/billing/credits:", credits);
+                    }
+                } catch (e1) {
+                    console.log("Endpoint 1 failed, trying endpoint 2");
+                    // Try endpoint 2
+                    try {
+                        const accountResponse = await fetch(`${CARTESIA_API_URL}/account`, {
+                            headers: { 
+                                "X-API-Key": key,
+                                "Cartesia-Version": "2024-06-10"
+                            }
+                        });
+
+                        if (accountResponse.ok) {
+                            const accountData = await accountResponse.json();
+                            credits = accountData.credits || accountData.remaining_credits || accountData.balance || 0;
+                            console.log("Credits from /account:", credits);
+                        }
+                    } catch (e2) {
+                        console.log("Both endpoints failed", e1, e2);
+                    }
+                }
+
+                if (credits !== null) {
+                    const displayCredits = typeof credits === 'number' ? credits.toFixed(0) : credits;
+                    creditBadge.textContent = `💰 ${displayCredits} Credits`;
+                    creditArea.classList.remove('hidden');
+                    creditRefreshArea.classList.remove('hidden');
+                    console.log("Credits displayed:", displayCredits);
+                } else {
+                    creditBadge.textContent = `💰 Unable to fetch`;
+                    creditArea.classList.remove('hidden');
+                    creditRefreshArea.classList.remove('hidden');
+                }
+            } catch (e) {
+                console.log("Credit fetch error:", e);
+                creditBadge.textContent = `💰 Error`;
+                creditArea.classList.remove('hidden');
+                creditRefreshArea.classList.remove('hidden');
+            }
+        }
+
         // Toggle key visibility
         toggleShowKey.addEventListener('click', () => {
             const type = apiKeyInput.type === 'password' ? 'text' : 'password';
@@ -297,6 +362,7 @@
             statusDot.className = "h-3 w-3 rounded-full bg-red-500 pulse-red";
             statusText.textContent = "DISCONNECTED";
             creditArea.classList.add('hidden');
+            creditRefreshArea.classList.add('hidden');
         });
 
         // Connect and fetch voices + credits
@@ -329,52 +395,8 @@
                     voiceSelect.appendChild(option);
                 });
 
-                // Fetch credits - Try multiple endpoints
-                try {
-                    let credits = null;
-                    
-                    // Try endpoint 1
-                    try {
-                        const creditsResponse = await fetch(`${CARTESIA_API_URL}/account/billing/credits`, {
-                            headers: { 
-                                "X-API-Key": key,
-                                "Cartesia-Version": "2024-06-10"
-                            }
-                        });
-
-                        if (creditsResponse.ok) {
-                            const creditsData = await creditsResponse.json();
-                            credits = creditsData.credits || creditsData.remaining_credits || creditsData.balance || 0;
-                        }
-                    } catch (e1) {
-                        // Try endpoint 2
-                        try {
-                            const accountResponse = await fetch(`${CARTESIA_API_URL}/account`, {
-                                headers: { 
-                                    "X-API-Key": key,
-                                    "Cartesia-Version": "2024-06-10"
-                                }
-                            });
-
-                            if (accountResponse.ok) {
-                                const accountData = await accountResponse.json();
-                                credits = accountData.credits || accountData.remaining_credits || accountData.balance || 0;
-                            }
-                        } catch (e2) {
-                            console.log("Credits endpoints failed");
-                        }
-                    }
-
-                    if (credits !== null && credits > 0) {
-                        creditBadge.textContent = `💰 ${(credits).toFixed(0)} Credits`;
-                        creditArea.classList.remove('hidden');
-                    } else if (credits !== null) {
-                        creditBadge.textContent = `💰 ${(credits).toFixed(0)} Credits`;
-                        creditArea.classList.remove('hidden');
-                    }
-                } catch (e) {
-                    console.log("Credit fetch error:", e);
-                }
+                // Fetch credits
+                fetchCredits(key);
 
                 statusDot.className = "h-3 w-3 rounded-full bg-green-500 shadow-lg shadow-green-900";
                 statusText.textContent = "CONNECTED";
@@ -393,6 +415,17 @@
 
         connectBtn.addEventListener('click', fetchVoices);
 
+        // Refresh credits button
+        if (refreshCreditsBtn) {
+            refreshCreditsBtn.addEventListener('click', async () => {
+                const key = apiKeyInput.value.trim();
+                if (!key) return updateLog("API Key daalo pehle", "error");
+                refreshCreditsBtn.textContent = "⏳ Loading...";
+                await fetchCredits(key);
+                refreshCreditsBtn.textContent = "🔄 Refresh Credits";
+            });
+        }
+
         // File upload
         uploadArea.addEventListener('click', () => audioFile.click());
         uploadArea.addEventListener('dragover', (e) => {
@@ -603,4 +636,4 @@
         window.addEventListener('load', initializeApp);
     </script>
 </body>
-</html>
+</html>