Update pages/3_Life cycle of ML.py

pages/3_Life cycle of ML.py

@@ -1,211 +1,150 @@
 import streamlit as st
-import pandas as pd
-from graphviz import Digraph
 
 custom_css = """
 <style>
     html, body, [data-testid="stAppViewContainer"] {
-        background: linear-gradient(to right, #f8fbff, #eef2f3);
-        font-family: 'Arial', sans-serif;
+        font-family: Arial, sans-serif;
+        background: linear-gradient(to right, #ffefba, #ffffff); /* Warm gradient */
         color: #333;
     }
     h1 {
-        color: #34495e;
+        color: #4CAF50;  /* Green */
         text-align: center;
-        font-size: 2.8rem;
-        margin-top: 20px;
-        text-shadow: 1px 1px 3px rgba(200, 200, 255, 0.8);
+        font-size: 3rem;
+        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
     }
-    .stButton button {
-        background-color: #4CAF50;
-        border: none;
+    .circle-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        width: 500px;
+        height: 500px;
+        margin: 50px auto;
+        background: transparent;
+    }
+    .circle-container .button {
+        position: absolute;
+        width: 120px;
+        height: 120px;
+        background: #8A2BE2; /* Blue-violet */
         color: white;
-        padding: 12px 24px;
+        border: none;
+        border-radius: 50%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 1rem;
         text-align: center;
-        font-size: 16px;
-        border-radius: 8px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
         cursor: pointer;
-        transition: background-color 0.3s ease, transform 0.3s ease;
+        transition: transform 0.3s, box-shadow 0.3s;
+        text-decoration: none;
     }
-    .stButton button:hover {
-        background-color: #45a049;
-        transform: scale(1.05);
+    .circle-container .button:hover {
+        transform: scale(1.1);
+        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
     }
-    .stMarkdown {
+    .center {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 1.5rem;
+        color: #4CAF50;  /* Green */
         text-align: center;
-        margin-top: 10px;
     }
 </style>
 """
 
 st.markdown(custom_css, unsafe_allow_html=True)
 
-st.markdown("<h1>🚀 Lifecycle of an ML Project</h1>", unsafe_allow_html=True)
-
-st.markdown("<p style='text-align:center;'>Explore each phase of the ML lifecycle by clicking on the buttons below</p>", unsafe_allow_html=True)
-
-steps = [
-    "Problem Statement",
-    "Data Collection",
-    "Simple EDA",
-    "Data Pre-Processing",
-    "EDA",
-    "Feature Engineering",
-    "Model Training",
-    "Testing",
-    "Deployment and Maintenance"
-]
-
-descriptions = {
-    "Problem Statement": "Objective of the project.",
-    "Data Collection": "Collecting data from various sources.",
-    "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."
-}
-
-
-graph = Digraph(engine="neato", format="svg")
-graph.attr(splines="true", nodesep="0.8", ranksep="1.2", rankdir="LR")
-graph.attr("node", shape="ellipse", style="filled", color="#b3cde0", fontname="Arial", fontsize="12")
-
-
-for i, step in enumerate(steps):
-    graph.node(str(i), step)
-    if i < len(steps) - 1:
-        graph.edge(str(i), str(i+1), color="#34495e", penwidth="2", arrowhead="vee", arrowsize="1.2")
-
-st.graphviz_chart(graph)
-
-st.markdown("<hr>", unsafe_allow_html=True)
-
-selected_step = None
-for step in steps:
-    if st.button(step):
-        selected_step = step
-        break
-
-if selected_step:
-    st.markdown(f"<h2>{selected_step}</h2>", unsafe_allow_html=True)
-    st.markdown(f"<p style='font-size:1.1rem; text-align:center;'>{descriptions[selected_step]}</p>", unsafe_allow_html=True)
-
-st.markdown("<hr>", unsafe_allow_html=True)
-
-elif st.session_state["current_page"] == "Data Collection":
-    st.title(":bar_chart: Data Collection")
-    st.write("### Overview")
-    st.write(
-        "Data gathering is the process of collecting relevant data to solve a specific problem or achieve an objective."
-    )
-    st.markdown("""
-    #### Types of Data:
-    - **🟢 Structured Data**: Organized data with a predefined schema, such as databases, Excel sheets.
-    - **🟠 Semi-Structured Data**: Data that doesn't conform strictly to a schema but has organizational tags, like JSON or XML.
-    - **🔴 Unstructured Data**: Unorganized data such as images, audio, and videos without a specific format.
-    """)
+# Define HTML content for ML lifecycle
+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="#" class="button">Simple EDA</a>
+    <a href="#" class="button">Pre-Processing</a>
+    <a href="#" class="button">EDA</a>
+    <a href="#" class="button">Feature Engineering</a>
+    <a href="#" class="button">Model Training</a>
+    <a href="#" class="button">Testing</a>
+    <a href="#" class="button">Deployment</a>
+    <a href="#" class="button">Monitoring</a>
+    <div class="center"><strong>ML Lifecycle</strong></div>
+</div>
+"""
 
-    col1, col2, col3 = st.columns(3)
-    with col1:
-        if st.button("Structured Data"):
-            navigate_to("Structured Data")
-    with col2:
-        if st.button("Semi-Structured Data"):
-            navigate_to("Semi-Structured Data")
-    with col3:
-        if st.button("Unstructured Data"):
-            navigate_to("Unstructured Data")
+# Define pages
+params = st.experimental_get_query_params()
+current_page = params.get("page", ["main"])[0]
 
-    # Back to Main button
-    if st.button("Back to Main"):
-        navigate_to("Main")
+def main_page():
+    st.markdown("<h1>Machine Learning Lifecycle</h1>", unsafe_allow_html=True)
+    st.markdown(ml_lifecycle_html, unsafe_allow_html=True)
 
-elif st.session_state["current_page"] == "Structured Data":
-    st.title("🟢 Structured Data")
-    st.markdown("**Structured data** is highly organized and stored in a fixed format, making it easily searchable.")
-    st.markdown("### Examples of Structured Data")
-    st.markdown("""
-    - **Relational Databases**: Tables with rows and columns.
-    - **Spreadsheets**: Data stored in Excel format.
-    - **SQL Databases**: Structured query language (SQL) is used to manage and manipulate relational databases.
-    """)
-
-    st.markdown("### What is SQL?")
+def data_collection_page():
+    st.title("Data Collection")
     st.write("""
-    **SQL (Structured Query Language)** is a standardized programming language used to manage and manipulate relational databases.
-    It is the most widely used language for managing structured data, particularly in systems where data is stored in rows and columns.
-    """)
-
-    st.markdown("### Key Features of SQL:")
-    st.markdown("""
-    - **Data Querying**: Retrieve data from relational databases using the SELECT statement.
-    - **Data Manipulation**: Insert, update, and delete data in tables with the INSERT, UPDATE, and DELETE commands.
-    - **Data Definition**: Define and modify the structure of database tables (e.g., CREATE, ALTER).
-    - **Data Control**: Manage permissions and access to the database (e.g., GRANT, REVOKE).
+    ### What is Data?
+    Data refers to raw facts and figures that can be processed for generating insights. It can be categorized as:
+    - **Structured Data**
+    - **Semi-Structured Data**
+    - **Unstructured Data**
     """)
 
-    # Adding button for Excel and SQL data formats under Structured Data
-    col1, col2 = st.columns(2)
-    with col1:
-        if st.button("Excel"):
-            navigate_to("Excel Data Format")
-    with col2:
-        if st.button("SQL"):
-            navigate_to("SQL Data Format")
-
-    # Back to Types of Data button
-    if st.button("Back to Types of Data"):
-        navigate_to("Data Gathering")
-
-elif st.session_state["current_page"] == "Semi-Structured Data":
-    st.title("🟠 Semi-Structured Data")
-    st.write(
-        "Semi-structured data is partially organized and contains tags or markers to separate elements, but it does not adhere to a strict schema."
-    )
-    st.markdown("### Common Formats")
-    st.markdown("""
-    - **JSON**: Widely used for web APIs.
-    - **XML**: Common for document-based data.
-    - **CSV**: Commonly used for data storage with commas separating values (often used with JSON/XML for data interchange).
-    """)
-
-    # Adding buttons for JSON, XML, and CSV data formats under Semi-Structured Data
-    col1, col2, col3 = st.columns(3)
-    with col1:
-        if st.button("JSON"):
-            navigate_to("JSON Data Format")
-    with col2:
-        if st.button("XML"):
-            navigate_to("XML Data Format")
-    with col3:
-        if st.button("CSV"):
-            navigate_to("CSV Data Format")
-
-    # Back to Types of Data button
-    if st.button("Back to Types of Data"):
-        navigate_to("Data Gathering")
-
-elif st.session_state["current_page"] == "SQL Data Format":
-    st.title(":file_folder: SQL Data Format")
-    st.write("**SQL (Structured Query Language)** is used to query, update, and manage relational databases.")
-    st.markdown("### Common SQL Databases")
-    st.markdown("""
-    - **MySQL**: Open-source relational database management system.
-    - **PostgreSQL**: Advanced open-source relational database system.
-    - **SQLite**: Lightweight, file-based SQL database.
-    """)
+    # Buttons for different types of data
+    if st.button("Structured Data"):
+        st.session_state.data_type = "structured"
+    elif st.button("Semi-Structured Data"):
+        st.session_state.data_type = "semi_structured"
+    elif st.button("Unstructured Data"):
+        st.session_state.data_type = "unstructured"
+
+    if "data_type" in st.session_state:
+        if st.session_state.data_type == "structured":
+            st.subheader("Structured Data")
+            if st.button("Excel"):
+                st.write("""
+                ### Excel
+                - **What is it?** Spreadsheet software for storing tabular data.
+                - **How to read?** Use Python libraries like `pandas`:
+                ```python
+                import pandas as pd
+                df = pd.read_excel("file.xlsx")
+                ```
+                - **Common Issues:**
+                  - Large file sizes causing memory errors.
+                  - Formatting errors.
+                - **Solutions:**
+                  - Use lightweight libraries like `openpyxl`.
+                  - Pre-clean the data before analysis.
+                """)
+            elif st.button("CSV"):
+                st.write("""
+                ### CSV
+                - **What is it?** Comma-separated values for tabular data.
+                - **How to read?**
+                ```python
+                import pandas as pd
+                df = pd.read_csv("file.csv")
+                ```
+                - **Common Issues:**
+                  - Delimiter inconsistencies.
+                  - Missing values.
+                - **Solutions:**
+                  - Specify the `delimiter` parameter.
+                  - Use methods like `fillna` to handle missing values.
+                """)
+
+    if st.button("Back to Main Page"):
+        st.experimental_set_query_params(page="main")
+
+# Page routing
+if current_page == "data_collection":
+    data_collection_page()
+else:
+    main_page()
 
-    st.markdown("### Example SQL Query")
-    st.code(
-        """sql
-SELECT * FROM customers WHERE age > 30;
-""",
-        language="sql",
-    )
 
-    # Back to Structured Data button
-    if st.button("Back to Structured Data"):
-        navigate_to("Structured Data")