CoolFace
Apppublic

GodsDevProject/GLM-4.7-Flash-Deployer

sourceHugging Faceupdated 8mo agoView on Hugging Face
0likes
index.html639 linesDownload Raw Back to root
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> Deployer135                        </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 Hub146                    </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 anycoder152                </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-CODE164            </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 AI167            </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 Installation176                </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 Deployment179                </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 Script220                    </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 Clipboard225                </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-80gb352                        </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 second355                        </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 Pod359                    </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 VRAM374                        </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 options377                        </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 Instances381                    </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/80GB396                        </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 pricing399                        </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 Key403                    </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 Year455        document.getElementById('year').textContent = new Date().getFullYear();456 457        // Thread Slider Logic458        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 Logic467        const backendSelect = document.getElementById('backendSelect');468        469        backendSelect.addEventListener('change', updateScript);470 471        // GPU Selection Logic472        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 CLI557                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 Flags600            if (gpu === 'cuda') {601                // Insert GPU flag logic roughly by appending to relevant lines or adding a new block602                // For simplicity in this template, we just update the text in the script603                const tempDiv = document.createElement('div');604                tempDiv.innerHTML = scriptHTML;605                // Simple replacement logic based on backend would be complex, so we stick to generic output606                // In a real app, we'd inject --n_gpu_layers based on backend607                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>