Update pages/Data Collection.py

pages/Data Collection.py

@@ -1,11 +1,13 @@
 import streamlit as st
 import pandas as pd
 
+# Page configuration
 st.set_page_config(
     page_title="HomePage",
     page_icon="🚀",
     layout="wide"
 )
+
 # Global CSS for consistent styling across all pages
 st.markdown("""
     <style>
@@ -25,8 +27,7 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-st.markdown(
-    """
+st.markdown("""
     <style>
     .stApp {
         background-image: url("https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/DALL%C2%B7E%202024-12-03%2023.34.47%20-%20A%20simple%20and%20elegant%20background%20image%20for%20an%20AI-themed%20web%20application.%20The%20background%20should%20feature%20a%20soft%20gradient%20transitioning%20from%20white%20to%20ligh.webp");
@@ -35,94 +36,110 @@ st.markdown(
         background-attachment: fixed;
     }
     </style>
-    """,
-    unsafe_allow_html=True
-)
+""", unsafe_allow_html=True)
 
+# Page Title
 st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h2 style="color: #BB3385;">What is Data?📊✨</h2></div>""", unsafe_allow_html=True)
-
+    <div style="text-align: left; margin-top: 20px;">
+        <h2 style="color: #BB3385;">What is Data?📊✨</h2>
+    </div>
+""", unsafe_allow_html=True)
 
+# Introduction Text
 st.write("""
 **Data** is the measurements that are collected as a source of Information.
-It refers raw facts, figures, and observations that can be collected, stored, and processed. It has no meaning on its own until it is organized or analyzed to derive useful information.""")
-
+It refers to raw facts, figures, and observations that can be collected, stored, and processed.
+It has no meaning on its own until it is organized or analyzed to derive useful information.
+""")
 
+# Types of Data Section
 st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h2 style="color: #2a52be;">Types of Data</h2></div>""", unsafe_allow_html=True)
+    <div style="text-align: left; margin-top: 20px;">
+        <h2 style="color: #2a52be;">Types of Data</h2>
+    </div>
+""", unsafe_allow_html=True)
 
+# Radio Button for Data Type Selection
 data_type = st.radio(
     "Select the type of Data:",
-    ("Structured Data", "Unstructured Data", "Semi-Structured Data"))
+    ("Structured Data", "Unstructured Data", "Semi-Structured Data")
+)
 
+# Structured Data Section
 if data_type == "Structured Data":
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">What is Structured Data?</h3></div>""", unsafe_allow_html=True)
-    
+            <h3 style="color: #e25822;">What is Structured Data?</h3>
+        </div>
+    """, unsafe_allow_html=True)
+
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Definition:</h4></div>""", unsafe_allow_html=True)
+            <h4 style="color: #5b2c6f;">Definition:</h4>
+        </div>
+    """, unsafe_allow_html=True)
     st.write("""
     Structured data refers to information that is organized and formatted in a predefined manner, making it easy to store, retrieve, and analyze.
-
     It is typically stored in tabular formats like rows and columns, where each field contains a specific type of information.
     
     This type of data is often used in relational databases and spreadsheets, where relationships between data points are explicitly defined.
     """)
-    
+
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Characteristics:</h4></div>""", unsafe_allow_html=True)
+            <h4 style="color: #5b2c6f;">Characteristics:</h4>
+        </div>
+    """, unsafe_allow_html=True)
     st.write("""
     - Follows a fixed schema.
     - Can be easily searched using query languages like SQL.
     - Suitable for quantitative analysis.
     """)
-    
+
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Example:</h4></div>""", unsafe_allow_html=True)
+            <h4 style="color: #5b2c6f;">Example:</h4>
+        </div>
+    """, unsafe_allow_html=True)
     st.write("""
-    A database of students with fields like id, name, age, and gender:
+    A database of students with fields like ID, name, age, and gender:
     """)
-    
-    # Add a table for the Student database example
-    st.table({
-        "Id" : [100,101,102,103]
-        "Name": ["Lakshmi Harika", "Varshitha","Hari Chandan","Shamitha"],
-        "Age": [22, 23,22,23],
-        "Gender": ["Female", "Female", "Male","Female"]
-    })
 
-    table_style = """
+    # Corrected table for the Student database example
+    student_data = {
+        "Id": [100, 101, 102, 103],
+        "Name": ["Lakshmi Harika", "Varshitha", "Hari Chandan", "Shamitha"],
+        "Age": [22, 23, 22, 23],
+        "Gender": ["Female", "Female", "Male", "Female"]
+    }
+    df = pd.DataFrame(student_data)
+    st.table(df)
+
+# Additional CSS for the Table (Optional, if needed)
+st.markdown("""
     <style>
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            text-align: left;
-        }
-        th {
-            padding: 10px;
-            border: 1px solid #dddddd;
-            background-color: ffc87c; 
-            color: #000000;
-            text-align: center;
-        }
-        td:nth-child(1) {
-            font-weight: bold;
-        }
-        td {
-            padding: 10px;
-            border: 1px solid #dddddd;
-            vertical-align: top;
-        }
-        td:nth-child(2), td:nth-child(3) {
-            width: 40%;
-        }
+    table {
+        width: 100%;
+        border-collapse: collapse;
+        text-align: left;
+    }
+    th {
+        padding: 10px;
+        border: 1px solid #dddddd;
+        background-color: #ffc87c; 
+        color: #000000;
+        text-align: center;
+    }
+    td:nth-child(1) {
+        font-weight: bold;
+    }
+    td {
+        padding: 10px;
+        border: 1px solid #dddddd;
+        vertical-align: top;
+    }
+    td:nth-child(2), td:nth-child(3) {
+        width: 40%;
+    }
     </style>
-    """
-
-    
+""", unsafe_allow_html=True)