Update pages/8Model Training.py

pages/8Model Training.py

@@ -3,154 +3,161 @@ import numpy as np
 import matplotlib.pyplot as plt
 import pandas as pd
 
-# ✅ Only ONE set_page_config, at the top
+
 st.set_page_config(
     page_title="Model Building",
     page_icon="🚀",
-    layout="wide"
-)
+    layout="wide")
 
-# Optional navigation state (you can remove if unused here)
 if "current_page" not in st.session_state:
     st.session_state.current_page = "main"
 
 def navigate_to(page_name):
     st.session_state.current_page = page_name
 
-# ---------------------
-# 📘 Model Building Content Starts Here
-# ---------------------
 
 st.markdown("""
-    <h1 style="text-align: center; color: #BB3385;">🛠️ Model Building</h1>
+    <h1 style="text-align: center; color: #BB3385;">Model Building</h1>
     <p style="text-align: center; font-size: 18px;">Welcome to one of the most exciting parts of machine learning – teaching the machine how to learn!</p>
 """, unsafe_allow_html=True)
 
-# What is Training?
-st.markdown("## 🤖 So, What is Model Training?")
 st.markdown("""
-Imagine you're a teacher. You give your student (the machine) a bunch of examples and slowly help them learn from it. That’s exactly what model training is.
+    <h2 style='color:#9400d3;'>What is Model Training?</h2>
+    <p><strong>Model training</strong> is the process of teaching a machine learning model to understand patterns from data.</p>
 
-We give the machine:
-- Some data (like past examples)
-- A method to learn (called an algorithm)
+    <p>The model learns using:</p>
+    <ul>
+        <li><strong>Data</strong> – examples we already know the answers to</li>
+        <li><strong>Algorithm</strong> – a method that helps the model learn from the data</li>
+    </ul>
 
-Together, this helps the machine **learn patterns** so it can make decisions or predictions in the future.
-""")
+    <p>Once trained, the model can make predictions or decisions on new, unseen data.</p>
+""", unsafe_allow_html=True)
 
-# Who are we training?
-st.markdown("## 👨‍💻 Who are we actually training?")
 st.markdown("""
-We are not training a robot or a human.  
-We are training a **mathematical brain** – called a machine learning model.
+    <h3 style='color:#2a52be;'>For Example</h3>
+    <p>Think of yourself as a <strong>teacher</strong>, and the machine as a <strong>student</strong>.</p>
 
-You can think of this model like a **blank notebook**.  
-We (programmers) guide it using:
-- The data we have
-- The algorithm we choose
-""")
+    <p>You show your student several math problems (inputs) along with their answers (outputs). Over time, the student begins to recognize patterns and learns how to solve similar problems on their own.</p>
 
-# What is needed to train
-st.markdown("## 🧠 What does this model need to learn?")
-st.markdown("""
-Only two things:
-1. **Data** – this is like a textbook full of examples  
-2. **Algorithm** – the way the model reads and understands the data  
+    <p>That’s exactly what happens in model training:</p>
+    <ul>
+        <li>The <strong>machine is the student</strong></li>
+        <li>The <strong>data is the math problem</strong></li>
+        <li>The <strong>algorithm is the learning technique</strong></li>
+    </ul>
+
+    <p>After training, the model (student) is ready to solve new problems!</p>
+""", unsafe_allow_html=True)
 
-If the model is not learning properly, and we can’t fix the data, we usually try switching to a better algorithm.
-""")
 
-# Importance of preprocessing
-st.markdown("## 🧹 Why does Preprocessing Matter?")
 st.markdown("""
-Think of this like giving instructions to your student.  
-If you explain in a confusing way, they won’t understand.  
-That’s what happens when we **don’t preprocess the data properly**.
+    <h2 style='color:#9400d3;'>Who Are We Actually Training?</h2>
+    <p>We are training machines to learn — not robots or humans, but something called a <strong>machine learning model</strong>.</p>
+
+    <p>This model is like a smart system that doesn’t know anything in the beginning. It needs examples and a method to understand those examples.</p>
+
+    <p>As programmers, we guide the machine to learn by giving it:</p>
+    <ul>
+        <li>Data – the examples to learn from</li>
+        <li>An Algorithm – the way it should learn from those examples</li>
+    </ul>
+
+    <p>With the right guidance, the machine can learn how to make decisions on its own.</p>
+""", unsafe_allow_html=True)
 
-Good learning happens when:
-- Data is cleaned and clear
-- The algorithm matches the task
-""")
 
-# Choosing algorithm type
-st.markdown("## 🤔 Picking the Right Learning Style")
 st.markdown("""
-Before training, we first decide **how the machine should learn**.
+    <h2 style='color:#9400d3;'>What Does the Model Need to Learn?</h2>
+    <p>For a machine to learn, it needs just two important things:</p>
 
-We pick from 4 main types:
-- **Supervised** – learning from labeled data (like question + answer)
-- **Unsupervised** – learning without answers (just explore)
-- **Semi-supervised** – mix of both
-- **Reinforcement** – learn by doing (like in games)
+    <p><strong>First, it needs data</strong>. This is the information the machine looks at to understand how things work.</p>
+
+    <p><strong>Second, it needs an algorithm</strong>. This tells the machine how to learn from that data.</p>
+
+    <p>The machine follows the steps given by the algorithm to learn from the data. If the learning doesn’t go well, we usually don’t change the data. Instead, we try using a better algorithm that suits the data.</p>
+
+    <p>So, how we guide the machine using the algorithm is very important for its learning.</p>
+""", unsafe_allow_html=True)
 
-Most of the time, we start with **Supervised Learning**.
-""")
 
-# Inside Supervised
-st.markdown("## 🧭 Inside Supervised Learning – Classification vs Regression")
 st.markdown("""
-Now, if you’re using supervised learning, you still need to choose:
-- **Classification** if your answer is a category (like “Spam” or “Not Spam”)
-- **Regression** if your answer is a number (like “House Price = $250,000”)
+    <h2 style='color:#9400d3;'>Picking the Right Learning Style</h2>
+    <p>Now that the data is ready, we need to choose how the machine should learn from it.</p>
+
+    <p>There are different learning styles, just like there are different ways people learn.</p>
 
-Choose based on your problem.
+- **Supervised** – learning from labeled data
+- **Unsupervised** – learning without answers 
+- **Semi-supervised** – mix of both
+- **Reinforcement** – learn by doing
 """)
 
-# Data Representation
-st.markdown("## 🧾 How Do We Represent Data to the Model?")
 st.markdown("""
-We write the data in a format the machine understands.  
+    <p>In supervised learning, there are two main types of tasks — classification and regression. Let’s understand the difference in a simple way.</p>
 
-It usually looks like this:
+    <p><strong>Classification</strong> is used when we want the machine to predict a category or a group.</p>
+    <p>For example, the output could be something like "Yes" or "No", or it could be types like "Apple", "Banana", or "Orange".</p>
 
-**D = {(xi, yi)}**
+    <p><strong>Regression</strong> is used when we want the machine to predict a number or a value.</p>
+    <p>The output could be something like a price, a temperature, or a score.</p>
 
-- **xi** is the input (like sepal length, petal width)
-- **yi** is the output (like species of flower)
+    <p>So, the choice depends on what kind of answer we expect — a category or a number.</p>
+
+    <p>Both are powerful, and which one you use depends on the kind of problem you're solving.</p>
+""", unsafe_allow_html=True)
 
-If yi is a category → it’s **classification**  
-If yi is a number → it’s **regression**
-""")
 
-# Preparing data
-st.markdown("## 📋 Preparing Data Before Training")
 st.markdown("""
-Let’s say we already have cleaned, tabular data. Here’s what we do:
+    <h2 style='color:#9400d3;'>How Do We Represent Data to the Model?</h2>
+    <p>When we train a machine learning model, we need to give the data in a proper structure that the model understands.</p>
 
-- First, find out the **features** (inputs) and the **target** (output).
-- For example, in the Iris dataset:
-  - Features = sepal length, petal length, etc.
-  - Target = species of flower
-""")
+    <p>We usually write it like this:</p>
 
-# Train-test split
-st.markdown("## ✂️ Splitting the Data")
-st.markdown("""
-We don’t train on all data.  
+    <p><strong>D = { (xi, yi) }</strong></p>
 
-We split it into:
-- **Training Set** – the data we use to teach the model
-- **Testing Set** – the data we use to check how well the model learned
+    <p>This simply means we have a group of data points. Each data point has two parts:</p>
 
-This is like:
-- Studying from textbooks (training)
-- Writing a test paper (testing)
+    <p><strong>xi</strong> is the input — the information we give to the model.</p>
+    <p><strong>yi</strong> is the output — the result we want the model to learn or predict.</p>
 
-We usually split in ratios like 80:20 or 70:30.
+    <p>For example:</p>
+    <ul>
+        <li>If the output is a label or category, then it's a classification problem.</li>
+        <li>If the output is a number, then it's a regression problem.</li>
+    </ul>
 
-And remember:
-- No overlap between training and testing data
-- Each data point should have equal chance to be in either group
-""")
+    <p>This is how we prepare the data so the model can start learning from it.</p>
+""", unsafe_allow_html=True)
 
-# Naming convention
-st.markdown("## 🧾 Naming Things After Split")
 st.markdown("""
-We usually use:
+    <h2 style='color:#9400d3;'>Preparing the Data Before Training</h2>
+    <p>Before we train a model, we need to prepare our data in the right way.</p>
 
-- `X_train`, `y_train` → features and labels for training  
-- `X_test`, `y_test` → features and labels for testing
-""")
+    <p>Every dataset has two parts:</p>
+    <ul>
+        <li><strong>Features</strong>: These are the inputs. They are the columns that help us make predictions.</li>
+        <li><strong>Target</strong> (or label): This is the output. It is the column we want the machine to learn and predict.</li>
+    </ul>
+
+    <p>We first separate the features and the target from the dataset. This helps the machine understand what to learn from and what to predict.</p>
+
+    <p>This step is important because the machine needs to know what to look at (features) and what result to learn (target).</p>
+""", unsafe_allow_html=True)
+
+st.markdown("""
+    <h2 style='color:#9400d3;'>✂️ Splitting the Data</h2>
+    <p>Once we separate the features and the target, the next step is to split the data into two parts:</p>
+
+    <p><strong>One part is for training the model</strong>. This is the data the machine will use to learn.</p>
+
+    <p><strong>The other part is for testing the model</strong>. This helps us check if the model has really learned well or just memorized things.</p>
+
+    <p>Most of the time, a larger portion of the data is kept for training and a smaller portion for testing. Some common splits are 80% training and 20% testing, or 70% training and 30% testing. In some cases, 60% training and 40% testing is also used.</p>
+
+    <p>The data should be split randomly so that each data point has an equal chance of being selected. Also, the same data point should not appear in both the training and testing sets.</p>
+
+    <p>After the split, the input and output values for training are called X_train and y_train. The input and output values for testing are called X_test and y_test.</p>
 
-# Closing Note
-st.success("🎯 That’s it! You’ve just learned the entire background of how machines get trained. In the next part, we’ll see it in action with a real model.")
+    <p>This step is important because it helps check how well the model performs on new data that was not used during training.</p>
+""", unsafe_allow_html=True)