<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Deep Research with Google Gemini | Hugging Face</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> .gradient-bg { background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); } .avatar-ring { border: 2px solid #e5e7eb; transition: all 0.3s ease; } .avatar-ring:hover { border-color: #8b5cf6; transform: scale(1.05); } .tab-active { position: relative; } .tab-active::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #8b5cf6; } .like-btn:hover .heart-icon { transform: scale(1.2); } .heart-icon { transition: transform 0.3s ease; } </style> </head> <body class="font-sans text-gray-800 gradient-bg min-h-screen"> <div class="container mx-auto px-4 py-8 max-w-6xl"> <!-- Header --> <header class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4"> <div class="flex items-center space-x-4"> <a href="https://huggingface.co/" class="flex items-center"> <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face" class="h-8"> </a> <span class="text-gray-400 hidden md:block">/</span> <a href="https://huggingface.co/spaces" class="text-purple-600 hover:underline">Spaces</a> </div> <div class="flex items-center space-x-4"> <div class="relative group"> <button class="flex items-center space-x-2 bg-white px-4 py-2 rounded-lg shadow-sm border border-gray-200 hover:border-purple-500 transition"> <span>Duplicated from</span> <span class="font-medium text-purple-600">jokerfish666/deep-research</span> </button> <div class="absolute hidden group-hover:block bg-white p-3 rounded-lg shadow-lg z-10 w-64 mt-1 border border-gray-200"> <p class="text-sm text-gray-600">This space was duplicated from the original to create your own version.</p> </div> </div> </div> </header> <!-- Main Content --> <main class="bg-white rounded-xl shadow-sm overflow-hidden"> <!-- Space Info Section --> <div class="p-6 border-b border-gray-100"> <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"> <div class="flex items-center space-x-4"> <div class="flex -space-x-2"> <img src="https://huggingface.co/avatars/62e32fad2ccf334512751780e5f4c940.svg" alt="Avatar" class="w-10 h-10 rounded-full avatar-ring"> <img src="https://huggingface.co/avatars/1ce3672a8d4067293893dc0d79cac36d.svg" alt="Avatar" class="w-10 h-10 rounded-full avatar-ring"> </div> <div> <h1 class="text-2xl font-bold">Deep Research with Google Gemini</h1> <div class="flex items-center space-x-2 text-gray-500"> <a href="https://huggingface.co/huanzhaojun" class="hover:text-purple-600 hover:underline">huanzhaojun</a> <span>/</span> <a href="https://huggingface.co/spaces/huanzhaojun/deep-research" class="hover:text-purple-600 hover:underline">deep-research</a> </div> </div> </div> <div class="flex items-center space-x-4"> <button class="like-btn flex items-center space-x-1 px-4 py-2 bg-gray-50 rounded-lg hover:bg-gray-100 transition"> <i class="heart-icon fas fa-heart text-red-500"></i> <span class="font-medium">19</span> </button> <div class="flex items-center space-x-2 px-3 py-2 bg-green-50 rounded-lg"> <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div> <span class="text-green-700 font-medium">Running</span> </div> </div> </div> </div> <!-- Tabs --> <div class="border-b border-gray-100"> <nav class="flex space-x-8 px-6"> <a href="https://huggingface.co/spaces/huanzhaojun/deep-research" class="py-4 font-medium tab-active text-purple-600">App</a> <a href="https://huggingface.co/spaces/huanzhaojun/deep-research/tree/main" class="py-4 font-medium hover:text-purple-600">Files</a> <a href="https://huggingface.co/spaces/huanzhaojun/deep-research/discussions" class="py-4 font-medium hover:text-purple-600">Community</a> </nav> </div> <!-- Loading State --> <div class="p-8 flex flex-col items-center justify-center min-h-[400px]"> <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-purple-500 mb-4"></div> <p class="text-gray-500">Fetching metadata from the HF Docker repository...</p> <button class="mt-4 flex items-center space-x-2 text-purple-600 hover:text-purple-800 transition"> <i class="fas fa-sync-alt"></i> <span>Refreshing</span> </button> </div> </main> <!-- Footer --> <footer class="mt-8 text-center text-gray-500 text-sm"> <p>© 2023 Hugging Face, Inc. All rights reserved.</p> </footer> </div> <script> // Like button functionality const likeBtn = document.querySelector('.like-btn'); const heartIcon = document.querySelector('.heart-icon'); let liked = false; let likeCount = 19; likeBtn.addEventListener('click', () => { liked = !liked; if (liked) { likeCount++; heartIcon.classList.add('fas'); heartIcon.classList.remove('far'); } else { likeCount--; heartIcon.classList.add('far'); heartIcon.classList.remove('fas'); } document.querySelector('.like-btn span').textContent = likeCount; // Add animation heartIcon.style.transform = 'scale(1.5)'; setTimeout(() => { heartIcon.style.transform = 'scale(1)'; }, 300); }); // Simulate loading completion after 3 seconds setTimeout(() => { const loadingElement = document.querySelector('.animate-spin'); if (loadingElement) { loadingElement.style.display = 'none'; document.querySelector('p.text-gray-500').textContent = 'App is ready!'; document.querySelector('button').innerHTML = '<i class="fas fa-play mr-2"></i> Launch App'; document.querySelector('button').classList.add('bg-purple-600', 'text-white', 'px-4', 'py-2', 'rounded-lg'); document.querySelector('button').classList.remove('text-purple-600'); } }, 3000); </script> </body> </html> - Follow Up Deployment
05744c4
verified