{% extends "base.html" %}

{% block title %}About - TTS Arena Hebrew{% endblock %}

{% block current_page %}About{% endblock %}

{% block extra_head %}
<style>
    .about-container {
        max-width: 800px;
        margin: 0 auto;
        direction: ltr;
        text-align: left;
    }

    .about-section {
        background: white;
        border-radius: var(--radius);
        padding: 24px;
        margin-bottom: 24px;
        box-shadow: var(--shadow);
    }

    .about-section h2 {
        color: var(--primary-color);
        margin-bottom: 16px;
        font-size: 24px;
    }

    .about-section p {
        margin-bottom: 16px;
        line-height: 1.6;
        color: #444;
    }

    .about-section p:last-child {
        margin-bottom: 0;
    }

    .feature-list {
        list-style: none;
        padding: 0;
    }

    .feature-list li {
        margin-bottom: 12px;
        padding-left: 28px;
        position: relative;
    }

    .feature-list li::before {
        content: "•";
        color: var(--primary-color);
        font-size: 24px;
        position: absolute;
        left: 8px;
        top: -4px;
    }

    .citation-box {
        background-color: var(--light-gray);
        border-radius: var(--radius);
        padding: 16px;
        margin-top: 16px;
        position: relative;
        font-family: monospace;
        white-space: pre-wrap;
        word-break: break-word;
        font-size: 14px;
        line-height: 1.5;
    }

    .copy-citation {
        position: absolute;
        top: 8px;
        right: 8px;
        background-color: white;
        border: 1px solid var(--border-color);
        border-radius: var(--radius);
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background-color 0.2s;
    }

    .copy-citation:hover {
        background-color: var(--light-gray);
    }

    .copy-citation svg {
        color: var(--text-color);
    }

    .faq-item {
        margin-bottom: 20px;
    }

    .faq-question {
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--primary-color);
    }

    .faq-answer {
        line-height: 1.6;
    }

    /* Dark mode styles */
    @media (prefers-color-scheme: dark) {
        .about-section {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }

        .about-section p {
            color: var(--text-color);
        }

        .citation-box {
            background-color: var(--secondary-color);
            border-color: var(--border-color);
        }

        .copy-citation {
            background-color: var(--light-gray);
            border-color: var(--border-color);
        }

        .copy-citation:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .copy-citation svg {
            color: var(--text-color);
        }

        .faq-question {
            color: var(--primary-color);
        }
    }

</style>
{% endblock %}

{% block content %}
<div class="about-container">
    <div class="about-section">
        <h2>Welcome to TTS Arena Hebrew</h2>
        <p>
            TTS Arena Hebrew is a community-driven platform for evaluating text-to-speech models on Hebrew.
            Built and maintained by the <a href="https://huggingface.co/ivrit-ai" target="_blank" rel="noopener">ivrit-ai</a> team,
            this arena lets anyone compare how well different TTS engines handle Hebrew speech &mdash; including
            mixed Hebrew-English text, formal language, conversational tone, and more.
        </p>
        <p>
            This project is based on <a href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena-V2" target="_blank" rel="noopener">TTS Arena V2</a>
            by <a href="https://huggingface.co/TTS-AGI" target="_blank" rel="noopener">TTS-AGI</a> and the Hugging Face team.
            We are grateful for their work in creating the original open-source arena platform.
        </p>
    </div>

    <div class="about-section">
        <h2>Why Hebrew?</h2>
        <p>
            Hebrew presents unique challenges for text-to-speech: right-to-left script, vowelless writing,
            frequent code-switching with English loanwords and brand names, and a relatively small speaker base
            compared to major languages. Most TTS benchmarks focus on English, leaving Hebrew underserved.
        </p>
        <p>
            TTS Arena Hebrew fills this gap by providing a dedicated evaluation space where the Hebrew-speaking
            community can directly assess and rank how well different models handle real-world Hebrew text.
        </p>
    </div>

    <div class="about-section">
        <h2>How It Works</h2>
        <p>
            The concept is simple: enter Hebrew text (or pick a random sentence from our curated dataset), and
            two anonymous TTS models will synthesize it. Listen to both, then vote for the one that sounds
            more natural. Model identities are revealed only after you vote.
        </p>
        <ul class="feature-list">
            <li>Enter your own Hebrew text or pick from categorized sentences (support, podcast, news, conversation, formal, emotional, mixed)</li>
            <li>Listen to two anonymous TTS models synthesize the same text</li>
            <li>Vote for the model that sounds more natural, clear, and expressive</li>
            <li>Track model rankings on the leaderboard using Elo ratings</li>
        </ul>
    </div>

    <div class="about-section">
        <h2>Frequently Asked Questions</h2>
        <div class="faq-item">
            <div class="faq-question">How are models ranked?</div>
            <div class="faq-answer">
                Models are ranked using an Elo rating system, similar to chess rankings. When you vote for a
                model, its rating increases while the other model's rating decreases. The magnitude of change
                depends on the current ratings of both models.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Can I use mixed Hebrew and English text?</div>
            <div class="faq-answer">
                Yes! Mixed text is common in everyday Hebrew (brand names, tech terms, etc.). The input just
                needs to contain at least one Hebrew character. We even have a "Mixed" sentence category
                specifically for this.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Can I suggest a model to be added?</div>
            <div class="faq-answer">
                Absolutely. If you know of a TTS model that supports Hebrew, reach out to the
                <a href="https://huggingface.co/ivrit-ai" target="_blank" rel="noopener">ivrit-ai team on Hugging Face</a>.
                The arena uses a plugin architecture that makes adding new providers straightforward.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question">Do I need to log in?</div>
            <div class="faq-answer">
                Yes, a Hugging Face account is required to generate audio and vote. This helps prevent abuse
                and lets you track your personal voting history.
            </div>
        </div>
        <div class="faq-item">
            <div class="faq-question">What are the sentence categories?</div>
            <div class="faq-answer">
                Sentences are organized by use-case: <strong>Support</strong> (customer service),
                <strong>Podcast</strong> (broadcast style), <strong>News</strong> (headlines and reports),
                <strong>Conversation</strong> (casual speech), <strong>Formal</strong> (business/legal),
                <strong>Emotional</strong> (expressive), and <strong>Mixed</strong> (Hebrew with English loanwords).
                You can filter by category when picking a random sentence.
            </div>
        </div>
    </div>

    <div class="about-section">
        <h2>Credits</h2>
        <p>
            Built by the <a href="https://huggingface.co/ivrit-ai" target="_blank" rel="noopener">ivrit-ai</a> team.
        </p>
        <p>
            Based on <a href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena-V2" target="_blank" rel="noopener">TTS Arena V2</a>
            by mrfakename, Vaibhav Srivastav, Clémentine Fourrier, Lucain Pouget, Yoach Lacombe, and the
            <a href="https://huggingface.co/TTS-AGI" target="_blank" rel="noopener">TTS-AGI</a> / Hugging Face team.
        </p>
    </div>

    <div class="about-section">
        <h2>Citation</h2>
        <p>
            If you use TTS Arena Hebrew in your research, please cite both the Hebrew arena and the original:
        </p>
        <div class="citation-box" id="citation-text">@misc{tts-arena-hebrew,
    title        = {TTS Arena Hebrew: Benchmarking Hebrew Text-to-Speech Models},
    author       = {ivrit-ai},
    year         = 2025,
    publisher    = {Hugging Face},
    howpublished = "\url{https://huggingface.co/spaces/ivrit-ai/TTS-Arena-Hebrew}",
    note         = {Based on TTS Arena V2 by TTS-AGI}
}<button class="copy-citation" onclick="copyToClipboard()" title="Copy citation"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy-icon lucide-copy"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg></button></div>
        <script>
            function copyToClipboard() {
                const text = document.getElementById('citation-text').innerText;
                navigator.clipboard.writeText(text).then(() => {
                    const btn = document.querySelector('.copy-citation');
                    const originalContent = btn.innerHTML;
                    btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>';
                    setTimeout(() => {
                        btn.innerHTML = originalContent;
                    }, 2000);
                });
            }
        </script>
    </div>

    <div class="about-section">
        <h2>Privacy</h2>
        <p>
            We may store text you enter and generated audio. If you are logged in, your votes are associated
            with your Hugging Face username. Data collected may be used for research purposes.
        </p>
    </div>

    <div class="about-section">
        <h2>License</h2>
        <p>
            The arena code is based on <a href="https://huggingface.co/spaces/TTS-AGI/TTS-Arena-V2" target="_blank" rel="noopener">TTS Arena V2</a>,
            licensed under the Zlib license.
            Generated audio clips may not be redistributed and are for personal, non-commercial use only.
        </p>
    </div>
</div>
{% endblock %}