Upload 16 files

app.py

@@ -0,0 +1,45 @@
+import os
+import logging
+
+from flask import Flask
+from flask_sqlalchemy import SQLAlchemy
+from sqlalchemy.orm import DeclarativeBase
+from werkzeug.middleware.proxy_fix import ProxyFix
+
+# Configure logging
+logging.basicConfig(level=logging.DEBUG)
+
+
+class Base(DeclarativeBase):
+    pass
+
+
+db = SQLAlchemy(model_class=Base)
+
+# create the app
+app = Flask(__name__)
+app.secret_key = os.environ.get("SESSION_SECRET",
+                                "dev-secret-key-change-in-production")
+app.wsgi_app = ProxyFix(app.wsgi_app, x_proto=1, x_host=1)
+
+# configure the database, relative to the app instance folder
+app.config["SQLALCHEMY_DATABASE_URI"] = os.environ.get(
+    "DATABASE_URL", "sqlite:///dify_learning.db")
+app.config["SQLALCHEMY_ENGINE_OPTIONS"] = {
+    "pool_recycle": 300,
+    "pool_pre_ping": True,
+}
+
+# initialize the app with the extension
+db.init_app(app)
+
+# Import routes after app creation to avoid circular imports
+from routes import *
+
+with app.app_context():
+    # Make sure to import the models here or their tables won't be created
+    import models
+    db.create_all()
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

content/projects.py

@@ -0,0 +1,598 @@
+"""
+Project content for the Dify AI Learning Platform
+Real-world projects based on official Dify use cases and documentation
+"""
+
+def get_all_projects():
+    """Return all available hands-on projects"""
+    return [
+        {
+            'id': 1,
+            'title': 'AI Customer Service Bot',
+            'slug': 'ai-customer-service-bot',
+            'category': 'Customer Support',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 45,
+            'description': 'Build an intelligent customer service bot that can answer questions from your product documentation and handle common support queries.',
+            'icon': 'headphones',
+            'outcomes': [
+                'A fully functional customer service chatbot',
+                'Knowledge base integration for product documentation',
+                'Automated response system for common queries',
+                'Escalation handling for complex issues'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Basic understanding of customer service workflows'
+            ]
+        },
+        {
+            'id': 2,
+            'title': 'AI Travel Consultant',
+            'slug': 'ai-travel-consultant',
+            'category': 'Travel & Tourism',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 60,
+            'description': 'Create an AI agent that can plan travel itineraries, suggest accommodations, and find restaurants using external tools and APIs.',
+            'icon': 'map-pin',
+            'outcomes': [
+                'Intelligent travel planning agent',
+                'Integration with Wikipedia and Google Search',
+                'Dynamic itinerary generation',
+                'Hotel and restaurant recommendations with ratings'
+            ],
+            'prerequisites': [
+                'Completed "Building AI Agents" tutorial',
+                'Completed "Tool Integration and APIs" tutorial',
+                'Understanding of AI agent workflows'
+            ]
+        },
+        {
+            'id': 3,
+            'title': 'Document Analysis Assistant',
+            'slug': 'document-analysis-assistant',
+            'category': 'Document Processing',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 55,
+            'description': 'Build an AI agent that can analyze documents, extract key information, and answer questions about document content.',
+            'icon': 'file-text',
+            'outcomes': [
+                'Document upload and processing system',
+                'AI-powered content analysis',
+                'Information extraction capabilities',
+                'Document Q&A functionality'
+            ],
+            'prerequisites': [
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Completed "Working with Files and Documents" tutorial',
+                'Understanding of document processing workflows'
+            ]
+        },
+        {
+            'id': 4,
+            'title': 'Smart Recipe Generator',
+            'slug': 'smart-recipe-generator',
+            'category': 'Food & Lifestyle',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 35,
+            'description': 'Create an AI agent that generates personalized recipes based on ingredients, dietary preferences, and cooking skills.',
+            'icon': 'chef-hat',
+            'outcomes': [
+                'Personalized recipe generation',
+                'Ingredient-based recipe suggestions',
+                'Dietary restriction handling',
+                'Cooking instruction optimization'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Basic understanding of conversational AI'
+            ]
+        },
+        {
+            'id': 5,
+            'title': 'Investment Analysis Copilot',
+            'slug': 'investment-analysis-copilot',
+            'category': 'Finance',
+            'difficulty': 'advanced',
+            'difficulty_color': 'danger',
+            'estimated_time': 75,
+            'description': 'Build a sophisticated AI agent that analyzes stocks, provides market insights, and generates investment recommendations using financial APIs.',
+            'icon': 'trending-up',
+            'outcomes': [
+                'Real-time stock analysis system',
+                'Market trend analysis and insights',
+                'Investment recommendation engine',
+                'Risk assessment and portfolio suggestions'
+            ],
+            'prerequisites': [
+                'Completed "Building AI Agents" tutorial',
+                'Completed "Tool Integration and APIs" tutorial',
+                'Understanding of financial markets and analysis'
+            ]
+        },
+        {
+            'id': 6,
+            'title': 'Educational Quiz Bot',
+            'slug': 'educational-quiz-bot',
+            'category': 'Education',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 40,
+            'description': 'Develop an interactive AI tutor that creates quizzes, provides explanations, and adapts to student learning patterns.',
+            'icon': 'graduation-cap',
+            'outcomes': [
+                'Adaptive quiz generation system',
+                'Personalized learning paths',
+                'Progress tracking and analytics',
+                'Interactive educational content'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Understanding of educational workflows'
+            ]
+        }
+    ]
+
+def get_project_content(slug):
+    """Return detailed content for a specific project"""
+    projects = {
+        'ai-customer-service-bot': {
+            'id': 1,
+            'title': 'AI Customer Service Bot',
+            'category': 'Customer Support',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 45,
+            'description': 'Build an intelligent customer service bot that can answer questions from your product documentation and handle common support queries.',
+            'icon': 'headphones',
+            'outcomes': [
+                'A fully functional customer service chatbot',
+                'Knowledge base integration for product documentation',
+                'Automated response system for common queries',
+                'Escalation handling for complex issues'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Basic understanding of customer service workflows'
+            ],
+            'overview': '''
+                <p>Customer service is evolving with AI-powered solutions that can handle routine inquiries 24/7. In this project, you'll build a comprehensive customer service bot that can:</p>
+                <ul>
+                    <li>Answer questions from your product documentation using RAG</li>
+                    <li>Handle common support queries with pre-trained responses</li>
+                    <li>Escalate complex issues to human agents when needed</li>
+                    <li>Track customer satisfaction and conversation quality</li>
+                </ul>
+                <p>This project demonstrates real-world application of AI in customer support, combining knowledge retrieval with intelligent conversation management.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Setting Up Your Knowledge Base',
+                    'content': '''
+                        <p>Create a comprehensive knowledge base from your product documentation that will power your customer service bot's responses.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Upload Product Documentation',
+                            'content': '''
+Upload your existing product documentation, FAQs, and support materials to Dify. The system will automatically process and chunk this content for optimal retrieval.
+
+**What to Upload:**
+- Product manuals and guides
+- Frequently asked questions (FAQs)
+- Troubleshooting documentation
+- Policy documents (returns, warranties, etc.)
+- Contact information and escalation procedures
+
+**Best Practices:**
+- Use clear, consistent formatting
+- Include specific examples and scenarios
+- Keep information current and accurate
+- Organize content by topic or product line
+                            ''',
+                            'tips': [
+                                'Upload documents in PDF, TXT, or DOCX format for best results',
+                                'Break large documents into smaller, focused sections',
+                                'Include keywords customers commonly use'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+
+        'ai-travel-consultant': {
+            'id': 2,
+            'title': 'AI Travel Consultant',
+            'category': 'Travel & Tourism',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 60,
+            'description': 'Create an AI agent that can plan travel itineraries, suggest accommodations, and find restaurants using external tools and APIs.',
+            'icon': 'map-pin',
+            'outcomes': [
+                'Intelligent travel planning agent',
+                'Integration with Wikipedia and Google Search',
+                'Dynamic itinerary generation',
+                'Hotel and restaurant recommendations with ratings'
+            ],
+            'prerequisites': [
+                'Completed "Building AI Agents" tutorial',
+                'Completed "Tool Integration and APIs" tutorial',
+                'Understanding of AI agent workflows'
+            ],
+            'overview': '''
+                <p>Travel planning involves researching destinations, finding accommodations, and creating itineraries. In this project, you'll build an AI travel consultant that can:</p>
+                <ul>
+                    <li>Research destinations and provide detailed information</li>
+                    <li>Plan day-by-day itineraries based on preferences</li>
+                    <li>Find and recommend hotels with ratings and reviews</li>
+                    <li>Suggest restaurants and local attractions</li>
+                </ul>
+                <p>This project showcases advanced AI agent capabilities with external tool integration and complex workflow orchestration.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Configuring External Tools',
+                    'content': '''
+                        <p>Set up Wikipedia and Google Search integrations to provide your travel agent with access to real-time information about destinations, attractions, and travel recommendations.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Configure Wikipedia Integration',
+                            'content': '''
+Add Wikipedia as a tool to your Dify agent to provide detailed information about destinations, landmarks, and cultural sites.
+
+**Configuration Steps:**
+1. Go to Tools section in your Dify workspace
+2. Add "Wikipedia" from the available tools
+3. Configure search parameters for travel-related queries
+4. Test with sample destination searches
+
+**Search Optimization:**
+- Use specific place names and landmarks
+- Include cultural and historical context
+- Focus on tourist-relevant information
+- Verify information accuracy and recency
+                            ''',
+                            'tips': [
+                                'Test Wikipedia searches with various destination formats',
+                                'Combine multiple search terms for comprehensive results',
+                                'Verify information from multiple sources when possible'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+
+        'document-analysis-assistant': {
+            'id': 3,
+            'title': 'Document Analysis Assistant',
+            'category': 'Document Processing',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 55,
+            'description': 'Build an AI agent that can analyze documents, extract key information, and answer questions about document content.',
+            'icon': 'file-text',
+            'outcomes': [
+                'Document upload and processing system',
+                'AI-powered content analysis',
+                'Information extraction capabilities',
+                'Document Q&A functionality'
+            ],
+            'prerequisites': [
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Completed "Working with Files and Documents" tutorial',
+                'Understanding of document processing workflows'
+            ],
+            'overview': '''
+                <p>Document analysis is crucial for businesses dealing with large volumes of text documents. In this project, you'll build an AI assistant that can:</p>
+                <ul>
+                    <li>Process and analyze various document types</li>
+                    <li>Extract key information and summarize content</li>
+                    <li>Answer specific questions about document content</li>
+                    <li>Identify patterns and insights across multiple documents</li>
+                </ul>
+                <p>This project demonstrates advanced document processing capabilities using AI, essential for legal, financial, and research applications.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Document Processing Setup',
+                    'content': '''
+                        <p>Configure your document processing pipeline to handle various file formats and extract meaningful information from uploaded documents.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Configure Document Upload',
+                            'content': '''
+Set up document upload capabilities in your Dify application to accept and process various file formats including PDFs, Word documents, and text files.
+
+**Supported Formats:**
+- PDF documents (.pdf)
+- Microsoft Word documents (.docx, .doc)
+- Plain text files (.txt)
+- Rich text format (.rtf)
+- Markdown files (.md)
+
+**Processing Configuration:**
+1. Enable file upload in your application settings
+2. Set maximum file size limits (recommended: 10MB per file)
+3. Configure document chunking for optimal processing
+4. Enable OCR for scanned documents if needed
+
+**Quality Optimization:**
+- Ensure documents are well-formatted and readable
+- Test with sample documents of each supported type
+- Monitor processing time and adjust chunk sizes accordingly
+                            ''',
+                            'tips': [
+                                'Start with smaller documents to test processing capabilities',
+                                'Use clear, well-structured documents for best results',
+                                'Consider document security and privacy requirements'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+
+        'smart-recipe-generator': {
+            'id': 4,
+            'title': 'Smart Recipe Generator',
+            'category': 'Food & Lifestyle',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 35,
+            'description': 'Create an AI agent that generates personalized recipes based on ingredients, dietary preferences, and cooking skills.',
+            'icon': 'chef-hat',
+            'outcomes': [
+                'Personalized recipe generation',
+                'Ingredient-based recipe suggestions',
+                'Dietary restriction handling',
+                'Cooking instruction optimization'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Basic understanding of conversational AI'
+            ],
+            'overview': '''
+                <p>Cooking inspiration and meal planning can be enhanced with AI assistance. In this project, you'll build a smart recipe generator that can:</p>
+                <ul>
+                    <li>Generate recipes based on available ingredients</li>
+                    <li>Accommodate dietary restrictions and preferences</li>
+                    <li>Adjust recipes based on cooking skill level</li>
+                    <li>Provide step-by-step cooking instructions</li>
+                </ul>
+                <p>This project showcases creative AI applications in daily life, demonstrating how AI can assist with personal tasks and lifestyle decisions.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Recipe Generation Logic',
+                    'content': '''
+                        <p>Design the core logic for generating personalized recipes based on user preferences, available ingredients, and dietary constraints.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Create Recipe Prompt Template',
+                            'content': '''
+Design a comprehensive prompt template that will guide the AI in generating recipes that meet specific user requirements and preferences.
+
+**Prompt Structure:**
+```
+You are a professional chef and recipe creator. Generate a recipe based on these requirements:
+
+Ingredients Available: {ingredients}
+Dietary Restrictions: {dietary_restrictions}
+Cooking Skill Level: {skill_level}
+Cuisine Preference: {cuisine_type}
+Cooking Time Available: {time_limit}
+
+Please provide:
+1. Recipe name and brief description
+2. Complete ingredient list with quantities
+3. Step-by-step cooking instructions
+4. Cooking tips and variations
+5. Nutritional highlights
+```
+
+**Customization Variables:**
+- Available ingredients (user input)
+- Dietary restrictions (vegetarian, vegan, gluten-free, etc.)
+- Skill level (beginner, intermediate, advanced)
+- Cuisine preferences (Italian, Asian, Mexican, etc.)
+- Time constraints (15 min, 30 min, 1 hour+)
+                            ''',
+                            'tips': [
+                                'Include specific quantity measurements in recipes',
+                                'Provide alternative ingredients for flexibility',
+                                'Add cooking tips for better results'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+
+        'investment-analysis-copilot': {
+            'id': 5,
+            'title': 'Investment Analysis Copilot',
+            'category': 'Finance',
+            'difficulty': 'advanced',
+            'difficulty_color': 'danger',
+            'estimated_time': 75,
+            'description': 'Build a sophisticated AI agent that analyzes stocks, provides market insights, and generates investment recommendations using financial APIs.',
+            'icon': 'trending-up',
+            'outcomes': [
+                'Real-time stock analysis system',
+                'Market trend analysis and insights',
+                'Investment recommendation engine',
+                'Risk assessment and portfolio suggestions'
+            ],
+            'prerequisites': [
+                'Completed "Building AI Agents" tutorial',
+                'Completed "Tool Integration and APIs" tutorial',
+                'Understanding of financial markets and analysis'
+            ],
+            'overview': '''
+                <p>Financial analysis requires processing vast amounts of data and making informed decisions. In this project, you'll build an AI investment copilot that can:</p>
+                <ul>
+                    <li>Analyze individual stocks with real-time data</li>
+                    <li>Provide comprehensive market trend analysis</li>
+                    <li>Generate investment recommendations based on risk tolerance</li>
+                    <li>Create portfolio suggestions and diversification advice</li>
+                </ul>
+                <p>This advanced project demonstrates professional-grade AI applications in finance, including API integration, data analysis, and risk assessment.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Setting Up Financial Data Integration',
+                    'content': '''
+                        <p>Build connections to financial data sources and configure real-time market analysis capabilities.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Configure Financial Data APIs',
+                            'content': '''
+Set up integration with financial data providers to access real-time stock prices, market data, and financial metrics for comprehensive analysis.
+
+**Recommended Data Sources:**
+- Alpha Vantage (free tier available)
+- Yahoo Finance API
+- Financial Modeling Prep
+- IEX Cloud
+
+**Key Data Points to Collect:**
+- Current stock price and daily change
+- Historical price data (1 year, 5 years)
+- Financial ratios (P/E, P/B, ROE, etc.)
+- Volume and market capitalization
+- Dividend information and yield
+- Analyst ratings and price targets
+
+**API Configuration Steps:**
+1. Choose your preferred financial data provider
+2. Register for API access and obtain API keys
+3. Configure API endpoints in Dify tools
+4. Test data retrieval with sample stock symbols
+5. Set up error handling for API rate limits
+
+**Data Processing Tips:**
+- Cache frequently requested data to reduce API calls
+- Implement data validation and error handling
+- Format financial data for clear presentation
+- Consider real-time vs. delayed data requirements
+                            ''',
+                            'tips': [
+                                'Start with free API tiers to test functionality',
+                                'Monitor API usage to avoid rate limits',
+                                'Validate all financial data before analysis'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+
+        'educational-quiz-bot': {
+            'id': 6,
+            'title': 'Educational Quiz Bot',
+            'slug': 'educational-quiz-bot',
+            'category': 'Education',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 40,
+            'description': 'Develop an interactive AI tutor that creates quizzes, provides explanations, and adapts to student learning patterns.',
+            'icon': 'graduation-cap',
+            'outcomes': [
+                'Adaptive quiz generation system',
+                'Personalized learning paths',
+                'Progress tracking and analytics',
+                'Interactive educational content'
+            ],
+            'prerequisites': [
+                'Completed "Building Your First Chatbot" tutorial',
+                'Completed "Creating Knowledge Bases with RAG" tutorial',
+                'Understanding of educational workflows'
+            ],
+            'overview': '''
+                <p>Educational technology benefits greatly from AI-powered personalization. In this project, you'll build an educational quiz bot that can:</p>
+                <ul>
+                    <li>Generate quizzes on various topics and difficulty levels</li>
+                    <li>Provide detailed explanations for answers</li>
+                    <li>Adapt question difficulty based on student performance</li>
+                    <li>Track learning progress and identify knowledge gaps</li>
+                </ul>
+                <p>This project demonstrates AI applications in education, showcasing adaptive learning and personalized instruction capabilities.</p>
+            ''',
+            'sections': [
+                {
+                    'title': 'Quiz Generation System',
+                    'content': '''
+                        <p>Design an intelligent quiz generation system that creates questions tailored to student learning objectives and performance levels.</p>
+                    ''',
+                    'steps': [
+                        {
+                            'title': 'Create Dynamic Quiz Templates',
+                            'content': '''
+Develop flexible quiz templates that can generate questions across different subjects, difficulty levels, and question types.
+
+**Question Types to Support:**
+- Multiple choice questions
+- True/False questions
+- Fill-in-the-blank questions
+- Short answer questions
+- Essay questions (for advanced topics)
+
+**Template Structure:**
+```
+Generate a {difficulty_level} {question_type} question about {topic}.
+
+Requirements:
+- Question should test {learning_objective}
+- Include {num_options} answer choices (for multiple choice)
+- Provide detailed explanation for correct answer
+- Suggest common misconceptions to address
+
+Format:
+Question: [Your question here]
+A) [Option 1]
+B) [Option 2]
+C) [Option 3]
+D) [Option 4]
+
+Correct Answer: [Letter and explanation]
+Common Mistakes: [Address typical errors]
+```
+
+**Difficulty Adaptation:**
+- Beginner: Basic recall and understanding
+- Intermediate: Application and analysis
+- Advanced: Synthesis and evaluation
+
+**Learning Objectives:**
+- Knowledge retention
+- Concept application
+- Problem-solving skills
+- Critical thinking development
+                            ''',
+                            'tips': [
+                                'Include distractors that address common misconceptions',
+                                'Provide detailed explanations for all answer choices',
+                                'Vary question formats to maintain engagement'
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+    
+    return projects.get(slug)

content/tutorials.py

@@ -0,0 +1,901 @@
+"""
+Tutorial content for the Dify AI Learning Platform
+Based on official Dify documentation and best practices
+"""
+
+def get_all_tutorials():
+    """Return all available tutorials in learning order"""
+    return [
+        {
+            'id': 1,
+            'title': 'Getting Started with Dify',
+            'slug': 'getting-started-with-dify',
+            'category': 'Fundamentals',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'order_index': 1,
+            'estimated_time': 15,
+            'description': 'Learn the basics of Dify AI platform, how to access it, and understand core concepts like LLMs, embeddings, and context windows.',
+            'total_steps': 4
+        },
+        {
+            'id': 2,
+            'title': 'Building Your First Chatbot',
+            'slug': 'building-your-first-chatbot',
+            'category': 'Chatbots',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'order_index': 2,
+            'estimated_time': 25,
+            'description': 'Create a simple AI chatbot using Dify\'s visual interface. Learn about prompts, models, and basic conversation flow.',
+            'total_steps': 6
+        },
+        {
+            'id': 3,
+            'title': 'Creating Knowledge Bases with RAG',
+            'slug': 'creating-knowledge-bases-rag',
+            'category': 'Knowledge Management',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'order_index': 3,
+            'estimated_time': 35,
+            'description': 'Build intelligent chatbots that can answer questions from your documents using Retrieval-Augmented Generation (RAG).',
+            'total_steps': 8
+        },
+        {
+            'id': 4,
+            'title': 'Mastering Prompt Engineering',
+            'slug': 'mastering-prompt-engineering',
+            'category': 'Prompt Engineering',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'order_index': 4,
+            'estimated_time': 30,
+            'description': 'Learn advanced prompt engineering techniques to get better results from your AI applications.',
+            'total_steps': 7
+        },
+        {
+            'id': 5,
+            'title': 'Building AI Agents',
+            'slug': 'building-ai-agents',
+            'category': 'AI Agents',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'order_index': 5,
+            'estimated_time': 40,
+            'description': 'Create intelligent AI agents that can use tools, make decisions, and handle complex multi-step tasks.',
+            'total_steps': 9
+        },
+        {
+            'id': 6,
+            'title': 'Workflow Orchestration',
+            'slug': 'workflow-orchestration',
+            'category': 'Workflows',
+            'difficulty': 'advanced',
+            'difficulty_color': 'danger',
+            'order_index': 6,
+            'estimated_time': 45,
+            'description': 'Master Dify\'s workflow system to create complex AI applications with conditional logic and parallel processing.',
+            'total_steps': 10
+        },
+        {
+            'id': 7,
+            'title': 'Tool Integration and APIs',
+            'slug': 'tool-integration-apis',
+            'category': 'Integration',
+            'difficulty': 'advanced',
+            'difficulty_color': 'danger',
+            'order_index': 7,
+            'estimated_time': 35,
+            'description': 'Connect your AI applications to external services and APIs to extend their capabilities.',
+            'total_steps': 8
+        },
+        {
+            'id': 8,
+            'title': 'Deployment and Monitoring',
+            'slug': 'deployment-monitoring',
+            'category': 'Operations',
+            'difficulty': 'advanced',
+            'difficulty_color': 'danger',
+            'order_index': 8,
+            'estimated_time': 30,
+            'description': 'Learn how to deploy your Dify applications to production and monitor their performance.',
+            'total_steps': 6
+        }
+    ]
+
+def get_tutorial_content(slug):
+    """Return detailed content for a specific tutorial"""
+    tutorials = {
+        'getting-started-with-dify': {
+            'id': 1,
+            'title': 'Getting Started with Dify',
+            'category': 'Fundamentals',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 15,
+            'description': 'Learn the basics of Dify AI platform, how to access it, and understand core concepts like LLMs, embeddings, and context windows.',
+            'steps': [
+                {
+                    'title': 'What is Dify?',
+                    'estimated_time': 3,
+                    'content': '''
+                        <p>Dify is an open-source, user-friendly LLMOps (Large Language Model Operations) platform designed to simplify and accelerate the development, deployment, and management of AI applications.</p>
+                        
+                        <h4>Key Features:</h4>
+                        <ul>
+                            <li><strong>Visual AI Orchestration:</strong> Build AI applications using a drag-and-drop interface</li>
+                            <li><strong>No-Code/Low-Code:</strong> Perfect for beginners with no programming experience</li>
+                            <li><strong>RAG Engine:</strong> Built-in Retrieval-Augmented Generation for knowledge-based applications</li>
+                            <li><strong>AI Agent Framework:</strong> Create intelligent agents that can use tools and make decisions</li>
+                            <li><strong>Model Support:</strong> Works with all mainstream LLMs including GPT, Claude, and open-source models</li>
+                        </ul>
+                        
+                        <h4>Why Choose Dify?</h4>
+                        <p>Unlike other AI tools that offer individual components, Dify provides a comprehensive, production-ready solution. Think of it as a well-designed scaffolding system that handles the complexity while you focus on creating innovative AI applications.</p>
+                    ''',
+                    'tips': [
+                        'Dify is completely open-source and free to use',
+                        'You can use either the cloud version at dify.ai or deploy locally',
+                        'No coding experience required to get started'
+                    ]
+                },
+                {
+                    'title': 'Accessing Dify',
+                    'estimated_time': 4,
+                    'content': '''
+                        <p>There are two ways to access Dify:</p>
+                        
+                        <h4>Cloud Version (Recommended for Beginners)</h4>
+                        <ol>
+                            <li>Go to <a href="https://dify.ai" target="_blank">dify.ai</a></li>
+                            <li>Sign up for a free account</li>
+                            <li>Verify your email address</li>
+                            <li>Start building immediately</li>
+                        </ol>
+                        <p>The cloud version includes free usage quotas for popular AI models, making it perfect for learning and experimentation.</p>
+                        
+                        <h4>Local Installation (For Advanced Users)</h4>
+                        <ol>
+                            <li>Clone the repository from <a href="https://github.com/langgenius/dify" target="_blank">GitHub</a></li>
+                            <li>Install Docker and Docker Compose</li>
+                            <li>Run <code>docker compose up -d</code> in the dify/docker directory</li>
+                            <li>Access at <code>http://localhost/install</code></li>
+                        </ol>
+                    ''',
+                    'tips': [
+                        'Start with the cloud version for easier setup',
+                        'Local installation gives you full control over data',
+                        'Both versions have the same features and capabilities'
+                    ]
+                },
+                {
+                    'title': 'Understanding Core Concepts',
+                    'estimated_time': 5,
+                    'content': '''
+                        <p>Before building your first AI application, it's important to understand these key concepts:</p>
+                        
+                        <h4>Large Language Models (LLMs)</h4>
+                        <p>LLMs are AI models trained on vast amounts of text data. They can understand and generate human-like text. Popular LLMs include:</p>
+                        <ul>
+                            <li><strong>OpenAI GPT-4:</strong> Excellent for complex reasoning and creative tasks</li>
+                            <li><strong>Claude:</strong> Great for analysis and following instructions</li>
+                            <li><strong>Open-source models:</strong> Cost-effective alternatives for specific use cases</li>
+                        </ul>
+                        
+                        <h4>Context Window</h4>
+                        <p>The context window is the amount of text an LLM can "see" and "remember" at once. A larger context window allows the model to consider more information when generating responses, leading to more accurate and coherent outputs.</p>
+                        
+                        <h4>Embeddings</h4>
+                        <p>Embeddings convert text into numerical vectors that capture semantic meaning. Similar texts have similar vectors, enabling AI to understand relationships between different pieces of content. This is crucial for search and retrieval functions.</p>
+                        
+                        <h4>Tokens</h4>
+                        <p>Tokens are the basic units that LLMs process - roughly equivalent to words or parts of words. Understanding tokens helps you manage costs and context limits.</p>
+                    ''',
+                    'tips': [
+                        'Different LLMs have different strengths - experiment to find the best fit',
+                        'Larger context windows cost more but provide better results for complex tasks',
+                        'Embeddings enable semantic search, not just keyword matching'
+                    ]
+                },
+                {
+                    'title': 'Exploring the Dify Interface',
+                    'estimated_time': 3,
+                    'content': '''
+                        <p>Once you're logged into Dify, you'll see a clean, intuitive dashboard with several key sections:</p>
+                        
+                        <h4>Main Navigation</h4>
+                        <ul>
+                            <li><strong>Studio:</strong> Where you build and manage your AI applications</li>
+                            <li><strong>Knowledge:</strong> Manage your knowledge bases and documents</li>
+                            <li><strong>Tools:</strong> Configure external tools and integrations</li>
+                            <li><strong>Datasets:</strong> Manage your training data and examples</li>
+                        </ul>
+                        
+                        <h4>Application Types</h4>
+                        <p>Dify supports several types of AI applications:</p>
+                        <ul>
+                            <li><strong>Chatflow:</strong> Conversational applications with complex workflows</li>
+                            <li><strong>Assistant:</strong> AI agents that can use tools and external services</li>
+                            <li><strong>Completion:</strong> Text generation and completion applications</li>
+                        </ul>
+                        
+                        <h4>Quick Actions</h4>
+                        <ul>
+                            <li><strong>Create from Blank:</strong> Start with a clean slate</li>
+                            <li><strong>Use Template:</strong> Begin with pre-built examples</li>
+                            <li><strong>Import:</strong> Bring in existing configurations</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Spend time exploring the interface before building your first app',
+                        'Templates are great for learning best practices',
+                        'The preview feature lets you test applications before publishing'
+                    ]
+                }
+            ]
+        },
+        
+        'building-your-first-chatbot': {
+            'id': 2,
+            'title': 'Building Your First Chatbot',
+            'category': 'Chatbots',
+            'difficulty': 'beginner',
+            'difficulty_color': 'success',
+            'estimated_time': 25,
+            'description': 'Create a simple AI chatbot using Dify\'s visual interface. Learn about prompts, models, and basic conversation flow.',
+            'steps': [
+                {
+                    'title': 'Setting Up Your Model Provider',
+                    'estimated_time': 5,
+                    'content': '''
+                        <p>Before creating your chatbot, you need to configure an AI model provider. Dify provides free usage quotas, but you'll eventually need your own API keys.</p>
+                        
+                        <h4>Using the Free Quota</h4>
+                        <p>New Dify users get:</p>
+                        <ul>
+                            <li>200 free OpenAI GPT messages</li>
+                            <li>1000 free Anthropic Claude messages</li>
+                        </ul>
+                        
+                        <h4>Adding Your Own API Key</h4>
+                        <ol>
+                            <li>Go to Settings → Model Provider</li>
+                            <li>Click on your preferred provider (e.g., OpenAI)</li>
+                            <li>Click "Setup" and enter your API key</li>
+                            <li>Test the connection and save</li>
+                        </ol>
+                        
+                        <h4>Getting API Keys</h4>
+                        <ul>
+                            <li><strong>OpenAI:</strong> Visit <a href="https://platform.openai.com/api-keys" target="_blank">platform.openai.com/api-keys</a></li>
+                            <li><strong>Anthropic:</strong> Visit <a href="https://console.anthropic.com/" target="_blank">console.anthropic.com</a></li>
+                            <li><strong>Other providers:</strong> Check their respective documentation</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Start with the free quota to learn the basics',
+                        'OpenAI GPT-4 is great for general-purpose chatbots',
+                        'Keep your API keys secure and never share them publicly'
+                    ]
+                },
+                {
+                    'title': 'Creating Your First Chatflow',
+                    'estimated_time': 4,
+                    'content': '''
+                        <p>Let's create a simple chatbot that can have basic conversations with users.</p>
+                        
+                        <h4>Step-by-Step Creation</h4>
+                        <ol>
+                            <li>Click <strong>"Create from Blank"</strong> in the Studio</li>
+                            <li>Select <strong>"Chatflow"</strong> as the application type</li>
+                            <li>Give your app a name (e.g., "My First Chatbot")</li>
+                            <li>Click <strong>"Create"</strong></li>
+                        </ol>
+                        
+                        <h4>Understanding the Default Flow</h4>
+                        <p>Your new chatflow will have three basic nodes:</p>
+                        <ul>
+                            <li><strong>Start Node:</strong> Triggers when a user sends a message</li>
+                            <li><strong>LLM Node:</strong> Processes the user's message with AI</li>
+                            <li><strong>Answer Node:</strong> Sends the response back to the user</li>
+                        </ul>
+                        
+                        <p>This simple flow creates a basic ChatGPT-like experience where users can ask questions and get AI-generated responses.</p>
+                    ''',
+                    'interactive_demo': '''
+                        <div class="demo-container" data-demo-type="workflow-builder">
+                            Interactive workflow demo will appear here
+                        </div>
+                    ''',
+                    'tips': [
+                        'The default three-node setup is perfect for simple conversational AI',
+                        'You can always add more complexity later',
+                        'Give your applications descriptive names for easy management'
+                    ]
+                },
+                {
+                    'title': 'Configuring Your LLM',
+                    'estimated_time': 6,
+                    'content': '''
+                        <p>The LLM node is the brain of your chatbot. Let's configure it properly.</p>
+                        
+                        <h4>Selecting a Model</h4>
+                        <ol>
+                            <li>Click on the LLM node to open its settings</li>
+                            <li>Choose your model (GPT-4 is recommended for beginners)</li>
+                            <li>Adjust the temperature (0.7 is a good starting point)</li>
+                            <li>Set the max tokens (1000-2000 for most conversations)</li>
+                        </ol>
+                        
+                        <h4>Model Parameters Explained</h4>
+                        <ul>
+                            <li><strong>Temperature (0-1):</strong> Controls creativity. Lower = more focused, Higher = more creative</li>
+                            <li><strong>Max Tokens:</strong> Maximum length of the response</li>
+                            <li><strong>Top P:</strong> Controls diversity of word choices</li>
+                            <li><strong>Presence Penalty:</strong> Reduces repetitive responses</li>
+                        </ul>
+                        
+                        <h4>Writing Your First Prompt</h4>
+                        <p>In the "Prompt" section, write instructions for your AI:</p>
+                        <div class="code-example">
+                            <pre><code>You are a helpful AI assistant. Your goal is to provide accurate, helpful, and friendly responses to users' questions.
+
+Please follow these guidelines:
+- Be conversational and approachable
+- Provide clear and concise answers
+- Ask clarifying questions when needed
+- Admit when you don't know something
+
+Respond to the user's message: {{sys.query}}</code></pre>
+                        </div>
+                    ''',
+                    'tips': [
+                        'Start with a temperature of 0.7 for balanced responses',
+                        'Clear prompts lead to better AI behavior',
+                        'Use {{sys.query}} to reference the user\'s input'
+                    ]
+                },
+                {
+                    'title': 'Testing Your Chatbot',
+                    'estimated_time': 4,
+                    'content': '''
+                        <p>Before publishing, it's crucial to test your chatbot thoroughly.</p>
+                        
+                        <h4>Using the Preview Feature</h4>
+                        <ol>
+                            <li>Click the <strong>"Preview"</strong> button in the top-right corner</li>
+                            <li>A chat interface will open on the right side</li>
+                            <li>Type a test message and press Enter</li>
+                            <li>Observe the AI's response</li>
+                        </ol>
+                        
+                        <h4>Test Cases to Try</h4>
+                        <ul>
+                            <li><strong>Simple greeting:</strong> "Hello, how are you?"</li>
+                            <li><strong>Question:</strong> "What is artificial intelligence?"</li>
+                            <li><strong>Follow-up:</strong> Ask related questions to test conversation flow</li>
+                            <li><strong>Edge cases:</strong> Empty messages, very long messages, special characters</li>
+                        </ul>
+                        
+                        <h4>Debugging Common Issues</h4>
+                        <ul>
+                            <li><strong>No response:</strong> Check your model provider setup</li>
+                            <li><strong>Poor responses:</strong> Refine your prompt</li>
+                            <li><strong>Too long/short:</strong> Adjust max tokens</li>
+                            <li><strong>Too creative/rigid:</strong> Adjust temperature</li>
+                        </ul>
+                    ''',
+                    'interactive_demo': '''
+                        <div class="demo-container" data-demo-type="chatbot-preview">
+                            Interactive chatbot demo will appear here
+                        </div>
+                    ''',
+                    'tips': [
+                        'Test with various types of questions and conversation styles',
+                        'Pay attention to response quality and consistency',
+                        'Make note of any improvements needed before publishing'
+                    ]
+                },
+                {
+                    'title': 'Adding Personality and Features',
+                    'estimated_time': 4,
+                    'content': '''
+                        <p>Make your chatbot more engaging by adding personality and useful features.</p>
+                        
+                        <h4>Enhancing Your Prompt</h4>
+                        <p>Add personality to your chatbot with a more detailed prompt:</p>
+                        <div class="code-example">
+                            <pre><code>You are Alex, a friendly and knowledgeable AI assistant with a passion for helping people learn and solve problems.
+
+Your personality traits:
+- Enthusiastic about technology and learning
+- Patient and encouraging
+- Uses occasional emojis to be more approachable
+- Provides examples when explaining concepts
+
+Your expertise includes:
+- General knowledge and current events
+- Technology and AI concepts
+- Problem-solving strategies
+- Creative thinking
+
+Always aim to:
+1. Understand the user's needs fully
+2. Provide helpful and accurate information
+3. Encourage further learning and exploration
+4. Maintain a positive and supportive tone
+
+User message: {{sys.query}}</code></pre>
+                        </div>
+                        
+                        <h4>Adding Features</h4>
+                        <p>Click "Add Feature" to enable:</p>
+                        <ul>
+                            <li><strong>Opening Statement:</strong> Greet users when they start chatting</li>
+                            <li><strong>Next Question Suggestions:</strong> Provide follow-up question ideas</li>
+                            <li><strong>Speech to Text:</strong> Allow voice input</li>
+                            <li><strong>Citation and Attribution:</strong> Show sources for responses</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'A good personality makes interactions more enjoyable',
+                        'Opening statements set the right expectations',
+                        'Question suggestions help users explore your chatbot\'s capabilities'
+                    ]
+                },
+                {
+                    'title': 'Publishing and Sharing',
+                    'estimated_time': 2,
+                    'content': '''
+                        <p>Once you're satisfied with your chatbot, it's time to publish and share it.</p>
+                        
+                        <h4>Publishing Your Chatbot</h4>
+                        <ol>
+                            <li>Click the <strong>"Publish"</strong> button</li>
+                            <li>Review your settings one final time</li>
+                            <li>Click <strong>"Update"</strong> to make it live</li>
+                        </ol>
+                        
+                        <h4>Sharing Options</h4>
+                        <p>After publishing, you can share your chatbot in several ways:</p>
+                        <ul>
+                            <li><strong>Public Link:</strong> Share a direct URL to your chatbot</li>
+                            <li><strong>Embed Code:</strong> Add it to your website with HTML/iframe</li>
+                            <li><strong>API Access:</strong> Integrate with your applications via REST API</li>
+                        </ul>
+                        
+                        <h4>Monitoring Usage</h4>
+                        <p>Use the built-in analytics to track:</p>
+                        <ul>
+                            <li>Number of conversations</li>
+                            <li>User satisfaction ratings</li>
+                            <li>Most common questions</li>
+                            <li>Response times and costs</li>
+                        </ul>
+                        
+                        <h4>Next Steps</h4>
+                        <p>Congratulations! You've built your first AI chatbot. Consider:</p>
+                        <ul>
+                            <li>Gathering user feedback for improvements</li>
+                            <li>Adding a knowledge base for specific topics</li>
+                            <li>Creating more sophisticated workflows</li>
+                            <li>Exploring AI agent capabilities</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Test the published version to ensure everything works',
+                        'Monitor usage patterns to identify improvement opportunities',
+                        'Regular updates keep your chatbot relevant and useful'
+                    ]
+                }
+            ]
+        },
+        
+        'creating-knowledge-bases-rag': {
+            'id': 3,
+            'title': 'Creating Knowledge Bases with RAG',
+            'category': 'Knowledge Management',
+            'difficulty': 'intermediate',
+            'difficulty_color': 'warning',
+            'estimated_time': 35,
+            'description': 'Build intelligent chatbots that can answer questions from your documents using Retrieval-Augmented Generation (RAG).',
+            'steps': [
+                {
+                    'title': 'Understanding RAG',
+                    'estimated_time': 5,
+                    'content': '''
+                        <p>Retrieval-Augmented Generation (RAG) is a powerful technique that allows AI to access external knowledge sources to provide accurate, up-to-date information.</p>
+                        
+                        <h4>How RAG Works</h4>
+                        <ol>
+                            <li><strong>Document Processing:</strong> Your documents are split into chunks and converted to embeddings</li>
+                            <li><strong>Query Processing:</strong> User questions are also converted to embeddings</li>
+                            <li><strong>Similarity Search:</strong> The system finds the most relevant document chunks</li>
+                            <li><strong>Response Generation:</strong> The AI uses retrieved information to generate accurate answers</li>
+                        </ol>
+                        
+                        <h4>Benefits of RAG</h4>
+                        <ul>
+                            <li><strong>Accuracy:</strong> Reduces AI hallucinations by grounding responses in real data</li>
+                            <li><strong>Current Information:</strong> Access to your latest documents and data</li>
+                            <li><strong>Source Attribution:</strong> Can cite specific sources for transparency</li>
+                            <li><strong>Cost Effective:</strong> More efficient than fine-tuning models</li>
+                        </ul>
+                        
+                        <h4>Use Cases</h4>
+                        <ul>
+                            <li>Customer support with product documentation</li>
+                            <li>Internal knowledge sharing</li>
+                            <li>Educational content delivery</li>
+                            <li>Legal document analysis</li>
+                            <li>Technical documentation assistance</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'RAG is perfect when you need AI to answer questions about specific content',
+                        'Quality of your source documents directly impacts answer quality',
+                        'RAG works best with well-structured, factual content'
+                    ]
+                },
+                {
+                    'title': 'Creating Your First Knowledge Base',
+                    'estimated_time': 6,
+                    'content': '''
+                        <p>Let's create a knowledge base from your documents that your AI can search and reference.</p>
+                        
+                        <h4>Step-by-Step Knowledge Base Creation</h4>
+                        <ol>
+                            <li>Navigate to <strong>Knowledge</strong> in the main menu</li>
+                            <li>Click <strong>"Create Knowledge"</strong></li>
+                            <li>Give your knowledge base a descriptive name</li>
+                            <li>Add a brief description of its contents</li>
+                            <li>Click <strong>"Create"</strong></li>
+                        </ol>
+                        
+                        <h4>Supported Data Sources</h4>
+                        <p>Dify supports multiple data sources:</p>
+                        <ul>
+                            <li><strong>Local Files:</strong> Upload PDFs, Word docs, text files, CSV, etc.</li>
+                            <li><strong>Notion Pages:</strong> Sync directly from your Notion workspace</li>
+                            <li><strong>Web Pages:</strong> Scrape content from websites using Jina or Firecrawl API</li>
+                            <li><strong>Plain Text:</strong> Copy and paste content directly</li>
+                        </ul>
+                        
+                        <h4>File Requirements and Limits</h4>
+                        <ul>
+                            <li><strong>Supported formats:</strong> PDF, DOCX, TXT, MD, CSV, XLSX</li>
+                            <li><strong>File size limit:</strong> Usually 15MB per file (varies by plan)</li>
+                            <li><strong>Total size:</strong> Depends on your subscription tier</li>
+                            <li><strong>Language support:</strong> Multi-language documents supported</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Start with a small set of high-quality documents',
+                        'Use descriptive names for easy management',
+                        'Organize related content in the same knowledge base'
+                    ]
+                },
+                {
+                    'title': 'Uploading and Processing Documents',
+                    'estimated_time': 8,
+                    'content': '''
+                        <p>Now let's add documents to your knowledge base and configure how they're processed.</p>
+                        
+                        <h4>Document Upload Process</h4>
+                        <ol>
+                            <li>Click <strong>"Add Document"</strong> in your knowledge base</li>
+                            <li>Choose your upload method (File, Notion, Web scraping, or Text)</li>
+                            <li>Select or upload your documents</li>
+                            <li>Review the document preview</li>
+                            <li>Configure processing settings</li>
+                        </ol>
+                        
+                        <h4>Chunking Configuration</h4>
+                        <p>Documents are split into smaller chunks for better retrieval:</p>
+                        <ul>
+                            <li><strong>Automatic Chunking:</strong> Dify automatically splits by paragraphs</li>
+                            <li><strong>Custom Rules:</strong> Set your own chunk size and overlap</li>
+                            <li><strong>Chunk Size:</strong> 500-1000 characters is usually optimal</li>
+                            <li><strong>Overlap:</strong> 50-100 characters to maintain context</li>
+                        </ul>
+                        
+                        <h4>Text Preprocessing Options</h4>
+                        <ul>
+                            <li><strong>Remove extra spaces:</strong> Clean up formatting</li>
+                            <li><strong>Remove URLs:</strong> Filter out web links</li>
+                            <li><strong>Remove email addresses:</strong> Protect privacy</li>
+                            <li><strong>Custom preprocessing:</strong> Advanced filtering rules</li>
+                        </ul>
+                        
+                        <h4>Embedding Model Selection</h4>
+                        <p>Choose the right embedding model for your content:</p>
+                        <ul>
+                            <li><strong>OpenAI text-embedding-3-small:</strong> Fast and cost-effective</li>
+                            <li><strong>OpenAI text-embedding-3-large:</strong> Higher accuracy</li>
+                            <li><strong>Cohere embed-english:</strong> Good for English content</li>
+                            <li><strong>Cohere embed-multilingual:</strong> For multiple languages</li>
+                        </ul>
+                    ''',
+                    'code_example': '''
+# Example document structure for optimal RAG performance:
+
+## Product FAQ Document
+
+### What is Product X?
+Product X is a comprehensive solution for...
+
+### How do I install Product X?
+1. Download the installer from our website
+2. Run the installer as administrator
+3. Follow the setup wizard
+
+### Troubleshooting Common Issues
+**Issue:** Application won't start
+**Solution:** Check system requirements and try running as administrator
+                    ''',
+                    'tips': [
+                        'Well-structured documents with clear headings work best',
+                        'Keep chunk sizes moderate - too small loses context, too large reduces precision',
+                        'Choose embedding models based on your primary language'
+                    ]
+                },
+                {
+                    'title': 'Configuring Retrieval Settings',
+                    'estimated_time': 5,
+                    'content': '''
+                        <p>Fine-tune how your knowledge base searches for and retrieves relevant information.</p>
+                        
+                        <h4>Retrieval Methods</h4>
+                        <ul>
+                            <li><strong>Vector Retrieval:</strong> Finds semantically similar content using embeddings</li>
+                            <li><strong>Full-Text Search:</strong> Traditional keyword-based search</li>
+                            <li><strong>Hybrid Retrieval (Recommended):</strong> Combines both methods for best results</li>
+                        </ul>
+                        
+                        <h4>Hybrid Retrieval Configuration</h4>
+                        <p>Adjust the balance between semantic and keyword search:</p>
+                        <ul>
+                            <li><strong>Semantic Weight (70%):</strong> Finds conceptually related content</li>
+                            <li><strong>Keyword Weight (30%):</strong> Finds exact term matches</li>
+                            <li><strong>Custom Weights:</strong> Adjust based on your content type</li>
+                        </ul>
+                        
+                        <h4>Reranking Models</h4>
+                        <p>Improve retrieval accuracy with reranking:</p>
+                        <ul>
+                            <li><strong>Cohere Rerank:</strong> Reorders results for better relevance</li>
+                            <li><strong>BGE Reranker:</strong> Open-source alternative</li>
+                            <li><strong>No Reranking:</strong> Faster but potentially less accurate</li>
+                        </ul>
+                        
+                        <h4>Retrieval Parameters</h4>
+                        <ul>
+                            <li><strong>Top K:</strong> Number of chunks to retrieve (3-5 recommended)</li>
+                            <li><strong>Score Threshold:</strong> Minimum similarity score for inclusion</li>
+                            <li><strong>Max Tokens:</strong> Total token limit for retrieved content</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Hybrid retrieval works best for most use cases',
+                        'Start with 70% semantic, 30% keyword weighting',
+                        'Use reranking for better accuracy when response quality matters most'
+                    ]
+                },
+                {
+                    'title': 'Testing Your Knowledge Base',
+                    'estimated_time': 4,
+                    'content': '''
+                        <p>Before integrating your knowledge base into an application, test its retrieval accuracy.</p>
+                        
+                        <h4>Using the Recall Test</h4>
+                        <ol>
+                            <li>Go to your knowledge base settings</li>
+                            <li>Click on the <strong>"Recall Test"</strong> tab</li>
+                            <li>Enter test queries related to your content</li>
+                            <li>Review the retrieved chunks and their relevance scores</li>
+                            <li>Adjust settings if needed</li>
+                        </ol>
+                        
+                        <h4>Effective Test Queries</h4>
+                        <ul>
+                            <li><strong>Direct questions:</strong> "How do I reset my password?"</li>
+                            <li><strong>Conceptual queries:</strong> "Security best practices"</li>
+                            <li><strong>Specific terms:</strong> "API rate limits"</li>
+                            <li><strong>Variations:</strong> Test different ways of asking the same thing</li>
+                        </ul>
+                        
+                        <h4>Evaluating Results</h4>
+                        <p>Look for:</p>
+                        <ul>
+                            <li><strong>Relevance:</strong> Do retrieved chunks actually answer the question?</li>
+                            <li><strong>Completeness:</strong> Is all necessary information retrieved?</li>
+                            <li><strong>Ranking:</strong> Are the most relevant chunks ranked highest?</li>
+                            <li><strong>Coverage:</strong> Can the system find information across all your documents?</li>
+                        </ul>
+                        
+                        <h4>Common Issues and Solutions</h4>
+                        <ul>
+                            <li><strong>Poor retrieval:</strong> Adjust chunk size or embedding model</li>
+                            <li><strong>Irrelevant results:</strong> Increase score threshold</li>
+                            <li><strong>Missing information:</strong> Check document quality and chunking</li>
+                            <li><strong>Inconsistent results:</strong> Consider using reranking</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Test with questions your actual users would ask',
+                        'Document any query patterns that don\'t work well',
+                        'Iterate on your settings based on test results'
+                    ]
+                },
+                {
+                    'title': 'Building a RAG-Powered Chatbot',
+                    'estimated_time': 5,
+                    'content': '''
+                        <p>Now let's create a chatbot that uses your knowledge base to answer questions accurately.</p>
+                        
+                        <h4>Creating the Chatflow</h4>
+                        <ol>
+                            <li>Create a new Chatflow application</li>
+                            <li>Keep the default Start → LLM → Answer flow</li>
+                            <li>Click on the LLM node to configure it</li>
+                        </ol>
+                        
+                        <h4>Adding Your Knowledge Base</h4>
+                        <ol>
+                            <li>In the LLM node settings, find the <strong>"Context"</strong> section</li>
+                            <li>Click <strong>"Add Knowledge"</strong></li>
+                            <li>Select your knowledge base</li>
+                            <li>Configure retrieval settings if needed</li>
+                        </ol>
+                        
+                        <h4>Crafting a RAG-Optimized Prompt</h4>
+                        <div class="code-example">
+                            <pre><code>You are a helpful assistant that answers questions based on the provided context.
+
+Instructions:
+1. Use the context information below to answer the user's question
+2. If the context doesn't contain relevant information, say "I don't have information about that in my knowledge base"
+3. Always cite specific parts of the context when possible
+4. Be accurate and don't make up information not in the context
+
+Context: {{#knowledge}}
+
+User Question: {{sys.query}}
+
+Please provide a helpful and accurate response based on the context above.</code></pre>
+                        </div>
+                        
+                        <h4>Advanced RAG Techniques</h4>
+                        <ul>
+                            <li><strong>Question Classification:</strong> Route different types of questions appropriately</li>
+                            <li><strong>Multiple Knowledge Bases:</strong> Use different sources for different topics</li>
+                            <li><strong>Fallback Strategies:</strong> Handle cases when no relevant information is found</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Always instruct the AI to stay within the provided context',
+                        'Enable citation features to show sources',
+                        'Test with questions both inside and outside your knowledge base'
+                    ]
+                },
+                {
+                    'title': 'Advanced RAG Workflows',
+                    'estimated_time': 6,
+                    'content': '''
+                        <p>Create more sophisticated RAG applications with conditional logic and multiple knowledge sources.</p>
+                        
+                        <h4>Question Classification Workflow</h4>
+                        <p>Route different types of questions to appropriate knowledge bases:</p>
+                        <ol>
+                            <li>Add a <strong>Question Classifier</strong> node after Start</li>
+                            <li>Define categories (e.g., "Product Info", "Technical Support", "Billing")</li>
+                            <li>Connect different paths to different knowledge bases</li>
+                            <li>Use conditional logic to route appropriately</li>
+                        </ol>
+                        
+                        <h4>Multi-Step RAG Process</h4>
+                        <ol>
+                            <li><strong>Initial Retrieval:</strong> Find relevant chunks</li>
+                            <li><strong>Relevance Check:</strong> Evaluate if information is sufficient</li>
+                            <li><strong>Follow-up Retrieval:</strong> Search additional sources if needed</li>
+                            <li><strong>Response Generation:</strong> Synthesize all found information</li>
+                        </ol>
+                        
+                        <h4>Handling Edge Cases</h4>
+                        <ul>
+                            <li><strong>No Matches Found:</strong> Provide helpful guidance on how to rephrase</li>
+                            <li><strong>Low Confidence:</strong> Ask clarifying questions</li>
+                            <li><strong>Multiple Valid Answers:</strong> Present options clearly</li>
+                            <li><strong>Outdated Information:</strong> Include disclaimers about data freshness</li>
+                        </ul>
+                        
+                        <div class="code-example">
+                            <pre><code># Example multi-step RAG prompt
+
+You are analyzing a user question in two steps:
+
+Step 1: Evaluate if the retrieved context contains sufficient information
+Context: {{#knowledge}}
+Question: {{sys.query}}
+
+If context is sufficient, respond with: SUFFICIENT
+If context is insufficient, respond with: INSUFFICIENT - [reason]
+
+Step 2 (only if sufficient): Provide a complete answer based on the context.</code></pre>
+                        </div>
+                    ''',
+                    'tips': [
+                        'Question classification improves accuracy for diverse knowledge bases',
+                        'Always have fallback options when retrieval fails',
+                        'Consider the user experience when no good answers are found'
+                    ]
+                },
+                {
+                    'title': 'Monitoring and Optimization',
+                    'estimated_time': 6,
+                    'content': '''
+                        <p>Continuously improve your RAG system by monitoring performance and optimizing based on usage patterns.</p>
+                        
+                        <h4>Key Metrics to Track</h4>
+                        <ul>
+                            <li><strong>Retrieval Accuracy:</strong> Percentage of queries with relevant results</li>
+                            <li><strong>Response Quality:</strong> User satisfaction with answers</li>
+                            <li><strong>Coverage:</strong> Percentage of questions that can be answered</li>
+                            <li><strong>Response Time:</strong> Average time to generate answers</li>
+                            <li><strong>Cost:</strong> Token usage for embeddings and generation</li>
+                        </ul>
+                        
+                        <h4>Optimization Strategies</h4>
+                        <ul>
+                            <li><strong>Document Quality:</strong> Improve source content structure and clarity</li>
+                            <li><strong>Chunk Optimization:</strong> Adjust size and overlap based on performance</li>
+                            <li><strong>Embedding Tuning:</strong> Experiment with different embedding models</li>
+                            <li><strong>Prompt Refinement:</strong> Continuously improve instructions</li>
+                        </ul>
+                        
+                        <h4>Common Performance Issues</h4>
+                        <ul>
+                            <li><strong>Poor Retrieval:</strong> 
+                                <ul>
+                                    <li>Check document quality and structure</li>
+                                    <li>Adjust chunking strategy</li>
+                                    <li>Consider different embedding models</li>
+                                </ul>
+                            </li>
+                            <li><strong>Slow Responses:</strong>
+                                <ul>
+                                    <li>Optimize retrieval parameters</li>
+                                    <li>Use smaller, more focused knowledge bases</li>
+                                    <li>Consider caching frequent queries</li>
+                                </ul>
+                            </li>
+                            <li><strong>High Costs:</strong>
+                                <ul>
+                                    <li>Optimize chunk sizes to reduce token usage</li>
+                                    <li>Use more efficient embedding models</li>
+                                    <li>Implement query caching</li>
+                                </ul>
+                            </li>
+                        </ul>
+                        
+                        <h4>Best Practices for Production</h4>
+                        <ul>
+                            <li><strong>Regular Updates:</strong> Keep knowledge bases current</li>
+                            <li><strong>Quality Control:</strong> Review and curate content regularly</li>
+                            <li><strong>User Feedback:</strong> Collect and act on user ratings</li>
+                            <li><strong>A/B Testing:</strong> Test different configurations</li>
+                            <li><strong>Backup Strategies:</strong> Maintain multiple knowledge sources</li>
+                        </ul>
+                    ''',
+                    'tips': [
+                        'Monitor real user queries to identify content gaps',
+                        'Regularly review and update your knowledge base content',
+                        'Use analytics to identify the most common query patterns'
+                    ]
+                }
+            ]
+        }
+    }
+    
+    return tutorials.get(slug)

models.py

@@ -0,0 +1,43 @@
+from app import db
+from datetime import datetime
+
+class User(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(64), unique=True, nullable=False)
+    email = db.Column(db.String(120), unique=True, nullable=False)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    
+    # Relationship with progress
+    progress_entries = db.relationship('Progress', backref='user', lazy=True)
+
+class Tutorial(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(200), nullable=False)
+    slug = db.Column(db.String(100), unique=True, nullable=False)
+    category = db.Column(db.String(50), nullable=False)
+    difficulty = db.Column(db.String(20), nullable=False)  # beginner, intermediate, advanced
+    order_index = db.Column(db.Integer, nullable=False)
+    estimated_time = db.Column(db.Integer)  # in minutes
+    description = db.Column(db.Text)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+
+class Progress(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+    tutorial_id = db.Column(db.Integer, db.ForeignKey('tutorial.id'), nullable=False)
+    completed = db.Column(db.Boolean, default=False)
+    current_step = db.Column(db.Integer, default=0)
+    completion_date = db.Column(db.DateTime)
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)
+    updated_at = db.Column(db.DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+class Project(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    title = db.Column(db.String(200), nullable=False)
+    slug = db.Column(db.String(100), unique=True, nullable=False)
+    category = db.Column(db.String(50), nullable=False)
+    difficulty = db.Column(db.String(20), nullable=False)
+    description = db.Column(db.Text)
+    estimated_time = db.Column(db.Integer)  # in minutes
+    prerequisites = db.Column(db.Text)  # JSON string of tutorial IDs
+    created_at = db.Column(db.DateTime, default=datetime.utcnow)

pyproject.toml

@@ -0,0 +1,15 @@
+[project]
+name = "repl-nix-workspace"
+version = "0.1.0"
+description = "Add your description here"
+requires-python = ">=3.11"
+dependencies = [
+    "email-validator>=2.2.0",
+    "flask>=3.1.1",
+    "flask-sqlalchemy>=3.1.1",
+    "gunicorn>=23.0.0",
+    "markdown>=3.8.1",
+    "psycopg2-binary>=2.9.10",
+    "sqlalchemy>=2.0.41",
+    "werkzeug>=3.1.3",
+]

requirements.txt

@@ -0,0 +1,8 @@
+flask
+sqlalchemy
+werkzeug
+psycopg2-binary
+markdown
+flask-sqlalchemy
+email-validator
+gunicorn

routes.py

@@ -0,0 +1,121 @@
+from flask import render_template, request, jsonify, session, redirect, url_for
+from app import app, db
+from models import User, Tutorial, Progress, Project
+from content.tutorials import get_tutorial_content, get_all_tutorials
+from content.projects import get_project_content, get_all_projects
+import json
+import markdown
+
+@app.route('/')
+def index():
+    tutorials = get_all_tutorials()
+    projects = get_all_projects()
+    
+    # Get user progress if logged in
+    user_progress = {}
+    if 'user_id' in session:
+        user_id = session['user_id']
+        progress_records = Progress.query.filter_by(user_id=user_id).all()
+        user_progress = {p.tutorial_id: p for p in progress_records}
+    
+    return render_template('index.html', 
+                         tutorials=tutorials, 
+                         projects=projects,
+                         user_progress=user_progress)
+
+@app.route('/tutorial/<slug>')
+def tutorial(slug):
+    tutorial_data = get_tutorial_content(slug)
+    if not tutorial_data:
+        return "Tutorial not found", 404
+    
+    # Get or create progress for this tutorial
+    user_progress = None
+    if 'user_id' in session:
+        user_id = session['user_id']
+        tutorial_id = tutorial_data.get('id', 0)
+        user_progress = Progress.query.filter_by(
+            user_id=user_id, 
+            tutorial_id=tutorial_id
+        ).first()
+        
+        if not user_progress:
+            user_progress = Progress(
+                user_id=user_id,
+                tutorial_id=tutorial_id,
+                current_step=0
+            )
+            db.session.add(user_progress)
+            db.session.commit()
+    
+    return render_template('tutorial.html', 
+                         tutorial=tutorial_data,
+                         user_progress=user_progress)
+
+@app.route('/project/<slug>')
+def project(slug):
+    project_data = get_project_content(slug)
+    if not project_data:
+        return "Project not found", 404
+    
+    # Convert markdown content to HTML for proper display
+    if project_data.get('sections'):
+        for section in project_data['sections']:
+            if section.get('steps'):
+                for step in section['steps']:
+                    if step.get('content'):
+                        # Convert markdown to HTML with proper formatting
+                        step['content'] = markdown.markdown(step['content'], extensions=['extra', 'nl2br'])
+    
+    return render_template('project.html', project=project_data)
+
+@app.route('/progress')
+def progress():
+    if 'user_id' not in session:
+        return redirect(url_for('login'))
+    
+    user_id = session['user_id']
+    user = User.query.get(user_id)
+    progress_records = Progress.query.filter_by(user_id=user_id).all()
+    
+    tutorials = get_all_tutorials()
+    progress_data = []
+    
+    for tutorial in tutorials:
+        progress_record = next((p for p in progress_records if p.tutorial_id == tutorial['id']), None)
+        progress_data.append({
+            'tutorial': tutorial,
+            'progress': progress_record
+        })
+    
+    return render_template('progress.html', 
+                         user=user,
+                         progress_data=progress_data)
+
+@app.route('/api/progress/update', methods=['POST'])
+def update_progress():
+    # Progress tracking disabled - return success without saving
+    return jsonify({'success': True})
+
+@app.route('/login')
+def login():
+    # Simple session-based login for demo
+    if 'user_id' not in session:
+        # Create or get demo user
+        demo_user = User.query.filter_by(username='demo_user').first()
+        if not demo_user:
+            demo_user = User(
+                username='demo_user',
+                email='demo@example.com'
+            )
+            db.session.add(demo_user)
+            db.session.commit()
+        
+        session['user_id'] = demo_user.id
+    
+    return redirect(url_for('index'))
+
+@app.route('/logout')
+def logout():
+    session.pop('user_id', None)
+    return redirect(url_for('index'))

static/css/style.css

@@ -0,0 +1,719 @@
+:root {
+    --primary-color: #007bff;
+    --secondary-color: #6c757d;
+    --success-color: #28a745;
+    --info-color: #17a2b8;
+    --warning-color: #ffc107;
+    --danger-color: #dc3545;
+    --light-color: #f8f9fa;
+    --dark-color: #343a40;
+    
+    --beginner-color: #28a745;
+    --intermediate-color: #ffc107;
+    --advanced-color: #dc3545;
+    
+    --border-radius: 8px;
+    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+    --transition: all 0.3s ease;
+}
+
+/* Global Styles */
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f8f9fa;
+}
+
+.main-content {
+    margin-top: 76px; /* Account for fixed navbar */
+    min-height: calc(100vh - 76px);
+}
+
+/* Typography */
+.section-title {
+    font-size: 2rem;
+    font-weight: 600;
+    color: var(--dark-color);
+    margin-bottom: 0.5rem;
+}
+
+.section-subtitle {
+    color: var(--secondary-color);
+    font-size: 1.1rem;
+    margin-bottom: 2rem;
+}
+
+.page-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin-bottom: 0.5rem;
+}
+
+.page-subtitle {
+    color: var(--secondary-color);
+    font-size: 1.2rem;
+    margin-bottom: 2rem;
+}
+
+/* Hero Section */
+.hero-section {
+    background: linear-gradient(135deg, var(--primary-color), #0056b3);
+    color: white;
+    padding: 4rem 2rem;
+    border-radius: var(--border-radius);
+    margin-bottom: 3rem;
+}
+
+.hero-stats {
+    margin-top: 2rem;
+}
+
+.stat-item {
+    padding: 1rem;
+}
+
+.stat-number {
+    font-size: 2.5rem;
+    font-weight: 700;
+    margin: 0;
+    color: white;
+}
+
+.stat-label {
+    margin: 0;
+    opacity: 0.9;
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+/* Learning Path */
+.learning-path {
+    position: relative;
+}
+
+.path-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    position: relative;
+}
+
+.path-item::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 60px;
+    bottom: -20px;
+    width: 2px;
+    background: #e9ecef;
+    z-index: 1;
+}
+
+.path-item:last-child::before {
+    display: none;
+}
+
+.path-number {
+    width: 40px;
+    height: 40px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 600;
+    margin-right: 1.5rem;
+    position: relative;
+    z-index: 2;
+    flex-shrink: 0;
+}
+
+.path-content {
+    flex: 1;
+}
+
+/* Cards */
+.tutorial-card, .project-card {
+    border: none;
+    box-shadow: var(--box-shadow);
+    transition: var(--transition);
+    border-radius: var(--border-radius);
+}
+
+.tutorial-card:hover, .project-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+.tutorial-progress {
+    position: relative;
+}
+
+.progress-circle {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.progress-circle.completed {
+    background: var(--success-color);
+    color: white;
+}
+
+.progress-circle.in-progress {
+    background: var(--warning-color);
+    color: white;
+}
+
+.progress-circle.not-started {
+    background: var(--light-color);
+    color: var(--secondary-color);
+    border: 2px solid #dee2e6;
+}
+
+/* Difficulty Badges */
+.bg-beginner { background-color: var(--beginner-color) !important; }
+.bg-intermediate { background-color: var(--warning-color) !important; }
+.bg-advanced { background-color: var(--danger-color) !important; }
+
+/* Project Cards */
+.project-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.project-icon i {
+    width: 30px;
+    height: 30px;
+}
+
+.project-meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+/* Features Section */
+.features-section {
+    background: white;
+    padding: 3rem 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    margin-top: 3rem;
+}
+
+.feature-item {
+    padding: 2rem 1rem;
+}
+
+.feature-icon {
+    width: 80px;
+    height: 80px;
+    background: linear-gradient(135deg, var(--primary-color), #0056b3);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1.5rem;
+    color: white;
+}
+
+.feature-icon i {
+    width: 32px;
+    height: 32px;
+}
+
+/* Tutorial Page Styles */
+.tutorial-sidebar {
+    background: white;
+    padding: 1.5rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    top: 100px;
+}
+
+.tutorial-nav .nav-link {
+    border-radius: var(--border-radius);
+    color: var(--dark-color);
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.25rem;
+    display: flex;
+    align-items: center;
+    transition: var(--transition);
+}
+
+.tutorial-nav .nav-link:hover {
+    background-color: var(--light-color);
+}
+
+.tutorial-nav .nav-link.active {
+    background-color: var(--primary-color);
+    color: white;
+}
+
+.step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background: var(--light-color);
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 600;
+    margin-right: 0.75rem;
+    color: var(--secondary-color);
+}
+
+.tutorial-nav .nav-link.active .step-number {
+    background: rgba(255,255,255,0.2);
+    color: white;
+}
+
+/* Tutorial Content */
+.tutorial-header {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+
+.tutorial-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--dark-color);
+    margin-bottom: 1rem;
+}
+
+.tutorial-meta {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.tutorial-step {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    margin-bottom: 2rem;
+    display: none;
+}
+
+.tutorial-step.active {
+    display: block;
+}
+
+.step-header {
+    display: flex;
+    justify-content: between;
+    align-items: center;
+    margin-bottom: 1.5rem;
+}
+
+.step-title {
+    font-size: 1.8rem;
+    font-weight: 600;
+    color: var(--dark-color);
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.step-number-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    font-size: 14px;
+    font-weight: 600;
+    margin-right: 1rem;
+}
+
+.step-time {
+    color: var(--secondary-color);
+    font-size: 0.9rem;
+}
+
+.step-content {
+    font-size: 1.1rem;
+    line-height: 1.8;
+}
+
+.step-content h3 {
+    color: var(--dark-color);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+}
+
+.step-content h4 {
+    color: var(--dark-color);
+    margin-top: 1.5rem;
+    margin-bottom: 0.75rem;
+}
+
+.code-example {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+}
+
+.code-example pre {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.interactive-demo {
+    border: 2px dashed #dee2e6;
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    background: #f8f9fa;
+}
+
+.demo-container {
+    background: white;
+    padding: 1rem;
+    border-radius: var(--border-radius);
+    border: 1px solid #dee2e6;
+    min-height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--secondary-color);
+}
+
+/* Project Page Styles */
+.project-info-card {
+    top: 100px;
+}
+
+.project-info-card .large-icon {
+    width: 48px;
+    height: 48px;
+}
+
+.detail-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.5rem 0;
+    border-bottom: 1px solid #f1f3f4;
+}
+
+.detail-item:last-child {
+    border-bottom: none;
+}
+
+.project-content {
+    background: white;
+    padding: 2rem;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+}
+
+.project-section {
+    margin-bottom: 3rem;
+}
+
+.project-section h2 {
+    color: var(--dark-color);
+    font-weight: 600;
+    margin-bottom: 1.5rem;
+    padding-bottom: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.project-steps {
+    margin-top: 2rem;
+}
+
+.project-step {
+    background: #f8f9fa;
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+    border-left: 4px solid var(--primary-color);
+}
+
+.project-step .step-header h4 {
+    color: var(--dark-color);
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+.project-step .step-number {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    background: var(--primary-color);
+    color: white;
+    border-radius: 50%;
+    font-size: 12px;
+    font-weight: 600;
+    margin-right: 1rem;
+}
+
+.code-block {
+    background: #2d3748;
+    color: #e2e8f0;
+    border-radius: var(--border-radius);
+    padding: 1.5rem;
+    overflow-x: auto;
+}
+
+.code-block pre {
+    margin: 0;
+    font-family: 'Monaco', 'Menlo', monospace;
+    font-size: 0.9rem;
+}
+
+/* Progress Page Styles */
+.stats-card {
+    border: none;
+    box-shadow: var(--box-shadow);
+    transition: var(--transition);
+    border-radius: var(--border-radius);
+}
+
+.stats-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+}
+
+.stats-icon {
+    width: 60px;
+    height: 60px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto 1rem;
+    color: white;
+}
+
+.stats-number {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--primary-color);
+    margin: 0;
+}
+
+.stats-label {
+    color: var(--secondary-color);
+    font-size: 0.9rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin: 0;
+}
+
+.progress-timeline {
+    position: relative;
+}
+
+.progress-item {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+    position: relative;
+}
+
+.progress-item::before {
+    content: '';
+    position: absolute;
+    left: 20px;
+    top: 60px;
+    bottom: -20px;
+    width: 2px;
+    background: #e9ecef;
+    z-index: 1;
+}
+
+.progress-item:last-child::before {
+    display: none;
+}
+
+.progress-marker {
+    margin-right: 1.5rem;
+    position: relative;
+    z-index: 2;
+}
+
+.marker {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.marker.completed {
+    background: var(--success-color);
+    color: white;
+}
+
+.marker.in-progress {
+    background: var(--warning-color);
+    color: white;
+}
+
+.marker.not-started {
+    background: var(--light-color);
+    color: var(--secondary-color);
+    border: 2px solid #dee2e6;
+}
+
+.progress-content {
+    flex: 1;
+}
+
+.progress-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.tutorial-progress {
+    margin-top: 1rem;
+}
+
+.tutorial-progress .progress {
+    height: 6px;
+    margin-bottom: 0.5rem;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .main-content {
+        margin-top: 60px;
+    }
+    
+    .hero-section {
+        padding: 2rem 1rem;
+    }
+    
+    .stat-number {
+        font-size: 2rem;
+    }
+    
+    .section-title {
+        font-size: 1.75rem;
+    }
+    
+    .page-title {
+        font-size: 2rem;
+    }
+    
+    .tutorial-sidebar {
+        position: static !important;
+        margin-bottom: 2rem;
+    }
+    
+    .path-item {
+        flex-direction: column;
+        align-items: center;
+        text-align: center;
+    }
+    
+    .path-item::before {
+        display: none;
+    }
+    
+    .path-number {
+        margin-bottom: 1rem;
+    }
+    
+    .tutorial-meta, .project-meta {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+}
+
+/* Animation Classes */
+.fade-in {
+    animation: fadeIn 0.5s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.slide-in-left {
+    animation: slideInLeft 0.5s ease-out;
+}
+
+@keyframes slideInLeft {
+    from { opacity: 0; transform: translateX(-30px); }
+    to { opacity: 1; transform: translateX(0); }
+}
+
+/* Utility Classes */
+.text-gradient {
+    background: linear-gradient(135deg, var(--primary-color), #0056b3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.border-gradient {
+    border: 2px solid;
+    border-image: linear-gradient(135deg, var(--primary-color), #0056b3) 1;
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    :root {
+        --light-color: #343a40;
+        --dark-color: #f8f9fa;
+    }
+    
+    body {
+        background-color: #1a1a1a;
+        color: #f8f9fa;
+    }
+    
+    .tutorial-sidebar,
+    .tutorial-header,
+    .tutorial-step,
+    .project-content,
+    .features-section {
+        background: #2d3748;
+        color: #f8f9fa;
+    }
+    
+    .card {
+        background: #2d3748;
+        color: #f8f9fa;
+        border-color: #4a5568;
+    }
+}

static/js/main.js

@@ -0,0 +1,354 @@
+// Main JavaScript functionality for the Dify Learning Platform
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Initialize tooltips
+    initializeTooltips();
+    
+    // Initialize animations
+    initializeAnimations();
+    
+    // Initialize progress tracking
+    initializeProgressTracking();
+    
+    // Initialize search functionality
+    initializeSearch();
+});
+
+/**
+ * Initialize Bootstrap tooltips
+ */
+function initializeTooltips() {
+    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+        return new bootstrap.Tooltip(tooltipTriggerEl);
+    });
+}
+
+/**
+ * Initialize scroll animations
+ */
+function initializeAnimations() {
+    // Fade in elements on scroll
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+    
+    const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('fade-in');
+            }
+        });
+    }, observerOptions);
+    
+    // Observe elements for animation
+    document.querySelectorAll('.tutorial-card, .project-card, .feature-item').forEach(el => {
+        observer.observe(el);
+    });
+}
+
+/**
+ * Initialize progress tracking
+ */
+function initializeProgressTracking() {
+    // Track page views
+    trackPageView();
+    
+    // Track tutorial interactions
+    document.querySelectorAll('.tutorial-card .btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            const tutorialTitle = this.closest('.tutorial-card').querySelector('.card-title').textContent;
+            trackEvent('tutorial_started', { tutorial: tutorialTitle });
+        });
+    });
+    
+    // Track project interactions
+    document.querySelectorAll('.project-card .btn').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            const projectTitle = this.closest('.project-card').querySelector('.card-title').textContent;
+            trackEvent('project_started', { project: projectTitle });
+        });
+    });
+}
+
+/**
+ * Initialize search functionality
+ */
+function initializeSearch() {
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', debounce(handleSearch, 300));
+    }
+}
+
+/**
+ * Handle search functionality
+ */
+function handleSearch(event) {
+    const query = event.target.value.toLowerCase().trim();
+    const tutorials = document.querySelectorAll('.tutorial-card');
+    const projects = document.querySelectorAll('.project-card');
+    
+    // Filter tutorials
+    tutorials.forEach(card => {
+        const title = card.querySelector('.card-title').textContent.toLowerCase();
+        const description = card.querySelector('.card-text').textContent.toLowerCase();
+        const isVisible = title.includes(query) || description.includes(query) || query === '';
+        
+        card.closest('.path-item, .col-md-6, .col-lg-4')?.style.setProperty('display', isVisible ? '' : 'none');
+    });
+    
+    // Filter projects
+    projects.forEach(card => {
+        const title = card.querySelector('.card-title').textContent.toLowerCase();
+        const description = card.querySelector('.card-text').textContent.toLowerCase();
+        const isVisible = title.includes(query) || description.includes(query) || query === '';
+        
+        card.closest('.col-md-6, .col-lg-4')?.style.setProperty('display', isVisible ? '' : 'none');
+    });
+    
+    // Show/hide sections based on results
+    updateSearchResults(query);
+}
+
+/**
+ * Update search results display
+ */
+function updateSearchResults(query) {
+    const tutorialSection = document.querySelector('.learning-path');
+    const projectSection = document.querySelector('#projects');
+    
+    if (query) {
+        const visibleTutorials = document.querySelectorAll('.tutorial-card:not([style*="display: none"])');
+        const visibleProjects = document.querySelectorAll('.project-card:not([style*="display: none"])');
+        
+        // Show no results message if needed
+        if (visibleTutorials.length === 0 && visibleProjects.length === 0) {
+            showNoResultsMessage();
+        } else {
+            hideNoResultsMessage();
+        }
+    } else {
+        hideNoResultsMessage();
+    }
+}
+
+/**
+ * Show no results message
+ */
+function showNoResultsMessage() {
+    let noResultsMsg = document.getElementById('no-results-message');
+    if (!noResultsMsg) {
+        noResultsMsg = document.createElement('div');
+        noResultsMsg.id = 'no-results-message';
+        noResultsMsg.className = 'alert alert-info text-center';
+        noResultsMsg.innerHTML = `
+            <i data-feather="search" class="me-2"></i>
+            No tutorials or projects found matching your search.
+        `;
+        document.querySelector('.container').appendChild(noResultsMsg);
+        feather.replace();
+    }
+    noResultsMsg.style.display = 'block';
+}
+
+/**
+ * Hide no results message
+ */
+function hideNoResultsMessage() {
+    const noResultsMsg = document.getElementById('no-results-message');
+    if (noResultsMsg) {
+        noResultsMsg.style.display = 'none';
+    }
+}
+
+/**
+ * Track page views for analytics
+ */
+function trackPageView() {
+    const pageData = {
+        page: window.location.pathname,
+        title: document.title,
+        timestamp: new Date().toISOString()
+    };
+    
+    // Store in localStorage for demo purposes
+    const visits = JSON.parse(localStorage.getItem('dify_visits') || '[]');
+    visits.push(pageData);
+    localStorage.setItem('dify_visits', JSON.stringify(visits.slice(-100))); // Keep last 100 visits
+}
+
+/**
+ * Track custom events
+ */
+function trackEvent(eventName, eventData = {}) {
+    const event = {
+        name: eventName,
+        data: eventData,
+        timestamp: new Date().toISOString(),
+        page: window.location.pathname
+    };
+    
+    // Store in localStorage for demo purposes
+    const events = JSON.parse(localStorage.getItem('dify_events') || '[]');
+    events.push(event);
+    localStorage.setItem('dify_events', JSON.stringify(events.slice(-100))); // Keep last 100 events
+    
+    console.log('Event tracked:', event);
+}
+
+/**
+ * Utility function to debounce function calls
+ */
+function debounce(func, wait) {
+    let timeout;
+    return function(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func.apply(this, args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+/**
+ * Smooth scroll to element
+ */
+function smoothScrollTo(element, offset = 80) {
+    const targetPosition = element.offsetTop - offset;
+    window.scrollTo({
+        top: targetPosition,
+        behavior: 'smooth'
+    });
+}
+
+/**
+ * Show loading spinner
+ */
+function showLoader(container) {
+    const loader = document.createElement('div');
+    loader.className = 'text-center py-4';
+    loader.innerHTML = `
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    `;
+    container.appendChild(loader);
+    return loader;
+}
+
+/**
+ * Hide loading spinner
+ */
+function hideLoader(loader) {
+    if (loader && loader.parentNode) {
+        loader.parentNode.removeChild(loader);
+    }
+}
+
+/**
+ * Show toast notification
+ */
+function showToast(message, type = 'info') {
+    const toast = document.createElement('div');
+    toast.className = `toast align-items-center text-white bg-${type} border-0`;
+    toast.setAttribute('role', 'alert');
+    toast.setAttribute('aria-live', 'assertive');
+    toast.setAttribute('aria-atomic', 'true');
+    
+    toast.innerHTML = `
+        <div class="d-flex">
+            <div class="toast-body">
+                ${message}
+            </div>
+            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
+        </div>
+    `;
+    
+    // Add to toast container or create one
+    let toastContainer = document.getElementById('toast-container');
+    if (!toastContainer) {
+        toastContainer = document.createElement('div');
+        toastContainer.id = 'toast-container';
+        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
+        toastContainer.style.zIndex = '9999';
+        document.body.appendChild(toastContainer);
+    }
+    
+    toastContainer.appendChild(toast);
+    
+    // Initialize and show toast
+    const bsToast = new bootstrap.Toast(toast);
+    bsToast.show();
+    
+    // Remove from DOM after hiding
+    toast.addEventListener('hidden.bs.toast', () => {
+        toast.remove();
+    });
+}
+
+/**
+ * Copy text to clipboard
+ */
+async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        showToast('Copied to clipboard!', 'success');
+    } catch (err) {
+        console.error('Failed to copy:', err);
+        showToast('Failed to copy to clipboard', 'danger');
+    }
+}
+
+/**
+ * Format time duration
+ */
+function formatDuration(minutes) {
+    if (minutes < 60) {
+        return `${minutes} min`;
+    } else {
+        const hours = Math.floor(minutes / 60);
+        const remainingMinutes = minutes % 60;
+        return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
+    }
+}
+
+/**
+ * Calculate reading time for content
+ */
+function calculateReadingTime(text, wordsPerMinute = 200) {
+    const wordCount = text.split(/\s+/).length;
+    const minutes = Math.ceil(wordCount / wordsPerMinute);
+    return Math.max(1, minutes);
+}
+
+/**
+ * Initialize progress bars with animation
+ */
+function animateProgressBar(progressBar, targetWidth) {
+    let currentWidth = 0;
+    const increment = targetWidth / 20;
+    const interval = setInterval(() => {
+        currentWidth += increment;
+        if (currentWidth >= targetWidth) {
+            currentWidth = targetWidth;
+            clearInterval(interval);
+        }
+        progressBar.style.width = `${currentWidth}%`;
+    }, 50);
+}
+
+// Export functions for use in other scripts
+window.DifyLearning = {
+    trackEvent,
+    showToast,
+    copyToClipboard,
+    formatDuration,
+    calculateReadingTime,
+    smoothScrollTo,
+    showLoader,
+    hideLoader,
+    animateProgressBar
+};

static/js/tutorial.js

@@ -0,0 +1,596 @@
+// Tutorial-specific JavaScript functionality
+
+let currentTutorial = null;
+let currentStep = 0;
+let totalSteps = 0;
+
+/**
+ * Initialize tutorial functionality
+ */
+function initializeTutorial(tutorialData) {
+    currentTutorial = tutorialData;
+    currentStep = tutorialData.currentStep || 0;
+    totalSteps = tutorialData.totalSteps;
+    
+    setupTutorialNavigation();
+    setupStepTracking();
+    setupKeyboardNavigation();
+    updateProgress();
+    
+    // Show the current step
+    showStep(currentStep);
+}
+
+/**
+ * Setup tutorial navigation
+ */
+function setupTutorialNavigation() {
+    // Step navigation links
+    document.querySelectorAll('.step-nav-link').forEach(link => {
+        link.addEventListener('click', function(e) {
+            e.preventDefault();
+            const stepIndex = parseInt(this.dataset.step);
+            navigateToStep(stepIndex);
+        });
+    });
+    
+    // Next/Previous buttons
+    document.querySelectorAll('[onclick*="navigateToStep"]').forEach(btn => {
+        btn.addEventListener('click', function(e) {
+            e.preventDefault();
+            const match = this.getAttribute('onclick').match(/navigateToStep\((\d+)\)/);
+            if (match) {
+                navigateToStep(parseInt(match[1]));
+            }
+        });
+    });
+}
+
+/**
+ * Setup step tracking
+ */
+function setupStepTracking() {
+    // Track time spent on each step
+    let stepStartTime = Date.now();
+    
+    window.addEventListener('beforeunload', () => {
+        const timeSpent = Math.floor((Date.now() - stepStartTime) / 1000);
+        trackStepTime(currentStep, timeSpent);
+    });
+    
+    // Track step completion
+    document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+            const timeSpent = Math.floor((Date.now() - stepStartTime) / 1000);
+            trackStepTime(currentStep, timeSpent);
+        } else {
+            stepStartTime = Date.now();
+        }
+    });
+}
+
+/**
+ * Setup keyboard navigation
+ */
+function setupKeyboardNavigation() {
+    document.addEventListener('keydown', function(e) {
+        // Only handle keyboard navigation when tutorial content is focused
+        if (!document.querySelector('.tutorial-content').contains(document.activeElement)) {
+            return;
+        }
+        
+        switch(e.key) {
+            case 'ArrowLeft':
+                if (currentStep > 0) {
+                    e.preventDefault();
+                    navigateToStep(currentStep - 1);
+                }
+                break;
+            case 'ArrowRight':
+                if (currentStep < totalSteps - 1) {
+                    e.preventDefault();
+                    navigateToStep(currentStep + 1);
+                }
+                break;
+            case 'Home':
+                e.preventDefault();
+                navigateToStep(0);
+                break;
+            case 'End':
+                e.preventDefault();
+                navigateToStep(totalSteps - 1);
+                break;
+        }
+    });
+}
+
+/**
+ * Navigate to a specific step
+ */
+function navigateToStep(stepIndex) {
+    if (stepIndex < 0 || stepIndex >= totalSteps) {
+        return;
+    }
+    
+    // Hide current step
+    const currentStepElement = document.querySelector(`#step-${currentStep}`);
+    if (currentStepElement) {
+        currentStepElement.classList.remove('active');
+    }
+    
+    // Update step navigation
+    document.querySelectorAll('.step-nav-link').forEach(link => {
+        link.classList.remove('active');
+    });
+    
+    // Show new step
+    currentStep = stepIndex;
+    showStep(currentStep);
+    
+    // Update navigation
+    const newNavLink = document.querySelector(`[data-step="${currentStep}"]`);
+    if (newNavLink) {
+        newNavLink.classList.add('active');
+    }
+    
+    // Update progress
+    updateProgress();
+    
+    // Save progress
+    saveProgress();
+    
+    // Track step view
+    window.DifyLearning?.trackEvent('tutorial_step_viewed', {
+        tutorial_id: currentTutorial.id,
+        step: currentStep + 1,
+        step_title: document.querySelector(`#step-${currentStep} .step-title`)?.textContent
+    });
+    
+    // Scroll to top of content
+    const tutorialContent = document.querySelector('.tutorial-content');
+    if (tutorialContent) {
+        tutorialContent.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
+}
+
+/**
+ * Show a specific step
+ */
+function showStep(stepIndex) {
+    // Hide all steps
+    document.querySelectorAll('.tutorial-step').forEach(step => {
+        step.classList.remove('active');
+    });
+    
+    // Show target step
+    const targetStep = document.querySelector(`#step-${stepIndex}`);
+    if (targetStep) {
+        targetStep.classList.add('active');
+        
+        // Initialize any interactive elements in this step
+        initializeStepElements(targetStep);
+        
+        // Add fade-in animation
+        targetStep.classList.add('fade-in');
+        
+        // Update step counter
+        updateStepCounter(stepIndex + 1);
+    }
+}
+
+/**
+ * Initialize interactive elements in a step
+ */
+function initializeStepElements(stepElement) {
+    // Initialize code examples with syntax highlighting
+    const codeBlocks = stepElement.querySelectorAll('pre code');
+    codeBlocks.forEach(block => {
+        // Add copy button
+        addCopyButton(block);
+        
+        // Add line numbers if needed
+        if (block.textContent.split('\n').length > 5) {
+            addLineNumbers(block);
+        }
+    });
+    
+    // Initialize interactive demos
+    const demos = stepElement.querySelectorAll('.interactive-demo');
+    demos.forEach(demo => {
+        initializeDemo(demo);
+    });
+    
+    // Initialize tooltips for this step
+    const tooltips = stepElement.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltips.forEach(tooltip => {
+        new bootstrap.Tooltip(tooltip);
+    });
+}
+
+/**
+ * Add copy button to code blocks
+ */
+function addCopyButton(codeBlock) {
+    if (codeBlock.querySelector('.copy-button')) {
+        return; // Already has copy button
+    }
+    
+    const copyButton = document.createElement('button');
+    copyButton.className = 'btn btn-sm btn-outline-secondary copy-button position-absolute top-0 end-0 m-2';
+    copyButton.innerHTML = '<i data-feather="copy"></i>';
+    copyButton.title = 'Copy code';
+    
+    copyButton.addEventListener('click', async () => {
+        try {
+            await navigator.clipboard.writeText(codeBlock.textContent);
+            copyButton.innerHTML = '<i data-feather="check"></i>';
+            copyButton.classList.add('btn-success');
+            copyButton.classList.remove('btn-outline-secondary');
+            
+            setTimeout(() => {
+                copyButton.innerHTML = '<i data-feather="copy"></i>';
+                copyButton.classList.remove('btn-success');
+                copyButton.classList.add('btn-outline-secondary');
+                feather.replace();
+            }, 2000);
+            
+            window.DifyLearning?.showToast('Code copied to clipboard!', 'success');
+        } catch (err) {
+            window.DifyLearning?.showToast('Failed to copy code', 'danger');
+        }
+    });
+    
+    // Make parent relative positioned
+    const pre = codeBlock.closest('pre');
+    if (pre) {
+        pre.style.position = 'relative';
+        pre.appendChild(copyButton);
+        feather.replace();
+    }
+}
+
+/**
+ * Add line numbers to code blocks
+ */
+function addLineNumbers(codeBlock) {
+    const lines = codeBlock.textContent.split('\n');
+    const lineNumbers = lines.map((_, index) => index + 1).join('\n');
+    
+    const lineNumbersElement = document.createElement('pre');
+    lineNumbersElement.className = 'line-numbers';
+    lineNumbersElement.textContent = lineNumbers;
+    lineNumbersElement.style.cssText = `
+        position: absolute;
+        left: 0;
+        top: 0;
+        padding: 1rem 0.5rem;
+        background: #f1f3f4;
+        color: #666;
+        font-size: 0.8rem;
+        border-right: 1px solid #ddd;
+        user-select: none;
+        width: 3rem;
+        text-align: right;
+    `;
+    
+    const pre = codeBlock.closest('pre');
+    if (pre) {
+        pre.style.position = 'relative';
+        pre.style.paddingLeft = '4rem';
+        pre.appendChild(lineNumbersElement);
+    }
+}
+
+/**
+ * Initialize interactive demos
+ */
+function initializeDemo(demoElement) {
+    const demoType = demoElement.dataset.demoType;
+    
+    switch(demoType) {
+        case 'workflow-builder':
+            initializeWorkflowDemo(demoElement);
+            break;
+        case 'chatbot-preview':
+            initializeChatbotDemo(demoElement);
+            break;
+        case 'agent-configuration':
+            initializeAgentDemo(demoElement);
+            break;
+        default:
+            // Generic demo initialization
+            demoElement.innerHTML = `
+                <div class="demo-placeholder">
+                    <i data-feather="play-circle" class="large-icon text-primary mb-2"></i>
+                    <p>Interactive Demo</p>
+                    <button class="btn btn-primary btn-sm">Try It</button>
+                </div>
+            `;
+            feather.replace();
+    }
+}
+
+/**
+ * Initialize workflow builder demo
+ */
+function initializeWorkflowDemo(element) {
+    element.innerHTML = `
+        <div class="workflow-demo">
+            <div class="workflow-canvas">
+                <div class="workflow-node start-node">
+                    <i data-feather="play"></i>
+                    <span>Start</span>
+                </div>
+                <div class="workflow-arrow">→</div>
+                <div class="workflow-node llm-node">
+                    <i data-feather="cpu"></i>
+                    <span>LLM</span>
+                </div>
+                <div class="workflow-arrow">→</div>
+                <div class="workflow-node end-node">
+                    <i data-feather="message-circle"></i>
+                    <span>Response</span>
+                </div>
+            </div>
+            <div class="workflow-controls mt-3">
+                <button class="btn btn-sm btn-primary" onclick="addWorkflowNode(this)">
+                    <i data-feather="plus"></i> Add Node
+                </button>
+            </div>
+        </div>
+    `;
+    feather.replace();
+}
+
+/**
+ * Initialize chatbot demo
+ */
+function initializeChatbotDemo(element) {
+    element.innerHTML = `
+        <div class="chatbot-demo">
+            <div class="chat-window">
+                <div class="chat-messages" id="demo-chat-messages">
+                    <div class="message bot-message">
+                        <div class="message-content">
+                            Hello! I'm your Dify AI assistant. How can I help you today?
+                        </div>
+                    </div>
+                </div>
+                <div class="chat-input">
+                    <input type="text" class="form-control" placeholder="Type your message..." 
+                           onkeypress="handleDemoChatInput(event)">
+                    <button class="btn btn-primary" onclick="sendDemoMessage()">
+                        <i data-feather="send"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    `;
+    feather.replace();
+}
+
+/**
+ * Handle demo chat input
+ */
+function handleDemoChatInput(event) {
+    if (event.key === 'Enter') {
+        sendDemoMessage();
+    }
+}
+
+/**
+ * Send demo message
+ */
+function sendDemoMessage() {
+    const input = event.target.closest('.chat-input').querySelector('input');
+    const message = input.value.trim();
+    
+    if (!message) return;
+    
+    const messagesContainer = document.getElementById('demo-chat-messages');
+    
+    // Add user message
+    const userMessage = document.createElement('div');
+    userMessage.className = 'message user-message';
+    userMessage.innerHTML = `<div class="message-content">${message}</div>`;
+    messagesContainer.appendChild(userMessage);
+    
+    // Clear input
+    input.value = '';
+    
+    // Simulate bot response
+    setTimeout(() => {
+        const botMessage = document.createElement('div');
+        botMessage.className = 'message bot-message';
+        botMessage.innerHTML = `
+            <div class="message-content">
+                That's a great question about Dify! This is a demo response showing how your chatbot would interact with users.
+            </div>
+        `;
+        messagesContainer.appendChild(botMessage);
+        messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }, 1000);
+    
+    messagesContainer.scrollTop = messagesContainer.scrollHeight;
+}
+
+/**
+ * Update progress display
+ */
+function updateProgress() {
+    // Update progress bar
+    const progressBar = document.getElementById('tutorial-progress-bar');
+    if (progressBar) {
+        const percentage = ((currentStep + 1) / totalSteps) * 100;
+        window.DifyLearning?.animateProgressBar(progressBar, percentage);
+    }
+    
+    // Update step counter
+    updateStepCounter(currentStep + 1);
+    
+    // Update sidebar navigation
+    updateSidebarNavigation();
+}
+
+/**
+ * Update step counter
+ */
+function updateStepCounter(stepNumber) {
+    const counter = document.getElementById('current-step');
+    if (counter) {
+        counter.textContent = stepNumber;
+    }
+}
+
+/**
+ * Update sidebar navigation
+ */
+function updateSidebarNavigation() {
+    document.querySelectorAll('.step-nav-link').forEach((link, index) => {
+        link.classList.remove('active');
+        
+        if (index === currentStep) {
+            link.classList.add('active');
+        }
+        
+        // Remove completed indicators (checkmarks disabled)
+        const existingCheck = link.querySelector('i[data-feather="check"]');
+        if (existingCheck) {
+            existingCheck.remove();
+        }
+    });
+}
+
+/**
+ * Save progress to server
+ */
+async function saveProgress() {
+    if (!currentTutorial) return;
+    
+    try {
+        const response = await fetch('/api/progress/update', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                tutorial_id: currentTutorial.id,
+                current_step: currentStep,
+                completed: false
+            })
+        });
+        
+        if (!response.ok) {
+            throw new Error('Failed to save progress');
+        }
+        
+    } catch (error) {
+        console.error('Error saving progress:', error);
+        // Show error message to user
+        window.DifyLearning?.showToast('Failed to save progress', 'warning');
+    }
+}
+
+/**
+ * Complete tutorial
+ */
+async function completeTutorial() {
+    if (!currentTutorial) return;
+    
+    try {
+        const response = await fetch('/api/progress/update', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                tutorial_id: currentTutorial.id,
+                current_step: totalSteps - 1,
+                completed: true
+            })
+        });
+        
+        if (response.ok) {
+            // Track completion
+            window.DifyLearning?.trackEvent('tutorial_completed', {
+                tutorial_id: currentTutorial.id,
+                total_steps: totalSteps,
+                completion_time: new Date().toISOString()
+            });
+            
+            // Show completion modal
+            const modal = new bootstrap.Modal(document.getElementById('completionModal'));
+            modal.show();
+            
+            // Update UI to show completion
+            document.querySelectorAll('.progress-circle').forEach(circle => {
+                circle.className = 'progress-circle completed';
+                circle.innerHTML = '<i data-feather="check"></i>';
+            });
+            feather.replace();
+            
+        } else {
+            throw new Error('Failed to complete tutorial');
+        }
+        
+    } catch (error) {
+        console.error('Error completing tutorial:', error);
+        window.DifyLearning?.showToast('Failed to save completion status', 'warning');
+    }
+}
+
+/**
+ * Track time spent on step
+ */
+function trackStepTime(stepIndex, seconds) {
+    if (seconds < 5) return; // Ignore very short durations
+    
+    const stepData = {
+        tutorial_id: currentTutorial?.id,
+        step: stepIndex + 1,
+        time_spent: seconds
+    };
+    
+    // Store locally for analytics
+    const stepTimes = JSON.parse(localStorage.getItem('dify_step_times') || '[]');
+    stepTimes.push({
+        ...stepData,
+        timestamp: new Date().toISOString()
+    });
+    localStorage.setItem('dify_step_times', JSON.stringify(stepTimes.slice(-1000)));
+}
+
+/**
+ * Add workflow node (demo function)
+ */
+function addWorkflowNode(button) {
+    const canvas = button.closest('.workflow-demo').querySelector('.workflow-canvas');
+    const newNode = document.createElement('div');
+    newNode.className = 'workflow-node';
+    newNode.innerHTML = `
+        <i data-feather="settings"></i>
+        <span>New Node</span>
+    `;
+    
+    // Add arrow before new node
+    const arrow = document.createElement('div');
+    arrow.className = 'workflow-arrow';
+    arrow.textContent = '→';
+    
+    // Insert before end node
+    const endNode = canvas.querySelector('.end-node');
+    canvas.insertBefore(arrow, endNode);
+    canvas.insertBefore(newNode, endNode);
+    
+    feather.replace();
+    
+    // Show success message
+    window.DifyLearning?.showToast('Node added to workflow!', 'success');
+}
+
+// Make functions available globally
+window.navigateToStep = navigateToStep;
+window.completeTutorial = completeTutorial;
+window.handleDemoChatInput = handleDemoChatInput;
+window.sendDemoMessage = sendDemoMessage;
+window.addWorkflowNode = addWorkflowNode;

templates/base.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Dify AI Learning Platform{% endblock %}</title>
+    
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Feather Icons -->
+    <script src="https://unpkg.com/feather-icons"></script>
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
+    
+    {% block extra_head %}{% endblock %}
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
+        <div class="container">
+            <a class="navbar-brand" href="{{ url_for('index') }}">
+                <i data-feather="book-open" class="me-2"></i>
+                Dify AI Learning
+            </a>
+            
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav me-auto">
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('index') }}">
+                            <i data-feather="home" class="me-1"></i>Home
+                        </a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link" href="{{ url_for('progress') }}">
+                            <i data-feather="trending-up" class="me-1"></i>Progress
+                        </a>
+                    </li>
+                </ul>
+                
+                <ul class="navbar-nav">
+                    {% if session.user_id %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('logout') }}">
+                                <i data-feather="log-out" class="me-1"></i>Logout
+                            </a>
+                        </li>
+                    {% else %}
+                        <li class="nav-item">
+                            <a class="nav-link" href="{{ url_for('login') }}">
+                                <i data-feather="log-in" class="me-1"></i>Login
+                            </a>
+                        </li>
+                    {% endif %}
+                </ul>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="main-content">
+        {% block content %}{% endblock %}
+    </main>
+
+    <!-- Footer -->
+    <footer class="bg-dark text-light py-4 mt-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-md-6">
+                    <h5>Dify AI Learning Platform</h5>
+                    <p>Master Dify AI with our comprehensive tutorials and hands-on projects.</p>
+                </div>
+                <div class="col-md-6">
+                    <h5>Resources</h5>
+                    <ul class="list-unstyled">
+                        <li><a href="https://docs.dify.ai/" target="_blank" class="text-light">Official Documentation</a></li>
+                        <li><a href="https://github.com/langgenius/dify" target="_blank" class="text-light">GitHub Repository</a></li>
+                        <li><a href="https://dify.ai/" target="_blank" class="text-light">Dify.ai Cloud</a></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </footer>
+
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- Custom JS -->
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+    
+    {% block extra_scripts %}{% endblock %}
+    
+    <script>
+        // Initialize Feather icons
+        feather.replace();
+    </script>
+</body>
+</html>

templates/index.html

@@ -0,0 +1,150 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="container py-5">
+    <!-- Hero Section -->
+    <div class="hero-section text-center mb-5">
+        <h1 class="display-4 fw-bold  mb-3">Master Dify AI</h1>
+        <p class="lead mb-4">Learn to build powerful AI applications with our comprehensive, step-by-step tutorials designed for beginners</p>
+        <div class="hero-stats row justify-content-center">
+            <div class="col-md-2 col-4">
+                <div class="stat-item">
+                    <h3 class="stat-number">{{ tutorials|length }}</h3>
+                    <p class="stat-label">Tutorials</p>
+                </div>
+            </div>
+            <div class="col-md-2 col-4">
+                <div class="stat-item">
+                    <h3 class="stat-number">{{ projects|length }}</h3>
+                    <p class="stat-label">Projects</p>
+                </div>
+            </div>
+            <div class="col-md-2 col-4">
+                <div class="stat-item">
+                    <h3 class="stat-number">0</h3>
+                    <p class="stat-label">Coding Req.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Learning Path -->
+    <section class="mb-5">
+        <h2 class="section-title">
+            <i data-feather="map" class="me-2"></i>
+            Learning Path
+        </h2>
+        <p class="section-subtitle">Follow our structured learning path to master Dify AI from basics to advanced topics</p>
+        
+        <div class="learning-path">
+            {% for tutorial in tutorials %}
+            <div class="path-item">
+                <div class="path-number">{{ loop.index }}</div>
+                <div class="path-content">
+                    <div class="card tutorial-card">
+                        <div class="card-body">
+                            <div class="d-flex justify-content-between align-items-start">
+                                <div>
+                                    <h5 class="card-title">{{ tutorial.title }}</h5>
+                                    <p class="card-text">{{ tutorial.description }}</p>
+                                    <div class="tutorial-meta">
+                                        <span class="badge bg-{{ tutorial.difficulty_color }}">{{ tutorial.difficulty }}</span>
+                                        <span class="text-muted ms-2">
+                                            <i data-feather="clock" class="small me-1"></i>
+                                            {{ tutorial.estimated_time }} min
+                                        </span>
+                                    </div>
+                                </div>
+                                <div class="tutorial-progress">
+                                    <div class="progress-circle not-started">
+                                        <i data-feather="play"></i>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="mt-3">
+                                <a href="{{ url_for('tutorial', slug=tutorial.slug) }}" class="btn btn-primary">
+                                    Start Tutorial
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+
+    <!-- Hands-on Projects -->
+    <section class="mb-5">
+        <h2 class="section-title">
+            <i data-feather="code" class="me-2"></i>
+            Hands-on Projects
+        </h2>
+        <p class="section-subtitle">Apply your knowledge with real-world projects</p>
+        
+        <div class="row">
+            {% for project in projects %}
+            <div class="col-md-6 col-lg-4 mb-4">
+                <div class="card project-card h-100">
+                    <div class="card-body">
+                        <div class="project-icon mb-3">
+                            <i data-feather="{{ project.icon }}"></i>
+                        </div>
+                        <h5 class="card-title">{{ project.title }}</h5>
+                        <p class="card-text">{{ project.description }}</p>
+                        <div class="project-meta mb-3">
+                            <span class="badge bg-{{ project.difficulty_color }}">{{ project.difficulty }}</span>
+                            <span class="text-muted ms-2">
+                                <i data-feather="clock" class="small me-1"></i>
+                                {{ project.estimated_time }} min
+                            </span>
+                        </div>
+                        <a href="{{ url_for('project', slug=project.slug) }}" class="btn btn-outline-primary">
+                            Start Project
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+    </section>
+
+    <!-- Features -->
+    <section class="features-section">
+        <h2 class="section-title text-center">
+            <i data-feather="star" class="me-2"></i>
+            Why Choose Our Platform?
+        </h2>
+        
+        <div class="row mt-4">
+            <div class="col-md-4 mb-4">
+                <div class="feature-item text-center">
+                    <div class="feature-icon">
+                        <i data-feather="users"></i>
+                    </div>
+                    <h4>Beginner Friendly</h4>
+                    <p>No coding experience required. Learn Dify AI with visual, step-by-step tutorials.</p>
+                </div>
+            </div>
+            <div class="col-md-4 mb-4">
+                <div class="feature-item text-center">
+                    <div class="feature-icon">
+                        <i data-feather="trending-up"></i>
+                    </div>
+                    <h4>Progress Tracking</h4>
+                    <p>Track your learning progress and see how far you've come in your AI journey.</p>
+                </div>
+            </div>
+            <div class="col-md-4 mb-4">
+                <div class="feature-item text-center">
+                    <div class="feature-icon">
+                        <i data-feather="play-circle"></i>
+                    </div>
+                    <h4>Interactive Learning</h4>
+                    <p>Learn by doing with interactive tutorials and real-world project examples.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+</div>
+{% endblock %}

templates/progress.html

@@ -0,0 +1,158 @@
+{% extends "base.html" %}
+
+{% block title %}Learning Progress - Dify AI Learning{% endblock %}
+
+{% block content %}
+<div class="container py-4">
+    <div class="row">
+        <div class="col-12">
+            <h1 class="page-title">
+                <i data-feather="trending-up" class="me-2"></i>
+                Your Learning Progress
+            </h1>
+            <p class="page-subtitle">Track your journey through Dify AI mastery</p>
+        </div>
+    </div>
+    
+    <!-- Progress Overview -->
+    <div class="row mb-5">
+        <div class="col-md-3 col-6 mb-3">
+            <div class="card stats-card">
+                <div class="card-body text-center">
+                    <div class="stats-icon">
+                        <i data-feather="book-open"></i>
+                    </div>
+                    <h3 class="stats-number">{{ progress_data|selectattr('progress')|list|length }}</h3>
+                    <p class="stats-label">Started</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 mb-3">
+            <div class="card stats-card">
+                <div class="card-body text-center">
+                    <div class="stats-icon">
+                        <i data-feather="check-circle"></i>
+                    </div>
+                    <h3 class="stats-number">{{ progress_data|selectattr('progress.completed')|list|length }}</h3>
+                    <p class="stats-label">Completed</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 mb-3">
+            <div class="card stats-card">
+                <div class="card-body text-center">
+                    <div class="stats-icon">
+                        <i data-feather="play-circle"></i>
+                    </div>
+                    <h3 class="stats-number">{{ progress_data|rejectattr('progress')|list|length }}</h3>
+                    <p class="stats-label">Not Started</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-3 col-6 mb-3">
+            <div class="card stats-card">
+                <div class="card-body text-center">
+                    <div class="stats-icon">
+                        <i data-feather="clock"></i>
+                    </div>
+                    <h3 class="stats-number">
+                        {{ (progress_data|selectattr('progress.completed')|map(attribute='tutorial.estimated_time')|sum) or 0 }}
+                    </h3>
+                    <p class="stats-label">Minutes Learned</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Progress Timeline -->
+    <div class="row">
+        <div class="col-12">
+            <h2 class="section-title">
+                <i data-feather="list" class="me-2"></i>
+                Tutorial Progress
+            </h2>
+            
+            <div class="progress-timeline">
+                {% for item in progress_data %}
+                <div class="progress-item">
+                    <div class="progress-marker">
+                        {% if item.progress and item.progress.completed %}
+                            <div class="marker completed">
+                                <i data-feather="check"></i>
+                            </div>
+                        {% elif item.progress %}
+                            <div class="marker in-progress">
+                                <span>{{ item.progress.current_step + 1 }}</span>
+                            </div>
+                        {% else %}
+                            <div class="marker not-started">
+                                <i data-feather="circle"></i>
+                            </div>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="progress-content">
+                        <div class="card">
+                            <div class="card-body">
+                                <div class="d-flex justify-content-between align-items-start">
+                                    <div>
+                                        <h5 class="card-title">{{ item.tutorial.title }}</h5>
+                                        <p class="card-text">{{ item.tutorial.description }}</p>
+                                        <div class="tutorial-meta">
+                                            <span class="badge bg-{{ item.tutorial.difficulty_color }}">
+                                                {{ item.tutorial.difficulty }}
+                                            </span>
+                                            <span class="text-muted ms-2">
+                                                <i data-feather="clock" class="small me-1"></i>
+                                                {{ item.tutorial.estimated_time }} min
+                                            </span>
+                                            {% if item.progress and item.progress.completed %}
+                                            <span class="text-success ms-2">
+                                                <i data-feather="calendar" class="small me-1"></i>
+                                                Completed {{ item.progress.completion_date.strftime('%b %d') }}
+                                            </span>
+                                            {% endif %}
+                                        </div>
+                                    </div>
+                                    <div class="progress-actions">
+                                        {% if item.progress and item.progress.completed %}
+                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
+                                               class="btn btn-outline-primary btn-sm">
+                                                Review
+                                            </a>
+                                        {% elif item.progress %}
+                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
+                                               class="btn btn-primary btn-sm">
+                                                Continue
+                                            </a>
+                                        {% else %}
+                                            <a href="{{ url_for('tutorial', slug=item.tutorial.slug) }}" 
+                                               class="btn btn-outline-primary btn-sm">
+                                                Start
+                                            </a>
+                                        {% endif %}
+                                    </div>
+                                </div>
+                                
+                                {% if item.progress and not item.progress.completed %}
+                                <div class="tutorial-progress mt-3">
+                                    <div class="progress">
+                                        <div class="progress-bar" role="progressbar" 
+                                             style="width: {{ (item.progress.current_step / item.tutorial.total_steps * 100)|round }}%">
+                                        </div>
+                                    </div>
+                                    <small class="text-muted">
+                                        Step {{ item.progress.current_step + 1 }} of {{ item.tutorial.total_steps }}
+                                    </small>
+                                </div>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/project.html

@@ -0,0 +1,161 @@
+{% extends "base.html" %}
+
+{% block title %}{{ project.title }} - Dify AI Learning{% endblock %}
+
+{% block content %}
+<div class="container py-4">
+    <div class="row">
+        <!-- Project Info Sidebar -->
+        <div class="col-lg-4">
+            <div class="project-info-card sticky-top">
+                <div class="card">
+                    <div class="card-body">
+                        <div class="project-icon mb-3">
+                            <i data-feather="{{ project.icon }}" class="large-icon"></i>
+                        </div>
+                        <h5 class="card-title">{{ project.title }}</h5>
+                        <p class="card-text">{{ project.description }}</p>
+                        
+                        <div class="project-details">
+                            <div class="detail-item">
+                                <strong>Difficulty:</strong>
+                                <span class="badge bg-{{ project.difficulty_color }}">{{ project.difficulty }}</span>
+                            </div>
+                            <div class="detail-item">
+                                <strong>Duration:</strong>
+                                <span><i data-feather="clock" class="small me-1"></i>{{ project.estimated_time }} minutes</span>
+                            </div>
+                            <div class="detail-item">
+                                <strong>Category:</strong>
+                                <span>{{ project.category }}</span>
+                            </div>
+                        </div>
+                        
+                        {% if project.prerequisites %}
+                        <div class="prerequisites mt-3">
+                            <h6>Prerequisites:</h6>
+                            <ul class="small">
+                                {% for prereq in project.prerequisites %}
+                                <li>{{ prereq }}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                        {% endif %}
+                        
+                        <div class="project-resources mt-3">
+                            <h6>What You'll Build:</h6>
+                            <ul class="small">
+                                {% for outcome in project.outcomes %}
+                                <li>{{ outcome }}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Project Content -->
+        <div class="col-lg-8">
+            <nav aria-label="breadcrumb">
+                <ol class="breadcrumb">
+                    <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
+                    <li class="breadcrumb-item active">{{ project.title }}</li>
+                </ol>
+            </nav>
+            
+            <div class="project-content">
+                <h1 class="project-title">{{ project.title }}</h1>
+                
+                <!-- Project Overview -->
+                <section class="project-section">
+                    <h2>Project Overview</h2>
+                    <div class="project-overview">
+                        {{ project.overview|safe }}
+                    </div>
+                </section>
+                
+                <!-- Project Steps -->
+                {% for section in project.sections %}
+                <section class="project-section">
+                    <h2>{{ section.title }}</h2>
+                    <div class="section-content">
+                        {{ section.content|safe }}
+                        
+                        {% if section.steps %}
+                        <div class="project-steps">
+                            {% for step in section.steps %}
+                            <div class="project-step">
+                                <div class="step-header">
+                                    <h4>
+                                        <span class="step-number">{{ loop.index }}</span>
+                                        {{ step.title }}
+                                    </h4>
+                                </div>
+                                <div class="step-content">
+                                    {{ step.content|safe }}
+                                    
+                                    {% if step.code %}
+                                    <div class="code-block mt-3">
+                                        <h6>Configuration:</h6>
+                                        <pre><code>{{ step.code }}</code></pre>
+                                    </div>
+                                    {% endif %}
+                                    
+                                    {% if step.screenshot %}
+                                    <div class="screenshot mt-3">
+                                        <img src="{{ step.screenshot }}" alt="{{ step.title }}" class="img-fluid rounded border">
+                                    </div>
+                                    {% endif %}
+                                    
+                                    {% if step.tips %}
+                                    <div class="alert alert-info mt-3">
+                                        <h6><i data-feather="lightbulb" class="me-2"></i>Tips:</h6>
+                                        <ul class="mb-0">
+                                            {% for tip in step.tips %}
+                                            <li>{{ tip }}</li>
+                                            {% endfor %}
+                                        </ul>
+                                    </div>
+                                    {% endif %}
+                                </div>
+                            </div>
+                            {% endfor %}
+                        </div>
+                        {% endif %}
+                    </div>
+                </section>
+                {% endfor %}
+                
+                <!-- Next Steps -->
+                <section class="project-section">
+                    <h2>Next Steps</h2>
+                    <div class="next-steps">
+                        <p>Congratulations on completing this project! Here are some suggestions for what to do next:</p>
+                        <div class="row">
+                            <div class="col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <h5><i data-feather="arrow-right" class="me-2"></i>Try Another Project</h5>
+                                        <p>Apply your skills to a different type of AI application</p>
+                                        <a href="{{ url_for('index') }}#projects" class="btn btn-outline-primary">Browse Projects</a>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="col-md-6">
+                                <div class="card">
+                                    <div class="card-body">
+                                        <h5><i data-feather="book" class="me-2"></i>Learn More</h5>
+                                        <p>Dive deeper into advanced Dify features and techniques</p>
+                                        <a href="{{ url_for('index') }}#tutorials" class="btn btn-outline-primary">View Tutorials</a>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}

templates/tutorial.html

@@ -0,0 +1,196 @@
+{% extends "base.html" %}
+
+{% block title %}{{ tutorial.title }} - Dify AI Learning{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='js/tutorial.js') }}">
+{% endblock %}
+
+{% block content %}
+<div class="container py-4">
+    <div class="row">
+        <!-- Sidebar Navigation -->
+        <div class="col-lg-3">
+            <div class="tutorial-sidebar sticky-top">
+                <div class="tutorial-progress-info mb-4">
+                    <h6 class="text-muted">Tutorial Progress</h6>
+                    <div class="progress mb-2">
+                        <div class="progress-bar" role="progressbar" 
+                             style="width: {{ ((user_progress.current_step if user_progress else 0) / tutorial.steps|length * 100)|round }}%"
+                             id="tutorial-progress-bar">
+                        </div>
+                    </div>
+                    <small class="text-muted">
+                        Step <span id="current-step">{{ user_progress.current_step + 1 if user_progress else 1 }}</span> 
+                        of {{ tutorial.steps|length }}
+                    </small>
+                </div>
+                
+                <nav class="tutorial-nav">
+                    <h6 class="text-muted mb-3">Steps</h6>
+                    <ul class="nav nav-pills flex-column" id="tutorial-steps-nav">
+                        {% for step in tutorial.steps %}
+                        <li class="nav-item">
+                            <a class="nav-link step-nav-link {% if loop.index0 == (user_progress.current_step if user_progress else 0) %}active{% endif %}" 
+                               href="#step-{{ loop.index0 }}" 
+                               data-step="{{ loop.index0 }}">
+                                <span class="step-number">{{ loop.index }}</span>
+                                {{ step.title }}
+
+                            </a>
+                        </li>
+                        {% endfor %}
+                    </ul>
+                </nav>
+            </div>
+        </div>
+        
+        <!-- Main Content -->
+        <div class="col-lg-9">
+            <!-- Tutorial Header -->
+            <div class="tutorial-header mb-4">
+                <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb">
+                        <li class="breadcrumb-item"><a href="{{ url_for('index') }}">Home</a></li>
+                        <li class="breadcrumb-item active">{{ tutorial.title }}</li>
+                    </ol>
+                </nav>
+                
+                <h1 class="tutorial-title">{{ tutorial.title }}</h1>
+                <div class="tutorial-meta">
+                    <span class="badge bg-{{ tutorial.difficulty_color }} me-2">{{ tutorial.difficulty }}</span>
+                    <span class="text-muted">
+                        <i data-feather="clock" class="small me-1"></i>
+                        {{ tutorial.estimated_time }} minutes
+                    </span>
+                    <span class="text-muted ms-3">
+                        <i data-feather="bookmark" class="small me-1"></i>
+                        {{ tutorial.category }}
+                    </span>
+                </div>
+                <p class="tutorial-description mt-3">{{ tutorial.description }}</p>
+            </div>
+            
+            <!-- Tutorial Steps -->
+            <div class="tutorial-content">
+                {% for step in tutorial.steps %}
+                <div class="tutorial-step {% if loop.index0 == (user_progress.current_step if user_progress else 0) %}active{% endif %}" 
+                     id="step-{{ loop.index0 }}" 
+                     data-step="{{ loop.index0 }}">
+                    
+                    <div class="step-header">
+                        <h2 class="step-title">
+                            <span class="step-number-badge">{{ loop.index }}</span>
+                            {{ step.title }}
+                        </h2>
+                        {% if step.estimated_time %}
+                        <span class="step-time">
+                            <i data-feather="clock" class="small me-1"></i>
+                            {{ step.estimated_time }} min
+                        </span>
+                        {% endif %}
+                    </div>
+                    
+                    <div class="step-content">
+                        {{ step.content|safe }}
+                        
+                        {% if step.code_example %}
+                        <div class="code-example mt-4">
+                            <h6>Example:</h6>
+                            <pre><code>{{ step.code_example }}</code></pre>
+                        </div>
+                        {% endif %}
+                        
+                        {% if step.interactive_demo %}
+                        <div class="interactive-demo mt-4">
+                            <h6>Interactive Demo:</h6>
+                            <div class="demo-container">
+                                {{ step.interactive_demo|safe }}
+                            </div>
+                        </div>
+                        {% endif %}
+                        
+                        {% if step.tips %}
+                        <div class="alert alert-info mt-4">
+                            <h6><i data-feather="lightbulb" class="me-2"></i>Tips:</h6>
+                            <ul class="mb-0">
+                                {% for tip in step.tips %}
+                                <li>{{ tip }}</li>
+                                {% endfor %}
+                            </ul>
+                        </div>
+                        {% endif %}
+                    </div>
+                    
+                    <!-- Step Navigation -->
+                    <div class="step-navigation mt-4 pt-4 border-top">
+                        <div class="d-flex justify-content-between">
+                            <div>
+                                {% if loop.index0 > 0 %}
+                                <button class="btn btn-outline-secondary" 
+                                        onclick="navigateToStep({{ loop.index0 - 1 }})">
+                                    <i data-feather="chevron-left" class="me-1"></i>
+                                    Previous
+                                </button>
+                                {% endif %}
+                            </div>
+                            <div>
+                                {% if loop.index0 < tutorial.steps|length - 1 %}
+                                <button class="btn btn-primary" 
+                                        onclick="navigateToStep({{ loop.index0 + 1 }})">
+                                    Next
+                                    <i data-feather="chevron-right" class="ms-1"></i>
+                                </button>
+                                {% else %}
+                                <button class="btn btn-success" onclick="completeTutorial()">
+                                    <i data-feather="check" class="me-1"></i>
+                                    Complete Tutorial
+                                </button>
+                                {% endif %}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Tutorial completion modal -->
+<div class="modal fade" id="completionModal" tabindex="-1">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title">
+                    <i data-feather="award" class="me-2"></i>
+                    Congratulations!
+                </h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <p>You've successfully completed <strong>{{ tutorial.title }}</strong>!</p>
+                <p>You're ready to move on to the next tutorial or try a hands-on project.</p>
+            </div>
+            <div class="modal-footer">
+                <a href="{{ url_for('index') }}" class="btn btn-primary">Back to Home</a>
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Continue Learning</button>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_scripts %}
+<script src="{{ url_for('static', filename='js/tutorial.js') }}"></script>
+<script>
+    // Initialize tutorial with current progress
+    const tutorialData = {
+        id: {{ tutorial.id }},
+        totalSteps: {{ tutorial.steps|length }},
+        currentStep: {{ user_progress.current_step if user_progress else 0 }}
+    };
+    
+    initializeTutorial(tutorialData);
+</script>
+{% endblock %}