Spaces:

sky-meilin
/

anycoder-e9eabbf7

Running

App Files Files Community

sky-meilin commited on Mar 16

Commit

3d4227c

verified ·

1 Parent(s): 3583857

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +464 -19

index.html CHANGED Viewed

@@ -1,19 +1,464 @@
-<!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 CLI Connection Generator</title>
+    <!-- Import FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-color: #0f172a;
+            --card-bg: #1e293b;
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
+            --accent-color: #6366f1; /* Indigo */
+            --accent-glow: #818cf8;
+            --hf-pink: #ff007a;
+            --hf-blue: #2b2d31;
+            --terminal-bg: #000000;
+            --terminal-text: #00ff00;
+            --font-main: 'Inter', system-ui, sans-serif;
+            --font-mono: 'Fira Code', 'Courier New', monospace;
+        }
+        * {
+            box-sizing: box-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-primary);
+            font-family: var(--font-main);
+            line-height: 1.6;
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+            overflow-x: hidden;
+        }
+        /* Header & Navigation */
+        header {
+            padding: 20px 40px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .brand {
+            font-weight: 700;
+            font-size: 1.2rem;
+            color: var(--text-primary);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .brand i {
+            color: var(--hf-pink);
+        }
+        .anycoder-link {
+            text-decoration: none;
+            color: var(--text-secondary);
+            font-size: 0.9rem;
+            transition: color 0.3s ease;
+            border: 1px solid rgba(255,255,255,0.2);
+            padding: 5px 15px;
+            border-radius: 8px;
+        }
+        .anycoder-link:hover {
+            color: var(--accent-glow);
+            border-color: var(--accent-glow);
+            background: rgba(63, 66, 151, 0.1);
+        }
+        /* Main Layout */
+        main {
+            flex: 1;
+            padding: 40px;
+            max-width: 1200px;
+            width: 100%;
+            margin: 0 auto;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 40px;
+            align-items: center;
+        }
+        @media (max-width: 900px) {
+            main {
+                grid-template-columns: 1fr;
+                padding: 20px;
+            }
+        }
+        /* Content Section */
+        .content-section {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        h1 {
+            font-size: 3rem;
+            line-height: 1.1;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, #fff, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        p.subtitle {
+            color: var(--text-secondary);
+            font-size: 1.1rem;
+            max-width: 500px;
+        }
+        /* Code Generator Card */
+        .card {
+            background: var(--card-bg);
+            border-radius: 16px;
+            padding: 30px;
+            border: 1px solid rgba(255,255,255,0.05);
+            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
+            position: relative;
+            overflow: hidden;
+        }
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 4px;
+            background: linear-gradient(90deg, var(--hf-pink), var(--accent-color));
+        }
+        .step-container {
+            margin-bottom: 30px;
+        }
+        .step-title {
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            color: var(--accent-glow);
+            margin-bottom: 10px;
+            font-weight: 600;
+        }
+        /* Terminal Simulation */
+        .terminal-window {
+            background: var(--terminal-bg);
+            border-radius: 8px;
+            padding: 15px;
+            font-family: var(--font-mono);
+            font-size: 0.9rem;
+            box-shadow: inset 0 0 10px rgba(255,255,255,0.05);
+            position: relative;
+            transition: transform 0.2s ease;
+        }
+        .terminal-window:hover {
+            transform: translateY(-2px);
+        }
+        .cmd-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+            padding-bottom: 10px;
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+        }
+        .cmd-row:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+        }
+        .cmd-text {
+            color: var(--terminal-text);
+            flex: 1;
+            word-break: break-all;
+        }
+        .copy-btn {
+            background: transparent;
+            border: 1px solid rgba(255,255,255,0.2);
+            color: var(--text-secondary);
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        .copy-btn:hover {
+            background: rgba(255,255,255,0.1);
+            color: var(--text-primary);
+        }
+        .copy-btn.copied {
+            color: var(--accent-color);
+            border-color: var(--accent-color);
+        }
+        /* Interactive Input */
+        .input-group {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+        }
+        input[type="text"] {
+            background: rgba(0,0,0,0.3);
+            border: 1px solid rgba(255,255,255,0.1);
+            color: var(--text-primary);
+            padding: 10px;
+            border-radius: 6px;
+            flex: 1;
+            font-family: var(--font-mono);
+            outline: none;
+        }
+        input[type="text"]:focus {
+            border-color: var(--accent-color);
+        }
+        .generate-btn {
+            background: var(--accent-color);
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background 0.3s;
+        }
+        .generate-btn:hover {
+            background: var(--accent-glow);
+        }
+        /* Explanation List */
+        .info-list {
+            list-style: none;
+        }
+        .info-list li {
+            padding: 10px 0;
+            display: flex;
+            align-items: start;
+            gap: 10px;
+            color: var(--text-secondary);
+        }
+        .info-list li i {
+            color: var(--accent-color);
+            margin-top: 4px;
+        }
+        /* Footer */
+        footer {
+            padding: 20px;
+            text-align: center;
+            color: var(--text-secondary);
+            font-size: 0.8rem;
+            border-top: 1px solid rgba(255,255,255,0.05);
+        }
+        /* Animations */
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(63, 66, 151, 0.4); }
+            70% { box-shadow: 0 0 0 10px rgba(63, 66, 151, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(63, 66, 151, 0); }
+        }
+        .status-dot {
+            width: 10px;
+            height: 10px;
+            background: var(--terminal-text);
+            border-radius: 50%;
+            display: inline-block;
+            animation: pulse 2s infinite;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="brand">
+            <i class="fa-brands fa-robot"></i> HF CLI Generator
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-link">Built with anycoder</a>
+    </header>
+    <main>
+        <div class="content-section">
+            <h1>Connect to Hugging Face</h1>
+            <p class="subtitle">Generate the necessary terminal commands to authenticate your environment with the Hugging Face Hub API.</p>
+            <ul class="info-list">
+                <li>
+                    <i class="fa-solid fa-terminal"></i>
+                    <span>Installs the <code>huggingface_hub</code> python library.</span>
+                </li>
+                <li>
+                    <i class="fa-solid fa-key"></i>
+                    <span>Securely stores your Access Token in local config.</span>
+                </li>
+                <li>
+                    <i class="fa-solid fa-check"></i>
+                    <span>Verifies your login status immediately.</span>
+                </li>
+            </ul>
+        </div>
+        <div class="card">
+            <div class="step-container">
+                <div class="step-title">Step 1: Installation</div>
+                <div class="terminal-window">
+                    <div class="cmd-row">
+                        <span class="cmd-text">pip install huggingface_hub</span>
+                        <button class="copy-btn" onclick="copyToClipboard('pip install huggingface_hub')">
+                            <i class="fa-regular fa-copy"></i> Copy
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="step-container">
+                <div class="step-title">Step 2: Authentication</div>
+                <div class="terminal-window">
+                    <div class="cmd-row">
+                        <span class="cmd-text">huggingface-cli login</span>
+                        <button class="copy-btn" onclick="copyToClipboard('huggingface-cli login')">
+                            <i class="fa-regular fa-copy"></i> Copy
+                        </button>
+                    </div>
+                    <p style="color: #666; font-size: 0.8rem; margin-top: 5px;">
+                        <span class="status-dot"></span> This command will prompt you to paste your HF Token.
+                    </p>
+                </div>
+            </div>
+            <div class="step-container">
+                <div class="step-title">Step 3: Verification</div>
+                <div class="terminal-window">
+                    <div class="cmd-row">
+                        <span class="cmd-text">huggingface-cli whoami</span>
+                        <button class="copy-btn" onclick="copyToClipboard('huggingface-cli whoami')">
+                            <i class="fa-regular fa-copy"></i> Copy
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="step-container">
+                <div class="step-title">Optional: Custom Token</div>
+                <div class="input-group">
+                    <input type="text" id="tokenInput" placeholder="Paste HF_TOKEN here...">
+                    <button class="generate-btn" onclick="generateTokenCmd()">Generate</button>
+                </div>
+                <div id="tokenCmdOutput" style="margin-top: 10px; display: none;">
+                    <div class="terminal-window">
+                        <div class="cmd-row">
+                            <span class="cmd-text" id="finalCmd"></span>
+                            <button class="copy-btn" onclick="copyCmdFromOutput()">
+                                <i class="fa-regular fa-copy"></i> Copy
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+    <footer>
+        &copy; 2023 HF CLI Helper. Designed for Developers.
+    </footer>
+    <script>
+        // Function to handle copying text to clipboard
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => {
+                // Find the button that was clicked (we need to pass the event or find it differently)
+                // Since we are calling from onclick, we can't easily target the specific button inside the function without refactoring.
+                // Let's use a generic alert for simplicity in this single file, or better, visual feedback.
+                // Visual feedback implementation
+                const buttons = document.querySelectorAll('.copy-btn');
+                buttons.forEach(btn => {
+                    if(btn.innerText.includes('Copy')) {
+                        // Reset all first
+                        btn.classList.remove('copied');
+                        btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
+                    }
+                });
+                // Find the specific button clicked based on the text matched (rough logic)
+                // A better approach for this specific UI:
+                const eventTarget = document.activeElement;
+                if(eventTarget && eventTarget.classList.contains('copy-btn')) {
+                    eventTarget.classList.add('copied');
+                    eventTarget.innerHTML = '<i class="fa-solid fa-check"></i> Copied';
+                    setTimeout(() => {
+                        eventTarget.classList.remove('copied');
+                        eventTarget.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
+                    }, 2000);
+                }
+            }).catch(err => {
+                console.error('Failed to copy: ', err);
+            });
+        }
+        // Function to generate the token command
+        function generateTokenCmd() {
+            const token = document.getElementById('tokenInput').value.trim();
+            const outputDiv = document.getElementById('tokenCmdOutput');
+            const cmdSpan = document.getElementById('finalCmd');
+            if (!token) {
+                alert("Please enter a token first.");
+                return;
+            }
+            const command = `huggingface-cli login --token ${token}`;
+            cmdSpan.textContent = command;
+            outputDiv.style.display = 'block';
+            // Auto copy logic could be added here, but let's let the user click copy
+        }
+        function copyCmdFromOutput() {
+            const text = document.getElementById('finalCmd').textContent;
+            copyToClipboard(text);
+            // Specific visual feedback for the generated button
+            const btn = document.querySelector('#tokenCmdOutput .copy-btn');
+            if(btn) {
+                btn.classList.add('copied');
+                btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied';
+                setTimeout(() => {
+                    btn.classList.remove('copied');
+                    btn.innerHTML = '<i class="fa-regular fa-copy"></i> Copy';
+                }, 2000);
+            }
+        }
+    </script>
+</body>
+</html>