Spaces:
Sleeping
Sleeping
File size: 6,690 Bytes
34f67e4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 | import { useState } from 'react';
import { Play, Database, Search, Layers } from 'lucide-react';
export default function TechnicalDemo() {
const [activeTab, setActiveTab] = useState('overview');
const codeExamples = {
python: `import chromadb
# Initialize client
client = chromadb.Client()
# Create collection
collection = client.create_collection("documents")
# Add documents with embeddings
collection.add(
documents=["doc1", "doc2", "doc3"],
embeddings=[[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]],
ids=["id1", "id2", "id3"]
)
# Search
results = collection.query(
query_embeddings=[[1.1, 2.3]],
n_results=2
)`,
javascript: `const { ChromaClient } = require('chromadb');
// Initialize client
const client = new ChromaClient();
// Create collection
const collection = await client.createCollection("documents");
// Add documents
await collection.add({
ids: ["id1", "id2", "id3"],
embeddings: [[1.1, 2.3], [4.5, 6.9], [7.1, 8.2]],
documents: ["doc1", "doc2", "doc3"]
});
// Search
const results = await collection.query({
queryEmbeddings: [[1.1, 2.3]],
nResults: 2
});`
};
return (
<section id="demo" className="py-20 bg-gray-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
See Chroma in Action
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Experience the simplicity and power of Chroma vector database through our interactive demo
</p>
</div>
<div className="bg-white rounded-lg shadow-lg overflow-hidden">
<div className="border-b border-gray-200">
<nav className="flex space-x-8 px-8">
{['overview', 'code', 'performance'].map((tab) => (
<button
key={tab}
onClick={() => setActiveTab(tab)}
className={`py-4 px-1 border-b-2 font-medium text-sm capitalize ${
activeTab === tab
? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
{tab}
</button>
))}
</nav>
</div>
<div className="p-8">
{activeTab === 'overview' && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div className="text-center">
<Database className="w-16 h-16 text-primary-600 mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">Easy Setup</h3>
<p className="text-gray-600">Get started in minutes with simple API</p>
</div>
<div className="text-center">
<Search className="w-16 h-16 text-primary-600 mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">Fast Search</h3>
<p className="text-gray-600">Sub-100ms query latency at scale</p>
</div>
<div className="text-center">
<Layers className="w-16 h-16 text-primary-600 mx-auto mb-4" />
<h3 className="text-lg font-semibold mb-2">Multi-modal</h3>
<p className="text-gray-600">Support for text, images, and more</p>
</div>
</div>
)}
{activeTab === 'code' && (
<div className="space-y-6">
<div className="flex space-x-4 mb-4">
<button className="px-4 py-2 bg-primary-600 text-white rounded-lg">Python</button>
<button className="px-4 py-2 bg-gray-200 text-gray-700 rounded-lg">JavaScript</button>
</div>
<pre className="bg-gray-900 text-gray-100 p-6 rounded-lg overflow-x-auto">
<code>{codeExamples.python}</code>
</pre>
</div>
)}
{activeTab === 'performance' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 className="text-lg font-semibold mb-4">Query Performance</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-600">1M vectors</span>
<span className="font-semibold text-green-600">< 50ms</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">10M vectors</span>
<span className="font-semibold text-green-600">< 100ms</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">100M vectors</span>
<span className="font-semibold text-green-600">< 200ms</span>
</div>
</div>
</div>
<div>
<h3 className="text-lg font-semibold mb-4">Scalability</h3>
<div className="space-y-3">
<div className="flex justify-between items-center">
<span className="text-gray-600">Horizontal scaling</span>
<span className="font-semibold text-primary-600">✓</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Auto-sharding</span>
<span className="font-semibold text-primary-600">✓</span>
</div>
<div className="flex justify-between items-center">
<span className="text-gray-600">Replication</span>
<span className="font-semibold text-primary-600">✓</span>
</div>
</div>
</div>
</div>
</div>
)}
</div>
</div>
<div className="mt-8 text-center">
<button className="bg-primary-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-primary-700 transition-colors inline-flex items-center gap-2">
<Play className="w-5 h-5" />
Start Free Trial
</button>
</div>
</div>
</section>
);
} |