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 CLI Installer</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #ffd23f; | |
| --secondary: #2b2b2b; | |
| --accent: #ff6b6b; | |
| --text: #f8f8f8; | |
| --text-secondary: #a0a0a0; | |
| --bg: #1a1a1a; | |
| --terminal-bg: #1e1e1e; | |
| --terminal-text: #e0e0e0; | |
| --terminal-prompt: #4CAF50; | |
| --terminal-output: #bbbbbb; | |
| --terminal-error: #ff5252; | |
| --terminal-success: #8bc34a; | |
| --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| --border-radius: 8px; | |
| --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace; | |
| } | |
| body { | |
| background-color: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| line-height: 1.6; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--secondary), #111); | |
| padding: 1.5rem; | |
| box-shadow: var(--shadow); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .header-content { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.8rem; | |
| text-decoration: none; | |
| color: var(--text); | |
| } | |
| .logo-icon { | |
| font-size: 1.8rem; | |
| color: var(--primary); | |
| } | |
| .logo-text { | |
| font-size: 1.3rem; | |
| font-weight: bold; | |
| } | |
| .anycoder-link { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link:hover { | |
| color: var(--accent); | |
| transform: translateY(-2px); | |
| } | |
| main { | |
| flex: 1; | |
| max-width: 1200px; | |
| margin: 2rem auto; | |
| padding: 0 1rem; | |
| width: 100%; | |
| } | |
| .terminal-container { | |
| background-color: var(--terminal-bg); | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| height: 600px; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| } | |
| .terminal-header { | |
| background-color: var(--secondary); | |
| padding: 0.8rem 1.2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .terminal-title { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| } | |
| .terminal-controls { | |
| display: flex; | |
| gap: 0.6rem; | |
| } | |
| .control-btn { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| border: none; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .control-btn:hover { | |
| transform: scale(1.2); | |
| } | |
| .close { | |
| background-color: #ff5f56; | |
| } | |
| .minimize { | |
| background-color: #ffbd2e; | |
| } | |
| .maximize { | |
| background-color: #27c93f; | |
| } | |
| .terminal-body { | |
| flex: 1; | |
| padding: 1.5rem; | |
| overflow-y: auto; | |
| position: relative; | |
| } | |
| .terminal-output { | |
| color: var(--terminal-output); | |
| margin-bottom: 1rem; | |
| white-space: pre-wrap; | |
| font-size: 0.95rem; | |
| } | |
| .terminal-prompt { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .prompt-symbol { | |
| color: var(--terminal-prompt); | |
| font-weight: bold; | |
| } | |
| .prompt-input { | |
| color: var(--terminal-text); | |
| background: transparent; | |
| border: none; | |
| outline: none; | |
| flex: 1; | |
| font-size: 0.95rem; | |
| } | |
| .typing-cursor { | |
| display: inline-block; | |
| width: 8px; | |
| height: 1.2em; | |
| background-color: var(--terminal-text); | |
| animation: blink 1s step-end infinite; | |
| vertical-align: middle; | |
| } | |
| @keyframes blink { | |
| from, to { background-color: transparent } | |
| 50% { background-color: var(--terminal-text) } | |
| } | |
| .command-explanation { | |
| background-color: rgba(0, 0, 0, 0.3); | |
| border-left: 3px solid var(--primary); | |
| padding: 1rem; | |
| margin: 1.5rem 0; | |
| border-radius: 0 var(--border-radius) var(--border-radius) 0; | |
| } | |
| .command-explanation h3 { | |
| color: var(--primary); | |
| margin-bottom: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .command-explanation p { | |
| color: var(--terminal-output); | |
| margin-bottom: 0.5rem; | |
| } | |
| .command-explanation ul { | |
| color: var(--terminal-output); | |
| margin-left: 1.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .command-explanation li { | |
| margin-bottom: 0.3rem; | |
| } | |
| .progress-container { | |
| margin: 1.5rem 0; | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--accent)); | |
| width: 0%; | |
| transition: width 0.5s ease; | |
| } | |
| .status-message { | |
| color: var(--terminal-output); | |
| margin-top: 0.5rem; | |
| font-size: 0.9rem; | |
| } | |
| .success-message { | |
| color: var(--terminal-success); | |
| font-weight: bold; | |
| } | |
| .error-message { | |
| color: var(--terminal-error); | |
| font-weight: bold; | |
| } | |
| .action-buttons { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .btn { | |
| padding: 0.6rem 1.2rem; | |
| border-radius: var(--border-radius); | |
| font-weight: bold; | |
| text-decoration: none; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| transition: var(--transition); | |
| border: none; | |
| cursor: pointer; | |
| font-size: 0.9rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: var(--secondary); | |
| } | |
| .btn-primary:hover { | |
| background-color: #e6bc37; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background-color: transparent; | |
| color: var(--primary); | |
| border: 1px solid var(--primary); | |
| } | |
| .btn-secondary:hover { | |
| background-color: rgba(255, 210, 63, 0.1); | |
| } | |
| .btn-danger { | |
| background-color: var(--terminal-error); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background-color: #e64a4a; | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 1.5rem; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| gap: 1rem; | |
| margin-top: 0.5rem; | |
| } | |
| .footer-link { | |
| color: var(--primary); | |
| text-decoration: none; | |
| transition: var(--transition); | |
| } | |
| .footer-link:hover { | |
| color: var(--accent); | |
| text-decoration: underline; | |
| } | |
| /* Responsive adjustments */ | |
| @media (max-width: 768px) { | |
| .terminal-container { | |
| height: 500px; | |
| } | |
| .header-content { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .anycoder-link { | |
| margin-left: 2rem; | |
| } | |
| .action-buttons { | |
| flex-direction: column; | |
| } | |
| .btn { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .terminal-container { | |
| height: 400px; | |
| } | |
| .terminal-body { | |
| padding: 1rem; | |
| } | |
| .command-explanation { | |
| padding: 0.8rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="header-content"> | |
| <a href="#" class="logo"> | |
| <i class="fas fa-terminal logo-icon"></i> | |
| <span class="logo-text">Hugging Face CLI Installer</span> | |
| </a> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link" target="_blank"> | |
| <i class="fas fa-code"></i> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="terminal-container"> | |
| <div class="terminal-header"> | |
| <div class="terminal-title">Terminal - Hugging Face CLI Installation</div> | |
| <div class="terminal-controls"> | |
| <button class="control-btn close" title="Close"></button> | |
| <button class="control-btn minimize" title="Minimize"></button> | |
| <button class="control-btn maximize" title="Maximize"></button> | |
| </div> | |
| </div> | |
| <div class="terminal-body" id="terminal"> | |
| <div class="terminal-output"> | |
| <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> Welcome to the Hugging Face CLI installer | |
| <br><br> | |
| This will install the official Hugging Face command-line interface (CLI) tool. | |
| <br> | |
| The CLI allows you to interact with Hugging Face services directly from your terminal. | |
| </div> | |
| <div class="command-explanation"> | |
| <h3><i class="fas fa-info-circle"></i> About this command</h3> | |
| <p>The command you're about to run:</p> | |
| <p style="color: var(--primary); font-weight: bold; margin: 0.5rem 0;">curl -LsSf https://hf.co/cli/install.sh | bash</p> | |
| <p>Will perform the following actions:</p> | |
| <ul> | |
| <li>Download the installation script from Hugging Face</li> | |
| <li>Execute the script with bash</li> | |
| <li>Install the Hugging Face CLI to your system</li> | |
| <li>Make the <code>huggingface-cli</code> command available globally</li> | |
| </ul> | |
| <p><strong>Note:</strong> This requires curl and bash to be installed on your system.</p> | |
| </div> | |
| <div class="terminal-prompt"> | |
| <span class="prompt-symbol">user@machine</span> | |
| <span style="color: var(--text-secondary);">:~$</span> | |
| <span class="prompt-input" id="command-input"></span> | |
| <span class="typing-cursor" id="cursor"></span> | |
| </div> | |
| <div class="progress-container" id="progress-container" style="display: none;"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progress-fill"></div> | |
| </div> | |
| <div class="status-message" id="status-message">Downloading installation script...</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="action-buttons"> | |
| <button class="btn btn-primary" id="run-btn"> | |
| <i class="fas fa-play"></i> Run Installation | |
| </button> | |
| <button class="btn btn-secondary" id="copy-btn"> | |
| <i class="fas fa-copy"></i> Copy Command | |
| </button> | |
| <button class="btn btn-danger" id="clear-btn"> | |
| <i class="fas fa-eraser"></i> Clear Terminal | |
| </button> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>Hugging Face CLI Installer | Simulated Terminal Interface</p> | |
| <div class="footer-links"> | |
| <a href="https://huggingface.co/docs/huggingface_hub/quick-start" class="footer-link" target="_blank">Documentation</a> | |
| <a href="https://github.com/huggingface/huggingface_hub" class="footer-link" target="_blank">GitHub</a> | |
| <a href="https://huggingface.co/" class="footer-link" target="_blank">Hugging Face</a> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const commandInput = document.getElementById('command-input'); | |
| const cursor = document.getElementById('cursor'); | |
| const terminal = document.getElementById('terminal'); | |
| const runBtn = document.getElementById('run-btn'); | |
| const copyBtn = document.getElementById('copy-btn'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const progressContainer = document.getElementById('progress-container'); | |
| const progressFill = document.getElementById('progress-fill'); | |
| const statusMessage = document.getElementById('status-message'); | |
| const fullCommand = 'curl -LsSf https://hf.co/cli/install.sh | bash'; | |
| let commandIndex = 0; | |
| let isTyping = false; | |
| let isInstalling = false; | |
| // Type the command character by character | |
| function typeCommand() { | |
| if (commandIndex < fullCommand.length) { | |
| commandInput.textContent += fullCommand[commandIndex]; | |
| commandIndex++; | |
| setTimeout(typeCommand, 50); | |
| } else { | |
| isTyping = false; | |
| cursor.style.display = 'none'; | |
| } | |
| } | |
| // Start typing the command | |
| setTimeout(() => { | |
| isTyping = true; | |
| typeCommand(); | |
| }, 1000); | |
| // Run installation simulation | |
| runBtn.addEventListener('click', function() { | |
| if (isInstalling) return; | |
| terminal.innerHTML += ` | |
| <div class="terminal-output"> | |
| <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> ${fullCommand} | |
| </div> | |
| `; | |
| isInstalling = true; | |
| progressContainer.style.display = 'block'; | |
| runBtn.disabled = true; | |
| copyBtn.disabled = true; | |
| clearBtn.disabled = true; | |
| // Simulate installation progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += Math.random() * 5; | |
| if (progress > 100) progress = 100; | |
| progressFill.style.width = `${progress}%`; | |
| if (progress === 100) { | |
| clearInterval(interval); | |
| setTimeout(() => { | |
| // Show success message | |
| terminal.innerHTML += ` | |
| <div class="terminal-output"> | |
| <br> | |
| <span class="success-message">✓ Hugging Face CLI installed successfully!</span> | |
| <br><br> | |
| You can now use the following commands: | |
| <br><br> | |
| <span style="color: var(--primary);">huggingface-cli --help</span> - Show help | |
| <br> | |
| <span style="color: var(--primary);">huggingface-cli login</span> - Log in to your account | |
| <br> | |
| <span style="color: var(--primary);">huggingface-cli whoami</span> - Check your current user | |
| <br><br> | |
| For more information, visit: <span style="color: var(--primary);">https://huggingface.co/docs/huggingface_hub/quick-start</span> | |
| </div> | |
| `; | |
| statusMessage.textContent = 'Installation completed successfully!'; | |
| statusMessage.className = 'status-message success-message'; | |
| // Reset buttons | |
| isInstalling = false; | |
| runBtn.disabled = false; | |
| copyBtn.disabled = false; | |
| clearBtn.disabled = false; | |
| // Scroll to bottom | |
| terminal.scrollTop = terminal.scrollHeight; | |
| }, 500); | |
| } else if (progress < 30) { | |
| statusMessage.textContent = 'Downloading installation script...'; | |
| } else if (progress < 60) { | |
| statusMessage.textContent = 'Verifying script integrity...'; | |
| } else if (progress < 80) { | |
| statusMessage.textContent = 'Installing dependencies...'; | |
| } else { | |
| statusMessage.textContent = 'Finalizing installation...'; | |
| } | |
| // Scroll to bottom | |
| terminal.scrollTop = terminal.scrollHeight; | |
| }, 200); | |
| }); | |
| // Copy command to clipboard | |
| copyBtn.addEventListener('click', function() { | |
| navigator.clipboard.writeText(fullCommand).then(() => { | |
| const originalText = copyBtn.innerHTML; | |
| copyBtn.innerHTML = '<i class="fas fa-check"></i> Copied!'; | |
| copyBtn.classList.replace('btn-secondary', 'btn-primary'); | |
| setTimeout(() => { | |
| copyBtn.innerHTML = originalText; | |
| copyBtn.classList.replace('btn-primary', 'btn-secondary'); | |
| }, 2000); | |
| }); | |
| }); | |
| // Clear terminal | |
| clearBtn.addEventListener('click', function() { | |
| if (isInstalling) return; | |
| terminal.innerHTML = ` | |
| <div class="terminal-output"> | |
| <span style="color: var(--terminal-prompt);">user@machine</span><span style="color: var(--text-secondary);">:~$</span> Terminal cleared. Ready for new commands. | |
| </div> | |
| <div class="terminal-prompt"> | |
| <span class="prompt-symbol">user@machine</span> | |
| <span style="color: var(--text-secondary);">:~$</span> | |
| <span class="prompt-input" id="command-input"></span> | |
| <span class="typing-cursor" id="cursor"></span> | |
| </div> | |
| `; | |
| progressContainer.style.display = 'none'; | |
| progressFill.style.width = '0%'; | |
| statusMessage.textContent = ''; | |
| statusMessage.className = 'status-message'; | |
| // Restart typing animation | |
| commandIndex = 0; | |
| isTyping = true; | |
| cursor.style.display = 'inline-block'; | |
| setTimeout(() => { | |
| typeCommand(); | |
| }, 500); | |
| }); | |
| // Terminal control buttons | |
| document.querySelector('.close').addEventListener('click', function() { | |
| if (confirm('Are you sure you want to close this terminal?')) { | |
| window.close(); | |
| } | |
| }); | |
| document.querySelector('.minimize').addEventListener('click', function() { | |
| // Simulate minimize - just hide the terminal | |
| const terminalContainer = document.querySelector('.terminal-container'); | |
| terminalContainer.style.transform = 'scale(0.9)'; | |
| terminalContainer.style.opacity = '0.5'; | |
| terminalContainer.style.transition = 'all 0.3s ease'; | |
| setTimeout(() => { | |
| terminalContainer.style.transform = ''; | |
| terminalContainer.style.opacity = ''; | |
| }, 2000); | |
| }); | |
| document.querySelector('.maximize').addEventListener('click', function() { | |
| // Simulate maximize - toggle fullscreen | |
| if (!document.fullscreenElement) { | |
| document.documentElement.requestFullscreen().catch(err => { | |
| console.error(`Error attempting to enable fullscreen: ${err.message}`); | |
| }); | |
| } else { | |
| document.exitFullscreen(); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |