@touchzada/claudinho 0.1.7 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/GUIA_INICIO.md +836 -836
- package/README.md +288 -208
- package/bin/claudinho.cmd +2 -0
- package/dist/Landing/_prompts/loading-screen-analysis.md +227 -0
- package/dist/Landing/_prompts/prompt-loading-screen.md +43 -0
- package/dist/Landing/dark-landing-analysis.md +266 -0
- package/dist/Landing/index.html +1152 -0
- package/dist/Landing/index.v1.html +607 -0
- package/dist/Landing/index.v3.html +604 -0
- package/dist/Landing/index.v4.html +512 -0
- package/dist/Landing/index.v5.html +513 -0
- package/dist/cli.mjs +322 -242
- package/dist/cli.mjs.map +15 -15
- package/docs/advanced-setup.md +276 -276
- package/docs/quick-start-mac-linux.md +110 -110
- package/docs/quick-start-windows.md +106 -106
- package/package.json +2 -2
|
@@ -0,0 +1,604 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="pt-BR">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claudinho — IA no terminal, do seu jeito</title>
|
|
7
|
+
<meta name="description" content="Rode IA no terminal com qualquer modelo. OpenAI, Gemini, Ollama, Groq, DeepSeek e mais. Open-source, grátis, feito no Brasil.">
|
|
8
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
9
|
+
<script>
|
|
10
|
+
tailwind.config = {
|
|
11
|
+
theme: {
|
|
12
|
+
extend: {
|
|
13
|
+
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
|
|
14
|
+
colors: {
|
|
15
|
+
stone: {
|
|
16
|
+
50: '#fafaf8',
|
|
17
|
+
100: '#f5f3ed',
|
|
18
|
+
200: '#ebe7dc',
|
|
19
|
+
300: '#ddd7c9',
|
|
20
|
+
400: '#c8bfb0',
|
|
21
|
+
500: '#a89e8e',
|
|
22
|
+
600: '#8c8172',
|
|
23
|
+
700: '#746b5d',
|
|
24
|
+
800: '#4a433a',
|
|
25
|
+
900: '#2c2722',
|
|
26
|
+
950: '#1a1714',
|
|
27
|
+
},
|
|
28
|
+
clay: {
|
|
29
|
+
300: '#d4a574',
|
|
30
|
+
400: '#c88b56',
|
|
31
|
+
500: '#b87333',
|
|
32
|
+
600: '#9c5e28',
|
|
33
|
+
},
|
|
34
|
+
pine: {
|
|
35
|
+
50: '#edf7f2',
|
|
36
|
+
400: '#5b8a72',
|
|
37
|
+
500: '#4a7a62',
|
|
38
|
+
600: '#3d654f',
|
|
39
|
+
700: '#2d4a3a',
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
</script>
|
|
46
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
47
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=DM+Serif+Display:ital@0;1&display=swap" rel="stylesheet">
|
|
48
|
+
<style>
|
|
49
|
+
@keyframes fade-in { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }
|
|
50
|
+
@keyframes line-expand { from { width: 0 } to { width: 100% } }
|
|
51
|
+
@keyframes blink { 0%,100% { opacity: 1 } 50% { opacity: 0 } }
|
|
52
|
+
|
|
53
|
+
.fade-in { animation: fade-in 0.6s ease-out forwards; }
|
|
54
|
+
.fade-in-d1 { animation: fade-in 0.6s ease-out 0.1s forwards; }
|
|
55
|
+
.fade-in-d2 { animation: fade-in 0.6s ease-out 0.2s forwards; }
|
|
56
|
+
.fade-in-d3 { animation: fade-in 0.6s ease-out 0.3s forwards; }
|
|
57
|
+
.fade-in-d4 { animation: fade-in 0.6s ease-out 0.4s forwards; }
|
|
58
|
+
.line-expand { animation: line-expand 0.8s ease-out forwards; }
|
|
59
|
+
.cursor-blink { animation: blink 1s step-end infinite; }
|
|
60
|
+
|
|
61
|
+
.scandinavian-card {
|
|
62
|
+
background: white;
|
|
63
|
+
border: 1px solid #ebe7dc;
|
|
64
|
+
border-radius: 4px;
|
|
65
|
+
transition: all 0.3s ease;
|
|
66
|
+
}
|
|
67
|
+
.scandinavian-card:hover {
|
|
68
|
+
border-color: #c88b56;
|
|
69
|
+
box-shadow: 0 4px 24px rgba(74, 67, 58, 0.06);
|
|
70
|
+
transform: translateY(-2px);
|
|
71
|
+
}
|
|
72
|
+
.scandinavian-btn {
|
|
73
|
+
background: #2c2722;
|
|
74
|
+
transition: all 0.3s ease;
|
|
75
|
+
}
|
|
76
|
+
.scandinavian-btn:hover {
|
|
77
|
+
background: #4a433a;
|
|
78
|
+
transform: translateY(-1px);
|
|
79
|
+
box-shadow: 0 4px 12px rgba(74, 67, 58, 0.15);
|
|
80
|
+
}
|
|
81
|
+
.clay-accent { color: #c88b56; }
|
|
82
|
+
|
|
83
|
+
/* Provider tabs */
|
|
84
|
+
.provider-tab {
|
|
85
|
+
background: transparent;
|
|
86
|
+
border: 1px solid #ddd7c9;
|
|
87
|
+
transition: all 0.2s ease;
|
|
88
|
+
}
|
|
89
|
+
.provider-tab:hover { border-color: #c88b56; }
|
|
90
|
+
.provider-tab.active {
|
|
91
|
+
background: #2c2722;
|
|
92
|
+
border-color: #2c2722;
|
|
93
|
+
color: white;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* FAQ accordion */
|
|
97
|
+
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
|
|
98
|
+
.faq-answer.open { max-height: 200px; }
|
|
99
|
+
.faq-btn svg { transition: transform 0.2s ease; }
|
|
100
|
+
.faq-btn.active svg { transform: rotate(45deg); }
|
|
101
|
+
|
|
102
|
+
* { scrollbar-width: thin; scrollbar-color: #a89e8e #fafaf8; }
|
|
103
|
+
::-webkit-scrollbar { width: 6px; }
|
|
104
|
+
::-webkit-scrollbar-track { background: #fafaf8; }
|
|
105
|
+
::-webkit-scrollbar-thumb { background: #a89e8e; border-radius: 3px; }
|
|
106
|
+
|
|
107
|
+
/* Scroll reveal */
|
|
108
|
+
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
|
|
109
|
+
.reveal.visible { opacity: 1; transform: translateY(0); }
|
|
110
|
+
</style>
|
|
111
|
+
</head>
|
|
112
|
+
<body class="bg-stone-50 font-sans text-stone-800 antialiased">
|
|
113
|
+
|
|
114
|
+
<!-- ====== NAVBAR ====== -->
|
|
115
|
+
<nav class="fixed inset-x-0 top-0 z-50 bg-stone-50/90 backdrop-blur-sm border-b border-stone-200/80">
|
|
116
|
+
<div class="max-w-6xl mx-auto px-6 h-16 flex items-center justify-between">
|
|
117
|
+
<div class="flex items-center gap-3">
|
|
118
|
+
<div class="w-8 h-8 bg-clay-400 flex items-center justify-center text-white font-black text-sm" style="border-radius:2px">C</div>
|
|
119
|
+
<span class="font-bold text-lg text-stone-900">claudinho</span>
|
|
120
|
+
<span class="text-xs px-2 py-0.5 bg-stone-200/80 text-stone-600" style="border-radius:2px">0.1.8</span>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="hidden md:flex items-center gap-8 text-sm text-stone-500">
|
|
123
|
+
<a href="#how" class="hover:text-stone-900 transition">Como funciona</a>
|
|
124
|
+
<a href="#providers" class="hover:text-stone-900 transition">Providers</a>
|
|
125
|
+
<a href="#features" class="hover:text-stone-900 transition">Features</a>
|
|
126
|
+
<a href="#faq" class="hover:text-stone-900 transition">FAQ</a>
|
|
127
|
+
<a href="https://github.com/touchzada/Claudinho" target="_blank" class="text-stone-800 border border-stone-300 px-4 py-2 text-xs hover:bg-stone-100 transition" style="border-radius:2px">GitHub ↗</a>
|
|
128
|
+
</div>
|
|
129
|
+
</div>
|
|
130
|
+
</nav>
|
|
131
|
+
|
|
132
|
+
<!-- ====== ABOVE THE FOLD ====== -->
|
|
133
|
+
<section class="min-h-screen flex items-center justify-center pt-16 relative overflow-hidden">
|
|
134
|
+
<!-- Subtle geometric accent -->
|
|
135
|
+
<div class="absolute top-24 right-12 w-72 h-72 opacity-[0.03]" style="background-image: repeating-linear-gradient(0deg, #2c2722 0, #2c2722 1px, transparent 0, transparent 50%); background-size: 100% 4px; transform: rotate(45deg);"></div>
|
|
136
|
+
<div class="absolute bottom-20 left-12 w-96 h-px bg-stone-300/50"></div>
|
|
137
|
+
|
|
138
|
+
<div class="max-w-4xl mx-auto px-6 py-20 text-center">
|
|
139
|
+
<!-- Eyebrow -->
|
|
140
|
+
<div class="inline-flex items-center gap-2 px-4 py-2 bg-stone-100 border border-stone-200/60 text-xs text-stone-500 mb-8 fade-in" style="border-radius:2px; opacity:0">
|
|
141
|
+
<span class="w-1.5 h-1.5 bg-pine-400" style="border-radius:50%"></span>
|
|
142
|
+
Open-source · 11 providers · MIT License
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<h1 class="font-serif text-5xl md:text-7xl lg:text-8xl leading-[0.95] text-stone-900 mb-6 fade-in-d1" style="opacity:0; font-family:'DM Serif Display',serif">
|
|
146
|
+
IA de graça<br><em class="clay-accent">no teu terminal.</em>
|
|
147
|
+
</h1>
|
|
148
|
+
|
|
149
|
+
<p class="text-lg md:text-xl text-stone-500 max-w-xl mx-auto leading-relaxed mb-10 fade-in-d2" style="opacity:0">
|
|
150
|
+
OpenAI, Gemini, Ollama, Groq, DeepSeek e mais.<br>
|
|
151
|
+
Uma instalação. Um provider. Funciona.
|
|
152
|
+
</p>
|
|
153
|
+
|
|
154
|
+
<!-- CTA -->
|
|
155
|
+
<div class="flex flex-col sm:flex-row items-center justify-center gap-3 mb-12 fade-in-d3" style="opacity:0">
|
|
156
|
+
<a href="#how" class="scandinavian-btn px-8 py-3.5 text-white font-medium text-sm flex items-center gap-2 cursor-pointer" style="border-radius:2px">
|
|
157
|
+
Como funciona
|
|
158
|
+
</a>
|
|
159
|
+
<a href="https://github.com/touchzada/Claudinho" target="_blank" class="px-8 py-3.5 border border-stone-300 text-stone-700 font-medium text-sm hover:bg-stone-100 hover:border-stone-400 transition" style="border-radius:2px">
|
|
160
|
+
Ver no GitHub
|
|
161
|
+
</a>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<!-- Friction remover -->
|
|
165
|
+
<p class="text-xs text-stone-400 fade-in-d4" style="opacity:0">
|
|
166
|
+
Instala em 30 segundos. Sem cartão. Sem conta. Sem tracking.
|
|
167
|
+
</p>
|
|
168
|
+
</div>
|
|
169
|
+
</section>
|
|
170
|
+
|
|
171
|
+
<!-- ====== STATS BAR ====== -->
|
|
172
|
+
<section class="border-y border-stone-200 bg-white">
|
|
173
|
+
<div class="max-w-6xl mx-auto px-6 py-12 grid grid-cols-2 md:grid-cols-4 gap-8">
|
|
174
|
+
<div class="text-center">
|
|
175
|
+
<div class="text-3xl font-bold text-stone-900 font-mono">11</div>
|
|
176
|
+
<div class="text-xs text-stone-500 mt-1 uppercase tracking-wider">Providers</div>
|
|
177
|
+
</div>
|
|
178
|
+
<div class="text-center">
|
|
179
|
+
<div class="text-3xl font-bold text-stone-900 font-mono">45</div>
|
|
180
|
+
<div class="text-xs text-stone-500 mt-1 uppercase tracking-wider">Tools</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div class="text-center">
|
|
183
|
+
<div class="text-3xl font-bold text-stone-900 font-mono">~100</div>
|
|
184
|
+
<div class="text-xs text-stone-500 mt-1 uppercase tracking-wider">Commands</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="text-center">
|
|
187
|
+
<div class="text-3xl font-bold text-stone-900 font-mono">v0.1.8</div>
|
|
188
|
+
<div class="text-xs text-stone-500 mt-1 uppercase tracking-wider">Versão atual</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</section>
|
|
192
|
+
|
|
193
|
+
<!-- ====== HOW IT WORKS ====== -->
|
|
194
|
+
<section id="how" class="py-24">
|
|
195
|
+
<div class="max-w-6xl mx-auto px-6">
|
|
196
|
+
<div class="text-center mb-16 reveal">
|
|
197
|
+
<h2 class="font-serif text-4xl md:text-5xl text-stone-900 mb-4" style="font-family:'DM Serif Display',serif">Três passos.</h2>
|
|
198
|
+
<p class="text-stone-500 max-w-md mx-auto">Mais simples que configurar Wi-Fi. Sem rodeio.</p>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="grid md:grid-cols-3 gap-8 reveal">
|
|
202
|
+
<div class="scandinavian-card p-8">
|
|
203
|
+
<div class="text-5xl font-serif text-clay-400 mb-4" style="font-family:'DM Serif Display',serif">1</div>
|
|
204
|
+
<h3 class="text-lg font-semibold text-stone-900 mb-2">Instala.</h3>
|
|
205
|
+
<p class="text-sm text-stone-500 mb-4">Um comando no terminal. Sem dependência pesada.</p>
|
|
206
|
+
<code class="block text-xs bg-stone-100 px-3 py-2 text-stone-700" style="border-radius:2px">npm i -g @touchzada/claudinho</code>
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div class="scandinavian-card p-8">
|
|
210
|
+
<div class="text-5xl font-serif text-clay-400 mb-4" style="font-family:'DM Serif Display',serif">2</div>
|
|
211
|
+
<h3 class="text-lg font-semibold text-stone-900 mb-2">Configura.</h3>
|
|
212
|
+
<p class="text-sm text-stone-500 mb-4">Bota tua API key do provider favorito. Ou usa Ollama local — sem chave nenhuma.</p>
|
|
213
|
+
<code class="block text-xs bg-stone-100 px-3 py-2 text-stone-700" style="border-radius:2px">export OPENAI_API_KEY="sk-..."</code>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="scandinavian-card p-8">
|
|
217
|
+
<div class="text-5xl font-serif text-clay-400 mb-4" style="font-family:'DM Serif Display',serif">3</div>
|
|
218
|
+
<h3 class="text-lg font-semibold text-stone-900 mb-2">Roda.</h3>
|
|
219
|
+
<p class="text-sm text-stone-500 mb-4">Digita <code class="text-stone-800 bg-stone-100 px-1">claudinho</code>. Começa a conversar com IA direto no terminal.</p>
|
|
220
|
+
<code class="block text-xs bg-stone-100 px-3 py-2 text-stone-700" style="border-radius:2px">claudinho</code>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</section>
|
|
225
|
+
|
|
226
|
+
<!-- ====== CODE VS TEXT MINI SECTION ====== -->
|
|
227
|
+
<section class="py-16 bg-stone-900 text-white">
|
|
228
|
+
<div class="max-w-4xl mx-auto px-6">
|
|
229
|
+
<div class="font-mono text-sm leading-relaxed">
|
|
230
|
+
<div class="text-stone-500"><span class="text-pine-400">✦</span> Terminal conectado</div>
|
|
231
|
+
<div class="mt-4 text-stone-500">
|
|
232
|
+
<span class="text-amber-500">$</span> <span>claudinho</span>
|
|
233
|
+
</div>
|
|
234
|
+
<div class="mt-2 text-stone-400">
|
|
235
|
+
<span class="text-clay-400">◐</span> Conectado a <span class="text-white">OpenRouter</span> · <span class="text-stone-300">qwen/qwen3.6-plus:free</span>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="mt-4">
|
|
238
|
+
<span class="text-clay-400">></span> <span class="text-stone-300">cria uma API REST com Node e Express</span>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="mt-2 text-stone-500">
|
|
241
|
+
<span class="text-clay-400">[FileWrite]</span> criando package.json, server.js, routes/...
|
|
242
|
+
</div>
|
|
243
|
+
<div class="mt-2 text-pine-400">
|
|
244
|
+
<span class="text-stone-500">3 arquivos escritos · 247 linhas · </span><span class="text-pine-400">feito</span>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="mt-4">
|
|
247
|
+
<span class="clay-accent">></span> <span class="cursor-blink text-stone-300">_</span>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
</section>
|
|
252
|
+
|
|
253
|
+
<!-- ====== PROVIDERS ====== -->
|
|
254
|
+
<section id="providers" class="py-24 bg-stone-100">
|
|
255
|
+
<div class="max-w-6xl mx-auto px-6">
|
|
256
|
+
<div class="text-center mb-12 reveal">
|
|
257
|
+
<h2 class="font-serif text-4xl md:text-5xl text-stone-900 mb-4" style="font-family:'DM Serif Display',serif">Escolha teu provider.</h2>
|
|
258
|
+
<p class="text-stone-500 max-w-md mx-auto">Onze opções. A API key é tua. A escolha é tua.</p>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<!-- Setup quick reference -->
|
|
262
|
+
<div class="max-w-2xl mx-auto mb-12 reveal">
|
|
263
|
+
<div class="bg-white border border-stone-200 p-5" style="border-radius:2px">
|
|
264
|
+
<div class="text-xs text-stone-400 mb-3 uppercase tracking-wider">Setup (todos os providers OpenAI-compatible)</div>
|
|
265
|
+
<div class="font-mono text-xs text-stone-700 space-y-1">
|
|
266
|
+
<div><span class="text-clay-500">export</span> CLAUDE_CODE_USE_OPENAI=1</div>
|
|
267
|
+
<div><span class="text-clay-500">export</span> OPENAI_API_KEY="sua-chave"</div>
|
|
268
|
+
<div><span class="text-clay-500">export</span> OPENAI_BASE_URL="endpoint"</div>
|
|
269
|
+
<div><span class="text-clay-500">export</span> OPENAI_MODEL="modelo"</div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<!-- Provider tabs -->
|
|
275
|
+
<div class="flex flex-wrap gap-2 mb-8 justify-center reveal" id="providerTabs">
|
|
276
|
+
<button class="provider-tab active px-3 py-2 text-xs font-medium cursor-pointer" data-provider="openai" onclick="switchProvider('openai')">OpenAI</button>
|
|
277
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="codex" onclick="switchProvider('codex')">Codex</button>
|
|
278
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="deepseek" onclick="switchProvider('deepseek')">DeepSeek</button>
|
|
279
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="gemini" onclick="switchProvider('gemini')">Gemini</button>
|
|
280
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="ollama" onclick="switchProvider('ollama')">Ollama</button>
|
|
281
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="groq" onclick="switchProvider('groq')">Groq</button>
|
|
282
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="mistral" onclick="switchProvider('mistral')">Mistral</button>
|
|
283
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="together" onclick="switchProvider('together')">Together AI</button>
|
|
284
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="lmstudio" onclick="switchProvider('lmstudio')">LM Studio</button>
|
|
285
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="atomic" onclick="switchProvider('atomic')">Atomic Chat</button>
|
|
286
|
+
<button class="provider-tab px-3 py-2 text-xs font-medium text-stone-500 cursor-pointer" data-provider="azure" onclick="switchProvider('azure')">Azure</button>
|
|
287
|
+
</div>
|
|
288
|
+
|
|
289
|
+
<!-- Provider details -->
|
|
290
|
+
<div class="max-w-4xl mx-auto reveal" id="providerDetails">
|
|
291
|
+
<div class="scandinavian-card p-8">
|
|
292
|
+
<div class="grid md:grid-cols-3 gap-6">
|
|
293
|
+
<div>
|
|
294
|
+
<h3 class="text-lg font-semibold text-stone-900 mb-1" id="provName">OpenAI</h3>
|
|
295
|
+
<p class="text-sm text-stone-500 mb-4" id="provDesc">GPT-4o, o1, o3 — modelos de ponta</p>
|
|
296
|
+
</div>
|
|
297
|
+
<div class="font-mono text-xs text-stone-600 space-y-1" id="provVars">
|
|
298
|
+
<div><span class="text-clay-500">export</span> OPENAI_API_KEY=sk-sua-chave</div>
|
|
299
|
+
<div><span class="text-clay-500">export</span> OPENAI_MODEL=gpt-4o</div>
|
|
300
|
+
<div class="text-stone-400 mt-2">BASE_URL = padrão (api.openai.com)</div>
|
|
301
|
+
</div>
|
|
302
|
+
<div>
|
|
303
|
+
<div class="text-xs text-stone-400 uppercase tracking-wider mb-2">Modelos</div>
|
|
304
|
+
<div class="flex flex-wrap gap-1.5" id="provModels">
|
|
305
|
+
<span class="px-2 py-1 text-xs bg-stone-100 text-stone-700 font-mono">gpt-4o</span>
|
|
306
|
+
<span class="px-2 py-1 text-xs bg-stone-100 text-stone-700 font-mono">gpt-4o-mini</span>
|
|
307
|
+
<span class="px-2 py-1 text-xs bg-stone-100 text-stone-700 font-mono">o1</span>
|
|
308
|
+
<span class="px-2 py-1 text-xs bg-stone-100 text-stone-700 font-mono">o3-mini</span>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="mt-4 flex items-center gap-4 text-xs text-stone-400" id="provCaps">
|
|
311
|
+
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-pine-400" style="border-radius:50%"></span> Streaming</span>
|
|
312
|
+
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-pine-400" style="border-radius:50%"></span> Tool Calling</span>
|
|
313
|
+
<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 bg-stone-300" style="border-radius:50%"></span> ~128K ctx</span>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
</div>
|
|
318
|
+
</div>
|
|
319
|
+
</div>
|
|
320
|
+
</section>
|
|
321
|
+
|
|
322
|
+
<!-- ====== FEATURES ====== -->
|
|
323
|
+
<section id="features" class="py-24">
|
|
324
|
+
<div class="max-w-6xl mx-auto px-6">
|
|
325
|
+
<div class="text-center mb-16 reveal">
|
|
326
|
+
<h2 class="font-serif text-4xl md:text-5xl text-stone-900 mb-4" style="font-family:'DM Serif Display',serif">Tudo o que ele faz.</h2>
|
|
327
|
+
<p class="text-stone-500 max-w-md mx-auto">Não é só chat. É ferramenta de trabalho.</p>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 reveal">
|
|
331
|
+
<div class="scandinavian-card p-6">
|
|
332
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
333
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25"/></svg>
|
|
334
|
+
</div>
|
|
335
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">Shim OpenAI</h3>
|
|
336
|
+
<p class="text-sm text-stone-500 leading-relaxed">Traduz Anthropic ↔ OpenAI. Tool calls, streaming, system prompts — o modelo nem sabe que é outro.</p>
|
|
337
|
+
</div>
|
|
338
|
+
|
|
339
|
+
<div class="scandinavian-card p-6">
|
|
340
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
341
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 52.43 52.43 0 0 1-2.676-.283 52.466 52.466 0 0 0-4.09-.348c-.775-.03-1.428.547-1.428 1.323 0 .695.552 1.254 1.246 1.283l.33.014c1.07.046 2.139.12 3.204.222m13.32-2.086a.64.64 0 0 1-.657-.643v0c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0c0 .333-.277.62-.61.658a52.29 52.29 0 0 1-2.634.266"/></svg>
|
|
342
|
+
</div>
|
|
343
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">45 Tools</h3>
|
|
344
|
+
<p class="text-sm text-stone-500 leading-relaxed">Bash, FileRead, FileEdit, Glob, Grep, WebFetch, Agent, MCP. Cada uma com schema Zod validado.</p>
|
|
345
|
+
</div>
|
|
346
|
+
|
|
347
|
+
<div class="scandinavian-card p-6">
|
|
348
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
349
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.75 3v11.25A.75.75 0 0 0 7.5 15h9a.75.75 0 0 0 .75-.75V3m-3.75 6h-4.5"/></svg>
|
|
350
|
+
</div>
|
|
351
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">~100+ Commands</h3>
|
|
352
|
+
<p class="text-sm text-stone-500 leading-relaxed">/status, /provider, /model, /plan, /tasks, /clear. Fast-path dispatch, TUI em React 19.</p>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<div class="scandinavian-card p-6">
|
|
356
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
357
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>
|
|
358
|
+
</div>
|
|
359
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">Multi-Agent</h3>
|
|
360
|
+
<p class="text-sm text-stone-500 leading-relaxed">7 tipos de tasks, 5 tipos de agents. Swarm orchestration com abort hierárquico.</p>
|
|
361
|
+
</div>
|
|
362
|
+
|
|
363
|
+
<div class="scandinavian-card p-6">
|
|
364
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
365
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Z"/></svg>
|
|
366
|
+
</div>
|
|
367
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">Memória persistente</h3>
|
|
368
|
+
<p class="text-sm text-stone-500 leading-relaxed">File-based. 4 tipos: user, feedback, project, reference. Persiste entre sessões.</p>
|
|
369
|
+
</div>
|
|
370
|
+
|
|
371
|
+
<div class="scandinavian-card p-6">
|
|
372
|
+
<div class="w-10 h-10 bg-stone-100 flex items-center justify-center mb-4" style="border-radius:2px">
|
|
373
|
+
<svg class="w-5 h-5 text-clay-500" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6 11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"/></svg>
|
|
374
|
+
</div>
|
|
375
|
+
<h3 class="text-base font-semibold text-stone-900 mb-2">Security hardening</h3>
|
|
376
|
+
<p class="text-sm text-stone-500 leading-relaxed">23 checks no Bash, tree-sitter AST, 20+ regexes. Doctor runtime embutido pra validar setup.</p>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</section>
|
|
381
|
+
|
|
382
|
+
<!-- ====== FAQ ====== -->
|
|
383
|
+
<section id="faq" class="py-24 bg-white border-t border-stone-200">
|
|
384
|
+
<div class="max-w-2xl mx-auto px-6">
|
|
385
|
+
<div class="text-center mb-12 reveal">
|
|
386
|
+
<h2 class="font-serif text-4xl md:text-5xl text-stone-900 mb-4" style="font-family:'DM Serif Display',serif">Perguntas.</h2>
|
|
387
|
+
<p class="text-stone-500">O que as pessoas sempre perguntam.</p>
|
|
388
|
+
</div>
|
|
389
|
+
|
|
390
|
+
<div class="space-y-0 reveal" id="faqList">
|
|
391
|
+
<div class="faq-item border-b border-stone-200">
|
|
392
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
393
|
+
<span class="text-sm font-medium text-stone-800 pr-8">Precisa pagar alguma coisa?</span>
|
|
394
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
395
|
+
</button>
|
|
396
|
+
<div class="faq-answer">
|
|
397
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Não. O Claudinho é open-source (MIT). O único custo é do teu provider — e Ollama é 100% grátis e local.</p>
|
|
398
|
+
</div>
|
|
399
|
+
</div>
|
|
400
|
+
|
|
401
|
+
<div class="faq-item border-b border-stone-200">
|
|
402
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
403
|
+
<span class="text-sm font-medium text-stone-800 pr-8">Funciona no Windows?</span>
|
|
404
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
405
|
+
</button>
|
|
406
|
+
<div class="faq-answer">
|
|
407
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Sim, roda em Windows, macOS e Linux. Sandbox nativo só no macOS e WSL2, mas o resto funciona em tudo.</p>
|
|
408
|
+
</div>
|
|
409
|
+
</div>
|
|
410
|
+
|
|
411
|
+
<div class="faq-item border-b border-stone-200">
|
|
412
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
413
|
+
<span class="text-sm font-medium text-stone-800 pr-8">Precisa de GPU ou máquina potente?</span>
|
|
414
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
415
|
+
</button>
|
|
416
|
+
<div class="faq-answer">
|
|
417
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Pra providers cloud (OpenAI, Gemini, etc): não. Pra Ollama local: depende do modelo. Modelos pequenos rodam em notebook normal.</p>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
<div class="faq-item border-b border-stone-200">
|
|
422
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
423
|
+
<span class="text-sm font-medium text-stone-800 pr-8">É afiliado à Anthropic?</span>
|
|
424
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
425
|
+
</button>
|
|
426
|
+
<div class="faq-answer">
|
|
427
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Não. O Claudinho não é afiliado ou endossado pela Anthropic. É um projeto independente.</p>
|
|
428
|
+
</div>
|
|
429
|
+
</div>
|
|
430
|
+
|
|
431
|
+
<div class="faq-item border-b border-stone-200">
|
|
432
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
433
|
+
<span class="text-sm font-medium text-stone-800 pr-8">Roda tracking ou envia dados pra alguém?</span>
|
|
434
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
435
|
+
</button>
|
|
436
|
+
<div class="faq-answer">
|
|
437
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Não. Analytics (Datadog, GrowthBook) é desligado por padrão. ~2000 linhas de código de tracking removidas do build. Seus dados ficam seus.</p>
|
|
438
|
+
</div>
|
|
439
|
+
</div>
|
|
440
|
+
|
|
441
|
+
<div class="faq-item border-b border-stone-200">
|
|
442
|
+
<button class="faq-btn w-full flex items-center justify-between py-5 text-left cursor-pointer" onclick="toggleFaq(this)">
|
|
443
|
+
<span class="text-sm font-medium text-stone-800 pr-8">Qual modelo eu devia usar pra começar?</span>
|
|
444
|
+
<svg class="w-5 h-5 text-stone-400 flex-shrink-0" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" d="M12 5v14m7-7H5"/></svg>
|
|
445
|
+
</button>
|
|
446
|
+
<div class="faq-answer">
|
|
447
|
+
<p class="text-sm text-stone-500 leading-relaxed pb-5">Se quer grátis: OpenRouter com o tier free (qwen/qwen3.6-plus:free). Se quer o melhor: GPT-4o da OpenAI. Se quer local: Ollama com llama3.1:8b. Usa <code class="bg-stone-100 px-1 text-stone-700">bun run profile:recommend</code> pra uma recomendação automática.</p>
|
|
448
|
+
</div>
|
|
449
|
+
</div>
|
|
450
|
+
</div>
|
|
451
|
+
</div>
|
|
452
|
+
</section>
|
|
453
|
+
|
|
454
|
+
<!-- ====== FULL STOP ====== -->
|
|
455
|
+
<section class="py-24 bg-stone-100">
|
|
456
|
+
<div class="max-w-2xl mx-auto px-6 text-center">
|
|
457
|
+
<h2 class="font-serif text-4xl md:text-5xl text-stone-900 mb-4" style="font-family:'DM Serif Display',serif">Bora?</h2>
|
|
458
|
+
<div class="space-y-4 mb-10 text-sm text-stone-600">
|
|
459
|
+
<p>11 providers. 45 tools. ~100 commands.<br>MIT license. Zero tracking. Feito no Brasil.</p>
|
|
460
|
+
</div>
|
|
461
|
+
|
|
462
|
+
<div class="bg-white border border-stone-200 p-6 text-left font-mono text-sm max-w-lg mx-auto mb-8" style="border-radius:2px">
|
|
463
|
+
<div class="text-stone-400 text-xs mb-3"># Instala e roda</div>
|
|
464
|
+
<div class="text-stone-700">npm i -g <span class="text-clay-500 font-semibold">@touchzada/claudinho</span></div>
|
|
465
|
+
<div class="text-stone-700 mt-2">export OPENAI_API_KEY="sua-chave"</div>
|
|
466
|
+
<div class="text-stone-700 mt-2">claudinho</div>
|
|
467
|
+
</div>
|
|
468
|
+
|
|
469
|
+
<a href="https://github.com/touchzada/Claudinho" target="_blank" class="scandinavian-btn inline-flex items-center gap-2 px-8 py-4 text-white font-medium text-sm" style="border-radius:2px">
|
|
470
|
+
Ver no GitHub
|
|
471
|
+
</a>
|
|
472
|
+
|
|
473
|
+
<div class="mt-20 pt-8 border-t border-stone-200 text-xs text-stone-400">
|
|
474
|
+
<p>Claudinho v0.1.8 · Feito com muito café, código e teimosia.</p>
|
|
475
|
+
<p class="mt-2">MIT License · <a href="https://github.com/touchzada/Claudinho" class="underline hover:text-stone-600">touchzada/Claudinho</a></p>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
</section>
|
|
479
|
+
|
|
480
|
+
<script>
|
|
481
|
+
// Provider data
|
|
482
|
+
const providers = {
|
|
483
|
+
openai: {
|
|
484
|
+
name: 'OpenAI', desc: 'GPT-4o, o1, o3-mini — modelos de ponta',
|
|
485
|
+
vars: ['OPENAI_API_KEY=sk-sua-chave', 'OPENAI_MODEL=gpt-4o', 'BASE_URL = padrão (api.openai.com)'],
|
|
486
|
+
models: ['gpt-4o', 'gpt-4o-mini', 'o1', 'o3-mini'],
|
|
487
|
+
caps: [{ label: 'Streaming', ok: true }, { label: 'Tool Calling', ok: true }, { label: '~128K ctx', ok: false }]
|
|
488
|
+
},
|
|
489
|
+
codex: {
|
|
490
|
+
name: 'Codex (ChatGPT auth)', desc: 'codexplan usa GPT-5.4. codexspark usa 5.3',
|
|
491
|
+
vars: ['OPENAI_MODEL=codexplan', 'CODEX_API_KEY=sua-chave', 'Lê ~/.codex/auth.json automaticamente'],
|
|
492
|
+
models: ['codexplan', 'codexspark'],
|
|
493
|
+
caps: [{ label: 'Alto raciocínio', ok: true }, { label: 'Auto-auth', ok: true }, { label: 'POST /responses', ok: true }]
|
|
494
|
+
},
|
|
495
|
+
deepseek: {
|
|
496
|
+
name: 'DeepSeek', desc: 'R1 com reasoning — open-source, barato',
|
|
497
|
+
vars: ['OPENAI_API_KEY=sk-sua-chave', 'OPENAI_BASE_URL=https://api.deepseek.com/v1', 'OPENAI_MODEL=deepseek-chat'],
|
|
498
|
+
models: ['deepseek-reasoner', 'deepseek-chat', 'deepseek-coder'],
|
|
499
|
+
caps: [{ label: 'Reasoning', ok: true }, { label: 'Tool Calling', ok: true }, { label: '~64K ctx', ok: false }]
|
|
500
|
+
},
|
|
501
|
+
gemini: {
|
|
502
|
+
name: 'Google Gemini', desc: 'Gemini 2.5 Pro — 1M tokens de contexto',
|
|
503
|
+
vars: ['OPENAI_API_KEY=sk-or-sua-chave', 'OPENAI_BASE_URL=https://openrouter.ai/api/v1', 'OPENAI_MODEL=google/gemini-2.0-flash-001'],
|
|
504
|
+
models: ['gemini-2.5-pro', 'gemini-2.5-flash', 'gemini-2.0-flash'],
|
|
505
|
+
caps: [{ label: '1M context', ok: true }, { label: 'Tool Calling', ok: true }, { label: 'Vision', ok: true }]
|
|
506
|
+
},
|
|
507
|
+
ollama: {
|
|
508
|
+
name: 'Ollama (Local)', desc: 'Sem API key. Roda na tua máquina.',
|
|
509
|
+
vars: ['OPENAI_BASE_URL=http://localhost:11434/v1', 'OPENAI_MODEL=llama3.3:70b', 'Sem API key needed'],
|
|
510
|
+
models: ['llama3.3:70b', 'qwen2.5', 'mistral', 'deepseek-coder', 'phi4'],
|
|
511
|
+
caps: [{ label: '100% local', ok: true }, { label: 'Sem API key', ok: true }, { label: 'Profile recommend', ok: true }]
|
|
512
|
+
},
|
|
513
|
+
groq: {
|
|
514
|
+
name: 'Groq', desc: 'Inferência LPU — o mais rápido que existe',
|
|
515
|
+
vars: ['OPENAI_API_KEY=gsk_sua-chave', 'OPENAI_BASE_URL=https://api.groq.com/openai/v1', 'OPENAI_MODEL=llama-3.3-70b-versatile'],
|
|
516
|
+
models: ['llama-3.3-70b-versatile', 'mixtral-8x7b', 'gemma2-9b'],
|
|
517
|
+
caps: [{ label: 'Sub-second', ok: true }, { label: 'Tool Calling', ok: true }, { label: '~32K ctx', ok: false }]
|
|
518
|
+
},
|
|
519
|
+
mistral: {
|
|
520
|
+
name: 'Mistral AI', desc: 'Europeu, GDPR-friendly. Mistral Large, Codestral',
|
|
521
|
+
vars: ['OPENAI_API_KEY=sua-chave', 'OPENAI_BASE_URL=https://api.mistral.ai/v1', 'OPENAI_MODEL=mistral-large-latest'],
|
|
522
|
+
models: ['mistral-large-latest', 'pixtral-12b', 'codestral-latest'],
|
|
523
|
+
caps: [{ label: 'Tool Calling', ok: true }, { label: 'Vision', ok: true }, { label: '~32K ctx', ok: false }]
|
|
524
|
+
},
|
|
525
|
+
together: {
|
|
526
|
+
name: 'Together AI', desc: '50+ modelos open-source, preço baixo',
|
|
527
|
+
vars: ['OPENAI_API_KEY=sua-chave', 'OPENAI_BASE_URL=https://api.together.xyz/v1', 'OPENAI_MODEL=meta-llama/Llama-3.3-70B-Instruct-Turbo'],
|
|
528
|
+
models: ['Llama-3.3-70B', 'Qwen-72B', '+50 modelos'],
|
|
529
|
+
caps: [{ label: '50+ modelos', ok: true }, { label: 'Tool Calling', ok: true }, { label: 'Preço baixo', ok: true }]
|
|
530
|
+
},
|
|
531
|
+
lmstudio: {
|
|
532
|
+
name: 'LM Studio (Local)', desc: 'GUI amigável. Qualquer GGUF. Sem chave.',
|
|
533
|
+
vars: ['OPENAI_BASE_URL=http://localhost:1234/v1', 'OPENAI_MODEL=nome-do-modelo', 'Sem API key needed'],
|
|
534
|
+
models: ['Qualquer GGUF'],
|
|
535
|
+
caps: [{ label: 'Local', ok: true }, { label: 'Sem API key', ok: true }, { label: 'Qualquer GGUF', ok: true }]
|
|
536
|
+
},
|
|
537
|
+
atomic: {
|
|
538
|
+
name: 'Atomic Chat (Apple Silicon)', desc: 'Local em macOS. atomic.chat',
|
|
539
|
+
vars: ['OPENAI_BASE_URL=http://127.0.0.1:1337/v1', 'OPENAI_MODEL=nome-do-modelo', 'Sem API key needed'],
|
|
540
|
+
models: ['Detecta automaticamente'],
|
|
541
|
+
caps: [{ label: 'Apple Silicon', ok: true }, { label: 'Local', ok: true }, { label: 'Auto-detect', ok: true }]
|
|
542
|
+
},
|
|
543
|
+
azure: {
|
|
544
|
+
name: 'Azure OpenAI', desc: 'Enterprise — VPC privada, IAM, SLA',
|
|
545
|
+
vars: ['OPENAI_API_KEY=chave-azure', 'OPENAI_BASE_URL=https://seu-recurso.openai.azure.com/.../v1', 'OPENAI_MODEL=gpt-4o'],
|
|
546
|
+
models: ['gpt-4o', 'gpt-4o-mini', 'dall-e-3'],
|
|
547
|
+
caps: [{ label: 'Azure IAM', ok: true }, { label: 'Private network', ok: true }, { label: 'Enterprise', ok: true }]
|
|
548
|
+
}
|
|
549
|
+
};
|
|
550
|
+
|
|
551
|
+
function switchProvider(name) {
|
|
552
|
+
const p = providers[name];
|
|
553
|
+
if (!p) return;
|
|
554
|
+
// Update tab styling
|
|
555
|
+
document.querySelectorAll('.provider-tab').forEach(t => {
|
|
556
|
+
t.classList.remove('active', 'bg-white/10', 'text-white');
|
|
557
|
+
t.classList.add('text-stone-500');
|
|
558
|
+
});
|
|
559
|
+
const tab = document.querySelector(`.provider-tab[data-provider="${name}"]`);
|
|
560
|
+
if (tab) { tab.classList.add('active'); tab.classList.remove('text-stone-500'); }
|
|
561
|
+
// Update content
|
|
562
|
+
document.getElementById('provName').textContent = p.name;
|
|
563
|
+
document.getElementById('provDesc').textContent = p.desc;
|
|
564
|
+
document.getElementById('provVars').innerHTML = p.vars.map((v, i) =>
|
|
565
|
+
`<div><span class="text-clay-500">export</span> ${v.replace(/^export /, '')}</div>`
|
|
566
|
+
).join('');
|
|
567
|
+
document.getElementById('provModels').innerHTML = p.models.map(m =>
|
|
568
|
+
`<span class="px-2 py-1 text-xs bg-stone-100 text-stone-700 font-mono">${m}</span>`
|
|
569
|
+
).join('');
|
|
570
|
+
document.getElementById('provCaps').innerHTML = p.caps.map(c =>
|
|
571
|
+
`<span class="flex items-center gap-1"><span class="w-1.5 h-1.5 ${c.ok ? 'bg-pine-400' : 'bg-stone-300'}" style="border-radius:50%"></span> ${c.label}</span>`
|
|
572
|
+
).join('');
|
|
573
|
+
// Trigger animation
|
|
574
|
+
const detail = document.getElementById('providerDetails');
|
|
575
|
+
detail.style.opacity = '0'; detail.style.transform = 'translateY(10px)';
|
|
576
|
+
requestAnimationFrame(() => {
|
|
577
|
+
detail.style.transition = 'all 0.4s ease';
|
|
578
|
+
detail.style.opacity = '1'; detail.style.transform = 'translateY(0)';
|
|
579
|
+
});
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
// FAQ accordion
|
|
583
|
+
function toggleFaq(btn) {
|
|
584
|
+
const answer = btn.nextElementSibling;
|
|
585
|
+
const isActive = answer.classList.contains('open');
|
|
586
|
+
// Close all
|
|
587
|
+
document.querySelectorAll('.faq-answer').forEach(a => a.classList.remove('open'));
|
|
588
|
+
document.querySelectorAll('.faq-btn').forEach(b => b.classList.remove('active'));
|
|
589
|
+
// Toggle current
|
|
590
|
+
if (!isActive) { answer.classList.add('open'); btn.classList.add('active'); }
|
|
591
|
+
}
|
|
592
|
+
|
|
593
|
+
// Scroll reveal
|
|
594
|
+
const observer = new IntersectionObserver((entries) => {
|
|
595
|
+
entries.forEach(entry => {
|
|
596
|
+
if (entry.isIntersecting) {
|
|
597
|
+
entry.target.classList.add('visible');
|
|
598
|
+
}
|
|
599
|
+
});
|
|
600
|
+
}, { threshold: 0.1 });
|
|
601
|
+
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
|
602
|
+
</script>
|
|
603
|
+
</body>
|
|
604
|
+
</html>
|