Spaces:

docto41
/

cinestream-ia

Running

App Files Files Community

docto41 commited on May 19

Commit

cb32e74

verified ·

1 Parent(s): 1db0f0a

Add 2 files

Browse files

Files changed (2) hide show

index.html +519 -1220
prompts.txt +8 -1

index.html CHANGED Viewed

@@ -3,27 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CineStream AI - Streaming Automatique Intelligent</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#6d28d9',
-                        secondary: '#8b5cf6',
-                        dark: '#1e1b4b',
-                        light: '#f5f3ff',
-                        ai: '#10b981'
-                    },
-                    fontFamily: {
-                        sans: ['Inter', 'sans-serif'],
-                    },
-                }
-            }
-        }
-    </script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@@ -35,16 +18,16 @@
         .movie-card {
             transition: all 0.3s ease;
         }
         .movie-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
         }
-        .movie-poster {
-            height: 450px;
-            object-fit: cover;
         }
         .loading-spinner {
@@ -56,320 +39,44 @@
             100% { transform: rotate(360deg); }
         }
-        .gradient-text {
-            background: linear-gradient(90deg, #8b5cf6, #ec4899);
-            -webkit-background-clip: text;
-            background-clip: text;
-            color: transparent;
-        }
-        .search-input:focus {
-            box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
-        }
-        .error-message {
-            background-color: rgba(239, 68, 68, 0.2);
-            border-left: 4px solid #ef4444;
-        }
-        .placeholder-poster {
-            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        /* Style pour le lecteur vidéo */
-        .video-container {
-            position: relative;
-            padding-bottom: 56.25%; /* 16:9 */
-            height: 0;
-            overflow: hidden;
-        }
-        .video-container iframe {
-            position: absolute;
-            top: 0;
-            left: 0;
             width: 100%;
-            height: 100%;
-            border: none;
-        }
-        /* Style pour les boutons de streaming */
-        .stream-btn {
-            transition: all 0.2s ease;
         }
-        .stream-btn:hover {
-            transform: scale(1.05);
         }
-        /* Style pour la fenêtre de streaming */
-        .streaming-window {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
             height: 100%;
-            background-color: rgba(0, 0, 0, 0.9);
-            z-index: 1000;
-            display: flex;
-            flex-direction: column;
         }
-        .streaming-header {
-            padding: 15px;
-            background-color: rgba(0, 0, 0, 0.7);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
         }
-        .streaming-content {
-            flex: 1;
-            display: flex;
-            justify-content: center;
-            align-items: center;
         }
-        .streaming-controls {
-            padding: 15px;
-            background-color: rgba(0, 0, 0, 0.7);
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-        /* Style pour la sélection de serveur */
-        .server-list {
-            display: flex;
-            gap: 10px;
-            flex-wrap: wrap;
-            margin-top: 10px;
-        }
-        .server-btn {
-            padding: 8px 12px;
-            border-radius: 20px;
-            font-size: 14px;
-            cursor: pointer;
-            transition: all 0.2s;
-        }
-        .server-btn.active {
-            background-color: #6d28d9;
-            color: white;
-        }
-        .server-btn.inactive {
-            background-color: #334155;
-            color: #94a3b8;
         }
-        /* Animation de chargement du streaming */
-        .stream-loading {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 20px;
         }
-        .stream-loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(255, 255, 255, 0.1);
-            border-radius: 50%;
-            border-top-color: #6d28d9;
-            animation: spin 1s linear infinite;
-        }
-        /* Nouveaux styles pour les serveurs automatiques */
-        .auto-server-badge {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background-color: rgba(109, 40, 217, 0.9);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            z-index: 10;
-        }
-        .server-quality {
-            font-size: 12px;
-            margin-left: 5px;
-            opacity: 0.8;
-        }
-        /* Styles pour l'IA */
-        .ai-badge {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background-color: rgba(16, 185, 129, 0.9);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: bold;
-            z-index: 10;
-        }
-        .ai-message {
-            background-color: rgba(16, 185, 129, 0.2);
-            border-left: 4px solid #10b981;
-            padding: 12px;
-            border-radius: 4px;
-            margin-bottom: 15px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        .ai-thinking {
-            display: inline-block;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: #10b981;
-            animation: pulse 1.5s infinite;
-        }
-        @keyframes pulse {
-            0% { transform: scale(0.95); opacity: 0.7; }
-            50% { transform: scale(1.1); opacity: 1; }
-            100% { transform: scale(0.95); opacity: 0.7; }
-        }
-        .ai-optimizing {
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            font-size: 14px;
-            color: #10b981;
-        }
-        .ai-control-panel {
-            background-color: rgba(16, 185, 129, 0.1);
-            border: 1px solid rgba(16, 185, 129, 0.3);
-            border-radius: 8px;
-            padding: 15px;
-            margin-top: 15px;
-        }
-        .ai-toggle {
-            position: relative;
-            display: inline-block;
-            width: 50px;
-            height: 24px;
-        }
-        .ai-toggle input {
-            opacity: 0;
-            width: 0;
-            height: 0;
-        }
-        .ai-slider {
-            position: absolute;
-            cursor: pointer;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: #334155;
-            transition: .4s;
-            border-radius: 24px;
-        }
-        .ai-slider:before {
-            position: absolute;
-            content: "";
-            height: 16px;
-            width: 16px;
-            left: 4px;
-            bottom: 4px;
-            background-color: white;
-            transition: .4s;
-            border-radius: 50%;
-        }
-        input:checked + .ai-slider {
-            background-color: #10b981;
-        }
-        input:checked + .ai-slider:before {
-            transform: translateX(26px);
-        }
-        .ai-status {
-            display: inline-flex;
-            align-items: center;
-            gap: 6px;
-            font-size: 14px;
-        }
-        .ai-status-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            background-color: #10b981;
-            animation: pulse 1.5s infinite;
-        }
-        .ai-status.offline .ai-status-dot {
-            background-color: #ef4444;
-            animation: none;
-        }
-        .ai-server-analyzer {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-            margin-top: 15px;
-        }
-        .ai-server-progress {
-            width: 100%;
-            background-color: #334155;
-            border-radius: 4px;
-            height: 6px;
-            overflow: hidden;
-        }
-        .ai-server-progress-bar {
-            height: 100%;
-            background-color: #10b981;
-            border-radius: 4px;
-            transition: width 0.3s ease;
-        }
-        .ai-server-info {
-            display: flex;
-            justify-content: space-between;
-            font-size: 12px;
-            color: #94a3b8;
-        }
-        .ai-server-name {
-            font-weight: 500;
-            color: white;
-        }
-        .ai-server-speed {
-            color: #10b981;
-        }
-        .ai-server-latency {
-            color: #f59e0b;
-        }
-        .ai-server-stability {
-            color: #8b5cf6;
         }
     </style>
 </head>
@@ -380,14 +87,14 @@
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0">
-                        <span class="text-2xl font-bold gradient-text">CineStream <span class="text-ai">AI</span></span>
                     </div>
                     <div class="hidden md:block ml-10">
                         <div class="flex space-x-4">
-                            <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>
-                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a>
                         </div>
                     </div>
                 </div>
@@ -395,16 +102,12 @@
                     <div class="ml-4 flex items-center md:ml-6">
                         <div class="relative mx-4">
                             <input type="text" id="search-input" placeholder="Rechercher un film..."
-                                   class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200">
-                            <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white">
                                 <i class="fas fa-search"></i>
                             </button>
                         </div>
-                        <div class="ai-status">
-                            <span class="ai-status-dot"></span>
-                            <span>IA Active</span>
-                        </div>
-                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none ml-4">
                             <i class="fas fa-user-circle text-xl"></i>
                         </button>
                     </div>
@@ -421,78 +124,191 @@
     <!-- Main Content -->
     <main class="pt-24 pb-12">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <!-- AI Control Panel -->
-            <div class="ai-control-panel mb-8">
-                <div class="flex justify-between items-center">
-                    <div>
-                        <h3 class="text-lg font-semibold text-white flex items-center gap-2">
-                            <i class="fas fa-robot text-ai"></i>
-                            <span>Contrôle de l'IA AutoPilot</span>
-                        </h3>
-                        <p class="text-sm text-gray-400 mt-1">L'IA optimise automatiquement votre expérience de streaming</p>
                     </div>
-                    <label class="flex items-center gap-2 cursor-pointer">
-                        <span class="text-sm text-gray-300">Mode AutoPilot</span>
-                        <div class="ai-toggle">
-                            <input type="checkbox" id="ai-toggle" checked>
-                            <span class="ai-slider"></span>
                         </div>
-                    </label>
                 </div>
-                <div class="ai-server-analyzer">
-                    <div class="ai-optimizing">
-                        <div class="ai-thinking"></div>
-                        <span>Analyse des serveurs en temps réel...</span>
                     </div>
-                    <div class="ai-server-info">
-                        <span class="ai-server-name">SuperEmbed</span>
-                        <span class="ai-server-speed">Vitesse: 24 Mbps</span>
-                        <span class="ai-server-latency">Latence: 78ms</span>
-                        <span class="ai-server-stability">Stabilité: 98%</span>
                     </div>
-                    <div class="ai-server-progress">
-                        <div class="ai-server-progress-bar" style="width: 92%"></div>
                     </div>
                 </div>
-            </div>
-            <!-- Featured Section -->
             <section class="mb-12">
                 <div class="flex justify-between items-center mb-6">
-                    <h2 class="text-2xl font-bold text-white">Films populaires</h2>
-                    <div class="flex space-x-2">
-                        <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button>
-                        <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button>
-                        <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button>
                     </div>
                 </div>
-                <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-                    <!-- Movies will be loaded here -->
-                    <div class="flex justify-center items-center py-12 col-span-full">
-                        <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
-                    </div>
                 </div>
-                <div id="load-more-container" class="mt-8 flex justify-center">
-                    <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center">
-                        <span>Voir plus</span>
-                        <i class="fas fa-chevron-down ml-2"></i>
-                    </button>
                 </div>
-            </section>
-            <!-- Genres Section -->
-            <section class="mb-12">
-                <h2 class="text-2xl font-bold text-white mb-6">Par genres</h2>
-                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
-                    <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button>
-                    <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button>
-                    <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button>
-                    <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button>
-                    <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button>
-                    <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button>
                 </div>
             </section>
         </div>
@@ -503,929 +319,412 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="text-white text-lg font-semibold mb-4">CineStream AI</h3>
-                    <p class="text-sm">La plateforme de streaming intelligente qui optimise automatiquement votre expérience.</p>
                 </div>
                 <div>
-                    <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>
                     <ul class="space-y-2 text-sm">
-                        <li><a href="#" class="hover:text-white">Accueil</a></li>
-                        <li><a href="#" class="hover:text-white">Films</a></li>
-                        <li><a href="#" class="hover:text-white">Séries</a></li>
-                        <li><a href="#" class="hover:text-white">Nouveautés</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white text-lg font-semibold mb-4">Légal</h3>
                     <ul class="space-y-2 text-sm">
-                        <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>
-                        <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>
-                        <li><a href="#" class="hover:text-white">DMCA</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>
                     <div class="flex space-x-4">
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
-                <p>© 2023 CineStream AI. Tous droits réservés.</p>
             </div>
         </div>
     </footer>
-    <!-- Movie Details Modal -->
-    <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">
-        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-                <div class="absolute inset-0 bg-gray-900 opacity-75"></div>
-            </div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
-                <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                    <div class="sm:flex sm:items-start">
-                        <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">
-                            <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">
-                        </div>
-                        <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">
-                            <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3>
-                            <div class="flex items-center mb-4">
-                                <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>
-                                <span id="modal-year" class="text-gray-300 text-sm"></span>
-                                <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>
-                            </div>
-                            <p id="modal-overview" class="text-gray-300 mb-4"></p>
-                            <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>
-                            <!-- AI Recommendation -->
-                            <div class="ai-message">
-                                <i class="fas fa-robot text-ai"></i>
-                                <div>
-                                    <p class="font-medium">Recommandation de l'IA</p>
-                                    <p id="ai-recommendation" class="text-sm">Analyse en cours pour optimiser votre streaming...</p>
-                                </div>
-                            </div>
-                            <!-- Serveurs de streaming -->
-                            <div class="mb-4">
-                                <h4 class="text-sm font-semibold text-gray-400 mb-2">CHOISIR UN SERVEUR :</h4>
-                                <div class="server-list">
-                                    <button onclick="selectServer('superembed')" class="server-btn active" data-server="superembed">
-                                        <i class="fas fa-bolt mr-1"></i> SuperEmbed <span class="server-quality">HD</span>
-                                    </button>
-                                    <button onclick="selectServer('vidsrc')" class="server-btn inactive" data-server="vidsrc">
-                                        <i class="fas fa-server mr-1"></i> VidSrc <span class="server-quality">Multi-Q</span>
-                                    </button>
-                                    <button onclick="selectServer('2embed')" class="server-btn inactive" data-server="2embed">
-                                        <i class="fas fa-play-circle mr-1"></i> 2Embed <span class="server-quality">1080p</span>
-                                    </button>
-                                    <button onclick="selectServer('databasegdrive')" class="server-btn inactive" data-server="databasegdrive">
-                                        <i class="fas fa-database mr-1"></i> GDrive <span class="server-quality">4K</span>
-                                    </button>
-                                    <button onclick="selectServer('multiembed')" class="server-btn inactive" data-server="multiembed">
-                                        <i class="fas fa-layer-group mr-1"></i> MultiEmbed <span class="server-quality">HD</span>
-                                    </button>
-                                    <button onclick="selectServer('autoembed')" class="server-btn inactive" data-server="autoembed">
-                                        <i class="fas fa-robot mr-1"></i> AutoEmbed <span class="server-quality">Auto</span>
-                                    </button>
-                                    <button onclick="selectServer('vidsrcme')" class="server-btn inactive" data-server="vidsrcme">
-                                        <i class="fas fa-play mr-1"></i> VidSrc.me <span class="server-quality">HD</span>
-                                    </button>
-                                    <button onclick="selectServer('movapi')" class="server-btn inactive" data-server="movapi">
-                                        <i class="fas fa-film mr-1"></i> MovAPI <span class="server-quality">Multi-Q</span>
-                                    </button>
-                                </div>
-                            </div>
-                            <div class="mt-4">
-                                <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
-                                    Fermer
-                                </button>
-                                <button id="watch-now-btn" onclick="startStreaming()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
-                                    <i class="fas fa-play mr-2"></i> Lecture auto (IA)
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Streaming Window (hidden by default) -->
-    <div id="streaming-window" class="streaming-window hidden">
-        <div class="streaming-header">
-            <div class="flex items-center gap-4">
-                <h3 id="streaming-title" class="text-xl font-bold text-white"></h3>
-                <div class="ai-status">
-                    <span class="ai-status-dot"></span>
-                    <span class="text-sm">IA Optimisation</span>
-                </div>
-            </div>
-            <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-white">
-                <i class="fas fa-times text-xl"></i>
-            </button>
-        </div>
-        <div class="streaming-content">
-            <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;">
-                <!-- Contenu du lecteur sera chargé ici -->
-                <div id="stream-loading" class="stream-loading w-full h-full">
-                    <div class="stream-loading-spinner"></div>
-                    <p class="text-gray-300">L'IA optimise votre streaming...</p>
-                </div>
-            </div>
-        </div>
-        <div class="streaming-controls">
-            <div class="flex items-center gap-4">
-                <div class="ai-optimizing">
-                    <div class="ai-thinking"></div>
-                    <span class="text-sm">Analyse des performances en temps réel</span>
-                </div>
-                <div class="flex space-x-2">
-                    <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button>
-                    <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button>
-                    <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button>
-                </div>
-            </div>
-            <div>
-                <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">
-                    <i class="fas fa-expand mr-1"></i> Plein écran
-                </button>
-            </div>
-        </div>
-    </div>
     <script>
         // Configuration
-        const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide
         const BASE_URL = 'https://api.themoviedb.org/3';
-        // Serveurs de streaming avec URLs de base fonctionnelles et paramètres de lecture
-        const STREAMING_SERVERS = {
-            superembed: {
-                name: 'SuperEmbed',
-                url: 'https://multiembed.mov/?video_id=',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'HD',
-                params: {
-                    tmdb: 'tmdb=',
-                    imdb: 'imdb=',
-                    auto: '&autoplay=1'
-                },
-                aiScore: 0 // Score initialisé par l'IA
-            },
-            vidsrc: {
-                name: 'VidSrc',
-                url: 'https://vidsrc.to/embed/movie/',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'Multi-Q',
-                params: {
-                    auto: '?autoplay=1'
-                },
-                aiScore: 0
-            },
-            '2embed': {
-                name: '2Embed',
-                url: 'https://www.2embed.cc/embed/',
-                autoPlay: true,
-                requiresTMDB: false,
-                requiresIMDB: true,
-                quality: '1080p',
-                params: {
-                    auto: '?autoplay=true'
-                },
-                aiScore: 0
-            },
-            databasegdrive: {
-                name: 'GDrive Player',
-                url: 'https://database.gdriveplayer.us/player.php?tmdb=',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: '4K',
-                params: {
-                    auto: '&autoplay=1'
-                },
-                aiScore: 0
-            },
-            multiembed: {
-                name: 'MultiEmbed',
-                url: 'https://embed.smashystream.com/playere.php?tmdb=',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'HD',
-                params: {
-                    auto: '&autoplay=1'
-                },
-                aiScore: 0
-            },
-            autoembed: {
-                name: 'AutoEmbed',
-                url: 'https://autoembed.to/movie/tmdb/',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'Auto',
-                params: {
-                    auto: '?autoplay=1'
-                },
-                aiScore: 0
-            },
-            vidsrcme: {
-                name: 'VidSrc.me',
-                url: 'https://vidsrc.me/embed/',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'HD',
-                params: {
-                    auto: '?autoplay=1'
-                },
-                aiScore: 0
-            },
-            movapi: {
-                name: 'MovAPI',
-                url: 'https://movapi.vercel.app/movie/',
-                autoPlay: true,
-                requiresTMDB: true,
-                requiresIMDB: false,
-                quality: 'Multi-Q',
-                params: {
-                    auto: '?autoplay=1'
-                },
-                aiScore: 0
-            }
-        };
         let currentPage = 1;
-        let currentFilter = 'popular';
-        let currentGenre = null;
-        let currentSearch = '';
         let totalPages = 1;
-        let isLoading = false;
-        let currentMovieId = null;
-        let currentIMDBId = null;
-        let selectedServer = 'superembed';
-        let isAutoPilotEnabled = true;
-        let aiInterval = null;
-        // Fonction utilitaire pour faire les requêtes API
-        async function fetchAPI(endpoint, params = {}) {
-            const url = new URL(`${BASE_URL}${endpoint}`);
-            // Ajouter les paramètres par défaut
-            const defaultParams = {
-                language: 'fr-FR',
-                api_key: API_KEY
-            };
-            // Fusionner les paramètres
-            const queryParams = {...defaultParams, ...params};
-            // Ajouter les paramètres à l'URL
-            Object.keys(queryParams).forEach(key => {
-                if (queryParams[key] !== undefined && queryParams[key] !== null) {
-                    url.searchParams.append(key, queryParams[key]);
-                }
-            });
             try {
-                const response = await fetch(url);
-                if (!response.ok) {
-                    throw new Error(`Erreur HTTP: ${response.status}`);
-                }
-                return await response.json();
             } catch (error) {
-                console.error('Erreur API:', error);
-                throw error;
             }
         }
-        // Charger les films au démarrage
-        document.addEventListener('DOMContentLoaded', function() {
-            loadMovies();
-            // Écouter la touche Entrée dans la recherche
-            document.getElementById('search-input').addEventListener('keypress', function(e) {
-                if (e.key === 'Enter') {
-                    searchMovies();
-                }
-            });
-            // Gérer le toggle de l'IA
-            document.getElementById('ai-toggle').addEventListener('change', function(e) {
-                isAutoPilotEnabled = e.target.checked;
-                if (isAutoPilotEnabled) {
-                    document.querySelector('.ai-status').classList.remove('offline');
-                    document.querySelector('.ai-status-dot').style.backgroundColor = '#10b981';
-                    document.querySelector('.ai-status-dot').style.animation = 'pulse 1.5s infinite';
-                    showAIMessage("Mode AutoPilot activé - L'IA optimise votre streaming");
                 } else {
-                    document.querySelector('.ai-status').classList.add('offline');
-                    document.querySelector('.ai-status-dot').style.backgroundColor = '#ef4444';
-                    document.querySelector('.ai-status-dot').style.animation = 'none';
-                    showAIMessage("Mode AutoPilot désactivé - Contrôle manuel");
                 }
             });
-            // Simuler l'analyse des serveurs par l'IA
-            simulateAIAnalysis();
-        });
-        // Simuler l'analyse des serveurs par l'IA
-        function simulateAIAnalysis() {
-            if (aiInterval) clearInterval(aiInterval);
-            aiInterval = setInterval(() => {
-                // Mettre à jour les scores des serveurs de manière aléatoire (simulation)
-                Object.keys(STREAMING_SERVERS).forEach(serverId => {
-                    // Score basé sur la vitesse, la latence et la stabilité simulées
-                    const speed = Math.floor(Math.random() * 30) + 5; // 5-35 Mbps
-                    const latency = Math.floor(Math.random() * 150) + 50; // 50-200ms
-                    const stability = Math.floor(Math.random() * 20) + 80; // 80-100%
-                    // Calcul du score (plus le score est élevé, meilleur est le serveur)
-                    STREAMING_SERVERS[serverId].aiScore = Math.round(
-                        (speed / 5) + // Poids pour la vitesse
-                        ((200 - latency) / 2) + // Poids pour la latence (plus c'est bas, mieux c'est)
-                        (stability / 1) // Poids pour la stabilité
-                    );
-                    // Mettre à jour l'affichage si le serveur est sélectionné
-                    if (selectedServer === serverId) {
-                        updateServerPerformanceUI(speed, latency, stability);
-                    }
-                });
-                // Si AutoPilot est activé, sélectionner automatiquement le meilleur serveur
-                if (isAutoPilotEnabled && currentMovieId) {
-                    selectBestServer();
-                }
-            }, 3000); // Mettre à jour toutes les 3 secondes
         }
-        // Mettre à jour l'UI des performances du serveur
-        function updateServerPerformanceUI(speed, latency, stability) {
-            const serverInfo = document.querySelector('.ai-server-info');
-            if (serverInfo) {
-                serverInfo.innerHTML = `
-                    <span class="ai-server-name">${STREAMING_SERVERS[selectedServer].name}</span>
-                    <span class="ai-server-speed">Vitesse: ${speed} Mbps</span>
-                    <span class="ai-server-latency">Latence: ${latency}ms</span>
-                    <span class="ai-server-stability">Stabilité: ${stability}%</span>
-                `;
-                const progressBar = document.querySelector('.ai-server-progress-bar');
-                if (progressBar) {
-                    const progress = Math.min(100, (speed / 35) * 100); // Normalisé sur 35 Mbps max
-                    progressBar.style.width = `${progress}%`;
-                }
             }
-        }
-        // Sélectionner le meilleur serveur selon l'IA
-        function selectBestServer() {
-            let bestServer = null;
-            let highestScore = -1;
-            // Trouver le serveur avec le score le plus élevé
-            Object.keys(STREAMING_SERVERS).forEach(serverId => {
-                if (STREAMING_SERVERS[serverId].aiScore > highestScore) {
-                    highestScore = STREAMING_SERVERS[serverId].aiScore;
-                    bestServer = serverId;
-                }
-            });
-            // Si un meilleur serveur est trouvé et différent du serveur actuel
-            if (bestServer && bestServer !== selectedServer) {
-                selectedServer = bestServer;
-                updateSelectedServerUI();
-                // Si en train de streamer, redémarrer avec le nouveau serveur
-                if (document.getElementById('streaming-window').classList.contains('hidden') === false) {
-                    startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent);
-                    showAIMessage(`L'IA a optimisé votre streaming - Serveur basculé vers ${STREAMING_SERVERS[bestServer].name}`);
-                }
-            }
-        }
-        // Mettre à jour l'UI du serveur sélectionné
-        function updateSelectedServerUI() {
-            document.querySelectorAll('.server-btn').forEach(btn => {
-                if (btn.dataset.server === selectedServer) {
-                    btn.classList.remove('inactive');
-                    btn.classList.add('active');
                 } else {
-                    btn.classList.remove('active');
-                    btn.classList.add('inactive');
                 }
-            });
-            // Mettre à jour la recommandation dans la modal
-            if (document.getElementById('ai-recommendation')) {
-                document.getElementById('ai-recommendation').textContent =
-                    `Serveur recommandé: ${STREAMING_SERVERS[selectedServer].name} (Score IA: ${STREAMING_SERVERS[selectedServer].aiScore})`;
             }
-        }
-        // Afficher un message de l'IA
-        function showAIMessage(message) {
-            // Dans la fenêtre de streaming
-            const streamingWindow = document.getElementById('streaming-window');
-            if (!streamingWindow.classList.contains('hidden')) {
-                const aiMessage = document.createElement('div');
-                aiMessage.className = 'ai-message absolute top-4 left-1/2 transform -translate-x-1/2 z-50';
-                aiMessage.innerHTML = `
-                    <i class="fas fa-robot text-ai"></i>
-                    <span>${message}</span>
-                `;
-                streamingWindow.querySelector('.streaming-content').appendChild(aiMessage);
-                // Supprimer après 3 secondes
-                setTimeout(() => {
-                    aiMessage.remove();
-                }, 3000);
             }
-        }
-        // Charger les films
-        async function loadMovies() {
-            if (isLoading) return;
-            isLoading = true;
-            showLoadingState();
             try {
-                let data;
-                const params = {
-                    page: currentPage,
-                    include_adult: false
-                };
-                if (currentSearch) {
-                    data = await fetchAPI('/search/movie', {
-                        ...params,
-                        query: encodeURIComponent(currentSearch)
-                    });
-                } else if (currentGenre) {
-                    data = await fetchAPI('/discover/movie', {
-                        ...params,
-                        with_genres: currentGenre,
-                        sort_by: 'popularity.desc'
-                    });
-                } else {
-                    data = await fetchAPI(`/movie/${currentFilter}`, params);
-                }
-                totalPages = data.total_pages || 1;
-                if (currentPage === 1) {
-                    document.getElementById('movies-container').innerHTML = '';
-                }
-                if (data.results && data.results.length > 0) {
-                    displayMovies(data.results);
-                    updateLoadMoreButton();
                 } else {
-                    showNoResults();
                 }
             } catch (error) {
-                console.error('Error fetching movies:', error);
-                showErrorState(error.message);
             } finally {
-                isLoading = false;
             }
         }
-        // Afficher l'état de chargement
-        function showLoadingState() {
-            const container = document.getElementById('movies-container');
-            container.innerHTML = `
-                <div class="flex justify-center items-center py-12 col-span-full">
-                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>
-                </div>
-            `;
-        }
-        // Afficher les films avec boutons de streaming
-        function displayMovies(movies) {
-            const container = document.getElementById('movies-container');
-            movies.forEach(movie => {
                 const movieCard = document.createElement('div');
-                movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 relative';
-                // Utiliser l'image originale en haute qualité si disponible
-                const posterPath = movie.poster_path
-                    ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
-                    : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
                 movieCard.innerHTML = `
-                    <div>
-                        <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">
-                            <img src="${posterPath}"
-                                 alt="${movie.title || 'Titre inconnu'}"
-                                 class="w-full h-full object-cover"
-                                 onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')">
                         </div>
-                        <div class="p-4">
-                            <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3>
-                            <div class="flex items-center mt-2">
-                                <span class="text-yellow-400 text-sm">
-                                    <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}
-                                </span>
-                                <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>
-                            </div>
-                            <div class="mt-3">
-                                <button onclick="startAutoStreaming(${movie.id}, '${movie.title ? movie.title.replace(/'/g, "\\'") : 'Film'}')" class="w-full stream-btn px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">
-                                    <i class="fas fa-robot mr-1"></i> Lecture IA
-                                </button>
-                                <button onclick="showMovieDetails(${movie.id})" class="w-full mt-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm">
-                                    <i class="fas fa-info-circle mr-1"></i> Détails
-                                </button>
                             </div>
-                        </div>
-                        <div class="auto-server-badge">
-                            <i class="fas fa-bolt mr-1"></i> AutoPlay
-                        </div>
-                        <div class="ai-badge">
-                            <i class="fas fa-brain mr-1"></i> IA Optimisé
                         </div>
                     </div>
                 `;
-                container.appendChild(movieCard);
             });
         }
-        // Afficher un message d'erreur
-        function showErrorState(errorMessage) {
-            const container = document.getElementById('movies-container');
-            container.innerHTML = `
-                <div class="col-span-full py-6 px-4 error-message rounded-lg">
-                    <div class="flex items-center">
-                        <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>
-                        <div>
-                            <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3>
-                            <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p>
-                            <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm">
-                                <i class="fas fa-sync-alt mr-2"></i> Réessayer
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            `;
-            document.getElementById('load-more-container').classList.add('hidden');
-        }
-        // Afficher un message quand aucun résultat n'est trouvé
-        function showNoResults() {
-            const container = document.getElementById('movies-container');
-            container.innerHTML = `
-                <div class="col-span-full text-center py-12">
-                    <i class="fas fa-film text-4xl text-gray-500 mb-4"></i>
-                    <h3 class="text-xl text-white">Aucun film trouvé</h3>
-                    <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p>
-                </div>
-            `;
-            document.getElementById('load-more-container').classList.add('hidden');
-        }
-        // Réessayer le chargement
-        function retryLoading() {
-            currentPage = 1;
             loadMovies();
         }
-        // Mettre à jour le bouton "Voir plus"
-        function updateLoadMoreButton() {
-            const loadMoreContainer = document.getElementById('load-more-container');
-            if (currentPage >= totalPages) {
-                loadMoreContainer.innerHTML = `
-                    <p class="text-gray-400">Vous avez atteint la fin des résultats</p>
-                `;
-            } else {
-                loadMoreContainer.classList.remove('hidden');
             }
-        }
-        // Filtrer les films
-        function filterMovies(filter) {
-            currentFilter = filter;
-            currentGenre = null;
-            currentSearch = '';
-            currentPage = 1;
-            document.getElementById('search-input').value = '';
-            loadMovies();
-            // Mettre à jour les boutons actifs
-            document.querySelectorAll('button').forEach(btn => {
-                if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) {
-                    btn.classList.remove('bg-gray-700');
-                    btn.classList.add('bg-primary');
-                } else {
-                    btn.classList.remove('bg-primary');
-                    btn.classList.add('bg-gray-700');
-                }
-            });
-        }
-        // Filtrer par genre
-        function filterByGenre(genreId) {
-            currentGenre = genreId;
-            currentSearch = '';
             currentPage = 1;
-            document.getElementById('search-input').value = '';
             loadMovies();
-            // Mettre à jour les boutons actifs
-            document.querySelectorAll('.genre-btn').forEach(btn => {
-                btn.classList.remove('bg-primary');
-                if (btn.onclick.toString().includes(genreId.toString())) {
-                    btn.classList.add('bg-primary');
-                }
-            });
-        }
-        // Rechercher des films
-        function searchMovies() {
-            const query = document.getElementById('search-input').value.trim();
-            if (query) {
-                currentSearch = query;
-                currentGenre = null;
-                currentPage = 1;
-                loadMovies();
-            }
-        }
-        // Charger plus de films
-        function loadMoreMovies() {
-            if (currentPage < totalPages) {
-                currentPage++;
-                loadMovies();
-            }
-        }
-        // Afficher les détails du film
-        async function showMovieDetails(movieId) {
-            try {
-                const movie = await fetchAPI(`/movie/${movieId}`);
-                currentMovieId = movieId;
-                // Récupérer l'ID IMDB si disponible
-                if (movie.imdb_id) {
-                    currentIMDBId = movie.imdb_id;
-                } else {
-                    // Si l'ID IMDB n'est pas disponible, essayer de le récupérer via l'API
-                    const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
-                    currentIMDBId = externalIds.imdb_id || null;
-                }
-                // Remplir la modal
-                const modalPoster = document.querySelector('#modal-poster img');
-                modalPoster.src = movie.poster_path
-                    ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
-                    : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';
-                modalPoster.onerror = function() {
-                    this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée';
-                };
-                document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu';
-                document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`;
-                document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';
-                document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : '';
-                document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.';
-                // Afficher les genres
-                const genresContainer = document.getElementById('modal-genres');
-                genresContainer.innerHTML = '';
-                if (movie.genres && movie.genres.length > 0) {
-                    movie.genres.forEach(genre => {
-                        const genreBadge = document.createElement('span');
-                        genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded';
-                        genreBadge.textContent = genre.name;
-                        genresContainer.appendChild(genreBadge);
-                    });
-                } else {
-                    genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';
-                }
-                // Mettre à jour la recommandation de l'IA
-                if (isAutoPilotEnabled) {
-                    selectBestServer();
-                    document.getElementById('ai-recommendation').textContent =
-                        `Serveur recommandé: ${STREAMING_SERVERS[selectedServer].name} (Score IA: ${STREAMING_SERVERS[selectedServer].aiScore})`;
-                } else {
-                    document.getElementById('ai-recommendation').textContent =
-                        "Mode AutoPilot désactivé - Sélectionnez manuellement un serveur";
-                }
-                // Afficher la modal
-                document.getElementById('movie-modal').classList.remove('hidden');
-            } catch (error) {
-                console.error('Error fetching movie details:', error);
-                alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer'));
-            }
-        }
-        // Fermer la modal de détails
-        function closeModal() {
-            document.getElementById('movie-modal').classList.add('hidden');
-        }
-        // Sélectionner un serveur de streaming
-        function selectServer(serverId) {
-            selectedServer = serverId;
-            updateSelectedServerUI();
-            // Si AutoPilot est activé, le désactiver temporairement pour la sélection manuelle
-            if (isAutoPilotEnabled) {
-                document.getElementById('ai-toggle').checked = false;
-                isAutoPilotEnabled = false;
-                document.querySelector('.ai-status').classList.add('offline');
-                document.querySelector('.ai-status-dot').style.backgroundColor = '#ef4444';
-                document.querySelector('.ai-status-dot').style.animation = 'none';
-                document.getElementById('ai-recommendation').textContent =
-                    "Mode AutoPilot désactivé - Contrôle manuel activé";
-            }
-        }
-        // Démarrer le streaming depuis la modal
-        function startStreaming() {
-            if (currentMovieId) {
-                const movieTitle = document.getElementById('modal-title').textContent;
-                startAutoStreaming(currentMovieId, movieTitle);
-                closeModal();
-            }
-        }
-        // Démarrer le streaming automatique dans une nouvelle fenêtre
-        async function startAutoStreaming(movieId, movieTitle) {
-            currentMovieId = movieId;
-            // Afficher la fenêtre de streaming
-            const streamingWindow = document.getElementById('streaming-window');
-            document.getElementById('streaming-title').textContent = movieTitle;
-            // Afficher l'état de chargement
-            const playerContainer = document.getElementById('streaming-player-container');
-            playerContainer.innerHTML = `
-                <div id="stream-loading" class="stream-loading w-full h-full">
-                    <div class="stream-loading-spinner"></div>
-                    <p class="text-gray-300">${isAutoPilotEnabled ? "L'IA optimise votre streaming..." : "Chargement du flux vidéo..."}</p>
-                </div>
-            `;
-            // Afficher la fenêtre de streaming
-            streamingWindow.classList.remove('hidden');
-            // Récupérer les informations du film pour l'ID IMDB si nécessaire
-            let imdbId = currentIMDBId;
-            if (!imdbId && STREAMING_SERVERS[selectedServer].requiresIMDB) {
-                try {
-                    const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);
-                    imdbId = externalIds.imdb_id;
-                    if (!imdbId) {
-                        throw new Error("ID IMDB non disponible");
-                    }
-                } catch (error) {
-                    console.error("Erreur lors de la récupération de l'ID IMDB:", error);
-                    playerContainer.innerHTML = `
-                        <div class="flex flex-col items-center justify-center h-full text-red-400">
-                            <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
-                            <p class="text-lg">Impossible de trouver l'ID IMDB pour ce film</p>
-                            <p class="text-sm text-gray-400 mt-2">Essayez avec un autre serveur</p>
-                            <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition">
-                                <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur
-                            </button>
-                        </div>
-                    `;
-                    return;
-                }
-            }
-            // Construire l'URL de streaming en fonction du serveur sélectionné
-            let streamingUrl;
-            const serverConfig = STREAMING_SERVERS[selectedServer];
-            if (serverConfig.requiresTMDB) {
-                streamingUrl = serverConfig.url + movieId;
-            } else if (serverConfig.requiresIMDB && imdbId) {
-                streamingUrl = serverConfig.url + imdbId;
-            } else {
-                // Si aucun ID n'est disponible, utiliser TMDB par défaut
-                streamingUrl = serverConfig.url + movieId;
-            }
-            // Ajouter les paramètres de lecture automatique si configuré
-            if (serverConfig.autoPlay && serverConfig.params) {
-                if (serverConfig.params.auto) {
-                    if (streamingUrl.includes('?')) {
-                        streamingUrl += serverConfig.params.auto.replace('?', '&');
-                    } else {
-                        streamingUrl += serverConfig.params.auto;
-                    }
-                }
             }
-            // Créer l'iframe pour le lecteur vidéo
-            const iframe = document.createElement('iframe');
-            iframe.id = 'streaming-player';
-            iframe.src = streamingUrl;
-            iframe.setAttribute('allowfullscreen', '');
-            iframe.setAttribute('scrolling', 'no');
-            iframe.setAttribute('frameborder', '0');
-            iframe.setAttribute('marginwidth', '0');
-            iframe.setAttribute('marginheight', '0');
-            iframe.style.width = '100%';
-            iframe.style.height = '100%';
-            iframe.style.border = 'none';
-            // Gestion des erreurs de chargement
-            iframe.onerror = function() {
-                playerContainer.innerHTML = `
-                    <div class="flex flex-col items-center justify-center h-full text-red-400">
-                        <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>
-                        <p class="text-lg">Erreur lors du chargement du flux vidéo</p>
-                        <p class="text-sm text-gray-400 mt-2">Le serveur peut être temporairement indisponible</p>
-                        <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition">
-                            <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur
-                        </button>
-                    </div>
-                `;
-            };
-            // Remplacer le chargement par le lecteur
-            playerContainer.innerHTML = '';
-            playerContainer.appendChild(iframe);
-            // Mettre le focus sur la fenêtre de streaming
-            streamingWindow.focus();
-            // Tentative de lecture automatique (peut être bloquée par le navigateur)
-            setTimeout(() => {
-                try {
-                    iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
-                } catch (e) {
-                    console.log("Auto-play blocked by browser");
-                }
-            }, 2000);
-        }
-        // Essayer un autre serveur en cas d'erreur
-        function tryAlternativeServer() {
-            const servers = Object.keys(STREAMING_SERVERS);
-            const currentIndex = servers.indexOf(selectedServer);
-            const nextIndex = (currentIndex + 1) % servers.length;
-            selectedServer = servers[nextIndex];
-            updateSelectedServerUI();
-            startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent);
-            showAIMessage(`Serveur basculé vers ${STREAMING_SERVERS[selectedServer].name} (Automatique)`);
-        }
-        // Fermer la fenêtre de streaming
-        function closeStreamingWindow() {
-            const playerContainer = document.getElementById('streaming-player-container');
-            playerContainer.innerHTML = '';
-            document.getElementById('streaming-window').classList.add('hidden');
-        }
-        // Changer la qualité de streaming (simulé)
-        function changeQuality(quality) {
-            showAIMessage(`Qualité changée en ${quality} - Optimisation en cours...`);
-            // En réalité, vous devriez mettre à jour la source du lecteur vidéo
-        }
-        // Basculer en plein écran
-        function toggleFullscreen() {
-            const playerContainer = document.getElementById('streaming-player-container');
-            if (playerContainer.requestFullscreen) {
-                playerContainer.requestFullscreen();
-            } else if (playerContainer.webkitRequestFullscreen) {
-                playerContainer.webkitRequestFullscreen();
-            } else if (playerContainer.msRequestFullscreen) {
-                playerContainer.msRequestFullscreen();
-            }
-        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cinestream-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CinéAuto - Plateforme de Streaming Automatisé</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
         .movie-card {
             transition: all 0.3s ease;
+            position: relative;
         }
         .movie-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
         }
+        .poster-placeholder {
+            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
         }
         .loading-spinner {
             100% { transform: rotate(360deg); }
         }
+        #video-player {
             width: 100%;
+            height: 70vh;
+            background-color: black;
         }
+        .progress-container {
+            height: 5px;
+            background-color: #334155;
         }
+        .progress-bar {
             height: 100%;
+            background-color: #8b5cf6;
+            width: 0%;
         }
+        .automation-panel {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(10px);
         }
+        .genre-filter {
+            scrollbar-width: thin;
+            scrollbar-color: #8b5cf6 #1e293b;
         }
+        .genre-filter::-webkit-scrollbar {
+            height: 6px;
         }
+        .genre-filter::-webkit-scrollbar-track {
+            background: #1e293b;
         }
+        .genre-filter::-webkit-scrollbar-thumb {
+            background-color: #8b5cf6;
+            border-radius: 6px;
         }
     </style>
 </head>
             <div class="flex items-center justify-between h-16">
                 <div class="flex items-center">
                     <div class="flex-shrink-0">
+                        <span class="text-2xl font-bold text-purple-400">CinéAuto</span>
                     </div>
                     <div class="hidden md:block ml-10">
                         <div class="flex space-x-4">
+                            <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-purple-600">Accueil</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Bibliothèque</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Automatisation</a>
+                            <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Serveurs</a>
                         </div>
                     </div>
                 </div>
                     <div class="ml-4 flex items-center md:ml-6">
                         <div class="relative mx-4">
                             <input type="text" id="search-input" placeholder="Rechercher un film..."
+                                   class="bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                            <button id="search-btn" class="absolute right-3 top-2 text-gray-400 hover:text-white">
                                 <i class="fas fa-search"></i>
                             </button>
                         </div>
+                        <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
                             <i class="fas fa-user-circle text-xl"></i>
                         </button>
                     </div>
     <!-- Main Content -->
     <main class="pt-24 pb-12">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <!-- Player Section -->
+            <section class="mb-12 rounded-xl overflow-hidden shadow-2xl">
+                <div id="video-player">
+                    <video id="video" class="w-full h-full" controls></video>
+                    <div id="player-overlay" class="hidden absolute inset-0 bg-black bg-opacity-70 flex flex-col items-center justify-center">
+                        <div class="text-center p-6">
+                            <h2 class="text-2xl font-bold text-white mb-4">CinéAuto Player</h2>
+                            <p class="text-gray-300 mb-6">Lecteur haute performance avec streaming adaptatif et automatisation intelligente</p>
+                            <button id="start-demo" class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg font-medium">
+                                <i class="fas fa-play mr-2"></i> Démarrer la démo
+                            </button>
+                        </div>
                     </div>
+                </div>
+                <div class="bg-gray-800 p-4">
+                    <div class="flex justify-between items-center mb-2">
+                        <h2 id="current-movie-title" class="text-xl font-bold text-white">Aucun film sélectionné</h2>
+                        <div class="flex items-center space-x-4">
+                            <button id="auto-next" class="text-purple-400 hover:text-purple-300">
+                                <i class="fas fa-robot"></i> Auto
+                            </button>
+                            <button id="quality-btn" class="text-gray-300 hover:text-white">
+                                <i class="fas fa-tachometer-alt"></i> 1080p
+                            </button>
                         </div>
+                    </div>
+                    <div class="progress-container mb-2">
+                        <div id="progress-bar" class="progress-bar"></div>
+                    </div>
+                    <div class="flex justify-between text-sm text-gray-400">
+                        <span id="current-time">00:00:00</span>
+                        <span id="duration">00:00:00</span>
+                    </div>
                 </div>
+            </section>
+            <!-- Automation Panel -->
+            <section class="mb-12 automation-panel rounded-xl p-6 shadow-lg">
+                <h2 class="text-2xl font-bold text-white mb-6">Panneau d'Automatisation</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+                    <div class="bg-gray-800 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-cog mr-2"></i>Paramètres</h3>
+                        <div class="space-y-4">
+                            <div>
+                                <label class="block text-sm text-gray-300 mb-1">Mode de lecture</label>
+                                <select id="playback-mode" class="w-full bg-gray-700 text-white rounded px-3 py-2">
+                                    <option value="sequential">Séquentiel</option>
+                                    <option value="random">Aléatoire</option>
+                                    <option value="by_genre">Par genre</option>
+                                    <option value="by_year">Par année</option>
+                                </select>
+                            </div>
+                            <div>
+                                <label class="block text-sm text-gray-300 mb-1">Qualité automatique</label>
+                                <label class="inline-flex items-center">
+                                    <input type="checkbox" id="adaptive-quality" class="form-checkbox h-5 w-5 text-purple-600" checked>
+                                    <span class="ml-2 text-gray-300">Adaptative</span>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-server mr-2"></i>Serveurs</h3>
+                        <div class="space-y-3">
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-300">Serveur Principal</span>
+                                <span class="text-green-400 text-sm font-mono">En ligne</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-300">Serveur Secondaire</span>
+                                <span class="text-green-400 text-sm font-mono">En ligne</span>
+                            </div>
+                            <div class="flex justify-between items-center">
+                                <span class="text-gray-300">Serveur Cloud</span>
+                                <span class="text-green-400 text-sm font-mono">En ligne</span>
+                            </div>
+                            <div class="mt-4">
+                                <button id="optimize-servers" class="w-full bg-purple-600 hover:bg-purple-700 text-white py-2 rounded">
+                                    <i class="fas fa-sync-alt mr-2"></i> Optimiser les serveurs
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="bg-gray-800 p-4 rounded-lg">
+                        <h3 class="text-lg font-semibold text-white mb-3"><i class="fas fa-bolt mr-2"></i>Actions Rapides</h3>
+                        <div class="grid grid-cols-2 gap-3">
+                            <button id="play-btn" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-play mr-1"></i> Démarrer
+                            </button>
+                            <button id="pause-btn" class="bg-gray-700 hover:bg-gray-600 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-pause mr-1"></i> Pause
+                            </button>
+                            <button id="random-btn" class="bg-purple-600 hover:bg-purple-700 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-random mr-1"></i> Aléatoire
+                            </button>
+                            <button id="add-to-list" class="bg-green-600 hover:bg-green-700 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-plus mr-1"></i> Liste
+                            </button>
+                            <button id="favorite-btn" class="bg-yellow-600 hover:bg-yellow-700 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-star mr-1"></i> Favoris
+                            </button>
+                            <button id="stop-btn" class="bg-red-600 hover:bg-red-700 text-white py-2 px-3 rounded text-sm">
+                                <i class="fas fa-times mr-1"></i> Stop
+                            </button>
+                        </div>
                     </div>
+                </div>
+            </section>
+            <!-- Filters -->
+            <section class="mb-6 bg-gray-800 rounded-lg p-4">
+                <div class="flex flex-wrap items-center justify-between gap-4">
+                    <div class="flex items-center space-x-4">
+                        <h3 class="text-lg font-semibold text-white">Filtres :</h3>
+                        <select id="year-filter" class="bg-gray-700 text-white rounded px-3 py-2 text-sm">
+                            <option value="">Toutes les années</option>
+                            <option value="2023">2023</option>
+                            <option value="2022">2022</option>
+                            <option value="2021">2021</option>
+                            <option value="2020">2020</option>
+                            <option value="2010-2019">2010-2019</option>
+                            <option value="2000-2009">2000-2009</option>
+                            <option value="1990-1999">1990-1999</option>
+                            <option value="1980-1989">1980-1989</option>
+                            <option value="1970-1979">1970-1979</option>
+                        </select>
+                        <select id="rating-filter" class="bg-gray-700 text-white rounded px-3 py-2 text-sm">
+                            <option value="0">Toutes les notes</option>
+                            <option value="9">9+</option>
+                            <option value="8">8+</option>
+                            <option value="7">7+</option>
+                            <option value="6">6+</option>
+                        </select>
                     </div>
+                    <div class="flex items-center space-x-2">
+                        <span class="text-sm text-gray-300">Trier par :</span>
+                        <select id="sort-by" class="bg-gray-700 text-white rounded px-3 py-2 text-sm">
+                            <option value="popularity.desc">Popularité</option>
+                            <option value="vote_average.desc">Note</option>
+                            <option value="release_date.desc">Date de sortie</option>
+                            <option value="revenue.desc">Box-office</option>
+                        </select>
                     </div>
                 </div>
+                <div class="mt-4 genre-filter flex space-x-3 overflow-x-auto py-2">
+                    <button class="genre-tag px-3 py-1 bg-gray-700 hover:bg-purple-600 text-white rounded-full text-sm whitespace-nowrap" data-id="">Tous</button>
+                    <!-- Genres will be loaded here -->
+                </div>
+            </section>
+            <!-- Movie Library -->
             <section class="mb-12">
                 <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold text-white">
+                        <span id="library-title">Bibliothèque de Films</span>
+                        <span id="movie-count" class="text-gray-400 text-lg ml-2">(Chargement...)</span>
+                    </h2>
+                    <div class="flex space-x-3">
+                        <button id="refresh-btn" class="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg">
+                            <i class="fas fa-sync-alt mr-2"></i>Actualiser
+                        </button>
+                        <button id="random-movie-btn" class="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg">
+                            <i class="fas fa-random mr-2"></i>Aléatoire
+                        </button>
                     </div>
                 </div>
+                <div id="loading-indicator" class="flex justify-center items-center py-12">
+                    <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500"></div>
                 </div>
+                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6" id="movie-library">
+                    <!-- Movie cards will be loaded here -->
                 </div>
+                <div id="load-more-container" class="mt-8 text-center hidden">
+                    <button id="load-more-btn" class="px-6 py-3 bg-gray-800 hover:bg-gray-700 text-white rounded-lg font-medium">
+                        <i class="fas fa-arrow-down mr-2"></i> Charger plus de films
+                    </button>
                 </div>
             </section>
         </div>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
+                    <h3 class="text-white text-lg font-semibold mb-4">CinéAuto</h3>
+                    <p class="text-sm">Plateforme de streaming automatisé avec lecteur haute performance et gestion intelligente des serveurs.</p>
                 </div>
                 <div>
+                    <h3 class="text-white text-lg font-semibold mb-4">Technologies</h3>
                     <ul class="space-y-2 text-sm">
+                        <li><span class="text-purple-400">HLS.js</span> - Streaming adaptatif</li>
+                        <li><span class="text-purple-400">WebRTC</span> - P2P optimisé</li>
+                        <li><span class="text-purple-400">AI</span> - Recommandations</li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-white text-lg font-semibold mb-4">Performances</h3>
                     <ul class="space-y-2 text-sm">
+                        <li><i class="fas fa-bolt text-yellow-400 mr-2"></i>Latence minimale</li>
+                        <li><i class="fas fa-tachometer-alt text-green-400 mr-2"></i>4K Ultra HD</li>
+                        <li><i class="fas fa-server text-blue-400 mr-2"></i>15 serveurs mondiaux</li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="text-white text-lg font-semibold mb-4">Support</h3>
                     <div class="flex space-x-4">
                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fas fa-envelope"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-white"><i class="fas fa-question-circle"></i></a>
                     </div>
                 </div>
             </div>
             <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">
+                <p>© 2023 CinéAuto. Système automatisé de streaming haute performance.</p>
+                <p class="mt-2 text-xs text-gray-600">Cette application utilise l'API TMDb mais n'est pas approuvée ou certifiée par TMDb.</p>
             </div>
         </div>
     </footer>
     <script>
         // Configuration
+        const TMDB_API_KEY = 'fb437b10727a5a4eb8d9134e29c82ae0';
+        const TMDB_ACCESS_TOKEN = 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs';
         const BASE_URL = 'https://api.themoviedb.org/3';
+        const IMAGE_BASE_URL = 'https://image.tmdb.org/t/p/w500';
+        const BACKDROP_BASE_URL = 'https://image.tmdb.org/t/p/original';
+        // Elements
+        const video = document.getElementById('video');
+        const videoPlayer = document.getElementById('video-player');
+        const playerOverlay = document.getElementById('player-overlay');
+        const progressBar = document.getElementById('progress-bar');
+        const currentTime = document.getElementById('current-time');
+        const duration = document.getElementById('duration');
+        const autoNextBtn = document.getElementById('auto-next');
+        const movieLibrary = document.getElementById('movie-library');
+        const currentMovieTitle = document.getElementById('current-movie-title');
+        const loadingIndicator = document.getElementById('loading-indicator');
+        const loadMoreContainer = document.getElementById('load-more-container');
+        const loadMoreBtn = document.getElementById('load-more-btn');
+        const movieCount = document.getElementById('movie-count');
+        const libraryTitle = document.getElementById('library-title');
+        const searchInput = document.getElementById('search-input');
+        const searchBtn = document.getElementById('search-btn');
+        const refreshBtn = document.getElementById('refresh-btn');
+        const randomMovieBtn = document.getElementById('random-movie-btn');
+        const genreFilterContainer = document.querySelector('.genre-filter');
+        const yearFilter = document.getElementById('year-filter');
+        const ratingFilter = document.getElementById('rating-filter');
+        const sortBy = document.getElementById('sort-by');
+        const startDemoBtn = document.getElementById('start-demo');
+        // Player controls
+        const playBtn = document.getElementById('play-btn');
+        const pauseBtn = document.getElementById('pause-btn');
+        const randomBtn = document.getElementById('random-btn');
+        const addToListBtn = document.getElementById('add-to-list');
+        const favoriteBtn = document.getElementById('favorite-btn');
+        const stopBtn = document.getElementById('stop-btn');
+        // State
+        let hls = new Hls();
+        let autoPlayEnabled = true;
+        let currentMovieIndex = 0;
         let currentPage = 1;
         let totalPages = 1;
+        let totalResults = 0;
+        let currentMovies = [];
+        let genres = [];
+        let currentGenre = '';
+        let currentSearchQuery = '';
+        let isSearching = false;
+        // Initialize player
+        function initPlayer(movie) {
+            // In a real app, you would use actual video sources
+            // For demo purposes, we'll use a placeholder
+            const demoVideoUrl = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8';
+            if (Hls.isSupported()) {
+                hls.loadSource(demoVideoUrl);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, function() {
+                    video.play();
+                    playerOverlay.classList.add('hidden');
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = demoVideoUrl;
+                video.addEventListener('loadedmetadata', function() {
+                    video.play();
+                    playerOverlay.classList.add('hidden');
+                });
+            }
+            currentMovieTitle.textContent = `${movie.title} (${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'})`;
+            // Update video player background with movie backdrop
+            if (movie.backdrop_path) {
+                videoPlayer.style.backgroundImage = `url(${BACKDROP_BASE_URL}${movie.backdrop_path})`;
+                videoPlayer.style.backgroundSize = 'cover';
+                videoPlayer.style.backgroundPosition = 'center';
+            }
+        }
+        // Format time
+        function formatTime(seconds) {
+            const h = Math.floor(seconds / 3600);
+            const m = Math.floor((seconds % 3600) / 60);
+            const s = Math.floor(seconds % 60);
+            return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`;
+        }
+        // Play next movie
+        function playNextMovie() {
+            const playbackMode = document.getElementById('playback-mode').value;
+            if (playbackMode === 'random') {
+                currentMovieIndex = Math.floor(Math.random() * currentMovies.length);
+            } else {
+                currentMovieIndex = (currentMovieIndex + 1) % currentMovies.length;
+            }
+            initPlayer(currentMovies[currentMovieIndex]);
+        }
+        // Load genres from TMDB
+        async function loadGenres() {
             try {
+                const response = await fetch(`${BASE_URL}/genre/movie/list?api_key=${TMDB_API_KEY}&language=fr-FR`);
+                const data = await response.json();
+                genres = data.genres;
+                // Add genre tags to filter
+                genres.forEach(genre => {
+                    const genreTag = document.createElement('button');
+                    genreTag.className = 'genre-tag px-3 py-1 bg-gray-700 hover:bg-purple-600 text-white rounded-full text-sm whitespace-nowrap';
+                    genreTag.textContent = genre.name;
+                    genreTag.dataset.id = genre.id;
+                    genreTag.addEventListener('click', () => filterByGenre(genre.id, genre.name));
+                    genreFilterContainer.appendChild(genreTag);
+                });
             } catch (error) {
+                console.error('Error loading genres:', error);
             }
         }
+        // Filter by genre
+        function filterByGenre(genreId, genreName) {
+            currentGenre = genreId;
+            currentPage = 1;
+            isSearching = false;
+            currentSearchQuery = '';
+            // Update UI
+            document.querySelectorAll('.genre-tag').forEach(tag => {
+                if (tag.dataset.id === genreId.toString()) {
+                    tag.classList.add('bg-purple-600');
+                    tag.classList.remove('bg-gray-700');
                 } else {
+                    tag.classList.remove('bg-purple-600');
+                    tag.classList.add('bg-gray-700');
                 }
             });
+            libraryTitle.textContent = genreName ? `Films ${genreName}` : 'Bibliothèque de Films';
+            loadMovies();
         }
+        // Load movies from TMDB
+        async function loadMovies() {
+            loadingIndicator.classList.remove('hidden');
+            movieLibrary.innerHTML = '';
+            loadMoreContainer.classList.add('hidden');
+            let url;
+            if (isSearching) {
+                url = `${BASE_URL}/search/movie?api_key=${TMDB_API_KEY}&language=fr-FR&query=${encodeURIComponent(currentSearchQuery)}&page=${currentPage}`;
+            } else if (currentGenre) {
+                url = `${BASE_URL}/discover/movie?api_key=${TMDB_API_KEY}&language=fr-FR&with_genres=${currentGenre}&page=${currentPage}`;
+            } else {
+                url = `${BASE_URL}/movie/popular?api_key=${TMDB_API_KEY}&language=fr-FR&page=${currentPage}`;
             }
+            // Add filters
+            const yearValue = yearFilter.value;
+            const ratingValue = ratingFilter.value;
+            const sortValue = sortBy.value;
+            if (yearValue) {
+                if (yearValue.includes('-')) {
+                    const [start, end] = yearValue.split('-');
+                    url += `&primary_release_date.gte=${start}-01-01&primary_release_date.lte=${end}-12-31`;
                 } else {
+                    url += `&primary_release_year=${yearValue}`;
                 }
             }
+            if (ratingValue > 0) {
+                url += `&vote_average.gte=${ratingValue}`;
             }
+            if (sortValue) {
+                url += `&sort_by=${sortValue}`;
+            }
             try {
+                const response = await fetch(url);
+                const data = await response.json();
+                currentMovies = data.results;
+                totalPages = data.total_pages;
+                totalResults = data.total_results;
+                movieCount.textContent = `(${totalResults.toLocaleString()} disponibles)`;
+                if (currentMovies.length > 0) {
+                    renderMovies(currentMovies);
+                    if (currentPage < totalPages) {
+                        loadMoreContainer.classList.remove('hidden');
+                    }
                 } else {
+                    movieLibrary.innerHTML = `
+                        <div class="col-span-full text-center py-12">
+                            <i class="fas fa-film text-4xl text-gray-600 mb-4"></i>
+                            <h3 class="text-xl text-white">Aucun film trouvé</h3>
+                            <p class="text-gray-400 mt-2">Essayez de modifier vos filtres de recherche</p>
+                        </div>
+                    `;
                 }
             } catch (error) {
+                console.error('Error loading movies:', error);
+                movieLibrary.innerHTML = `
+                    <div class="col-span-full text-center py-12">
+                        <i class="fas fa-exclamation-triangle text-4xl text-red-500 mb-4"></i>
+                        <h3 class="text-xl text-white">Erreur de chargement</h3>
+                        <p class="text-gray-400 mt-2">Impossible de charger les films. Veuillez réessayer.</p>
+                    </div>
+                `;
             } finally {
+                loadingIndicator.classList.add('hidden');
             }
         }
+        // Render movies
+        function renderMovies(movies) {
+            movies.forEach((movie, index) => {
                 const movieCard = document.createElement('div');
+                movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg cursor-pointer';
                 movieCard.innerHTML = `
+                    <div class="relative h-64">
+                        ${movie.poster_path ?
+                            `<img src="${IMAGE_BASE_URL}${movie.poster_path}" alt="${movie.title}" class="w-full h-full object-cover">` :
+                            `<div class="poster-placeholder w-full h-full flex items-center justify-center">
+                                <i class="fas fa-film text-4xl text-gray-600"></i>
+                            </div>`
+                        }
+                        <div class="absolute inset-0 bg-black bg-opacity-30 opacity-0 hover:opacity-100 transition flex items-center justify-center">
+                            <button class="play-btn bg-purple-600 hover:bg-purple-700 text-white rounded-full w-12 h-12 flex items-center justify-center">
+                                <i class="fas fa-play"></i>
+                            </button>
                         </div>
+                        ${movie.vote_average ? `
+                            <div class="absolute top-2 left-2 bg-gray-900 bg-opacity-80 text-yellow-400 px-2 py-1 rounded text-xs font-bold">
+                                ${movie.vote_average.toFixed(1)} <i class="fas fa-star"></i>
                             </div>
+                        ` : ''}
+                    </div>
+                    <div class="p-4">
+                        <h3 class="text-white font-medium truncate">${movie.title}</h3>
+                        <div class="flex items-center mt-2">
+                            <span class="text-gray-400 text-sm">
+                                ${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}
+                            </span>
+                            <span class="text-gray-400 text-sm ml-auto">
+                                ${movie.genre_ids && genres.length ?
+                                    genres.find(g => g.id === movie.genre_ids[0])?.name || '' : ''}
+                            </span>
                         </div>
                     </div>
                 `;
+                movieCard.addEventListener('click', () => {
+                    currentMovieIndex = index;
+                    initPlayer(movie);
+                });
+                movieLibrary.appendChild(movieCard);
             });
         }
+        // Search movies
+        function searchMovies(query) {
+            currentSearchQuery = query.trim();
+            isSearching = currentSearchQuery.length > 0;
+            currentPage = 1;
+            currentGenre = '';
+            // Update UI
+            document.querySelectorAll('.genre-tag').forEach(tag => {
+                tag.classList.remove('bg-purple-600');
+                tag.classList.add('bg-gray-700');
+            });
+            libraryTitle.textContent = isSearching ? `Résultats pour "${currentSearchQuery}"` : 'Bibliothèque de Films';
             loadMovies();
         }
+        // Event listeners
+        video.addEventListener('timeupdate', function() {
+            const progress = (video.currentTime / video.duration) * 100;
+            progressBar.style.width = progress + '%';
+            currentTime.textContent = formatTime(video.currentTime);
+            duration.textContent = formatTime(video.duration);
+            if (autoPlayEnabled && video.currentTime > 0 && video.duration > 0 &&
+                (video.duration - video.currentTime) < 1) {
+                playNextMovie();
             }
+        });
+        autoNextBtn.addEventListener('click', function() {
+            autoPlayEnabled = !autoPlayEnabled;
+            this.classList.toggle('text-purple-400');
+            this.classList.toggle('text-green-400');
+            this.innerHTML = autoPlayEnabled ? '<i class="fas fa-robot"></i> Auto ON' : '<i class="fas fa-robot"></i> Auto OFF';
+        });
+        playBtn.addEventListener('click', () => video.play());
+        pauseBtn.addEventListener('click', () => video.pause());
+        stopBtn.addEventListener('click', () => {
+            video.pause();
+            video.currentTime = 0;
+        });
+        randomBtn.addEventListener('click', () => {
+            currentMovieIndex = Math.floor(Math.random() * currentMovies.length);
+            initPlayer(currentMovies[currentMovieIndex]);
+        });
+        searchBtn.addEventListener('click', () => searchMovies(searchInput.value));
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') searchMovies(searchInput.value);
+        });
+        refreshBtn.addEventListener('click', () => {
             currentPage = 1;
             loadMovies();
+        });
+        randomMovieBtn.addEventListener('click', () => {
+            currentMovieIndex = Math.floor(Math.random() * currentMovies.length);
+            initPlayer(currentMovies[currentMovieIndex]);
+        });
+        loadMoreBtn.addEventListener('click', () => {
+            currentPage++;
+            loadMovies();
+        });
+        yearFilter.addEventListener('change', () => {
+            currentPage = 1;
+            loadMovies();
+        });
+        ratingFilter.addEventListener('change', () => {
+            currentPage = 1;
+            loadMovies();
+        });
+        sortBy.addEventListener('change', () => {
+            currentPage = 1;
+            loadMovies();
+        });
+        startDemoBtn.addEventListener('click', () => {
+            if (currentMovies.length > 0) {
+                initPlayer(currentMovies[0]);
             }
+        });
+        // Initialize
+        document.addEventListener('DOMContentLoaded', function() {
+            loadGenres();
+            loadMovies();
+            // Show player overlay initially
+            playerOverlay.classList.remove('hidden');
+        });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cinestream-ia" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

@@ -2,4 +2,11 @@ activer la lecture des films dans une nouvelle page en mode pilotage automatique
 AJOUTER DES SEVEURS AUTOMATIQUE POUR RAGARDER LES FILMS
 corriger les erreurs : Error: one of parameters is in wrong format
 corriger le probleme de parametre de lecture et ajouter plussieur serveur de lecture
-INTEGRER UN SYSTEME IA INTEGRE AUTOPILOTE POUR GERE TOUTE EN MODE AUTOMATIQUE

 AJOUTER DES SEVEURS AUTOMATIQUE POUR RAGARDER LES FILMS
 corriger les erreurs : Error: one of parameters is in wrong format
 corriger le probleme de parametre de lecture et ajouter plussieur serveur de lecture
+INTEGRER UN SYSTEME IA INTEGRE AUTOPILOTE POUR GERE TOUTE EN MODE AUTOMATIQUE
+je veux des vrais serveurs reel je veux pas des serveurs d'exemple
+AJOUTER PLUS IA DE SERVEUR
+charger les 978988 films directement en auto  ,  GO Lien 1 :netuAdd: 9-04-2025, 13:01HDTV Lien 2 :doodstreamAdd: 9-04-2025, 13:01HDTV Lien 3 :uqloadAdd: 9-04-2025, 13:01HDTV Lien 4 :uptostreamAdd: 9-04-2025, 13:01HDTV Lien 5 :vidozaAdd: 9-04-2025, 13:01HDTV Lien 6 :upvidAdd: 9-04-2025, 13:01HDTV Lien 7 :netuAdd: 9-04-2025, 13:01HDTV Lien 8 :doodstreamAdd: 9-04-2025, 13:01HDTV Lien 9 :uqloadAdd: 9-04-2025, 13:01HDTV Lien 10 :uptostreamAdd: 9-04-2025, 13:01HDTV Lien 11 :vidozaAdd: 9-04-2025, 13:01HDTV Lien 12 :upvid
+ajouter  Load Space Load an existing   to continue working on it.  Space URL https://huggingface.co/spaces/username/space-name  Load Space Deploy to Space Deploy your project to a space on the Hub. Spaces are a way to share your project with the world.  Space Title My Awesome Space  Create Space Connected as docto41  Disconnect LIENS DE STREAMING Lien 1 : netu Add: 9-04-2025 13:01  HDTV Lien 2 : doodstream Add: 9-04-2025, 13:01  HDTV Lien 3 : uqload Add: 9-04-2025, 13:01  HDTV Lien 4 : uptostream Add: 9-04-2025, 13:01  HDTV Lien 5 : vidoza Add: 9-04-2025, 13:01  HDTV Lien 6 : upvid Add: 9-04-2025, 13:01  HDTV SERVEURS ALTERNATIFS Lien 7 : netu Add: 9-04-2025, 13:01  HDTV Lien 8 : doodstream Add: 9-04-2025, 13:01  HDTV Lien 9 : uqload Add: 9-04-2025, 13:01  HDTV Lien 10 : uptostream Add: 9-04-2025, 13:01  HDTV Lien 11 : vidoza Add: 9-04-2025, 13:01  HDTV Lien 12 : upvid Add: 9-04-2025, 13:01   ;:    <!DOCTYPE html> <html lang="fr"> <head><script>window.huggingface={variables:{"SPACE_CREATOR_USER_ID":"681375e3264f6a6cf6562c83"}};</script>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CineStream - Films avec streaming automatique</title>     <script src="https://cdn.tailwindcss.com"></script>     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">     <script>         tailwind.config = {             theme: {                 extend: {                     colors: {                         primary: '#6d28d9',                         secondary: '#8b5cf6',                         dark: '#1e1b4b',                         light: '#f5f3ff',                     },                     fontFamily: {                         sans: ['Inter', 'sans-serif'],                     },                 }             }         }     </script>     <style>         @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');                  body {             font-family: 'Inter', sans-serif;             background-color: #0f172a;             color: white;         }                  .movie-card {             transition: all 0.3s ease;         }                  .movie-card:hover {             transform: translateY(-10px);             box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);         }                  .movie-poster {             height: 450px;             object-fit: cover;         }                  .loading-spinner {             animation: spin 1s linear infinite;         }                  @keyframes spin {             0% { transform: rotate(0deg); }             100% { transform: rotate(360deg); }         }                  .gradient-text {             background: linear-gradient(90deg, #8b5cf6, #ec4899);             -webkit-background-clip: text;             background-clip: text;             color: transparent;         }                  .search-input:focus {             box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);         }                  .error-message {             background-color: rgba(239, 68, 68, 0.2);             border-left: 4px solid #ef4444;         }                  .placeholder-poster {             background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);             display: flex;             align-items: center;             justify-content: center;         }                  /* Style pour le lecteur vidéo */         .video-container {             position: relative;             padding-bottom: 56.25%; /* 16:9 */             height: 0;             overflow: hidden;         }                  .video-container iframe {             position: absolute;             top: 0;             left: 0;             width: 100%;             height: 100%;             border: none;         }                  /* Style pour les boutons de streaming */         .stream-btn {             transition: all 0.2s ease;         }                  .stream-btn:hover {             transform: scale(1.05);         }                  /* Style pour la fenêtre de streaming */         .streaming-window {             position: fixed;             top: 0;             left: 0;             width: 100%;             height: 100%;             background-color: rgba(0, 0, 0, 0.9);             z-index: 1000;             display: flex;             flex-direction: column;         }                  .streaming-header {             padding: 15px;             background-color: rgba(0, 0, 0, 0.7);             display: flex;             justify-content: space-between;             align-items: center;         }                  .streaming-content {             flex: 1;             display: flex;             justify-content: center;             align-items: center;         }                  .streaming-controls {             padding: 15px;             background-color: rgba(0, 0, 0, 0.7);             display: flex;             justify-content: space-between;             align-items: center;         }                  /* Style pour la sélection de serveur */         .server-list {             display: flex;             gap: 10px;             flex-wrap: wrap;             margin-top: 10px;         }                  .server-btn {             padding: 8px 12px;             border-radius: 20px;             font-size: 14px;             cursor: pointer;             transition: all 0.2s;         }                  .server-btn.active {             background-color: #6d28d9;             color: white;         }                  .server-btn.inactive {             background-color: #334155;             color: #94a3b8;         }                  /* Animation de chargement du streaming */         .stream-loading {             display: flex;             flex-direction: column;             align-items: center;             justify-content: center;             gap: 20px;         }                  .stream-loading-spinner {             width: 50px;             height: 50px;             border: 5px solid rgba(255, 255, 255, 0.1);             border-radius: 50%;             border-top-color: #6d28d9;             animation: spin 1s linear infinite;         }     </style> </head> <body class="min-h-screen">     <!-- Navigation -->     <nav class="bg-gray-900 bg-opacity-90 backdrop-blur-md fixed w-full z-50 shadow-lg">         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">             <div class="flex items-center justify-between h-16">                 <div class="flex items-center">                     <div class="flex-shrink-0">                         <span class="text-2xl font-bold gradient-text">CineStream</span>                     </div>                     <div class="hidden md:block ml-10">                         <div class="flex space-x-4">                             <a href="#" class="text-white px-3 py-2 rounded-md text-sm font-medium bg-primary">Accueil</a>                             <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Films</a>                             <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Séries</a>                             <a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Tendances</a>                         </div>                     </div>                 </div>                 <div class="hidden md:block">                     <div class="ml-4 flex items-center md:ml-6">                         <div class="relative mx-4">                             <input type="text" id="search-input" placeholder="Rechercher un film..."                                     class="search-input bg-gray-800 text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-200">                             <button onclick="searchMovies()" class="absolute right-3 top-2 text-gray-400 hover:text-white">                                 <i class="fas fa-search"></i>                             </button>                         </div>                         <button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">                             <i class="fas fa-user-circle text-xl"></i>                         </button>                     </div>                 </div>                 <div class="-mr-2 flex md:hidden">                     <button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">                         <i class="fas fa-bars"></i>                     </button>                 </div>             </div>         </div>     </nav>      <!-- Main Content -->     <main class="pt-24 pb-12">         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">             <!-- Featured Section -->             <section class="mb-12">                 <div class="flex justify-between items-center mb-6">                     <h2 class="text-2xl font-bold text-white">Films populaires</h2>                     <div class="flex space-x-2">                         <button onclick="filterMovies('popular')" class="px-4 py-1 rounded-full text-sm bg-primary text-white">Populaires</button>                         <button onclick="filterMovies('top_rated')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Mieux notés</button>                         <button onclick="filterMovies('upcoming')" class="px-4 py-1 rounded-full text-sm bg-gray-700 text-white">Prochainement</button>                     </div>                 </div>                                  <div id="movies-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">                     <!-- Movies will be loaded here -->                     <div class="flex justify-center items-center py-12 col-span-full">                         <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>                     </div>                 </div>                                  <div id="load-more-container" class="mt-8 flex justify-center">                     <button onclick="loadMoreMovies()" class="px-6 py-2 bg-primary text-white rounded-full hover:bg-secondary transition flex items-center">                         <span>Voir plus</span>                         <i class="fas fa-chevron-down ml-2"></i>                     </button>                 </div>             </section>                          <!-- Genres Section -->             <section class="mb-12">                 <h2 class="text-2xl font-bold text-white mb-6">Par genres</h2>                 <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">                     <button onclick="filterByGenre(28)" class="genre-btn px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-full text-sm">Action</button>                     <button onclick="filterByGenre(12)" class="genre-btn px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-full text-sm">Aventure</button>                     <button onclick="filterByGenre(16)" class="genre-btn px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-full text-sm">Animation</button>                     <button onclick="filterByGenre(35)" class="genre-btn px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-full text-sm">Comédie</button>                     <button onclick="filterByGenre(80)" class="genre-btn px-4 py-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full text-sm">Crime</button>                     <button onclick="filterByGenre(18)" class="genre-btn px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-full text-sm">Drame</button>                 </div>             </section>         </div>     </main>      <!-- Footer -->     <footer class="bg-gray-900 text-gray-400 py-8">         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">             <div class="grid grid-cols-1 md:grid-cols-4 gap-8">                 <div>                     <h3 class="text-white text-lg font-semibold mb-4">CineStream</h3>                     <p class="text-sm">La meilleure plateforme pour regarder des films avec streaming automatique.</p>                 </div>                 <div>                     <h3 class="text-white text-lg font-semibold mb-4">Navigation</h3>                     <ul class="space-y-2 text-sm">                         <li><a href="#" class="hover:text-white">Accueil</a></li>                         <li><a href="#" class="hover:text-white">Films</a></li>                         <li><a href="#" class="hover:text-white">Séries</a></li>                         <li><a href="#" class="hover:text-white">Nouveautés</a></li>                     </ul>                 </div>                 <div>                     <h3 class="text-white text-lg font-semibold mb-4">Légal</h3>                     <ul class="space-y-2 text-sm">                         <li><a href="#" class="hover:text-white">Conditions d'utilisation</a></li>                         <li><a href="#" class="hover:text-white">Politique de confidentialité</a></li>                         <li><a href="#" class="hover:text-white">DMCA</a></li>                     </ul>                 </div>                 <div>                     <h3 class="text-white text-lg font-semibold mb-4">Contact</h3>                     <div class="flex space-x-4">                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a>                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>                         <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-discord"></i></a>                     </div>                 </div>             </div>             <div class="border-t border-gray-800 mt-8 pt-8 text-sm text-center">                 <p>© 2023 CineStream. Tous droits réservés.</p>             </div>         </div>     </footer>      <!-- Movie Details Modal -->     <div id="movie-modal" class="fixed inset-0 z-50 hidden overflow-y-auto">         <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">             <div class="fixed inset-0 transition-opacity" aria-hidden="true">                 <div class="absolute inset-0 bg-gray-900 opacity-75"></div>             </div>             <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>             <div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">                 <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">                     <div class="sm:flex sm:items-start">                         <div id="modal-poster" class="flex-shrink-0 w-full sm:w-1/3 mb-4 sm:mb-0 sm:mr-6">                             <img class="w-full rounded-lg shadow-lg" src="" alt="Movie Poster">                         </div>                         <div class="mt-3 text-center sm:mt-0 sm:text-left w-full sm:w-2/3">                             <h3 id="modal-title" class="text-2xl leading-6 font-bold text-white mb-2"></h3>                             <div class="flex items-center mb-4">                                 <span id="modal-rating" class="bg-yellow-500 text-white text-xs font-semibold px-2 py-1 rounded mr-3"></span>                                 <span id="modal-year" class="text-gray-300 text-sm"></span>                                 <span id="modal-runtime" class="ml-3 text-gray-300 text-sm"></span>                             </div>                             <p id="modal-overview" class="text-gray-300 mb-4"></p>                             <div id="modal-genres" class="flex flex-wrap gap-2 mb-4"></div>                                                          <!-- Serveurs de streaming -->                             <div class="mb-4">                                 <h4 class="text-sm font-semibold text-gray-400 mb-2">CHOISIR UN SERVEUR :</h4>                                 <div class="server-list">                                     <button onclick="selectServer('hdvip')" class="server-btn active" data-server="hdvip">                                         <i class="fas fa-crown mr-1"></i> HD VIP                                     </button>                                     <button onclick="selectServer('streamlare')" class="server-btn inactive" data-server="streamlare">                                         <i class="fas fa-play-circle mr-1"></i> Streamlare                                     </button>                                     <button onclick="selectServer('streamtape')" class="server-btn inactive" data-server="streamtape">                                         <i class="fas fa-tape mr-1"></i> Streamtape                                     </button>                                     <button onclick="selectServer('younetu')" class="server-btn inactive" data-server="younetu">                                         <i class="fas fa-film mr-1"></i> Younetu                                     </button>                                     <button onclick="selectServer('uptostream')" class="server-btn inactive" data-server="uptostream">                                         <i class="fas fa-cloud mr-1"></i> Uptostream                                     </button>                                     <button onclick="selectServer('vidsrc')" class="server-btn inactive" data-server="vidsrc">                                         <i class="fas fa-server mr-1"></i> VidSrc                                     </button>                                 </div>                             </div>                                                          <div class="mt-4">                                 <button type="button" onclick="closeModal()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary text-base font-medium text-white hover:bg-secondary focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">                                     Fermer                                 </button>                                 <button id="watch-now-btn" onclick="startStreaming()" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-600 text-base font-medium text-white hover:bg-green-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">                                     <i class="fas fa-play mr-2"></i> Lecture auto                                 </button>                             </div>                         </div>                     </div>                 </div>             </div>         </div>     </div>      <!-- Streaming Window (hidden by default) -->     <div id="streaming-window" class="streaming-window hidden">         <div class="streaming-header">             <h3 id="streaming-title" class="text-xl font-bold text-white"></h3>             <button onclick="closeStreamingWindow()" class="text-gray-400 hover:text-white">                 <i class="fas fa-times text-xl"></i>             </button>         </div>         <div class="streaming-content">             <div id="streaming-player-container" class="w-full h-full" style="max-width: 1200px;">                 <!-- Contenu du lecteur sera chargé ici -->                 <div id="stream-loading" class="stream-loading w-full h-full">                     <div class="stream-loading-spinner"></div>                     <p class="text-gray-300">Chargement du flux vidéo...</p>                 </div>             </div>         </div>         <div class="streaming-controls">             <div class="flex space-x-2">                 <button onclick="changeQuality('720p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">720p</button>                 <button onclick="changeQuality('1080p')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">1080p</button>                 <button onclick="changeQuality('4k')" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">4K</button>             </div>             <div>                 <button onclick="toggleFullscreen()" class="stream-btn px-3 py-1 bg-gray-700 hover:bg-gray-600 text-white rounded-full text-sm">                     <i class="fas fa-expand mr-1"></i> Plein écran                 </button>             </div>         </div>     </div>      <script>         // Configuration         const API_KEY = 'c45a857c193f6302f2b5061c3b85e743'; // Clé API TMDB valide         const BASE_URL = 'https://api.themoviedb.org/3';                  // Serveurs de streaming avec URLs de base fonctionnelles         const STREAMING_SERVERS = {             hdvip: {                 name: 'Lecteur HD VIP',                 url: 'https://database.gdriveplayer.us/player.php?tmdb=',                 autoPlay: true,                 requiresTMDB: true,                 requiresIMDB: false             },             streamlare: {                 name: 'Streamlare',                 url: 'https://streamlare.com/e/',                 autoPlay: true,                 requiresTMDB: false,                 requiresIMDB: true             },             streamtape: {                 name: 'Streamtape',                 url: 'https://streamtape.com/e/',                 autoPlay: true,                 requiresTMDB: false,                 requiresIMDB: true             },             younetu: {                 name: 'Younetu',                 url: 'https://younetu.com/embed/',                 autoPlay: true,                 requiresTMDB: false,                 requiresIMDB: true             },             uptostream: {                 name: 'Uptostream',                 url: 'https://uptostream.com/iframe/',                 autoPlay: true,                 requiresTMDB: false,                 requiresIMDB: true             },             vidsrc: {                 name: 'VidSrc',                 url: 'https://vidsrc.to/embed/movie/',                 autoPlay: true,                 requiresTMDB: true,                 requiresIMDB: false             }         };                  let currentPage = 1;         let currentFilter = 'popular';         let currentGenre = null;         let currentSearch = '';         let totalPages = 1;         let isLoading = false;         let currentMovieId = null;         let currentIMDBId = null;         let selectedServer = 'hdvip';                  // Fonction utilitaire pour faire les requêtes API         async function fetchAPI(endpoint, params = {}) {             const url = new URL(`${BASE_URL}${endpoint}`);                          // Ajouter les paramètres par défaut             const defaultParams = {                 language: 'fr-FR',                 page: currentPage,                 api_key: API_KEY             };                          // Fusionner les paramètres             const queryParams = {...defaultParams, ...params};                          // Ajouter les paramètres à l'URL             Object.keys(queryParams).forEach(key => {                 if (queryParams[key] !== undefined && queryParams[key] !== null) {                     url.searchParams.append(key, queryParams[key]);                 }             });                          try {                 const response = await fetch(url);                                  if (!response.ok) {                     throw new Error(`Erreur HTTP: ${response.status}`);                 }                                  return await response.json();             } catch (error) {                 console.error('Erreur API:', error);                 throw error;             }         }                  // Charger les films au démarrage         document.addEventListener('DOMContentLoaded', function() {             loadMovies();                          // Écouter la touche Entrée dans la recherche             document.getElementById('search-input').addEventListener('keypress', function(e) {                 if (e.key === 'Enter') {                     searchMovies();                 }             });         });                  // Charger les films         async function loadMovies() {             if (isLoading) return;                          isLoading = true;             showLoadingState();                          try {                 let data;                                  if (currentSearch) {                     data = await fetchAPI('/search/movie', {                         query: currentSearch,                         include_adult: false,                         page: currentPage                     });                 } else if (currentGenre) {                     data = await fetchAPI('/discover/movie', {                         include_adult: false,                         include_video: false,                         sort_by: 'popularity.desc',                         with_genres: currentGenre,                         page: currentPage                     });                 } else {                     data = await fetchAPI(`/movie/${currentFilter}`, {                         page: currentPage                     });                 }                                  totalPages = data.total_pages || 1;                                  if (currentPage === 1) {                     document.getElementById('movies-container').innerHTML = '';                 }                                  if (data.results && data.results.length > 0) {                     displayMovies(data.results);                     updateLoadMoreButton();                 } else {                     showNoResults();                 }             } catch (error) {                 console.error('Error fetching movies:', error);                 showErrorState(error.message);             } finally {                 isLoading = false;             }         }                  // Afficher l'état de chargement         function showLoadingState() {             const container = document.getElementById('movies-container');             container.innerHTML = `                 <div class="flex justify-center items-center py-12 col-span-full">                     <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary loading-spinner"></div>                 </div>             `;         }                  // Afficher les films avec boutons de streaming         function displayMovies(movies) {             const container = document.getElementById('movies-container');                          movies.forEach(movie => {                 const movieCard = document.createElement('div');                 movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300';                                  // Utiliser l'image originale en haute qualité si disponible                 const posterPath = movie.poster_path                      ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`                      : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';                                  movieCard.innerHTML = `                     <div>                         <div class="movie-poster w-full rounded-t-lg overflow-hidden ${!movie.poster_path ? 'placeholder-poster' : ''}">                             <img src="${posterPath}"                                   alt="${movie.title || 'Titre inconnu'}"                                   class="w-full h-full object-cover"                                  onerror="this.src='https://via.placeholder.com/500x750?text=Image+non+chargée'; this.classList.add('placeholder-poster')">                         </div>                         <div class="p-4">                             <h3 class="text-lg font-semibold text-white truncate">${movie.title || 'Titre inconnu'}</h3>                             <div class="flex items-center mt-2">                                 <span class="text-yellow-400 text-sm">                                     <i class="fas fa-star"></i> ${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}                                 </span>                                 <span class="text-gray-400 text-sm ml-auto">${movie.release_date ? movie.release_date.substring(0, 4) : 'N/A'}</span>                             </div>                             <div class="mt-3">                                 <button onclick="startAutoStreaming(${movie.id}, '${movie.title || 'Film'}')" class="w-full stream-btn px-3 py-2 bg-green-600 hover:bg-green-700 text-white rounded text-sm">                                     <i class="fas fa-play-circle mr-1"></i> Lecture auto                                 </button>                                 <button onclick="showMovieDetails(${movie.id})" class="w-full mt-2 px-3 py-2 bg-gray-700 hover:bg-gray-600 text-white rounded text-sm">                                     <i class="fas fa-info-circle mr-1"></i> Détails                                 </button>                             </div>                         </div>                     </div>                 `;                                  container.appendChild(movieCard);             });         }                  // Afficher un message d'erreur         function showErrorState(errorMessage) {             const container = document.getElementById('movies-container');             container.innerHTML = `                 <div class="col-span-full py-6 px-4 error-message rounded-lg">                     <div class="flex items-center">                         <i class="fas fa-exclamation-triangle text-red-500 text-xl mr-3"></i>                         <div>                             <h3 class="text-lg font-medium text-white">Erreur lors du chargement des films</h3>                             <p class="text-gray-300 mt-1">${errorMessage || 'Veuillez réessayer plus tard'}</p>                             <button onclick="retryLoading()" class="mt-3 px-4 py-2 bg-primary text-white rounded-full hover:bg-secondary transition text-sm">                                 <i class="fas fa-sync-alt mr-2"></i> Réessayer                             </button>                         </div>                     </div>                 </div>             `;                          document.getElementById('load-more-container').classList.add('hidden');         }                  // Afficher un message quand aucun résultat n'est trouvé         function showNoResults() {             const container = document.getElementById('movies-container');             container.innerHTML = `                 <div class="col-span-full text-center py-12">                     <i class="fas fa-film text-4xl text-gray-500 mb-4"></i>                     <h3 class="text-xl text-white">Aucun film trouvé</h3>                     <p class="text-gray-400 mt-2">Essayez avec d'autres critères de recherche</p>                 </div>             `;                          document.getElementById('load-more-container').classList.add('hidden');         }                  // Réessayer le chargement         function retryLoading() {             currentPage = 1;             loadMovies();         }                  // Mettre à jour le bouton "Voir plus"         function updateLoadMoreButton() {             const loadMoreContainer = document.getElementById('load-more-container');                          if (currentPage >= totalPages) {                 loadMoreContainer.innerHTML = `                     <p class="text-gray-400">Vous avez atteint la fin des résultats</p>                 `;             } else {                 loadMoreContainer.classList.remove('hidden');             }         }                  // Filtrer les films         function filterMovies(filter) {             currentFilter = filter;             currentGenre = null;             currentSearch = '';             currentPage = 1;             document.getElementById('search-input').value = '';             loadMovies();                          // Mettre à jour les boutons actifs             document.querySelectorAll('button').forEach(btn => {                 if (btn.textContent.toLowerCase().includes(filter.replace('_', ' '))) {                     btn.classList.remove('bg-gray-700');                     btn.classList.add('bg-primary');                 } else {                     btn.classList.remove('bg-primary');                     btn.classList.add('bg-gray-700');                 }             });         }                  // Filtrer par genre         function filterByGenre(genreId) {             currentGenre = genreId;             currentSearch = '';             currentPage = 1;             document.getElementById('search-input').value = '';             loadMovies();                          // Mettre à jour les boutons actifs             document.querySelectorAll('.genre-btn').forEach(btn => {                 btn.classList.remove('bg-primary');                 if (btn.onclick.toString().includes(genreId.toString())) {                     btn.classList.add('bg-primary');                 }             });         }                  // Rechercher des films         function searchMovies() {             const query = document.getElementById('search-input').value.trim();             if (query) {                 currentSearch = query;                 currentGenre = null;                 currentPage = 1;                 loadMovies();             }         }                  // Charger plus de films         function loadMoreMovies() {             if (currentPage < totalPages) {                 currentPage++;                 loadMovies();             }         }                  // Afficher les détails du film         async function showMovieDetails(movieId) {             try {                 const movie = await fetchAPI(`/movie/${movieId}`);                 currentMovieId = movieId;                                  // Récupérer l'ID IMDB si disponible                 if (movie.imdb_id) {                     currentIMDBId = movie.imdb_id;                 } else {                     // Si l'ID IMDB n'est pas disponible, essayer de le récupérer via l'API                     const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);                     currentIMDBId = externalIds.imdb_id || null;                 }                                  // Remplir la modal                 const modalPoster = document.querySelector('#modal-poster img');                 modalPoster.src = movie.poster_path                      ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`                      : 'https://via.placeholder.com/500x750?text=Affiche+non+disponible';                                  modalPoster.onerror = function() {                     this.src = 'https://via.placeholder.com/500x750?text=Image+non+chargée';                 };                                  document.getElementById('modal-title').textContent = movie.title || 'Titre inconnu';                 document.getElementById('modal-rating').textContent = `${movie.vote_average ? movie.vote_average.toFixed(1) : 'N/A'}/10`;                 document.getElementById('modal-year').textContent = movie.release_date ? movie.release_date.substring(0, 4) : 'N/A';                 document.getElementById('modal-runtime').textContent = movie.runtime ? `${movie.runtime} min` : '';                 document.getElementById('modal-overview').textContent = movie.overview || 'Aucun synopsis disponible.';                                  // Afficher les genres                 const genresContainer = document.getElementById('modal-genres');                 genresContainer.innerHTML = '';                 if (movie.genres && movie.genres.length > 0) {                     movie.genres.forEach(genre => {                         const genreBadge = document.createElement('span');                         genreBadge.className = 'bg-gray-700 text-white text-xs px-2 py-1 rounded';                         genreBadge.textContent = genre.name;                         genresContainer.appendChild(genreBadge);                     });                 } else {                     genresContainer.innerHTML = '<span class="text-gray-400 text-sm">Aucun genre spécifié</span>';                 }                                  // Afficher la modal                 document.getElementById('movie-modal').classList.remove('hidden');             } catch (error) {                 console.error('Error fetching movie details:', error);                 alert('Erreur lors du chargement des détails du film: ' + (error.message || 'Veuillez réessayer'));             }         }                  // Fermer la modal de détails         function closeModal() {             document.getElementById('movie-modal').classList.add('hidden');         }                  // Sélectionner un serveur de streaming         function selectServer(serverId) {             selectedServer = serverId;                          // Mettre à jour l'état des boutons             document.querySelectorAll('.server-btn').forEach(btn => {                 if (btn.dataset.server === serverId) {                     btn.classList.remove('inactive');                     btn.classList.add('active');                 } else {                     btn.classList.remove('active');                     btn.classList.add('inactive');                 }             });         }                  // Démarrer le streaming depuis la modal         function startStreaming() {             if (currentMovieId) {                 const movieTitle = document.getElementById('modal-title').textContent;                 startAutoStreaming(currentMovieId, movieTitle);                 closeModal();             }         }                  // Démarrer le streaming automatique dans une nouvelle fenêtre         async function startAutoStreaming(movieId, movieTitle) {             currentMovieId = movieId;                          // Afficher la fenêtre de streaming             const streamingWindow = document.getElementById('streaming-window');             document.getElementById('streaming-title').textContent = movieTitle;                          // Afficher l'état de chargement             const playerContainer = document.getElementById('streaming-player-container');             playerContainer.innerHTML = `                 <div id="stream-loading" class="stream-loading w-full h-full">                     <div class="stream-loading-spinner"></div>                     <p class="text-gray-300">Chargement du flux vidéo...</p>                 </div>             `;                          // Afficher la fenêtre de streaming             streamingWindow.classList.remove('hidden');                          // Récupérer les informations du film pour l'ID IMDB si nécessaire             let imdbId = currentIMDBId;             if (!imdbId && STREAMING_SERVERS[selectedServer].requiresIMDB) {                 try {                     const externalIds = await fetchAPI(`/movie/${movieId}/external_ids`);                     imdbId = externalIds.imdb_id;                     if (!imdbId) {                         throw new Error("ID IMDB non disponible");                     }                 } catch (error) {                     console.error("Erreur lors de la récupération de l'ID IMDB:", error);                     playerContainer.innerHTML = `                         <div class="flex flex-col items-center justify-center h-full text-red-400">                             <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>                             <p class="text-lg">Impossible de trouver l'ID IMDB pour ce film</p>                             <p class="text-sm text-gray-400 mt-2">Essayez avec un autre serveur</p>                         </div>                     `;                     return;                 }             }                          // Construire l'URL de streaming en fonction du serveur sélectionné             let streamingUrl;             const serverConfig = STREAMING_SERVERS[selectedServer];                          if (serverConfig.requiresTMDB) {                 streamingUrl = serverConfig.url + movieId;             } else if (serverConfig.requiresIMDB && imdbId) {                 streamingUrl = serverConfig.url + imdbId;             } else {                 // Si aucun ID n'est disponible, utiliser TMDB par défaut                 streamingUrl = serverConfig.url + movieId;             }                          // Ajouter le paramètre de lecture automatique si pris en charge             if (serverConfig.autoPlay) {                 streamingUrl += '/auto';             }                          // Créer l'iframe pour le lecteur vidéo             const iframe = document.createElement('iframe');             iframe.id = 'streaming-player';             iframe.src = streamingUrl;             iframe.setAttribute('allowfullscreen', '');             iframe.setAttribute('scrolling', 'no');             iframe.setAttribute('frameborder', '0');             iframe.setAttribute('marginwidth', '0');             iframe.setAttribute('marginheight', '0');             iframe.style.width = '100%';             iframe.style.height = '100%';             iframe.style.border = 'none';                          // Gestion des erreurs de chargement             iframe.onerror = function() {                 playerContainer.innerHTML = `                     <div class="flex flex-col items-center justify-center h-full text-red-400">                         <i class="fas fa-exclamation-triangle text-4xl mb-4"></i>                         <p class="text-lg">Erreur lors du chargement du flux vidéo</p>                         <p class="text-sm text-gray-400 mt-2">Le serveur peut être temporairement indisponible</p>                         <button onclick="tryAlternativeServer()" class="mt-4 px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition">                             <i class="fas fa-sync-alt mr-2"></i> Essayer un autre serveur                         </button>                     </div>                 `;             };                          // Remplacer le chargement par le lecteur             playerContainer.innerHTML = '';             playerContainer.appendChild(iframe);                          // Mettre le focus sur la fenêtre de streaming             streamingWindow.focus();                          // Tentative de lecture automatique (peut être bloquée par le navigateur)             setTimeout(() => {                 try {                     iframe.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');                 } catch (e) {                     console.log("Auto-play blocked by browser");                 }             }, 2000);         }                  // Essayer un autre serveur en cas d'erreur         function tryAlternativeServer() {             const servers = Object.keys(STREAMING_SERVERS);             const currentIndex = servers.indexOf(selectedServer);             const nextIndex = (currentIndex + 1) % servers.length;                          selectedServer = servers[nextIndex];             startAutoStreaming(currentMovieId, document.getElementById('streaming-title').textContent);         }                  // Fermer la fenêtre de streaming         function closeStreamingWindow() {             const playerContainer = document.getElementById('streaming-player-container');             playerContainer.innerHTML = '';             document.getElementById('streaming-window').classList.add('hidden');         }                  // Changer la qualité de streaming (simulé)         function changeQuality(quality) {             alert(`Qualité changée en ${quality}. Note: Ceci est une démonstration.`);             // En réalité, vous devriez mettre à jour la source du lecteur vidéo         }                  // Basculer en plein écran         function toggleFullscreen() {             const playerContainer = document.getElementById('streaming-player-container');             if (playerContainer.requestFullscreen) {                 playerContainer.requestFullscreen();             } else if (playerContainer.webkitRequestFullscreen) {                 playerContainer.webkitRequestFullscreen();             } else if (playerContainer.msRequestFullscreen) {                 playerContainer.msRequestFullscreen();             }         }     </script> <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=docto41/cinestream" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
+je veux pas des site d'exemple je veux un vrais site avec plus de 975623123 films version Français en auto Play robotisé
+je veux les plus puissant serveur et lecteur de film afin de piloté en systeme automatique les films a regarder
+voici les cléé api tmdb ::: Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0