Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dify.ai Learning Platform - Master AI Development Without Coding</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .card-hover { | |
| 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); | |
| } | |
| .progress-bar { | |
| background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%); | |
| } | |
| .code-block { | |
| background: #1e293b; | |
| color: #e2e8f0; | |
| border-radius: 8px; | |
| padding: 16px; | |
| font-family: 'Monaco', 'Consolas', monospace; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| overflow-x: auto; | |
| } | |
| .section-divider { | |
| height: 1px; | |
| background: linear-gradient(90deg, transparent, #e5e7eb, transparent); | |
| margin: 3rem 0; | |
| } | |
| .learning-card { | |
| border: 2px solid transparent; | |
| background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #667eea, #764ba2) border-box; | |
| } | |
| .project-card { | |
| background: linear-gradient(145deg, #f8fafc, #e2e8f0); | |
| } | |
| @media print { | |
| .no-print { | |
| display: none; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-gray-900"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-5xl font-bold mb-6">Master Dify.ai</h1> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto opacity-90"> | |
| Build powerful AI applications without coding knowledge. Learn step-by-step with hands-on projects and real-world examples. | |
| </p> | |
| <div class="flex justify-center space-x-4"> | |
| <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3"> | |
| <i class="fas fa-users text-2xl mb-2"></i> | |
| <p class="text-sm">180,000+ Developers</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3"> | |
| <i class="fas fa-project-diagram text-2xl mb-2"></i> | |
| <p class="text-sm">No-Code Platform</p> | |
| </div> | |
| <div class="bg-white bg-opacity-20 rounded-lg px-6 py-3"> | |
| <i class="fas fa-rocket text-2xl mb-2"></i> | |
| <p class="text-sm">Production Ready</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- What is Dify Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6">What is Dify.ai?</h2> | |
| <p class="text-xl text-gray-600 max-w-4xl mx-auto"> | |
| Dify is an open-source LLMOps platform that combines Backend-as-a-Service and LLMOps to streamline the development of generative AI solutions, making it accessible to both developers and non-technical innovators. | |
| </p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-palette text-4xl text-purple-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">Visual AI Orchestration</h3> | |
| <p class="text-gray-600">Design AI workflows visually with drag-and-drop interface. No coding required.</p> | |
| </div> | |
| </div> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-database text-4xl text-green-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">Knowledge Base & RAG</h3> | |
| <p class="text-gray-600">Build smart chatbots that can access and retrieve information from your documents.</p> | |
| </div> | |
| </div> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-robot text-4xl text-blue-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">AI Agents</h3> | |
| <p class="text-gray-600">Create autonomous AI agents that can use tools and make decisions independently.</p> | |
| </div> | |
| </div> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-code text-4xl text-red-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">Prompt Engineering</h3> | |
| <p class="text-gray-600">Master the art of prompt engineering with built-in IDE and testing tools.</p> | |
| </div> | |
| </div> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-cogs text-4xl text-yellow-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">Tool Integration</h3> | |
| <p class="text-gray-600">Connect to external APIs and tools without writing complex integration code.</p> | |
| </div> | |
| </div> | |
| <div class="learning-card rounded-xl p-6 card-hover"> | |
| <div class="text-center"> | |
| <i class="fas fa-chart-line text-4xl text-indigo-600 mb-4"></i> | |
| <h3 class="text-xl font-semibold mb-3">Monitoring & Analytics</h3> | |
| <p class="text-gray-600">Track performance, costs, and usage with comprehensive analytics dashboard.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Learning Path Overview --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6">Your Learning Journey</h2> | |
| <p class="text-xl text-gray-600">Follow our structured path from beginner to AI application expert</p> | |
| </div> | |
| <div class="space-y-8"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white font-bold text-xl">1</div> | |
| <div class="ml-6 flex-1"> | |
| <h3 class="text-2xl font-semibold mb-2">Foundation</h3> | |
| <p class="text-gray-600 mb-2">Learn the basics of AI, LLMs, and the Dify platform</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar h-2 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 w-16 h-16 bg-green-500 rounded-full flex items-center justify-center text-white font-bold text-xl">2</div> | |
| <div class="ml-6 flex-1"> | |
| <h3 class="text-2xl font-semibold mb-2">First Projects</h3> | |
| <p class="text-gray-600 mb-2">Build your first chatbot and AI agent with guided tutorials</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-white font-bold text-xl">3</div> | |
| <div class="ml-6 flex-1"> | |
| <h3 class="text-2xl font-semibold mb-2">Advanced Workflows</h3> | |
| <p class="text-gray-600 mb-2">Master complex workflows, API integrations, and optimization</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar h-2 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 w-16 h-16 bg-orange-500 rounded-full flex items-center justify-center text-white font-bold text-xl">4</div> | |
| <div class="ml-6 flex-1"> | |
| <h3 class="text-2xl font-semibold mb-2">Production & Deployment</h3> | |
| <p class="text-gray-600 mb-2">Deploy, monitor, and scale your AI applications</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar h-2 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Module 1: Foundation --> | |
| <section class="py-16 bg-blue-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6 text-blue-900">Module 1: Foundation</h2> | |
| <p class="text-xl text-blue-700">Build your understanding of AI concepts and get started with Dify</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Lesson 1.1: Understanding AI & LLMs</h3> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-brain text-purple-600 mr-2"></i>What are Large Language Models?</h4> | |
| <p class="text-gray-700 mb-4"> | |
| Large Language Models (LLMs) are artificial intelligence systems trained on vast amounts of text data. They can understand and generate human-like text, making them perfect for building conversational AI applications. | |
| </p> | |
| <div class="bg-blue-100 border-l-4 border-blue-500 p-4"> | |
| <p class="text-blue-800"><strong>Key Concept:</strong> Think of LLMs as extremely knowledgeable assistants that can help with almost any text-related task - from answering questions to writing content.</p> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-window-maximize text-green-600 mr-2"></i>Understanding Context Windows</h4> | |
| <p class="text-gray-700 mb-4"> | |
| A context window is the amount of text an LLM can "see" at once. It's like the model's working memory - everything it considers when generating a response. | |
| </p> | |
| <div class="code-block"> | |
| Context Window = Input Prompt + Previous Conversation + Output Space | |
| Example: | |
| - GPT-4: 8,000 tokens (~6,000 words) | |
| - GPT-4 Turbo: 128,000 tokens (~96,000 words) | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-vector-square text-orange-600 mr-2"></i>What are Embeddings?</h4> | |
| <p class="text-gray-700 mb-4"> | |
| Embeddings convert text into numerical vectors that capture meaning. Similar concepts have similar vectors, enabling semantic search and knowledge retrieval. | |
| </p> | |
| <div class="bg-orange-100 border-l-4 border-orange-500 p-4"> | |
| <p class="text-orange-800"><strong>Real-world analogy:</strong> Like a GPS converting addresses into coordinates, embeddings convert words into mathematical coordinates that preserve meaning relationships.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Lesson 1.2: Getting Started with Dify</h3> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-rocket text-blue-600 mr-2"></i>Setting Up Your Account</h4> | |
| <ol class="list-decimal list-inside space-y-2 text-gray-700"> | |
| <li>Visit <a href="https://dify.ai" class="text-blue-600 hover:underline">dify.ai</a> and create a free account</li> | |
| <li>Verify your email address</li> | |
| <li>Complete the onboarding tutorial</li> | |
| <li>Explore the dashboard interface</li> | |
| </ol> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 mb-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-key text-yellow-600 mr-2"></i>Configuring API Keys</h4> | |
| <p class="text-gray-700 mb-4">To use AI models, you'll need API keys from model providers:</p> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span><strong>OpenAI:</strong> Get your API key from platform.openai.com</span> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span><strong>Anthropic:</strong> Get Claude API key from console.anthropic.com</span> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-check-circle text-green-500 mr-3"></i> | |
| <span><strong>Free Tier:</strong> Dify provides limited free usage for testing</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4"><i class="fas fa-compass text-purple-600 mr-2"></i>Dashboard Overview</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center p-4 bg-purple-50 rounded-lg"> | |
| <i class="fas fa-comments text-2xl text-purple-600 mb-2"></i> | |
| <p class="font-semibold">Studio</p> | |
| <p class="text-sm text-gray-600">Build applications</p> | |
| </div> | |
| <div class="text-center p-4 bg-green-50 rounded-lg"> | |
| <i class="fas fa-database text-2xl text-green-600 mb-2"></i> | |
| <p class="font-semibold">Knowledge</p> | |
| <p class="text-sm text-gray-600">Manage data</p> | |
| </div> | |
| <div class="text-center p-4 bg-blue-50 rounded-lg"> | |
| <i class="fas fa-cog text-2xl text-blue-600 mb-2"></i> | |
| <p class="font-semibold">Tools</p> | |
| <p class="text-sm text-gray-600">Add integrations</p> | |
| </div> | |
| <div class="text-center p-4 bg-orange-50 rounded-lg"> | |
| <i class="fas fa-chart-bar text-2xl text-orange-600 mb-2"></i> | |
| <p class="font-semibold">Logs</p> | |
| <p class="text-sm text-gray-600">Monitor usage</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Module 2: First Projects --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6 text-green-900">Module 2: Your First AI Projects</h2> | |
| <p class="text-xl text-green-700">Build real applications with step-by-step guidance</p> | |
| </div> | |
| <!-- Project 1: Smart Customer Service Bot --> | |
| <div class="project-card rounded-xl p-8 mb-12 shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-blue-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mr-4">1</div> | |
| <h3 class="text-3xl font-bold">Project 1: Smart Customer Service Bot</h3> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-4">🎯 Learning Objectives</h4> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Understand Knowledge Bases and RAG</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Learn about context windows and hallucinations</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Master semantic search vs keyword search</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Build your first chatbot application</li> | |
| </ul> | |
| <h4 class="text-xl font-semibold mb-4 mt-6">📋 What You'll Build</h4> | |
| <p class="text-gray-700 mb-4"> | |
| A customer service chatbot that can answer questions about your business using uploaded documents. When the bot doesn't know something, it will automatically search Google for additional information. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-4">🔧 Step-by-Step Process</h4> | |
| <div class="space-y-4"> | |
| <div class="bg-white rounded-lg p-4 border-l-4 border-blue-500"> | |
| <h5 class="font-semibold mb-2">Step 1: Create Knowledge Base</h5> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li>• Navigate to Knowledge → Create Knowledge</li> | |
| <li>• Upload your documents (PDF, TXT, etc.)</li> | |
| <li>• Configure chunking and embedding settings</li> | |
| <li>• Test retrieval with sample queries</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 border-l-4 border-green-500"> | |
| <h5 class="font-semibold mb-2">Step 2: Build the Chatbot</h5> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li>• Create new Chatflow application</li> | |
| <li>• Add Knowledge Retrieval node</li> | |
| <li>• Connect to your knowledge base</li> | |
| <li>• Configure LLM with appropriate prompt</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg p-4 border-l-4 border-purple-500"> | |
| <h5 class="font-semibold mb-2">Step 3: Add Fallback Logic</h5> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li>• Add Condition node to check confidence</li> | |
| <li>• Connect Google Search tool as fallback</li> | |
| <li>• Format responses appropriately</li> | |
| <li>• Test with various question types</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-6 bg-white rounded-lg"> | |
| <h4 class="text-xl font-semibold mb-4">💡 Sample Prompt Template</h4> | |
| <div class="code-block"> | |
| You are a helpful customer service assistant for [Company Name]. | |
| Your primary job is to answer customer questions using the knowledge base provided. When answering: | |
| 1. Always be polite and professional | |
| 2. Use the knowledge base information when available | |
| 3. If you're not confident about an answer, say so clearly | |
| 4. Offer to search for additional information if needed | |
| Context from knowledge base: {{knowledge_base_context}} | |
| Customer question: {{query}} | |
| Please provide a helpful and accurate response. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project 2: AI Travel Consultant --> | |
| <div class="project-card rounded-xl p-8 mb-12 shadow-lg"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-purple-500 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mr-4">2</div> | |
| <h3 class="text-3xl font-bold">Project 2: AI Travel Consultant Agent</h3> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-4">🎯 Learning Objectives</h4> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Understand AI Agents and autonomous behavior</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Learn Chain-of-Thought reasoning</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Master prompt engineering techniques</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Integrate external tools and APIs</li> | |
| </ul> | |
| <h4 class="text-xl font-semibold mb-4 mt-6">🌍 What You'll Build</h4> | |
| <p class="text-gray-700 mb-4"> | |
| An intelligent travel consultant that can research destinations, find hotels, suggest restaurants, and create detailed itineraries using multiple external tools and data sources. | |
| </p> | |
| </div> | |
| <div> | |
| <h4 class="text-xl font-semibold mb-4">🛠️ Tools & Integrations</h4> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-white p-3 rounded border"> | |
| <i class="fab fa-wikipedia-w text-blue-600 mr-2"></i> | |
| <span class="text-sm">Wikipedia Search</span> | |
| </div> | |
| <div class="bg-white p-3 rounded border"> | |
| <i class="fab fa-google text-red-600 mr-2"></i> | |
| <span class="text-sm">Google Search</span> | |
| </div> | |
| <div class="bg-white p-3 rounded border"> | |
| <i class="fas fa-globe text-green-600 mr-2"></i> | |
| <span class="text-sm">Web Scraping</span> | |
| </div> | |
| <div class="bg-white p-3 rounded border"> | |
| <i class="fas fa-map-marker-alt text-purple-600 mr-2"></i> | |
| <span class="text-sm">Maps API</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="text-xl font-semibold mb-4">🚀 Agent Configuration</h4> | |
| <div class="grid lg:grid-cols-2 gap-6"> | |
| <div class="bg-white rounded-lg p-6"> | |
| <h5 class="font-semibold mb-3">Agent Prompt Structure</h5> | |
| <div class="code-block text-sm"> | |
| # Role | |
| You are an expert travel consultant AI agent. | |
| # Skills | |
| - Destination research and recommendations | |
| - Hotel and accommodation booking assistance | |
| - Restaurant and activity suggestions | |
| - Itinerary planning and optimization | |
| - Budget estimation and planning | |
| # Workflow | |
| 1. Understand the user's travel preferences | |
| 2. Research destination information | |
| 3. Find suitable accommodations | |
| 4. Suggest activities and dining | |
| 5. Create detailed itinerary | |
| 6. Provide helpful travel tips | |
| # Constraints | |
| - Always verify information from multiple sources | |
| - Consider budget constraints mentioned by user | |
| - Suggest alternatives when options are limited | |
| - Be culturally sensitive in recommendations | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6"> | |
| <h5 class="font-semibold mb-3">Example Interaction Flow</h5> | |
| <div class="space-y-3"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-xs mr-2 mt-1">USER</div> | |
| <p class="text-sm">"Plan a 3-day trip to Tokyo for $1500"</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2 mt-1">AGENT</div> | |
| <p class="text-sm">"Let me research Tokyo destinations and find budget-friendly options..."</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-green-100 text-green-800 px-2 py-1 rounded text-xs mr-2 mt-1">TOOLS</div> | |
| <p class="text-sm">Wikipedia search → Google search → Hotel booking APIs</p> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs mr-2 mt-1">AGENT</div> | |
| <p class="text-sm">"Here's your customized Tokyo itinerary with budget breakdown..."</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Module 3: Advanced Workflows --> | |
| <section class="py-16 bg-purple-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6 text-purple-900">Module 3: Advanced Workflows</h2> | |
| <p class="text-xl text-purple-700">Master complex AI workflows and integrations</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Workflow Patterns</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-link text-blue-600 mr-2"></i> | |
| Prompt Chains | |
| </h4> | |
| <p class="text-gray-700 mb-3">Break complex tasks into sequential steps, using output from one step as input for the next.</p> | |
| <div class="bg-blue-50 p-3 rounded text-sm"> | |
| <strong>Example:</strong> Recipe Generator → Check Ingredients → Suggest Alternatives → Format Output | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-route text-green-600 mr-2"></i> | |
| Routing & Classification | |
| </h4> | |
| <p class="text-gray-700 mb-3">Direct user input to specialized workflows based on intent classification.</p> | |
| <div class="bg-green-50 p-3 rounded text-sm"> | |
| <strong>Example:</strong> Support Query → Classify (Technical/Billing/General) → Route to Specialist Agent | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-stream text-purple-600 mr-2"></i> | |
| Parallelization | |
| </h4> | |
| <p class="text-gray-700 mb-3">Run multiple LLMs simultaneously for diverse outputs or independent subtasks.</p> | |
| <div class="bg-purple-50 p-3 rounded text-sm"> | |
| <strong>Example:</strong> Content Ideas → [Creative Writer + Technical Writer + SEO Specialist] → Combine Results | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-sitemap text-orange-600 mr-2"></i> | |
| Orchestrator-Workers | |
| </h4> | |
| <p class="text-gray-700 mb-3">A coordinator distributes tasks to specialized workers when subtasks are unpredictable.</p> | |
| <div class="bg-orange-50 p-3 rounded text-sm"> | |
| <strong>Example:</strong> Research Project → Orchestrator → [Data Collector + Analyst + Writer] → Final Report | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">API Integration & External Tools</h3> | |
| <div class="bg-white rounded-lg p-6 shadow-sm mb-6"> | |
| <h4 class="text-lg font-semibold mb-4">Setting Up API Connections</h4> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-blue-500 pl-4"> | |
| <h5 class="font-semibold">OpenAPI/Swagger Integration</h5> | |
| <p class="text-sm text-gray-600">Import API specifications to automatically create tool nodes</p> | |
| </div> | |
| <div class="border-l-4 border-green-500 pl-4"> | |
| <h5 class="font-semibold">Custom API Endpoints</h5> | |
| <p class="text-sm text-gray-600">Connect to your internal APIs with custom headers and authentication</p> | |
| </div> | |
| <div class="border-l-4 border-purple-500 pl-4"> | |
| <h5 class="font-semibold">Pre-built Integrations</h5> | |
| <p class="text-sm text-gray-600">Use ready-made connectors for popular services</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4">Popular Tool Integrations</h4> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <div class="bg-red-50 p-3 rounded text-center"> | |
| <i class="fab fa-google text-red-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Google APIs</p> | |
| </div> | |
| <div class="bg-blue-50 p-3 rounded text-center"> | |
| <i class="fab fa-twitter text-blue-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Social Media</p> | |
| </div> | |
| <div class="bg-green-50 p-3 rounded text-center"> | |
| <i class="fas fa-chart-line text-green-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Analytics</p> | |
| </div> | |
| <div class="bg-yellow-50 p-3 rounded text-center"> | |
| <i class="fas fa-dollar-sign text-yellow-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Finance APIs</p> | |
| </div> | |
| <div class="bg-purple-50 p-3 rounded text-center"> | |
| <i class="fas fa-envelope text-purple-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Email Services</p> | |
| </div> | |
| <div class="bg-indigo-50 p-3 rounded text-center"> | |
| <i class="fas fa-database text-indigo-600 text-xl mb-1"></i> | |
| <p class="text-sm font-medium">Databases</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Advanced Project: Multi-Step E-commerce Assistant</h3> | |
| <div class="bg-white rounded-xl p-8 shadow-lg"> | |
| <div class="grid lg:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-search text-blue-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold mb-2">Product Discovery</h4> | |
| <p class="text-sm text-gray-600">Classify user intent and search product catalog</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-shopping-cart text-green-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold mb-2">Purchase Processing</h4> | |
| <p class="text-sm text-gray-600">Handle cart operations and payment processing</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-user-circle text-purple-600 text-xl"></i> | |
| </div> | |
| <h4 class="font-semibold mb-2">Customer Service</h4> | |
| <p class="text-sm text-gray-600">Provide support and handle inquiries</p> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-6 bg-gray-50 rounded-lg"> | |
| <h5 class="font-semibold mb-3">Workflow Configuration</h5> | |
| <div class="code-block text-sm"> | |
| Start → Question Classifier → [Product Search | Purchase Intent | Support Query] | |
| ↓ ↓ ↓ ↓ | |
| Product Search: Purchase Intent: Support Query: | |
| - Search API - Validate Cart - Knowledge Base | |
| - Filter Results - Process Payment - Escalate if needed | |
| - Show Options - Send Confirmation - Log interaction | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Module 4: Production & Deployment --> | |
| <section class="py-16"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6 text-orange-900">Module 4: Production & Deployment</h2> | |
| <p class="text-xl text-orange-700">Deploy, monitor, and scale your AI applications</p> | |
| </div> | |
| <div class="grid lg:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Deployment Options</h3> | |
| <div class="space-y-6"> | |
| <div class="bg-white rounded-lg p-6 shadow-sm border-l-4 border-blue-500"> | |
| <h4 class="text-lg font-semibold mb-3">Cloud Hosting (Recommended for Beginners)</h4> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>One-click publishing</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Automatic scaling</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Built-in analytics</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>SSL certificates included</li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm border-l-4 border-green-500"> | |
| <h4 class="text-lg font-semibold mb-3">API Integration</h4> | |
| <p class="text-gray-700 mb-3">Embed AI capabilities into existing applications:</p> | |
| <div class="code-block text-sm"> | |
| # RESTful API Example | |
| curl -X POST "https://api.dify.ai/v1/chat-messages" \ | |
| -H "Authorization: Bearer YOUR_API_KEY" \ | |
| -H "Content-Type: application/json" \ | |
| -d '{ | |
| "inputs": {}, | |
| "query": "Hello, how can you help me?", | |
| "user": "user-123" | |
| }' | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm border-l-4 border-purple-500"> | |
| <h4 class="text-lg font-semibold mb-3">Self-Hosted Deployment</h4> | |
| <p class="text-gray-700 mb-3">Full control with Docker deployment:</p> | |
| <div class="code-block text-sm"> | |
| # Clone repository | |
| git clone https://github.com/langgenius/dify.git | |
| # Navigate to docker directory | |
| cd dify/docker | |
| # Start all services | |
| docker compose up -d | |
| # Access at http://localhost | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold mb-6">Monitoring & Analytics</h3> | |
| <div class="bg-white rounded-lg p-6 shadow-sm mb-6"> | |
| <h4 class="text-lg font-semibold mb-4">Key Metrics to Track</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="text-center p-4 bg-blue-50 rounded-lg"> | |
| <i class="fas fa-users text-2xl text-blue-600 mb-2"></i> | |
| <p class="font-semibold">Active Users</p> | |
| <p class="text-sm text-gray-600">Daily/Monthly usage</p> | |
| </div> | |
| <div class="text-center p-4 bg-green-50 rounded-lg"> | |
| <i class="fas fa-comments text-2xl text-green-600 mb-2"></i> | |
| <p class="font-semibold">Conversations</p> | |
| <p class="text-sm text-gray-600">Total interactions</p> | |
| </div> | |
| <div class="text-center p-4 bg-yellow-50 rounded-lg"> | |
| <i class="fas fa-clock text-2xl text-yellow-600 mb-2"></i> | |
| <p class="font-semibold">Response Time</p> | |
| <p class="text-sm text-gray-600">Average latency</p> | |
| </div> | |
| <div class="text-center p-4 bg-red-50 rounded-lg"> | |
| <i class="fas fa-dollar-sign text-2xl text-red-600 mb-2"></i> | |
| <p class="font-semibold">Token Usage</p> | |
| <p class="text-sm text-gray-600">Cost tracking</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm mb-6"> | |
| <h4 class="text-lg font-semibold mb-4">Performance Optimization</h4> | |
| <div class="space-y-3"> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-tachometer-alt text-blue-500 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Model Selection</p> | |
| <p class="text-sm text-gray-600">Choose appropriate models for your use case</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-compress text-green-500 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Prompt Optimization</p> | |
| <p class="text-sm text-gray-600">Reduce token usage with efficient prompts</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-3 bg-gray-50 rounded"> | |
| <i class="fas fa-memory text-purple-500 mr-3"></i> | |
| <div> | |
| <p class="font-medium">Memory Management</p> | |
| <p class="text-sm text-gray-600">Optimize conversation history storage</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h4 class="text-lg font-semibold mb-4">Scaling Strategies</h4> | |
| <ol class="list-decimal list-inside space-y-2 text-gray-700"> | |
| <li>Start with cloud hosting for rapid deployment</li> | |
| <li>Monitor usage patterns and performance metrics</li> | |
| <li>Optimize prompts and model selection based on data</li> | |
| <li>Consider self-hosting for higher volumes</li> | |
| <li>Implement caching and rate limiting</li> | |
| <li>Set up automated monitoring and alerts</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Resources & Next Steps --> | |
| <section class="py-16 bg-gray-100"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-4xl font-bold mb-6">Resources & Next Steps</h2> | |
| <p class="text-xl text-gray-600">Continue your journey with these valuable resources</p> | |
| </div> | |
| <div class="grid lg:grid-cols-3 gap-8"> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-book text-blue-600 mr-2"></i> | |
| Official Documentation | |
| </h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li><a href="https://docs.dify.ai/en/introduction" class="text-blue-600 hover:underline">Getting Started Guide</a></li> | |
| <li><a href="https://docs.dify.ai/en/guides/application-orchestrate" class="text-blue-600 hover:underline">Application Building</a></li> | |
| <li><a href="https://docs.dify.ai/en/guides/model-configuration" class="text-blue-600 hover:underline">Model Configuration</a></li> | |
| <li><a href="https://docs.dify.ai/en/getting-started/install-self-hosted" class="text-blue-600 hover:underline">Self-Hosting Guide</a></li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-users text-green-600 mr-2"></i> | |
| Community Resources | |
| </h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li><a href="https://github.com/langgenius/dify" class="text-blue-600 hover:underline">GitHub Repository</a></li> | |
| <li><a href="https://discord.gg/dify" class="text-blue-600 hover:underline">Discord Community</a></li> | |
| <li><a href="https://github.com/langgenius/dify/discussions" class="text-blue-600 hover:underline">GitHub Discussions</a></li> | |
| <li><a href="https://docs.dify.ai/en/community/contribution" class="text-blue-600 hover:underline">Contribution Guide</a></li> | |
| </ul> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-lightbulb text-yellow-600 mr-2"></i> | |
| Advanced Learning | |
| </h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li><a href="https://www.datacamp.com/tutorial/dify" class="text-blue-600 hover:underline">DataCamp Tutorial</a></li> | |
| <li><a href="https://docs.dify.ai/en/learn-more/use-cases" class="text-blue-600 hover:underline">Use Case Examples</a></li> | |
| <li><a href="https://docs.dify.ai/en/getting-started/readme/features-and-specifications" class="text-blue-600 hover:underline">Features & Roadmap</a></li> | |
| <li><a href="https://blog.dify.ai" class="text-blue-600 hover:underline">Official Blog</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl p-8 shadow-lg"> | |
| <h3 class="text-2xl font-bold mb-6 text-center">Quick Reference Cheat Sheet</h3> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Common Workflow Nodes</h4> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex justify-between p-2 bg-gray-50 rounded"> | |
| <span><i class="fas fa-play text-green-600 mr-2"></i>Start Node</span> | |
| <span>Initialize workflow</span> | |
| </div> | |
| <div class="flex justify-between p-2 bg-gray-50 rounded"> | |
| <span><i class="fas fa-brain text-blue-600 mr-2"></i>LLM Node</span> | |
| <span>Process with AI model</span> | |
| </div> | |
| <div class="flex justify-between p-2 bg-gray-50 rounded"> | |
| <span><i class="fas fa-database text-purple-600 mr-2"></i>Knowledge Retrieval</span> | |
| <span>Search knowledge base</span> | |
| </div> | |
| <div class="flex justify-between p-2 bg-gray-50 rounded"> | |
| <span><i class="fas fa-code text-orange-600 mr-2"></i>Code Node</span> | |
| <span>Execute custom logic</span> | |
| </div> | |
| <div class="flex justify-between p-2 bg-gray-50 rounded"> | |
| <span><i class="fas fa-route text-red-600 mr-2"></i>Condition Node</span> | |
| <span>Branch workflow logic</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Best Practices</h4> | |
| <ul class="space-y-2 text-sm text-gray-700"> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Test prompts in the Prompt IDE before deployment</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Use descriptive names for variables and nodes</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Monitor token usage and costs regularly</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Implement error handling and fallback logic</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Start simple and iterate based on user feedback</li> | |
| <li class="flex items-start"><i class="fas fa-check text-green-500 mr-2 mt-1"></i>Use knowledge bases to reduce hallucinations</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="section-divider"></div> | |
| <!-- Final Call to Action --> | |
| <section class="py-16 gradient-bg text-white"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-4xl font-bold mb-6">Start Building Your AI Applications Today</h2> | |
| <p class="text-xl mb-8 opacity-90"> | |
| You now have all the knowledge needed to create powerful AI applications with Dify. From simple chatbots to complex multi-agent systems, the possibilities are endless. | |
| </p> | |
| <div class="grid md:grid-cols-3 gap-6 mb-8"> | |
| <div class="text-center"> | |
| <div class="bg-white bg-opacity-20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-rocket text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Start Building</h3> | |
| <p class="text-sm opacity-80">Create your first AI application in minutes</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white bg-opacity-20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Join Community</h3> | |
| <p class="text-sm opacity-80">Connect with 180,000+ developers worldwide</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="bg-white bg-opacity-20 rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-3"> | |
| <i class="fas fa-graduation-cap text-2xl"></i> | |
| </div> | |
| <h3 class="font-semibold mb-2">Keep Learning</h3> | |
| <p class="text-sm opacity-80">Explore advanced features and techniques</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <p class="text-lg font-semibold">Ready to begin your AI journey?</p> | |
| <div class="flex justify-center space-x-4"> | |
| <a href="https://dify.ai" class="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300"> | |
| Get Started Free | |
| </a> | |
| <a href="https://github.com/langgenius/dify" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-600 transition duration-300"> | |
| View on GitHub | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <script> | |
| // Add interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Progress bar animation | |
| const progressBars = document.querySelectorAll('.progress-bar'); | |
| // Animate progress bars on scroll | |
| const observerOptions = { | |
| threshold: 0.5, | |
| rootMargin: '0px 0px -100px 0px' | |
| }; | |
| const observer = new IntersectionObserver(function(entries) { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| const progressBar = entry.target; | |
| const width = progressBar.style.width; | |
| progressBar.style.width = '0%'; | |
| setTimeout(() => { | |
| progressBar.style.width = width; | |
| progressBar.style.transition = 'width 1s ease-in-out'; | |
| }, 100); | |
| } | |
| }); | |
| }, observerOptions); | |
| progressBars.forEach(bar => { | |
| observer.observe(bar); | |
| }); | |
| // Add copy to clipboard functionality for code blocks | |
| document.querySelectorAll('.code-block').forEach(block => { | |
| const copyButton = document.createElement('button'); | |
| copyButton.innerHTML = '<i class="fas fa-copy"></i>'; | |
| copyButton.className = 'absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-white p-2 rounded text-sm'; | |
| copyButton.onclick = function() { | |
| navigator.clipboard.writeText(block.textContent); | |
| copyButton.innerHTML = '<i class="fas fa-check"></i>'; | |
| setTimeout(() => { | |
| copyButton.innerHTML = '<i class="fas fa-copy"></i>'; | |
| }, 2000); | |
| }; | |
| block.style.position = 'relative'; | |
| block.appendChild(copyButton); | |
| }); | |
| // Smooth scroll for internal links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const target = document.querySelector(this.getAttribute('href')); | |
| if (target) { | |
| target.scrollIntoView({ | |
| behavior: 'smooth', | |
| block: 'start' | |
| }); | |
| } | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |