Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,185 +1,207 @@
 import streamlit as st
-
-# Function for displaying lifecycle steps with details
-def display_lifecycle_step(step_name):
-    steps = {
-        "Problem Statement": "Objective of the project.",
-        "Data Collection": "Data is collected from various sources like APIs, databases, or web scraping atlast we've to go with manual collection.",
-        "Simple EDA": "Describing the quality of the data.",
-        "Data Pre-Processing": "It is a technique by which we can convert raw data into pre-procesed data --->1.Clean the data  2.Transform the data.",
-        "EDA": "Transforming insights into a clean dataset and providing proper visualizations.",
-        "Feature Engineering": "Creating and analyzing features and labels.",
-        "Model Training": "Training the machine about relationships between features and labels.",
-        "Testing": "Testing how efficiently the machine learned.",
-        "Deployment and Maintenance": "Deploying the machine to the client and ensuring maintenance for accurate results."
-    }
-    st.write(f"### {step_name}")
-    st.write(steps[step_name])
-
-# Sidebar with buttons for lifecycle steps
-st.sidebar.title("ML Lifecycle Steps")
-
-# Create buttons for each lifecycle step
-steps_list = [
-    "Problem Statement", "Data Collection", "Simple EDA", 
-    "Data Pre-Processing", "EDA", "Feature Engineering", 
-    "Model Training", "Testing", "Deployment and Maintenance"
-]
-
-selected_step = st.sidebar.radio(
-    "Choose a step in the ML lifecycle:",
-    steps_list,
-    index=0  
-)
-
-st.title("Machine Learning Lifecycle")
-
-display_lifecycle_step(selected_step)
-
-st.markdown("""
-    <style>
-        .stApp {
-            background-color: #f0f0f5;
-            font-family: 'Arial', sans-serif;
-        }
-        .stSidebar .sidebar-content {
-            background-color: #e3e4e8;
-            border-radius: 10px;
-            padding: 10px;
-        }
-        .stButton > button {
-            background-color: #008CBA;
-            color: white;
-            border-radius: 50px;
-            font-size: 18px;
-            padding: 12px 24px;
-        }
-        .stButton > button:hover {
-            background-color: #007B8C;
-        }
-    </style>
-""", unsafe_allow_html=True)
-
 import webbrowser
 
+# Custom CSS for styling
+custom_css = """
+<style>
+    html, body, [data-testid="stAppViewContainer"] {
+        background: linear-gradient(
+            rgba(255, 182, 193, 0.8), /* Soft Pink */
+            rgba(230, 230, 255, 0.8)  /* Lavender */
+        ), 
+        url('https://i.imgur.com/vIszbgs.jpeg') no-repeat center center fixed;
+        background-size: cover; /* Cover the entire screen */
+        font-family: 'Arial', sans-serif;
+        color: #333333;  /* Set text color to dark grey for better readability */
+    }
+    h1 {
+        color:#2c3e50;  
+        text-align: center;
+        font-size: 3rem; /* Increase font size for the main title */
+        margin-top: 20px;
+        text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.8); /* Add shadow for better visibility */
+    }
+    .circle-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 500px;
+        height: 500px;
+        margin: 50px;
+        background: transparent;
+        transform: translate(-50px, -50px); /* Move the container 50px to the left */
+    }
+    .circle-container .button {
+        position: absolute;
+        width: 120px;
+        height: 120px;
+        background: #1e1e2f;
+        color: white;
+        border: 2px solid #555;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
+        text-align: center;
+        text-decoration: none;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+        cursor: pointer;
+        transition: background 0.3s, box-shadow 0.3s;
+    }
+    .circle-container .button:hover {
+        background: #333; /* Change background color */
+        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.3); /* Add shadow on hover */
+    }
+    /* Positioning buttons in a circular layout */
+    .button:nth-child(1) { transform: rotate(0deg) translate(200px) rotate(0deg); }
+    .button:nth-child(2) { transform: rotate(36deg) translate(200px) rotate(-36deg); }
+    .button:nth-child(3) { transform: rotate(72deg) translate(200px) rotate(-72deg); }
+    .button:nth-child(4) { transform: rotate(108deg) translate(200px) rotate(-108deg); }
+    .button:nth-child(5) { transform: rotate(144deg) translate(200px) rotate(-144deg); }
+    .button:nth-child(6) { transform: rotate(180deg) translate(200px) rotate(-180deg); }
+    .button:nth-child(7) { transform: rotate(216deg) translate(200px) rotate(-216deg); }
+    .button:nth-child(8) { transform: rotate(252deg) translate(200px) rotate(-252deg); }
+    .button:nth-child(9) { transform: rotate(288deg) translate(200px) rotate(-288deg); }
+    .button:nth-child(10) { transform: rotate(324deg) translate(200px) rotate(-324deg); }
+    .center {
+        position: absolute;
+        top: 60%;
+        left: 50%;
+        font-size: 1.5rem;
+        color: white;
+        text-align: center;
+        transform: translate(-50%, -50%);
+        font-weight: bold;
+    }
+</style>
+"""
+
+# HTML content for lifecycle buttons in a circular layout
+ml_lifecycle_html = """
+<div class="circle-container">
+    <a href="?page=Problem Statement" class="button">Problem Statement</a>
+    <a href="?page=data_collection" class="button">Data Collection</a>
+    <a href="?page=simple_eda" class="button">Simple EDA</a>
+    <a href="?page=data_preprocessing" class="button">Pre Processing</a>
+    <a href="?page=EDA" class="button">EDA</a>
+    <a href="?page=feature_engineering" class="button">Feature Engineering</a>
+    <a href="?page=model_training" class="button">Model Training</a>
+    <a href="?page=testing" class="button">Testing</a>
+    <a href="?page=deployment" class="button">Deployment</a>
+    <a href="?page=monitoring" class="button">Monitoring</a>
+    <div class="center"><strong>ML Lifecycle</strong></div>
+</div>
+"""
+
+# Functions for page content
+
+# Main page with ML lifecycle circle
+def main_page():
+    st.markdown(custom_css, unsafe_allow_html=True)
+    st.markdown("<h1>Machine Learning Project Lifecycle</h1>", unsafe_allow_html=True)
+    st.markdown(ml_lifecycle_html, unsafe_allow_html=True)
+
+# Data collection page
 def data_collection_page():
-    st.write("### What is Data?")
+    st.markdown(custom_css, unsafe_allow_html=True)
+    st.title("Data Collection")
     st.write("""
-    Data is a collection of facts, numbers, words, or observations that can be used to learn about something. 
-    It can be raw and unprocessed
-    It can be structured or unstructured and comes from various sources.
-    """)
+    ### What is Data?
+    Data is a collection of facts, numbers, words, or observations used to gain insights. It can be raw or processed, depending on the context.
     
-    st.write("### Types of Data")
-    st.write("""
-    1. **Structured Data**: Organized data that follows a schema (e.g., rows and columns, sql).
-    2. **Unstructured Data**: Data that doesn't follow a predefined model (e.g., images, text, audio and video).
-    3. **Semi-Structured Data**: Data that has some organizational properties but isn't fully structured (e.g., JSON, XML, CSV,HTML).
+    **Types of Data:**
+    - **Structured Data**: Highly organized in a tabular format (e.g., SQL databases).
+    - **Semi-Structured Data**: Contains some structure (e.g., JSON, XML).
+    - **Unstructured Data**: No predefined structure (e.g., text, images).
     """)
-
-    selected_data_type = st.radio("Choose Data Type", ["Structured Data", "Unstructured Data", "Semi-Structured Data"])
-
-    if selected_data_type == "Structured Data":
-        display_structured_data_info()
-
-def display_structured_data_info():
-    st.write("### Structured Data")
-    st.write("Structured data is data that is highly organized and stored in a fixed format, like tables, rows, and columns.")
     
-    # Button for each structured data format (Excel, CSV, XML)
-    data_formats = st.radio("Choose a Data Format", ["Excel", "CSV", "XML"])
+    # Button choices for data types
+    structured_data = st.button('Structured Data')
+    semi_structured_data = st.button('Semi-Structured Data')
+    unstructured_data = st.button('Unstructured Data')
     
-    if data_formats == "Excel":
-        display_excel_info()
-    elif data_formats == "CSV":
-        display_csv_info()
-    elif data_formats == "XML":
-        display_xml_info()
-
-# Function to display Excel-related information
-def display_excel_info():
-    st.write("### Excel Format")
+    # Handling button clicks and displaying relevant info
+    if structured_data:
+        st.session_state.data_type = 'structured'
+        show_structured_data()
+    elif semi_structured_data:
+        st.session_state.data_type = 'semi_structured'
+        show_semi_structured_data()
+    elif unstructured_data:
+        st.session_state.data_type = 'unstructured'
+        show_unstructured_data()
+
+# Structured Data details
+def show_structured_data():
+    st.subheader("Structured Data")
     st.write("""
-    **What it is**: Excel is a popular spreadsheet format commonly used for storing and analyzing structured data.
-    
-    **How to read these files**:
-    - Use `pandas.read_excel()` to read Excel files in Python.
-    
-    **Issues encountered when handling Excel files**:
-    - Large files can cause memory issues.
-    - Compatibility problems with different Excel versions.
-    
-    **How to overcome these errors**:
-    - Break large files into smaller chunks.
-    - Use libraries like `openpyxl` for handling newer Excel files and `xlrd` for older ones.
+    Structured data follows a well-defined format, often stored in relational databases or CSV files. 
+    It can be efficiently processed and analyzed using software tools.
     """)
-
-    # Button to open the Jupyter Notebook or PDF with coding examples
-    if st.button("Open Excel Code Example"):
-        open_code_example("excel")
-
-# Function to display CSV-related information
-def display_csv_info():
-    st.write("### CSV Format")
+    excel_button = st.button("Learn About Excel Files")
+    if excel_button:
+        st.write("""
+        ### Excel Files
+        **What is Excel?** Excel is a spreadsheet software for organizing, analyzing, and storing data.
+        
+        **How to Read Excel Files:**
+        ```python
+        import pandas as pd
+        df = pd.read_excel('file.xlsx')
+        ```
+        
+        **Common Issues:**
+        - Large files may cause memory errors.
+        - Formatting issues may hinder data processing.
+        
+        **Solutions:**
+        - Use `openpyxl` for large files.
+        - Preprocess Excel data to remove formatting issues.
+        """)
+        st.markdown("[Click here for Jupyter Notebook Example](http://localhost:8888/notebooks/yourfile.ipynb)", unsafe_allow_html=True)
+
+# Semi-structured Data details
+def show_semi_structured_data():
+    st.subheader("Semi-Structured Data")
     st.write("""
-    **What it is**: CSV (Comma Separated Values) is a text format for representing tabular data, where values are separated by commas.
-    
-    **How to read these files**:
-    - Use `pandas.read_csv()` to read CSV files in Python.
-    
-    **Issues encountered when handling CSV files**:
-    - Improper handling of special characters or delimiters.
-    - Missing or inconsistent data.
-    
-    **How to overcome these errors**:
-    - Specify delimiters using the `delimiter` parameter.
-    - Handle missing data by using `fillna()` or `dropna()` methods in pandas.
+    Semi-structured data is not fully organized but contains some structure, like XML or JSON files. These formats are often used for web data or APIs.
     """)
-
-    # Button to open the Jupyter Notebook or PDF with coding examples
-    if st.button("Open CSV Code Example"):
-        open_code_example("csv")
-
-# Function to display XML-related information
-def display_xml_info():
-    st.write("### XML Format")
+    csv_button = st.button("Learn About CSV Files")
+    if csv_button:
+        st.write("""
+        ### CSV Files
+        **What is CSV?** CSV (Comma Separated Values) is a simple text format for storing tabular data.
+        
+        **How to Read CSV Files:**
+        ```python
+        import pandas as pd
+        df = pd.read_csv('file.csv')
+        ```
+        
+        **Common Issues:**
+        - Missing values or inconsistent delimiters.
+        
+        **Solutions:**
+        - Use `dropna()` or `fillna()` to handle missing data.
+        - Specify delimiters using the `delimiter` parameter.
+        """)
+        st.markdown("[Click here for Jupyter Notebook Example](http://localhost:8888/notebooks/yourfile.ipynb)", unsafe_allow_html=True)
+
+# Unstructured Data details
+def show_unstructured_data():
+    st.subheader("Unstructured Data")
     st.write("""
-    **What it is**: XML (Extensible Markup Language) is a flexible and structured format used to store data in a hierarchical manner.
-    
-    **How to read these files**:
-    - Use `pandas.read_xml()` to read XML files or `xml.etree.ElementTree` for more complex parsing.
-    
-    **Issues encountered when handling XML files**:
-    - Complex nested structures can be hard to parse.
-    - Compatibility issues between different XML schemas.
-    
-    **How to overcome these errors**:
-    - Use XPath or `lxml` for more advanced parsing.
-    - Handle encoding issues using the `encoding` parameter while reading the file.
+    Unstructured data doesn't fit neatly into tables or files. It includes images, videos, and text, which require special techniques to process.
     """)
+    st.write("This requires advanced models like CNN for images or NLP for text data.")
 
-    # Button to open the Jupyter Notebook or PDF with coding examples
-    if st.button("Open XML Code Example"):
-        open_code_example("xml")
-
-# Function to open a Jupyter Notebook or PDF for coding examples
-def open_code_example(data_format):
-    # Placeholder: Open a PDF/Jupyter notebook link for the data format
-    example_links = {
-        "excel": "https://yourlinktoexcelcode.com",
-        "csv": "https://yourlinktocsvcode.com",
-        "xml": "https://yourlinktoxmlcode.com",
-    }
-    
-    link = example_links.get(data_format)
-    if link:
-        webbrowser.open_new_tab(link)
-
-def main():
-    st.sidebar.title("ML Life Cycle Navigation")
-    
-    if st.sidebar.button("Data Collection"):
-        data_collection_page()
+# Render the page based on query parameters
+params = st.query_params
+page = params.get("page", ["main", "data_collection"])[0]
 
-if __name__ == "__main__":
-    main()
+if page == "data_collection":
+    data_collection_page()
+else:
+    main_page()