Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LLMOps Learning Path</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> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb, #a777e3); | |
| } | |
| .module-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .smooth-scroll { | |
| scroll-behavior: smooth; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: 0; | |
| left: 0; | |
| background-color: white; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .accordion-content.active { | |
| max-height: 1000px; | |
| transition: max-height 0.5s ease-in; | |
| } | |
| </style> | |
| </head> | |
| <body class="smooth-scroll bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <span class="text-xl font-bold">LLMOps Learning Path</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#overview" class="nav-link">Overview</a> | |
| <a href="#modules" class="nav-link">Modules</a> | |
| <a href="#resources" class="nav-link">Resources</a> | |
| <a href="#faq" class="nav-link">FAQ</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden mt-2 pb-2" id="mobile-menu"> | |
| <a href="#overview" class="block py-2">Overview</a> | |
| <a href="#modules" class="block py-2">Modules</a> | |
| <a href="#resources" class="block py-2">Resources</a> | |
| <a href="#faq" class="block py-2">FAQ</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg text-white py-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Master LLMOps</h1> | |
| <p class="text-xl md:text-2xl mb-8">The Complete Learning Path for Large Language Model Operations</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#modules" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold transition duration-300">Explore Modules</a> | |
| <a href="#resources" class="border-2 border-white hover:bg-white hover:text-purple-600 px-8 py-3 rounded-full font-semibold transition duration-300">Get Resources</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Overview Section --> | |
| <section id="overview" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What is LLMOps?</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-cogs text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">LLM Operations</h3> | |
| <p class="text-gray-600">Specialized practices for developing, deploying, and maintaining applications powered by large language models.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-project-diagram text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">End-to-End Process</h3> | |
| <p class="text-gray-600">From prompt engineering to production deployment, monitoring, and continuous improvement.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-chart-line text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Emerging Field</h3> | |
| <p class="text-gray-600">Combines MLOps principles with unique challenges of working with generative AI models.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Modules Section --> | |
| <section id="modules" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Learning Path Modules</h2> | |
| <!-- Module 1 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 1</h3> | |
| <h4 class="text-xl font-semibold mb-4">Foundations for LLMOps</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Python</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Linux</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Git</span> | |
| </div> | |
| <p class="mb-4">Build the essential technical foundation for working with LLMs in production.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Python Fundamentals</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Variables, Data Types, Operators</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Control Flow and Functions</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Modules and OOP Concepts</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Essential Libraries Overview</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Linux Fundamentals</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Core Components and Distros</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Essential Bash Commands</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Package Managers</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Version Control</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Git Basics and Workflows</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Branching Strategies</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Managing Sensitive Info</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">LLM Introduction</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Transformer Architecture</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Key Concepts and Providers</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Understanding LLM APIs</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 2 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 2</h3> | |
| <h4 class="text-xl font-semibold mb-4">Developing and Interacting with LLMs</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Prompt Eng</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">APIs</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Frameworks</span> | |
| </div> | |
| <p class="mb-4">Learn to effectively develop applications using large language models.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Prompt Engineering</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Techniques and Structures</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Iterative Development</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Versioning and Templating</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">LLM APIs & SDKs</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>REST API Interaction</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Provider SDKs Usage</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Secure Key Handling</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">LLM Frameworks</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>LangChain and LlamaIndex</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Core Concepts</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Building Basic Apps</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Vector Databases</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Embeddings Concept</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>RAG Workflow</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Basic Implementation</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 3 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 3</h3> | |
| <h4 class="text-xl font-semibold mb-4">LLM Lifecycle Management</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Tracking</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Evaluation</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Fine-tuning</span> | |
| </div> | |
| <p class="mb-4">Manage the complete lifecycle of your LLM applications.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Experiment Tracking</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Challenges in LLM Dev</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Adapting MLflow</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Alternative Tools</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Evaluation Strategies</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Challenges and Metrics</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Semantic Similarity</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Human Evaluation</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Fine-tuning</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>When to Fine-tune</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>PEFT Techniques</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Data Preparation</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Model Registry</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Versioning Components</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Deployment Stages</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Managing Configs</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 4 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 4</h3> | |
| <h4 class="text-xl font-semibold mb-4">LLM Deployment Strategies</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">APIs</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Optimization</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Patterns</span> | |
| </div> | |
| <p class="mb-4">Deploy LLM applications effectively in production environments.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">LLM APIs</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>FastAPI for LLMs</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Input/Output Schemas</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Async Handling</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Inference Optimization</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Challenges</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Quantization</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Specialized Servers</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Deployment Patterns</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Direct API Proxy</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>RAG Services</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Agent-Based Systems</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Interfaces</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Streamlit</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Gradio</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>FastAPI Backend</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 5 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 5</h3> | |
| <h4 class="text-xl font-semibold mb-4">Automation and CI/CD</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">CI/CD</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Testing</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Automation</span> | |
| </div> | |
| <p class="mb-4">Implement continuous integration and deployment for LLM applications.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">CI/CD Overview</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>LLMOps Journey</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Best Practices</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Modular Code</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Continuous Integration</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Unit Tests</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Integration Tests</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Quality Checks</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Continuous Deployment</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Container Deployment</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Rolling Updates</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>GitHub Actions</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Multi-Component Apps</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Docker Compose</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Local Development</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Service Communication</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 6 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 6</h3> | |
| <h4 class="text-xl font-semibold mb-4">Monitoring LLMs</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Metrics</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Drift</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Tools</span> | |
| </div> | |
| <p class="mb-4">Implement comprehensive monitoring for LLM applications in production.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Monitoring Importance</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Beyond Traditional Metrics</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Challenges</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>What to Monitor</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Techniques</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Logging</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Metrics Tracking</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Statistical Monitoring</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Tools</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Prometheus & Grafana</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>LLM-Specific Platforms</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Basic Alerting</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Quality Monitoring</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Input/Output Analysis</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Drift Detection</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>User Feedback</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Module 7 --> | |
| <div class="mb-12"> | |
| <div class="module-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300"> | |
| <div class="md:flex"> | |
| <div class="gradient-bg text-white p-8 md:w-1/3 flex flex-col justify-center"> | |
| <h3 class="text-2xl font-bold mb-2">Module 7</h3> | |
| <h4 class="text-xl font-semibold mb-4">Advanced Topics</h4> | |
| <div class="flex space-x-2 mb-4"> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Responsible AI</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Security</span> | |
| <span class="bg-white text-purple-600 px-3 py-1 rounded-full text-sm font-medium">Cost</span> | |
| </div> | |
| <p class="mb-4">Explore advanced considerations for production LLM applications.</p> | |
| <button class="accordion-toggle bg-white text-purple-600 hover:bg-gray-100 px-4 py-2 rounded-full font-medium transition duration-300 self-start">View Details</button> | |
| </div> | |
| <div class="p-8 md:w-2/3"> | |
| <div class="accordion-content"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Responsible AI</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Fairness and Bias</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Transparency</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Privacy</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Security</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>New Attack Surfaces</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Mitigation Strategies</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Tools and Techniques</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">Cost Management</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Pricing Models</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Monitoring Usage</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Optimization Strategies</span></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-lg mb-3 text-gray-800">A/B Testing</h5> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Implementing Tests</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Success Metrics</span></li> | |
| <li class="flex items-start"><i class="fas fa-check text-purple-500 mt-1 mr-2"></i> <span>Analyzing Results</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-16 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Learning Resources</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-book text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Recommended Books</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-book-open text-purple-500 mt-1 mr-2"></i> <span>Natural Language Processing with Python</span></li> | |
| <li class="flex items-start"><i class="fas fa-book-open text-purple-500 mt-1 mr-2"></i> <span>Deep Learning for Coders</span></li> | |
| <li class="flex items-start"><i class="fas fa-book-open text-purple-500 mt-1 mr-2"></i> <span>MLOps Engineering at Scale</span></li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-laptop-code text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Online Courses</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fas fa-graduation-cap text-purple-500 mt-1 mr-2"></i> <span>DeepLearning.AI NLP Specialization</span></li> | |
| <li class="flex items-start"><i class="fas fa-graduation-cap text-purple-500 mt-1 mr-2"></i> <span>Fast.ai Practical Deep Learning</span></li> | |
| <li class="flex items-start"><i class="fas fa-graduation-cap text-purple-500 mt-1 mr-2"></i> <span>Udemy MLOps Fundamentals</span></li> | |
| </ul> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-tools text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Tools & Frameworks</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"><i class="fab fa-python text-purple-500 mt-1 mr-2"></i> <span>LangChain & LlamaIndex</span></li> | |
| <li class="flex items-start"><i class="fas fa-database text-purple-500 mt-1 mr-2"></i> <span>Vector Databases</span></li> | |
| <li class="flex items-start"><i class="fas fa-server text-purple-500 mt-1 mr-2"></i> <span>FastAPI & Docker</span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section id="faq" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2> | |
| <div class="max-w-3xl mx-auto"> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 focus:outline-none"> | |
| <span>Who is this learning path for?</span> | |
| <i class="fas fa-chevron-down text-purple-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-600"> | |
| This learning path is designed for software engineers, data scientists, and ML engineers who want to operationalize large language models in production environments. It's suitable for both beginners looking to enter the field and experienced practitioners wanting to specialize in LLMOps. | |
| </div> | |
| </div> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 focus:outline-none"> | |
| <span>What prerequisites are required?</span> | |
| <i class="fas fa-chevron-down text-purple-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-600"> | |
| Basic programming knowledge in Python is recommended. Familiarity with machine learning concepts is helpful but not required, as we cover the necessary foundations in the early modules. | |
| </div> | |
| </div> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 focus:outline-none"> | |
| <span>How long does it take to complete?</span> | |
| <i class="fas fa-chevron-down text-purple-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-600"> | |
| The learning path is designed to be completed in approximately 12-16 weeks with a commitment of 8-10 hours per week. However, you can progress at your own pace and focus on the modules most relevant to your needs. | |
| </div> | |
| </div> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 focus:outline-none"> | |
| <span>What will I be able to do after completing this?</span> | |
| <i class="fas fa-chevron-down text-purple-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-600"> | |
| You'll be able to design, develop, deploy, and maintain production-grade applications powered by large language models. This includes building LLM APIs, implementing RAG systems, optimizing inference, setting up monitoring, and managing the complete LLM lifecycle. | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left font-semibold text-lg text-gray-800 focus:outline-none"> | |
| <span>Is there any certification available?</span> | |
| <i class="fas fa-chevron-down text-purple-500 transition-transform duration-300"></i> | |
| </button> | |
| <div class="faq-content mt-2 text-gray-600"> | |
| While this learning path doesn't offer formal certification, you'll complete hands-on projects that demonstrate your skills. We recommend building a portfolio of these projects to showcase your LLMOps expertise to employers. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="gradient-bg text-white py-12"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Ready to Master LLMOps?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Start your journey today and become proficient in deploying and managing large language models in production.</p> | |
| <a href="#modules" class="bg-white text-purple-600 hover:bg-gray-100 px-8 py-3 rounded-full font-semibold transition duration-300 inline-block">Begin Learning Now</a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-8"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| <span class="text-xl font-bold">LLMOps Learning Path</span> | |
| </div> | |
| <p class="text-gray-400 mt-2">Mastering Large Language Model Operations</p> | |
| </div> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-twitter text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-linkedin text-xl"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition duration-300"><i class="fab fa-github text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2023 LLMOps Learning Path. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Accordion functionality for module details | |
| document.querySelectorAll('.accordion-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.closest('.module-card').querySelector('.accordion-content'); | |
| content.classList.toggle('active'); | |
| // Toggle icon if it exists | |
| const icon = button.querySelector('i'); | |
| if (icon) { | |
| icon.classList.toggle('rotate-180'); | |
| } | |
| }); | |
| }); | |
| // FAQ toggle functionality | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| content.classList.toggle('active'); | |
| icon.classList.toggle('rotate-180'); | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| </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=Saurabh502/llmopslp" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |