import gradio as gr

CSS = """
body {
    background: #050a1a;
    font-family: 'Inter', sans-serif;
}
.neon-box {
    background: linear-gradient(135deg, #0a0f1f, #111b3c);
    padding: 25px;
    border-radius: 12px;
    color: #d6e2ff;
    box-shadow: 0 0 25px #00e1ff55;
    border: 1px solid #00eaff33;
}
h1, h2 {
    font-family: 'Inter', sans-serif;
    text-shadow: 0 0 12px #00eaff;
}
.neon-title {
    color: #00eaff;
    font-size: 32px;
    margin-bottom: 10px;
}
.neon-sub {
    color: #7df9ff;
    font-size: 22px;
    margin-top: 20px;
}
"""

# --- PAGE 1 : PRESENTATION ---
PAGE_PRESENTATION = """
<div class='neon-box'>
    <h1 class='neon-title'>⚡ KTXStudio — Pourquoi ce projet existe</h1>

    <p style='font-size:16px; line-height:1.6;'>
        KTXStudio est un projet conçu pour rendre la génération d’images accessible,
        transparente et ouverte à tous. Voici les raisons principales de son existence :
    </p>

    <h2 class='neon-sub'>💠 1. Un projet 100% open‑source</h2>
    <p>
        Tout est ouvert : le code, les outils, les méthodes.  
        L’objectif est de permettre à chacun de comprendre, modifier et améliorer le système.
    </p>

    <h2 class='neon-sub'>💠 2. Fonctionne à 50% sur CPU (et un peu de GPU)</h2>
    <p>
        Le cœur du projet tourne sur CPU pour rester accessible à tous.  
        Un peu de GPU est utilisé uniquement lorsque c’est techniquement obligatoire.
    </p>

    <h2 class='neon-sub'>💠 3. Tentatives de rendre les Spaces publics</h2>
    <p>
        Plusieurs essais ont été faits pour rendre les Spaces totalement publics,
        mais les limitations GPU de Hugging Face rendent cela difficile.
    </p>

    <h2 class='neon-sub'>💠 4. Objectif : offrir le plus de GPU possible</h2>
    <p>
        Même avec des ressources limitées, le but est de fournir
        le maximum de GPU aux utilisateurs, sans barrière.
    </p>

    <p style='font-size:14px; opacity:0.8; margin-top:25px;'>
        ✨ KTXStudio continue d’évoluer pour devenir un espace libre, rapide et accessible à tous.
    </p>
</div>
"""

# --- PAGE 2 : ROADMAP ---
PAGE_ROADMAP = """
<div class='neon-box'>
    <h1 class='neon-title'>🚀 Roadmap — KTXStudio</h1>

    <p style='font-size:16px; line-height:1.6;'>
        Voici les étapes prévues pour l’évolution du projet KTXStudio.
        Cette roadmap est vivante et évoluera selon les besoins de la communauté.
    </p>

    <h2 class='neon-sub'>📌 Phase 1 — Stabilisation (En cours)</h2>
    <ul style='line-height:1.8;'>
        <li>Optimisation CPU pour permettre la génération sans GPU.</li>
        <li>Interface Gradio néon stable et responsive.</li>
        <li>Documentation claire pour les utilisateurs.</li>
    </ul>

    <h2 class='neon-sub'>📌 Phase 2 — GPU Access (Prochainement)</h2>
    <ul style='line-height:1.8;'>
        <li>Support GPU optionnel (Colab, local, serveurs externes).</li>
        <li>Réduction du temps d’inférence.</li>
        <li>Compatibilité avec plusieurs modèles Flux.</li>
    </ul>

    <h2 class='neon-sub'>📌 Phase 3 — Public Spaces (Objectif)</h2>
    <ul style='line-height:1.8;'>
        <li>Tentative de rendre les Spaces publics malgré les limites GPU.</li>
        <li>Optimisation extrême pour CPU-only.</li>
        <li>Version “Lite” pour appareils faibles.</li>
    </ul>

    <h2 class='neon-sub'>📌 Phase 4 — KTXStudio Cloud (Vision)</h2>
    <ul style='line-height:1.8;'>
        <li>Serveurs GPU communautaires.</li>
        <li>Génération rapide sans file d’attente.</li>
        <li>Interface avancée avec paramètres experts.</li>
    </ul>

    <p style='font-size:14px; opacity:0.8; margin-top:25px;'>
        ✨ L’objectif final : un studio libre, puissant et accessible à tous.
    </p>
</div>
"""

# --- GRADIO APP ---
with gr.Blocks(css=CSS, title="KTXStudio") as demo:

    gr.Markdown("<h1 style='color:#00eaff; text-align:center;'>🌌 KTXStudio — Interface</h1>")

    with gr.Tabs():
        with gr.Tab("Présentation"):
            gr.HTML(PAGE_PRESENTATION)

        with gr.Tab("Roadmap"):
            gr.HTML(PAGE_ROADMAP)

demo.launch(share=True)