Download index.html from GodsDevProject/GLM-4.7-Flash-Deployer: direct link, hf CLI and curl.
- Browser
- Download file 33.4 kB
-
https://huggingface.co/spaces/GodsDevProject/GLM-4.7-Flash-Deployer/resolve/main/index.html
- Command line
-
hf download hf://spaces/GodsDevProject/GLM-4.7-Flash-Deployer/index.html
-
curl -L -o index.html https://huggingface.co/spaces/GodsDevProject/GLM-4.7-Flash-Deployer/resolve/main/index.html
33.4 kB
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>GLM-4.7 Flash Deployment Hub</title> | |
| <meta name="description" content="Deployment interface for GLM-4.7-Flash-Uncensored model"> | |
| <!-- Tailwind CSS for Modern Styling --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- FontAwesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-color: #6366f1; | |
| --accent-color: #8b5cf6; | |
| --dark-bg: #0f172a; | |
| --panel-bg: #1e293b; | |
| --text-color: #e2e8f0; | |
| --success-color: #10b981; | |
| --terminal-font: 'Fira Code', monospace; | |
| } | |
| body { | |
| background-color: var(--dark-bg); | |
| color: var(--text-color); | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| } | |
| .glass-panel { | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5); | |
| } | |
| .text-gradient { | |
| background: linear-gradient(to right, #818cf8, #c084fc); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .code-block { | |
| font-family: var(--terminal-font); | |
| background-color: #000; | |
| border-radius: 8px; | |
| padding: 1rem; | |
| position: relative; | |
| overflow-x: auto; | |
| } | |
| .code-header { | |
| background-color: #2d3748; | |
| padding: 0.5rem 1rem; | |
| border-radius: 8px 8px 0 0; | |
| font-size: 0.85rem; | |
| color: #a0aec0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .terminal-window { | |
| background-color: #0d1117; | |
| border: 1px solid #30363d; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7); | |
| } | |
| .terminal-header { | |
| background-color: #161b22; | |
| padding: 0.75rem; | |
| border-bottom: 1px solid #30363d; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .dot { width: 12px; height: 12px; border-radius: 50%; } | |
| .red { background-color: #ff5f56; } | |
| .yellow { background-color: #ffbd2e; } | |
| .green { background-color: #27c93f; } | |
| .terminal-body { | |
| padding: 1rem; | |
| font-family: var(--terminal-font); | |
| font-size: 0.9rem; | |
| color: #c9d1d9; | |
| min-height: 200px; | |
| } | |
| .cmd-text { color: #7ee787; } | |
| .path-text { color: #58a6ff; } | |
| .output-text { color: #d2a8ff; } | |
| .error-text { color: #ff7b72; } | |
| .success-text { color: #3fb950; } | |
| .loader { | |
| border: 4px solid #f3f3f3; | |
| border-top: 4px solid var(--primary-color); | |
| border-radius: 50%; | |
| width: 24px; | |
| height: 24px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex flex-col"> | |
| <!-- Header / Navbar --> | |
| <nav class="glass-panel sticky top-0 z-50 border-b border-indigo-500/30"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex items-center justify-between h-16"> | |
| <div class="flex items-center gap-3"> | |
| <i class="fa-solid fa-robot text-2xl text-indigo-400"></i> | |
| <div> | |
| <h1 class="text-xl font-bold tracking-tight"> | |
| GLM-4.7 <span class="text-indigo-400">Flash</span> Deployer | |
| </h1> | |
| <p class="text-xs text-gray-400">Uncensored Code & Chat Interface</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center gap-6"> | |
| <a href="#dashboard" class="text-sm font-medium text-gray-300 hover:text-white transition">Dashboard</a> | |
| <a href="#install" class="text-sm font-medium text-gray-300 hover:text-white transition">Installation</a> | |
| <a href="#cloud" class="text-sm font-medium text-gray-300 hover:text-white transition">Cloud Options</a> | |
| <a href="https://huggingface.co/DavidAU/GLM-4.7-Flash-Uncensored-Heretic-NEO-CODE-Imatrix-MAX-GGUF" target="_blank" class="text-sm font-medium text-indigo-400 hover:text-indigo-300 flex items-center gap-2"> | |
| <i class="fa-brands fa-huggingface"></i> Model Hub | |
| </a> | |
| </div> | |
| <!-- Hugging Face Link Requirement --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-xs font-semibold text-gray-500 hover:text-indigo-400 transition flex items-center gap-1"> | |
| <i class="fa-solid fa-link"></i> Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main class="flex-grow container mx-auto px-4 py-8 space-y-12"> | |
| <!-- Hero Section --> | |
| <section id="dashboard" class="text-center space-y-6 py-10"> | |
| <div class="inline-block px-4 py-1 rounded-full bg-indigo-900/30 border border-indigo-500/30 text-indigo-300 text-sm font-medium mb-4"> | |
| Model: GLM-4.7-Flash-Uncensored-Heretic-NEO-CODE | |
| </div> | |
| <h2 class="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight"> | |
| Run the <span class="text-gradient">Ultimate</span> Local AI | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| A comprehensive dashboard to install, configure, and deploy the GLM-4.7 Flash model. | |
| Optimized for GGUF quantization to run efficiently on consumer hardware or cloud instances. | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4 pt-4"> | |
| <a href="#install" class="px-8 py-3 rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white font-bold shadow-lg shadow-indigo-500/30 transition transform hover:scale-105 flex items-center gap-2"> | |
| <i class="fa-solid fa-download"></i> Start Installation | |
| </a> | |
| <a href="#cloud" class="px-8 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 text-white font-bold border border-gray-600 transition transform hover:scale-105 flex items-center gap-2"> | |
| <i class="fa-solid fa-cloud"></i> Cloud Deployment | |
| </a> | |
| </div> | |
| </section> | |
| <!-- System Requirements --> | |
| <section class="grid md:grid-cols-3 gap-6"> | |
| <div class="glass-panel p-6 rounded-xl feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-blue-900/50 flex items-center justify-center mb-4 text-blue-400"> | |
| <i class="fa-solid fa-memory text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">RAM Requirements</h3> | |
| <p class="text-sm text-gray-400"> | |
| The <strong>Imatrix-MAX</strong> version is large. We recommend at least <span class="text-green-400 font-bold">32GB RAM</span> for smooth inference without swapping. | |
| </p> | |
| </div> | |
| <div class="glass-panel p-6 rounded-xl feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-purple-900/50 flex items-center justify-center mb-4 text-purple-400"> | |
| <i class="fa-solid fa-microchip text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">GPU Recommendation</h3> | |
| <p class="text-sm text-gray-400"> | |
| An NVIDIA GPU with <span class="text-green-400 font-bold">8GB+ VRAM</span> (RTX 3060 or better) allows for acceleration via CUDA. | |
| </p> | |
| </div> | |
| <div class="glass-panel p-6 rounded-xl feature-card"> | |
| <div class="w-12 h-12 rounded-lg bg-emerald-900/50 flex items-center justify-center mb-4 text-emerald-400"> | |
| <i class="fa-solid fa-hard-drive text-2xl"></i> | |
| </div> | |
| <h3 class="text-lg font-bold mb-2">Storage</h3> | |
| <p class="text-sm text-gray-400"> | |
| The GGUF model typically ranges between <span class="text-green-400 font-bold">20GB - 40GB</span> depending on the specific quantization (Q4_K_M vs Q8_0). | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Interactive Installation Script Generator --> | |
| <section id="install" class="glass-panel rounded-2xl overflow-hidden"> | |
| <div class="p-6 border-b border-gray-700 bg-gray-900/50 flex justify-between items-center"> | |
| <div> | |
| <h3 class="text-xl font-bold flex items-center gap-2"> | |
| <i class="fa-solid fa-code"></i> Automated Setup Script | |
| </h3> | |
| <p class="text-sm text-gray-400">Generates the command line instructions for KoboldCpp & Ollama</p> | |
| </div> | |
| <button onclick="copyToClipboard()" id="copyBtn" class="px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 text-white text-sm transition flex items-center gap-2"> | |
| <i class="fa-regular fa-copy"></i> Copy to Clipboard | |
| </button> | |
| </div> | |
| <div class="p-8 grid lg:grid-cols-2 gap-8"> | |
| <!-- Configuration Form --> | |
| <div class="space-y-6"> | |
| <h4 class="text-lg font-semibold text-indigo-400 border-b border-gray-700 pb-2">Configuration</h4> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Execution Backend</label> | |
| <select id="backendSelect" class="w-full bg-gray-800 border border-gray-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-indigo-500 focus:outline-none"> | |
| <option value="kobold">KoboldCpp (Local Web UI)</option> | |
| <option value="ollama">Ollama (System Service)</option> | |
| <option value="cmd">Direct CLI (llama.cpp)</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">GPU Acceleration</label> | |
| <div class="flex gap-4"> | |
| <label class="flex items-center gap-2 text-gray-300 cursor-pointer"> | |
| <input type="radio" name="gpu" value="cpu" checked class="text-indigo-600 focus:ring-indigo-500"> | |
| <span>CPU Only (Slower)</span> | |
| </label> | |
| <label class="flex items-center gap-2 text-gray-300 cursor-pointer"> | |
| <input type="radio" name="gpu" value="cuda" class="text-indigo-600 focus:ring-indigo-500"> | |
| <span>NVIDIA (CUDA)</span> | |
| </label> | |
| <label class="flex items-center gap-2 text-gray-300 cursor-pointer"> | |
| <input type="radio" name="gpu" value="metal" class="text-indigo-600 focus:ring-indigo-500"> | |
| <span>Apple Silicon (Metal)</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-300 mb-2">Threads (CPU Cores)</label> | |
| <input type="range" id="threadSlider" min="1" max="32" value="8" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-indigo-500"> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>1 Thread</span> | |
| <span id="threadValue" class="text-indigo-400 font-bold">8 Threads</span> | |
| <span>32 Threads</span> | |
| </div> | |
| </div> | |
| <div class="bg-indigo-900/20 p-4 rounded-lg border border-indigo-500/20"> | |
| <h5 class="text-sm font-bold text-indigo-300 mb-2"><i class="fa-solid fa-circle-info"></i> Note on Imatrix-MAX</h5> | |
| <p class="text-xs text-gray-400"> | |
| The "Imatrix-MAX" version implies an optimized quantization matrix. Ensure you download the specific <code>.gguf</code> file from the HuggingFace link provided. The script below assumes standard GGUF loading. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Code Output --> | |
| <div class="relative"> | |
| <div class="terminal-window"> | |
| <div class="terminal-header"> | |
| <div class="dot red"></div> | |
| <div class="dot yellow"></div> | |
| <div class="dot green"></div> | |
| <span class="text-xs text-gray-400 ml-2">root@server:~/glm-deploy</span> | |
| </div> | |
| <div class="terminal-body" id="codeOutput"> | |
| <div class="mb-2"> | |
| <span class="path-text">~</span> | |
| <span class="text-white"> $ </span> | |
| <span class="cmd-text"># Initializing GLM-4.7 Flash Setup...</span> | |
| </div> | |
| <div id="scriptContent"> | |
| <div class="mb-2"> | |
| <span class="path-text">~</span> | |
| <span class="text-white"> $ </span> | |
| <span class="cmd-text">git clone https://github.com/ggerganov/llama.cpp</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="path-text">~</span> | |
| <span class="text-white"> $ </span> | |
| <span class="cmd-text">cd llama.cpp && make</span> | |
| </div> | |
| <div class="mb-2"> | |
| <span class="path-text">~/llama.cpp</span> | |
| <span class="text-white"> $ </span> | |
| <span class="cmd-text">./llama-server</span> | |
| <span class="text-gray-500"> \</span> | |
| </div> | |
| <div class="mb-2 ml-4"> | |
| <span class="text-gray-500"> --model ./models/glm-4.7-flash-uncensored.Q4_K_M.gguf</span> | |
| </div> | |
| <div class="mb-2 ml-4"> | |
| <span class="text-gray-500"> --n_ctx 4096 --n_gpu_layers 35</span> | |
| </div> | |
| <div class="mb-2 ml-4"> | |
| <span class="text-gray-500"> --port 8080 --host 0.0.0.0</span> | |
| </div> | |
| <div class="mt-4"> | |
| <span class="success-text">[INFO] Server starting on http://localhost:8080</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 text-xs text-gray-500 text-center"> | |
| * Adjust <code>--n_gpu_layers</code> based on your VRAM capacity. | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cloud Deployment Guide --> | |
| <section id="cloud" class="space-y-8"> | |
| <div class="text-center"> | |
| <h2 class="text-3xl font-bold">Cloud Deployment Options</h2> | |
| <p class="text-gray-400 mt-2">Running this model in the cloud requires instances with high RAM and VRAM.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <!-- Option 1: RunPod --> | |
| <div class="glass-panel p-6 rounded-xl border-t-4 border-pink-500 flex flex-col justify-between hover:border-pink-400 transition"> | |
| <div> | |
| <div class="w-10 h-10 rounded bg-pink-900/30 flex items-center justify-center text-pink-400 mb-4"> | |
| <i class="fa-solid fa-cloud-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">RunPod</h3> | |
| <p class="text-sm text-gray-400 mb-4"> | |
| Best for short bursts. Use an A100 or H100 pod. Upload your GGUF file to Pod Storage and run the server. | |
| </p> | |
| <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-pink-300 mb-4"> | |
| nvidia-a100-80gb | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-gray-500"> | |
| <i class="fa-solid fa-check text-green-500"></i> Pay per second | |
| </div> | |
| </div> | |
| <a href="https://runpod.io" target="_blank" class="mt-4 w-full text-center py-2 rounded bg-pink-600 hover:bg-pink-700 text-white text-sm font-medium transition"> | |
| Launch Pod | |
| </a> | |
| </div> | |
| <!-- Option 2: Vast.ai --> | |
| <div class="glass-panel p-6 rounded-xl border-t-4 border-orange-500 flex flex-col justify-between hover:border-orange-400 transition"> | |
| <div> | |
| <div class="w-10 h-10 rounded bg-orange-900/30 flex items-center justify-center text-orange-400 mb-4"> | |
| <i class="fa-solid fa-server"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Vast.ai</h3> | |
| <p class="text-sm text-gray-400 mb-4"> | |
| Marketplaces for GPU instances. Look for "RTX 4090" or "A100 80GB" instances. Very cost-effective. | |
| </p> | |
| <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-orange-300 mb-4"> | |
| 96GB RAM + 24GB VRAM | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-gray-500"> | |
| <i class="fa-solid fa-check text-green-500"></i> Bid/On-demand options | |
| </div> | |
| </div> | |
| <a href="https://vast.ai" target="_blank" class="mt-4 w-full text-center py-2 rounded bg-orange-600 hover:bg-orange-700 text-white text-sm font-medium transition"> | |
| Browse Instances | |
| </a> | |
| </div> | |
| <!-- Option 3: Lambda Labs --> | |
| <div class="glass-panel p-6 rounded-xl border-t-4 border-blue-500 flex flex-col justify-between hover:border-blue-400 transition"> | |
| <div> | |
| <div class="w-10 h-10 rounded bg-blue-900/30 flex items-center justify-center text-blue-400 mb-4"> | |
| <i class="fa-solid faRocket"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2">Lambda Labs</h3> | |
| <p class="text-sm text-gray-400 mb-4"> | |
| User-friendly interface. Good for A10s and H100s. Easy to set up SSH and transfer models. | |
| </p> | |
| <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-blue-300 mb-4"> | |
| H100 80GB or A100 40/80GB | |
| </div> | |
| <div class="flex items-center gap-2 text-xs text-gray-500"> | |
| <i class="fa-solid fa-check text-green-500"></i> Flat rate pricing | |
| </div> | |
| </div> | |
| <a href="https://lambdalabs.com" target="_blank" class="mt-4 w-full text-center py-2 rounded bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium transition"> | |
| Get API Key | |
| </a> | |
| </div> | |
| </div> | |
| <div class="glass-panel p-6 rounded-xl bg-gradient-to-r from-gray-900 to-gray-800 border border-gray-700"> | |
| <h3 class="text-lg font-bold text-white mb-4"><i class="fa-solid fa-list-check"></i> Quick Cloud Setup Checklist</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start gap-3"> | |
| <div class="mt-1 w-5 h-5 rounded-full bg-green-900 flex items-center justify-center text-green-400 text-xs"><i class="fa-solid fa-check"></i></div> | |
| <div> | |
| <span class="font-bold text-gray-200">Select Instance:</span> | |
| <span class="text-gray-400 text-sm"> Ensure instance has > 32GB System RAM AND > 16GB VRAM for the Imatrix-MAX version.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <div class="mt-1 w-5 h-5 rounded-full bg-green-900 flex items-center justify-center text-green-400 text-xs"><i class="fa-solid fa-check"></i></div> | |
| <div> | |
| <span class="font-bold text-gray-200">Download Model:</span> | |
| <span class="text-gray-400 text-sm"> Use `wget` or `huggingface-cli` on the cloud instance to download the GGUF file directly to storage.</span> | |
| </div> | |
| </li> | |
| <li class="flex items-start gap-3"> | |
| <div class="mt-1 w-5 h-5 rounded-full bg-green-900 flex items-center justify-center text-green-400 text-xs"><i class="fa-solid fa-check"></i></div> | |
| <div> | |
| <span class="font-bold text-gray-200">Start Server:</span> | |
| <span class="text-gray-400 text-sm"> Run the `llama-server` command with `--host 0.0.0.0` to allow external web access.</span> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="border-t border-gray-800 pt-8 pb-4 text-center"> | |
| <div class="flex items-center justify-center gap-2 mb-4 opacity-70"> | |
| <i class="fa-solid fa-robot text-indigo-500"></i> | |
| <span class="font-semibold text-gray-400">GLM-4.7 Flash Deployer</span> | |
| </div> | |
| <p class="text-sm text-gray-600"> | |
| This tool is a UI helper for deploying open-source AI models. | |
| Please ensure you comply with the model's license agreement. | |
| </p> | |
| <div class="mt-4 text-xs text-gray-700"> | |
| © <span id="year"></span> AI Deployment Tools. All rights reserved. | |
| </div> | |
| </footer> | |
| </main> | |
| <!-- Logic --> | |
| <script> | |
| </script> | |
| </body> | |
| </html> |