Hugging Face's logo

Spaces:
GodsDevProject
/
GLM-4.7-Flash-Deployer
Running

App Files Community
w33zybaby commited on
Commit
e177f71
·
verified ·
1 Parent(s): bd73d45

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +639 -19
index.html CHANGED
@@ -1,19 +1,639 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GLM-4.7 Flash Deployment Hub</title>
7
+ <meta name="description" content="Deployment interface for GLM-4.7-Flash-Uncensored model">
8
+
9
+ <!-- Tailwind CSS for Modern Styling -->
10
+ <script src="https://cdn.tailwindcss.com"></script>
11
+
12
+ <!-- FontAwesome for Icons -->
13
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
14
+
15
+ <!-- Google Fonts -->
16
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Fira+Code:wght@400;600&display=swap" rel="stylesheet">
17
+
18
+ <style>
19
+ :root {
20
+ --primary-color: #6366f1;
21
+ --accent-color: #8b5cf6;
22
+ --dark-bg: #0f172a;
23
+ --panel-bg: #1e293b;
24
+ --text-color: #e2e8f0;
25
+ --success-color: #10b981;
26
+ --terminal-font: 'Fira Code', monospace;
27
+ }
28
+
29
+ body {
30
+ background-color: var(--dark-bg);
31
+ color: var(--text-color);
32
+ font-family: 'Inter', sans-serif;
33
+ line-height: 1.6;
34
+ }
35
+
36
+ .glass-panel {
37
+ background: rgba(30, 41, 59, 0.7);
38
+ backdrop-filter: blur(10px);
39
+ border: 1px solid rgba(255, 255, 255, 0.1);
40
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
41
+ }
42
+
43
+ .text-gradient {
44
+ background: linear-gradient(to right, #818cf8, #c084fc);
45
+ -webkit-background-clip: text;
46
+ -webkit-text-fill-color: transparent;
47
+ }
48
+
49
+ .code-block {
50
+ font-family: var(--terminal-font);
51
+ background-color: #000;
52
+ border-radius: 8px;
53
+ padding: 1rem;
54
+ position: relative;
55
+ overflow-x: auto;
56
+ }
57
+
58
+ .code-header {
59
+ background-color: #2d3748;
60
+ padding: 0.5rem 1rem;
61
+ border-radius: 8px 8px 0 0;
62
+ font-size: 0.85rem;
63
+ color: #a0aec0;
64
+ display: flex;
65
+ justify-content: space-between;
66
+ align-items: center;
67
+ }
68
+
69
+ .terminal-window {
70
+ background-color: #0d1117;
71
+ border: 1px solid #30363d;
72
+ border-radius: 12px;
73
+ overflow: hidden;
74
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.7);
75
+ }
76
+
77
+ .terminal-header {
78
+ background-color: #161b22;
79
+ padding: 0.75rem;
80
+ border-bottom: 1px solid #30363d;
81
+ display: flex;
82
+ gap: 8px;
83
+ }
84
+
85
+ .dot { width: 12px; height: 12px; border-radius: 50%; }
86
+ .red { background-color: #ff5f56; }
87
+ .yellow { background-color: #ffbd2e; }
88
+ .green { background-color: #27c93f; }
89
+
90
+ .terminal-body {
91
+ padding: 1rem;
92
+ font-family: var(--terminal-font);
93
+ font-size: 0.9rem;
94
+ color: #c9d1d9;
95
+ min-height: 200px;
96
+ }
97
+
98
+ .cmd-text { color: #7ee787; }
99
+ .path-text { color: #58a6ff; }
100
+ .output-text { color: #d2a8ff; }
101
+ .error-text { color: #ff7b72; }
102
+ .success-text { color: #3fb950; }
103
+
104
+ .loader {
105
+ border: 4px solid #f3f3f3;
106
+ border-top: 4px solid var(--primary-color);
107
+ border-radius: 50%;
108
+ width: 24px;
109
+ height: 24px;
110
+ animation: spin 1s linear infinite;
111
+ }
112
+
113
+ @keyframes spin {
114
+ 0% { transform: rotate(0deg); }
115
+ 100% { transform: rotate(360deg); }
116
+ }
117
+
118
+ .feature-card:hover {
119
+ transform: translateY(-5px);
120
+ transition: all 0.3s ease;
121
+ }
122
+ </style>
123
+ </head>
124
+ <body class="min-h-screen flex flex-col">
125
+
126
+ <!-- Header / Navbar -->
127
+ <nav class="glass-panel sticky top-0 z-50 border-b border-indigo-500/30">
128
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
129
+ <div class="flex items-center justify-between h-16">
130
+ <div class="flex items-center gap-3">
131
+ <i class="fa-solid fa-robot text-2xl text-indigo-400"></i>
132
+ <div>
133
+ <h1 class="text-xl font-bold tracking-tight">
134
+ GLM-4.7 <span class="text-indigo-400">Flash</span> Deployer
135
+ </h1>
136
+ <p class="text-xs text-gray-400">Uncensored Code & Chat Interface</p>
137
+ </div>
138
+ </div>
139
+
140
+ <div class="hidden md:flex items-center gap-6">
141
+ <a href="#dashboard" class="text-sm font-medium text-gray-300 hover:text-white transition">Dashboard</a>
142
+ <a href="#install" class="text-sm font-medium text-gray-300 hover:text-white transition">Installation</a>
143
+ <a href="#cloud" class="text-sm font-medium text-gray-300 hover:text-white transition">Cloud Options</a>
144
+ <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">
145
+ <i class="fa-brands fa-huggingface"></i> Model Hub
146
+ </a>
147
+ </div>
148
+
149
+ <!-- Hugging Face Link Requirement -->
150
+ <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">
151
+ <i class="fa-solid fa-link"></i> Built with anycoder
152
+ </a>
153
+ </div>
154
+ </div>
155
+ </nav>
156
+
157
+ <!-- Main Content -->
158
+ <main class="flex-grow container mx-auto px-4 py-8 space-y-12">
159
+
160
+ <!-- Hero Section -->
161
+ <section id="dashboard" class="text-center space-y-6 py-10">
162
+ <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">
163
+ Model: GLM-4.7-Flash-Uncensored-Heretic-NEO-CODE
164
+ </div>
165
+ <h2 class="text-4xl md:text-6xl font-extrabold tracking-tight leading-tight">
166
+ Run the <span class="text-gradient">Ultimate</span> Local AI
167
+ </h2>
168
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
169
+ A comprehensive dashboard to install, configure, and deploy the GLM-4.7 Flash model.
170
+ Optimized for GGUF quantization to run efficiently on consumer hardware or cloud instances.
171
+ </p>
172
+
173
+ <div class="flex flex-wrap justify-center gap-4 pt-4">
174
+ <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">
175
+ <i class="fa-solid fa-download"></i> Start Installation
176
+ </a>
177
+ <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">
178
+ <i class="fa-solid fa-cloud"></i> Cloud Deployment
179
+ </a>
180
+ </div>
181
+ </section>
182
+
183
+ <!-- System Requirements -->
184
+ <section class="grid md:grid-cols-3 gap-6">
185
+ <div class="glass-panel p-6 rounded-xl feature-card">
186
+ <div class="w-12 h-12 rounded-lg bg-blue-900/50 flex items-center justify-center mb-4 text-blue-400">
187
+ <i class="fa-solid fa-memory text-2xl"></i>
188
+ </div>
189
+ <h3 class="text-lg font-bold mb-2">RAM Requirements</h3>
190
+ <p class="text-sm text-gray-400">
191
+ 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.
192
+ </p>
193
+ </div>
194
+ <div class="glass-panel p-6 rounded-xl feature-card">
195
+ <div class="w-12 h-12 rounded-lg bg-purple-900/50 flex items-center justify-center mb-4 text-purple-400">
196
+ <i class="fa-solid fa-microchip text-2xl"></i>
197
+ </div>
198
+ <h3 class="text-lg font-bold mb-2">GPU Recommendation</h3>
199
+ <p class="text-sm text-gray-400">
200
+ An NVIDIA GPU with <span class="text-green-400 font-bold">8GB+ VRAM</span> (RTX 3060 or better) allows for acceleration via CUDA.
201
+ </p>
202
+ </div>
203
+ <div class="glass-panel p-6 rounded-xl feature-card">
204
+ <div class="w-12 h-12 rounded-lg bg-emerald-900/50 flex items-center justify-center mb-4 text-emerald-400">
205
+ <i class="fa-solid fa-hard-drive text-2xl"></i>
206
+ </div>
207
+ <h3 class="text-lg font-bold mb-2">Storage</h3>
208
+ <p class="text-sm text-gray-400">
209
+ 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).
210
+ </p>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Interactive Installation Script Generator -->
215
+ <section id="install" class="glass-panel rounded-2xl overflow-hidden">
216
+ <div class="p-6 border-b border-gray-700 bg-gray-900/50 flex justify-between items-center">
217
+ <div>
218
+ <h3 class="text-xl font-bold flex items-center gap-2">
219
+ <i class="fa-solid fa-code"></i> Automated Setup Script
220
+ </h3>
221
+ <p class="text-sm text-gray-400">Generates the command line instructions for KoboldCpp & Ollama</p>
222
+ </div>
223
+ <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">
224
+ <i class="fa-regular fa-copy"></i> Copy to Clipboard
225
+ </button>
226
+ </div>
227
+
228
+ <div class="p-8 grid lg:grid-cols-2 gap-8">
229
+ <!-- Configuration Form -->
230
+ <div class="space-y-6">
231
+ <h4 class="text-lg font-semibold text-indigo-400 border-b border-gray-700 pb-2">Configuration</h4>
232
+
233
+ <div>
234
+ <label class="block text-sm font-medium text-gray-300 mb-2">Execution Backend</label>
235
+ <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">
236
+ <option value="kobold">KoboldCpp (Local Web UI)</option>
237
+ <option value="ollama">Ollama (System Service)</option>
238
+ <option value="cmd">Direct CLI (llama.cpp)</option>
239
+ </select>
240
+ </div>
241
+
242
+ <div>
243
+ <label class="block text-sm font-medium text-gray-300 mb-2">GPU Acceleration</label>
244
+ <div class="flex gap-4">
245
+ <label class="flex items-center gap-2 text-gray-300 cursor-pointer">
246
+ <input type="radio" name="gpu" value="cpu" checked class="text-indigo-600 focus:ring-indigo-500">
247
+ <span>CPU Only (Slower)</span>
248
+ </label>
249
+ <label class="flex items-center gap-2 text-gray-300 cursor-pointer">
250
+ <input type="radio" name="gpu" value="cuda" class="text-indigo-600 focus:ring-indigo-500">
251
+ <span>NVIDIA (CUDA)</span>
252
+ </label>
253
+ <label class="flex items-center gap-2 text-gray-300 cursor-pointer">
254
+ <input type="radio" name="gpu" value="metal" class="text-indigo-600 focus:ring-indigo-500">
255
+ <span>Apple Silicon (Metal)</span>
256
+ </label>
257
+ </div>
258
+ </div>
259
+
260
+ <div>
261
+ <label class="block text-sm font-medium text-gray-300 mb-2">Threads (CPU Cores)</label>
262
+ <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">
263
+ <div class="flex justify-between text-xs text-gray-500 mt-1">
264
+ <span>1 Thread</span>
265
+ <span id="threadValue" class="text-indigo-400 font-bold">8 Threads</span>
266
+ <span>32 Threads</span>
267
+ </div>
268
+ </div>
269
+
270
+ <div class="bg-indigo-900/20 p-4 rounded-lg border border-indigo-500/20">
271
+ <h5 class="text-sm font-bold text-indigo-300 mb-2"><i class="fa-solid fa-circle-info"></i> Note on Imatrix-MAX</h5>
272
+ <p class="text-xs text-gray-400">
273
+ 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.
274
+ </p>
275
+ </div>
276
+ </div>
277
+
278
+ <!-- Code Output -->
279
+ <div class="relative">
280
+ <div class="terminal-window">
281
+ <div class="terminal-header">
282
+ <div class="dot red"></div>
283
+ <div class="dot yellow"></div>
284
+ <div class="dot green"></div>
285
+ <span class="text-xs text-gray-400 ml-2">root@server:~/glm-deploy</span>
286
+ </div>
287
+ <div class="terminal-body" id="codeOutput">
288
+ <div class="mb-2">
289
+ <span class="path-text">~</span>
290
+ <span class="text-white"> $ </span>
291
+ <span class="cmd-text"># Initializing GLM-4.7 Flash Setup...</span>
292
+ </div>
293
+ <div id="scriptContent">
294
+ <div class="mb-2">
295
+ <span class="path-text">~</span>
296
+ <span class="text-white"> $ </span>
297
+ <span class="cmd-text">git clone https://github.com/ggerganov/llama.cpp</span>
298
+ </div>
299
+ <div class="mb-2">
300
+ <span class="path-text">~</span>
301
+ <span class="text-white"> $ </span>
302
+ <span class="cmd-text">cd llama.cpp &amp;&amp; make</span>
303
+ </div>
304
+ <div class="mb-2">
305
+ <span class="path-text">~/llama.cpp</span>
306
+ <span class="text-white"> $ </span>
307
+ <span class="cmd-text">./llama-server</span>
308
+ <span class="text-gray-500"> \</span>
309
+ </div>
310
+ <div class="mb-2 ml-4">
311
+ <span class="text-gray-500"> --model ./models/glm-4.7-flash-uncensored.Q4_K_M.gguf</span>
312
+ </div>
313
+ <div class="mb-2 ml-4">
314
+ <span class="text-gray-500"> --n_ctx 4096 --n_gpu_layers 35</span>
315
+ </div>
316
+ <div class="mb-2 ml-4">
317
+ <span class="text-gray-500"> --port 8080 --host 0.0.0.0</span>
318
+ </div>
319
+ <div class="mt-4">
320
+ <span class="success-text">[INFO] Server starting on http://localhost:8080</span>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <div class="mt-4 text-xs text-gray-500 text-center">
326
+ * Adjust <code>--n_gpu_layers</code> based on your VRAM capacity.
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Cloud Deployment Guide -->
333
+ <section id="cloud" class="space-y-8">
334
+ <div class="text-center">
335
+ <h2 class="text-3xl font-bold">Cloud Deployment Options</h2>
336
+ <p class="text-gray-400 mt-2">Running this model in the cloud requires instances with high RAM and VRAM.</p>
337
+ </div>
338
+
339
+ <div class="grid md:grid-cols-3 gap-6">
340
+ <!-- Option 1: RunPod -->
341
+ <div class="glass-panel p-6 rounded-xl border-t-4 border-pink-500 flex flex-col justify-between hover:border-pink-400 transition">
342
+ <div>
343
+ <div class="w-10 h-10 rounded bg-pink-900/30 flex items-center justify-center text-pink-400 mb-4">
344
+ <i class="fa-solid fa-cloud-bolt"></i>
345
+ </div>
346
+ <h3 class="text-xl font-bold mb-2">RunPod</h3>
347
+ <p class="text-sm text-gray-400 mb-4">
348
+ Best for short bursts. Use an A100 or H100 pod. Upload your GGUF file to Pod Storage and run the server.
349
+ </p>
350
+ <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-pink-300 mb-4">
351
+ nvidia-a100-80gb
352
+ </div>
353
+ <div class="flex items-center gap-2 text-xs text-gray-500">
354
+ <i class="fa-solid fa-check text-green-500"></i> Pay per second
355
+ </div>
356
+ </div>
357
+ <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">
358
+ Launch Pod
359
+ </a>
360
+ </div>
361
+
362
+ <!-- Option 2: Vast.ai -->
363
+ <div class="glass-panel p-6 rounded-xl border-t-4 border-orange-500 flex flex-col justify-between hover:border-orange-400 transition">
364
+ <div>
365
+ <div class="w-10 h-10 rounded bg-orange-900/30 flex items-center justify-center text-orange-400 mb-4">
366
+ <i class="fa-solid fa-server"></i>
367
+ </div>
368
+ <h3 class="text-xl font-bold mb-2">Vast.ai</h3>
369
+ <p class="text-sm text-gray-400 mb-4">
370
+ Marketplaces for GPU instances. Look for "RTX 4090" or "A100 80GB" instances. Very cost-effective.
371
+ </p>
372
+ <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-orange-300 mb-4">
373
+ 96GB RAM + 24GB VRAM
374
+ </div>
375
+ <div class="flex items-center gap-2 text-xs text-gray-500">
376
+ <i class="fa-solid fa-check text-green-500"></i> Bid/On-demand options
377
+ </div>
378
+ </div>
379
+ <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">
380
+ Browse Instances
381
+ </a>
382
+ </div>
383
+
384
+ <!-- Option 3: Lambda Labs -->
385
+ <div class="glass-panel p-6 rounded-xl border-t-4 border-blue-500 flex flex-col justify-between hover:border-blue-400 transition">
386
+ <div>
387
+ <div class="w-10 h-10 rounded bg-blue-900/30 flex items-center justify-center text-blue-400 mb-4">
388
+ <i class="fa-solid faRocket"></i>
389
+ </div>
390
+ <h3 class="text-xl font-bold mb-2">Lambda Labs</h3>
391
+ <p class="text-sm text-gray-400 mb-4">
392
+ User-friendly interface. Good for A10s and H100s. Easy to set up SSH and transfer models.
393
+ </p>
394
+ <div class="bg-gray-900/50 p-3 rounded text-xs font-mono text-blue-300 mb-4">
395
+ H100 80GB or A100 40/80GB
396
+ </div>
397
+ <div class="flex items-center gap-2 text-xs text-gray-500">
398
+ <i class="fa-solid fa-check text-green-500"></i> Flat rate pricing
399
+ </div>
400
+ </div>
401
+ <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">
402
+ Get API Key
403
+ </a>
404
+ </div>
405
+ </div>
406
+
407
+ <div class="glass-panel p-6 rounded-xl bg-gradient-to-r from-gray-900 to-gray-800 border border-gray-700">
408
+ <h3 class="text-lg font-bold text-white mb-4"><i class="fa-solid fa-list-check"></i> Quick Cloud Setup Checklist</h3>
409
+ <ul class="space-y-3">
410
+ <li class="flex items-start gap-3">
411
+ <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>
412
+ <div>
413
+ <span class="font-bold text-gray-200">Select Instance:</span>
414
+ <span class="text-gray-400 text-sm"> Ensure instance has > 32GB System RAM AND > 16GB VRAM for the Imatrix-MAX version.</span>
415
+ </div>
416
+ </li>
417
+ <li class="flex items-start gap-3">
418
+ <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>
419
+ <div>
420
+ <span class="font-bold text-gray-200">Download Model:</span>
421
+ <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>
422
+ </div>
423
+ </li>
424
+ <li class="flex items-start gap-3">
425
+ <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>
426
+ <div>
427
+ <span class="font-bold text-gray-200">Start Server:</span>
428
+ <span class="text-gray-400 text-sm"> Run the `llama-server` command with `--host 0.0.0.0` to allow external web access.</span>
429
+ </div>
430
+ </li>
431
+ </ul>
432
+ </div>
433
+ </section>
434
+
435
+ <!-- Footer -->
436
+ <footer class="border-t border-gray-800 pt-8 pb-4 text-center">
437
+ <div class="flex items-center justify-center gap-2 mb-4 opacity-70">
438
+ <i class="fa-solid fa-robot text-indigo-500"></i>
439
+ <span class="font-semibold text-gray-400">GLM-4.7 Flash Deployer</span>
440
+ </div>
441
+ <p class="text-sm text-gray-600">
442
+ This tool is a UI helper for deploying open-source AI models.
443
+ Please ensure you comply with the model's license agreement.
444
+ </p>
445
+ <div class="mt-4 text-xs text-gray-700">
446
+ &copy; <span id="year"></span> AI Deployment Tools. All rights reserved.
447
+ </div>
448
+ </footer>
449
+
450
+ </main>
451
+
452
+ <!-- Logic -->
453
+ <script>
454
+ // Update Year
455
+ document.getElementById('year').textContent = new Date().getFullYear();
456
+
457
+ // Thread Slider Logic
458
+ const slider = document.getElementById('threadSlider');
459
+ const threadValue = document.getElementById('threadValue');
460
+
461
+ slider.addEventListener('input', function() {
462
+ threadValue.textContent = this.value + " Threads";
463
+ updateScript();
464
+ });
465
+
466
+ // Backend Selection Logic
467
+ const backendSelect = document.getElementById('backendSelect');
468
+
469
+ backendSelect.addEventListener('change', updateScript);
470
+
471
+ // GPU Selection Logic
472
+ const gpuRadios = document.querySelectorAll('input[name="gpu"]');
473
+ gpuRadios.forEach(radio => {
474
+ radio.addEventListener('change', updateScript);
475
+ });
476
+
477
+ function updateScript() {
478
+ const backend = backendSelect.value;
479
+ const threads = slider.value;
480
+ const gpu = document.querySelector('input[name="gpu"]:checked').value;
481
+ const outputDiv = document.getElementById('scriptContent');
482
+
483
+ let scriptHTML = '';
484
+
485
+ if (backend === 'kobold') {
486
+ scriptHTML = `
487
+ <div class="mb-2">
488
+ <span class="path-text">~</span>
489
+ <span class="text-white"> $ </span>
490
+ <span class="cmd-text">git clone https://github.com/LostRuins/koboldcpp.git</span>
491
+ </div>
492
+ <div class="mb-2">
493
+ <span class="path-text">~</span>
494
+ <span class="text-white"> $ </span>
495
+ <span class="cmd-text">cd koboldcpp</span>
496
+ </div>
497
+ <div class="mb-2">
498
+ <span class="path-text">~/koboldcpp</span>
499
+ <span class="text-white"> $ </span>
500
+ <span class="cmd-text">mkdir -p models</span>
501
+ </div>
502
+ <div class="mb-2">
503
+ <span class="path-text">~/koboldcpp/models</span>
504
+ <span class="text-white"> $ </span>
505
+ <span class="cmd-text"># Place your GLM-4.7-Flash-Q4_K_M.gguf here</span>
506
+ </div>
507
+ <div class="mb-2">
508
+ <span class="path-text">~/koboldcpp</span>
509
+ <span class="text-white"> $ </span>
510
+ <span class="cmd-text">python3 koboldcpp.py</span>
511
+ <span class="text-gray-500"> \</span>
512
+ </div>
513
+ <div class="mb-2 ml-4">
514
+ <span class="text-gray-500"> --model models/glm-4.7-flash-uncensored.Q4_K_M.gguf</span>
515
+ </div>
516
+ <div class="mb-2 ml-4">
517
+ <span class="text-gray-500"> --contextsize ${threads * 512} --threads ${threads}</span>
518
+ </div>
519
+ <div class="mb-2 ml-4">
520
+ <span class="text-gray-500"> --port 5001 --host 0.0.0.0</span>
521
+ </div>
522
+ <div class="mt-4">
523
+ <span class="success-text">[INFO] KoboldAI UI ready at http://localhost:5001</span>
524
+ </div>
525
+ `;
526
+ }
527
+ else if (backend === 'ollama') {
528
+ scriptHTML = `
529
+ <div class="mb-2">
530
+ <span class="path-text">~</span>
531
+ <span class="text-white"> $ </span>
532
+ <span class="cmd-text">curl -fsSL https://ollama.com/install.sh | sh</span>
533
+ </div>
534
+ <div class="mb-2">
535
+ <span class="path-text">~</span>
536
+ <span class="text-white"> $ </span>
537
+ <span class="cmd-text">ollama pull nomic-ai/gpt4all-falcon</span>
538
+ <span class="text-gray-500">/* Fallback if direct GLM pull fails */</span>
539
+ </div>
540
+ <div class="mb-2">
541
+ <span class="path-text">~</span>
542
+ <span class="text-white"> $ </span>
543
+ <span class="cmd-text">ollama create glm-4-flash -f Modelfile</span>
544
+ </div>
545
+ <div class="mb-2 bg-gray-800 p-3 rounded border-l-4 border-yellow-500">
546
+ <span class="text-xs text-gray-400 block mb-1"># Create a Modelfile:</span>
547
+ <span class="text-xs text-white">FROM glm-4.7-flash-uncensored.Q4_K_M.gguf</span>
548
+ <span class="text-xs text-white">PARAMETER num_thread ${threads}</span>
549
+ </div>
550
+ <div class="mt-4">
551
+ <span class="success-text">[SUCCESS] Model loaded into Ollama. Run 'ollama run glm-4-flash'</span>
552
+ </div>
553
+ `;
554
+ }
555
+ else {
556
+ // Direct CLI
557
+ scriptHTML = `
558
+ <div class="mb-2">
559
+ <span class="path-text">~</span>
560
+ <span class="text-white"> $ </span>
561
+ <span class="cmd-text">git clone https://github.com/ggerganov/llama.cpp</span>
562
+ </div>
563
+ <div class="mb-2">
564
+ <span class="path-text">~</span>
565
+ <span class="text-white"> $ </span>
566
+ <span class="cmd-text">cd llama.cpp &amp;&amp; make</span>
567
+ </div>
568
+ <div class="mb-2">
569
+ <span class="path-text">~/llama.cpp</span>
570
+ <span class="text-white"> $ </span>
571
+ <span class="cmd-text">mkdir -p models</span>
572
+ </div>
573
+ <div class="mb-2">
574
+ <span class="path-text">~/llama.cpp/models</span>
575
+ <span class="text-white"> $ </span>
576
+ <span class="cmd-text"># Download GLM-4.7-Flash-Q4_K_M.gguf here</span>
577
+ </div>
578
+ <div class="mb-2">
579
+ <span class="path-text">~/llama.cpp</span>
580
+ <span class="text-white"> $ </span>
581
+ <span class="cmd-text">./main</span>
582
+ <span class="text-gray-500"> \</span>
583
+ </div>
584
+ <div class="mb-2 ml-4">
585
+ <span class="text-gray-500"> -m models/glm-4.7-flash-uncensored.Q4_K_M.gguf</span>
586
+ </div>
587
+ <div class="mb-2 ml-4">
588
+ <span class="text-gray-500"> -n 512 --repeat_penalty 1.1</span>
589
+ </div>
590
+ <div class="mb-2 ml-4">
591
+ <span class="text-gray-500"> -c ${threads * 512} -t ${threads} -b 1</span>
592
+ </div>
593
+ <div class="mt-4">
594
+ <span class="success-text">[INFO] Entering interactive mode. Type 'exit' to quit.</span>
595
+ </div>
596
+ `;
597
+ }
598
+
599
+ // GPU Specific Flags
600
+ if (gpu === 'cuda') {
601
+ // Insert GPU flag logic roughly by appending to relevant lines or adding a new block
602
+ // For simplicity in this template, we just update the text in the script
603
+ const tempDiv = document.createElement('div');
604
+ tempDiv.innerHTML = scriptHTML;
605
+ // Simple replacement logic based on backend would be complex, so we stick to generic output
606
+ // In a real app, we'd inject --n_gpu_layers based on backend
607
+ if (backend === 'kobold') {
608
+ scriptHTML = scriptHTML.replace('--port 5001', '--port 5001 --gpu_layer_count 35');
609
+ } else if (backend === 'cmd') {
610
+ scriptHTML = scriptHTML.replace('-t ' + threads, `-t ${threads} -ngl 35`);
611
+ }
612
+ }
613
+
614
+ outputDiv.innerHTML = scriptHTML;
615
+ }
616
+
617
+ function copyToClipboard() {
618
+ const codeElement = document.getElementById('scriptContent');
619
+ const textToCopy = codeElement.innerText;
620
+
621
+ navigator.clipboard.writeText(textToCopy).then(() => {
622
+ const btn = document.getElementById('copyBtn');
623
+ const originalText = btn.innerHTML;
624
+ btn.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
625
+ btn.classList.remove('bg-gray-700');
626
+ btn.classList.add('bg-green-600');
627
+
628
+ setTimeout(() => {
629
+ btn.innerHTML = originalText;
630
+ btn.classList.add('bg-gray-700');
631
+ btn.classList.remove('bg-green-600');
632
+ }, 3000);
633
+ }).catch(err => {
634
+ console.error('Failed to copy: ', err);
635
+ });
636
+ }
637
+ </script>
638
+ </body>
639
+ </html>