Upload components/TechnicalDemo.jsx with huggingface_hub

components/TechnicalDemo.jsx

@@ -0,0 +1,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">&lt; 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">&lt; 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">&lt; 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>
+  );
+}