|
|
<!DOCTYPE html> |
|
|
<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"> |
|
|
|
|
|
|
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 class="flex-grow container mx-auto px-4 py-8 space-y-12"> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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 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> |
|
|
|
|
|
|
|
|
<script> |
|
|
// Update Year |
|
|
document.getElementById('year').textContent = new Date().getFullYear(); |
|
|
|
|
|
// Thread Slider Logic |
|
|
const slider = document.getElementById('threadSlider'); |
|
|
const threadValue = document.getElementById('threadValue'); |
|
|
|
|
|
slider.addEventListener('input', function() { |
|
|
threadValue.textContent = this.value + " Threads"; |
|
|
updateScript(); |
|
|
}); |
|
|
|
|
|
// Backend Selection Logic |
|
|
const backendSelect = document.getElementById('backendSelect'); |
|
|
|
|
|
backendSelect.addEventListener('change', updateScript); |
|
|
|
|
|
// GPU Selection Logic |
|
|
const gpuRadios = document.querySelectorAll('input[name="gpu"]'); |
|
|
gpuRadios.forEach(radio => { |
|
|
radio.addEventListener('change', updateScript); |
|
|
}); |
|
|
|
|
|
function updateScript() { |
|
|
const backend = backendSelect.value; |
|
|
const threads = slider.value; |
|
|
const gpu = document.querySelector('input[name="gpu"]:checked').value; |
|
|
const outputDiv = document.getElementById('scriptContent'); |
|
|
|
|
|
let scriptHTML = ''; |
|
|
|
|
|
if (backend === 'kobold') { |
|
|
scriptHTML = ` |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">git clone https://github.com/LostRuins/koboldcpp.git</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">cd koboldcpp</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~/koboldcpp</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">mkdir -p models</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~/koboldcpp/models</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text"># Place your GLM-4.7-Flash-Q4_K_M.gguf here</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~/koboldcpp</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">python3 koboldcpp.py</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"> --contextsize ${threads * 512} --threads ${threads}</span> |
|
|
</div> |
|
|
<div class="mb-2 ml-4"> |
|
|
<span class="text-gray-500"> --port 5001 --host 0.0.0.0</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="success-text">[INFO] KoboldAI UI ready at http://localhost:5001</span> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
else if (backend === 'ollama') { |
|
|
scriptHTML = ` |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">curl -fsSL https://ollama.com/install.sh | sh</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">ollama pull nomic-ai/gpt4all-falcon</span> |
|
|
<span class="text-gray-500">/* Fallback if direct GLM pull fails */</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">ollama create glm-4-flash -f Modelfile</span> |
|
|
</div> |
|
|
<div class="mb-2 bg-gray-800 p-3 rounded border-l-4 border-yellow-500"> |
|
|
<span class="text-xs text-gray-400 block mb-1"># Create a Modelfile:</span> |
|
|
<span class="text-xs text-white">FROM glm-4.7-flash-uncensored.Q4_K_M.gguf</span> |
|
|
<span class="text-xs text-white">PARAMETER num_thread ${threads}</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="success-text">[SUCCESS] Model loaded into Ollama. Run 'ollama run glm-4-flash'</span> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
else { |
|
|
// Direct CLI |
|
|
scriptHTML = ` |
|
|
<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">mkdir -p models</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~/llama.cpp/models</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text"># Download GLM-4.7-Flash-Q4_K_M.gguf here</span> |
|
|
</div> |
|
|
<div class="mb-2"> |
|
|
<span class="path-text">~/llama.cpp</span> |
|
|
<span class="text-white"> $ </span> |
|
|
<span class="cmd-text">./main</span> |
|
|
<span class="text-gray-500"> \</span> |
|
|
</div> |
|
|
<div class="mb-2 ml-4"> |
|
|
<span class="text-gray-500"> -m models/glm-4.7-flash-uncensored.Q4_K_M.gguf</span> |
|
|
</div> |
|
|
<div class="mb-2 ml-4"> |
|
|
<span class="text-gray-500"> -n 512 --repeat_penalty 1.1</span> |
|
|
</div> |
|
|
<div class="mb-2 ml-4"> |
|
|
<span class="text-gray-500"> -c ${threads * 512} -t ${threads} -b 1</span> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<span class="success-text">[INFO] Entering interactive mode. Type 'exit' to quit.</span> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
// GPU Specific Flags |
|
|
if (gpu === 'cuda') { |
|
|
// Insert GPU flag logic roughly by appending to relevant lines or adding a new block |
|
|
// For simplicity in this template, we just update the text in the script |
|
|
const tempDiv = document.createElement('div'); |
|
|
tempDiv.innerHTML = scriptHTML; |
|
|
// Simple replacement logic based on backend would be complex, so we stick to generic output |
|
|
// In a real app, we'd inject --n_gpu_layers based on backend |
|
|
if (backend === 'kobold') { |
|
|
scriptHTML = scriptHTML.replace('--port 5001', '--port 5001 --gpu_layer_count 35'); |
|
|
} else if (backend === 'cmd') { |
|
|
scriptHTML = scriptHTML.replace('-t ' + threads, `-t ${threads} -ngl 35`); |
|
|
} |
|
|
} |
|
|
|
|
|
outputDiv.innerHTML = scriptHTML; |
|
|
} |
|
|
|
|
|
function copyToClipboard() { |
|
|
const codeElement = document.getElementById('scriptContent'); |
|
|
const textToCopy = codeElement.innerText; |
|
|
|
|
|
navigator.clipboard.writeText(textToCopy).then(() => { |
|
|
const btn = document.getElementById('copyBtn'); |
|
|
const originalText = btn.innerHTML; |
|
|
btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!'; |
|
|
btn.classList.remove('bg-gray-700'); |
|
|
btn.classList.add('bg-green-600'); |
|
|
|
|
|
setTimeout(() => { |
|
|
btn.innerHTML = originalText; |
|
|
btn.classList.add('bg-gray-700'); |
|
|
btn.classList.remove('bg-green-600'); |
|
|
}, 3000); |
|
|
}).catch(err => { |
|
|
console.error('Failed to copy: ', err); |
|
|
}); |
|
|
} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
