Spaces:

mikeschlottig
/

ai-embedding-app

Running

App Files Files Community

ai-embedding-app / index.html

mikeschlottig

undefined - Follow Up Deployment

499fdcf verified 5 months ago

raw

history blame contribute delete

73.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI Agent Integration Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

	<style>
	@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

	:root {
	--primary: #3b82f6;
	--primary-dark: #2563eb;
	--secondary: #10b981;
	--accent: #8b5cf6;
	--dark: #1e293b;
	--darker: #0f172a;
	--light: #f8fafc;
	--gray: #94a3b8;
	--danger: #ef4444;
	}

	body {
	font-family: 'Inter', sans-serif;
	background-color: var(--darker);
	color: var(--light);
	min-height: 100vh;
	}

	.gradient-text {
	background: linear-gradient(90deg, var(--primary), var(--accent));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	.card-gradient {
	background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.9));
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	}

	.model-card {
	transition: all 0.3s ease;
	background: rgba(30, 41, 59, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.model-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(59, 130, 246, 0.2);
	border-color: rgba(59, 130, 246, 0.3);
	}

	.tab-active {
	background: rgba(59, 130, 246, 0.2);
	border-bottom: 2px solid var(--primary);
	}

	.code-block {
	background: rgba(15, 23, 42, 0.8);
	border-radius: 0.5rem;
	overflow: hidden;
	}

	.chat-bubble-user {
	background: rgba(59, 130, 246, 0.2);
	border: 1px solid rgba(59, 130, 246, 0.3);
	}

	.chat-bubble-assistant {
	background: rgba(30, 41, 59, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.05);
	}

	.status-indicator {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
	}

	.status-connected {
	background-color: var(--secondary);
	box-shadow: 0 0 10px var(--secondary);
	}

	.status-disconnected {
	background-color: var(--gray);
	}

	.status-error {
	background-color: var(--danger);
	box-shadow: 0 0 10px var(--danger);
	}

	.upload-dropzone {
	border: 2px dashed rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	}

	.upload-dropzone:hover {
	border-color: var(--primary);
	background: rgba(59, 130, 246, 0.05);
	}

	.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}

	@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
	}

	/* Custom scrollbar */
	::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	}

	::-webkit-scrollbar-track {
	background: rgba(30, 41, 59, 0.5);
	}

	::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: 4px;
	}

	::-webkit-scrollbar-thumb:hover {
	background: var(--primary-dark);
	}
	</style>
	</head>
	<body class="min-h-screen">
	<!-- Navigation -->
	<nav class="bg-gray-900 border-b border-gray-800">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex items-center justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<span class="text-2xl font-bold gradient-text">AI Nexus</span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-gray-800">Dashboard</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Models</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">API Keys</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Analytics</a>
	<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-gray-700">Settings</a>
	</div>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-4 flex items-center md:ml-6">
	<button class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none">
	<span class="sr-only">View notifications</span>
	<i class="fas fa-bell"></i>
	</button>
	<div class="ml-3 relative">
	<div>
	<button class="max-w-xs flex items-center text-sm rounded-full focus:outline-none" id="user-menu">
	<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</button>
	</div>
	</div>
	</div>
	</div>
	<div class="-mr-2 flex md:hidden">
	<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none" aria-controls="mobile-menu" aria-expanded="false">
	<span class="sr-only">Open main menu</span>
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Main Content -->
	<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
	<!-- Header -->
	<div class="card-gradient rounded-xl p-8 mb-8 shadow-lg">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center">
	<div>
	<h1 class="text-3xl md:text-4xl font-bold text-white mb-2">AI Agent Integration Dashboard</h1>
	<p class="text-gray-300 max-w-3xl">Unified platform for managing, testing, and deploying AI models with comprehensive API integration scripts for embedding AI into any application.</p>
	</div>
	<div class="mt-4 md:mt-0">
	<button class="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white px-6 py-3 rounded-lg font-medium shadow-md transition-all duration-300 transform hover:scale-105">
	<i class="fas fa-plus mr-2"></i> New Integration
	</button>
	</div>
	</div>
	</div>

	<!-- Stats Overview -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
	<div class="model-card rounded-xl p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm font-medium">Active Models</p>
	<h3 class="text-2xl font-bold text-white mt-1">24</h3>
	</div>
	<div class="bg-blue-500/20 p-3 rounded-lg">
	<i class="fas fa-robot text-blue-400 text-xl"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center text-green-400 text-sm">
	<i class="fas fa-arrow-up mr-1"></i>
	<span>12% from last month</span>
	</div>
	</div>
	</div>

	<div class="model-card rounded-xl p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm font-medium">API Requests</p>
	<h3 class="text-2xl font-bold text-white mt-1">1.2M</h3>
	</div>
	<div class="bg-green-500/20 p-3 rounded-lg">
	<i class="fas fa-bolt text-green-400 text-xl"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center text-green-400 text-sm">
	<i class="fas fa-arrow-up mr-1"></i>
	<span>28% from last month</span>
	</div>
	</div>
	</div>

	<div class="model-card rounded-xl p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm font-medium">Knowledge Docs</p>
	<h3 class="text-2xl font-bold text-white mt-1">142</h3>
	</div>
	<div class="bg-purple-500/20 p-3 rounded-lg">
	<i class="fas fa-book text-purple-400 text-xl"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center text-green-400 text-sm">
	<i class="fas fa-arrow-up mr-1"></i>
	<span>7% from last month</span>
	</div>
	</div>
	</div>

	<div class="model-card rounded-xl p-6">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-gray-400 text-sm font-medium">API Latency</p>
	<h3 class="text-2xl font-bold text-white mt-1">42ms</h3>
	</div>
	<div class="bg-yellow-500/20 p-3 rounded-lg">
	<i class="fas fa-tachometer-alt text-yellow-400 text-xl"></i>
	</div>
	</div>
	<div class="mt-4">
	<div class="flex items-center text-red-400 text-sm">
	<i class="fas fa-arrow-down mr-1"></i>
	<span>5% improvement</span>
	</div>
	</div>
	</div>
	</div>

	<!-- Model Grid -->
	<div class="mb-8">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-white">Available AI Models</h2>
	<div class="flex space-x-2">
	<div class="relative">
	<select class="appearance-none bg-gray-800 border border-gray-700 text-white rounded-lg pl-4 pr-8 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
	<option>All Providers</option>
	<option>OpenAI</option>
	<option>Anthropic</option>
	<option>Google</option>
	<option>Meta</option>
	<option>Mistral</option>
	</select>
	<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-400">
	<i class="fas fa-chevron-down"></i>
	</div>
	</div>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg border border-gray-700">
	<i class="fas fa-sliders-h"></i>
	</button>
	</div>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
	<!-- Claude 3.5 Sonnet -->
	<div class="model-card rounded-xl p-6">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="bg-gradient-to-br from-orange-500 to-pink-600 p-3 rounded-lg mr-4">
	<i class="fas fa-brain text-white text-xl"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold text-white flex items-center">
	<span class="status-indicator status-connected mr-2"></span>
	Claude 3.5 Sonnet
	</h3>
	<p class="text-gray-400 text-sm">Anthropic</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Latest</span>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Text Analysis</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Code Generation</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Reasoning</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">200K Context</span>
	</div>
	</div>

	<div class="grid grid-cols-3 gap-4 mb-6">
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Accuracy</p>
	<p class="text-white font-bold">9.5/10</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Speed</p>
	<p class="text-white font-bold">42ms</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Cost</p>
	<p class="text-white font-bold">$3/M</p>
	</div>
	</div>

	<div class="flex justify-between">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-comment-dots mr-2"></i> Chat
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-code mr-2"></i> API
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-book mr-2"></i> Docs
	</button>
	</div>
	</div>

	<!-- GPT-4 Turbo -->
	<div class="model-card rounded-xl p-6">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="bg-gradient-to-br from-green-500 to-blue-600 p-3 rounded-lg mr-4">
	<i class="fab fa-openai text-white text-xl"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold text-white flex items-center">
	<span class="status-indicator status-connected mr-2"></span>
	GPT-4 Turbo
	</h3>
	<p class="text-gray-400 text-sm">OpenAI</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Popular</span>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multimodal</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Function Calling</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">128K Context</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">JSON Mode</span>
	</div>
	</div>

	<div class="grid grid-cols-3 gap-4 mb-6">
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Accuracy</p>
	<p class="text-white font-bold">9.3/10</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Speed</p>
	<p class="text-white font-bold">58ms</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Cost</p>
	<p class="text-white font-bold">$10/M</p>
	</div>
	</div>

	<div class="flex justify-between">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-comment-dots mr-2"></i> Chat
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-code mr-2"></i> API
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-book mr-2"></i> Docs
	</button>
	</div>
	</div>

	<!-- Gemini 1.5 Pro -->
	<div class="model-card rounded-xl p-6">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="bg-gradient-to-br from-red-500 to-yellow-500 p-3 rounded-lg mr-4">
	<i class="fab fa-google text-white text-xl"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold text-white flex items-center">
	<span class="status-indicator status-connected mr-2"></span>
	Gemini 1.5 Pro
	</h3>
	<p class="text-gray-400 text-sm">Google</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Multimodal</span>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Vision</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Audio</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">1M Context</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multilingual</span>
	</div>
	</div>

	<div class="grid grid-cols-3 gap-4 mb-6">
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Accuracy</p>
	<p class="text-white font-bold">8.9/10</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Speed</p>
	<p class="text-white font-bold">72ms</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Cost</p>
	<p class="text-white font-bold">$7/M</p>
	</div>
	</div>

	<div class="flex justify-between">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-comment-dots mr-2"></i> Chat
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-code mr-2"></i> API
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-book mr-2"></i> Docs
	</button>
	</div>
	</div>

	<!-- Llama 3 70B -->
	<div class="model-card rounded-xl p-6">
	<div class="flex items-start justify-between mb-4">
	<div class="flex items-center">
	<div class="bg-gradient-to-br from-purple-500 to-pink-600 p-3 rounded-lg mr-4">
	<i class="fas fa-robot text-white text-xl"></i>
	</div>
	<div>
	<h3 class="text-xl font-bold text-white flex items-center">
	<span class="status-indicator status-connected mr-2"></span>
	Llama 3 70B
	</h3>
	<p class="text-gray-400 text-sm">Meta</p>
	</div>
	</div>
	<div class="flex items-center space-x-2">
	<span class="bg-blue-900/50 text-blue-300 text-xs px-2 py-1 rounded">Open Source</span>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-ellipsis-v"></i>
	</button>
	</div>
	</div>

	<div class="mb-4">
	<div class="flex flex-wrap gap-2">
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Self-hosted</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">8K Context</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Commercial Use</span>
	<span class="bg-blue-900/30 text-blue-300 text-xs px-3 py-1 rounded-full">Multilingual</span>
	</div>
	</div>

	<div class="grid grid-cols-3 gap-4 mb-6">
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Accuracy</p>
	<p class="text-white font-bold">8.7/10</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Speed</p>
	<p class="text-white font-bold">120ms</p>
	</div>
	<div class="bg-gray-800/50 p-3 rounded-lg text-center">
	<p class="text-gray-400 text-xs">Cost</p>
	<p class="text-white font-bold">$0.5/M</p>
	</div>
	</div>

	<div class="flex justify-between">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-comment-dots mr-2"></i> Chat
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-code mr-2"></i> API
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-book mr-2"></i> Docs
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Model Details Section -->
	<div class="mb-8">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-white">Claude 3.5 Sonnet Integration</h2>
	<div class="flex items-center space-x-2">
	<span class="text-sm text-gray-400">Last updated: 2 hours ago</span>
	<button class="text-blue-400 hover:text-blue-300">
	<i class="fas fa-sync-alt"></i>
	</button>
	</div>
	</div>

	<div class="bg-gray-900 rounded-xl overflow-hidden">
	<!-- Tabs -->
	<div class="flex border-b border-gray-800">
	<button class="px-6 py-4 text-sm font-medium text-white border-b-2 border-blue-500 tab-active">
	<i class="fas fa-code mr-2"></i> API Integration
	</button>
	<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
	<i class="fas fa-comment-dots mr-2"></i> Chat Interface
	</button>
	<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
	<i class="fas fa-tools mr-2"></i> MCP Tools
	</button>
	<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
	<i class="fas fa-book mr-2"></i> Knowledge Base
	</button>
	<button class="px-6 py-4 text-sm font-medium text-gray-400 hover:text-white">
	<i class="fas fa-cog mr-2"></i> Settings
	</button>
	</div>

	<!-- Tab Content -->
	<div class="p-6">
	<!-- Subtabs -->
	<div class="flex mb-6 overflow-x-auto">
	<button class="px-4 py-2 text-sm font-medium text-white bg-blue-900/50 rounded-l-lg">
	Node.js
	</button>
	<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
	Python
	</button>
	<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
	cURL
	</button>
	<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
	Java
	</button>
	<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800">
	Go
	</button>
	<button class="px-4 py-2 text-sm font-medium text-gray-400 hover:text-white bg-gray-800 rounded-r-lg">
	PHP
	</button>
	</div>

	<!-- Code Block -->
	<div class="code-block mb-6">
	<div class="flex justify-between items-center bg-gray-800 px-4 py-3">
	<div class="flex items-center">
	<span class="text-gray-300 text-sm font-mono">claude-integration.js</span>
	</div>
	<button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
	<i class="far fa-copy mr-1"></i> Copy
	</button>
	</div>
	<div class="p-4 overflow-x-auto">
	<pre class="text-gray-300 text-sm font-mono"><code>const Anthropic = require('@anthropic-ai/sdk');

	const anthropic = new Anthropic({
	apiKey: process.env.ANTHROPIC_API_KEY,
	});

	async function callClaude(prompt, maxTokens = 1000) {
	try {
	const response = await anthropic.messages.create({
	model: "claude-3-5-sonnet-20241022",
	max_tokens: maxTokens,
	messages: [
	{
	role: "user",
	content: prompt
	}
	]
	});

	return response.content[0].text;
	} catch (error) {
	console.error('Claude API Error:', error);
	throw error;
	}
	}

	// Usage Example
	(async () => {
	const result = await callClaude("Analyze this data and provide insights...");
	console.log(result);
	})();</code></pre>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
	<!-- API Parameters -->
	<div class="bg-gray-800/50 rounded-lg p-6">
	<h3 class="text-lg font-bold text-white mb-4">API Parameters</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-gray-400 text-sm mb-1">Model</label>
	<input type="text" value="claude-3-5-sonnet-20241022" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm" readonly>
	</div>
	<div>
	<label class="block text-gray-400 text-sm mb-1">Max Tokens</label>
	<input type="number" value="1000" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm">
	</div>
	<div>
	<label class="block text-gray-400 text-sm mb-1">Temperature</label>
	<div class="flex items-center">
	<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full mr-3">
	<span class="text-white text-sm">0.7</span>
	</div>
	</div>
	<div>
	<label class="block text-gray-400 text-sm mb-1">System Prompt</label>
	<div class="flex">
	<input type="text" placeholder="Custom system prompt..." class="w-full bg-gray-700 border border-gray-600 rounded-l-lg px-3 py-2 text-white text-sm">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-3 rounded-r-lg">
	<i class="fas fa-edit"></i>
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Test API -->
	<div class="bg-gray-800/50 rounded-lg p-6">
	<h3 class="text-lg font-bold text-white mb-4">Test API</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-gray-400 text-sm mb-1">Prompt</label>
	<textarea class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm h-24" placeholder="Enter your prompt here..."></textarea>
	</div>
	<div class="flex justify-between">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
	<i class="fas fa-play mr-2"></i> Run
	</button>
	<button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg text-sm font-medium">
	<i class="fas fa-history mr-2"></i> History
	</button>
	</div>
	<div class="bg-gray-900 rounded-lg p-4">
	<label class="block text-gray-400 text-sm mb-2">Response</label>
	<div class="text-gray-300 text-sm">
	<p>Run the API to see the response here...</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Chat Interface -->
	<div class="mb-8">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-white">Chat Interface</h2>
	<div class="flex items-center space-x-3">
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-sliders-h mr-2"></i> Settings
	</button>
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-plus mr-2"></i> New Chat
	</button>
	</div>
	</div>

	<div class="bg-gray-900 rounded-xl overflow-hidden">
	<div class="p-6">
	<!-- Chat Messages -->
	<div class="bg-gray-800/50 rounded-lg p-4 mb-4 h-96 overflow-y-auto">
	<!-- Assistant Message -->
	<div class="flex mb-4">
	<div class="flex-shrink-0 mr-3">
	<div class="bg-gradient-to-br from-orange-500 to-pink-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
	<i class="fas fa-brain"></i>
	</div>
	</div>
	<div class="flex-1">
	<div class="text-sm text-gray-400 mb-1">Claude 3.5 Sonnet</div>
	<div class="chat-bubble-assistant rounded-lg p-3">
	<p class="text-white">Hello! I'm Claude 3.5 Sonnet, an AI assistant created by Anthropic. How can I help you today?</p>
	</div>
	<div class="text-xs text-gray-500 mt-1">2:45 PM</div>
	</div>
	</div>

	<!-- User Message -->
	<div class="flex mb-4">
	<div class="flex-shrink-0 mr-3">
	<div class="bg-gradient-to-br from-blue-500 to-indigo-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
	<i class="fas fa-user"></i>
	</div>
	</div>
	<div class="flex-1">
	<div class="text-sm text-gray-400 mb-1">You</div>
	<div class="chat-bubble-user rounded-lg p-3">
	<p class="text-white">Can you explain how to integrate you into a Node.js application?</p>
	</div>
	<div class="text-xs text-gray-500 mt-1">2:46 PM</div>
	</div>
	</div>

	<!-- Assistant Message -->
	<div class="flex mb-4">
	<div class="flex-shrink-0 mr-3">
	<div class="bg-gradient-to-br from-orange-500 to-pink-600 w-8 h-8 rounded-full flex items-center justify-center text-white">
	<i class="fas fa-brain"></i>
	</div>
	</div>
	<div class="flex-1">
	<div class="text-sm text-gray-400 mb-1">Claude 3.5 Sonnet</div>
	<div class="chat-bubble-assistant rounded-lg p-3">
	<p class="text-white">Certainly! Here's a step-by-step guide to integrate Claude into a Node.js app:</p>
	<ol class="list-decimal pl-5 mt-2 space-y-1">
	<li>Install the Anthropic SDK: <code class="bg-gray-700 px-1 rounded">npm install @anthropic-ai/sdk</code></li>
	<li>Get your API key from the Anthropic console</li>
	<li>Initialize the client with your API key</li>
	<li>Create a function to send messages</li>
	</ol>
	<p class="mt-2">Would you like me to show you a complete code example?</p>
	</div>
	<div class="text-xs text-gray-500 mt-1">2:47 PM</div>
	</div>
	</div>
	</div>

	<!-- Chat Input -->
	<div class="bg-gray-800/50 rounded-lg p-4">
	<div class="flex items-center mb-3 space-x-4">
	<div class="flex-1">
	<label class="text-gray-400 text-sm">Model</label>
	<select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm mt-1">
	<option>Claude 3.5 Sonnet</option>
	<option>Claude 3 Opus</option>
	<option>Claude 3 Haiku</option>
	</select>
	</div>
	<div class="flex-1">
	<label class="text-gray-400 text-sm">Temperature</label>
	<div class="flex items-center mt-1">
	<input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full mr-2">
	<span class="text-white text-sm w-8">0.7</span>
	</div>
	</div>
	<div class="flex-1">
	<label class="text-gray-400 text-sm">Max Tokens</label>
	<input type="number" value="1000" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm mt-1">
	</div>
	</div>

	<div class="flex items-end">
	<div class="flex-1 mr-3">
	<textarea class="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm" rows="2" placeholder="Type your message here..."></textarea>
	</div>
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg h-12 w-12 flex items-center justify-center">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>

	<div class="flex justify-between items-center mt-3">
	<div class="flex space-x-2">
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-paperclip"></i>
	</button>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-code"></i>
	</button>
	<button class="text-gray-400 hover:text-white">
	<i class="fas fa-magic"></i>
	</button>
	</div>
	<div class="text-xs text-gray-500">
	<span class="text-green-400">Connected</span> • Claude 3.5 Sonnet
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Knowledge Base -->
	<div class="mb-8">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-white">Knowledge Base</h2>
	<div class="flex items-center space-x-3">
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-sync-alt mr-2"></i> Sync
	</button>
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-plus mr-2"></i> Add Document
	</button>
	</div>
	</div>

	<div class="bg-gray-900 rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
	<!-- Upload Area -->
	<div class="upload-dropzone rounded-lg p-6 text-center col-span-1">
	<div class="bg-blue-900/20 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
	<i class="fas fa-cloud-upload-alt text-blue-400 text-2xl"></i>
	</div>
	<h3 class="text-lg font-medium text-white mb-2">Upload Documents</h3>
	<p class="text-gray-400 text-sm mb-4">Drag & drop files here or click to browse</p>
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
	Select Files
	</button>
	<p class="text-gray-500 text-xs mt-3">Supports: PDF, DOCX, TXT, CSV, PPTX</p>
	</div>

	<!-- Stats -->
	<div class="bg-gray-800/50 rounded-lg p-6 col-span-2">
	<h3 class="text-lg font-medium text-white mb-4">Knowledge Base Stats</h3>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<p class="text-gray-400 text-sm">Total Documents</p>
	<p class="text-white text-2xl font-bold">142</p>
	</div>
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<p class="text-gray-400 text-sm">Indexed Chunks</p>
	<p class="text-white text-2xl font-bold">8,742</p>
	</div>
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<p class="text-gray-400 text-sm">Storage Used</p>
	<p class="text-white text-2xl font-bold">124 MB</p>
	</div>
	<div class="bg-gray-700/50 p-4 rounded-lg">
	<p class="text-gray-400 text-sm">Last Updated</p>
	<p class="text-white text-2xl font-bold">2h ago</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Search and Documents -->
	<div class="mb-6">
	<div class="flex items-center bg-gray-800/50 rounded-lg px-4 py-3">
	<i class="fas fa-search text-gray-500 mr-3"></i>
	<input type="text" placeholder="Search knowledge base..." class="bg-transparent border-none w-full text-white focus:outline-none">
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-lg text-sm font-medium ml-2">
	Search
	</button>
	</div>
	</div>

	<!-- Document List -->
	<div class="bg-gray-800/50 rounded-lg overflow-hidden">
	<div class="grid grid-cols-12 bg-gray-900 p-4 border-b border-gray-800 font-medium text-gray-400 text-sm">
	<div class="col-span-5">Document</div>
	<div class="col-span-2">Type</div>
	<div class="col-span-2">Size</div>
	<div class="col-span-2">Status</div>
	<div class="col-span-1 text-right">Actions</div>
	</div>

	<!-- Document Item -->
	<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
	<div class="col-span-5 flex items-center">
	<div class="bg-blue-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
	<i class="fas fa-file-pdf text-blue-400 text-sm"></i>
	</div>
	<div>
	<p class="text-white">Company Guidelines.pdf</p>
	<p class="text-gray-500 text-xs">Uploaded: Jan 15, 2024</p>
	</div>
	</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">PDF</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">245 KB</div>
	<div class="col-span-2 flex items-center">
	<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
	</div>
	<div class="col-span-1 flex items-center justify-end space-x-2">
	<button class="text-gray-400 hover:text-blue-400">
	<i class="fas fa-eye"></i>
	</button>
	<button class="text-gray-400 hover:text-yellow-400">
	<i class="fas fa-edit"></i>
	</button>
	<button class="text-gray-400 hover:text-red-400">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	</div>

	<!-- Document Item -->
	<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
	<div class="col-span-5 flex items-center">
	<div class="bg-green-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
	<i class="fas fa-file-excel text-green-400 text-sm"></i>
	</div>
	<div>
	<p class="text-white">Sales Data Q4.csv</p>
	<p class="text-gray-500 text-xs">Uploaded: Jan 12, 2024</p>
	</div>
	</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">CSV</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">189 KB</div>
	<div class="col-span-2 flex items-center">
	<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
	</div>
	<div class="col-span-1 flex items-center justify-end space-x-2">
	<button class="text-gray-400 hover:text-blue-400">
	<i class="fas fa-eye"></i>
	</button>
	<button class="text-gray-400 hover:text-yellow-400">
	<i class="fas fa-edit"></i>
	</button>
	<button class="text-gray-400 hover:text-red-400">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	</div>

	<!-- Document Item -->
	<div class="grid grid-cols-12 p-4 border-b border-gray-800 hover:bg-gray-700/30">
	<div class="col-span-5 flex items-center">
	<div class="bg-purple-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
	<i class="fas fa-file-word text-purple-400 text-sm"></i>
	</div>
	<div>
	<p class="text-white">Product Specifications.docx</p>
	<p class="text-gray-500 text-xs">Uploaded: Jan 10, 2024</p>
	</div>
	</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">DOCX</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">512 KB</div>
	<div class="col-span-2 flex items-center">
	<span class="bg-yellow-900/30 text-yellow-400 text-xs px-2 py-1 rounded-full">Processing</span>
	</div>
	<div class="col-span-1 flex items-center justify-end space-x-2">
	<button class="text-gray-400 hover:text-blue-400">
	<i class="fas fa-eye"></i>
	</button>
	<button class="text-gray-400 hover:text-yellow-400">
	<i class="fas fa-edit"></i>
	</button>
	<button class="text-gray-400 hover:text-red-400">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	</div>

	<!-- Document Item -->
	<div class="grid grid-cols-12 p-4 hover:bg-gray-700/30">
	<div class="col-span-5 flex items-center">
	<div class="bg-gray-900/20 w-8 h-8 rounded flex items-center justify-center mr-3">
	<i class="fas fa-file-alt text-gray-400 text-sm"></i>
	</div>
	<div>
	<p class="text-white">API Documentation.md</p>
	<p class="text-gray-500 text-xs">Uploaded: Jan 5, 2024</p>
	</div>
	</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">Markdown</div>
	<div class="col-span-2 flex items-center text-gray-400 text-sm">87 KB</div>
	<div class="col-span-2 flex items-center">
	<span class="bg-green-900/30 text-green-400 text-xs px-2 py-1 rounded-full">Indexed</span>
	</div>
	<div class="col-span-1 flex items-center justify-end space-x-2">
	<button class="text-gray-400 hover:text-blue-400">
	<i class="fas fa-eye"></i>
	</button>
	<button class="text-gray-400 hover:text-yellow-400">
	<i class="fas fa-edit"></i>
	</button>
	<button class="text-gray-400 hover:text-red-400">
	<i class="fas fa-trash"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Pagination -->
	<div class="flex justify-between items-center mt-4">
	<div class="text-gray-400 text-sm">
	Showing 1 to 4 of 142 documents
	</div>
	<div class="flex space-x-2">
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
	Previous
	</button>
	<button class="bg-blue-600 text-white px-3 py-1 rounded-lg text-sm">
	1
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
	2
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
	3
	</button>
	<button class="bg-gray-800 hover:bg-gray-700 text-white px-3 py-1 rounded-lg text-sm">
	Next
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Database Schema Section -->
	<div class="mb-8">
	<div class="flex justify-between items-center mb-6">
	<h2 class="text-2xl font-bold text-white">Database Schema</h2>
	<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center">
	<i class="fas fa-download mr-2"></i> Export Schema
	</button>
	</div>

	<div class="bg-gray-900 rounded-xl overflow-hidden">
	<div class="p-6">
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
	<!-- ER Diagram -->
	<div class="bg-gray-800/50 rounded-lg p-6">
	<h3 class="text-lg font-bold text-white mb-4">Entity Relationship Diagram</h3>
	<div class="bg-gray-900 rounded-lg p-4 flex items-center justify-center">
	<img src="https://mermaid.ink/img/eyJjb2RlIjoiZXJEaWFncmFtXG4gICAgVVNFUiB8fC0tb3sgQVBJX0tFWSA6IGhhc1xuICAgIFVTRVIgfHwtLW97IElOVEVHUkFUSU9OIDogaGFzXG4gICAgVVNFUiB8fC0tb3sgS05PV0xFR0VfQkFTRSA6IGhhc1xuICAgIElOVEVHUkFUSU9OIHx8LS1veyBNT0RFTCA6IGhhc1xuICAgIElOVEVHUkFUSU9OIHx8LS1veyBBUElfQ0FMTCA6IGdlbmVyYXRlc1xuICAgIEtOT1dMRURHRV9CQVNFIHx8LS1veyBET0NVTUVOVCA6IGNvbnRhaW5zXG4gICAgS05PV0xFR0VfQkFTRSB8fC0tb3sgQ0hVTksgOiBoYXNcbiAgICBNT0RFTCB8fC0tb3sgUFJPVklERVIgOiBiZWxvbmdzX3RvXG4gICAgTU9ERUwgfHwtLW97IE1PREVMX1ZFUlNJT04gOiBoYXNcbiAgICBNT0RFTCB8fC0tb3sgTU9ERUxfQ0FQQUJJTElUWSA6IGhhc1xuICAgIE1PREVMX1ZFUlNJT04gfHwtLW97IE1PREVMX1BBUkFNRVRFUiA6IGhhc1xuICAgIERPQ1VNRU5UIHx8LS1veyBET0NVTUVOVF9NRVRBREFUQSA6IGhhc1xuICAgIERPQ1VNRU5UIHx8LS1veyBET0NVTUVOVF9TVEFUVVMgOiBoYXNcbiAgICBDTFVTVEVSX05PREUgfHwtLW97IE1PREVMX0RFUExPWU1FTlQgOiBydW5zXG4gICAgQ0xVU1RFUl9OT0RFIHx8LS1veyBDTFVTVEVSX1JFU09VUkNFIDogdXNlc1xuICAgIENMVVNURVJfTk9ERSB8fC0tb3sgQ0xVU1RFUl9TVEFUVVMgOiBoYXNcbiAgICBDTFVTVEVSX05PREUgfHwtLW97IENMVVNURVJfTE9HIDogZ2VuZXJhdGVzIiwibWVybWFpZCI6eyJ0aGVtZSI6ImRhcmsiLCJ0aGVtZVZhcmlhYmxlcyI6eyJiYWNrZ3JvdW5kIjoiIzFhMWIxZSIsInRlcnRpYXJ5Q29sb3IiOiIjMWEyYzJlIiwicHJpbWFyeUNvbG9yIjoiIzNhODdmNiIsInNlY29uZGFyeUNvbG9yIjoiIzEwYjk4MSIsInRleHRDb2xvciI6IiNlMmUyZTIiLCJub3RlQ29sb3IiOiIjMWEyYzJlIiwibGluZUNvbG9yIjoiIzNhODdmNiIsIm5vdGVCZ0NvbG9yIjoiIzFhMWIxZSJ9fSwidXBkYXRlRWRpdG9yIjpmYWxzZX0" alt="ER Diagram" class="w-full h-auto">
	</div>
	</div>

	<!-- Schema Documentation -->
	<div class="bg-gray-800/50 rounded-lg p-6">
	<h3 class="text-lg font-bold text-white mb-4">Schema Documentation</h3>
	<div class="space-y-4">
	<div class="bg-gray-900 rounded-lg p-4">
	<h4 class="text-blue-400 font-medium mb-2">Main Tables</h4>
	<ul class="list-disc pl-5 text-gray-300 text-sm space-y-1">
	<li><strong>USER</strong> - Stores user account information</li>
	<li><strong>API_KEY</strong> - Manages API keys for model access</li>
	<li><strong>INTEGRATION</strong> - Tracks model integrations</li>
	<li><strong>MODEL</strong> - Contains AI model definitions</li>
	<li><strong>KNOWLEDGE_BASE</strong> - Manages knowledge repositories</li>
	</ul>
	</div>
	<div class="bg-gray-900 rounded-lg p-4">
	<h4 class="text-blue-400 font-medium mb-2">Supporting Tables</h4>
	<ul class="list-disc pl-5 text-gray-300 text-sm space-y-1">
	<li><strong>DOCUMENT</strong> - Stores uploaded knowledge files</li>
	<li><strong>CHUNK</strong> - Text chunks for vector search</li>
	<li><strong>API_CALL</strong> - Logs API request history</li>
	<li><strong>MODEL_VERSION</strong> - Tracks model variants</li>
	<li><strong>CLUSTER_NODE</strong> - Manages deployment nodes</li>
	</ul>
	</div>
	</div>
	</div>
	</div>

	<!-- Complete Schema SQL -->
	<div class="code-block">
	<div class="flex justify-between items-center bg-gray-800 px-4 py-3">
	<div class="flex items-center">
	<span class="text-gray-300 text-sm font-mono">ai_nexus_schema.sql</span>
	</div>
	<button class="text-gray-400 hover:text-white" onclick="copyCode(this)">
	<i class="far fa-copy mr-1"></i> Copy
	</button>
	</div>
	<div class="p-4 overflow-x-auto">
	<pre class="text-gray-300 text-sm font-mono"><code>-- Main Tables
	CREATE TABLE USER (
	user_id VARCHAR(36) PRIMARY KEY,
	email VARCHAR(255) NOT NULL UNIQUE,
	password_hash VARCHAR(255) NOT NULL,
	name VARCHAR(100),
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	last_login TIMESTAMP,
	is_active BOOLEAN DEFAULT TRUE
	);

	CREATE TABLE API_KEY (
	key_id VARCHAR(36) PRIMARY KEY,
	user_id VARCHAR(36) REFERENCES USER(user_id),
	key_name VARCHAR(100) NOT NULL,
	key_value VARCHAR(255) NOT NULL UNIQUE,
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	expires_at TIMESTAMP,
	is_active BOOLEAN DEFAULT TRUE,
	scopes JSONB
	);

	CREATE TABLE PROVIDER (
	provider_id VARCHAR(36) PRIMARY KEY,
	name VARCHAR(100) NOT NULL,
	description TEXT,
	website VARCHAR(255),
	api_docs_url VARCHAR(255),
	is_active BOOLEAN DEFAULT TRUE
	);

	CREATE TABLE MODEL (
	model_id VARCHAR(36) PRIMARY KEY,
	provider_id VARCHAR(36) REFERENCES PROVIDER(provider_id),
	name VARCHAR(100) NOT NULL,
	description TEXT,
	context_window INTEGER,
	is_multimodal BOOLEAN DEFAULT FALSE,
	is_finetunable BOOLEAN DEFAULT FALSE,
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	updated_at TIMESTAMP
	);

	CREATE TABLE MODEL_VERSION (
	version_id VARCHAR(36) PRIMARY KEY,
	model_id VARCHAR(36) REFERENCES MODEL(model_id),
	version_name VARCHAR(50) NOT NULL,
	release_date DATE,
	is_current BOOLEAN DEFAULT FALSE,
	deprecated_at TIMESTAMP
	);

	CREATE TABLE MODEL_CAPABILITY (
	capability_id VARCHAR(36) PRIMARY KEY,
	model_id VARCHAR(36) REFERENCES MODEL(model_id),
	capability_name VARCHAR(100) NOT NULL,
	capability_description TEXT
	);

	CREATE TABLE MODEL_PARAMETER (
	parameter_id VARCHAR(36) PRIMARY KEY,
	version_id VARCHAR(36) REFERENCES MODEL_VERSION(version_id),
	param_name VARCHAR(100) NOT NULL,
	param_type VARCHAR(50) NOT NULL,
	default_value VARCHAR(100),
	min_value VARCHAR(100),
	max_value VARCHAR(100),
	description TEXT
	);

	-- Integration Tables
	CREATE TABLE INTEGRATION (
	integration_id VARCHAR(36) PRIMARY KEY,
	user_id VARCHAR(36) REFERENCES USER(user_id),
	model_id VARCHAR(36) REFERENCES MODEL(model_id),
	name VARCHAR(100) NOT NULL,
	description TEXT,
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	updated_at TIMESTAMP,
	is_active BOOLEAN DEFAULT TRUE,
	config JSONB
	);

	CREATE TABLE API_CALL (
	call_id VARCHAR(36) PRIMARY KEY,
	integration_id VARCHAR(36) REFERENCES INTEGRATION(integration_id),
	timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	endpoint VARCHAR(255),
	status_code INTEGER,
	duration_ms INTEGER,
	prompt_tokens INTEGER,
	completion_tokens INTEGER,
	cost NUMERIC(10,6),
	error_message TEXT,
	request_body TEXT,
	response_body TEXT
	);

	-- Knowledge Base Tables
	CREATE TABLE KNOWLEDGE_BASE (
	kb_id VARCHAR(36) PRIMARY KEY,
	user_id VARCHAR(36) REFERENCES USER(user_id),
	name VARCHAR(100) NOT NULL,
	description TEXT,
	created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	updated_at TIMESTAMP,
	vector_store_type VARCHAR(50),
	index_status VARCHAR(20) DEFAULT 'empty'
	);

	CREATE TABLE DOCUMENT (
	document_id VARCHAR(36) PRIMARY KEY,
	kb_id VARCHAR(36) REFERENCES KNOWLEDGE_BASE(kb_id),
	name VARCHAR(255) NOT NULL,
	file_path VARCHAR(255),
	file_size INTEGER,
	file_type VARCHAR(50),
	upload_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	processing_status VARCHAR(20) DEFAULT 'pending'
	);

	CREATE TABLE DOCUMENT_METADATA (
	metadata_id VARCHAR(36) PRIMARY KEY,
	document_id VARCHAR(36) REFERENCES DOCUMENT(document_id),
	metadata_key VARCHAR(100) NOT NULL,
	metadata_value TEXT,
	metadata_type VARCHAR(20)
	);

	CREATE TABLE CHUNK (
	chunk_id VARCHAR(36) PRIMARY KEY,
	document_id VARCHAR(36) REFERENCES DOCUMENT(document_id),
	chunk_text TEXT NOT NULL,
	chunk_index INTEGER,
	vector_embedding VECTOR(1536),
	metadata JSONB
	);

	-- Cluster Management Tables
	CREATE TABLE CLUSTER_NODE (
	node_id VARCHAR(36) PRIMARY KEY,
	hostname VARCHAR(255) NOT NULL,
	ip_address VARCHAR(50),
	node_type VARCHAR(50),
	gpu_type VARCHAR(50),
	cpu_cores INTEGER,
	memory_gb INTEGER,
	join_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	last_heartbeat TIMESTAMP
	);

	CREATE TABLE CLUSTER_STATUS (
	status_id VARCHAR(36) PRIMARY KEY,
	node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
	timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	cpu_usage NUMERIC(5,2),
	memory_usage NUMERIC(5,2),
	gpu_usage NUMERIC(5,2),
	disk_usage NUMERIC(5,2),
	network_in NUMERIC(10,2),
	network_out NUMERIC(10,2)
	);

	CREATE TABLE MODEL_DEPLOYMENT (
	deployment_id VARCHAR(36) PRIMARY KEY,
	model_id VARCHAR(36) REFERENCES MODEL(model_id),
	node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
	version_id VARCHAR(36) REFERENCES MODEL_VERSION(version_id),
	start_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	last_activity TIMESTAMP,
	status VARCHAR(20) DEFAULT 'running',
	replicas INTEGER DEFAULT 1,
	config JSONB
	);

	CREATE TABLE CLUSTER_LOG (
	log_id VARCHAR(36) PRIMARY KEY,
	node_id VARCHAR(36) REFERENCES CLUSTER_NODE(node_id),
	deployment_id VARCHAR(36) REFERENCES MODEL_DEPLOYMENT(deployment_id),
	timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
	log_level VARCHAR(10),
	message TEXT,
	context JSONB
	);</code></pre>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-gray-900 border-t border-gray-800">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
	<div>
	<h3 class="text-white text-lg font-medium mb-4">AI Nexus</h3>
	<p class="text-gray-400 text-sm">Unified platform for AI model integration, deployment, and management.</p>
	</div>
	<div>
	<h3 class="text-white text-lg font-medium mb-4">Product</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Features</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Pricing</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Documentation</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">API Status</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-white text-lg font-medium mb-4">Company</h3>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">About</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Blog</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Careers</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white text-sm">Contact</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-white text-lg font-medium mb-4">Connect</h3>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-github"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-linkedin"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white">
	<i class="fab fa-discord"></i>
	</a>
	</div>
	<div class="mt-4">
	<p class="text-gray-400 text-sm">Subscribe to our newsletter</p>
	<div class="flex mt-2">
	<input type="email" placeholder="Your email" class="bg-gray-800 text-white px-3 py-2 rounded-l-lg text-sm w-full focus
	<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=mikeschlottig/ai-embedding-app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>