Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kritova Intelligent Assistant Portfolio</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| /* Custom animations */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Gradient text */ | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Custom styles */ | |
| .tech-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .tech-card:hover { | |
| transform: translateY(-5px) rotateX(5deg); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .feature-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover .feature-icon { | |
| transform: scale(1.2); | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -20px; | |
| top: 0; | |
| width: 2px; | |
| height: 100%; | |
| background: #3b82f6; | |
| } | |
| .timeline-dot { | |
| position: absolute; | |
| left: -26px; | |
| top: 5px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| border: 2px solid white; | |
| } | |
| /* Simple bar chart styling */ | |
| .bar-chart-bar { | |
| @apply bg-gradient-to-r from-cyan-500 to-blue-500 rounded-t-md transition-all duration-500 ease-out; | |
| } | |
| .bar-chart-label { | |
| @apply text-xs text-center mt-1 text-gray-600; | |
| } | |
| </style> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap" rel="stylesheet"> | |
| </head> | |
| <body class="bg-gray-50 font-sans antialiased"> | |
| <!-- Floating AI assistant icon --> | |
| <div class="fixed bottom-8 right-8 z-50"> | |
| <div class="bg-blue-600 text-white w-16 h-16 rounded-full flex items-center justify-center shadow-xl floating cursor-pointer hover:bg-blue-700 transition-colors"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| </div> | |
| <header class="relative overflow-hidden bg-gradient-to-br from-blue-600 to-indigo-800 text-white py-16 shadow-lg"> | |
| <div class="absolute inset-0 opacity-10"> | |
| <div class="absolute top-0 left-0 w-full h-full bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4 font-[Poppins]"> | |
| <span class="gradient-text" style="background-image: linear-gradient(to right, #ffffff, #93c5fd);">Kritova</span> Intelligent Assistant | |
| </h1> | |
| <p class="text-xl text-blue-100 mb-6 max-w-lg">The next generation of AI-powered assistance, combining cutting-edge technology with human-like understanding.</p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-white text-blue-600 px-6 py-2 rounded-full font-medium hover:bg-blue-50 transition-colors shadow-md"> | |
| Kritova AI - Empowering your potential | |
| </button> | |
| <button class="border border-white text-white px-6 py-2 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition-colors"> | |
| launch-announcement soon | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-64 h-64 md:w-80 md:h-80"> | |
| <div class="absolute inset-0 bg-blue-500 rounded-full opacity-20 blur-xl"></div> | |
| <div class="absolute inset-4 bg-gradient-to-br from-blue-400 to-indigo-600 rounded-full flex items-center justify-center shadow-2xl"> | |
| <i class="fas fa-brain text-white text-7xl md:text-8xl"></i> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white text-blue-600 px-4 py-2 rounded-full text-sm font-medium shadow-lg"> | |
| Powered by Gemini Flash 2.0 | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-6 py-12"> | |
| <!-- Stats Section --> | |
| <section class="mb-16"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="text-blue-600 text-3xl font-bold mb-2">99.7%</div> | |
| <div class="text-gray-600">Uptime | |
| $0 Reliability</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="text-blue-600 text-3xl font-bold mb-2">90%</div> | |
| <div class="text-gray-600">No Hallucinations</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="text-blue-600 text-3xl font-bold mb-2">94%</div> | |
| <div class="text-gray-600">Accuracy Rate</div> | |
| </div> | |
| <div class="bg-white p-6 rounded-xl shadow-md text-center"> | |
| <div class="text-blue-600 text-3xl font-bold mb-2">0.2s</div> | |
| <div class="text-gray-600">Avg Response Time</div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Core Architecture Section --> | |
| <section id="rag-architecture" class="mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Advanced RAG Architecture</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our hybrid retrieval system combines the best of keyword and semantic search to deliver precise, context-aware responses.</p> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="p-6 md:p-8"> | |
| <div class="flex flex-col md:flex-row items-center mb-8"> | |
| <div class="md:w-1/2 mb-6 md:mb-0"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Enhanced Contextual Retrieval</h3> | |
| <p class="text-gray-600 mb-4">Kritova's unique hybrid approach ensures both keyword relevance and deep semantic understanding of queries.</p> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-check-circle text-sm"></i> | |
| </div> | |
| <span class="text-gray-700">Combines BM25 (sparse) & Dense Embeddings (semantic)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-check-circle text-sm"></i> | |
| </div> | |
| <span class="text-gray-700">Semantic text splitting preserves context</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-check-circle text-sm"></i> | |
| </div> | |
| <span class="text-gray-700">Configurable chunk size and overlap</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative"> | |
| <div class="bg-gradient-to-br from-blue-50 to-indigo-50 p-6 rounded-lg border border-blue-100"> | |
| <div class="flex justify-between mb-4"> | |
| <div class="text-sm font-medium text-blue-600">Query Processing</div> | |
| <div class="text-xs text-gray-500">Step 1/4</div> | |
| </div> | |
| <div class="h-2 bg-blue-200 rounded-full mb-6"> | |
| <div class="h-2 bg-blue-600 rounded-full w-1/4"></div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-search"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Hybrid Retrieval</div> | |
| <div class="text-xs text-gray-500">BM25 + Dense vector search</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="bg-gray-100 text-gray-400 rounded-full p-2 mr-3"> | |
| <i class="fas fa-filter"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Reranking</div> | |
| <div class="text-xs text-gray-400">Cross-encoder scoring</div> | |
| </div> | |
| </div> | |
| <div class="flex items-center opacity-50"> | |
| <div class="bg-gray-100 text-gray-400 rounded-full p-2 mr-3"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| <div> | |
| <div class="font-medium">Generation</div> | |
| <div class="text-xs text-gray-400">Gemini Flash 2.0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-4 -right-4 bg-white px-4 py-2 rounded-full shadow-md text-sm font-medium border border-gray-100"> | |
| <i class="fas fa-bolt text-yellow-500 mr-1"></i> Real-time processing | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-8"> | |
| <h3 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Simplified RAG Flow</h3> | |
| <div class="flex flex-col md:flex-row items-center justify-center mb-8"> | |
| <div class="relative mb-8 md:mb-0"> | |
| <div class="bg-blue-600 text-white p-4 rounded-lg shadow-lg w-48 text-center"> | |
| <div class="font-medium mb-1">User Query</div> | |
| <div class="text-xs opacity-80">"Explain quantum computing"</div> | |
| </div> | |
| <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 md:hidden"> | |
| <i class="fas fa-arrow-down text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="hidden md:block mx-4"> | |
| <i class="fas fa-arrow-right text-blue-500 text-2xl"></i> | |
| </div> | |
| <div class="relative mb-8 md:mb-0"> | |
| <div class="bg-blue-100 border border-blue-200 p-4 rounded-lg shadow-md w-48 text-center"> | |
| <div class="font-medium mb-1">Hybrid Retrieval</div> | |
| <div class="text-xs text-gray-600">BM25 + Dense vectors</div> | |
| </div> | |
| <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 md:hidden"> | |
| <i class="fas fa-arrow-down text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="hidden md:block mx-4"> | |
| <i class="fas fa-arrow-right text-blue-500 text-2xl"></i> | |
| </div> | |
| <div class="relative mb-8 md:mb-0"> | |
| <div class="bg-blue-50 border border-blue-100 p-4 rounded-lg shadow-sm w-48 text-center"> | |
| <div class="font-medium mb-1">Context Ranking</div> | |
| <div class="text-xs text-gray-600">Relevance scoring</div> | |
| </div> | |
| <div class="absolute -bottom-6 left-1/2 transform -translate-x-1/2 md:hidden"> | |
| <i class="fas fa-arrow-down text-blue-500 text-xl"></i> | |
| </div> | |
| </div> | |
| <div class="hidden md:block mx-4"> | |
| <i class="fas fa-arrow-right text-blue-500 text-2xl"></i> | |
| </div> | |
| <div class="relative"> | |
| <div class="bg-indigo-600 text-white p-4 rounded-lg shadow-lg w-48 text-center"> | |
| <div class="font-medium mb-1">LLM Generation</div> | |
| <div class="text-xs opacity-80">Gemini Flash 2.0</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technical Features Section --> | |
| <section id="technical-features" class="mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Technical Implementation</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Advanced systems that power Kritova's intelligence and adaptability</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> | |
| <!-- Memory & Caching Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-teal-100 text-teal-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-memory text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Memory & Caching</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Efficiently stores and retrieves information for context and performance optimization.</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-teal-500 rounded-full mr-3"></div> | |
| <span class="text-sm text-gray-700">Short-Term Session History</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-teal-400 rounded-full mr-3"></div> | |
| <span class="text-sm text-gray-700">Long-Term User Preferences</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-teal-300 rounded-full mr-3"></div> | |
| <span class="text-sm text-gray-700">Global Feedback Patterns</span> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-100"> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span>Cache Hit Rate</span> | |
| <span>92%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-teal-600 h-1.5 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Adaptability Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-cyan-100 text-cyan-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-sync-alt text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Adaptability Systems</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Learns and adjusts based on user interaction patterns and feedback mechanisms.</p> | |
| <div class="space-y-3 mb-6"> | |
| <div class="flex items-start"> | |
| <div class="bg-cyan-100 text-cyan-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-thumbs-up text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-gray-700">Feedback Tracking</div> | |
| <div class="text-xs text-gray-500">Explicit & implicit signals</div> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-cyan-100 text-cyan-600 rounded-full p-1 mr-3 mt-1"> | |
| <i class="fas fa-user-cog text-xs"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-gray-700">Personalization</div> | |
| <div class="text-xs text-gray-500">Style, topics, expertise</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-cyan-50 rounded-lg p-3 text-center"> | |
| <div class="text-xs text-cyan-800 font-medium mb-1">Adaptation Cycle</div> | |
| <div class="flex justify-center items-center"> | |
| <div class="text-center px-2"> | |
| <div class="bg-cyan-600 text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-1 text-sm">1</div> | |
| <div class="text-xs text-gray-600">Observe</div> | |
| </div> | |
| <i class="fas fa-arrow-right text-cyan-400 mx-1"></i> | |
| <div class="text-center px-2"> | |
| <div class="bg-cyan-600 text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-1 text-sm">2</div> | |
| <div class="text-xs text-gray-600">Analyze</div> | |
| </div> | |
| <i class="fas fa-arrow-right text-cyan-400 mx-1"></i> | |
| <div class="text-center px-2"> | |
| <div class="bg-cyan-600 text-white rounded-full w-8 h-8 flex items-center justify-center mx-auto mb-1 text-sm">3</div> | |
| <div class="text-xs text-gray-600">Adapt</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Evaluation Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-lime-100 text-lime-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-check-circle text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Evaluation & Quality</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Ensures response accuracy, relevance, and faithfulness to source material.</p> | |
| <div class="grid grid-cols-3 gap-2 mb-4"> | |
| <div class="bg-lime-50 rounded p-2 text-center"> | |
| <div class="text-lime-600 font-bold text-lg">98%</div> | |
| <div class="text-xs text-gray-600">Accuracy</div> | |
| </div> | |
| <div class="bg-lime-50 rounded p-2 text-center"> | |
| <div class="text-lime-600 font-bold text-lg">96%</div> | |
| <div class="text-xs text-gray-600">Relevance</div> | |
| </div> | |
| <div class="bg-lime-50 rounded p-2 text-center"> | |
| <div class="text-lime-600 font-bold text-lg">94%</div> | |
| <div class="text-xs text-gray-600">Faithfulness</div> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-700">RAGAS Framework</span> | |
| <span class="bg-lime-100 text-lime-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-700">A/B Testing</span> | |
| <span class="bg-lime-100 text-lime-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| <div class="flex items-center justify-between text-sm"> | |
| <span class="text-gray-700">Evaluation Pipeline</span> | |
| <span class="bg-lime-100 text-lime-800 text-xs px-2 py-1 rounded-full">Active</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Processing Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-pink-100 text-pink-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-microchip text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Advanced Processing</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Sophisticated techniques to enhance queries and refine responses.</p> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Query Transformation</span> | |
| <span>HyDE</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-pink-500 h-1 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Cross-Encoder Reranking</span> | |
| <span>Active</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-pink-500 h-1 rounded-full" style="width: 78%"></div> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="flex justify-between text-xs text-gray-500 mb-1"> | |
| <span>Response Refinement</span> | |
| <span>Self-Critique</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-1"> | |
| <div class="bg-pink-500 h-1 rounded-full" style="width: 92%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6 pt-4 border-t border-gray-100 flex justify-between items-center"> | |
| <div class="text-xs text-gray-500">Processing Time Added</div> | |
| <div class="text-sm font-medium text-pink-600">+0.15s avg</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Operational Architecture Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-purple-100 text-purple-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-server text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">Operational Architecture</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Scalable and reliable infrastructure to handle millions of requests.</p> | |
| <div class="flex mb-4"> | |
| <div class="w-1/2 pr-2"> | |
| <div class="bg-purple-50 rounded-lg p-3"> | |
| <div class="text-xs text-purple-800 font-medium mb-1">Scalability</div> | |
| <div class="text-sm text-gray-700"> | |
| <i class="fas fa-expand-arrows-alt text-purple-500 mr-1"></i> Horizontal scaling | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">10+ instances</div> | |
| </div> | |
| </div> | |
| <div class="w-1/2 pl-2"> | |
| <div class="bg-purple-50 rounded-lg p-3"> | |
| <div class="text-xs text-purple-800 font-medium mb-1">Reliability</div> | |
| <div class="text-sm text-gray-700"> | |
| <i class="fas fa-shield-alt text-purple-500 mr-1"></i> 99.7% uptime | |
| </div> | |
| <div class="text-xs text-gray-500 mt-1">Graceful degradation</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-3"> | |
| <div class="flex justify-between text-xs text-gray-600 mb-1"> | |
| <span>Capacity Utilization</span> | |
| <span>65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-gradient-to-r from-purple-400 to-purple-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- User Experience Card --> | |
| <div class="tech-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow"> | |
| <div class="p-6"> | |
| <div class="flex items-center mb-4"> | |
| <div class="bg-green-100 text-green-600 rounded-lg p-3 mr-4"> | |
| <i class="fas fa-user-friends text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold text-gray-800">User Experience</h3> | |
| </div> | |
| <p class="text-gray-600 mb-4">Designed for natural, intuitive interactions with human-like qualities.</p> | |
| <div class="space-y-3 mb-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-comment-alt text-sm"></i> | |
| </div> | |
| <div class="text-sm text-gray-700">Calibrated tone (polite, positive)</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-mouse-pointer text-sm"></i> | |
| </div> | |
| <div class="text-sm text-gray-700">Context-aware follow-ups</div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="bg-green-100 text-green-600 rounded-full p-1 mr-3"> | |
| <i class="fas fa-edit text-sm"></i> | |
| </div> | |
| <div class="text-sm text-gray-700">Clear Markdown formatting</div> | |
| </div> | |
| </div> | |
| <div class="bg-green-50 rounded-lg p-3 text-center"> | |
| <div class="text-xs text-green-800 font-medium mb-1"></div> | |
| <div class="text-2xl font-bold text-green-600"></div> | |
| <div class="text-xs text-gray-600"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Feature Timeline Section --> | |
| <section class="mb-16"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Development Roadmap</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Our journey of continuous improvement and innovation</p> | |
| </div> | |
| <div class="relative"> | |
| <!-- Timeline line --> | |
| <div class="hidden md:block absolute left-1/2 top-0 h-full w-0.5 bg-blue-200 transform -translate-x-1/2"></div> | |
| <div class="space-y-8 md:space-y-16"> | |
| <!-- Timeline Item 1 --> | |
| <div class="relative pl-8 md:pl-0"> | |
| <div class="md:flex justify-center items-center"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-sm text-blue-600 font-medium mb-1"></div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Initial RAG Implementation</h3> | |
| <p class="text-gray-600 text-sm">Launched with basic hybrid retrieval (BM25 + Dense) and Gemini Pro generation.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <!-- Empty on left side --> | |
| </div> | |
| </div> | |
| <div class="timeline-dot md:hidden"></div> | |
| </div> | |
| <!-- Timeline Item 2 --> | |
| <div class="relative pl-8 md:pl-0"> | |
| <div class="md:flex justify-center items-center"> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <!-- Empty on right side --> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 mb-4 md:mb-0"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-sm text-blue-600 font-medium mb-1"></div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Advanced Optimization</h3> | |
| <p class="text-gray-600 text-sm">Added cross-encoder reranking, HyDE query transformation, and response refinement.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-dot md:hidden"></div> | |
| </div> | |
| <!-- Timeline Item 3 --> | |
| <div class="relative pl-8 md:pl-0"> | |
| <div class="md:flex justify-center items-center"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-sm text-blue-600 font-medium mb-1"></div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Gemini Flash 2.0 Integration</h3> | |
| <p class="text-gray-600 text-sm">Upgraded to Gemini Flash 2.0 for faster, more cost-effective generation.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <!-- Empty on left side --> | |
| </div> | |
| </div> | |
| <div class="timeline-dot md:hidden"></div> | |
| </div> | |
| <!-- Timeline Item 4 --> | |
| <div class="relative pl-8 md:pl-0"> | |
| <div class="md:flex justify-center items-center"> | |
| <div class="md:w-1/2 md:pr-12"> | |
| <!-- Empty on right side --> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12 mb-4 md:mb-0"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-sm text-blue-600 font-medium mb-1"></div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Evaluation Framework</h3> | |
| <p class="text-gray-600 text-sm">Implemented RAGAS metrics and continuous evaluation pipeline.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="timeline-dot md:hidden"></div> | |
| </div> | |
| <!-- Timeline Item 5 --> | |
| <div class="relative pl-8 md:pl-0"> | |
| <div class="md:flex justify-center items-center"> | |
| <div class="md:w-1/2 md:pr-12 mb-4 md:mb-0 md:text-right"> | |
| <div class="bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-sm text-blue-600 font-medium mb-1"></div> | |
| <h3 class="text-lg font-semibold text-gray-800 mb-2">Personalization Engine</h3> | |
| <p class="text-gray-600 text-sm">Added adaptive retrieval parameters and user preference learning.</p> | |
| </div> | |
| </div> | |
| <div class="hidden md:block"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-user-cog"></i> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 md:pl-12"> | |
| <!-- Empty on left side --> | |
| </div> | |
| </div> | |
| <div class="timeline-dot md:hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Metrics Section --> | |
| <section class="mb-16"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8 bg-gradient-to-br from-blue-50 to-indigo-50"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Performance Metrics</h2> | |
| <p class="text-gray-600 mb-6">Kritova delivers exceptional performance across all key indicators, ensuring fast, accurate, and reliable assistance.</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Response Time</span> | |
| <span>0.2s avg</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Accuracy</span> | |
| <span>98%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-green-500 h-2 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>Uptime</span> | |
| <span>99.7%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 99.7%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-sm text-gray-600 mb-1"> | |
| <span>User Satisfaction</span> | |
| <span>4.8/5</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-yellow-500 h-2 rounded-full" style="width: 96%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-xl font-semibold text-gray-800 mb-4">Retrieval Effectiveness</h3> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span>Hybrid vs BM25 Alone</span> | |
| <span>+32% improvement</span> | |
| </div> | |
| <div class="flex h-4 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="bg-blue-400" style="width: 68%"></div> | |
| <div class="bg-blue-600" style="width: 32%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>Hybrid</span> | |
| <span>BM25 Only</span> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between text-sm text-gray-600 mb-2"> | |
| <span>With vs Without Reranking</span> | |
| <span>+28% improvement</span> | |
| </div> | |
| <div class="flex h-4 bg-gray-200 rounded-full overflow-hidden"> | |
| <div class="bg-purple-400" style="width: 78%"></div> | |
| <div class="bg-purple-600" style="width: 22%"></div> | |
| </div> | |
| <div class="flex justify-between text-xs text-gray-500 mt-1"> | |
| <span>With Reranking</span> | |
| <span>Without</span> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <div class="bg-blue-100 text-blue-600 rounded-full p-2 mr-3"> | |
| <i class="fas fa-lightbulb"></i> | |
| </div> | |
| <div> | |
| <div class="text-sm font-medium text-gray-800">Key Insight</div> | |
| <div class="text-xs text-gray-600">Hybrid retrieval with reranking provides the most accurate results.</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action Section --> | |
| <section class="mb-16"> | |
| <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-xl overflow-hidden"> | |
| <div class="p-10 text-center"> | |
| <h2 class="text-2xl md:text-3xl font-bold text-white mb-4">Ready to Experience Kritova?</h2> | |
| <p class="text-blue-100 max-w-2xl mx-auto mb-8">Discover how our intelligent assistant can transform your workflows and enhance productivity.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-blue-50 transition-colors shadow-lg"> | |
| Request Demo | |
| </button> | |
| <button class="border border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition-colors"> | |
| Yes | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="bg-gray-900 text-gray-400 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Kritova</h3> | |
| <p class="text-sm mb-4">Advanced AI assistance powered by cutting-edge retrieval-augmented generation technology.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-linkedin"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors"> | |
| <i class="fab fa-github"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Product</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Features</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Pricing</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">API</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Documentation</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Blog</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Case Studies</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white text-lg font-semibold mb-4">Company</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">About</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Careers</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Privacy</a></li> | |
| <li><a href="#" class="text-sm hover:text-white transition-colors">Terms</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 pt-8 text-sm text-center"> | |
| © 2025 Kritova Intelligent Assistant. All rights reserved. | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple animation for feature cards on scroll | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const techCards = document.querySelectorAll('.tech-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = '1'; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| techCards.forEach(card => { | |
| card.style.opacity = '0'; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(card); | |
| }); | |
| // Floating AI assistant click handler | |
| const floatingAssistant = document.querySelector('.floating'); | |
| if (floatingAssistant) { | |
| floatingAssistant.addEventListener('click', function() { | |
| alert('Hello! I am Kritova, your intelligent assistant. How can I help you today?'); | |
| }); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |