Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Transformer Models Search</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> | |
| body { | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 100vh; | |
| background-color: #000000; | |
| } | |
| .search-container { | |
| width: 100%; | |
| max-width: 800px; | |
| padding: 0 20px; | |
| margin: auto; | |
| } | |
| .results-container { | |
| width: 100%; | |
| max-width: 1200px; | |
| padding: 20px; | |
| display: none; | |
| margin: 0 auto; | |
| } | |
| .model-card { | |
| transition: all 0.2s ease; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1); | |
| } | |
| .search-wrapper { | |
| position: relative; | |
| width: 100%; | |
| margin: 0 auto; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: 1rem 1.5rem; | |
| border-radius: 9999px; | |
| background-color: rgba(0, 0, 0, 0.8); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s ease; | |
| font-size: 1rem; | |
| position: relative; | |
| z-index: 2; | |
| color: white; | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: rgba(124, 58, 237, 0.5); | |
| } | |
| .search-input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| .search-button { | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| z-index: 3; | |
| } | |
| .search-button:hover { | |
| color: #aaa; | |
| } | |
| .glow-effect { | |
| position: absolute; | |
| top: -2px; | |
| left: -2px; | |
| right: -2px; | |
| bottom: -2px; | |
| background: linear-gradient( | |
| 90deg, | |
| rgba(255, 0, 0, 0.8) 0%, | |
| rgba(255, 165, 0, 0.8) 20%, | |
| rgba(255, 255, 0, 0.8) 40%, | |
| rgba(0, 128, 0, 0.8) 60%, | |
| rgba(0, 0, 255, 0.8) 80%, | |
| rgba(128, 0, 128, 0.8) 100% | |
| ); | |
| border-radius: 9999px; | |
| z-index: 1; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| filter: blur(8px); | |
| animation: rainbow-glow 6s linear infinite; | |
| background-size: 400% 400%; | |
| } | |
| .search-wrapper:hover .glow-effect, | |
| .search-input:focus ~ .glow-effect { | |
| opacity: 0.8; | |
| } | |
| @keyframes rainbow-glow { | |
| 0% { | |
| background-position: 0% 50%; | |
| box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); | |
| } | |
| 16.6% { | |
| background-position: 20% 50%; | |
| box-shadow: 0 0 15px rgba(255, 165, 0, 0.5); | |
| } | |
| 33.3% { | |
| background-position: 40% 50%; | |
| box-shadow: 0 0 15px rgba(255, 255, 0, 0.5); | |
| } | |
| 50% { | |
| background-position: 60% 50%; | |
| box-shadow: 0 0 15px rgba(0, 128, 0, 0.5); | |
| } | |
| 66.6% { | |
| background-position: 80% 50%; | |
| box-shadow: 0 0 15px rgba(0, 0, 255, 0.5); | |
| } | |
| 83.3% { | |
| background-position: 100% 50%; | |
| box-shadow: 0 0 15px rgba(128, 0, 128, 0.5); | |
| } | |
| 100% { | |
| background-position: 0% 50%; | |
| box-shadow: 0 0 15px rgba(255, 0, 0, 0.5); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="search-container"> | |
| <div class="flex flex-col items-center"> | |
| <h1 class="text-3xl font-bold text-white mb-8">Transformer Models Search</h1> | |
| <div class="search-wrapper w-full mb-8"> | |
| <div class="glow-effect"></div> | |
| <input type="text" id="searchInput" | |
| class="search-input" | |
| placeholder="Search for a model (e.g. GPT-4, BERT, ViT)..."> | |
| <button id="searchButton" class="search-button"> | |
| <i class="fas fa-search text-xl"></i> | |
| </button> | |
| </div> | |
| <p class="text-gray-400 text-sm">Try searching for GPT-4, BERT, or ViT to see available resources</p> | |
| </div> | |
| </div> | |
| <div id="resultsContainer" class="results-container"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 id="resultsTitle" class="text-2xl font-semibold text-white">Search Results for <span class="font-normal" id="searchTermDisplay"></span></h2> | |
| <button id="backButton" class="flex items-center text-gray-400 hover:text-white"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back to Search | |
| </button> | |
| </div> | |
| <div id="modelResources" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Model resources will be inserted here by JavaScript --> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample model data | |
| const modelDatabase = { | |
| "gpt-4": [ | |
| { | |
| title: "GPT-4 Technical Report", | |
| type: "paper", | |
| url: "https://arxiv.org/abs/2303.08774", | |
| description: "Official technical report from OpenAI detailing GPT-4's architecture and capabilities." | |
| }, | |
| { | |
| title: "OpenAI API Documentation", | |
| type: "docs", | |
| url: "https://platform.openai.com/docs/models/gpt-4", | |
| description: "Official API documentation for accessing GPT-4 through OpenAI's platform." | |
| }, | |
| { | |
| title: "GitHub Implementation", | |
| type: "code", | |
| url: "https://github.com/openai/gpt-4", | |
| description: "Community implementations and tools for working with GPT-4." | |
| } | |
| ], | |
| "bert": [ | |
| { | |
| title: "BERT: Pre-training of Deep Bidirectional Transformers", | |
| type: "paper", | |
| url: "https://arxiv.org/abs/1810.04805", | |
| description: "Original BERT paper from Google Research." | |
| }, | |
| { | |
| title: "HuggingFace Transformers", | |
| type: "code", | |
| url: "https://huggingface.co/docs/transformers/model_doc/bert", | |
| description: "Implementation and fine-tuning guide for BERT models." | |
| }, | |
| { | |
| title: "BERT Explained", | |
| type: "tutorial", | |
| url: "https://jalammar.github.io/illustrated-bert/", | |
| description: "Visual guide to understanding how BERT works." | |
| }, | |
| { | |
| title: "TensorFlow BERT Tutorial", | |
| type: "tutorial", | |
| url: "https://www.tensorflow.org/text/tutorials/classify_text_with_bert", | |
| description: "Official TensorFlow tutorial for text classification with BERT." | |
| } | |
| ], | |
| "vit": [ | |
| { | |
| title: "An Image is Worth 16x16 Words", | |
| type: "paper", | |
| url: "https://arxiv.org/abs/2010.11929", | |
| description: "Original Vision Transformer (ViT) paper from Google Research." | |
| }, | |
| { | |
| title: "PyTorch Implementation", | |
| type: "code", | |
| url: "https://github.com/lucidrains/vit-pytorch", | |
| description: "Popular PyTorch implementation of Vision Transformer." | |
| }, | |
| { | |
| title: "ViT Explained", | |
| type: "tutorial", | |
| url: "https://towardsdatascience.com/vision-transformers-from-scratch-pytorch-a-step-by-step-guide-96c3313c2e0c", | |
| description: "Step-by-step guide to understanding and implementing ViT." | |
| } | |
| ] | |
| }; | |
| // DOM elements | |
| const searchInput = document.getElementById('searchInput'); | |
| const searchButton = document.getElementById('searchButton'); | |
| const resultsContainer = document.getElementById('resultsContainer'); | |
| const modelResources = document.getElementById('modelResources'); | |
| const searchTermDisplay = document.getElementById('searchTermDisplay'); | |
| const backButton = document.getElementById('backButton'); | |
| // Search function | |
| function performSearch() { | |
| const searchTerm = searchInput.value.trim().toLowerCase(); | |
| if (searchTerm) { | |
| // Display search term | |
| searchTermDisplay.textContent = `"${searchTerm}"`; | |
| // Clear previous results | |
| modelResources.innerHTML = ''; | |
| // Check if we have resources for this model | |
| if (modelDatabase[searchTerm]) { | |
| // Add resources to the page | |
| modelDatabase[searchTerm].forEach(resource => { | |
| const card = createResourceCard(resource); | |
| modelResources.appendChild(card); | |
| }); | |
| } else { | |
| // Show "no results" message | |
| modelResources.innerHTML = ` | |
| <div class="col-span-full text-center py-10"> | |
| <i class="fas fa-search text-4xl text-gray-600 mb-4"></i> | |
| <h3 class="text-xl font-medium text-gray-400">No resources found for "${searchTerm}"</h3> | |
| <p class="text-gray-500 mt-2">Try searching for GPT-4, BERT, or ViT</p> | |
| </div> | |
| `; | |
| } | |
| // Show results container | |
| resultsContainer.style.display = 'block'; | |
| searchInput.value = ''; | |
| } | |
| } | |
| // Create resource card element | |
| function createResourceCard(resource) { | |
| const card = document.createElement('div'); | |
| card.className = 'model-card bg-gray-900 rounded-xl border border-gray-800 overflow-hidden shadow-sm hover:shadow-md'; | |
| // Determine icon based on resource type | |
| let icon, color; | |
| switch(resource.type) { | |
| case 'paper': | |
| icon = 'file-alt'; | |
| color = 'bg-gray-800 text-gray-400'; | |
| break; | |
| case 'code': | |
| icon = 'code'; | |
| color = 'bg-gray-800 text-gray-400'; | |
| break; | |
| case 'docs': | |
| icon = 'book'; | |
| color = 'bg-gray-800 text-gray-400'; | |
| break; | |
| case 'tutorial': | |
| icon = 'graduation-cap'; | |
| color = 'bg-gray-800 text-gray-400'; | |
| break; | |
| default: | |
| icon = 'link'; | |
| color = 'bg-gray-800 text-gray-400'; | |
| } | |
| card.innerHTML = ` | |
| <a href="${resource.url}" target="_blank" class="block h-full"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full ${color} flex items-center justify-center mr-3"> | |
| <i class="fas fa-${icon}"></i> | |
| </div> | |
| <h3 class="text-lg font-medium text-white">${resource.title}</h3> | |
| </div> | |
| <p class="text-gray-400">${resource.description}</p> | |
| <div class="mt-4 flex items-center text-sm text-gray-400 hover:text-white"> | |
| <span>View ${resource.type}</span> | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </div> | |
| </div> | |
| </a> | |
| `; | |
| return card; | |
| } | |
| // Event listeners | |
| searchButton.addEventListener('click', performSearch); | |
| searchInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| performSearch(); | |
| } | |
| }); | |
| backButton.addEventListener('click', function() { | |
| resultsContainer.style.display = 'none'; | |
| searchInput.focus(); | |
| }); | |
| </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=stevhliu/model-resources" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |