Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,207 +1,183 @@
 import streamlit as st
 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 */
+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."
     }
-    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
+    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)
+
 def data_collection_page():
-    st.markdown(custom_css, unsafe_allow_html=True)
-    st.title("Data Collection")
+    st.write("### What is Data?")
     st.write("""
-    ### 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.
+    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.
+    """)
     
-    **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).
+    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).
     """)
+
+    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 choices for data types
-    structured_data = st.button('Structured Data')
-    semi_structured_data = st.button('Semi-Structured Data')
-    unstructured_data = st.button('Unstructured Data')
+    # Button for each structured data format (Excel, CSV, XML)
+    data_formats = st.radio("Choose a Data Format", ["Excel", "CSV", "XML"])
     
-    # 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")
+    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")
     st.write("""
-    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.
+    *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.
     """)
-    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")
+
+    # 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")
     st.write("""
-    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.
+    *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.
     """)
-    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")
+
+    # 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")
     st.write("""
-    Unstructured data doesn't fit neatly into tables or files. It includes images, videos, and text, which require special techniques to process.
+    *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.
     """)
-    st.write("This requires advanced models like CNN for images or NLP for text data.")
 
-# Render the page based on query parameters
-params = st.query_params
-page = params.get("page", ["main", "data_collection"])[0]
+    # 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()
 
-if page == "data_collection":
-    data_collection_page()
-else:
-    main_page()
+if _name_ == "_main_":
+    main()