Spaces:

NitinBot001
/

ttsfm

Running

File size: 16,234 Bytes

f5ec497
 
 
9e9b02f
 
 
 
 
 
 
f5ec497

<!DOCTYPE html>
<html lang="en">
<head>
        <!-- Cronitor RUM -->
    <script async src="https://rum.cronitor.io/script.js"></script>
    <script>
        window.cronitor = window.cronitor || function() { (window.cronitor.q = window.cronitor.q || []).push(arguments); };
        cronitor('config', { clientKey: 'bdc4a3faf9c16d842b5099e1a0e3ba6f' });
    </script>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}TTSFM - Text-to-Speech{% endblock %}</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">

    <!-- Additional Performance Optimizations -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎤</text></svg>">

    <!-- Meta tags for better SEO and social sharing -->
    <meta name="description" content="TTSFM - A Python client for text-to-speech APIs. Simple to use with support for multiple voices and audio formats.">
    <meta name="keywords" content="text-to-speech, TTS, python, API, voice synthesis, audio generation">
    <meta name="author" content="TTSFM">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{ request.url }}">
    <meta property="og:title" content="{% block og_title %}TTSFM - Python Text-to-Speech Client{% endblock %}">
    <meta property="og:description" content="A Python client for text-to-speech APIs. Simple to use with support for multiple voices and audio formats.">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary">
    <meta property="twitter:url" content="{{ request.url }}">
    <meta property="twitter:title" content="{% block twitter_title %}TTSFM - Python Text-to-Speech Client{% endblock %}">
    <meta property="twitter:description" content="A Python client for text-to-speech APIs. Simple to use with support for multiple voices and audio formats.">
    
    {% block extra_css %}{% endblock %}
</head>
<body>
    <!-- Skip to content link for accessibility -->
    <a href="#main-content" class="skip-link">Skip to main content</a>

    <!-- Clean Navigation -->
    <nav class="navbar navbar-expand-lg fixed-top" style="background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #e5e7eb;">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('index') }}">
                <i class="fas fa-microphone-alt me-2"></i>
                <span class="fw-bold">TTSFM</span>
                <span class="badge bg-primary ms-2 small">v3.0</span>
            </a>

            <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}" aria-label="Home page">
                            <i class="fas fa-home me-1"></i>Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('playground') }}" aria-label="Interactive playground">
                            <i class="fas fa-play me-1"></i>Playground
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('docs') }}" aria-label="API documentation">
                            <i class="fas fa-book me-1"></i>Documentation
                        </a>
                    </li>
                </ul>

                <ul class="navbar-nav">
                    <li class="nav-item">
                        <span class="navbar-text d-flex align-items-center">
                            <span id="status-indicator" class="status-indicator status-offline" aria-hidden="true"></span>
                            <span id="status-text" class="small">Checking...</span>
                        </span>
                    </li>
                    <li class="nav-item ms-2">
                        <a class="btn btn-outline-primary btn-sm" href="https://github.com/dbccccccc/ttsfm" target="_blank" rel="noopener noreferrer" aria-label="View source code on GitHub">
                            <i class="fab fa-github me-1"></i>GitHub
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <main id="main-content" style="padding-top: 76px;">
        {% block content %}{% endblock %}
    </main>

    <!-- Simplified Footer -->
    <footer class="footer py-4" style="background-color: #f8fafc; border-top: 1px solid #e5e7eb;" role="contentinfo">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <div class="d-flex align-items-center mb-2 mb-md-0">
                        <i class="fas fa-microphone-alt me-2 text-primary"></i>
                        <strong class="text-dark">TTSFM</strong>
                        <span class="ms-2 text-muted">Free Text-to-Speech for Python</span>
                    </div>
                </div>
                <div class="col-md-6 text-md-end">
                    <div class="d-flex justify-content-md-end gap-3">
                        <a href="{{ url_for('playground') }}" class="text-decoration-none" style="color: #6b7280;">
                            <i class="fas fa-play me-1"></i>Demo
                        </a>
                        <a href="{{ url_for('docs') }}" class="text-decoration-none" style="color: #6b7280;">
                            <i class="fas fa-book me-1"></i>Docs
                        </a>
                        <a href="https://github.com/dbccccccc/ttsfm" class="text-decoration-none" style="color: #6b7280;" target="_blank" rel="noopener noreferrer">
                            <i class="fab fa-github me-1"></i>GitHub
                        </a>
                    </div>
                </div>
            </div>
            <hr class="my-3" style="border-color: #e5e7eb;">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <small class="text-muted">&copy; 2024 TTSFM. MIT License.</small>
                </div>
                <div class="col-md-6 text-md-end">
                    <small class="text-muted">
                        <span id="footer-status" class="d-inline-flex align-items-center">
                            <span class="status-indicator status-offline me-2"></span>
                            Status: <span id="footer-status-text" class="ms-1">Checking...</span>
                        </span>
                    </small>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- Enhanced Common JavaScript -->
    <script>
        // Enhanced service status checking
        async function checkStatus() {
            try {
                const response = await fetch('/api/health');
                const data = await response.json();

                const indicator = document.getElementById('status-indicator');
                const text = document.getElementById('status-text');
                const footerIndicator = document.querySelector('#footer-status .status-indicator');
                const footerText = document.getElementById('footer-status-text');

                if (response.ok && data.status === 'healthy') {
                    // Update navbar status
                    indicator.className = 'status-indicator status-online';
                    text.textContent = 'Online';

                    // Update footer status
                    if (footerIndicator) footerIndicator.className = 'status-indicator status-online';
                    if (footerText) footerText.textContent = 'Online';
                } else {
                    // Update navbar status
                    indicator.className = 'status-indicator status-offline';
                    text.textContent = 'Offline';

                    // Update footer status
                    if (footerIndicator) footerIndicator.className = 'status-indicator status-offline';
                    if (footerText) footerText.textContent = 'Offline';
                }
            } catch (error) {
                // Update navbar status
                const indicator = document.getElementById('status-indicator');
                const text = document.getElementById('status-text');
                indicator.className = 'status-indicator status-offline';
                text.textContent = 'Offline';

                // Update footer status
                const footerIndicator = document.querySelector('#footer-status .status-indicator');
                const footerText = document.getElementById('footer-status-text');
                if (footerIndicator) footerIndicator.className = 'status-indicator status-offline';
                if (footerText) footerText.textContent = 'Offline';
            }
        }

        // Enhanced page initialization
        document.addEventListener('DOMContentLoaded', function() {
            // Check status immediately and periodically
            checkStatus();
            setInterval(checkStatus, 30000); // Check every 30 seconds

            // Initialize tooltips
            if (typeof bootstrap !== 'undefined') {
                const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
                tooltipTriggerList.map(function (tooltipTriggerEl) {
                    return new bootstrap.Tooltip(tooltipTriggerEl);
                });
            }

            // Add smooth scrolling for anchor links
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function (e) {
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        e.preventDefault();
                        target.scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    }
                });
            });

            // Add fade-in animation to main content
            const mainContent = document.querySelector('main');
            if (mainContent) {
                mainContent.classList.add('fade-in');
            }

            // Add loading states to external links
            document.querySelectorAll('a[target="_blank"]').forEach(link => {
                link.addEventListener('click', function() {
                    this.style.opacity = '0.7';
                    setTimeout(() => {
                        this.style.opacity = '1';
                    }, 1000);
                });
            });
        });

        // Enhanced utility function to show loading state
        function setLoading(button, loading) {
            if (loading) {
                button.classList.add('loading');
                button.disabled = true;
                button.style.cursor = 'wait';
            } else {
                button.classList.remove('loading');
                button.disabled = false;
                button.style.cursor = 'pointer';
            }
        }

        // Enhanced utility function to show alerts
        function showAlert(message, type = 'info', duration = 5000) {
            const alertDiv = document.createElement('div');
            alertDiv.className = `alert alert-${type} alert-dismissible fade show fade-in`;
            alertDiv.style.position = 'relative';
            alertDiv.style.zIndex = '1050';
            alertDiv.innerHTML = `
                <i class="fas fa-${getAlertIcon(type)} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;

            // Find the best container to insert the alert
            const container = document.querySelector('main .container') || document.querySelector('.container') || document.body;
            if (container) {
                container.insertBefore(alertDiv, container.firstChild);

                // Auto-dismiss after specified duration
                setTimeout(() => {
                    if (alertDiv.parentNode) {
                        alertDiv.classList.remove('show');
                        setTimeout(() => {
                            if (alertDiv.parentNode) {
                                alertDiv.remove();
                            }
                        }, 150);
                    }
                }, duration);

                // Scroll to alert if it's not visible
                alertDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        }

        // Helper function to get appropriate icon for alert type
        function getAlertIcon(type) {
            const icons = {
                'success': 'check-circle',
                'danger': 'exclamation-triangle',
                'warning': 'exclamation-triangle',
                'info': 'info-circle',
                'primary': 'info-circle'
            };
            return icons[type] || 'info-circle';
        }

        // Enhanced error handling for fetch requests
        async function safeFetch(url, options = {}) {
            try {
                const response = await fetch(url, options);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                return response;
            } catch (error) {
                console.error('Fetch error:', error);
                showAlert(`Network error: ${error.message}`, 'danger');
                throw error;
            }
        }

        // Performance monitoring
        window.addEventListener('load', function() {
            // Log page load time
            const loadTime = performance.now();
            console.log(`Page loaded in ${Math.round(loadTime)}ms`);

            // Check for slow loading resources
            if (loadTime > 3000) {
                console.warn('Page load time is slow. Consider optimizing resources.');
            }
        });

        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            // Alt + H for home
            if (e.altKey && e.key === 'h') {
                e.preventDefault();
                window.location.href = '{{ url_for("index") }}';
            }

            // Alt + P for playground
            if (e.altKey && e.key === 'p') {
                e.preventDefault();
                window.location.href = '{{ url_for("playground") }}';
            }

            // Alt + D for docs
            if (e.altKey && e.key === 'd') {
                e.preventDefault();
                window.location.href = '{{ url_for("docs") }}';
            }
        });
    </script>
    
    {% block extra_js %}{% endblock %}
</body>
</html>