Skip to content

Instantly share code, notes, and snippets.

@PeterUtekal

PeterUtekal/test.html

Created October 20, 2024 11:25
Show Gist options
  • Save PeterUtekal/a0bfb754941ee453e44adec9c36bfd6b to your computer and use it in GitHub Desktop.
Save PeterUtekal/a0bfb754941ee453e44adec9c36bfd6b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
test.html
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Learning Hub for Employees</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
}
</style>
</head>
<body class="bg-gradient-to-br from-purple-100 to-indigo-200 min-h-screen">
<div class="container mx-auto px-4 py-12">
<h1 class="text-5xl font-bold text-center mb-12 text-indigo-800 animate-pulse">AI Learning Hub for Employees</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-16">
<div class="card bg-white shadow-2xl hover:shadow-3xl transition-shadow duration-300">
<div class="card-body">
<h2 class="card-title text-2xl font-semibold text-indigo-700 mb-4">Latest AI News</h2>
<ul class="space-y-3">
<li class="flex items-center">
<span class="bg-indigo-500 rounded-full w-2 h-2 mr-2"></span>
<span class="text-gray-700">OpenAI releases GPT-4 with improved reasoning capabilities</span>
</li>
<li class="flex items-center">
<span class="bg-indigo-500 rounded-full w-2 h-2 mr-2"></span>
<span class="text-gray-700">Google's PaLM 2 shows promising results in medical diagnosis</span>
</li>
<li class="flex items-center">
<span class="bg-indigo-500 rounded-full w-2 h-2 mr-2"></span>
<span class="text-gray-700">AI-powered drone delivery service launches in major cities</span>
</li>
<li class="flex items-center">
<span class="bg-indigo-500 rounded-full w-2 h-2 mr-2"></span>
<span class="text-gray-700">Meta's AI model achieves human-level performance in image recognition</span>
</li>
<li class="flex items-center">
<span class="bg-indigo-500 rounded-full w-2 h-2 mr-2"></span>
<span class="text-gray-700">IBM's quantum computing breakthrough paves way for AI advancements</span>
</li>
</ul>
</div>
</div>
<div class="card bg-white shadow-2xl hover:shadow-3xl transition-shadow duration-300">
<div class="card-body">
<h2 class="card-title text-2xl font-semibold text-indigo-700 mb-4">Prompting Courses</h2>
<ul class="menu bg-indigo-50 rounded-box p-2">
<li><a class="hover:bg-indigo-100 transition-colors duration-200">Basics of Prompt Engineering</a></li>
<li><a class="hover:bg-indigo-100 transition-colors duration-200">Advanced Techniques for ChatGPT</a></li>
<li><a class="hover:bg-indigo-100 transition-colors duration-200">Prompt Optimization for Business Use Cases</a></li>
<li><a class="hover:bg-indigo-100 transition-colors duration-200">AI-Assisted Content Creation</a></li>
<li><a class="hover:bg-indigo-100 transition-colors duration-200">Ethical Considerations in AI Prompting</a></li>
</ul>
</div>
</div>
</div>
<div class="mt-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-800 text-center">Top 10 AI Models Benchmark</h2>
<div class="overflow-x-auto bg-white rounded-lg shadow-xl">
<table class="table w-full">
<thead>
<tr class="bg-indigo-600 text-white">
<th class="px-4 py-3">Rank</th>
<th class="px-4 py-3">Model</th>
<th class="px-4 py-3">Key Strength</th>
<th class="px-4 py-3">Use Case</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-indigo-50 transition-colors duration-200">
<td class="px-4 py-3 font-semibold">1</td>
<td class="px-4 py-3">GPT-4</td>
<td class="px-4 py-3">Best overall performance and reasoning</td>
<td class="px-4 py-3">Natural language processing, content generation</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors duration-200">
<td class="px-4 py-3 font-semibold">2</td>
<td class="px-4 py-3">PaLM 2</td>
<td class="px-4 py-3">Excellent in medical and scientific tasks</td>
<td class="px-4 py-3">Medical diagnosis, scientific research</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors duration-200">
<td class="px-4 py-3 font-semibold">3</td>
<td class="px-4 py-3">DALL-E 2</td>
<td class="px-4 py-3">Top-tier image generation from text</td>
<td class="px-4 py-3">Creative design, visual content creation</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors duration-200">
<td class="px-4 py-3 font-semibold">4</td>
<td class="px-4 py-3">LaMDA</td>
<td class="px-4 py-3">Conversational AI with context understanding</td>
<td class="px-4 py-3">Customer service chatbots, virtual assistants</td>
</tr>
<tr class="hover:bg-indigo-50 transition-colors duration-200">
<td class="px-4 py-3 font-semibold">5</td>
<td class="px-4 py-3">AlphaFold</td>
<td class="px-4 py-3">Protein structure prediction</td>
<td class="px-4 py-3">Drug discovery, biological research</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-800 text-center">Useful AI Tools</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<a href="https://chat.openai.com" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">ChatGPT</h3>
<p class="text-gray-600">OpenAI's powerful language model for conversation and text generation.</p>
</div>
</a>
<a href="https://www.anthropic.com" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Anthropic</h3>
<p class="text-gray-600">AI research company focused on building safe and ethical AI systems.</p>
</div>
</a>
<a href="https://www.anthropic.com/claude" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Claude</h3>
<p class="text-gray-600">Anthropic's AI assistant known for its strong reasoning capabilities.</p>
</div>
</a>
<a href="https://www.midjourney.com" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Midjourney</h3>
<p class="text-gray-600">AI-powered tool for generating high-quality images from text descriptions.</p>
</div>
</a>
<a href="https://www.jasper.ai" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Jasper</h3>
<p class="text-gray-600">AI writing assistant for creating marketing copy, blog posts, and more.</p>
</div>
</a>
<a href="https://www.copy.ai" target="_blank" class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Copy.ai</h3>
<p class="text-gray-600">AI-powered copywriting tool for various content types and formats.</p>
</div>
</a>
</div>
</div>
<div class="mt-16">
<h2 class="text-3xl font-bold mb-8 text-indigo-800 text-center">AI in the Workplace: Key Benefits</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Increased Productivity</h3>
<p class="text-gray-600">AI automates repetitive tasks, allowing employees to focus on high-value work.</p>
</div>
</div>
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Enhanced Decision Making</h3>
<p class="text-gray-600">AI-powered analytics provide data-driven insights for better business decisions.</p>
</div>
</div>
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Improved Customer Experience</h3>
<p class="text-gray-600">AI chatbots and personalization engines enhance customer interactions.</p>
</div>
</div>
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Streamlined Hiring Process</h3>
<p class="text-gray-600">AI assists in resume screening and candidate matching for efficient recruitment.</p>
</div>
</div>
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Predictive Maintenance</h3>
<p class="text-gray-600">AI algorithms predict equipment failures, reducing downtime and maintenance costs.</p>
</div>
</div>
<div class="card bg-white shadow-xl">
<div class="card-body">
<h3 class="card-title text-xl font-semibold text-indigo-700">Cybersecurity Enhancement</h3>
<p class="text-gray-600">AI-powered security systems detect and prevent cyber threats in real-time.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment