Spaces:

basheer1414
/

test

Running

App Files Files Community

test / index.html

basheer1414

use moder colour gradients for dashborad also and premium fonts - Follow Up Deployment

61fce48 verified 5 months ago

raw

history blame contribute delete

24.4 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ANA AI - Multi-Model Dashboard</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>

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

	:root {
	--primary: #0f172a;
	--secondary: #1e293b;
	--accent: #4f46e5;
	--success: #10b981;
	--warning: #f59e0b;
	--error: #ef4444;
	}

	* { font-family: 'Inter', sans-serif; }

	body {
	background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
	background-attachment: fixed;
	}

	h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }

	.glass-morphism {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	}

	.glow-card {
	background: linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.08);
	transition: transform 0.4s, box-shadow 0.4s;
	}
	.glow-card:hover {
	transform: translateY(-8px) scale(1.02);
	box-shadow: 0 0 20px var(--accent), 0 0 40px var(--primary);
	}

	.metric-card {
	position: relative;
	overflow: hidden;
	border-radius: 1rem;
	background: linear-gradient(135deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(255, 255, 255, 0.08);
	}
	.metric-card::before {
	content: '';
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.3), transparent);
	animation: rotate 4s linear infinite;
	z-index: 0;
	}
	.metric-card > * { position: relative; z-index: 1; }

	@keyframes rotate {
	100% { transform: rotate(360deg); }
	}

	.model-card {
	transition: all 0.3s ease;
	background: linear-gradient(145deg, #f8fafc, #e2e8f0);
	box-shadow: 20px 20px 60px #d1d5db, -20px -20px 60px #ffffff;
	}

	.model-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}

	.status-indicator {
	animation: pulse 2s infinite;
	}

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

	.sidebar {
	transition: all 0.3s ease;
	}

	.sidebar-collapsed {
	transform: translateX(-100%);
	}

	.chat-bubble {
	max-width: 70%;
	word-wrap: break-word;
	}

	.typing-indicator {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #6b7280;
	animation: typing 1.4s infinite ease-in-out;
	}

	.typing-indicator:nth-child(2) {
	animation-delay: 0.2s;
	}

	.typing-indicator:nth-child(3) {
	animation-delay: 0.4s;
	}

	@keyframes typing {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-10px); }
	}

	.metric-card {
	position: relative;
	overflow: hidden;
	}

	.metric-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: left 0.5s;
	}

	.metric-card:hover::before {
	left: 100%;
	}

	.glow-effect {
	box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
	}

	.circular-progress {
	transform: rotate(-90deg);
	}

	.circular-progress circle {
	stroke-dasharray: 283;
	stroke-dashoffset: 283;
	transition: stroke-dashoffset 0.5s ease-in-out;
	}
	</style>
	</head>
	<body class="bg-gray-50">
	<!-- Navigation -->
	<nav class="bg-white shadow-lg border-b border-gray-200">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex justify-between items-center h-16">
	<div class="flex items-center">
	<button id="sidebar-toggle" class="p-2 rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-100">
	<i data-feather="menu" class="h-6 w-6"></i>
	</button>
	<h1 class="ml-4 text-2xl font-bold text-gray-900">ANA AI Dashboard</h1>
	</div>
	<div class="flex items-center space-x-4">
	<button class="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full">
	<i data-feather="bell" class="h-5 w-5"></i>
	<span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
	</button>
	<div class="flex items-center space-x-2">
	<img class="h-8 w-8 rounded-full" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='50' fill='%233b82f6'/%3E%3Ctext x='50' y='50' text-anchor='middle' dy='0.35em' fill='white' font-size='40' font-family='Arial'%3EA%3C/text%3E%3C/svg%3E" alt="User">
	<span class="text-sm font-medium">Admin</span>
	</div>
	</div>
	</div>
	</div>
	</nav>

	<div class="flex h-screen bg-gray-50">
	<!-- Sidebar -->
	<aside id="sidebar" class="sidebar w-64 bg-white shadow-lg flex-shrink-0">
	<nav class="mt-5 px-2">
	<a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-white bg-blue-600">
	<i data-feather="home" class="mr-3 h-5 w-5"></i>
	Dashboard
	</a>
	<a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
	<i data-feather="cpu" class="mr-3 h-5 w-5"></i>
	Models
	</a>
	<a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
	<i data-feather="bar-chart-2" class="mr-3 h-5 w-5"></i>
	Analytics
	</a>
	<a href="#" class="group flex items-center px-2 py-2 text-sm font-medium rounded-md text-gray-600 hover:text-gray-900 hover:bg-gray-50">
	<i data-feather="settings" class="mr-3 h-5 w-5"></i>
	Settings
	</a>
	</nav>
	</aside>

	<!-- Main Content -->
	<main class="flex-1 overflow-y-auto">
	<div class="py-6">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<!-- Header -->
	<div class="mb-8">
	<h2 class="text-3xl font-bold text-gray-900">Welcome back to ANA AI</h2>
	<p class="mt-2 text-gray-600">Manage your multi-model AI assistant</p>
	</div>

	<!-- Stats Overview -->
	<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
	<div class="metric-card p-6 text-white">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium opacity-80">Total Models</p>
	<p class="text-3xl font-bold">8</p>
	</div>
	<div class="p-3 bg-white/20 rounded-full">
	<i data-feather="cpu" class="h-6 w-6"></i>
	</div>
	</div>
	</div>
	<div class="metric-card p-6 text-white">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium opacity-80">Active Sessions</p>
	<p class="text-3xl font-bold">24</p>
	</div>
	<div class="p-3 bg-white/20 rounded-full">
	<i data-feather="activity" class="h-6 w-6"></i>
	</div>
	</div>
	</div>
	<div class="metric-card p-6 text-white">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium opacity-80">API Calls</p>
	<p class="text-3xl font-bold">12.4k</p>
	</div>
	<div class="p-3 bg-white/20 rounded-full">
	<i data-feather="trending-up" class="h-6 w-6"></i>
	</div>
	</div>
	</div>
	<div class="metric-card p-6 text-white">
	<div class="flex items-center justify-between">
	<div>
	<p class="text-sm font-medium opacity-80">Uptime</p>
	<p class="text-3xl font-bold">99.9%</p>
	</div>
	<div class="p-3 bg-white/20 rounded-full">
	<i data-feather="clock" class="h-6 w-6"></i>
	</div>
	</div>
	</div>
	</div>

	<!-- Models Grid -->
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
	<!-- Model Performance (removed) -->
	<!-- Model Distribution (removed) -->
	</div>

	<!-- Active Models -->
	<div class="bg-white p-6 rounded-lg shadow-md mb-8">
	<h3 class="text-lg font-semibold mb-4">Active Models</h3>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
	<!-- Model Cards -->
	<div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gpt')">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-semibold">GPT-4 Turbo</h4>
	<span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Latest OpenAI model</p>
	<div class="flex items-center justify-between">
	<span class="text-xs text-gray-500">2.3ms avg</span>
	<div class="flex space-x-1">
	<div class="w-1 h-4 bg-blue-600 rounded"></div>
	<div class="w-1 h-6 bg-blue-600 rounded"></div>
	<div class="w-1 h-3 bg-blue-600 rounded"></div>
	</div>
	</div>
	</div>

	<div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('claude')">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-semibold">Claude 3</h4>
	<span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Anthropic's best</p>
	<div class="flex items-center justify-between">
	<span class="text-xs text-gray-500">1.8ms avg</span>
	<div class="flex space-x-1">
	<div class="w-1 h-5 bg-purple-600 rounded"></div>
	<div class="w-1 h-7 bg-purple-600 rounded"></div>
	<div class="w-1 h-4 bg-purple-600 rounded"></div>
	</div>
	</div>
	</div>

	<div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('gemini')">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-semibold">Gemini Pro</h4>
	<span class="status-indicator w-2 h-2 bg-green-500 rounded-full"></span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Google's AI</p>
	<div class="flex items-center justify-between">
	<span class="text-xs text-gray-500">2.1ms avg</span>
	<div class="flex space-x-1">
	<div class="w-1 h-4 bg-green-600 rounded"></div>
	<div class="w-1 h-5 bg-green-600 rounded"></div>
	<div class="w-1 h-3 bg-green-600 rounded"></div>
	</div>
	</div>
	</div>

	<div class="model-card p-4 rounded-lg cursor-pointer" onclick="selectModel('llama')">
	<div class="flex items-center justify-between mb-2">
	<h4 class="font-semibold">Llama 3</h4>
	<span class="status-indicator w-2 h-2 bg-yellow-500 rounded-full"></span>
	</div>
	<p class="text-sm text-gray-600 mb-2">Meta's open-source</p>
	<div class="flex items-center justify-between">
	<span class="text-xs text-gray-500">3.5ms avg</span>
	<div class="flex space-x-1">
	<div class="w-1 h-3 bg-orange-600 rounded"></div>
	<div class="w-1 h-4 bg-orange-600 rounded"></div>
	<div class="w-1 h-2 bg-orange-600 rounded"></div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Chat Interface -->
	<div class="bg-white p-6 rounded-lg shadow-md">
	<h3 class="text-lg font-semibold mb-4">Test Model</h3>
	<div id="chat-container" class="h-64 border rounded-lg mb-4 overflow-y-auto p-4">
	<div id="chat-messages"></div>
	</div>
	<div class="flex space-x-2">
	<input type="text" id="message-input" placeholder="Type your message..."
	class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
	<button onclick="sendMessage()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
	<i data-feather="send" class="h-4 w-4"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>

	<!-- Model Modal -->
	<div id="modelModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
	<div class="bg-white p-8 rounded-lg max-w-md w-full">
	<h3 id="modalTitle" class="text-xl font-bold mb-4">Model Details</h3>
	<div id="modalContent" class="space-y-4">
	<!-- Content will be dynamically inserted -->
	</div>
	<button onclick="closeModal()" class="mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
	Close
	</button>
	</div>
	</div>

	<script>
	// Initialize Feather Icons
	feather.replace();

	// Sidebar toggle
	document.getElementById('sidebar-toggle').addEventListener('click', function() {
	const sidebar = document.getElementById('sidebar');
	sidebar.classList.toggle('sidebar-collapsed');
	});

	// Modal functions
	function selectModel(model) {
	const modal = document.getElementById('modelModal');
	const title = document.getElementById('modalTitle');
	const content = document.getElementById('modalContent');

	const models = {
	gpt: {
	title: 'GPT-4 Turbo',
	content: `
	<p><strong>Type:</strong> OpenAI GPT-4</p>
	<p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
	<p><strong>Response Time:</strong> 2.3ms average</p>
	<p><strong>Accuracy:</strong> 94%</p>
	<p><strong>Last Updated:</strong> 2 hours ago</p>
	`
	},
	claude: {
	title: 'Claude 3',
	content: `
	<p><strong>Type:</strong> Anthropic Claude 3</p>
	<p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
	<p><strong>Response Time:</strong> 1.8ms average</p>
	<p><strong>Accuracy:</strong> 96%</p>
	<p><strong>Last Updated:</strong> 1 hour ago</p>
	`
	},
	gemini: {
	title: 'Gemini Pro',
	content: `
	<p><strong>Type:</strong> Google Gemini Pro</p>
	<p><strong>Status:</strong> <span class="text-green-600">Active</span></p>
	<p><strong>Response Time:</strong> 2.1ms average</p>
	<p><strong>Accuracy:</strong> 93%</p>
	<p><strong>Last Updated:</strong> 30 minutes ago</p>
	`
	},
	llama: {
	title: 'Llama 3',
	content: `
	<p><strong>Type:</strong> Meta Llama 3</p>
	<p><strong>Status:</strong> <span class="text-yellow-600">Moderate</span></p>
	<p><strong>Response Time:</strong> 3.5ms average</p>
	<p><strong>Accuracy:</strong> 89%</p>
	<p><strong>Last Updated:</strong> 4 hours ago</p>
	`
	}
	};

	title.textContent = models[model].title;
	content.innerHTML = models[model].content;
	modal.classList.remove('hidden');
	modal.classList.add('flex');
	}

	function closeModal() {
	const modal = document.getElementById('modelModal');
	modal.classList.add('hidden');
	modal.classList.remove('flex');
	}

	// Chat functionality
	function sendMessage() {
	const input = document.getElementById('message-input');
	const message = input.value.trim();
	if (!message) return;

	addMessage('user', message);
	input.value = '';

	// Simulate AI response
	setTimeout(() => {
	const responses = [
	"I understand your query. Let me process that information...",
	"Based on my analysis, here's what I found...",
	"That's an interesting question. Here's my response...",
	"Let me break this down for you..."
	];
	const randomResponse = responses[Math.floor(Math.random() * responses.length)];

	// Show typing indicator
	showTypingIndicator();

	setTimeout(() => {
	hideTypingIndicator();
	addMessage('ai', randomResponse);
	}, 1500);
	}, 500);
	}

	function addMessage(type, content) {
	const container = document.getElementById('chat-messages');
	const messageDiv = document.createElement('div');
	messageDiv.className = `flex ${type === 'user' ? 'justify-end' : 'justify-start'} mb-4`;
	messageDiv.innerHTML = `
	<div class="chat-bubble ${type === 'user' ? 'bg-blue-600 text-white' : 'bg-gray-200 text-gray-800'} px-4 py-2 rounded-lg">
	${content}
	</div>
	`;
	container.appendChild(messageDiv);
	container.scrollTop = container.scrollHeight;
	}

	function showTypingIndicator() {
	const container = document.getElementById('chat-messages');
	const typingDiv = document.createElement('div');
	typingDiv.id = 'typing-indicator';
	typingDiv.className = 'flex justify-start mb-4';
	typingDiv.innerHTML = `
	<div class="chat-bubble bg-gray-200 px-4 py-2 rounded-lg">
	<div class="typing-indicator"></div>
	<div class="typing-indicator"></div>
	<div class="typing-indicator"></div>
	</div>
	`;
	container.appendChild(typingDiv);
	container.scrollTop = container.scrollHeight;
	}

	function hideTypingIndicator() {
	const indicator = document.getElementById('typing-indicator');
	if (indicator) indicator.remove();
	}

	// Enter key to send message
	document.getElementById('message-input').addEventListener('keypress', function(e) {
	if (e.key === 'Enter') {
	sendMessage();
	}
	});
	</script>
	<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=basheer1414/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>