tutorial.py

import streamlit as st
from PIL import Image

def show_tutorial():
    """
    Displays a tutorial for users of the Pipelytix app.
    Ensures users understand the guidelines for capturing high-quality images
    for accurate pipe detection results.
    """
    # Initialize session state for tracking tutorial completion
    if 'tutorial_completed' not in st.session_state:
        st.session_state.tutorial_completed = False

    # Check if the tutorial has been completed
    if not st.session_state.tutorial_completed:
        # Tutorial header
        st.markdown("## 📸 Welcome to Pipelytix!")
        st.markdown(
            """
            Follow these guidelines to ensure the best results when using Pipelytix. 
            Proper image quality and framing are essential for accurate pipe detection.
            """
        )

        # Tutorial guidelines
        guidelines = [
            {
                "title": "Guideline 1: ✅ Image taken from front view. Image without unnecessary background pipes.",
                "description": "Ensure the image is captured directly from the front without unnecessary background pipes for accurate detection.",
                "images": ["Images/scene1.png", "Images/scene2.png"]
            },
            {
                "title": "Guideline 2: ❌ Front pipes are covering the behind pipes.",
                "description": "Avoid obstructions where front pipes block visibility of the pipes behind.",
                "images": ["Images/scene3.png", "Images/scene4.png"]
            },
            {
                "title": "Guideline 3: ❌ The image contains other pipes in the background.",
                "description": "Ensure no unnecessary pipes or objects appear in the background to prevent detection errors.",
                "images": ["Images/scene5.png", "Images/scene6.png"]
            },
            {
                "title": "Guideline 4: ❌ Sideways image of the pipes.",
                "description": "Capture the image directly from the front, avoiding angled or sideways views.",
                "images": ["Images/scene7.png", "Images/scene8.png"]
            },
            {
                "title": "Guideline 5: ❌ Grass/Sand covers the last row of pipes.",
                "description": "Remove obstructions such as grass or sand that block the view of the pipes.",
                "images": ["Images/scene9.png", "Images/scene10.png"]
            },
        ]

        # Define standard dimensions for images
        standard_width = 400  # pixels
        standard_height = 300  # pixels

        # Display each guideline
        for guideline in guidelines:
            st.markdown(f"### {guideline['title']}")
            st.write(guideline["description"])
            col1, col2 = st.columns(2)
            
            with col1:
                img1 = Image.open(guideline["images"][0]).resize((standard_width, standard_height))
                st.image(img1)
            
            with col2:
                img2 = Image.open(guideline["images"][1]).resize((standard_width, standard_height))
                st.image(img2)
            
            st.markdown("---")

        # Confirmation section
        st.markdown("### Confirm Your Understanding")
        if st.checkbox("I understand and agree to follow these guidelines"):
            st.markdown("---")
            st.success("Great! You're all set to use Pipelytix.")
            if st.button("Proceed to the App"):
                # Mark the tutorial as completed
                st.session_state.tutorial_completed = True
                st.rerun()  # Trigger rerun to move to the app
    else:
        # Redirect message for users who already completed the tutorial
        st.success("✅ Tutorial completed. Redirecting to the app...")