File size: 21,696 Bytes
14482b3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Chatbot Recommendations</title>
    <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">
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .typewriter {
            overflow: hidden;
            border-right: .15em solid #a777e3;
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .15em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #a777e3; }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="gradient-bg text-white py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">AI Chatbot Recommendations</h1>
                <p class="text-xl md:text-2xl mb-8">For Your Powerful Development Machine</p>
                <div class="typewriter text-xl font-mono bg-black bg-opacity-20 p-4 rounded-lg inline-block">
                    System: i7-7700K | 32GB RAM | RTX 3090 + 3060
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        <div class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Your System Specifications</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-microchip text-3xl text-purple-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">Processor</h3>
                    </div>
                    <p class="text-gray-600">Intel Core i7-7700K @ 4.20GHz (4 cores, 8 threads)</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-memory text-3xl text-blue-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">Memory</h3>
                    </div>
                    <p class="text-gray-600">32GB DDR4-2666 (2x16GB)</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-gamepad text-3xl text-green-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">Graphics</h3>
                    </div>
                    <p class="text-gray-600">NVIDIA RTX 3090 (24GB) + RTX 3060 (12GB) + Intel HD 630</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-hdd text-3xl text-orange-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">Storage</h3>
                    </div>
                    <p class="text-gray-600">2x 1TB SSDs (SATA + M.2 NVMe)</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-desktop text-3xl text-red-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">OS</h3>
                    </div>
                    <p class="text-gray-600">Windows 10 Pro (64-bit)</p>
                </div>
                <div class="bg-white rounded-lg shadow-md p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-server text-3xl text-yellow-600 mr-4"></i>
                        <h3 class="text-xl font-semibold">Motherboard</h3>
                    </div>
                    <p class="text-gray-600">MSI Z270 SLI Plus</p>
                </div>
            </div>
        </div>

        <div class="mb-12">
            <h2 class="text-2xl font-bold text-gray-800 mb-6">Recommended Local AI Models</h2>
            <p class="text-gray-600 mb-8">Based on your powerful hardware, here are the best local chatbot models that can assist with coding and act as a personal AI assistant:</p>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Model 1 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="gradient-bg p-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-xl font-bold text-white">WizardCoder 34B</h3>
                            <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-semibold">Best Overall</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-brain text-2xl text-purple-500 mr-3"></i>
                            <span class="font-semibold">34B Parameters</span>
                        </div>
                        <p class="text-gray-600 mb-4">Specialized for coding tasks with excellent code generation and understanding capabilities.</p>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">System Requirements:</h4>
                            <div class="flex items-center mb-2">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>RTX 3090 (24GB VRAM) - Can run comfortably</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>32GB RAM - More than sufficient</span>
                            </div>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">Strengths:</h4>
                            <ul class="list-disc list-inside text-gray-600 pl-2">
                                <li>Excellent at code generation</li>
                                <li>Good at code explanation</li>
                                <li>Strong debugging capabilities</li>
                            </ul>
                        </div>
                        <a href="https://huggingface.co/WizardLM/WizardCoder-34B-V1.0" class="inline-block gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">Download Model</a>
                    </div>
                </div>

                <!-- Model 2 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-blue-600 p-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-xl font-bold text-white">CodeLlama 13B</h3>
                            <span class="bg-white text-blue-600 px-3 py-1 rounded-full text-sm font-semibold">Balanced</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-brain text-2xl text-blue-500 mr-3"></i>
                            <span class="font-semibold">13B Parameters</span>
                        </div>
                        <p class="text-gray-600 mb-4">Meta's specialized coding model with good performance at a smaller size than WizardCoder.</p>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">System Requirements:</h4>
                            <div class="flex items-center mb-2">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>RTX 3060 (12GB VRAM) - Can run well</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>32GB RAM - More than enough</span>
                            </div>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">Strengths:</h4>
                            <ul class="list-disc list-inside text-gray-600 pl-2">
                                <li>Good balance of size and capability</li>
                                <li>Excellent Python support</li>
                                <li>Faster inference than larger models</li>
                            </ul>
                        </div>
                        <a href="https://huggingface.co/codellama/CodeLlama-13b-hf" class="inline-block bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">Download Model</a>
                    </div>
                </div>

                <!-- Model 3 -->
                <div class="bg-white rounded-xl shadow-lg overflow-hidden card-hover">
                    <div class="bg-green-600 p-6">
                        <div class="flex justify-between items-center">
                            <h3 class="text-xl font-bold text-white">Mistral 7B</h3>
                            <span class="bg-white text-green-600 px-3 py-1 rounded-full text-sm font-semibold">Lightweight</span>
                        </div>
                    </div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <i class="fas fa-brain text-2xl text-green-500 mr-3"></i>
                            <span class="font-semibold">7B Parameters</span>
                        </div>
                        <p class="text-gray-600 mb-4">Highly efficient model that punches above its weight class for general AI tasks and coding.</p>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">System Requirements:</h4>
                            <div class="flex items-center mb-2">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>RTX 3060 (12GB VRAM) - Runs very well</span>
                            </div>
                            <div class="flex items-center">
                                <i class="fas fa-check-circle text-green-500 mr-2"></i>
                                <span>16GB RAM minimum - Your 32GB is great</span>
                            </div>
                        </div>
                        <div class="mb-4">
                            <h4 class="font-semibold text-gray-700 mb-2">Strengths:</h4>
                            <ul class="list-disc list-inside text-gray-600 pl-2">
                                <li>Fast response times</li>
                                <li>Good general knowledge</li>
                                <li>Decent coding capabilities</li>
                            </ul>
                        </div>
                        <a href="https://huggingface.co/mistralai/Mistral-7B-v0.1" class="inline-block bg-green-600 text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">Download Model</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12 card-hover">
            <div class="bg-indigo-600 p-6">
                <h2 class="text-xl font-bold text-white">Implementation Guide</h2>
            </div>
            <div class="p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-800">How to Run These Models Locally</h3>
                
                <div class="mb-6">
                    <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-laptop-code text-indigo-500 mr-2"></i>
                        Recommended Software:
                    </h4>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h5 class="font-medium mb-2">Text Generation WebUI</h5>
                            <p class="text-sm text-gray-600">User-friendly interface for running local models</p>
                            <a href="https://github.com/oobabooga/text-generation-webui" class="text-indigo-600 text-sm hover:underline">GitHub Link</a>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h5 class="font-medium mb-2">LM Studio</h5>
                            <p class="text-sm text-gray-600">Easy-to-use GUI for Windows/Mac</p>
                            <a href="https://lmstudio.ai/" class="text-indigo-600 text-sm hover:underline">Official Site</a>
                        </div>
                        <div class="bg-gray-50 p-4 rounded-lg">
                            <h5 class="font-medium mb-2">Ollama</h5>
                            <p class="text-sm text-gray-600">Simple local LLM runner</p>
                            <a href="https://ollama.ai/" class="text-indigo-600 text-sm hover:underline">Official Site</a>
                        </div>
                    </div>
                </div>

                <div class="mb-6">
                    <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-terminal text-indigo-500 mr-2"></i>
                        Quick Start with Text Generation WebUI:
                    </h4>
                    <div class="bg-gray-800 rounded-lg p-4 text-gray-100 font-mono text-sm overflow-x-auto">
                        <p class="mb-2"># Clone the repository</p>
                        <p class="mb-2">git clone https://github.com/oobabooga/text-generation-webui</p>
                        <p class="mb-2">cd text-generation-webui</p>
                        <p class="mb-2"># Install requirements (recommend using conda)</p>
                        <p class="mb-2">conda create -n textgen python=3.10</p>
                        <p class="mb-2">conda activate textgen</p>
                        <p class="mb-2">pip install -r requirements.txt</p>
                        <p class="mb-2"># Download a model (e.g., WizardCoder 34B)</p>
                        <p class="mb-2">python download-model.py WizardLM/WizardCoder-34B-V1.0</p>
                        <p class="mb-2"># Start the web UI</p>
                        <p>python server.py --model WizardLM_WizardCoder-34B-V1.0 --load-in-8bit</p>
                    </div>
                </div>

                <div>
                    <h4 class="font-medium text-gray-700 mb-2 flex items-center">
                        <i class="fas fa-lightbulb text-indigo-500 mr-2"></i>
                        Performance Tips:
                    </h4>
                    <ul class="list-disc list-inside text-gray-600 pl-2 space-y-2">
                        <li>Use <span class="font-mono bg-gray-100 px-1 rounded">--load-in-8bit</span> or <span class="font-mono bg-gray-100 px-1 rounded">--load-in-4bit</span> to reduce VRAM usage</li>
                        <li>For WizardCoder 34B, you might need to use GPTQ quantization to fit in 24GB VRAM</li>
                        <li>Assign specific GPUs using CUDA_VISIBLE_DEVICES if you want to dedicate one GPU to the model</li>
                        <li>Consider using <span class="font-mono bg-gray-100 px-1 rounded">--auto-devices</span> to automatically distribute layers across GPUs</li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-12 card-hover">
            <div class="bg-purple-600 p-6">
                <h2 class="text-xl font-bold text-white">Alternative Options</h2>
            </div>
            <div class="p-6">
                <h3 class="text-lg font-semibold mb-4 text-gray-800">Other Models Worth Considering</h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="border-l-4 border-purple-500 pl-4">
                        <h4 class="font-medium text-gray-800 mb-2">Phind-CodeLlama 34B</h4>
                        <p class="text-gray-600 mb-2">Optimized version of CodeLlama fine-tuned by Phind, excellent for coding.</p>
                        <a href="https://huggingface.co/Phind/Phind-CodeLlama-34B-v2" class="text-purple-600 text-sm hover:underline">Download Model</a>
                    </div>
                    <div class="border-l-4 border-blue-500 pl-4">
                        <h4 class="font-medium text-gray-800 mb-2">DeepSeek Coder 33B</h4>
                        <p class="text-gray-600 mb-2">Powerful coding model with strong multilingual support.</p>
                        <a href="https://huggingface.co/deepseek-ai/deepseek-coder-33b-instruct" class="text-blue-600 text-sm hover:underline">Download Model</a>
                    </div>
                    <div class="border-l-4 border-green-500 pl-4">
                        <h4 class="font-medium text-gray-800 mb-2">StarCoder2 15B</h4>
                        <p class="text-gray-600 mb-2">Great for code completion tasks with permissive license.</p>
                        <a href="https://huggingface.co/bigcode/starcoder2-15b" class="text-green-600 text-sm hover:underline">Download Model</a>
                    </div>
                    <div class="border-l-4 border-orange-500 pl-4">
                        <h4 class="font-medium text-gray-800 mb-2">Llama 3 8B</h4>
                        <p class="text-gray-600 mb-2">Meta's latest model with good general capabilities.</p>
                        <a href="https://huggingface.co/meta-llama/Meta-Llama-3-8B-Instruct" class="text-orange-600 text-sm hover:underline">Download Model</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="text-center py-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">Ready to Set Up Your Local AI Assistant?</h2>
            <p class="text-gray-600 mb-6 max-w-3xl mx-auto">With your powerful hardware, you can run these advanced AI models locally for private, uncensored coding assistance and personal AI companionship.</p>
            <div class="flex flex-col sm:flex-row justify-center gap-4">
                <a href="#" class="gradient-bg text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition inline-flex items-center">
                    <i class="fas fa-download mr-2"></i> Download Models
                </a>
                <a href="#" class="bg-gray-800 text-white px-6 py-3 rounded-lg font-medium hover:bg-gray-700 transition inline-flex items-center">
                    <i class="fas fa-book mr-2"></i> Documentation
                </a>
            </div>
        </div>
    </div>

    <footer class="bg-gray-800 text-white py-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center">
                <p>© 2023 AI Chatbot Recommendations. All model links point to their official sources.</p>
                <p class="mt-2 text-gray-400">Your system: i7-7700K | 32GB RAM | RTX 3090 + 3060</p>
                <div class="mt-4 flex justify-center space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-discord text-xl"></i>
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=j4myjohn/coding-bot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>