Spaces:
Running
Running
File size: 59,037 Bytes
26c682a ce5e361 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454 455 456 457 458 459 460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476 477 478 479 480 481 482 483 484 485 486 487 488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508 509 510 511 512 513 514 515 516 517 518 519 520 521 522 523 524 525 526 527 528 529 530 531 532 533 534 535 536 537 538 539 540 541 542 543 544 545 546 547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658 659 660 661 662 663 664 665 666 667 668 669 670 671 672 673 674 675 676 677 678 679 680 681 682 683 684 685 686 687 688 689 690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728 729 730 731 732 733 734 735 736 737 738 739 740 741 742 743 744 745 746 747 748 749 750 751 752 753 754 755 756 757 758 759 760 761 762 763 764 765 766 767 768 769 770 771 772 773 774 775 776 777 778 779 780 781 782 783 784 785 786 787 788 789 790 791 792 793 794 795 796 797 798 799 800 801 802 803 804 805 806 807 808 809 810 811 812 813 814 815 816 817 818 819 820 821 822 823 824 825 826 827 828 829 830 831 832 833 834 835 836 837 838 839 840 841 842 843 844 845 846 847 848 849 850 851 852 853 854 855 856 857 858 859 860 861 862 863 864 865 866 867 868 869 870 871 872 873 874 875 876 877 878 879 880 881 882 883 884 885 886 887 888 889 890 891 892 893 894 895 896 897 898 899 900 901 902 903 904 905 906 907 908 909 910 911 912 913 914 915 916 917 918 919 920 921 922 923 924 925 926 927 928 929 930 931 932 933 934 935 936 937 938 939 940 941 942 943 944 945 946 947 948 949 950 951 952 953 954 955 956 957 958 959 960 961 962 963 964 965 966 967 968 969 970 971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991 992 993 994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006 1007 1008 1009 1010 1011 1012 1013 1014 1015 1016 1017 1018 1019 1020 | <!DOCTYPE html>
<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>
|