Spaces:

zsytony
/

modellab

Running

App Files Files Community

modellab / index.html

zsytony

Add 2 files

55da147 verified 23 days ago

raw

history blame contribute delete

36.2 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>ModelLab - AI Experiment Platform</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<style>
	/* Custom styles */
	.gradient-bg {
	background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);
	}
	.sidebar {
	transition: all 0.3s ease;
	}
	.card-hover:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}
	.tab-content {
	display: none;
	}
	.tab-content.active {
	display: block;
	}
	.progress-bar {
	transition: width 0.5s ease;
	}
	</style>
	</head>
	<body class="bg-gray-50 font-sans">
	<!-- Main Container -->
	<div class="flex h-screen overflow-hidden">
	<!-- Sidebar -->
	<div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
	<div class="p-4 border-b border-gray-200">
	<h1 class="text-2xl font-bold text-indigo-600 flex items-center">
	<i class="fas fa-robot mr-2"></i> ModelLab
	</h1>
	</div>
	<div class="flex-1 overflow-y-auto">
	<nav class="p-4">
	<div class="mb-6">
	<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</h3>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-indigo-50 text-indigo-700">
	<i class="fas fa-tachometer-alt mr-3 text-indigo-500"></i> Dashboard
	</a>
	</div>
	<div class="mb-6">
	<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Experiments</h3>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-flask mr-3 text-gray-500"></i> My Experiments
	</a>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-plus-circle mr-3 text-gray-500"></i> New Experiment
	</a>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-tasks mr-3 text-gray-500"></i> Templates
	</a>
	</div>
	<div class="mb-6">
	<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Models</h3>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-cog mr-3 text-gray-500"></i> SFT Configuration
	</a>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-chart-line mr-3 text-gray-500"></i> Evaluation
	</a>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-database mr-3 text-gray-500"></i> Datasets
	</a>
	</div>
	<div>
	<h3 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Settings</h3>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-user mr-3 text-gray-500"></i> Profile
	</a>
	<a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
	<i class="fas fa-cog mr-3 text-gray-500"></i> Settings
	</a>
	</div>
	</nav>
	</div>
	<div class="p-4 border-t border-gray-200">
	<div class="flex items-center">
	<img class="w-8 h-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="User avatar">
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-700">John Doe</p>
	<p class="text-xs text-gray-500">[email protected]</p>
	</div>
	<button class="ml-auto text-gray-500 hover:text-gray-700">
	<i class="fas fa-sign-out-alt"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Main Content -->
	<div class="flex-1 overflow-auto">
	<!-- Header -->
	<header class="bg-white shadow-sm">
	<div class="px-6 py-4 flex items-center justify-between">
	<div class="flex items-center">
	<button class="mr-4 text-gray-500 hover:text-gray-700">
	<i class="fas fa-bars"></i>
	</button>
	<h2 class="text-xl font-semibold text-gray-800">Dashboard</h2>
	</div>
	<div class="flex items-center">
	<div class="relative">
	<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
	<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
	</div>
	<button class="ml-4 p-2 text-gray-500 hover:text-gray-700 relative">
	<i class="fas fa-bell"></i>
	<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
	</button>
	</div>
	</div>
	</header>

	<!-- Content -->
	<main class="p-6">
	<!-- Stats Cards -->
	<div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
	<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
	<div class="flex items-center">
	<div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
	<i class="fas fa-flask text-xl"></i>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium text-gray-500">Active Experiments</p>
	<p class="text-2xl font-semibold text-gray-800">12</p>
	</div>
	</div>
	</div>
	<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
	<div class="flex items-center">
	<div class="p-3 rounded-full bg-green-100 text-green-600">
	<i class="fas fa-check-circle text-xl"></i>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium text-gray-500">Completed</p>
	<p class="text-2xl font-semibold text-gray-800">24</p>
	</div>
	</div>
	</div>
	<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
	<div class="flex items-center">
	<div class="p-3 rounded-full bg-blue-100 text-blue-600">
	<i class="fas fa-cog text-xl"></i>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium text-gray-500">SFT Models</p>
	<p class="text-2xl font-semibold text-gray-800">8</p>
	</div>
	</div>
	</div>
	<div class="bg-white rounded-lg shadow p-6 card-hover transition-all duration-300">
	<div class="flex items-center">
	<div class="p-3 rounded-full bg-purple-100 text-purple-600">
	<i class="fas fa-chart-bar text-xl"></i>
	</div>
	<div class="ml-4">
	<p class="text-sm font-medium text-gray-500">Evaluations</p>
	<p class="text-2xl font-semibold text-gray-800">36</p>
	</div>
	</div>
	</div>
	</div>

	<!-- Recent Experiments -->
	<div class="bg-white rounded-lg shadow overflow-hidden mb-6">
	<div class="px-6 py-4 border-b border-gray-200">
	<div class="flex items-center justify-between">
	<h3 class="text-lg font-medium text-gray-900">Recent Experiments</h3>
	<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
	<i class="fas fa-plus mr-2"></i> New Experiment
	</button>
	</div>
	</div>
	<div class="overflow-x-auto">
	<table class="min-w-full divide-y divide-gray-200">
	<thead class="bg-gray-50">
	<tr>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Model</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Progress</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Created</th>
	<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
	</tr>
	</thead>
	<tbody class="bg-white divide-y divide-gray-200">
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-indigo-100 rounded-full flex items-center justify-center">
	<i class="fas fa-dna text-indigo-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Sentiment Analysis v2</div>
	<div class="text-sm text-gray-500">SFT</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">GPT-3.5</div>
	<div class="text-sm text-gray-500">Base model</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Running</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 65%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">65% complete</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 hours ago</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
	<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
	<button class="text-red-600 hover:text-red-900"><i class="fas fa-stop-circle"></i></button>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center">
	<i class="fas fa-language text-purple-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Translation EN-FR</div>
	<div class="text-sm text-gray-500">Evaluation</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">LLaMA-2</div>
	<div class="text-sm text-gray-500">7B params</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Pending</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 0%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">Waiting for resources</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 hours ago</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
	<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
	<button class="text-green-600 hover:text-green-900"><i class="fas fa-play-circle"></i></button>
	</td>
	</tr>
	<tr>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 bg-green-100 rounded-full flex items-center justify-center">
	<i class="fas fa-robot text-green-600"></i>
	</div>
	<div class="ml-4">
	<div class="text-sm font-medium text-gray-900">Chatbot Fine-tuning</div>
	<div class="text-sm text-gray-500">SFT</div>
	</div>
	</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="text-sm text-gray-900">GPT-4</div>
	<div class="text-sm text-gray-500">Base model</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">Completed</span>
	</td>
	<td class="px-6 py-4 whitespace-nowrap">
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-600 h-2.5 rounded-full progress-bar" style="width: 100%"></div>
	</div>
	<div class="text-xs text-gray-500 mt-1">Completed 1 day ago</div>
	</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 days ago</td>
	<td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
	<button class="text-indigo-600 hover:text-indigo-900 mr-3"><i class="fas fa-eye"></i></button>
	<button class="text-gray-600 hover:text-gray-900 mr-3"><i class="fas fa-chart-line"></i></button>
	<button class="text-indigo-600 hover:text-indigo-900"><i class="fas fa-redo"></i></button>
	</td>
	</tr>
	</tbody>
	</table>
	</div>
	</div>

	<!-- SFT and Evaluation Section -->
	<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
	<!-- SFT Configuration -->
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="px-6 py-4 border-b border-gray-200">
	<h3 class="text-lg font-medium text-gray-900">Supervised Fine-Tuning</h3>
	</div>
	<div class="p-6">
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Base Model</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
	<option>GPT-3.5</option>
	<option>GPT-4</option>
	<option>LLaMA-2 (7B)</option>
	<option>LLaMA-2 (13B)</option>
	<option>BLOOM (7.1B)</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Training Dataset</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
	<option>Sentiment Analysis (10k samples)</option>
	<option>Translation EN-FR (50k pairs)</option>
	<option>Customer Support (8k dialogs)</option>
	<option>Custom Dataset...</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Hyperparameters</label>
	<div class="grid grid-cols-2 gap-4">
	<div>
	<label class="block text-xs text-gray-500 mb-1">Learning Rate</label>
	<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="1e-5">
	</div>
	<div>
	<label class="block text-xs text-gray-500 mb-1">Batch Size</label>
	<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="16">
	</div>
	<div>
	<label class="block text-xs text-gray-500 mb-1">Epochs</label>
	<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="3">
	</div>
	<div>
	<label class="block text-xs text-gray-500 mb-1">Warmup Steps</label>
	<input type="text" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" value="500">
	</div>
	</div>
	</div>
	<div class="flex justify-end">
	<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
	<i class="fas fa-play mr-2"></i> Start Training
	</button>
	</div>
	</div>
	</div>

	<!-- Evaluation -->
	<div class="bg-white rounded-lg shadow overflow-hidden">
	<div class="px-6 py-4 border-b border-gray-200">
	<h3 class="text-lg font-medium text-gray-900">Model Evaluation</h3>
	</div>
	<div class="p-6">
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Model to Evaluate</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
	<option>Sentiment Analysis v2</option>
	<option>Translation EN-FR</option>
	<option>Chatbot Fine-tuning</option>
	<option>Custom Model...</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Evaluation Dataset</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
	<option>Sentiment Test Set (1k samples)</option>
	<option>Translation Test Set (5k pairs)</option>
	<option>Customer Support Test (500 dialogs)</option>
	<option>Custom Dataset...</option>
	</select>
	</div>
	<div class="mb-4">
	<label class="block text-sm font-medium text-gray-700 mb-1">Metrics</label>
	<div class="grid grid-cols-2 gap-2">
	<div class="flex items-center">
	<input id="accuracy" name="metrics" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="accuracy" class="ml-2 block text-sm text-gray-700">Accuracy</label>
	</div>
	<div class="flex items-center">
	<input id="bleu" name="metrics" type="checkbox" checked class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="bleu" class="ml-2 block text-sm text-gray-700">BLEU Score</label>
	</div>
	<div class="flex items-center">
	<input id="rouge" name="metrics" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="rouge" class="ml-2 block text-sm text-gray-700">ROUGE</label>
	</div>
	<div class="flex items-center">
	<input id="perplexity" name="metrics" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="perplexity" class="ml-2 block text-sm text-gray-700">Perplexity</label>
	</div>
	</div>
	</div>
	<div class="flex justify-end">
	<button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
	<i class="fas fa-chart-bar mr-2"></i> Run Evaluation
	</button>
	</div>
	</div>
	</div>
	</div>

	<!-- Login Modal (hidden by default) -->
	<div id="loginModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
	<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
	<div class="fixed inset-0 transition-opacity" aria-hidden="true">
	<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
	</div>
	<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true"></span>
	<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
	<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
	<div class="sm:flex sm:items-start">
	<div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-indigo-100 sm:mx-0 sm:h-10 sm:w-10">
	<i class="fas fa-user text-indigo-600"></i>
	</div>
	<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
	<h3 class="text-lg leading-6 font-medium text-gray-900">Sign in to ModelLab</h3>
	<div class="mt-2">
	<p class="text-sm text-gray-500">Enter your credentials to access your experiments and models.</p>
	</div>
	</div>
	</div>
	<div class="mt-5">
	<form>
	<div class="mb-4">
	<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
	<input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
	</div>
	<div class="mb-4">
	<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
	<input type="password" id="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
	</div>
	<div class="flex items-center mb-4">
	<input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
	<label for="remember" class="ml-2 block text-sm text-gray-700">Remember me</label>
	</div>
	</form>
	</div>
	</div>
	<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
	<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
	Sign in
	</button>
	<button type="button" id="closeLoginModal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
	Cancel
	</button>
	</div>
	</div>
	</div>
	</div>
	</main>
	</div>
	</div>

	<script>
	// Toggle sidebar on mobile
	document.querySelector('.fa-bars').addEventListener('click', function() {
	document.querySelector('.sidebar').classList.toggle('-translate-x-full');
	});

	// Login modal functionality
	const loginModal = document.getElementById('loginModal');
	const closeLoginModal = document.getElementById('closeLoginModal');

	// Show login modal (you can trigger this when needed)
	function showLoginModal() {
	loginModal.classList.remove('hidden');
	}

	// Hide login modal
	closeLoginModal.addEventListener('click', function() {
	loginModal.classList.add('hidden');
	});

	// Close modal when clicking outside
	window.addEventListener('click', function(event) {
	if (event.target === loginModal) {
	loginModal.classList.add('hidden');
	}
	});

	// Tab functionality
	const tabs = document.querySelectorAll('[data-tab]');
	tabs.forEach(tab => {
	tab.addEventListener('click', function() {
	const tabId = this.getAttribute('data-tab');
	document.querySelectorAll('.tab-content').forEach(content => {
	content.classList.remove('active');
	});
	document.getElementById(tabId).classList.add('active');

	// Update active tab styling
	document.querySelectorAll('[data-tab]').forEach(t => {
	t.classList.remove('bg-indigo-100', 'text-indigo-700');
	t.classList.add('text-gray-700', 'hover:bg-gray-100');
	});
	this.classList.remove('text-gray-700', 'hover:bg-gray-100');
	this.classList.add('bg-indigo-100', 'text-indigo-700');
	});
	});

	// Simulate progress bar animation
	function animateProgressBars() {
	const progressBars = document.querySelectorAll('.progress-bar');
	progressBars.forEach(bar => {
	const targetWidth = bar.style.width;
	bar.style.width = '0%';
	setTimeout(() => {
	bar.style.width = targetWidth;
	}, 100);
	});
	}

	// Initialize animations when page loads
	window.addEventListener('load', function() {
	animateProgressBars();

	// Check if user is logged in (you would replace this with actual auth check)
	const isLoggedIn = false; // Change to true to bypass login
	if (!isLoggedIn) {
	setTimeout(showLoginModal, 500);
	}
	});
	</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=zsytony/modellab" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>