Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Comparateur des Meilleures IA Generatives</title> | |
| <!-- Importation des icônes FontAwesome pour les logos --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Importation d'une police moderne --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --accent: #38bdf8; | |
| --text-main: #f1f5f9; | |
| --text-muted: #94a3b8; | |
| --gradient: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: var(--bg-dark); | |
| color: var(--text-main); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| /* --- Header & Branding --- */ | |
| header { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| padding: 1.5rem 5%; | |
| background: rgba(15, 23, 42, 0.9); | |
| backdrop-filter: blur(10px); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .brand { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: var(--gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| letter-spacing: -1px; | |
| } | |
| .anycoder-link { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| text-decoration: none; | |
| transition: color 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .anycoder-link:hover { | |
| color: var(--accent); | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| padding: 8rem 5% 4rem; | |
| text-align: center; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| margin-bottom: 1rem; | |
| line-height: 1.1; | |
| } | |
| .hero p { | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| } | |
| /* --- Navigation Interactive (Sticky Sidebar) --- */ | |
| .nav-container { | |
| position: relative; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| gap: 2rem; | |
| padding: 0 1rem; | |
| } | |
| aside { | |
| width: 250px; | |
| position: sticky; | |
| top: 100px; | |
| height: fit-content; | |
| display: none; /* Hidden on mobile initially */ | |
| } | |
| @media (min-width: 992px) { | |
| aside { | |
| display: block; | |
| } | |
| } | |
| .menu { | |
| list-style: none; | |
| background: var(--bg-card); | |
| padding: 1rem; | |
| border-radius: 12px; | |
| border: 1px solid rgba(255,255,255,0.05); | |
| } | |
| .menu li { | |
| margin-bottom: 0.5rem; | |
| } | |
| .menu a { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: var(--text-muted); | |
| padding: 0.8rem 1rem; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| font-weight: 500; | |
| } | |
| .menu a:hover, .menu a.active { | |
| background: rgba(56, 189, 248, 0.1); | |
| color: var(--accent); | |
| } | |
| .menu a i { | |
| width: 20px; | |
| text-align: center; | |
| } | |
| /* --- Main Content Grid --- */ | |
| main { | |
| flex: 1; | |
| padding-bottom: 4rem; | |
| } | |
| section { | |
| margin-bottom: 4rem; | |
| padding-top: 100px; /* Offset for sticky header */ | |
| margin-top: -100px; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .section-title i { | |
| color: var(--accent); | |
| } | |
| .grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| /* --- AI Cards --- */ | |
| .card { | |
| background: var(--bg-card); | |
| border: 1px solid rgba(255,255,255,0.05); | |
| border-radius: 16px; | |
| padding: 1.5rem; | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| position: relative; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5); | |
| border-color: rgba(56, 189, 248, 0.3); | |
| } | |
| .card-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .logo-box { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| background: rgba(255,255,255,0.05); | |
| } | |
| /* Specific Logo Styles */ | |
| .logo-gemini { color: #4285F4; } | |
| .logo-chatgpt { color: #10a37f; } | |
| .logo-mistral { color: #eb2226; } | |
| .logo-claude { color: #d97706; } | |
| .logo-ideogram { color: #ffffff; } | |
| .logo-leonardo { color: #ef4444; } | |
| .logo-midjourney { color: #dcdcdc; } | |
| .logo-invideo { color: #00d2ff; } | |
| .logo-vheer { color: #a855f7; } | |
| .logo-notebooklm { color: #facc15; } | |
| .platform-name { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .card-desc { | |
| color: var(--text-muted); | |
| font-size: 0.95rem; | |
| margin-bottom: 1.5rem; | |
| flex-grow: 1; | |
| } | |
| .btn-link { | |
| display: inline-block; | |
| text-decoration: none; | |
| color: var(--text-main); | |
| background: rgba(255,255,255,0.05); | |
| padding: 0.6rem 1rem; | |
| border-radius: 8px; | |
| text-align: center; | |
| font-weight: 600; | |
| font-size: 0.9rem; | |
| transition: background 0.2s; | |
| width: 100%; | |
| } | |
| .btn-link:hover { | |
| background: var(--accent); | |
| color: var(--bg-dark); | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| text-align: center; | |
| padding: 2rem; | |
| border-top: 1px solid rgba(255,255,255,0.05); | |
| color: var(--text-muted); | |
| font-size: 0.8rem; | |
| } | |
| /* --- Mobile Nav Toggle --- */ | |
| .mobile-nav-toggle { | |
| display: none; | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--accent); | |
| color: var(--bg-dark); | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| border: none; | |
| cursor: pointer; | |
| z-index: 1001; | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.3); | |
| font-size: 1.2rem; | |
| } | |
| @media (max-width: 991px) { | |
| .mobile-nav-toggle { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| aside { | |
| position: fixed; | |
| top: auto; | |
| bottom: -100%; | |
| left: 0; | |
| width: 100%; | |
| height: 300px; | |
| background: var(--bg-card); | |
| z-index: 999; | |
| border-radius: 20px 20px 0 0; | |
| transition: bottom 0.3s ease; | |
| padding: 1rem; | |
| } | |
| aside.open { | |
| bottom: 0; | |
| } | |
| .menu { | |
| display: flex; | |
| flex-direction: row; | |
| overflow-x: auto; | |
| background: transparent; | |
| border: none; | |
| padding: 0; | |
| } | |
| .menu li { | |
| margin-bottom: 0; | |
| margin-right: 1rem; | |
| } | |
| .menu a { | |
| white-space: nowrap; | |
| background: rgba(255,255,255,0.05); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="brand">AI Explorer</div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link"> | |
| <span>Built with</span> | |
| <strong>Anytcoder</strong> | |
| <i class="fas fa-external-link-alt"></i> | |
| </a> | |
| </header> | |
| <div class="hero"> | |
| <h1>L'Intelligence Artificielle à portée de main</h1> | |
| <p>Découvrez les plateformes les plus puissantes classées par domaine d'expertise.</p> | |
| </div> | |
| <div class="nav-container"> | |
| <aside id="sidebar"> | |
| <ul class="menu"> | |
| <li><a href="#text-ai"><i class="fas fa-keyboard"></i> IAs Textes</a></li> | |
| <li><a href="#image-ai"><i class="fas fa-paint-brush"></i> IAs Graphiques</a></li> | |
| <li><a href="#video-ai"><i class="fas fa-video"></i> IAs Vidéo</a></li> | |
| <li><a href="#other-ai"><i class="fas fa-flask"></i> Autres Outils</a></li> | |
| </ul> | |
| </aside> | |
| <main> | |
| <!-- Section IA Textes --> | |
| <section id="text-ai"> | |
| <h2 class="section-title"><i class="fas fa-align-left"></i> Intelligence Artificielle Textuelle</h2> | |
| <div class="grid"> | |
| <!-- Gemini --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-gemini"><i class="fab fa-google"></i></div> | |
| <h3 class="platform-name">Gemini</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Développée par Google, Gemini se distingue par ses capacités multimodales (texte, image, code).<br> | |
| Elle est reconnue pour sa grande base de connaissances actualisées et son intégration native dans l'écosystème Google.<br> | |
| La version gratuite est extrêmement puissante et rivalise avec les modèles payants.<br> | |
| Son interface permet une recherche conversationnelle intuitive.<br> | |
| Idéale pour les étudiants et les professionnels recherchant une recherche approfondie. | |
| </p> | |
| <a href="https://gemini.google.com/" target="_blank" class="btn-link">Visiter Gemini</a> | |
| </article> | |
| <!-- ChatGPT --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-chatgpt"><i class="fas fa-robot"></i></div> | |
| <h3 class="platform-name">Chat GPT</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Créée par OpenAI, c'est la référence mondiale en matière de conversationnels.<br> | |
| Le modèle GPT-4 offre une compréhension du contexte remarquable et une créativité impressionnante.<br> | |
| Ses plugins permettent de surfer sur le web et d'exécuter du code en temps réel.<br> | |
| C'est l'outil de référence pour la rédaction, le codage et le brainstorming.<br> | |
| L'interface utilisateur est simple et accessible à tous. | |
| </p> | |
| <a href="https://chatgpt.com/" target="_blank" class="btn-link">Visiter ChatGPT</a> | |
| </article> | |
| <!-- Mistral --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-mistral"><i class="fas fa-wind"></i></div> | |
| <h3 class="platform-name">Mistral</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Issue d'une startup française, Mistral AI mise sur l'efficacité et l'open source.<br> | |
| Les modèles sont légers mais très performants, permettant un déploiement rapide.<br> | |
| La version "Mixtral" offre une architecture hybride respectueuse des ressources.<br> | |
| C'est un favori des développeurs pour sa flexibilité et son approche européenne.<br> | |
| Une alternative de plus en plus solide aux géants américains. | |
| </p> | |
| <a href="https://mistral.ai/" target="_blank" class="btn-link">Visiter Mistral</a> | |
| </article> | |
| <!-- Claude --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-claude"><i class="fas fa-feather-alt"></i></div> | |
| <h3 class="platform-name">Claude</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Développé par Anthropic, Claude est célèbre pour son approche "Constitutionnelle" axée sur la sécurité.<br> | |
| Il est capable de traiter des fenêtres de contexte très longues (livres entiers).<br> | |
| Son style d'écriture est souvent jugé plus naturel et empathique que ses concurrents.<br> | |
| Il excelle dans l'analyse de documents longs et la synthèse.<br> | |
| Une excellente option pour les tâches de recherche et l'éthique de l'IA. | |
| </p> | |
| <a href="https://claude.ai/" target="_blank" class="btn-link">Visiter Claude</a> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Section IA Graphiques --> | |
| <section id="image-ai"> | |
| <h2 class="section-title"><i class="fas fa-palette"></i> Génération d'Images</h2> | |
| <div class="grid"> | |
| <!-- Ideogram --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-ideogram"><i class="fas fa-font"></i></div> | |
| <h3 class="platform-name">Ideogram</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Ideogram se spécialise dans la génération d'images assistée par IA avec un fort accent sur le typographie.<br> | |
| C'est l'outil parfait pour créer des affiches, des logos ou des designs包含 du texte lisible.<br> | |
| Son modèle comprend très bien les polices, les styles et les mises en page.<br> | |
| Il rivalise directement avec Midjourney pour la qualité photoréaliste.<br> | |
| Une révolution pour les designers graphiques. | |
| </p> | |
| <a href="https://ideogram.ai/" target="_blank" class="btn-link">Visiter Ideogram</a> | |
| </article> | |
| <!-- Leonardo --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-leonardo"><i class="fas fa-dragon"></i></div> | |
| <h3 class="platform-name">Leonardo</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Cette plateforme offre une génération en temps réel et une communauté très active.<br> | |
| Elle est particulièrement réputée pour les styles anime, fantasy et concept art.<br> | |
| Les outils de prompt wizard facilitent l'écriture des descriptions complexes.<br> | |
| Sa fonction "Motion" permet de donner vie aux images静态.<br> | |
| Un must pour les créateurs de contenu visuel. | |
| </p> | |
| <a href="https://leonardo.ai/" target="_blank" class="btn-link">Visiter Leonardo</a> | |
| </article> | |
| <!-- Midjourney --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-midjourney"><i class="fas fa-crown"></i></div> | |
| <h3 class="platform-name">Midjourney</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Considérée comme l'artiste IA par excellence, Midjourney génère des images d'une qualité artistique époustouflante.<br> | |
| Son esthétique est souvent décrite comme onirique, cinématographique et très colorés.<br> | |
| Accessible principalement via Discord, elle a su créer une communauté engagée.<br> | |
| C'est le choix privilégié pour les illustrations de couverture et l'art conceptuel.<br> | |
| Chaque nouvelle version (V6, V7) repousse les limites du réalisme. | |
| </p> | |
| <a href="https://www.midjourney.com/" target="_blank" class="btn-link">Visiter Midjourney</a> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Section IA Vidéo --> | |
| <section id="video-ai"> | |
| <h2 class="section-title"><i class="fas fa-film"></i> Texte vers Vidéo</h2> | |
| <div class="grid"> | |
| <!-- Invideo --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-invideo"><i class="fas fa-video"></i></div> | |
| <h3 class="platform-name">Invideo</h3> | |
| </div> | |
| <p class="card-desc"> | |
| InVideo AI simplifie la création vidéo en convertissant simplement un texte en script et vidéo.<br> | |
| C'est l'outil parfait pour les YouTubers et créateurs de contenu éducatif ou marketing.<br> | |
| La plateforme offre une vaste bibliothèque de médias et de modèles préconçus.<br> | |
| La voix-off générée est naturelle et multilingue.<br> | |
| Gagnez des heures de montage en quelques secondes. | |
| </p> | |
| <a href="https://invideo.io/" target="_blank" class="btn-link">Visiter Invideo</a> | |
| </article> | |
| <!-- Vheer --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-vheer"><i class="fas fa-magic"></i></div> | |
| <h3 class="platform-name">Vheer</h3> | |
| </div> | |
| <p class="card-desc"> | |
| Vheer (anciennement connu sous le nom de projet vidéo IA) se concentre sur l'accessibilité.<br> | |
| Son moteur permet de transformer des concepts textuels en storyboards animés.<br> | |
| C'est un excellent outil pour la création de courtes vidéos promotionnelles.<br> | |
| L'interface est épurée pour ne pas rebuter les débutants.<br> | |
| Une montée en puissance attendue dans le domaine de la vidéo generative. | |
| </p> | |
| <a href="https://www.veer.tv/" target="_blank" class="btn-link">Visiter Vheer</a> | |
| </article> | |
| </div> | |
| </section> | |
| <!-- Section Autres --> | |
| <section id="other-ai"> | |
| <h2 class="section-title"><i class="fas fa-atom"></i> Outils de Recherche & Apprentissage</h2> | |
| <div class="grid"> | |
| <!-- NotebookLM --> | |
| <article class="card"> | |
| <div class="card-header"> | |
| <div class="logo-box logo-notebooklm"><i class="fas fa-book-open"></i></div> | |
| <h3 class="platform-name">NotebookLM</h3> | |
| </div> | |
| <p class="card-desc"> | |
| L'outil de Google pour la recherche personnelle qui utilise l'IA pour lire vos documents.<br> | |
| Vous pouvez uploader des PDF, des vidéos YouTube ou des sites web, et l'IA les "comprend".<br> | |
| Sa fonction "Audio Overview" transforme vos notes en un podcast conversationnel.<br> | |
| C'est l'assistant idéal pour les étudiants ou les chercheurs face à une surcharge d'informations.<br> | |
| Vos données restent privées et locales à vos sources. | |
| </p> | |
| <a href="https://notebooklm.google.com/" target="_blank" class="btn-link">Visiter NotebookLM</a> | |
| </article> | |
| </div> | |
| </section> | |
| </main> | |
| </div> | |
| <footer> | |
| <p>© 2023 - 2024 AI Explorer. Tous droits réservés.</p> | |
| </footer> | |
| <button class="mobile-nav-toggle" id="navToggle"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <script> | |
| // Logique pour le menu interactif et la navigation mobile | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const navToggle = document.getElementById('navToggle'); | |
| const sidebar = document.getElementById('sidebar'); | |
| const menuLinks = document.querySelectorAll('.menu a'); | |
| const icon = navToggle.querySelector('i'); | |
| // Toggle Menu Mobile | |
| navToggle.addEventListener('click', () => { | |
| sidebar.classList.toggle('open'); | |
| if (sidebar.classList.contains('open')) { | |
| icon.classList.remove('fa-bars'); | |
| icon.classList.add('fa-times'); | |
| } else { | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| }); | |
| // Fermer le menu mobile au clic sur un lien | |
| menuLinks.forEach(link => { | |
| link.addEventListener('click', () => { | |
| if (window.innerWidth < 992) { | |
| sidebar.classList.remove('open'); | |
| icon.classList.remove('fa-times'); | |
| icon.classList.add('fa-bars'); | |
| } | |
| }); | |
| }); | |
| // Effet de "Scroll Spy" pour surligner le menu actif | |
| const sections = document.querySelectorAll('section'); | |
| const observerOptions = { | |
| root: null, | |
| rootMargin: '-50% 0px -50% 0px', // Active quand la section est au milieu de l'écran | |
| threshold: 0 | |
| }; | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| // Retirer active de tous | |
| menuLinks.forEach(link => { | |
| link.classList.remove('active'); | |
| }); | |
| // Ajouter active au lien correspondant | |
| const activeId = entry.target.getAttribute('id'); | |
| const activeLink = document.querySelector(`.menu a[href="#${activeId}"]`); | |
| if (activeLink) { | |
| activeLink.classList.add('active'); | |
| } | |
| } | |
| }); | |
| }, observerOptions); | |
| sections.forEach(section => { | |
| observer.observe(section); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |