Hugging Face's logo

Spaces:
Tommyculdaet
/
ollamachat
Running

App Files Community
Tommyculdaet commited on
Commit
74e074d
·
verified ·
1 Parent(s): 4e0f4a3

1. Revolutionary External SSD Feature ⭐ #1 DIFFERENTIATOR Headline: "The Only AI Chat App That Solves the Storage Problem" ✅ Seamless external drive integration - First app to properly handle SSD storage ✅ Massive model libraries - Store 50+ AI models without bloating your main drive ✅ Smart drive detection - Automatic setup with /Volumes/Extreme SSD/ollama-models/ ✅ Professional implementation - Not a hack, built-in enterprise-grade functionality 2. Complete Privacy & Offline Operation 🔒 Headline: "Your Conversations Never Leave Your Computer" ✅ 100% local processing - No cloud servers, no data transmission ✅ Works without internet - Crisis-resistant, censorship-proof ✅ GDPR/HIPAA friendly - Perfect for sensitive industries ✅ External SSD encryption ready - Your data, your control 3. Beautiful Professional Interface 🎨 Headline: "Finally, an AI App That Doesn't Look Like a Terminal" ✅ Glassmorphism design system - Modern, polished, desktop-class UI ✅ Smart status management - Offline → Starting → Loading → Ready ✅ Intelligent error handling - Professional user experience ✅ Responsive animations - Smooth, delightful interactions 💡 KEY FEATURES TO HIGHLIGHT Core Functionality Local Ollama Integration: phi3:mini, phi3:medium, llama2, qwen2.5 support Model Management: Download, switch, monitor performance in beautiful UI Smart Onboarding: Question-based slider setup with progress tracking Chat History: Persistent conversations with markdown formatting Shortcut System: Quick access to common AI tasks Technical Excellence Electron Desktop App: Native performance, cross-platform compatibility Python Backend: Robust API communication with error recovery Modular Architecture: Clean, maintainable, documented codebase External Drive Config: Automatic OLLAMA_MODELS environment setup Advanced Capabilities (From IMPORTANT_NOTES.md) Voice Interface Ready: TTS/STT integration capabilities Document Analysis: RAG potential with external SSD knowledge base Multi-Persona System: Different AI personalities in same app LangChain Integration: Smart memory, document intelligence (optional) 🎨 VISUAL DESIGN DIRECTION Hero Section " Color Scheme (Match your app) Primary: Purple gradient (#6366f1 to #8b5cf6) Hover: Darker purple (#4f46e5 to #7c3aed) Text: Clean black/white with good contrast Accents: Glassmorphism cards with backdrop blur Typography Headlines: Bold, modern sans-serif Body: Clean, readable (match your app's font system) Code: Monospace for technical details 📑 LANDING PAGE SECTIONS 1. Hero Section screenshot 2. Problem/Solution Section downloads 3. External SSD Feature Showcase ⭐ HERO SECTION User 4. Privacy & Security Section privacy 5. Beautiful Interface Showcase management 6. Technical Features " 7. Use Cases & Target Audience collection 8. Pricing Section " 9. Technical Specifications onboarding 10. Social Proof & Testimonials " 11. FAQ Section " 12. Call-to-Action Footer support 🎯 CONVERSION OPTIMIZATION Primary CTAs (Use throughout page) "Start 10-Day Free Trial" - Main conversion goal "Download Free Demo" - Lead generation alternative "Watch Demo Video" - Engagement option Value Reinforcement Points Mention "external SSD" in every major section Show pricing comparison vs. cloud AI costs Emphasize "no credit card" for trial Include "money-back guarantee" Trust Signals GitHub repository link and star count Professional documentation Customer support contact Privacy policy and terms 📱 MOBILE RESPONSIVENESS Mobile-first design with your app's gradient theme Collapsible sections for easy mobile navigation Touch-friendly CTAs with proper sizing Fast loading with optimized images Progressive enhancement for different screen sizes 🔍 SEO & MARKETING Target Keywords "Ollama chat app" "External SSD AI models" "Private AI chat desktop" "Local AI models storage" "Offline AI assistant" Meta Tags > ✅ IMPLEMENTATION CHECKLIST [ ] Hero section with external SSD value prop [ ] Problem/solution addressing storage issues [ ] Feature showcase with beautiful screenshots [ ] Privacy section emphasizing local processing [ ] Pricing with 10-day trial prominently displayed [ ] Use cases for target audiences [ ] Technical specs and compatibility [ ] FAQ addressing common concerns [ ] Multiple CTAs throughout page [ ] Mobile responsive design [ ] Fast loading optimized performance 🎯 Core Message: "Finally, an AI chat app that solves the storage problem, looks professional, and keeps your data private." 💰 Value Prop: "$15/month for unlimited private AI conversations with external SSD storage - try 10 days free!" 1 - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +701 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ollamachat
3
- emoji: 🐢
4
- colorFrom: gray
5
- colorTo: indigo
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: ollamachat
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: red
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,701 @@
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>Ollama AI - Private AI Chat with External SSD Storage</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
+ .glass-card {
11
+ background: rgba(255, 255, 255, 0.1);
12
+ backdrop-filter: blur(10px);
13
+ -webkit-backdrop-filter: blur(10px);
14
+ border: 1px solid rgba(255, 255, 255, 0.18);
15
+ }
16
+ .gradient-text {
17
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
18
+ -webkit-background-clip: text;
19
+ background-clip: text;
20
+ color: transparent;
21
+ }
22
+ .gradient-bg {
23
+ background: linear-gradient(135deg, #6366f1, #8b5cf6);
24
+ }
25
+ .hover-gradient-bg:hover {
26
+ background: linear-gradient(135deg, #4f46e5, #7c3aed);
27
+ }
28
+ .feature-icon {
29
+ width: 60px;
30
+ height: 60px;
31
+ display: flex;
32
+ align-items: center;
33
+ justify-content: center;
34
+ border-radius: 16px;
35
+ background: rgba(255, 255, 255, 0.1);
36
+ margin-bottom: 1rem;
37
+ }
38
+ .screenshot-container {
39
+ perspective: 1000px;
40
+ }
41
+ .screenshot {
42
+ transform: rotateY(-5deg) rotateX(5deg);
43
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
44
+ transition: all 0.3s ease;
45
+ }
46
+ .screenshot:hover {
47
+ transform: rotateY(0) rotateX(0);
48
+ }
49
+ .animated-underline {
50
+ position: relative;
51
+ display: inline-block;
52
+ }
53
+ .animated-underline::after {
54
+ content: '';
55
+ position: absolute;
56
+ width: 100%;
57
+ transform: scaleX(0);
58
+ height: 2px;
59
+ bottom: -2px;
60
+ left: 0;
61
+ background: linear-gradient(90deg, #6366f1, #8b5cf6);
62
+ transform-origin: bottom right;
63
+ transition: transform 0.25s ease-out;
64
+ }
65
+ .animated-underline:hover::after {
66
+ transform: scaleX(1);
67
+ transform-origin: bottom left;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body class="bg-gray-50 font-sans text-gray-800">
72
+ <!-- Navigation -->
73
+ <nav class="bg-white shadow-sm sticky top-0 z-50">
74
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
75
+ <div class="flex justify-between h-16">
76
+ <div class="flex items-center">
77
+ <div class="flex-shrink-0 flex items-center">
78
+ <span class="text-xl font-bold gradient-text">Ollama AI</span>
79
+ </div>
80
+ </div>
81
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
82
+ <a href="#features" class="animated-underline px-3 py-2 text-sm font-medium">Features</a>
83
+ <a href="#privacy" class="animated-underline px-3 py-2 text-sm font-medium">Privacy</a>
84
+ <a href="#pricing" class="animated-underline px-3 py-2 text-sm font-medium">Pricing</a>
85
+ <a href="#faq" class="animated-underline px-3 py-2 text-sm font-medium">FAQ</a>
86
+ </div>
87
+ <div class="flex items-center">
88
+ <a href="#download" class="ml-8 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white gradient-bg hover-gradient-bg shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
89
+ Download Free Demo
90
+ </a>
91
+ </div>
92
+ </div>
93
+ </div>
94
+ </nav>
95
+
96
+ <!-- Hero Section -->
97
+ <section class="gradient-bg text-white">
98
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-32">
99
+ <div class="md:flex items-center justify-between">
100
+ <div class="md:w-1/2 mb-10 md:mb-0">
101
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
102
+ The Only AI Chat App That Solves the <span class="gradient-text bg-white">Storage Problem</span>
103
+ </h1>
104
+ <p class="text-xl mb-8 opacity-90">
105
+ Store 50+ AI models on your external SSD with seamless integration, beautiful interface, and complete privacy.
106
+ </p>
107
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
108
+ <a href="#download" class="px-8 py-4 bg-white text-purple-600 font-bold rounded-lg text-center hover:bg-gray-100 transition duration-300 shadow-lg">
109
+ Start 10-Day Free Trial
110
+ </a>
111
+ <a href="#features" class="px-8 py-4 border-2 border-white text-white font-bold rounded-lg text-center hover:bg-white hover:bg-opacity-10 transition duration-300">
112
+ Watch Demo Video
113
+ </a>
114
+ </div>
115
+ </div>
116
+ <div class="md:w-1/2 screenshot-container">
117
+ <img src="https://via.placeholder.com/600x400/6366f1/ffffff?text=App+Screenshot" alt="Ollama AI Interface" class="rounded-xl mx-auto screenshot w-full max-w-md">
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Problem/Solution Section -->
124
+ <section class="py-20 bg-white" id="features">
125
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
126
+ <div class="text-center mb-16">
127
+ <h2 class="text-3xl font-bold mb-4">Tired of AI Apps Filling Up Your Main Drive?</h2>
128
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
129
+ Most AI applications force you to store massive model files on your primary drive. Ollama AI is different.
130
+ </p>
131
+ </div>
132
+
133
+ <div class="grid md:grid-cols-3 gap-8 mb-20">
134
+ <div class="glass-card p-8 rounded-xl">
135
+ <div class="feature-icon">
136
+ <i class="fas fa-hdd text-2xl text-purple-600"></i>
137
+ </div>
138
+ <h3 class="text-xl font-bold mb-3">Storage Problem Solved</h3>
139
+ <p class="text-gray-600">
140
+ Store all your AI models on an external SSD without bloating your main drive. The first app to properly handle external storage.
141
+ </p>
142
+ </div>
143
+ <div class="glass-card p-8 rounded-xl">
144
+ <div class="feature-icon">
145
+ <i class="fas fa-lock text-2xl text-purple-600"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Complete Privacy</h3>
148
+ <p class="text-gray-600">
149
+ 100% local processing means your conversations never leave your computer. GDPR/HIPAA compliant for sensitive data.
150
+ </p>
151
+ </div>
152
+ <div class="glass-card p-8 rounded-xl">
153
+ <div class="feature-icon">
154
+ <i class="fas fa-paint-brush text-2xl text-purple-600"></i>
155
+ </div>
156
+ <h3 class="text-xl font-bold mb-3">Beautiful Interface</h3>
157
+ <p class="text-gray-600">
158
+ Professional desktop-class UI with glassmorphism design, responsive animations, and intelligent status management.
159
+ </p>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </section>
164
+
165
+ <!-- External SSD Feature Showcase -->
166
+ <section class="py-20 bg-gray-50">
167
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
168
+ <div class="md:flex items-center">
169
+ <div class="md:w-1/2 mb-10 md:mb-0">
170
+ <h2 class="text-3xl font-bold mb-6">Revolutionary <span class="gradient-text">External SSD</span> Integration</h2>
171
+ <p class="text-lg text-gray-600 mb-8">
172
+ Our enterprise-grade functionality makes using external drives effortless, not a hack.
173
+ </p>
174
+ <ul class="space-y-4">
175
+ <li class="flex items-start">
176
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
177
+ <span>Seamless external drive integration with automatic setup</span>
178
+ </li>
179
+ <li class="flex items-start">
180
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
181
+ <span>Smart drive detection at <code class="bg-gray-200 px-2 py-1 rounded">/Volumes/Extreme SSD/ollama-models/</code></span>
182
+ </li>
183
+ <li class="flex items-start">
184
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
185
+ <span>Automatic OLLAMA_MODELS environment configuration</span>
186
+ </li>
187
+ <li class="flex items-start">
188
+ <i class="fas fa-check-circle text-purple-600 mt-1 mr-3"></i>
189
+ <span>Support for encrypted drives and network storage</span>
190
+ </li>
191
+ </ul>
192
+ </div>
193
+ <div class="md:w-1/2 pl-10 screenshot-container">
194
+ <img src="https://via.placeholder.com/600x400/8b5cf6/ffffff?text=SSD+Integration" alt="SSD Integration" class="rounded-xl screenshot w-full">
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Privacy Section -->
201
+ <section class="py-20 bg-white" id="privacy">
202
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
203
+ <div class="text-center mb-16">
204
+ <h2 class="text-3xl font-bold mb-4">Your Conversations <span class="gradient-text">Never Leave</span> Your Computer</h2>
205
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
206
+ Unlike cloud-based AI services, Ollama AI processes everything locally for maximum privacy.
207
+ </p>
208
+ </div>
209
+
210
+ <div class="grid md:grid-cols-2 gap-8">
211
+ <div class="glass-card p-8 rounded-xl">
212
+ <h3 class="text-xl font-bold mb-4 flex items-center">
213
+ <i class="fas fa-cloud-slash text-purple-600 mr-3"></i> No Cloud Servers
214
+ </h3>
215
+ <p class="text-gray-600 mb-4">
216
+ All processing happens on your machine. No data is transmitted to any servers, ever.
217
+ </p>
218
+ <p class="text-gray-600">
219
+ Perfect for lawyers, healthcare professionals, and anyone dealing with sensitive information.
220
+ </p>
221
+ </div>
222
+ <div class="glass-card p-8 rounded-xl">
223
+ <h3 class="text-xl font-bold mb-4 flex items-center">
224
+ <i class="fas fa-wifi-slash text-purple-600 mr-3"></i> Offline Operation
225
+ </h3>
226
+ <p class="text-gray-600 mb-4">
227
+ Works completely without internet access. Crisis-resistant and censorship-proof.
228
+ </p>
229
+ <p class="text-gray-600">
230
+ Take it on flights, remote locations, or use it during internet outages.
231
+ </p>
232
+ </div>
233
+ <div class="glass-card p-8 rounded-xl">
234
+ <h3 class="text-xl font-bold mb-4 flex items-center">
235
+ <i class="fas fa-shield-alt text-purple-600 mr-3"></i> Encryption Ready
236
+ </h3>
237
+ <p class="text-gray-600 mb-4">
238
+ Supports encrypted external SSDs for maximum security of your AI models and conversations.
239
+ </p>
240
+ <p class="text-gray-600">
241
+ Your data, your control. We never hold encryption keys.
242
+ </p>
243
+ </div>
244
+ <div class="glass-card p-8 rounded-xl">
245
+ <h3 class="text-xl font-bold mb-4 flex items-center">
246
+ <i class="fas fa-user-secret text-purple-600 mr-3"></i> No Tracking
247
+ </h3>
248
+ <p class="text-gray-600 mb-4">
249
+ No analytics, no telemetry, no hidden data collection.
250
+ </p>
251
+ <p class="text-gray-600">
252
+ We don't want your data - we want to help you keep it private.
253
+ </p>
254
+ </div>
255
+ </div>
256
+ </div>
257
+ </section>
258
+
259
+ <!-- Interface Showcase -->
260
+ <section class="py-20 bg-gray-50">
261
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
262
+ <div class="text-center mb-16">
263
+ <h2 class="text-3xl font-bold mb-4">Finally, an AI App That Doesn't Look Like a Terminal</h2>
264
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
265
+ Professional glassmorphism design with delightful animations and intuitive workflows.
266
+ </p>
267
+ </div>
268
+
269
+ <div class="grid md:grid-cols-3 gap-8 mb-12">
270
+ <div class="glass-card p-6 rounded-xl">
271
+ <div class="h-48 bg-gradient-to-br from-purple-100 to-purple-50 rounded-lg mb-4 flex items-center justify-center">
272
+ <i class="fas fa-comment-dots text-5xl text-purple-600 opacity-50"></i>
273
+ </div>
274
+ <h3 class="text-xl font-bold mb-2">Modern Chat Interface</h3>
275
+ <p class="text-gray-600">
276
+ Clean, markdown-formatted conversations with syntax highlighting for code.
277
+ </p>
278
+ </div>
279
+ <div class="glass-card p-6 rounded-xl">
280
+ <div class="h-48 bg-gradient-to-br from-purple-100 to-purple-50 rounded-lg mb-4 flex items-center justify-center">
281
+ <i class="fas fa-sliders-h text-5xl text-purple-600 opacity-50"></i>
282
+ </div>
283
+ <h3 class="text-xl font-bold mb-2">Smart Model Management</h3>
284
+ <p class="text-gray-600">
285
+ Download, switch, and monitor performance of multiple AI models.
286
+ </p>
287
+ </div>
288
+ <div class="glass-card p-6 rounded-xl">
289
+ <div class="h-48 bg-gradient-to-br from-purple-100 to-purple-50 rounded-lg mb-4 flex items-center justify-center">
290
+ <i class="fas fa-bolt text-5xl text-purple-600 opacity-50"></i>
291
+ </div>
292
+ <h3 class="text-xl font-bold mb-2">Shortcut System</h3>
293
+ <p class="text-gray-600">
294
+ Quick access to common AI tasks with customizable keyboard shortcuts.
295
+ </p>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="text-center">
300
+ <a href="#download" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white gradient-bg hover-gradient-bg">
301
+ <i class="fas fa-play-circle mr-2"></i> Watch Interface Tour
302
+ </a>
303
+ </div>
304
+ </div>
305
+ </section>
306
+
307
+ <!-- Technical Features -->
308
+ <section class="py-20 bg-white">
309
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
310
+ <div class="text-center mb-16">
311
+ <h2 class="text-3xl font-bold mb-4">Built with <span class="gradient-text">Technical Excellence</span></h2>
312
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
313
+ Robust architecture designed for performance and reliability.
314
+ </p>
315
+ </div>
316
+
317
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
318
+ <div class="border border-gray-200 rounded-lg p-6">
319
+ <h3 class="font-bold mb-2 flex items-center">
320
+ <i class="fas fa-microchip text-purple-600 mr-2"></i> Local Ollama Integration
321
+ </h3>
322
+ <p class="text-sm text-gray-600">
323
+ Supports phi3:mini, phi3:medium, llama2, qwen2.5 and more with automatic updates.
324
+ </p>
325
+ </div>
326
+ <div class="border border-gray-200 rounded-lg p-6">
327
+ <h3 class="font-bold mb-2 flex items-center">
328
+ <i class="fas fa-desktop text-purple-600 mr-2"></i> Electron Desktop App
329
+ </h3>
330
+ <p class="text-sm text-gray-600">
331
+ Native performance with cross-platform compatibility (Windows, Mac, Linux).
332
+ </p>
333
+ </div>
334
+ <div class="border border-gray-200 rounded-lg p-6">
335
+ <h3 class="font-bold mb-2 flex items-center">
336
+ <i class="fas fa-code text-purple-600 mr-2"></i> Python Backend
337
+ </h3>
338
+ <p class="text-sm text-gray-600">
339
+ Robust API communication with automatic error recovery and logging.
340
+ </p>
341
+ </div>
342
+ <div class="border border-gray-200 rounded-lg p-6">
343
+ <h3 class="font-bold mb-2 flex items-center">
344
+ <i class="fas fa-project-diagram text-purple-600 mr-2"></i> Modular Architecture
345
+ </h3>
346
+ <p class="text-sm text-gray-600">
347
+ Clean, maintainable, and well-documented codebase for easy extension.
348
+ </p>
349
+ </div>
350
+ <div class="border border-gray-200 rounded-lg p-6">
351
+ <h3 class="font-bold mb-2 flex items-center">
352
+ <i class="fas fa-robot text-purple-600 mr-2"></i> Multi-Persona System
353
+ </h3>
354
+ <p class="text-sm text-gray-600">
355
+ Switch between different AI personalities within the same app.
356
+ </p>
357
+ </div>
358
+ <div class="border border-gray-200 rounded-lg p-6">
359
+ <h3 class="font-bold mb-2 flex items-center">
360
+ <i class="fas fa-file-alt text-purple-600 mr-2"></i> Document Analysis
361
+ </h3>
362
+ <p class="text-sm text-gray-600">
363
+ RAG potential with external SSD knowledge base for document intelligence.
364
+ </p>
365
+ </div>
366
+ <div class="border border-gray-200 rounded-lg p-6">
367
+ <h3 class="font-bold mb-2 flex items-center">
368
+ <i class="fas fa-memory text-purple-600 mr-2"></i> LangChain Integration
369
+ </h3>
370
+ <p class="text-sm text-gray-600">
371
+ Smart memory and context management for more coherent conversations.
372
+ </p>
373
+ </div>
374
+ <div class="border border-gray-200 rounded-lg p-6">
375
+ <h3 class="font-bold mb-2 flex items-center">
376
+ <i class="fas fa-microphone text-purple-600 mr-2"></i> Voice Interface Ready
377
+ </h3>
378
+ <p class="text-sm text-gray-600">
379
+ TTS/STT integration capabilities for future voice interactions.
380
+ </p>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </section>
385
+
386
+ <!-- Pricing Section -->
387
+ <section class="py-20 bg-gray-50" id="pricing">
388
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
389
+ <div class="text-center mb-16">
390
+ <h2 class="text-3xl font-bold mb-4">Simple, <span class="gradient-text">Transparent</span> Pricing</h2>
391
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
392
+ Unlimited private AI conversations with external SSD storage support.
393
+ </p>
394
+ </div>
395
+
396
+ <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
397
+ <div class="glass-card p-8 rounded-xl">
398
+ <h3 class="text-xl font-bold mb-2">Free Demo</h3>
399
+ <p class="text-gray-600 mb-6">Try basic features</p>
400
+ <div class="mb-6">
401
+ <span class="text-4xl font-bold">$0</span>
402
+ <span class="text-gray-600">/ forever</span>
403
+ </div>
404
+ <ul class="space-y-3 mb-8">
405
+ <li class="flex items-start">
406
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
407
+ <span>1 AI model included</span>
408
+ </li>
409
+ <li class="flex items-start">
410
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
411
+ <span>Basic chat functionality</span>
412
+ </li>
413
+ <li class="flex items-start">
414
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
415
+ <span>Local storage only</span>
416
+ </li>
417
+ <li class="flex items-start text-gray-400">
418
+ <i class="fas fa-times mt-1 mr-2"></i>
419
+ <span>No external SSD support</span>
420
+ </li>
421
+ </ul>
422
+ <a href="#download" class="block w-full py-3 px-4 border border-transparent text-center font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200">
423
+ Download Free
424
+ </a>
425
+ </div>
426
+
427
+ <div class="glass-card p-8 rounded-xl relative border-2 border-purple-500">
428
+ <div class="absolute top-0 right-0 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
429
+ MOST POPULAR
430
+ </div>
431
+ <h3 class="text-xl font-bold mb-2">Pro Subscription</h3>
432
+ <p class="text-gray-600 mb-6">For professionals & power users</p>
433
+ <div class="mb-6">
434
+ <span class="text-4xl font-bold">$15</span>
435
+ <span class="text-gray-600">/ month</span>
436
+ </div>
437
+ <ul class="space-y-3 mb-8">
438
+ <li class="flex items-start">
439
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
440
+ <span>Unlimited AI models</span>
441
+ </li>
442
+ <li class="flex items-start">
443
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
444
+ <span>External SSD integration</span>
445
+ </li>
446
+ <li class="flex items-start">
447
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
448
+ <span>Advanced model management</span>
449
+ </li>
450
+ <li class="flex items-start">
451
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
452
+ <span>Priority support</span>
453
+ </li>
454
+ </ul>
455
+ <a href="#download" class="block w-full py-3 px-4 border border-transparent text-center font-medium rounded-md text-white gradient-bg hover-gradient-bg shadow-sm">
456
+ Start 10-Day Free Trial
457
+ </a>
458
+ </div>
459
+
460
+ <div class="glass-card p-8 rounded-xl">
461
+ <h3 class="text-xl font-bold mb-2">Enterprise</h3>
462
+ <p class="text-gray-600 mb-6">For organizations</p>
463
+ <div class="mb-6">
464
+ <span class="text-4xl font-bold">Custom</span>
465
+ </div>
466
+ <ul class="space-y-3 mb-8">
467
+ <li class="flex items-start">
468
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
469
+ <span>Everything in Pro</span>
470
+ </li>
471
+ <li class="flex items-start">
472
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
473
+ <span>Volume licensing</span>
474
+ </li>
475
+ <li class="flex items-start">
476
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
477
+ <span>Dedicated support</span>
478
+ </li>
479
+ <li class="flex items-start">
480
+ <i class="fas fa-check text-purple-600 mt-1 mr-2"></i>
481
+ <span>Custom integrations</span>
482
+ </li>
483
+ </ul>
484
+ <a href="#contact" class="block w-full py-3 px-4 border border-transparent text-center font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200">
485
+ Contact Sales
486
+ </a>
487
+ </div>
488
+ </div>
489
+
490
+ <div class="text-center mt-12 text-gray-600">
491
+ <p>All plans come with a 30-day money-back guarantee. No credit card required for trial.</p>
492
+ </div>
493
+ </div>
494
+ </section>
495
+
496
+ <!-- FAQ Section -->
497
+ <section class="py-20 bg-white" id="faq">
498
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
499
+ <div class="text-center mb-16">
500
+ <h2 class="text-3xl font-bold mb-4">Frequently Asked <span class="gradient-text">Questions</span></h2>
501
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">
502
+ Everything you need to know about Ollama AI and external SSD storage.
503
+ </p>
504
+ </div>
505
+
506
+ <div class="space-y-6">
507
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
508
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none">
509
+ <h3 class="text-lg font-medium">How does the external SSD integration work?</h3>
510
+ <i class="fas fa-chevron-down text-purple-600 transition-transform duration-200"></i>
511
+ </button>
512
+ <div class="px-6 pb-6 hidden">
513
+ <p class="text-gray-600">
514
+ Ollama AI automatically detects compatible external drives and sets up the proper directory structure at <code class="bg-gray-100 px-2 py-1 rounded">/Volumes/YourDrive/ollama-models/</code>.
515
+ The app handles all environment configuration and path management automatically.
516
+ You can store models, conversation history, and knowledge bases on the external drive.
517
+ </p>
518
+ </div>
519
+ </div>
520
+
521
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
522
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none">
523
+ <h3 class="text-lg font-medium">What AI models are supported?</h3>
524
+ <i class="fas fa-chevron-down text-purple-600 transition-transform duration-200"></i>
525
+ </button>
526
+ <div class="px-6 pb-6 hidden">
527
+ <p class="text-gray-600 mb-4">
528
+ We support all models compatible with Ollama, including phi3:mini, phi3:medium, llama2, qwen2.5, and many more.
529
+ The app includes a built-in model browser to discover and download new models directly.
530
+ </p>
531
+ <p class="text-gray-600">
532
+ Our external SSD integration means you're not limited by your main drive's capacity - you can store dozens of models simultaneously.
533
+ </p>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
538
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none">
539
+ <h3 class="text-lg font-medium">Is my data really private?</h3>
540
+ <i class="fas fa-chevron-down text-purple-600 transition-transform duration-200"></i>
541
+ </button>
542
+ <div class="px-6 pb-6 hidden">
543
+ <p class="text-gray-600">
544
+ Absolutely. Ollama AI processes everything locally on your computer.
545
+ No conversation data, model inputs, or outputs are ever transmitted to any servers.
546
+ You can verify this by monitoring network activity while using the app.
547
+ </p>
548
+ </div>
549
+ </div>
550
+
551
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
552
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none">
553
+ <h3 class="text-lg font-medium">Can I use encrypted external drives?</h3>
554
+ <i class="fas fa-chevron-down text-purple-600 transition-transform duration-200"></i>
555
+ </button>
556
+ <div class="px-6 pb-6 hidden">
557
+ <p class="text-gray-600">
558
+ Yes! Ollama AI works seamlessly with encrypted external SSDs.
559
+ The app will prompt you for your decryption password when needed and never stores this information.
560
+ </p>
561
+ </div>
562
+ </div>
563
+
564
+ <div class="border border-gray-200 rounded-lg overflow-hidden">
565
+ <button class="w-full flex justify-between items-center p-6 text-left focus:outline-none">
566
+ <h3 class="text-lg font-medium">What platforms are supported?</h3>
567
+ <i class="fas fa-chevron-down text-purple-600 transition-transform duration-200"></i>
568
+ </button>
569
+ <div class="px-6 pb-6 hidden">
570
+ <p class="text-gray-600">
571
+ Ollama AI is available for Windows (10+), macOS (10.15+), and Linux (most modern distributions).
572
+ All versions support external SSD storage integration.
573
+ </p>
574
+ </div>
575
+ </div>
576
+ </div>
577
+
578
+ <div class="text-center mt-12">
579
+ <p class="text-gray-600 mb-4">Still have questions?</p>
580
+ <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200">
581
+ <i class="fas fa-envelope mr-2"></i> Contact Support
582
+ </a>
583
+ </div>
584
+ </div>
585
+ </section>
586
+
587
+ <!-- CTA Section -->
588
+ <section class="gradient-bg text-white py-20" id="download">
589
+ <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
590
+ <h2 class="text-3xl font-bold mb-6">Ready to Experience Private AI with External SSD Storage?</h2>
591
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
592
+ Join thousands of professionals who trust Ollama AI for their private AI needs.
593
+ </p>
594
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
595
+ <a href="#" class="px-8 py-4 bg-white text-purple-600 font-bold rounded-lg hover:bg-gray-100 transition duration-300 shadow-lg">
596
+ Start 10-Day Free Trial
597
+ </a>
598
+ <a href="#" class="px-8 py-4 border-2 border-white text-white font-bold rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300">
599
+ Download Free Demo
600
+ </a>
601
+ </div>
602
+ <p class="mt-6 text-sm opacity-80">No credit card required • 30-day money-back guarantee</p>
603
+ </div>
604
+ </section>
605
+
606
+ <!-- Footer -->
607
+ <footer class="bg-gray-900 text-gray-400 py-12">
608
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
609
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
610
+ <div>
611
+ <h3 class="text-white text-sm font-semibold mb-4">Product</h3>
612
+ <ul class="space-y-2">
613
+ <li><a href="#" class="hover:text-white transition">Features</a></li>
614
+ <li><a href="#" class="hover:text-white transition">Pricing</a></li>
615
+ <li><a href="#" class="hover:text-white transition">Download</a></li>
616
+ <li><a href="#" class="hover:text-white transition">Roadmap</a></li>
617
+ </ul>
618
+ </div>
619
+ <div>
620
+ <h3 class="text-white text-sm font-semibold mb-4">Resources</h3>
621
+ <ul class="space-y-2">
622
+ <li><a href="#" class="hover:text-white transition">Documentation</a></li>
623
+ <li><a href="#" class="hover:text-white transition">API Reference</a></li>
624
+ <li><a href="#" class="hover:text-white transition">GitHub</a></li>
625
+ <li><a href="#" class="hover:text-white transition">Community</a></li>
626
+ </ul>
627
+ </div>
628
+ <div>
629
+ <h3 class="text-white text-sm font-semibold mb-4">Company</h3>
630
+ <ul class="space-y-2">
631
+ <li><a href="#" class="hover:text-white transition">About</a></li>
632
+ <li><a href="#" class="hover:text-white transition">Blog</a></li>
633
+ <li><a href="#" class="hover:text-white transition">Careers</a></li>
634
+ <li><a href="#" class="hover:text-white transition">Contact</a></li>
635
+ </ul>
636
+ </div>
637
+ <div>
638
+ <h3 class="text-white text-sm font-semibold mb-4">Legal</h3>
639
+ <ul class="space-y-2">
640
+ <li><a href="#" class="hover:text-white transition">Privacy</a></li>
641
+ <li><a href="#" class="hover:text-white transition">Terms</a></li>
642
+ <li><a href="#" class="hover:text-white transition">Security</a></li>
643
+ <li><a href="#" class="hover:text-white transition">GDPR</a></li>
644
+ </ul>
645
+ </div>
646
+ </div>
647
+ <div class="mt-12 pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
648
+ <div class="flex items-center space-x-6 mb-4 md:mb-0">
649
+ <a href="#" class="text-white">
650
+ <i class="fab fa-twitter text-xl"></i>
651
+ </a>
652
+ <a href="#" class="text-white">
653
+ <i class="fab fa-github text-xl"></i>
654
+ </a>
655
+ <a href="#" class="text-white">
656
+ <i class="fab fa-discord text-xl"></i>
657
+ </a>
658
+ </div>
659
+ <p class="text-sm">
660
+ &copy; 2023 Ollama AI. All rights reserved.
661
+ </p>
662
+ </div>
663
+ </div>
664
+ </footer>
665
+
666
+ <script>
667
+ // FAQ accordion functionality
668
+ document.querySelectorAll('.border button').forEach(button => {
669
+ button.addEventListener('click', () => {
670
+ const content = button.nextElementSibling;
671
+ const icon = button.querySelector('i');
672
+
673
+ if (content.classList.contains('hidden')) {
674
+ content.classList.remove('hidden');
675
+ icon.classList.add('rotate-180');
676
+ } else {
677
+ content.classList.add('hidden');
678
+ icon.classList.remove('rotate-180');
679
+ }
680
+ });
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
+
688
+ const targetId = this.getAttribute('href');
689
+ if (targetId === '#') return;
690
+
691
+ const targetElement = document.querySelector(targetId);
692
+ if (targetElement) {
693
+ targetElement.scrollIntoView({
694
+ behavior: 'smooth'
695
+ });
696
+ }
697
+ });
698
+ });
699
+ </script>
700
+ <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=Tommyculdaet/ollamachat" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
701
+ </html>