Hugging Face's logo

Spaces:
Simultaneous-Orthoganlity-In-Time
/
new-deep-site
Running

App Files Community
Simultaneous-Orthoganlity-In-Time commited on
Commit
1ccc840
·
verified ·
1 Parent(s): 482e4cb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +694 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: New Deep Site
3
- emoji: 👁
4
- colorFrom: pink
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: new-deep-site
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,694 @@
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>Universal LLM Playground</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6e8efb, #a777e3);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .provider-card {
18
+ transition: all 0.3s ease;
19
+ border: 2px solid transparent;
20
+ }
21
+ .provider-card:hover {
22
+ border-color: #6e8efb;
23
+ }
24
+ .provider-card.active {
25
+ border-color: #6e8efb;
26
+ background-color: #f0f4ff;
27
+ }
28
+ .tab-content {
29
+ display: none;
30
+ }
31
+ .tab-content.active {
32
+ display: block;
33
+ animation: fadeIn 0.5s ease-in-out;
34
+ }
35
+ @keyframes fadeIn {
36
+ from { opacity: 0; }
37
+ to { opacity: 1; }
38
+ }
39
+ .code-block {
40
+ font-family: 'Courier New', Courier, monospace;
41
+ background-color: #2d3748;
42
+ color: #f7fafc;
43
+ padding: 1rem;
44
+ border-radius: 0.375rem;
45
+ overflow-x: auto;
46
+ }
47
+ .model-badge {
48
+ font-size: 0.75rem;
49
+ padding: 0.25rem 0.5rem;
50
+ border-radius: 9999px;
51
+ background-color: #e9d8fd;
52
+ color: #6b46c1;
53
+ }
54
+ .response-area {
55
+ min-height: 200px;
56
+ background-color: #f8fafc;
57
+ border: 1px solid #e2e8f0;
58
+ border-radius: 0.5rem;
59
+ }
60
+ .token-counter {
61
+ position: absolute;
62
+ right: 1rem;
63
+ bottom: 1rem;
64
+ font-size: 0.75rem;
65
+ color: #718096;
66
+ }
67
+ </style>
68
+ </head>
69
+ <body class="bg-gray-50">
70
+ <!-- Header -->
71
+ <header class="gradient-bg text-white py-16">
72
+ <div class="container mx-auto px-6 text-center">
73
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Universal LLM Playground</h1>
74
+ <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Connect to any LLM provider with a single interface</p>
75
+ <div class="flex justify-center space-x-4">
76
+ <a href="#setup" class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-50 transition">Get Started</a>
77
+ <a href="#playground" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Try It Now</a>
78
+ </div>
79
+ </div>
80
+ </header>
81
+
82
+ <!-- Setup Section -->
83
+ <section id="setup" class="py-16 bg-white">
84
+ <div class="container mx-auto px-6">
85
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Easy Setup for Any Provider</h2>
86
+
87
+ <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
88
+ <!-- Local Models -->
89
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
90
+ <div class="flex items-center mb-6">
91
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
92
+ <i class="fas fa-laptop-code text-purple-600 text-2xl"></i>
93
+ </div>
94
+ <h3 class="text-2xl font-semibold text-gray-800">Local Models</h3>
95
+ </div>
96
+ <p class="text-gray-600 mb-6">Run models locally with Ollama, LM Studio, or directly with transformers.</p>
97
+
98
+ <div class="space-y-4">
99
+ <div>
100
+ <h4 class="font-medium text-gray-700 mb-2">1. Install Requirements</h4>
101
+ <div class="code-block mb-4">
102
+ <p># For Ollama</p>
103
+ <p>curl -fsSL https://ollama.com/install.sh | sh</p>
104
+ <p>ollama pull mistral</p>
105
+ <p><br></p>
106
+ <p># For Python transformers</p>
107
+ <p>pip install torch transformers sentencepiece</p>
108
+ </div>
109
+ </div>
110
+
111
+ <div>
112
+ <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4>
113
+ <div class="code-block">
114
+ <p>local_model = {</p>
115
+ <p> "type": "ollama", // or "transformers"</p>
116
+ <p> "base_url": "http://localhost:11434",</p>
117
+ <p> "model": "mistral",</p>
118
+ <p> "temperature": 0.7</p>
119
+ <p>}</p>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- OpenAI/Anthropic -->
126
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
127
+ <div class="flex items-center mb-6">
128
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
129
+ <i class="fas fa-cloud text-purple-600 text-2xl"></i>
130
+ </div>
131
+ <h3 class="text-2xl font-semibold text-gray-800">Cloud Providers</h3>
132
+ </div>
133
+ <p class="text-gray-600 mb-6">Connect to OpenAI, Anthropic, Groq, or any API-compatible service.</p>
134
+
135
+ <div class="space-y-4">
136
+ <div>
137
+ <h4 class="font-medium text-gray-700 mb-2">1. Get API Keys</h4>
138
+ <p class="text-gray-600 mb-2">Create accounts and get API keys from:</p>
139
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
140
+ <li><a href="https://platform.openai.com" class="text-purple-600 hover:underline">OpenAI</a></li>
141
+ <li><a href="https://console.anthropic.com" class="text-purple-600 hover:underline">Anthropic</a></li>
142
+ <li><a href="https://console.groq.com" class="text-purple-600 hover:underline">Groq</a></li>
143
+ </ul>
144
+ </div>
145
+
146
+ <div>
147
+ <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4>
148
+ <div class="code-block">
149
+ <p>openai_config = {</p>
150
+ <p> "type": "openai",</p>
151
+ <p> "api_key": "sk-your-key-here",</p>
152
+ <p> "model": "gpt-4-turbo",</p>
153
+ <p> "temperature": 0.7</p>
154
+ <p>}</p>
155
+ <p><br></p>
156
+ <p>anthropic_config = {</p>
157
+ <p> "type": "anthropic",</p>
158
+ <p> "api_key": "sk-your-key-here",</p>
159
+ <p> "model": "claude-3-opus-20240229"</p>
160
+ <p>}</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Hugging Face -->
167
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
168
+ <div class="flex items-center mb-6">
169
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
170
+ <i class="fas fa-robot text-purple-600 text-2xl"></i>
171
+ </div>
172
+ <h3 class="text-2xl font-semibold text-gray-800">Hugging Face</h3>
173
+ </div>
174
+ <p class="text-gray-600 mb-6">Use free Inference API or Pro endpoints for private models.</p>
175
+
176
+ <div class="space-y-4">
177
+ <div>
178
+ <h4 class="font-medium text-gray-700 mb-2">1. Get Access</h4>
179
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
180
+ <li>Free tier: <a href="https://huggingface.co" class="text-purple-600 hover:underline">Hugging Face account</a></li>
181
+ <li>Pro tier: <a href="https://huggingface.co/pro" class="text-purple-600 hover:underline">Hugging Face Pro</a></li>
182
+ </ul>
183
+ </div>
184
+
185
+ <div>
186
+ <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4>
187
+ <div class="code-block">
188
+ <p>hf_config = {</p>
189
+ <p> "type": "huggingface",</p>
190
+ <p> "api_key": "hf_your_key_here",</p>
191
+ <p> "model": "mistralai/Mistral-7B-Instruct-v0.1",</p>
192
+ <p> "endpoint": "https://api-inference.huggingface.co/models/",</p>
193
+ <p> "pro_endpoint": false // Set true for Pro</p>
194
+ <p>}</p>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Image Models -->
201
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
202
+ <div class="flex items-center mb-6">
203
+ <div class="bg-purple-100 p-3 rounded-full mr-4">
204
+ <i class="fas fa-image text-purple-600 text-2xl"></i>
205
+ </div>
206
+ <h3 class="text-2xl font-semibold text-gray-800">Image Generation</h3>
207
+ </div>
208
+ <p class="text-gray-600 mb-6">Connect to Stable Diffusion, DALL-E, or other image generation models.</p>
209
+
210
+ <div class="space-y-4">
211
+ <div>
212
+ <h4 class="font-medium text-gray-700 mb-2">1. Setup Options</h4>
213
+ <ul class="list-disc pl-5 text-gray-600 space-y-1">
214
+ <li>Local: Stable Diffusion with diffusers</li>
215
+ <li>Cloud: DALL-E, Midjourney API, etc.</li>
216
+ </ul>
217
+ </div>
218
+
219
+ <div>
220
+ <h4 class="font-medium text-gray-700 mb-2">2. Configuration</h4>
221
+ <div class="code-block">
222
+ <p>image_config = {</p>
223
+ <p> "type": "dalle", // or "stable_diffusion"</p>
224
+ <p> "api_key": "sk-your-key-here", // For DALL-E</p>
225
+ <p> "model": "dall-e-3", // or "stabilityai/stable-diffusion-xl-base-1.0"</p>
226
+ <p> "size": "1024x1024"</p>
227
+ <p>}</p>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Quick Start -->
235
+ <div class="max-w-4xl mx-auto mt-16 bg-purple-50 rounded-xl p-8 border border-purple-200">
236
+ <h3 class="text-2xl font-semibold text-purple-800 mb-4">🚀 Quick Start</h3>
237
+ <p class="text-gray-700 mb-6">Copy this starter code to begin using any provider:</p>
238
+
239
+ <div class="code-block mb-6">
240
+ <p># Install required packages</p>
241
+ <p>pip install requests python-dotenv</p>
242
+ <p><br></p>
243
+ <p># In your .env file:</p>
244
+ <p>OPENAI_API_KEY=your_key_here</p>
245
+ <p>ANTHROPIC_API_KEY=your_key_here</p>
246
+ <p>HF_API_KEY=your_key_here</p>
247
+ <p><br></p>
248
+ <p># Basic usage example</p>
249
+ <p>from llm_connector import LLMConnector</p>
250
+ <p><br></p>
251
+ <p>connector = LLMConnector(provider="openai")</p>
252
+ <p>response = connector.generate("Explain quantum computing")</p>
253
+ <p>print(response)</p>
254
+ </div>
255
+
256
+ <a href="#playground" class="bg-purple-600 text-white px-6 py-3 rounded-full font-semibold hover:bg-purple-700 transition inline-block">Try in Playground</a>
257
+ </div>
258
+ </div>
259
+ </section>
260
+
261
+ <!-- Playground Section -->
262
+ <section id="playground" class="py-16 bg-gray-50">
263
+ <div class="container mx-auto px-6">
264
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Interactive Playground</h2>
265
+
266
+ <div class="max-w-6xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
267
+ <div class="p-8">
268
+ <!-- Provider Selection -->
269
+ <div class="mb-8">
270
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Select LLM Provider</h3>
271
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
272
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center active" onclick="selectProvider('openai')">
273
+ <div class="bg-blue-50 p-4 rounded-full inline-block mb-2">
274
+ <i class="fab fa-openai text-blue-500 text-2xl"></i>
275
+ </div>
276
+ <h4 class="font-medium">OpenAI</h4>
277
+ <span class="model-badge inline-block mt-1">GPT-4</span>
278
+ </div>
279
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('anthropic')">
280
+ <div class="bg-orange-50 p-4 rounded-full inline-block mb-2">
281
+ <i class="fas fa-robot text-orange-500 text-2xl"></i>
282
+ </div>
283
+ <h4 class="font-medium">Anthropic</h4>
284
+ <span class="model-badge inline-block mt-1">Claude 3</span>
285
+ </div>
286
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('groq')">
287
+ <div class="bg-green-50 p-4 rounded-full inline-block mb-2">
288
+ <i class="fas fa-bolt text-green-500 text-2xl"></i>
289
+ </div>
290
+ <h4 class="font-medium">Groq</h4>
291
+ <span class="model-badge inline-block mt-1">Mixtral</span>
292
+ </div>
293
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('huggingface')">
294
+ <div class="bg-yellow-50 p-4 rounded-full inline-block mb-2">
295
+ <i class="fas fa-h-square text-yellow-500 text-2xl"></i>
296
+ </div>
297
+ <h4 class="font-medium">Hugging Face</h4>
298
+ <span class="model-badge inline-block mt-1">Mistral</span>
299
+ </div>
300
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('ollama')">
301
+ <div class="bg-purple-50 p-4 rounded-full inline-block mb-2">
302
+ <i class="fas fa-laptop-code text-purple-500 text-2xl"></i>
303
+ </div>
304
+ <h4 class="font-medium">Ollama</h4>
305
+ <span class="model-badge inline-block mt-1">Local</span>
306
+ </div>
307
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('transformers')">
308
+ <div class="bg-red-50 p-4 rounded-full inline-block mb-2">
309
+ <i class="fas fa-code text-red-500 text-2xl"></i>
310
+ </div>
311
+ <h4 class="font-medium">Transformers</h4>
312
+ <span class="model-badge inline-block mt-1">PyTorch</span>
313
+ </div>
314
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('dalle')">
315
+ <div class="bg-pink-50 p-4 rounded-full inline-block mb-2">
316
+ <i class="fas fa-image text-pink-500 text-2xl"></i>
317
+ </div>
318
+ <h4 class="font-medium">DALL·E</h4>
319
+ <span class="model-badge inline-block mt-1">Images</span>
320
+ </div>
321
+ <div class="provider-card p-4 rounded-lg cursor-pointer text-center" onclick="selectProvider('sd')">
322
+ <div class="bg-indigo-50 p-4 rounded-full inline-block mb-2">
323
+ <i class="fas fa-paint-brush text-indigo-500 text-2xl"></i>
324
+ </div>
325
+ <h4 class="font-medium">Stable Diffusion</h4>
326
+ <span class="model-badge inline-block mt-1">Local</span>
327
+ </div>
328
+ </div>
329
+ </div>
330
+
331
+ <!-- Configuration Panel -->
332
+ <div class="mb-8">
333
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h3>
334
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
335
+ <div>
336
+ <label class="block text-gray-700 mb-2">Model</label>
337
+ <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
338
+ <option>gpt-4-turbo</option>
339
+ <option>gpt-4</option>
340
+ <option>gpt-3.5-turbo</option>
341
+ </select>
342
+ </div>
343
+ <div>
344
+ <label class="block text-gray-700 mb-2">API Key</label>
345
+ <input type="password" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500" placeholder="sk-...">
346
+ </div>
347
+ <div>
348
+ <label class="block text-gray-700 mb-2">Temperature</label>
349
+ <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full">
350
+ <div class="flex justify-between text-sm text-gray-500 mt-1">
351
+ <span>Precise</span>
352
+ <span>Balanced</span>
353
+ <span>Creative</span>
354
+ </div>
355
+ </div>
356
+ <div>
357
+ <label class="block text-gray-700 mb-2">Max Tokens</label>
358
+ <input type="number" value="1000" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500">
359
+ </div>
360
+ </div>
361
+ </div>
362
+
363
+ <!-- Prompt Area -->
364
+ <div class="mb-8">
365
+ <h3 class="text-xl font-semibold text-gray-800 mb-4">Prompt</h3>
366
+ <div class="relative">
367
+ <textarea class="w-full p-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 h-40" placeholder="Enter your prompt here..."></textarea>
368
+ <div class="token-counter">0 tokens</div>
369
+ </div>
370
+ <div class="flex space-x-3 mt-3">
371
+ <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
372
+ <i class="fas fa-magic mr-2"></i> Enhance
373
+ </button>
374
+ <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
375
+ <i class="fas fa-history mr-2"></i> History
376
+ </button>
377
+ <button class="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg hover:bg-gray-200">
378
+ <i class="fas fa-save mr-2"></i> Save
379
+ </button>
380
+ </div>
381
+ </div>
382
+
383
+ <!-- Response Area -->
384
+ <div>
385
+ <div class="flex justify-between items-center mb-4">
386
+ <h3 class="text-xl font-semibold text-gray-800">Response</h3>
387
+ <div class="flex space-x-2">
388
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm hover:bg-gray-200">
389
+ <i class="fas fa-copy mr-1"></i> Copy
390
+ </button>
391
+ <button class="bg-gray-100 text-gray-700 px-3 py-1 rounded-lg text-sm hover:bg-gray-200">
392
+ <i class="fas fa-download mr-1"></i> Save
393
+ </button>
394
+ </div>
395
+ </div>
396
+ <div class="response-area p-4">
397
+ <p class="text-gray-500 italic">Response will appear here...</p>
398
+ </div>
399
+ <div class="flex justify-between items-center mt-3 text-sm text-gray-500">
400
+ <div>
401
+ <span>Tokens: 0</span>
402
+ <span class="mx-2">|</span>
403
+ <span>Time: 0s</span>
404
+ </div>
405
+ <div>
406
+ <span>Model: gpt-4-turbo</span>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <!-- Action Buttons -->
412
+ <div class="flex justify-center space-x-4 mt-8">
413
+ <button class="gradient-bg text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition flex items-center">
414
+ <i class="fas fa-paper-plane mr-2"></i> Generate
415
+ </button>
416
+ <button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-full font-semibold hover:bg-purple-50 transition flex items-center">
417
+ <i class="fas fa-redo mr-2"></i> Regenerate
418
+ </button>
419
+ </div>
420
+ </div>
421
+ </div>
422
+
423
+ <!-- API Examples -->
424
+ <div class="max-w-4xl mx-auto mt-16">
425
+ <h3 class="text-2xl font-semibold text-gray-800 mb-6">API Usage Examples</h3>
426
+
427
+ <div class="mb-8">
428
+ <div class="flex items-center mb-4">
429
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
430
+ <i class="fas fa-code text-blue-500"></i>
431
+ </div>
432
+ <h4 class="text-lg font-medium text-gray-700">Basic Text Generation</h4>
433
+ </div>
434
+ <div class="code-block">
435
+ <p>import LLMConnector</p>
436
+ <p><br></p>
437
+ <p># Initialize with your preferred provider</p>
438
+ <p>llm = LLMConnector(provider="openai", api_key="your_key")</p>
439
+ <p><br></p>
440
+ <p># Simple generation</p>
441
+ <p>response = llm.generate(</p>
442
+ <p> prompt="Explain quantum computing",</p>
443
+ <p> model="gpt-4-turbo",</p>
444
+ <p> temperature=0.7,</p>
445
+ <p> max_tokens=1000</p>
446
+ <p>)</p>
447
+ <p><br></p>
448
+ <p>print(response)</p>
449
+ </div>
450
+ </div>
451
+
452
+ <div class="mb-8">
453
+ <div class="flex items-center mb-4">
454
+ <div class="bg-purple-100 p-2 rounded-full mr-3">
455
+ <i class="fas fa-image text-purple-500"></i>
456
+ </div>
457
+ <h4 class="text-lg font-medium text-gray-700">Image Generation</h4>
458
+ </div>
459
+ <div class="code-block">
460
+ <p>import LLMConnector</p>
461
+ <p><br></p>
462
+ <p># Initialize image generator</p>
463
+ <p>image_gen = LLMConnector(provider="dalle", api_key="your_key")</p>
464
+ <p><br></p>
465
+ <p># Generate image</p>
466
+ <p>image_url = image_gen.generate_image(</p>
467
+ <p> prompt="A futuristic cityscape at sunset",</p>
468
+ <p> model="dall-e-3",</p>
469
+ <p> size="1024x1024",</p>
470
+ <p> quality="hd"</p>
471
+ <p>)</p>
472
+ <p><br></p>
473
+ <p>print(f"Image generated at: {image_url}")</p>
474
+ </div>
475
+ </div>
476
+
477
+ <div class="mb-8">
478
+ <div class="flex items-center mb-4">
479
+ <div class="bg-green-100 p-2 rounded-full mr-3">
480
+ <i class="fas fa-exchange-alt text-green-500"></i>
481
+ </div>
482
+ <h4 class="text-lg font-medium text-gray-700">Chat Completion</h4>
483
+ </div>
484
+ <div class="code-block">
485
+ <p>import LLMConnector</p>
486
+ <p><br></p>
487
+ <p># Initialize chat</p>
488
+ <p>chat = LLMConnector(provider="anthropic", api_key="your_key")</p>
489
+ <p><br></p>
490
+ <p># Start conversation</p>
491
+ <p>messages = [</p>
492
+ <p> {"role": "system", "content": "You are a helpful assistant."},</p>
493
+ <p> {"role": "user", "content": "What's the weather today?"}</p>
494
+ <p>]</p>
495
+ <p><br></p>
496
+ <p># Get response</p>
497
+ <p>response = chat.chat_complete(</p>
498
+ <p> messages=messages,</p>
499
+ <p> model="claude-3-opus-20240229",</p>
500
+ <p> temperature=0.5</p>
501
+ <p>)</p>
502
+ <p><br></p>
503
+ <p>print(response)</p>
504
+ </div>
505
+ </div>
506
+
507
+ <div>
508
+ <div class="flex items-center mb-4">
509
+ <div class="bg-yellow-100 p-2 rounded-full mr-3">
510
+ <i class="fas fa-server text-yellow-500"></i>
511
+ </div>
512
+ <h4 class="text-lg font-medium text-gray-700">Local Model Setup</h4>
513
+ </div>
514
+ <div class="code-block">
515
+ <p>import LLMConnector</p>
516
+ <p><br></p>
517
+ <p># Initialize local Ollama model</p>
518
+ <p>local_llm = LLMConnector(</p>
519
+ <p> provider="ollama",</p>
520
+ <p> base_url="http://localhost:11434",</p>
521
+ <p> model="mistral"</p>
522
+ <p>)</p>
523
+ <p><br></p>
524
+ <p># Generate text</p>
525
+ <p>response = local_llm.generate(</p>
526
+ <p> prompt="Explain the theory of relativity",</p>
527
+ <p> temperature=0.7</p>
528
+ <p>)</p>
529
+ <p><br></p>
530
+ <p>print(response)</p>
531
+ </div>
532
+ </div>
533
+ </div>
534
+ </div>
535
+ </section>
536
+
537
+ <!-- Features Section -->
538
+ <section class="py-16 bg-white">
539
+ <div class="container mx-auto px-6">
540
+ <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">Key Features</h2>
541
+
542
+ <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
543
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
544
+ <div class="bg-blue-100 p-4 rounded-full inline-block mb-4">
545
+ <i class="fas fa-exchange-alt text-blue-500 text-2xl"></i>
546
+ </div>
547
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Provider Agnostic</h3>
548
+ <p class="text-gray-600">Switch between different LLM providers with a single line of code. No need to rewrite your application when changing models.</p>
549
+ </div>
550
+
551
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
552
+ <div class="bg-purple-100 p-4 rounded-full inline-block mb-4">
553
+ <i class="fas fa-sliders-h text-purple-500 text-2xl"></i>
554
+ </div>
555
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Unified Interface</h3>
556
+ <p class="text-gray-600">Consistent API for text generation, chat completion, and image generation across all providers.</p>
557
+ </div>
558
+
559
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
560
+ <div class="bg-green-100 p-4 rounded-full inline-block mb-4">
561
+ <i class="fas fa-lock text-green-500 text-2xl"></i>
562
+ </div>
563
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Secure Configuration</h3>
564
+ <p class="text-gray-600">Environment variable support for API keys and sensitive configuration. Never hardcode credentials.</p>
565
+ </div>
566
+
567
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
568
+ <div class="bg-yellow-100 p-4 rounded-full inline-block mb-4">
569
+ <i class="fas fa-tachometer-alt text-yellow-500 text-2xl"></i>
570
+ </div>
571
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Performance Metrics</h3>
572
+ <p class="text-gray-600">Track response times, token usage, and costs across different providers and models.</p>
573
+ </div>
574
+
575
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
576
+ <div class="bg-red-100 p-4 rounded-full inline-block mb-4">
577
+ <i class="fas fa-code-branch text-red-500 text-2xl"></i>
578
+ </div>
579
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Fallback Handling</h3>
580
+ <p class="text-gray-600">Automatic fallback to alternative models when primary model is unavailable or rate-limited.</p>
581
+ </div>
582
+
583
+ <div class="bg-gray-50 p-8 rounded-xl border border-gray-200 card-hover transition">
584
+ <div class="bg-indigo-100 p-4 rounded-full inline-block mb-4">
585
+ <i class="fas fa-plug text-indigo-500 text-2xl"></i>
586
+ </div>
587
+ <h3 class="text-xl font-semibold text-gray-800 mb-3">Extensible Design</h3>
588
+ <p class="text-gray-600">Easy to add new providers or customize existing ones with plugin architecture.</p>
589
+ </div>
590
+ </div>
591
+ </div>
592
+ </section>
593
+
594
+ <!-- Footer -->
595
+ <footer class="gradient-bg text-white py-12">
596
+ <div class="container mx-auto px-6">
597
+ <div class="max-w-4xl mx-auto text-center">
598
+ <h2 class="text-2xl font-bold mb-6">Start Building with Any LLM Today</h2>
599
+ <p class="text-lg mb-8">Universal interface for all your AI model needs. Switch providers without rewriting your application.</p>
600
+ <div class="flex justify-center space-x-4">
601
+ <a href="#setup" class="bg-white text-purple-600 px-6 py-3 rounded-full font-semibold hover:bg-purple-50 transition">Get Started</a>
602
+ <a href="#playground" class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-600 transition">Try Playground</a>
603
+ </div>
604
+ <p class="mt-10 text-purple-200">© 2023 Universal LLM Playground. MIT License.</p>
605
+ </div>
606
+ </div>
607
+ </footer>
608
+
609
+ <script>
610
+ // Provider selection
611
+ function selectProvider(provider) {
612
+ // Remove active class from all provider cards
613
+ document.querySelectorAll('.provider-card').forEach(card => {
614
+ card.classList.remove('active');
615
+ });
616
+
617
+ // Add active class to clicked card
618
+ event.currentTarget.classList.add('active');
619
+
620
+ // Update model dropdown based on provider
621
+ const modelSelect = document.querySelector('select');
622
+ let options = [];
623
+
624
+ switch(provider) {
625
+ case 'openai':
626
+ options = ['gpt-4-turbo', 'gpt-4', 'gpt-3.5-turbo'];
627
+ break;
628
+ case 'anthropic':
629
+ options = ['claude-3-opus-20240229', 'claude-3-sonnet-20240229', 'claude-2.1'];
630
+ break;
631
+ case 'groq':
632
+ options = ['mixtral-8x7b-32768', 'llama2-70b-4096'];
633
+ break;
634
+ case 'huggingface':
635
+ options = ['mistralai/Mistral-7B-Instruct-v0.1', 'meta-llama/Llama-2-7b-chat-hf'];
636
+ break;
637
+ case 'ollama':
638
+ options = ['mistral', 'llama2', 'codellama'];
639
+ break;
640
+ case 'transformers':
641
+ options = ['local/transformers'];
642
+ break;
643
+ case 'dalle':
644
+ options = ['dall-e-3', 'dall-e-2'];
645
+ break;
646
+ case 'sd':
647
+ options = ['stabilityai/stable-diffusion-xl-base-1.0'];
648
+ break;
649
+ }
650
+
651
+ // Update select options
652
+ modelSelect.innerHTML = '';
653
+ options.forEach(opt => {
654
+ const option = document.createElement('option');
655
+ option.value = opt;
656
+ option.textContent = opt;
657
+ modelSelect.appendChild(option);
658
+ });
659
+
660
+ // Update API key placeholder
661
+ const apiKeyInput = document.querySelector('input[type="password"]');
662
+ if (provider === 'openai') {
663
+ apiKeyInput.placeholder = 'sk-...';
664
+ } else if (provider === 'anthropic') {
665
+ apiKeyInput.placeholder = 'sk-ant-...';
666
+ } else if (provider === 'huggingface') {
667
+ apiKeyInput.placeholder = 'hf_...';
668
+ } else {
669
+ apiKeyInput.placeholder = 'API key (if required)';
670
+ }
671
+ }
672
+
673
+ // Token counter for prompt
674
+ const promptTextarea = document.querySelector('textarea');
675
+ const tokenCounter = document.querySelector('.token-counter');
676
+
677
+ promptTextarea.addEventListener('input', () => {
678
+ // Simple token estimation (4 chars ≈ 1 token)
679
+ const tokenCount = Math.ceil(promptTextarea.value.length / 4);
680
+ tokenCounter.textContent = `${tokenCount} tokens`;
681
+ });
682
+
683
+ // Smooth scrolling for anchor links
684
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
685
+ anchor.addEventListener('click', function (e) {
686
+ e.preventDefault();
687
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
688
+ behavior: 'smooth'
689
+ });
690
+ });
691
+ });
692
+ </script>
693
+ <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=Simultaneous-Orthoganlity-In-Time/new-deep-site" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
694
+ </html>