{% extends 'base.html' %}

{% block title %}QueryCraft Web - Crédits{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/credits.css') }}">
{% endblock %}

{% block header_title %}🔍 QueryCraft{% endblock %}

{% block header_subtitle %}Outil pédagogique d'apprentissage du langage SQL{% endblock %}

{% block header_extra %}
    <div class="version">Version {{ version }}
        | 🖥️ {{ system_info.system }} {{ system_info.release }} |
        💻 {{ system_info.machine }} |
        🐍 Python {{ system_info.python_version }} |
        👤 Instance : <strong>{{ tenant_label }}</strong>
    </div>
{% endblock %}

{% block nav_buttons %}
    <div class="nav-buttons">
        <a href="{{ base_path }}/" class="nav-btn">🏠 Accueil</a>
    </div>
{% endblock %}

{% block content %}
    <div class="content">
        <!-- À propos -->
        <div class="section">
            <h2>📖 À propos</h2>
            <p>
                <strong>QueryCraft</strong> est un outil pédagogique innovant conçu pour l'enseignement et l'apprentissage du langage SQL, en particulier le langage de manipulation des données (DML). Il permet aux étudiants de visualiser et de comprendre l'exécution pas à pas des requêtes basées sur l'opérateur <code>SELECT</code>,
                décomposant chaque étape pour une meilleure compréhension des opérateurs impliqués.
            </p>
            <p>
                L'application propose une interface web moderne permettant d'exécuter des requêtes SQL de manière interactive, avec un système de correction automatique et d'aide par intelligence artificielle générative.
            </p>
            <p>Pour une utilisation plus générale, il est possible d'utiliser SQLSandbox
                (http://desmontils.net/SQLSandbox/).</p>
            <a href="http://desmontils.net/SQLSandbox/" target="_blank" class="link-btn">
                📦 SQLSandbox
            </a>


        </div>

        <!-- Obtenir une instance -->
        <div class="section">
            <h2>🔑 Obtenir une instance</h2>
            <p>
                Pour disposer de votre propre instance de QueryCraft (configuration, bases de données et exercices personnels) sur ce site, faites-en la demande par courriel à
                l'administrateur du site.
            </p>
            <p>Merci d'indiquer dans votre message :</p>
            <ul>
                <li>le nom de votre établissement,</li>
                <li>son adresse,</li>
                <li>le nom de l'enseignant qui fait la demande, qui sera l'enseignant référent.</li>
            </ul>
            <p>En retour, l'administrateur fournira le code de l'instance et le code d'administration. Des bases SQLite seront proposées par défaut. Pour l'IA générative, peut-être certains services seront proposés par l'administrateur (IAg institutionnelle par exemple), mais l'enseignant référent pourra ajouter son propre service si besoin.</p>
            <p>Sur le site "asql.ls2n.fr", c'est E. Desmontils qui est l'administrateur.</p>
            <a href="mailto:emmanuel.desmontils@univ-nantes.fr?subject=Demande%20d'instance%20QueryCraft&amp;body=Bonjour%2C%0A%0AJe%20souhaite%20obtenir%20une%20instance%20QueryCraft.%0A%0A-%20Site%20%3A%20{{ request.url_root | urlencode }}%0A-%20%C3%89tablissement%20%3A%0A-%20Adresse%20%3A%0A-%20Enseignant%20demandeur%20%3A%0A-%20Informations%20Compl%C3%A9mentaires%20%3A%0A%0ACordialement%2C"
               class="link-btn">
                📧 Demander une instance pour asql.ls2n.fr
            </a>
        </div>

        <!-- Support / Contact -->
        <div class="section">
            <h2>💬 Une question ?</h2>
            <p>
                Un canal Tchap (la messagerie instantanée de l'État) est disponible pour poser vos questions
                et obtenir des informations sur QueryCraft.
            </p>
            <a href="https://tchap.gouv.fr/#/room/!JhMtAFYUfoAKoWkQPm:agent.education.tchap.gouv.fr?via=agent.education.tchap.gouv.fr"
               target="_blank" class="link-btn">
                <img src="{{ url_for('static', filename='images/tchap-logo.svg') }}" alt="Tchap"
                     style="width: 20px; height: 24px; object-fit: contain;"/>
                Rejoindre le canal Tchap
            </a>
        </div>

        <!-- Auteur -->
        <div class="section">
            <h2>👨‍🏫 Auteurs</h2>
            <div class="author-card">
                <div class="author-icon">👨🏻‍💻</div>
                <div class="author-info">
                    <h3>Emmanuel Desmontils (développement et tests)</h3>
                    <p>Nantes Université</p>
                    <p>Laboratoire des Sciences du Numérique de Nantes (LS2N) - Équipe VELO</p>
                    <p>Centre de Recherche en Enseignement de Nantes (CREN)</p>
                    <p>📧 <a href="mailto:emmanuel.desmontils@univ-nantes.fr" style="color:#667eea;">emmanuel.desmontils@univ-nantes.fr</a>
                    </p>
                </div>
            </div>
            <div class="author-card">
                <div class="author-icon">👩🏻‍💻</div>
                <div class="author-info">
                    <h3>Laura Monceaux (tests fonctionnels)</h3>
                    <p>Nantes Université</p>
                    <p>Laboratoire des Sciences du Numérique de Nantes (LS2N) - Équipe TALN</p>
                    <p>📧 <a href="mailto:laura.monceaux@univ-nantes.fr" style="color:#667eea;">laura.monceaux@univ-nantes.fr</a>
                    </p>
                </div>
            </div>

            <img src="{{ url_for('static', filename='images/pinkycow.png') }}"  alt="pinkycow"
                         style="width: 200px; height: 100px; object-fit: contain;"/>
        </div>

        <!-- Technologies -->
        <div class="section">
            <h2>🛠️ Technologies utilisées</h2>
            <div class="tech-grid">
                <div class="tech-item">
                    <div class="icon">🐍</div>
                    <div class="name">Python</div>
                    <div class="version">3.11.x</div>
                </div>
                <div class="tech-item">
                    <div class="icon">🌐</div>
                    <div class="name">Flask</div>
                    <div class="version">3.0+</div>
                </div>
                <div class="tech-item">
                    <div class="icon">🗄️</div>
                    <div class="name">SQLite</div>
                    <div class="version">Support complet</div>
                </div>
                <div class="tech-item">
                    <div class="icon">🐘</div>
                    <div class="name">PostgreSQL</div>
                    <div class="version">Support complet</div>
                </div>
                <div class="tech-item">
                    <div class="icon">🐬</div>
                    <div class="name">MySQL</div>
                    <div class="version">Support complet</div>
                </div>
                <div class="tech-item">
                    <div class="icon">🤖</div>
                    <div class="name">IA (LLM)</div>
                    <div class="version">Ollama, LM Studio, OpenAI, Google, Anthropic, Albert (DINUM), ILaaS, Poe</div>
                </div>
            </div>

            <h3>Bibliothèques principales :</h3>
            <ul>
                <li><strong>sqlglot</strong> - Analyse et transformation de requêtes SQL</li>
                <li><strong>SQLAlchemy</strong> - ORM et introspection de bases de données</li>
                <li><strong>psycopg2</strong> - Connecteur PostgreSQL</li>
                <li><strong>mysql-connector-python</strong> - Connecteur MySQL</li>
                <li><strong>colorama</strong> - Colorisation du terminal</li>
                <li><strong>markdown</strong> - Conversion Markdown vers HTML</li>
                <li><strong>plantuml</strong> - Génération des diagrammes du modèle relationnel</li>
                <li><strong>jinja2</strong> - Génération de templates HTML</li>
                <li><strong>argparse</strong> - Gestion des arguments en ligne de commande</li>
                <li><strong>tincan</strong> - Génération de rapports xAPI</li>
                <li><strong>gunicorn</strong> - Serveur WSGI pour le déploiement</li>

                <li><strong>openai</strong> - Intégration avec les modèles OpenAI</li>
                <li><strong>ollama</strong> - Intégration avec les modèles Ollama</li>
                <li><strong>google-genai</strong> - Intégration avec les modèles Google</li>
                <li><strong>anthropic</strong> - Intégration avec les modèles Anthropic (Claude)</li>
                <li><strong>litellm</strong> - Abstraction unifiée pour certains fournisseurs IA (Albert, ILaaS...)</li>
                <li><strong>lmstudio</strong> - Intégration avec les modèles LM Studio</li>

            </ul>

        </div>

        <!-- Fonctionnalités -->
        <div class="section">
            <h2>✨ Fonctionnalités principales</h2>
            <ul>
                <li>🔍 <strong>Exécution pas à pas</strong> - Visualisation détaillée de chaque étape d'une requête SQL (ordre logique : FROM, WHERE, GROUP BY, HAVING, SELECT, ORDER BY, LIMIT)
                </li>
                <li>📊 <strong>Comparaison automatique</strong> - Vérification des résultats avec correction automatique quand c'est possible
                </li>
                <li>🤖 <strong>Aide par IA générative</strong> - Explications contextuelles des erreurs et suggestions de correction
                </li>
                <li>📚 <strong>Gestion d'exercices</strong> - Création et organisation d'exercices pédagogiques</li>
                <li>📐 <strong>Diagramme relationnel</strong> - Génération automatique du schéma de la base de données</li>
                <li>🎨 <strong>Interface moderne</strong> - Design responsive et intuitif</li>
                <li>🗄️ <strong>Multi-SGBD</strong> - Support de SQLite, PostgreSQL et MySQL</li>
                <li>🏢 <strong>Multi-tenant</strong> - Une instance dédiée par enseignant (configuration, bases et exercices propres)</li>
                <li>⚙️ <strong>Configuration flexible</strong> - Personnalisation complète via interface web</li>
                <!--li>📈 <strong>Traces d'apprentissage</strong> - Intégration xAPI/LRS pour le suivi pédagogique</li-->
            </ul>
        </div>

        <!-- Licence -->
        <div class="section">
            <h2>📜 Licence</h2>
            <div class="license-box">
                <h3>Licence Open Source</h3>
                <p>
                    QueryCraft est un logiciel libre développé à des fins pédagogiques et de recherche.
                    Il est distribué dans l'espoir qu'il sera utile pour l'enseignement et l'apprentissage du SQL au lycée et en premier cycle universitaire.
                </p>
                <p style="margin-bottom:0;">
                    © 2024-2026 Emmanuel Desmontils, Nantes Université
                </p>
            </div>
        </div>

        <!-- Liens -->
        <div class="section">
            <h2>🔗 Liens utiles</h2>
            <div class="links">
                <a href="https://pypi.org/project/querycraft/" target="_blank" class="link-btn">
                    📦 PyPI
                </a>
                <a href="https://gitlab.univ-nantes.fr/ls2n-didactique/querycraft" target="_blank" class="link-btn">
                    🦊 GitLab
                </a>
                <a href="https://hal.science/hal-04964895" target="_blank" class="link-btn">
                    📄 HAL Archive
                </a>
                <a href="https://www.ls2n.fr/equipe/velo/" target="_blank" class="link-btn">
                    🏛️ LS2N
                </a>
                <a href="https://cren.univ-nantes.fr/presentation/theme-1-conception-de-formation-et-mediation-par-le-numerique" target="_blank" class="link-btn">
                    🏛️ CREN
                </a>
                <a href="https://www.univ-nantes.fr/" target="_blank" class="link-btn">
                    🎓 Nantes Université
                </a>
            </div>
        </div>

        <!-- Outils de développement -->
        <div class="section">
            <h2>🤖 Développement assisté par IA</h2>
            <div style="background:white;padding:20px;border-radius:8px;border-left:4px solid #667eea;">
                <div style="display:flex;align-items:center;gap:15px;margin-bottom:15px;">
                    <div style="font-size:3em;">🤖</div>
                    <div>
                        <h3 style="margin:0;color:#667eea;">Claude Code</h3>
                        <p style="margin:5px 0 0 0;color:#6c757d;">Assistant IA par Anthropic</p>
                    </div>
                </div>
                <p>
                    Le développement de l'interface web de QueryCraft a bénéficié de l'assistance de
                    <strong>Claude Code</strong>, l'outil d'assistance au développement d'Anthropic.
                </p>
                <p style="margin-bottom:0;">
                    Claude Code a contribué à la création de l'interface web moderne et à l'amélioration de l'expérience
                    utilisateur.
                </p>
            </div>
            <div style="margin-top:15px;">
                <a href="https://claude.ai/code" target="_blank" class="link-btn">
                    🔗 En savoir plus sur Claude Code
                </a>
            </div>
        </div>

        <!-- Remerciements -->
        <div class="section">
            <h2>🙏 Remerciements</h2>
            <p>
                Merci à tous les étudiants et enseignants qui ont contribué à l'amélioration de QueryCraft
                par leurs retours et suggestions, en particulier à :<ul>
                    <li>Wiktoria SLIWINSKA, étudiante ERASMUS en licence Informatique à l'Université de Nantes en 2023-2024, pour son aide à la conception du POC initial.</li>
                    <li>Baptiste GIRARD, étudiant en licence Informatique à l'Université de Nantes en 2024-2025, pour son aide à la fiabilisation de l'outil.</li>
                    <li>Nicolas HU-PIQUENOT, étudiant en licence Informatique à l'Université de Nantes en 2024-2025, pour son aide à ASQL et ses remarques sur l'outil.</li>
                </ul>
            </p>
            <p>
                Un remerciement particulier au <strong>Laboratoire LS2N</strong> et à <strong>Nantes Université</strong>
                pour leur soutien dans le développement de cet outil pédagogique.
            </p>
        </div>


                <!-- Références universitaires -->
        <div class="section">
            <h2>📓️ Références</h2>
            <ul>
               <li>Emmanuel Desmontils, Laura Monceaux. <a href="https://hal.science/hal-04144210">Enseigner SQL en NSI</a>.
                   Atelier « Apprendre la Pensée Informatique de la Maternelle à l'Université »,
                   Conférence Environnements Informatiques pour l'Apprentissage Humain (EIAH),
                   Juin 2023, Brest, France. pp.17-24.</li>
                <li>Emmanuel Desmontils. <a href="https://hal.science/hal-05030037v1">Enseigner SQL en NSI : typologie et cas de la jointure</a>.
                    Journée des enseignants de SNT et de NSI 2024,
                    Académie de la Réunion et IREMI de La Réunion,
                    Dec 2024, Saint-Denis (La Réunion), France. </li>
                <li>Emmanuel Desmontils, Laura Monceaux. <a href="{{ url_for('static', filename='papers/poster-txt-QC-EDLM-v2.pdf') }}">QueryCraft : exécuter SQL en mode "pas à pas"</a>.
                    Poster présenté à Didapro 11, 10-12 mars 2026, Grenoble. <a href="{{ url_for('static', filename='papers/poster-VELO-ED-LM.pdf') }}" >Poster</a></li>
            </ul>
        </div>

        <div class="section">
            <p>Ce site utilise la police Atkinson Hyperlegible Next (<a href="https://www.brailleinstitute.org/">Braille Institute of America, Inc.</a>) afin d'améliorer la lisibilité.</p>
        </div>
    </div>
{% endblock %}

{% block footer_content %}
    © E. Desmontils, Nantes Université, 2024-2026 | QueryCraft v{{ version }}
{% endblock %}