description page
parent
e6b8f267b9
commit
39faa7a98c
|
|
@ -0,0 +1,115 @@
|
|||
---
|
||||
import Layout from '../layouts/Layout.astro';
|
||||
---
|
||||
|
||||
<Layout title="AI Chat - Home">
|
||||
<div class="container mx-auto py-8 px-4">
|
||||
<section class="text-center py-16 md:py-24">
|
||||
<div class="animate-in fade-in slide-in-from-bottom-10 duration-700">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-primary to-purple-600">
|
||||
Welcome to AI Chat
|
||||
</h1>
|
||||
<p class="text-xl text-muted-foreground max-w-3xl mx-auto mb-8">
|
||||
A powerful interface for conversing with AI models with flexible provider options.
|
||||
</p>
|
||||
<a href="/tools/chat-with-ai" class="inline-block px-6 py-3 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-all-normal hover-lift shadow-md hover:shadow-lg">
|
||||
Start Chatting
|
||||
<span class="inline-block ml-2 transition-transform group-hover:translate-x-1">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 grid md:grid-cols-3 gap-8">
|
||||
<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-100">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 01.865-.501 48.172 48.172 0 003.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0012 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold mb-2">Multiple AI Providers</h2>
|
||||
<p class="text-muted-foreground">Connect to various AI providers including OpenAI, Anthropic, and more, or run models directly in your browser.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-200">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m6.75 12l-3-3m0 0l-3 3m3-3v6m-1.5-15H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold mb-2">File Upload Support</h2>
|
||||
<p class="text-muted-foreground">Upload and analyze documents with AI assistance. Supports various file formats for enhanced context in conversations.</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-card text-card-foreground rounded-lg p-6 shadow-md card-elevation animate-in fade-in slide-in-from-bottom-10 duration-500 delay-300">
|
||||
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mb-4 transition-transform-bounce hover:scale-110">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-primary">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold mb-2">Secure & Private</h2>
|
||||
<p class="text-muted-foreground">Option to use browser-based models for complete privacy, or connect securely to external providers with your own API keys.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-12 border-t">
|
||||
<div class="max-w-3xl mx-auto text-center animate-in fade-in slide-in-from-bottom-10 duration-500 delay-300">
|
||||
<h2 class="text-2xl font-bold mb-6">About This Project</h2>
|
||||
<p class="mb-4 text-muted-foreground">
|
||||
This AI chat interface is designed to provide a flexible and powerful way to interact with various AI models.
|
||||
It supports multiple providers, file uploads for context, and can even run models directly in your browser for complete privacy.
|
||||
</p>
|
||||
<p class="text-muted-foreground">
|
||||
Use the navigation to explore the application and start chatting with AI assistants.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="py-16 border-t">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h2 class="text-2xl font-bold mb-8 text-center">Frequently Asked Questions</h2>
|
||||
<div class="space-y-6 animate-in fade-in slide-in-from-bottom-10 duration-500 delay-400">
|
||||
<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
|
||||
<h3 class="text-lg font-medium mb-2">What AI models can I use?</h3>
|
||||
<p class="text-muted-foreground">You can connect to various providers like OpenAI (ChatGPT), Anthropic (Claude), or run models directly in your browser with WebLLM for complete privacy.</p>
|
||||
</div>
|
||||
<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
|
||||
<h3 class="text-lg font-medium mb-2">Do I need an API key?</h3>
|
||||
<p class="text-muted-foreground">For cloud-based providers like OpenAI or Anthropic, you'll need your own API key. For browser-based models using WebLLM, no API key is required as everything runs locally.</p>
|
||||
</div>
|
||||
<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
|
||||
<h3 class="text-lg font-medium mb-2">What files can I upload?</h3>
|
||||
<p class="text-muted-foreground">The system supports various document formats including PDF, DOCX, TXT and more to provide context for your conversations with AI.</p>
|
||||
</div>
|
||||
<div class="p-5 border rounded-lg shadow-sm hover:shadow-md transition-all-normal">
|
||||
<h3 class="text-lg font-medium mb-2">How secure is my data?</h3>
|
||||
<p class="text-muted-foreground">When using WebLLM, all processing happens in your browser and data never leaves your device. For cloud providers, data is sent to their APIs according to their privacy policies.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</Layout>
|
||||
|
||||
<script>
|
||||
// Add intersection observer for scroll animations
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Select all sections
|
||||
document.querySelectorAll('section').forEach(section => {
|
||||
observer.observe(section);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in New Issue