Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hugging Face Repository Downloader</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #ffd23f; | |
| --secondary-color: #2e2e2e; | |
| --accent-color: #ff6b6b; | |
| --text-color: #333; | |
| --light-gray: #f5f5f5; | |
| --dark-gray: #777; | |
| --success-color: #4caf50; | |
| --error-color: #f44336; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| padding: 20px; | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| header { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 10px; | |
| margin-bottom: 2rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| text-decoration: none; | |
| color: white; | |
| } | |
| .logo i { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .logo span { | |
| font-weight: bold; | |
| font-size: 1.2rem; | |
| } | |
| .anycoder-link { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: opacity 0.3s; | |
| } | |
| .anycoder-link:hover { | |
| opacity: 0.8; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| width: 100%; | |
| flex: 1; | |
| } | |
| h1 { | |
| color: var(--secondary-color); | |
| margin-bottom: 1.5rem; | |
| font-size: 2rem; | |
| text-align: center; | |
| } | |
| .card { | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 2rem; | |
| box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); | |
| margin-bottom: 2rem; | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); | |
| } | |
| .repo-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .repo-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .repo-title { | |
| font-size: 1.5rem; | |
| color: var(--secondary-color); | |
| font-weight: 600; | |
| } | |
| .repo-url { | |
| color: var(--accent-color); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| word-break: break-all; | |
| } | |
| .repo-description { | |
| color: var(--dark-gray); | |
| margin-bottom: 1.5rem; | |
| } | |
| .commands-section { | |
| margin-top: 2rem; | |
| } | |
| .command-card { | |
| background-color: var(--light-gray); | |
| border-left: 4px solid var(--primary-color); | |
| padding: 1rem 1.5rem; | |
| margin-bottom: 1rem; | |
| border-radius: 0 8px 8px 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .command-card i { | |
| color: var(--primary-color); | |
| font-size: 1.2rem; | |
| } | |
| .command-card pre { | |
| margin: 0; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 0.9rem; | |
| color: var(--secondary-color); | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 0.8rem 1.5rem; | |
| background-color: var(--primary-color); | |
| color: var(--secondary-color); | |
| border: none; | |
| border-radius: 8px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| text-align: center; | |
| text-decoration: none; | |
| font-size: 1rem; | |
| } | |
| .btn:hover { | |
| background-color: #e6b800; | |
| transform: translateY(-2px); | |
| } | |
| .btn:active { | |
| transform: translateY(0); | |
| } | |
| .btn-secondary { | |
| background-color: var(--light-gray); | |
| color: var(--secondary-color); | |
| } | |
| .btn-secondary:hover { | |
| background-color: #e0e0e0; | |
| } | |
| .btn-group { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| .output-section { | |
| margin-top: 2rem; | |
| } | |
| .output-card { | |
| background-color: var(--secondary-color); | |
| color: white; | |
| border-radius: 10px; | |
| padding: 1.5rem; | |
| min-height: 200px; | |
| position: relative; | |
| } | |
| .output-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .output-title { | |
| font-weight: 600; | |
| } | |
| .output-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| } | |
| .output-btn { | |
| background: none; | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 4px; | |
| transition: background-color 0.3s; | |
| } | |
| .output-btn:hover { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| } | |
| #output { | |
| font-family: monospace; | |
| white-space: pre-wrap; | |
| overflow-y: auto; | |
| max-height: 300px; | |
| padding: 1rem; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 5px; | |
| line-height: 1.5; | |
| } | |
| .status { | |
| display: inline-block; | |
| padding: 0.3rem 0.6rem; | |
| border-radius: 4px; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| margin-left: 1rem; | |
| } | |
| .status.waiting { | |
| background-color: var(--dark-gray); | |
| color: white; | |
| } | |
| .status.running { | |
| background-color: var(--primary-color); | |
| color: var(--secondary-color); | |
| } | |
| .status.success { | |
| background-color: var(--success-color); | |
| color: white; | |
| } | |
| .status.error { | |
| background-color: var(--error-color); | |
| color: white; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| background-color: rgba(255, 255, 255, 0.2); | |
| border-radius: 5px; | |
| margin-top: 1rem; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 10px; | |
| background-color: var(--primary-color); | |
| width: 0%; | |
| transition: width 0.3s; | |
| } | |
| .instructions { | |
| background-color: #e3f2fd; | |
| border-left: 4px solid #2196f3; | |
| padding: 1rem; | |
| border-radius: 0 8px 8px 0; | |
| margin-top: 2rem; | |
| } | |
| .instructions h3 { | |
| color: #1976d2; | |
| margin-bottom: 0.5rem; | |
| } | |
| .instructions ul { | |
| margin-left: 1.5rem; | |
| } | |
| .instructions li { | |
| margin-bottom: 0.5rem; | |
| } | |
| @media (max-width: 768px) { | |
| header { | |
| flex-direction: column; | |
| gap: 1rem; | |
| text-align: center; | |
| } | |
| .repo-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| } | |
| .btn-group { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| .command-card { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #555; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| font-size: 0.8rem; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-download"></i> | |
| <span>HF Repository Downloader</span> | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| Built with anycoder | |
| </a> | |
| </header> | |
| <div class="container"> | |
| <h1>Download & Clone Repository</h1> | |
| <div class="card"> | |
| <div class="repo-info"> | |
| <div class="repo-header"> | |
| <div> | |
| <div class="repo-title">multimodalart/wan-2-2-first-last-frame</div> | |
| <a href="https://huggingface.co/spaces/multimodalart/wan-2-2-first-last-frame" class="repo-url" target="_blank"> | |
| https://huggingface.co/spaces/multimodalart/wan-2-2-first-last-frame | |
| </a> | |
| </div> | |
| <span class="status waiting" id="status">Waiting</span> | |
| </div> | |
| <div class="repo-description"> | |
| This repository contains models and code for the WAN-2-2 First Last Frame project. | |
| It includes tools for processing video frames and generating outputs. | |
| </div> | |
| </div> | |
| <div class="commands-section"> | |
| <h2>Available Commands</h2> | |
| <div class="command-card"> | |
| <i class="fas fa-cloud-download-alt"></i> | |
| <div> | |
| <strong>Download with Hugging Face CLI:</strong> | |
| <pre id="command1">hf download multimodalart/wan-2-2-first-last-frame --repo-type=space</pre> | |
| </div> | |
| <button class="btn btn-secondary" onclick="copyToClipboard('command1')"> | |
| <i class="fas fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| <div class="command-card"> | |
| <i class="fas fa-code-branch"></i> | |
| <div> | |
| <strong>Clone with Git (LFS skipped):</strong> | |
| <pre id="command2">GIT_LFS_SKIP_SMUDGE=1 git clone https://huggingface.co/spaces/multimodalart/wan-2-2-first-last-frame</pre> | |
| </div> | |
| <button class="btn btn-secondary" onclick="copyToClipboard('command2')"> | |
| <i class="fas fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| <div class="command-card"> | |
| <i class="fas fa-terminal"></i> | |
| <div> | |
| <strong>Install Hugging Face CLI:</strong> | |
| <pre id="command3">curl -LsSf https://hf.co/cli/install.sh | bash</pre> | |
| </div> | |
| <button class="btn btn-secondary" onclick="copyToClipboard('command3')"> | |
| <i class="fas fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| <div class="command-card"> | |
| <i class="fas fa-cog"></i> | |
| <div> | |
| <strong>Alternative CLI Install:</strong> | |
| <pre id="command4">https://hf.co/cli/install.sh</pre> | |
| </div> | |
| <button class="btn btn-secondary" onclick="copyToClipboard('command4')"> | |
| <i class="fas fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| <div class="command-card"> | |
| <i class="fas fa-git-alt"></i> | |
| <div> | |
| <strong>Git Xet Install:</strong> | |
| <pre id="command5">git-xet install</pre> | |
| </div> | |
| <button class="btn btn-secondary" onclick="copyToClipboard('command5')"> | |
| <i class="fas fa-copy"></i> Copy | |
| </button> | |
| </div> | |
| </div> | |
| <div class="btn-group"> | |
| <button class="btn" onclick="executeCommand(1)"> | |
| <i class="fas fa-play"></i> Run Download | |
| </button> | |
| <button class="btn" onclick="executeCommand(2)"> | |
| <i class="fas fa-play"></i> Run Clone | |
| </button> | |
| <button class="btn btn-secondary" onclick="clearOutput()"> | |
| <i class="fas fa-eraser"></i> Clear Output | |
| </button> | |
| </div> | |
| </div> | |
| <div class="output-section"> | |
| <div class="card"> | |
| <h2>Execution Output</h2> | |
| <div class="output-card"> | |
| <div class="output-header"> | |
| <div class="output-title">Command Output</div> | |
| <div class="output-actions"> | |
| <button class="output-btn tooltip" onclick="clearOutput()"> | |
| <i class="fas fa-trash"></i> | |
| <span class="tooltiptext">Clear output</span> | |
| </button> | |
| <button class="output-btn tooltip" onclick="copyOutput()"> | |
| <i class="fas fa-copy"></i> | |
| <span class="tooltiptext">Copy output</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="progressContainer" style="display: none;"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| <div id="output">Output will appear here when you execute a command...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="instructions"> | |
| <h3>Instructions</h3> | |
| <ul> | |
| <li>Click on any command's "Copy" button to copy it to your clipboard</li> | |
| <li>Use the "Run" buttons to execute commands directly (simulated in this web interface)</li> | |
| <li>The output will show the progress and results of the command execution</li> | |
| <li>For actual execution, you would need to run these commands in your terminal</li> | |
| <li>Make sure you have the required tools installed (git, hf cli, etc.)</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script> | |
| let currentCommand = 0; | |
| let isRunning = false; | |
| function copyToClipboard(elementId) { | |
| const commandElement = document.getElementById(elementId); | |
| const text = commandElement.textContent; | |
| navigator.clipboard.writeText(text).then(() => { | |
| // Show feedback | |
| const originalText = commandElement.textContent; | |
| commandElement.textContent = 'Copied to clipboard!'; | |
| setTimeout(() => { | |
| commandElement.textContent = originalText; | |
| }, 2000); | |
| }).catch(err => { | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| function copyOutput() { | |
| const output = document.getElementById('output').textContent; | |
| navigator.clipboard.writeText(output).then(() => { | |
| showNotification('Output copied to clipboard!'); | |
| }); | |
| } | |
| function clearOutput() { | |
| document.getElementById('output').textContent = 'Output will appear here when you execute a command...'; | |
| document.getElementById('progressContainer').style.display = 'none'; | |
| document.getElementById('progressBar').style.width = '0%'; | |
| updateStatus('waiting', 'Waiting'); | |
| } | |
| function executeCommand(commandNumber) { | |
| if (isRunning) { | |
| addOutput('\nAnother command is already running. Please wait...'); | |
| return; | |
| } | |
| isRunning = true; | |
| currentCommand = commandNumber; | |
| const output = document.getElementById('output'); | |
| const progressContainer = document.getElementById('progressContainer'); | |
| const progressBar = document.getElementById('progressBar'); | |
| output.textContent = ''; | |
| progressContainer.style.display = 'block'; | |
| updateStatus('running', 'Running'); | |
| // Simulate command execution | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 90) { | |
| progress = 90; | |
| } | |
| progressBar.style.width = progress + '%'; | |
| if (progress >= 90) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| progressBar.style.width = '100%'; | |
| simulateCommandOutput(commandNumber); | |
| updateStatus('success', 'Completed'); | |
| isRunning = false; | |
| }, 1000); | |
| } | |
| }, 300); | |
| } | |
| function simulateCommandOutput(commandNumber) { | |
| const output = document.getElementById('output'); | |
| const commands = [ | |
| 'hf download multimodalart/wan-2-2-first-last-frame --repo-type=space', | |
| 'GIT_LFS_SKIP_SMUDGE=1 git clone https://huggingface.co/spaces/multimodalart/wan-2-2-first-last-frame', | |
| 'curl -LsSf https://hf.co/cli/install.sh | bash', | |
| 'https://hf.co/cli/install.sh', | |
| 'git-xet install' | |
| ]; | |
| const command = commands[commandNumber - 1]; | |
| addOutput(`$ ${command}\n\n`); | |
| // Simulate different outputs based on command | |
| switch(commandNumber) { | |
| case 1: | |
| addOutput('Fetching repository information...\n', 500); | |
| addOutput('Downloading files (this may take a while)...\n', 1000); | |
| addOutput(' - file1.pt: 100%\n', 800); | |
| addOutput(' - file2.json: 100%\n', 800); | |
| addOutput(' - config.yaml: 100%\n', 800); | |
| addOutput('\nDownload completed successfully!\n', 500); | |
| addOutput('Files saved to: ./wan-2-2-first-last-frame\n', 500); | |
| break; | |
| case 2: | |
| addOutput('Cloning into \'wan-2-2-first-last-frame\'...\n', 500); | |
| addOutput('remote: Enumerating objects: 45, done.\n', 800); | |
| addOutput('remote: Counting objects: 100% (45/45), done.\n', 800); | |
| addOutput('remote: Compressing objects: 100% (32/32), done.\n', 800); | |
| addOutput('remote: Total 45 (delta 13), reused 40 (delta 10), pack-reused 0\n', 800); | |
| addOutput('Receiving objects: 100% (45/45), 12.45 MiB | 8.23 MiB/s, done.\n', 800); | |
| addOutput('Resolving deltas: 100% (13/13), done.\n', 500); | |
| addOutput('\nRepository cloned successfully!\n', 500); | |
| break; | |
| case 3: | |
| addOutput('Downloading Hugging Face CLI installer...\n', 500); | |
| addOutput('Installing to /usr/local/bin/huggingface-cli\n', 1000); | |
| addOutput('Installation completed successfully!\n', 500); | |
| addOutput('You can now use: hf --help\n', 500); | |
| break; | |
| case 4: | |
| addOutput('This is a direct link to the installer script.\n', 500); | |
| addOutput('To install, run: curl -LsSf https://hf.co/cli/install.sh | bash\n', 500); | |
| break; | |
| case 5: | |
| addOutput('Installing git-xet...\n', 500); | |
| addOutput('Configuring git extensions...\n', 1000); | |
| addOutput('git-xet installed successfully!\n', 500); | |
| break; | |
| } | |
| } | |
| function addOutput(text, delay = 0) { | |
| const output = document.getElementById('output'); | |
| setTimeout(() => { | |
| output.textContent += text; | |
| output.scrollTop = output.scrollHeight; | |
| }, delay); | |
| } | |
| function updateStatus(type, text) { | |
| const statusElement = document.getElementById('status'); | |
| statusElement.className = 'status ' + type; | |
| statusElement.textContent = text; | |
| } | |
| function showNotification(message) { | |
| // Simple notification | |
| const notification = document.createElement('div'); | |
| notification.style.position = 'fixed'; | |
| notification.style.bottom = '20px'; | |
| notification.style.right = '20px'; | |
| notification.style.padding = '10px 20px'; | |
| notification.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; | |
| notification.style.color = 'white'; | |
| notification.style.borderRadius = '5px'; | |
| notification.style.zIndex = '1000'; | |
| notification.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.2)'; | |
| notification.textContent = message; | |
| document.body.appendChild(notification); | |
| setTimeout(() => { | |
| notification.remove(); | |
| }, 3000); | |
| } | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Add some initial information | |
| const output = document.getElementById('output'); | |
| output.textContent = 'Welcome to the Hugging Face Repository Downloader!\n' + | |
| 'Select a command to execute or copy it to run in your terminal.\n\n' + | |
| 'Note: This is a web simulation. For actual execution,\n' + | |
| 'you need to run these commands in your terminal.'; | |
| }); | |
| </script> | |
| </body> | |
| </html> |