Spaces:

AMRuk
/

neuralnest-ai-playground

Running

App Files Files Community

neuralnest-ai-playground / index.html

AMRuk

قدم منصة كاملة مثل hugginface

f47f592 verified 11 days ago

raw

history blame contribute delete

7.94 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>NeuralNest \| AI Playground</title>
	<link rel="stylesheet" href="style.css">
	<script src="https://cdn.tailwindcss.com"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
	<script>
	tailwind.config = {
	theme: {
	extend: {
	colors: {
	primary: {
	50: '#f0f9ff',
	100: '#e0f2fe',
	300: '#7dd3fc',
	500: '#0ea5e9',
	700: '#0369a1',
	900: '#0c4a6e',
	},
	secondary: {
	50: '#f5f3ff',
	100: '#ede9fe',
	300: '#c4b5fd',
	500: '#8b5cf6',
	700: '#6d28d9',
	900: '#4c1d95',
	}
	}
	}
	}
	}
	</script>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<custom-navbar></custom-navbar>

	<main class="container mx-auto px-4 py-8">
	<section class="mb-16">
	<div class="text-center max-w-3xl mx-auto">
	<h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4">Experiment with AI Models</h1>
	<p class="text-xl text-gray-600 mb-8">Discover, run, and share machine learning models in our collaborative ecosystem</p>
	<div class="flex flex-col sm:flex-row justify-center gap-4">
	<a href="/explore" class="bg-primary-500 hover:bg-primary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
	<i data-feather="compass"></i>
	Explore Models
	</a>
	<a href="/upload" class="bg-secondary-500 hover:bg-secondary-600 text-white font-medium py-3 px-6 rounded-lg transition duration-200 flex items-center justify-center gap-2">
	<i data-feather="upload"></i>
	Upload Model
	</a>
	</div>
	</div>
	</section>

	<section class="mb-16">
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Featured Models</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="featured-models">
	<!-- Models will be loaded here -->
	</div>
	</section>

	<section class="mb-16">
	<div class="bg-gradient-to-r from-primary-500 to-secondary-500 rounded-2xl p-8 text-white">
	<div class="max-w-2xl mx-auto text-center">
	<h2 class="text-2xl font-bold mb-4">Join our AI Community</h2>
	<p class="mb-6">Connect with thousands of AI researchers, developers, and enthusiasts. Share knowledge, collaborate on projects, and accelerate your AI journey.</p>
	<a href="/signup" class="bg-white text-primary-700 hover:bg-gray-100 font-medium py-3 px-6 rounded-lg transition duration-200 inline-block">
	Sign Up Free
	</a>
	</div>
	</div>
	</section>

	<section>
	<h2 class="text-2xl font-bold text-gray-800 mb-6">Popular Categories</h2>
	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
	<a href="/categories/nlp" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
	<div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="message-square" class="text-primary-500"></i>
	</div>
	<h3 class="font-medium">NLP</h3>
	</a>
	<a href="/categories/vision" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
	<div class="w-12 h-12 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="eye" class="text-secondary-500"></i>
	</div>
	<h3 class="font-medium">Computer Vision</h3>
	</a>
	<a href="/categories/generative" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
	<div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="image" class="text-purple-500"></i>
	</div>
	<h3 class="font-medium">Generative AI</h3>
	</a>
	<a href="/categories/audio" class="bg-white hover:bg-gray-50 border border-gray-200 rounded-lg p-6 text-center transition duration-200">
	<div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
	<i data-feather="mic" class="text-green-500"></i>
	</div>
	<h3 class="font-medium">Audio</h3>
	</a>
	</div>
	</section>
	</main>

	<custom-footer></custom-footer>

	<script src="components/navbar.js"></script>
	<script src="components/footer.js"></script>
	<script src="script.js"></script>
	<script>
	feather.replace();
	// Load featured models
	document.addEventListener('DOMContentLoaded', function() {
	fetch('https://api-inference.huggingface.co/models')
	.then(response => response.json())
	.then(data => {
	const featuredModels = data.slice(0, 6);
	const modelsContainer = document.getElementById('featured-models');

	featuredModels.forEach(model => {
	const modelCard = document.createElement('div');
	modelCard.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition duration-200';
	modelCard.innerHTML = `
	<div class="p-6">
	<div class="flex justify-between items-start mb-4">
	<h3 class="font-bold text-lg text-gray-900">${model.id.split('/').pop()}</h3>
	<span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded-full">${model.pipeline_tag \|\| 'model'}</span>
	</div>
	<p class="text-gray-600 text-sm mb-4 line-clamp-2">${model.description \|\| 'No description available'}</p>
	<div class="flex justify-between items-center">
	<div class="flex items-center text-sm text-gray-500">
	<i data-feather="download" class="w-4 h-4 mr-1"></i>
	<span>${Math.round(model.downloads / 1000)}k</span>
	</div>
	<a href="/models/${model.id}" class="text-primary-500 hover:text-primary-600 text-sm font-medium">Try it →</a>
	</div>
	</div>
	`;
	modelsContainer.appendChild(modelCard);
	feather.replace();
	});
	})
	.catch(error => {
	console.error('Error fetching models:', error);
	});
	});
	</script>
	<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
	</body>
	</html>