tutorial_page.py

import streamlit as st

def show_tutorial_page():
    """Page de tutoriel pour utiliser CléfistAI en dehors de Replit"""
    
    st.markdown("""
    <style>
    .tutorial-header {
        background: linear-gradient(135deg, #ffeef8 0%, #e8f5ff 100%);
        padding: 20px;
        border-radius: 15px;
        text-align: center;
        margin-bottom: 30px;
    }
    .step-box {
        background: rgba(255, 255, 255, 0.8);
        border-left: 5px solid #ff69b4;
        padding: 15px;
        margin: 15px 0;
        border-radius: 10px;
    }
    .code-box {
        background: #f8f9fa;
        border: 2px solid #ffc1dc;
        border-radius: 10px;
        padding: 15px;
        margin: 10px 0;
    }
    .warning-box {
        background: #fff3cd;
        border: 2px solid #ffeaa7;
        border-radius: 10px;
        padding: 15px;
        margin: 10px 0;
    }
    </style>
    """, unsafe_allow_html=True)

    # En-tête du tutoriel
    st.markdown("""
    <div class="tutorial-header">
        <h1>🐱✨ Guide Complet CléfistAI ✨🐱</h1>
        <p><strong>🌸 Comment utiliser votre IA magique en dehors de Replit 🌸</strong></p>
    </div>
    """, unsafe_allow_html=True)

    # Table des matières
    st.markdown("## 📋 Table des Matières")
    st.markdown("""
    1. [📥 Installation Local](#installation-local)
    2. [🐍 Configuration Python](#configuration-python)
    3. [🚀 Lancement de l'Application](#lancement-de-l-application)
    4. [💫 Utilisation Avancée](#utilisation-avancée)
    5. [🛠️ Dépannage](#dépannage)
    6. [🎯 Conseils Pro](#conseils-pro)
    """)

    # Section 1: Installation Local
    st.markdown("## 📥 Installation Local")
    st.markdown("""
    <div class="step-box">
        <h3>🐾 Étape 1: Télécharger les fichiers</h3>
        <p>Pour utiliser CléfistAI sur votre ordinateur, vous aurez besoin de ces fichiers magiques :</p>
    </div>
    """, unsafe_allow_html=True)

    with st.expander("📁 Structure des fichiers nécessaires"):
        st.markdown("""
        ```
        clemfist-ai/
        ├── app.py                    # Interface principale
        ├── clemscript_analyzer.py    # Cerveau d'analyse
        ├── clemscript_templates.py   # Templates de code
        ├── code_generator.py         # Générateur magique
        ├── tutorial_page.py          # Page tutoriel
        └── requirements.txt          # Dépendances Python
        ```
        """)

    st.markdown("""
    <div class="code-box">
        <h4>🔗 Créer le fichier requirements.txt</h4>
        <p>Créez un fichier <code>requirements.txt</code> avec le contenu suivant :</p>
    </div>
    """, unsafe_allow_html=True)

    st.code("""
streamlit>=1.28.0
regex>=2023.0.0
    """, language="text")

    # Section 2: Configuration Python
    st.markdown("## 🐍 Configuration Python")
    
    st.markdown("""
    <div class="step-box">
        <h3>🐾 Étape 2: Installer Python</h3>
        <p>CléfistAI fonctionne avec Python 3.8 ou plus récent !</p>
    </div>
    """, unsafe_allow_html=True)

    tab1, tab2, tab3 = st.tabs(["🪟 Windows", "🍎 macOS", "🐧 Linux"])
    
    with tab1:
        st.markdown("""
        **Installation sur Windows:**
        1. Téléchargez Python depuis [python.org](https://python.org)
        2. Lancez l'installateur et cochez "Add to PATH"
        3. Ouvrez PowerShell ou Invite de commandes
        """)
        st.code("""
# Vérifier l'installation
python --version

# Installer les dépendances
pip install -r requirements.txt
        """, language="bash")

    with tab2:
        st.markdown("""
        **Installation sur macOS:**
        1. Installez Homebrew: `/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`
        2. Installez Python: `brew install python`
        3. Ouvrez Terminal
        """)
        st.code("""
# Vérifier l'installation
python3 --version

# Installer les dépendances
pip3 install -r requirements.txt
        """, language="bash")

    with tab3:
        st.markdown("""
        **Installation sur Linux (Ubuntu/Debian):**
        """)
        st.code("""
# Mettre à jour le système
sudo apt update

# Installer Python et pip
sudo apt install python3 python3-pip

# Installer les dépendances
pip3 install -r requirements.txt
        """, language="bash")

    # Section 3: Lancement
    st.markdown("## 🚀 Lancement de l'Application")
    
    st.markdown("""
    <div class="step-box">
        <h3>🐾 Étape 3: Démarrer CléfistAI</h3>
        <p>Une fois tout installé, lancez votre IA magique !</p>
    </div>
    """, unsafe_allow_html=True)

    st.code("""
# Naviguer vers le dossier CléfistAI
cd chemin/vers/clemfist-ai

# Lancer l'application
streamlit run app.py
    """, language="bash")

    st.markdown("""
    <div class="warning-box">
        <strong>🎉 Magie en cours !</strong><br>
        L'application s'ouvrira automatiquement dans votre navigateur à l'adresse <code>http://localhost:8501</code>
    </div>
    """, unsafe_allow_html=True)

    # Section 4: Utilisation Avancée
    st.markdown("## 💫 Utilisation Avancée")
    
    st.markdown("""
    <div class="step-box">
        <h3>🐾 Personnalisation de CléfistAI</h3>
        <p>Vous pouvez adapter CléfistAI à vos besoins spécifiques !</p>
    </div>
    """, unsafe_allow_html=True)

    with st.expander("🎨 Personnaliser l'interface"):
        st.markdown("""
        **Modifier les couleurs et le style:**
        - Éditez le CSS dans `app.py` (section `st.markdown` avec `<style>`)
        - Changez les couleurs en modifiant les codes hexadécimaux
        - Ajoutez vos propres emojis et messages
        """)

    with st.expander("🧠 Ajouter des mots-clés"):
        st.markdown("""
        **Étendre le vocabulaire de CléfistAI:**
        1. Ouvrez `clemscript_analyzer.py`
        2. Trouvez la section `concept_keywords`
        3. Ajoutez vos propres mots-clés français dans les listes appropriées
        
        **Exemple:**
        ```python
        'variable': [
            # Mots existants...
            'mon_nouveau_mot', 'autre_synonyme'
        ]
        ```
        """)

    with st.expander("⚡ Optimiser les performances"):
        st.markdown("""
        **Pour des performances optimales:**
        - Utilisez un SSD pour stocker l'application
        - Fermez les autres applications gourmandes
        - Utilisez Python 3.11+ pour de meilleures performances
        - Configurez un cache Streamlit personnalisé
        """)

    # Section 5: Dépannage
    st.markdown("## 🛠️ Dépannage")
    
    with st.expander("❌ Erreurs communes et solutions"):
        st.markdown("""
        **Problème: ModuleNotFoundError**
        ```bash
        # Solution: Installer les dépendances manquantes
        pip install streamlit
        ```
        
        **Problème: Port déjà utilisé**
        ```bash
        # Solution: Utiliser un autre port
        streamlit run app.py --server.port 8502
        ```
        
        **Problème: Permission denied**
        ```bash
        # Solution sur Linux/macOS: Utiliser sudo
        sudo pip3 install -r requirements.txt
        ```
        
        **Problème: L'interface ne s'affiche pas correctement**
        - Videz le cache du navigateur (Ctrl+F5)
        - Essayez un autre navigateur (Chrome recommandé)
        - Vérifiez que JavaScript est activé
        """)

    with st.expander("🔧 Commandes utiles"):
        st.markdown("""
        ```bash
        # Vérifier la version de Streamlit
        streamlit version
        
        # Lancer avec configuration spécifique
        streamlit run app.py --server.maxUploadSize 200
        
        # Mode développement (rechargement automatique)
        streamlit run app.py --server.runOnSave true
        
        # Lancer sans ouvrir le navigateur
        streamlit run app.py --server.headless true
        
        # Voir l'aide complète
        streamlit run --help
        ```
        """)

    # Section 6: Conseils Pro
    st.markdown("## 🎯 Conseils Pro")
    
    st.markdown("""
    <div class="step-box">
        <h3>🐾 Astuces pour devenir un maître de CléfistAI</h3>
    </div>
    """, unsafe_allow_html=True)

    col1, col2 = st.columns(2)
    
    with col1:
        st.markdown("""
        **💡 Conseils d'utilisation :**
        - Utilisez des phrases naturelles en français
        - Soyez précis dans vos demandes
        - Explorez tous les types de concepts disponibles
        - Sauvegardez vos codes générés préférés
        - Expérimentez avec différents styles d'écriture
        """)
        
    with col2:
        st.markdown("""
        **🚀 Optimisation :**
        - Utilisez des mots-clés variés pour plus de précision
        - Combinez plusieurs concepts dans un prompt
        - Testez vos codes ClemScript avec l'interpréteur
        - Créez vos propres bibliothèques de templates
        - Partagez vos prompts réussis avec la communauté
        """)

    # Section bonus: FAQ
    st.markdown("## ❓ Questions Fréquentes")
    
    with st.expander("🤔 CléfistAI peut-elle fonctionner hors ligne ?"):
        st.markdown("""
        **Oui !** Une fois installée localement, CléfistAI fonctionne entièrement hors ligne. 
        Vous n'avez besoin d'internet que pour l'installation initiale des dépendances.
        """)
    
    with st.expander("🔒 Mes données sont-elles sécurisées ?"):
        st.markdown("""
        **Absolument !** CléfistAI traite tout localement sur votre machine. 
        Aucune donnée n'est envoyée vers des serveurs externes.
        """)
    
    with st.expander("🎨 Puis-je modifier l'apparence ?"):
        st.markdown("""
        **Bien sûr !** Le code est open source et entièrement personnalisable. 
        Vous pouvez modifier les couleurs, les emojis, et même ajouter de nouvelles fonctionnalités.
        """)

    with st.expander("🐛 Comment signaler un bug ?"):
        st.markdown("""
        **Méthodes de signalement :**
        1. Créez un fichier `debug.log` avec l'erreur
        2. Notez les étapes pour reproduire le problème
        3. Incluez votre version de Python et Streamlit
        4. Décrivez le comportement attendu vs observé
        """)

    # Footer kawaii
    st.markdown("---")
    st.markdown("""
    <div style='text-align: center; padding: 20px; background: linear-gradient(45deg, #ffeef8, #e8f5ff); border-radius: 15px; margin-top: 30px;'>
        <h3>🐱✨ Félicitations ! ✨🐱</h3>
        <p>Vous êtes maintenant prêt(e) à utiliser CléfistAI partout ! 🌸</p>
        <p><strong>🐾 Fait avec ❤️ par Clemylia 🐾</strong></p>
        <p><em>Que la magie du code soit avec vous ! 🪄</em></p>
    </div>
    """, unsafe_allow_html=True)