Spaces:

InnovationAI
/

EnglishStudyHelper

Sleeping

App Files Files Community

amauricunha commited on Oct 13, 2025

Commit

03154c7

verified ·

1 Parent(s): c6c150b

Upload 4 files

Browse files

Files changed (3) hide show

templates/admin.html +0 -1
templates/base.html +39 -527
templates/index.html +25 -408

templates/admin.html CHANGED Viewed

@@ -106,7 +106,6 @@
 <!-- Toast Notifications -->
 <div id="toastContainer" class="fixed top-4 right-4 z-50"></div>
-<script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 // Minimal, consolidated admin UI JS that talks to existing backend endpoints

 <!-- Toast Notifications -->
 <div id="toastContainer" class="fixed top-4 right-4 z-50"></div>
 <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 <script>
 // Minimal, consolidated admin UI JS that talks to existing backend endpoints

templates/base.html CHANGED Viewed

@@ -5,554 +5,66 @@
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{% block title %}English Helper{% endblock %}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <style>
         /* Small helper styles for the header/navigation */
         .site-nav { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
         .site-nav a { margin-right: 1rem; color: #374151; text-decoration: none; font-weight: 600; }
-        .site-nav a:hover { color: #1d4ed8; }
-        .container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
     </style>
 </head>
-<body class="bg-gray-50 text-gray-800">
-    <header class="site-nav">
-        <div class="container flex items-center justify-between">
             <div class="flex items-center gap-4">
-                <a href="/" class="flex items-center gap-2"><span style="font-size:20px">🎓</span><strong>English Helper</strong></a>
-                <nav class="hidden md:flex items-center">
-                    <a href="/">Home</a>
-                    <a href="/admin">Admin</a>
-                    <a href="/status">Status</a>
-                </nav>
             </div>
-            <div>
-                <!-- optional right-side links -->
             </div>
         </div>
-    </header>
-    <!-- Demo mode banner -->
-    <div id="demoBanner" class="container mt-2">
-        <div class="bg-yellow-50 border border-yellow-200 rounded p-3 text-sm flex justify-between items-center" style="display:none;" role="status">
-            <div>
-                <strong>Demo Mode</strong> — Running with in-memory data. Changes won't persist after a restart.
-            </div>
-            <div>
-                <button id="dismissDemo" class="px-3 py-1 bg-yellow-200 rounded text-sm">Dismiss</button>
-            </div>
-        </div>
     </div>
-    <main class="container mt-6">
-        {% block content %}{% endblock %}
     </main>
-    <!-- Place for page-specific scripts -->
     {% block scripts %}{% endblock %}
-    <script>
-        (async function(){
-            try {
-                const dismissed = localStorage.getItem('eh_demo_dismissed');
-                if (dismissed === '1') return;
-                const res = await fetch('/system/status');
-                if (!res.ok) return;
-                const json = await res.json();
-                if (json.storage === 'in_memory' || json.demo_mode) {
-                    const banner = document.getElementById('demoBanner').querySelector('div');
-                    if (banner) {
-                        banner.style.display = 'flex';
-                        document.getElementById('dismissDemo').addEventListener('click', () => {
-                            banner.style.display = 'none';
-                            localStorage.setItem('eh_demo_dismissed', '1');
-                        });
-                    }
-                }
-            } catch (e) {
-                // ignore
-            }
-        })();
-    </script>
-</body>
-</html>
-                                </div>
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            `;
-            modal.classList.remove('hidden');
-        }
-        function closeUserModal() {
-            document.getElementById('userDetailModal').classList.add('hidden');
-        }
-        async function deleteUser(userId, email) {
-            if (!confirm(`Are you sure you want to delete user "${email}" and all their data? This action cannot be undone.`)) {
-                return;
-            }
             try {
-                const response = await fetch(`/admin/users/${userId}`, {
-                    method: 'DELETE'
                 });
-                const data = await response.json();
-                if (data.success) {
-                    showToast('User deleted successfully', 'success');
-                    loadUsers(); // Refresh the table
-                } else {
-                    showToast('Failed to delete user', 'error');
-                }
-            } catch (error) {
-                console.error('Delete user error:', error);
-                showToast('Failed to delete user', 'error');
-            }
-        }
-        async function loadDatabaseSchema() {
-            try {
-                const response = await fetch('/admin/database/schema');
-                const data = await response.json();
-                if (data.success) {
-                    updateDatabaseSchema(data.schema);
-                }
-            } catch (error) {
-                console.error('Schema loading error:', error);
-                showToast('Failed to load database schema', 'error');
-            }
-        }
-        function updateDatabaseSchema(schema) {
-            const container = document.getElementById('databaseSchema');
-            container.innerHTML = Object.entries(schema).map(([tableName, tableInfo]) => `
-                <div class="border rounded-lg p-4">
-                    <div class="flex justify-between items-center mb-3">
-                        <h5 class="font-semibold text-lg">${tableName}</h5>
-                        <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">
-                            ${tableInfo.row_count} rows
-                        </span>
-                    </div>
-                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 text-sm">
-                        ${tableInfo.columns.map(col => `
-                            <div class="flex items-center space-x-2">
-                                <span class="font-medium">${col.name}</span>
-                                <span class="text-gray-500">${col.type}</span>
-                                ${col.primary_key ? '<span class="bg-yellow-100 text-yellow-800 px-1 rounded text-xs">PK</span>' : ''}
-                                ${col.not_null ? '<span class="bg-red-100 text-red-800 px-1 rounded text-xs">NOT NULL</span>' : ''}
-                            </div>
-                        `).join('')}
-                    </div>
-                </div>
-            `).join('');
-        }
-        async function loadTokenUsage() {
-            try {
-                // For now, create sample charts with existing data
-                await createTokenUsageCharts();
-            } catch (error) {
-                console.error('Token usage loading error:', error);
-                showToast('Failed to load token usage data', 'error');
-            }
-        }
-        async function createTokenUsageCharts() {
-            // Provider Usage Chart
-            const providerCtx = document.getElementById('providerUsageChart').getContext('2d');
-            new Chart(providerCtx, {
-                type: 'bar',
-                data: {
-                    labels: ['Groq', 'Gemini'],
-                    datasets: [{
-                        label: 'Input Tokens',
-                        data: [150000, 85000],
-                        backgroundColor: 'rgba(59, 130, 246, 0.8)',
-                        borderColor: 'rgba(59, 130, 246, 1)',
-                        borderWidth: 1
-                    }, {
-                        label: 'Output Tokens',
-                        data: [45000, 28000],
-                        backgroundColor: 'rgba(147, 51, 234, 0.8)',
-                        borderColor: 'rgba(147, 51, 234, 1)',
-                        borderWidth: 1
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'Token Usage by Provider'
-                        }
-                    },
-                    scales: {
-                        y: {
-                            beginAtZero: true,
-                            title: {
-                                display: true,
-                                text: 'Tokens'
-                            }
-                        }
-                    }
-                }
-            });
-            // Cost Breakdown Chart
-            const costCtx = document.getElementById('costBreakdownChart').getContext('2d');
-            new Chart(costCtx, {
-                type: 'pie',
-                data: {
-                    labels: ['Conversation', 'Content Analysis', 'Recommendations', 'Study Planning'],
-                    datasets: [{
-                        data: [40, 25, 20, 15],
-                        backgroundColor: [
-                            'rgba(34, 197, 94, 0.8)',
-                            'rgba(59, 130, 246, 0.8)',
-                            'rgba(147, 51, 234, 0.8)',
-                            'rgba(251, 146, 60, 0.8)'
-                        ],
-                        borderColor: [
-                            'rgba(34, 197, 94, 1)',
-                            'rgba(59, 130, 246, 1)',
-                            'rgba(147, 51, 234, 1)',
-                            'rgba(251, 146, 60, 1)'
-                        ],
-                        borderWidth: 2
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'Cost Distribution by Operation Type'
-                        },
-                        legend: {
-                            position: 'bottom'
-                        }
-                    }
-                }
-            });
-        }
-        function refreshUsers() {
-            currentPage = 1;
-            loadUsers();
-        }
-        function previousPage() {
-            if (currentPage > 1) {
-                currentPage--;
-                loadUsers();
-            }
-        }
-        function nextPage() {
-            if (usersData && currentPage < usersData.total_pages) {
-                currentPage++;
-                loadUsers();
-            }
-        }
-        function createCharts(stats) {
-            createUserGrowthChart(stats);
-            createTokenCostChart(stats);
-        }
-        function createUserGrowthChart(stats) {
-            const ctx = document.getElementById('userGrowthChart').getContext('2d');
-            // Generate sample data for last 30 days
-            const dates = [];
-            const userData = [];
-            const today = new Date();
-            for (let i = 29; i >= 0; i--) {
-                const date = new Date(today);
-                date.setDate(date.getDate() - i);
-                dates.push(date.toLocaleDateString());
-                // Simulate growth data (would come from real analytics)
-                userData.push(Math.max(0, stats.users?.total - Math.floor(Math.random() * i * 2)));
-            }
-            new Chart(ctx, {
-                type: 'line',
-                data: {
-                    labels: dates,
-                    datasets: [{
-                        label: 'Total Users',
-                        data: userData,
-                        borderColor: 'rgb(59, 130, 246)',
-                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
-                        fill: true,
-                        tension: 0.4
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'User Growth Over Time'
-                        }
-                    },
-                    interaction: {
-                        intersect: false,
-                    },
-                    scales: {
-                        x: {
-                            display: true,
-                            title: {
-                                display: true,
-                                text: 'Date'
-                            }
-                        },
-                        y: {
-                            display: true,
-                            title: {
-                                display: true,
-                                text: 'Users'
-                            }
-                        }
-                    }
-                }
-            });
-        }
-        function createTokenCostChart(stats) {
-            const ctx = document.getElementById('tokenCostChart').getContext('2d');
-            // Sample cost data
-            const providers = ['Groq', 'Gemini'];
-            const costs = [
-                (stats.api_usage?.estimated_cost || 0) * 0.6, // Groq portion
-                (stats.api_usage?.estimated_cost || 0) * 0.4  // Gemini portion
-            ];
-            new Chart(ctx, {
-                type: 'doughnut',
-                data: {
-                    labels: providers,
-                    datasets: [{
-                        label: 'Cost ($)',
-                        data: costs,
-                        backgroundColor: [
-                            'rgba(59, 130, 246, 0.8)',
-                            'rgba(147, 51, 234, 0.8)'
-                        ],
-                        borderColor: [
-                            'rgba(59, 130, 246, 1)',
-                            'rgba(147, 51, 234, 1)'
-                        ],
-                        borderWidth: 2
-                    }]
-                },
-                options: {
-                    responsive: true,
-                    plugins: {
-                        title: {
-                            display: true,
-                            text: 'API Costs by Provider'
-                        },
-                        legend: {
-                            position: 'bottom',
-                        }
-                    }
-                }
-            });
-        }
-        function exportUsers() {
-            window.open('/admin/export/users', '_blank');
-            showToast('Users data export started', 'success');
-        }
-        function exportTokens() {
-            window.open('/admin/export/tokens', '_blank');
-            showToast('Token usage data export started', 'success');
-        }
-        async function loadSystemHealth() {
-            try {
-                // Load system health metrics
-                const healthResponse = await fetch('/admin/system/health');
-                const healthData = await healthResponse.json();
-                if (healthData.success) {
-                    updateSystemMetrics(healthData.health);
-                }
-                // Load system alerts
-                const alertsResponse = await fetch('/admin/system/alerts');
-                const alertsData = await alertsResponse.json();
-                if (alertsData.success) {
-                    updateSystemAlerts(alertsData.alerts);
-                }
-            } catch (error) {
-                console.error('System health loading error:', error);
-                showToast('Failed to load system health data', 'error');
-            }
-        }
-        function updateSystemMetrics(health) {
-            // Memory metrics
-            if (health.memory) {
-                const memoryPercent = health.memory.percent || 0;
-                const memoryUsed = Math.round(health.memory.used / 1024 / 1024 / 1024 * 100) / 100;
-                const memoryTotal = Math.round(health.memory.total / 1024 / 1024 / 1024 * 100) / 100;
-                document.getElementById('memoryMetrics').innerHTML = `
-                    <div class="space-y-2">
-                        <div class="flex justify-between">
-                            <span>Used:</span>
-                            <span>${memoryUsed}GB / ${memoryTotal}GB</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-blue-600 h-2 rounded-full" style="width: ${memoryPercent}%"></div>
-                        </div>
-                        <div class="text-xs text-gray-500">${memoryPercent.toFixed(1)}% used</div>
-                    </div>
-                `;
-            }
-            // Disk metrics
-            if (health.disk) {
-                const diskPercent = health.disk.percent || 0;
-                const diskUsed = Math.round(health.disk.used / 1024 / 1024 / 1024 * 100) / 100;
-                const diskTotal = Math.round(health.disk.total / 1024 / 1024 / 1024 * 100) / 100;
-                document.getElementById('diskMetrics').innerHTML = `
-                    <div class="space-y-2">
-                        <div class="flex justify-between">
-                            <span>Used:</span>
-                            <span>${diskUsed}GB / ${diskTotal}GB</span>
-                        </div>
-                        <div class="w-full bg-gray-200 rounded-full h-2">
-                            <div class="bg-green-600 h-2 rounded-full" style="width: ${diskPercent}%"></div>
-                        </div>
-                        <div class="text-xs text-gray-500">${diskPercent.toFixed(1)}% used</div>
-                    </div>
-                `;
-            }
-            // Database metrics
-            if (health.database) {
-                document.getElementById('databaseMetrics').innerHTML = `
-                    <div class="space-y-2">
-                        <div class="flex justify-between">
-                            <span>Size:</span>
-                            <span>${health.database.size_mb}MB</span>
-                        </div>
-                        <div class="flex justify-between">
-                            <span>Uptime:</span>
-                            <span>${health.uptime || 'Unknown'}</span>
-                        </div>
-                    </div>
-                `;
-            }
-            // Error logs
-            if (health.recent_errors && health.recent_errors.length > 0) {
-                document.getElementById('errorLogs').innerHTML = `
-                    <div class="space-y-2 max-h-64 overflow-y-auto">
-                        ${health.recent_errors.map(error => `
-                            <div class="p-2 bg-red-50 border border-red-200 rounded text-sm">
-                                <div class="flex justify-between items-start">
-                                    <span class="font-medium text-red-800">${error.level}</span>
-                                    <span class="text-red-600 text-xs">${error.timestamp}</span>
-                                </div>
-                                <div class="text-red-700 mt-1">${error.message}</div>
-                                <div class="text-red-600 text-xs mt-1">Module: ${error.module}</div>
-                            </div>
-                        `).join('')}
-                    </div>
-                `;
-            } else {
-                document.getElementById('errorLogs').innerHTML = '<div class="text-center text-gray-500 py-4">No recent errors</div>';
-            }
-        }
-        function updateSystemAlerts(alerts) {
-            const container = document.getElementById('systemAlerts');
-            if (alerts.length === 0) {
-                container.innerHTML = '<div class="text-center text-green-600 py-4">✅ All systems normal</div>';
-                return;
-            }
-            container.innerHTML = alerts.map(alert => {
-                const bgColor = alert.type === 'error' ? 'bg-red-50 border-red-200' :
-                               alert.type === 'warning' ? 'bg-yellow-50 border-yellow-200' :
-                               'bg-blue-50 border-blue-200';
-                const textColor = alert.type === 'error' ? 'text-red-800' :
-                                 alert.type === 'warning' ? 'text-yellow-800' :
-                                 'text-blue-800';
-                const icon = alert.type === 'error' ? '🚨' :
-                            alert.type === 'warning' ? '⚠️' : 'ℹ️';
-                return `
-                    <div class="p-3 ${bgColor} border rounded-lg">
-                        <div class="flex items-start gap-3">
-                            <span class="text-lg">${icon}</span>
-                            <div class="flex-1">
-                                <div class="font-medium ${textColor}">${alert.message}</div>
-                                <div class="text-sm ${textColor} opacity-75 mt-1">Action: ${alert.action}</div>
-                            </div>
-                        </div>
-                    </div>
-                `;
-            }).join('');
-        }
-        function formatDate(dateString) {
-            if (!dateString) return 'Never';
-            return new Date(dateString).toLocaleDateString() + ' ' + new Date(dateString).toLocaleTimeString();
-        }
-        function showToast(message, type = 'info') {
-            const toast = document.createElement('div');
-            toast.className = `fixed top-4 right-4 p-4 rounded-lg shadow-md z-50 ${
-                type === 'success' ? 'bg-green-500' :
-                type === 'error' ? 'bg-red-500' :
-                type === 'warning' ? 'bg-yellow-500' : 'bg-blue-500'
-            } text-white`;
-            toast.textContent = message;
-            document.body.appendChild(toast);
-            setTimeout(() => {
-                toast.remove();
-            }, 5000);
         }
-        // Add CSS for tab styling
-        const style = document.createElement('style');
-        style.textContent = `
-            .admin-tab {
-                padding: 0.5rem 1rem;
-                border-bottom: 2px solid transparent;
-                font-medium: 500;
-                text-decoration: none;
-                transition: all 0.2s;
-            }
-            .admin-tab:hover {
-                text-decoration: none;
-                border-bottom-color: #d1d5db;
-            }
-            .admin-tab.active {
-                border-bottom-color: #3b82f6;
-                color: #3b82f6;
-            }
-        `;
-        document.head.appendChild(style);
     </script>
 </body>
 </html>

     <meta name="viewport" content="width=device-width,initial-scale=1">
     <title>{% block title %}English Helper{% endblock %}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <!-- Tailwind CDN (kept for quick demo; consider building Tailwind for production) -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    {% block head %}{% endblock %}
     <style>
         /* Small helper styles for the header/navigation */
         .site-nav { background: #ffffff; border-bottom: 1px solid #e5e7eb; }
         .site-nav a { margin-right: 1rem; color: #374151; text-decoration: none; font-weight: 600; }
     </style>
 </head>
+<body class="bg-gray-50 min-h-screen">
+    <nav class="site-nav p-4">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
             <div class="flex items-center gap-4">
+                <a href="/" class="font-bold text-lg">English Helper</a>
             </div>
+            <div class="flex items-center gap-4">
+                <a href="/admin" class="text-sm">Admin</a>
+                <a href="/dashboard" class="text-sm">Dashboard</a>
+                <a href="/status" class="text-sm">Status</a>
             </div>
         </div>
+    </nav>
+    <!-- Demo banner (visible on HF spaces) -->
+    <div id="demoBanner" class="w-full text-center py-2 px-4" style="display:none; background:#eff6ff; color:#1e40af;">
+        🚀 Demo Mode — data is stored in-memory and will be lost on restart. <button id="dismissDemo" class="ml-3 underline">Dismiss</button>
     </div>
+    <main class="py-8">
+        <div class="max-w-6xl mx-auto px-4">
+            {% block content %}{% endblock %}
+        </div>
     </main>
     {% block scripts %}{% endblock %}
+    <script>
+        // Demo banner logic
+        (function(){
             try {
+                const isHF = window.location.hostname.includes('hf.space') || window.location.hostname.includes('huggingface.co');
+                if (!isHF) return;
+                if (localStorage.getItem('eh_demo_dismissed')) return;
+                const b = document.getElementById('demoBanner');
+                if (b) b.style.display = 'block';
+                document.getElementById('dismissDemo')?.addEventListener('click', ()=>{
+                    localStorage.setItem('eh_demo_dismissed','1');
+                    if (b) b.style.display = 'none';
                 });
+            } catch(e) { /* non-critical */ }
+        })();
+        // Small toast helper used across templates
+        function showToast(msg, type='info'){
+            const t = document.createElement('div');
+            t.className = 'fixed top-4 right-4 p-3 rounded shadow z-50 ' + (type==='success'?'bg-green-600':type==='error'?'bg-red-600':'bg-blue-600');
+            t.textContent = msg;
+            document.body.appendChild(t);
+            setTimeout(()=>t.remove(), 4000);
         }
     </script>
 </body>
 </html>

templates/index.html CHANGED Viewed

@@ -101,7 +101,6 @@
 {% endblock %}
 {% block scripts %}
-<script src="https://cdn.tailwindcss.com"></script>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script>
 // Core client-side JS preserved: minimal initializers and references used by the UI
@@ -192,420 +191,38 @@ async function generateStudyPlan(){
         else showToast('Failed to generate plan','error');
     }catch(e){ showToast('Plan error','error'); }
 }
-</script>
-{% endblock %}
-        // Show animation
-        setTimeout(() => toast.classList.add('show'), 100);
-        // Auto remove
-        setTimeout(() => {
-            toast.classList.remove('show');
-            setTimeout(() => toast.remove(), 300);
-        }, duration);
-    }
-    function getToastTitle(type) {
-        const titles = {
-            'success': '✅ Success',
-            'error': '❌ Error',
-            'warning': '⚠️ Warning',
-            'info': 'ℹ️ Info'
-        };
-        return titles[type] || 'Info';
-    }
-    // --- ENHANCED ERROR HANDLING ---
-    async function handleApiRequest(url, options, errorContext = 'Request') {
-        try {
-            const response = await fetch(url, options);
-            if (!response.ok) {
-                let errorMessage = `HTTP ${response.status}`;
-                try {
-                    const errorData = await response.json();
-                    errorMessage = errorData.error || errorMessage;
-                } catch (e) {
-                    // Use default HTTP error
-                }
-                throw new Error(errorMessage);
-            }
-            return await response.json();
-        } catch (error) {
-            console.error(`${errorContext} failed:`, error);
-            if (error.name === 'TypeError' && error.message.includes('fetch')) {
-                showToast('Network connection error. Please check your internet connection.', 'error');
-            } else if (error.message.includes('503')) {
-                showToast('Service temporarily unavailable. Please check API configuration.', 'warning');
-            } else {
-                showToast(`${errorContext} failed: ${error.message}`, 'error');
-            }
-            throw error;
-        }
-    }
-    // --- LOADING STATE MANAGEMENT ---
-    function setButtonLoading(button, loading, originalText = null) {
-        if (loading) {
-            button.disabled = true;
-            button.dataset.originalText = button.innerHTML;
-            button.innerHTML = '<div class="spinner mr-2"></div> Loading...';
-        } else {
-            button.disabled = false;
-            button.innerHTML = originalText || button.dataset.originalText || button.innerHTML;
-        }
-    }
-    // --- INPUT VALIDATION ---
-    function validateInput(input, errorMessage) {
-        const value = input.value?.trim() || '';
-        const errorElement = input.parentNode.querySelector('.error-message');
-        if (!value) {
-            input.classList.add('form-error');
-            if (!errorElement) {
-                const error = document.createElement('div');
-                error.className = 'error-message';
-                error.textContent = errorMessage;
-                input.parentNode.appendChild(error);
-            }
-            return false;
-        } else {
-            input.classList.remove('form-error');
-            if (errorElement) errorElement.remove();
-            return true;
-        }
-    }
-    // --- CARREGAMENTO DINÂMICO DE MODELOS ---
-    async function populateModelSelector() {
-        try {
-            const models = await handleApiRequest('/list-models', {}, 'Loading models');
-            modelSelector.innerHTML = '';
-            const geminiGroup = document.createElement('optgroup');
-            geminiGroup.label = 'Google Gemini';
-            const groqGroup = document.createElement('optgroup');
-            groqGroup.label = 'Groq (Ultra Fast)';
-            models.forEach(model => {
-                const option = document.createElement('option');
-                option.value = model.value;
-                option.textContent = model.name;
-                if (model.value.startsWith('gemini:')) {
-                    geminiGroup.appendChild(option);
-                } else if (model.value.startsWith('groq:')) {
-                    groqGroup.appendChild(option);
-                }
-            });
-            modelSelector.appendChild(geminiGroup);
-            modelSelector.appendChild(groqGroup);
-            showToast('Models loaded successfully', 'success', 2000);
-        } catch (error) {
-            modelSelector.innerHTML = '<option>Error loading models</option>';
-        }
-    }
-    // --- FUNÇÕES DE ÁUDIO ---
-    // Cache para armazenar áudios gerados
-    const audioCache = new Map();
-    // Função para gerar uma chave de cache baseada no texto e voice
-    function getAudioCacheKey(text, tld) {
-        return `${text.substring(0, 100)}_${tld}_${text.length}`;
-    }
-    // Função para limpar cache de áudio (útil quando muda o texto significativamente)
-    function clearAudioCache() {
-        audioCache.forEach(blob => {
-            if (blob && blob.url) {
-                URL.revokeObjectURL(blob.url);
-            }
-        });
-        audioCache.clear();
-        if (currentAudioUrl) {
-            URL.revokeObjectURL(currentAudioUrl);
-            currentAudioUrl = null;
-        }
-        console.log('Audio cache cleared');
-    }
-    async function fetchAudioBlob(text) {
-        const selectedTld = voiceSelector.value;
-        const cacheKey = getAudioCacheKey(text, selectedTld);
-        // Verificar se já temos esse áudio no cache
-        if (audioCache.has(cacheKey)) {
-            return audioCache.get(cacheKey);
-        }
-        const response = await fetch('/tts-proxy', {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ text: text, tld: selectedTld })
-        });
-        if (!response.ok) {
-            const err = await response.json();
-            throw new Error(err.error || `HTTP error! status: ${response.status}`);
-        }
-        const blob = await response.blob();
-        // Armazenar no cache (limitar a 10 áudios para não usar muita memória)
-        if (audioCache.size >= 10) {
-            const firstKey = audioCache.keys().next().value;
-            // Revogar URL do áudio mais antigo
-            const oldBlob = audioCache.get(firstKey);
-            if (oldBlob && oldBlob.url) {
-                URL.revokeObjectURL(oldBlob.url);
-            }
-            audioCache.delete(firstKey);
-        }
-        audioCache.set(cacheKey, blob);
-        return blob;
-    }
-    async function playAudio(text, event) {
-        if(event) event.stopPropagation();
-        if (!text || !text.trim()) {
-            showToast('No text to play', 'warning', 2000);
-            return;
-        }
-        try {
-            const audioBlob = await fetchAudioBlob(text);
-            const audioUrl = URL.createObjectURL(audioBlob);
-            const audio = new Audio(audioUrl);
-            audio.onplay = () => showToast('Playing audio...', 'info', 1000);
-            audio.onended = () => URL.revokeObjectURL(audioUrl);
-            audio.onerror = () => showToast('Failed to play audio', 'error');
-            await audio.play();
-        } catch (error) {
-            console.error('Error playing audio:', error);
-            showToast('Failed to generate audio. Please try again.', 'error');
-        }
-    }
-    // --- LÓGICA DO EDITOR ---
-    const charCount = document.getElementById('charCount');
-    const playText = document.getElementById('playText');
-    const playSpinner = document.getElementById('playSpinner');
-    let lastTextForCache = '';
     textEditor.addEventListener('input', () => {
-        const len = textEditor.innerText.length;
-        const currentText = textEditor.innerText.trim();
-        // Atualizar contador
-        charCount.textContent = `${len}/10000`;
-        playButton.disabled = len === 0;
-        // Limpar cache se o texto mudou significativamente (mais de 50 caracteres de diferença)
-        if (Math.abs(currentText.length - lastTextForCache.length) > 50 ||
-            (currentText.length > 100 && currentText.substring(0, 100) !== lastTextForCache.substring(0, 100))) {
-            if (currentAudioUrl) {
-                audioPlayer.src = '';
-                audioPlayer.classList.add('hidden');
-            }
-            lastTextForCache = currentText;
-        }
-        // Mudança de cor baseada no limite
-        if (len > 10000) {
-            charCount.classList.add('text-red-500');
-            charCount.classList.remove('text-gray-500');
-        } else if (len > 8000) {
-            charCount.classList.remove('text-red-500', 'text-gray-500');
-            charCount.classList.add('text-yellow-500');
-        } else {
-            charCount.classList.remove('text-red-500', 'text-yellow-500');
-            charCount.classList.add('text-gray-500');
-        }
-    });
-    // Controle de seleção de texto para flashcards e áudio
-    textEditor.addEventListener('mouseup', () => {
-        createCardButton.disabled = !window.getSelection().toString().trim();
-        handleTextSelection();
-    });
-    textEditor.addEventListener('keyup', () => {
-        handleTextSelection();
     });
     function handleTextSelection() {
-        const selectedText = window.getSelection().toString().trim();
-        const playSelectionBtn = document.getElementById('playSelectionBtn');
-        if (selectedText && selectedText.length > 0) {
-            if (!playSelectionBtn) {
-                // Criar botão de tocar seleção se não existir
-                const selectionBtn = document.createElement('button');
-                selectionBtn.id = 'playSelectionBtn';
-                selectionBtn.className = 'btn bg-blue-500 hover:bg-blue-600 text-white ml-2';
-                selectionBtn.innerHTML = '🎵 Play Selection';
-                selectionBtn.onclick = () => playSelectedText();
-                // Inserir próximo ao botão Play principal
-                playButton.parentNode.insertBefore(selectionBtn, playButton.nextSibling);
-            }
-            playSelectionBtn.style.display = 'inline-block';
-            playSelectionBtn.disabled = false;
-        } else if (playSelectionBtn) {
-            playSelectionBtn.style.display = 'none';
-        }
-    }
-    async function playSelectedText() {
-        const selectedText = window.getSelection().toString().trim();
-        if (!selectedText) {
-            showToast('Please select some text first', 'warning');
-            return;
-        }
-        if (selectedText.length > 1000) {
-            showToast('Selected text is too long. Please select less than 1000 characters.', 'warning');
-            return;
-        }
-        const selectionBtn = document.getElementById('playSelectionBtn');
-        setButtonLoading(selectionBtn, true, '🎵 Play Selection');
-        try {
-            await playAudio(selectedText);
-            showToast(`Playing selected text (${selectedText.length} chars)`, 'success', 2000);
-        } catch (error) {
-            showToast('Failed to play selected text', 'error');
-        } finally {
-            setButtonLoading(selectionBtn, false, '🎵 Play Selection');
-        }
-    }
-    // Variável para armazenar o URL atual do áudio
-    let currentAudioUrl = null;
-    async function handlePlay() {
-        const text = textEditor.innerText.trim();
-        if (!text) {
-            showToast('Please enter some text first', 'warning');
-            return;
-        }
-        if (text.length > 10000) { // Aumentado de 5000 para 10000
-            showToast('Text is too long for audio generation. Please use shorter text.', 'warning');
-            return;
-        }
-        const selectedTld = voiceSelector.value;
-        const cacheKey = getAudioCacheKey(text, selectedTld);
-        // Se já temos um áudio carregado para este texto, apenas reproduzir
-        if (currentAudioUrl && audioPlayer.src && getAudioCacheKey(audioPlayer.dataset.lastText || '', audioPlayer.dataset.lastTld || '') === cacheKey) {
-            try {
-                await audioPlayer.play();
-                showToast('Playing cached audio...', 'success', 1000);
-                return;
-            } catch (error) {
-                console.log('Cached audio failed, regenerating...');
-            }
-        }
-        setButtonLoading(playButton, true);
-        playText.textContent = 'Generating...';
-        playSpinner.classList.remove('hidden');
-        try {
-            const audioBlob = await fetchAudioBlob(text);
-            // Limpar URL anterior se existir
-            if (currentAudioUrl) {
-                URL.revokeObjectURL(currentAudioUrl);
-            }
-            currentAudioUrl = URL.createObjectURL(audioBlob);
-            audioPlayer.src = currentAudioUrl;
-            audioPlayer.dataset.lastText = text;
-            audioPlayer.dataset.lastTld = selectedTld;
-            audioPlayer.classList.remove('hidden');
-            // Remover listener anterior para evitar duplicatas
-            audioPlayer.onplay = () => showToast('Audio ready! Playing...', 'success', 1000);
-            audioPlayer.onended = () => {
-                // NÃO revogar o URL aqui, manter para permitir replay
-                showToast('Audio finished', 'info', 1000);
-            };
-            audioPlayer.onerror = () => showToast('Failed to play audio', 'error');
-            await audioPlayer.play();
-            showToast(`Audio generated successfully! (${text.length} characters)`, 'success', 2000);
-        } catch (error) {
-            console.error('Audio generation error:', error);
-            showToast('Failed to generate audio. Please check your connection and try again.', 'error');
-        } finally {
-            setButtonLoading(playButton, false);
-            playText.textContent = 'Listen to Text';
-            playSpinner.classList.add('hidden');
-        }
     }
-    // --- TODAS AS OUTRAS FUNÇÕES ---
-    // ATIVIDADES
-    async function generateActivity() {
-        const activityType = activityTypeSelector.value;
-        const context = contextSelector.value;
-        const sourceText = textEditor.innerText;
-        generateActivityButton.disabled = true;
-        generateActivityButton.innerHTML = '<div class="spinner mr-2"></div> Generating...';
-        activityChatDisplay.innerHTML = '<p class="text-gray-500 italic">Generating your exercise...</p>';
-        activityResponseArea.classList.add('hidden');
-        let prompt = "";
-        if (activityType === 'translate_pt_en') {
-            prompt = `Based on the '${context}' context, create one single sentence in Portuguese for me to translate into English.`;
-        } else if (activityType === 'email_writing') {
-            prompt = `Create a scenario for me to write a formal email, related to the '${context}' context. Give me clear instructions on what to write.`;
-        } else if (activityType === 'summary_writing') {
-            if (!sourceText) {
-                alert("Please paste text in the main editor to generate a summary activity.");
-                activityChatDisplay.innerHTML = '<p class="text-red-500">Please paste text in the editor in card #1 first.</p>';
-                generateActivityButton.disabled = false;
-                generateActivityButton.textContent = 'Generate Activity';
-                return;
-            }
-            prompt = `Your task is to summarize the following text in 2 or 3 sentences: "${sourceText}"`;
-        } else if (activityType === 'professional_conversation') {
-             prompt = `Start a professional role-playing conversation with me related to '${context}'. Ask me an open-ended question to begin.`;
-        }
-        try {
-            const response = await fetch('/explain-proxy', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: modelSelector.value,
-                    context_focus: context,
-                    custom_prompt: prompt
-                })
-            });
-            if (!response.ok) throw new Error((await response.json()).error);
-            const data = await response.json();
-            currentActivityPrompt = data.explanation;
-            activityChatDisplay.innerHTML = `<div class="ai-prompt"><strong>Your Task:</strong><p>${currentActivityPrompt}</p></div>`;
-            activityResponseArea.classList.remove('hidden');
-        } catch (error) {
-            activityChatDisplay.innerHTML = `<p class="text-red-600 font-semibold">Failed to generate activity: ${error.message}</p>`;
-        } finally {
-            generateActivityButton.disabled = false;
-            generateActivityButton.textContent = 'Generate Activity';
-        }
-    }
     async function submitActivityResponse() {
         const userResponse = activityInput.value.trim();
         if (!userResponse) {

 {% endblock %}
 {% block scripts %}
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script>
 // Core client-side JS preserved: minimal initializers and references used by the UI
         else showToast('Failed to generate plan','error');
     }catch(e){ showToast('Plan error','error'); }
 }
+// Lightweight editor interactions (demo-safe)
+const textEditor = document.getElementById('textEditor');
+const charCount = document.getElementById('charCount');
+const createCardButton = document.getElementById('createCardButton');
+const playButton = document.getElementById('playButton');
+if (textEditor) {
     textEditor.addEventListener('input', () => {
+        const len = textEditor.innerText?.length || 0;
+        if (charCount) charCount.textContent = len;
+        if (playButton) playButton.disabled = len === 0;
     });
     function handleTextSelection() {
+        const sel = (window.getSelection && window.getSelection().toString()) || '';
+        if (createCardButton) createCardButton.disabled = !sel.trim();
     }
+    textEditor.addEventListener('mouseup', handleTextSelection);
+    textEditor.addEventListener('keyup', handleTextSelection);
+}
+if (playButton) {
+    playButton.addEventListener('click', () => {
+        showToast('Audio generation is not enabled in demo mode.', 'info');
+    });
+}
+</script>
+{% endblock %}
     async function submitActivityResponse() {
         const userResponse = activityInput.value.trim();
         if (!userResponse) {