Spaces:

sky-meilin
/

anycoder-45b19938

Running

App Files Files Community

sky-meilin commited on Dec 13, 2025

Commit

5cf675c

verified ·

1 Parent(s): accbfa2

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +694 -19

index.html CHANGED Viewed

@@ -1,19 +1,694 @@
-<!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>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>