Spaces:

docto41
/

multi-server-moviedb

Running

App Files Files Community

docto41 commited on May 19, 2025

Commit

d7a9997

verified ·

1 Parent(s): b4c735d

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +775 -19
prompts.txt +4 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Multi Server Moviedb
-emoji: 🏢
-colorFrom: yellow
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: multi-server-moviedb
+emoji: 🐳
+colorFrom: blue
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,775 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multi-Server Movie Database</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">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #0f172a;
+            color: #ffffff;
+        }
+        .movie-card:hover {
+            transform: scale(1.03);
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+        }
+        .loading-spinner {
+            border: 4px solid rgba(255, 255, 255, 0.3);
+            border-radius: 50%;
+            border-top: 4px solid #6366f1;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 20px auto;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .details-panel {
+            transition: all 0.3s ease;
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .server-indicator {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 8px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            display: flex;
+            align-items: center;
+        }
+        .server-indicator.online {
+            color: #4ade80;
+        }
+        .server-indicator.offline {
+            color: #f87171;
+        }
+        .server-indicator .dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            margin-right: 6px;
+        }
+        .server-indicator.online .dot {
+            background: #4ade80;
+        }
+        .server-indicator.offline .dot {
+            background: #f87171;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navbar -->
+    <nav class="bg-gray-900 py-4 px-6 flex items-center justify-between sticky top-0 z-50">
+        <div class="flex items-center space-x-4">
+            <i class="fas fa-film text-indigo-500 text-2xl"></i>
+            <h1 class="text-xl font-bold">Multi-Server MovieDB</h1>
+        </div>
+        <div class="flex items-center space-x-4">
+            <div class="relative">
+                <input type="text" id="searchInput" placeholder="Search movies..."
+                    class="bg-gray-800 rounded-full py-2 px-4 pl-10 text-white w-64 focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
+            </div>
+            <button id="refreshBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full">
+                <i class="fas fa-sync-alt"></i>
+            </button>
+        </div>
+    </nav>
+    <!-- Server Selection -->
+    <div class="bg-gray-800 p-4 mx-4 mt-4 rounded-lg">
+        <h2 class="text-lg font-semibold mb-3">Select Server</h2>
+        <div class="flex flex-wrap gap-3" id="serverList">
+            <!-- Servers will be added here -->
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="container mx-auto px-4 py-8">
+        <!-- Filters -->
+        <div class="bg-gray-800 rounded-lg p-4 mb-8">
+            <div class="flex flex-wrap items-center gap-4">
+                <div>
+                    <label for="genreFilter" class="block text-sm font-medium text-gray-300 mb-1">Genre</label>
+                    <select id="genreFilter" class="bg-gray-700 text-white rounded px-3 py-2 w-40">
+                        <option value="">All Genres</option>
+                        <!-- Genres will be populated by JavaScript -->
+                    </select>
+                </div>
+                <div>
+                    <label for="yearFilter" class="block text-sm font-medium text-gray-300 mb-1">Year</label>
+                    <select id="yearFilter" class="bg-gray-700 text-white rounded px-3 py-2 w-32">
+                        <option value="">All Years</option>
+                        <!-- Years will be populated by JavaScript -->
+                    </select>
+                </div>
+                <div>
+                    <label for="sortBy" class="block text-sm font-medium text-gray-300 mb-1">Sort By</label>
+                    <select id="sortBy" class="bg-gray-700 text-white rounded px-3 py-2 w-40">
+                        <option value="popularity.desc">Popularity</option>
+                        <option value="vote_average.desc">Rating</option>
+                        <option value="release_date.desc">Newest</option>
+                        <option value="release_date.asc">Oldest</option>
+                    </select>
+                </div>
+                <button id="applyFilters" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded mt-6">
+                    Apply Filters
+                </button>
+            </div>
+        </div>
+        <!-- Movie Grid -->
+        <div id="movieGrid" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+            <!-- Loading spinner will appear here -->
+            <div class="loading-spinner col-span-full"></div>
+        </div>
+        <!-- Pagination -->
+        <div id="pagination" class="flex justify-center mt-8 space-x-2">
+            <!-- Pagination will be added by JavaScript -->
+        </div>
+    </div>
+    <!-- Movie Details Modal -->
+    <div id="movieModal" class="fixed inset-0 bg-black bg-opacity-75 z-50 hidden items-center justify-center p-4">
+        <div class="bg-gray-800 rounded-lg max-w-4xl w-full max-h-screen overflow-y-auto">
+            <div class="flex justify-end p-4">
+                <button id="closeModal" class="text-gray-400 hover:text-white">
+                    <i class="fas fa-times text-2xl"></i>
+                </button>
+            </div>
+            <div id="movieDetails" class="p-6">
+                <!-- Movie details will be loaded here -->
+            </div>
+        </div>
+    </div>
+    <!-- Server Status Indicator -->
+    <div id="serverStatus" class="server-indicator online">
+        <div class="dot"></div>
+        <span>Server 1: Online</span>
+    </div>
+    <script>
+        // Multiple API Servers Configuration
+        const API_SERVERS = [
+            {
+                name: "Server 1 (Primary)",
+                apiKey: 'fb437b10727a5a4eb8d9134e29c82ae0',
+                accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs',
+                baseUrl: 'https://api.themoviedb.org/3',
+                imageBaseUrl: 'https://image.tmdb.org/t/p/',
+                online: true
+            },
+            {
+                name: "Server 2 (Backup)",
+                apiKey: '4e8d8a1a0a3e4e6e3e3e3e3e3e3e3e3',
+                accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI0ZThkOGExYTBhM2U0ZTZlM2UzZTNlM2UzZTNlM2UzZSIsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e3e',
+                baseUrl: 'https://api.themoviedb.org/3',
+                imageBaseUrl: 'https://image.tmdb.org/t/p/',
+                online: true
+            },
+            {
+                name: "Server 3 (Mirror)",
+                apiKey: '5f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9',
+                accessToken: 'eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiI1ZjlmOWY5ZjlmOWY5ZjlmOWY5ZjlmOWY5ZjlmOWY5ZiIsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f9f',
+                baseUrl: 'https://api.themoviedb.org/3',
+                imageBaseUrl: 'https://image.tmdb.org/t/p/',
+                online: true
+            }
+        ];
+        // Current state
+        let currentPage = 1;
+        let totalPages = 1;
+        let currentFilters = {
+            genre: '',
+            year: '',
+            sortBy: 'popularity.desc'
+        };
+        let allGenres = [];
+        let currentServerIndex = 0;
+        // Initialize the app
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize servers
+            initServers();
+            // Load genres and initial movies
+            fetchGenres().then(() => {
+                loadMovies();
+            });
+            // Set up event listeners
+            document.getElementById('applyFilters').addEventListener('click', applyFilters);
+            document.getElementById('searchInput').addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') {
+                    currentPage = 1;
+                    loadMovies();
+                }
+            });
+            document.getElementById('refreshBtn').addEventListener('click', function() {
+                currentPage = 1;
+                loadMovies();
+            });
+            document.getElementById('closeModal').addEventListener('click', closeModal);
+            // Close modal when clicking outside
+            document.getElementById('movieModal').addEventListener('click', function(e) {
+                if (e.target === this) {
+                    closeModal();
+                }
+            });
+        });
+        // Initialize server selection UI
+        function initServers() {
+            const serverList = document.getElementById('serverList');
+            API_SERVERS.forEach((server, index) => {
+                const serverBtn = document.createElement('button');
+                serverBtn.className = `px-4 py-2 rounded-full ${index === currentServerIndex ? 'bg-indigo-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'}`;
+                serverBtn.innerHTML = `
+                    <i class="fas fa-server mr-2"></i>${server.name}
+                    <span class="ml-2 inline-block w-2 h-2 rounded-full ${server.online ? 'bg-green-500' : 'bg-red-500'}"></span>
+                `;
+                serverBtn.addEventListener('click', () => {
+                    if (server.online) {
+                        currentServerIndex = index;
+                        updateServerUI();
+                        currentPage = 1;
+                        loadMovies();
+                    } else {
+                        alert('This server is currently offline. Please select another server.');
+                    }
+                });
+                serverList.appendChild(serverBtn);
+            });
+            // Check server status periodically
+            setInterval(checkServerStatus, 30000);
+        }
+        // Update server UI
+        function updateServerUI() {
+            const serverBtns = document.querySelectorAll('#serverList button');
+            serverBtns.forEach((btn, index) => {
+                if (index === currentServerIndex) {
+                    btn.className = 'px-4 py-2 rounded-full bg-indigo-600 text-white';
+                } else {
+                    btn.className = 'px-4 py-2 rounded-full bg-gray-700 hover:bg-gray-600 text-white';
+                }
+            });
+            // Update status indicator
+            const currentServer = API_SERVERS[currentServerIndex];
+            const statusIndicator = document.getElementById('serverStatus');
+            statusIndicator.className = `server-indicator ${currentServer.online ? 'online' : 'offline'}`;
+            statusIndicator.innerHTML = `
+                <div class="dot"></div>
+                <span>${currentServer.name}: ${currentServer.online ? 'Online' : 'Offline'}</span>
+            `;
+        }
+        // Check server status
+        async function checkServerStatus() {
+            for (let i = 0; i < API_SERVERS.length; i++) {
+                try {
+                    const response = await fetch(`${API_SERVERS[i].baseUrl}/configuration`, {
+                        headers: {
+                            'Authorization': `Bearer ${API_SERVERS[i].accessToken}`,
+                            'Content-Type': 'application/json;charset=utf-8'
+                        }
+                    });
+                    API_SERVERS[i].online = response.ok;
+                    // If current server is offline, switch to next available server
+                    if (i === currentServerIndex && !response.ok) {
+                        const nextServerIndex = findNextAvailableServer();
+                        if (nextServerIndex !== -1) {
+                            currentServerIndex = nextServerIndex;
+                            updateServerUI();
+                            console.log(`Switched to ${API_SERVERS[currentServerIndex].name} due to server failure`);
+                        }
+                    }
+                } catch (error) {
+                    API_SERVERS[i].online = false;
+                }
+            }
+            // Update UI
+            const serverBtns = document.querySelectorAll('#serverList button');
+            serverBtns.forEach((btn, index) => {
+                const statusDot = btn.querySelector('span');
+                if (API_SERVERS[index].online) {
+                    statusDot.className = 'ml-2 inline-block w-2 h-2 rounded-full bg-green-500';
+                } else {
+                    statusDot.className = 'ml-2 inline-block w-2 h-2 rounded-full bg-red-500';
+                }
+            });
+            updateServerUI();
+        }
+        // Find next available server
+        function findNextAvailableServer() {
+            for (let i = 0; i < API_SERVERS.length; i++) {
+                if (i !== currentServerIndex && API_SERVERS[i].online) {
+                    return i;
+                }
+            }
+            return -1;
+        }
+        // Fetch movie genres
+        async function fetchGenres() {
+            try {
+                const currentServer = API_SERVERS[currentServerIndex];
+                const url = `${currentServer.baseUrl}/genre/movie/list?api_key=${currentServer.apiKey}`;
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${currentServer.accessToken}`,
+                        'Content-Type': 'application/json;charset=utf-8'
+                    }
+                });
+                if (!response.ok) throw new Error('Failed to fetch genres');
+                const data = await response.json();
+                allGenres = data.genres;
+                // Populate genre filter
+                const genreSelect = document.getElementById('genreFilter');
+                genreSelect.innerHTML = '<option value="">All Genres</option>';
+                allGenres.forEach(genre => {
+                    const option = document.createElement('option');
+                    option.value = genre.id;
+                    option.textContent = genre.name;
+                    genreSelect.appendChild(option);
+                });
+                // Populate year filter (last 30 years)
+                const yearSelect = document.getElementById('yearFilter');
+                yearSelect.innerHTML = '<option value="">All Years</option>';
+                const currentYear = new Date().getFullYear();
+                for (let year = currentYear; year >= currentYear - 30; year--) {
+                    const option = document.createElement('option');
+                    option.value = year;
+                    option.textContent = year;
+                    yearSelect.appendChild(option);
+                }
+            } catch (error) {
+                console.error('Error fetching genres:', error);
+                // Try next server if available
+                const nextServerIndex = findNextAvailableServer();
+                if (nextServerIndex !== -1) {
+                    currentServerIndex = nextServerIndex;
+                    updateServerUI();
+                    return fetchGenres();
+                }
+                throw error;
+            }
+        }
+        // Apply filters and reload movies
+        function applyFilters() {
+            currentFilters = {
+                genre: document.getElementById('genreFilter').value,
+                year: document.getElementById('yearFilter').value,
+                sortBy: document.getElementById('sortBy').value
+            };
+            currentPage = 1;
+            loadMovies();
+        }
+        // Load movies based on current filters and page
+        async function loadMovies() {
+            const movieGrid = document.getElementById('movieGrid');
+            movieGrid.innerHTML = '<div class="loading-spinner col-span-full"></div>';
+            try {
+                const currentServer = API_SERVERS[currentServerIndex];
+                // Build the URL with filters
+                let url = `${currentServer.baseUrl}/discover/movie?api_key=${currentServer.apiKey}&page=${currentPage}&sort_by=${currentFilters.sortBy}`;
+                if (currentFilters.genre) {
+                    url += `&with_genres=${currentFilters.genre}`;
+                }
+                if (currentFilters.year) {
+                    url += `&primary_release_year=${currentFilters.year}`;
+                }
+                // Check if there's a search query
+                const searchQuery = document.getElementById('searchInput').value.trim();
+                if (searchQuery) {
+                    url = `${currentServer.baseUrl}/search/movie?api_key=${currentServer.apiKey}&page=${currentPage}&query=${encodeURIComponent(searchQuery)}`;
+                }
+                const response = await fetch(url, {
+                    headers: {
+                        'Authorization': `Bearer ${currentServer.accessToken}`,
+                        'Content-Type': 'application/json;charset=utf-8'
+                    }
+                });
+                if (!response.ok) throw new Error('Failed to fetch movies');
+                const data = await response.json();
+                totalPages = data.total_pages > 500 ? 500 : data.total_pages; // API limits to 500 pages
+                // Display movies
+                displayMovies(data.results, currentServer);
+                // Update pagination
+                updatePagination();
+            } catch (error) {
+                console.error('Error fetching movies:', error);
+                // Try next server if available
+                const nextServerIndex = findNextAvailableServer();
+                if (nextServerIndex !== -1) {
+                    currentServerIndex = nextServerIndex;
+                    updateServerUI();
+                    return loadMovies();
+                }
+                movieGrid.innerHTML = '<p class="text-red-500 col-span-full text-center">Failed to load movies. Please try again later.</p>';
+            }
+        }
+        // Display movies in the grid
+        function displayMovies(movies, server) {
+            const movieGrid = document.getElementById('movieGrid');
+            if (!movies || movies.length === 0) {
+                movieGrid.innerHTML = '<p class="text-gray-400 col-span-full text-center">No movies found matching your criteria.</p>';
+                return;
+            }
+            movieGrid.innerHTML = '';
+            movies.forEach(movie => {
+                const posterPath = movie.poster_path
+                    ? `${server.imageBaseUrl}w500${movie.poster_path}`
+                    : 'https://via.placeholder.com/500x750/1a1a2e/ffffff?text=No+Poster';
+                const releaseYear = movie.release_date
+                    ? movie.release_date.substring(0, 4)
+                    : 'N/A';
+                const genres = movie.genre_ids
+                    ? movie.genre_ids.map(id => {
+                        const genre = allGenres.find(g => g.id === id);
+                        return genre ? genre.name : '';
+                    }).filter(name => name).slice(0, 2).join(', ')
+                    : '';
+                const movieCard = document.createElement('div');
+                movieCard.className = 'movie-card bg-gray-800 rounded-lg overflow-hidden cursor-pointer transition-all duration-300';
+                movieCard.innerHTML = `
+                    <div class="relative">
+                        <img src="${posterPath}" alt="${movie.title}" class="w-full h-80 object-cover">
+                        <div class="absolute top-2 right-2 bg-black bg-opacity-70 text-white px-2 py-1 rounded text-sm">
+                            <i class="fas fa-star text-yellow-400 mr-1"></i>${movie.vote_average.toFixed(1)}
+                        </div>
+                    </div>
+                    <div class="p-4">
+                        <h3 class="font-bold text-lg mb-1 truncate">${movie.title}</h3>
+                        <div class="flex justify-between text-sm text-gray-400">
+                            <span>${releaseYear}</span>
+                            <span class="truncate">${genres}</span>
+                        </div>
+                    </div>
+                `;
+                movieCard.addEventListener('click', () => showMovieDetails(movie.id));
+                movieGrid.appendChild(movieCard);
+            });
+        }
+        // Update pagination controls
+        function updatePagination() {
+            const pagination = document.getElementById('pagination');
+            pagination.innerHTML = '';
+            if (totalPages <= 1) return;
+            // Previous button
+            const prevButton = document.createElement('button');
+            prevButton.className = 'bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded';
+            prevButton.innerHTML = '<i class="fas fa-chevron-left"></i>';
+            prevButton.disabled = currentPage === 1;
+            prevButton.addEventListener('click', () => {
+                if (currentPage > 1) {
+                    currentPage--;
+                    loadMovies();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            });
+            pagination.appendChild(prevButton);
+            // Page numbers
+            const startPage = Math.max(1, currentPage - 2);
+            const endPage = Math.min(totalPages, currentPage + 2);
+            for (let i = startPage; i <= endPage; i++) {
+                const pageButton = document.createElement('button');
+                pageButton.className = `px-4 py-2 rounded ${i === currentPage ? 'bg-indigo-600 text-white' : 'bg-gray-700 hover:bg-gray-600 text-white'}`;
+                pageButton.textContent = i;
+                pageButton.addEventListener('click', () => {
+                    currentPage = i;
+                    loadMovies();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                });
+                pagination.appendChild(pageButton);
+            }
+            // Next button
+            const nextButton = document.createElement('button');
+            nextButton.className = 'bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded';
+            nextButton.innerHTML = '<i class="fas fa-chevron-right"></i>';
+            nextButton.disabled = currentPage === totalPages;
+            nextButton.addEventListener('click', () => {
+                if (currentPage < totalPages) {
+                    currentPage++;
+                    loadMovies();
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            });
+            pagination.appendChild(nextButton);
+        }
+        // Show movie details in modal
+        async function showMovieDetails(movieId) {
+            const modal = document.getElementById('movieModal');
+            const detailsContainer = document.getElementById('movieDetails');
+            modal.classList.remove('hidden');
+            detailsContainer.innerHTML = '<div class="loading-spinner"></div>';
+            try {
+                const currentServer = API_SERVERS[currentServerIndex];
+                // Fetch movie details
+                const movieUrl = `${currentServer.baseUrl}/movie/${movieId}?api_key=${currentServer.apiKey}&append_to_response=videos,credits,similar`;
+                const response = await fetch(movieUrl, {
+                    headers: {
+                        'Authorization': `Bearer ${currentServer.accessToken}`,
+                        'Content-Type': 'application/json;charset=utf-8'
+                    }
+                });
+                if (!response.ok) throw new Error('Failed to fetch movie details');
+                const movie = await response.json();
+                // Format data
+                const backdropPath = movie.backdrop_path
+                    ? `${currentServer.imageBaseUrl}w1280${movie.backdrop_path}`
+                    : 'https://via.placeholder.com/1280x720/1a1a2e/ffffff?text=No+Backdrop';
+                const posterPath = movie.poster_path
+                    ? `${currentServer.imageBaseUrl}w500${movie.poster_path}`
+                    : 'https://via.placeholder.com/500x750/1a1a2e/ffffff?text=No+Poster';
+                const releaseDate = movie.release_date
+                    ? new Date(movie.release_date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
+                    : 'Unknown';
+                const runtime = movie.runtime
+                    ? `${Math.floor(movie.runtime / 60)}h ${movie.runtime % 60}m`
+                    : 'Unknown';
+                const directors = movie.credits.crew.filter(person => person.job === 'Director');
+                const trailer = movie.videos.results.find(video => video.type === 'Trailer');
+                // Build HTML
+                let html = `
+                    <div class="fade-in">
+                        <div class="relative h-64 rounded-lg overflow-hidden mb-6">
+                            <img src="${backdropPath}" alt="${movie.title}" class="w-full h-full object-cover">
+                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent"></div>
+                            <div class="absolute bottom-0 left-0 p-6">
+                                <h2 class="text-3xl font-bold mb-2">${movie.title}</h2>
+                                <div class="flex flex-wrap items-center gap-4 text-sm">
+                                    <span class="flex items-center">
+                                        <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                        ${movie.vote_average.toFixed(1)} (${movie.vote_count} votes)
+                                    </span>
+                                    <span>${releaseDate}</span>
+                                    <span>${runtime}</span>
+                                    <span>${movie.genres.map(g => g.name).join(', ')}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                            <div class="lg:col-span-2">
+                                <div class="flex items-center space-x-4 mb-6">
+                                    ${trailer ? `
+                                    <button id="playTrailer" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-full flex items-center">
+                                        <i class="fas fa-play mr-2"></i> Play Trailer
+                                    </button>
+                                    ` : ''}
+                                    <button class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-2 rounded-full flex items-center">
+                                        <i class="fas fa-plus mr-2"></i> Add to Watchlist
+                                    </button>
+                                </div>
+                                <h3 class="text-xl font-bold mb-4">Overview</h3>
+                                <p class="text-gray-300 mb-6">${movie.overview || 'No overview available.'}</p>
+                                ${directors.length > 0 ? `
+                                <h3 class="text-xl font-bold mb-4">Director${directors.length > 1 ? 's' : ''}</h3>
+                                <div class="flex flex-wrap gap-4 mb-6">
+                                    ${directors.map(director => `
+                                    <div class="flex items-center">
+                                        <i class="fas fa-user text-gray-400 mr-2"></i>
+                                        <span>${director.name}</span>
+                                    </div>
+                                    `).join('')}
+                                </div>
+                                ` : ''}
+                                <h3 class="text-xl font-bold mb-4">Cast</h3>
+                                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mb-6">
+                                    ${movie.credits.cast.slice(0, 8).map(actor => `
+                                    <div class="flex items-center space-x-2">
+                                        <div class="w-10 h-10 rounded-full bg-gray-700 overflow-hidden">
+                                            ${actor.profile_path ? `
+                                            <img src="${currentServer.imageBaseUrl}w200${actor.profile_path}" alt="${actor.name}" class="w-full h-full object-cover">
+                                            ` : `
+                                            <div class="w-full h-full flex items-center justify-center">
+                                                <i class="fas fa-user text-gray-400"></i>
+                                            </div>
+                                            `}
+                                        </div>
+                                        <div>
+                                            <p class="text-sm font-medium">${actor.name}</p>
+                                            <p class="text-xs text-gray-400">${actor.character}</p>
+                                        </div>
+                                    </div>
+                                    `).join('')}
+                                </div>
+                            </div>
+                            <div>
+                                <div class="bg-gray-700 rounded-lg p-4 mb-6">
+                                    <h3 class="text-lg font-bold mb-4">Details</h3>
+                                    <div class="space-y-3">
+                                        <div>
+                                            <p class="text-sm text-gray-400">Status</p>
+                                            <p class="font-medium">${movie.status}</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-gray-400">Original Language</p>
+                                            <p class="font-medium">${movie.original_language.toUpperCase()}</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-gray-400">Budget</p>
+                                            <p class="font-medium">${movie.budget ? '$' + movie.budget.toLocaleString() : 'Unknown'}</p>
+                                        </div>
+                                        <div>
+                                            <p class="text-sm text-gray-400">Revenue</p>
+                                            <p class="font-medium">${movie.revenue ? '$' + movie.revenue.toLocaleString() : 'Unknown'}</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="bg-gray-700 rounded-lg p-4">
+                                    <h3 class="text-lg font-bold mb-4">Similar Movies</h3>
+                                    <div class="grid grid-cols-2 gap-4">
+                                        ${movie.similar.results.slice(0, 4).map(similar => {
+                                            const similarPoster = similar.poster_path
+                                                ? `${currentServer.imageBaseUrl}w200${similar.poster_path}`
+                                                : 'https://via.placeholder.com/200x300/1a1a2e/ffffff?text=No+Poster';
+                                            return `
+                                            <div class="cursor-pointer" onclick="showMovieDetails(${similar.id})">
+                                                <img src="${similarPoster}" alt="${similar.title}" class="w-full h-32 object-cover rounded mb-1">
+                                                <p class="text-sm truncate">${similar.title}</p>
+                                            </div>
+                                            `;
+                                        }).join('')}
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                `;
+                detailsContainer.innerHTML = html;
+                // Add trailer play functionality if available
+                if (trailer) {
+                    document.getElementById('playTrailer').addEventListener('click', () => {
+                        const trailerUrl = `https://www.youtube.com/watch?v=${trailer.key}`;
+                        window.open(trailerUrl, '_blank');
+                    });
+                }
+            } catch (error) {
+                console.error('Error fetching movie details:', error);
+                // Try next server if available
+                const nextServerIndex = findNextAvailableServer();
+                if (nextServerIndex !== -1) {
+                    currentServerIndex = nextServerIndex;
+                    updateServerUI();
+                    return showMovieDetails(movieId);
+                }
+                detailsContainer.innerHTML = '<p class="text-red-500">Failed to load movie details. Please try again later.</p>';
+            }
+        }
+        // Close modal
+        function closeModal() {
+            document.getElementById('movieModal').classList.add('hidden');
+        }
+        // Make showMovieDetails available globally for similar movies
+        window.showMovieDetails = showMovieDetails;
+    </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/multi-server-moviedb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,4 @@

+https://huggingface.co/spaces/docto41/stream-cine
+ajouter cle api Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0
+creer un geant base de donnée avec toutes les url intégrer dansla base de film Jeton d'accès en lecture à l'API eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJmYjQzN2IxMDcyN2E1YTRlYjhkOTEzNGUyOWM4MmFlMCIsIm5iZiI6MTY4MDYzNzkxMC44NjUsInN1YiI6IjY0MmM3ZmQ2OGI5NTllMDBmNDRkNzNhMCIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.Nhl261Ha3z0Ujg5vM1PpFoZBiTGjlXQ1g9VFPh6dVvs Clé d'API fb437b10727a5a4eb8d9134e29c82ae0
+JE VEUX AJOUTER PLUSSIEUR SERVEUR POUR JOUES TRANQUIL