Update pages/Data Collection.py

pages/Data Collection.py

@@ -26,39 +26,57 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
+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");
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-attachment: fixed;
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+
 # Ensure session state for page tracking is initialized
 if "current_page" not in st.session_state:
     st.session_state.current_page = "main"
 
-# Function to navigate between pages
+# Navigation function
 def navigate_to(page_name):
     st.session_state.current_page = page_name
 
 # Main Page
 if st.session_state.current_page == "main":
+    # Page Title
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h2 style="color: #BB3385;">What is Data?</h2>
+            <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 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.
-    """)
+    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.""")
 
+    # 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)
 
+    # Radio Button for Data Type Selection
     data_type = st.radio(
         "Select the type of Data:",
         ("Structured Data", "Unstructured Data", "Semi-Structured Data")
     )
 
+    # Structured Data Content
     if data_type == "Structured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
@@ -66,17 +84,60 @@ if st.session_state.current_page == "main":
             </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)
         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.
+        """)
+
+        st.markdown("""
+            <div style="text-align: left; margin-top: 20px;">
+                <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;">Examples:</h4>
+            </div>
+        """, unsafe_allow_html=True)
         st.write("""
-        Click below to explore structured data formats:
+        A database of students with fields like ID, name, age, and gender:
         """)
 
+        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.markdown(df.style.set_table_styles(
+            [{'selector': 'thead th', 'props': 'font-weight: bold;'}]
+        ).hide(axis="index").to_html(), unsafe_allow_html=True)
+
+        st.markdown("""
+            <div style="text-align: left; margin-top: 20px;">
+                <h4 style="color: #5b2c6f;">Data Formats in Structured Data:</h4>
+            </div>
+        """, unsafe_allow_html=True)
+
+        st.write("Click to explore Structured Data Formats:")
         if st.button("Explore Excel"):
             navigate_to("explore_excel")
+        if st.button("Explore CSV"):
+            navigate_to("explore_csv")
 
+    # Unstructured Data Content
     elif data_type == "Unstructured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
@@ -84,18 +145,28 @@ if st.session_state.current_page == "main":
             </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)
         st.write("""
         **Unstructured data** refers to information that does not follow a predefined format or structure.
-        It includes raw data such as images, videos, audio, and social media posts.
-        """)
-
-        st.write("""
-        Click below to explore unstructured data formats:
+        It is typically raw data that lacks a clear, organized schema, making it harder to store and analyze using traditional tools.
+        Examples include multimedia files (images, videos, audio), emails, and social media posts.
         """)
 
+        st.write("Click to explore Unstructured Data Formats:")
         if st.button("Explore Images"):
             navigate_to("explore_images")
+        if st.button("Explore Audio"):
+            navigate_to("explore_audio")
+        if st.button("Explore Video"):
+            navigate_to("explore_video")
+        if st.button("Explore Text"):
+            navigate_to("explore_text")
 
+    # Semi-Structured Data Content
     elif data_type == "Semi-Structured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
@@ -103,81 +174,111 @@ if st.session_state.current_page == "main":
             </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)
         st.write("""
         **Semi-Structured data** refers to information that does not follow a strict tabular format but contains tags or markers to separate data elements.
-        Examples include JSON, XML, and CSV.
-        """)
-
-        st.write("""
-        Click below to explore semi-structured data formats:
+        This type of data is more flexible than structured data but still organized enough to allow for easier analysis than unstructured data.
         """)
 
+        st.write("Click to explore Semi-Structured Data Formats:")
         if st.button("Explore JSON"):
             navigate_to("explore_json")
+        if st.button("Explore XML"):
+            navigate_to("explore_xml")
+        if st.button("Explore HTML"):
+            navigate_to("explore_html")
 
-# Excel Page
+# Pages for Each Format
 elif st.session_state.current_page == "explore_excel":
     st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">Exploring Excel</h3>
-        </div>
+        <h3 style="color: #e25822;">Exploring Excel</h3>
     """, unsafe_allow_html=True)
-
     st.write("""
-    Excel is one of the most widely used tools for handling structured data. It supports features like:
-    - Tabular data representation.
-    - Complex computations using formulas.
-    - Data visualization with charts and graphs.
+    Excel is a tabular format used for structured data. Features include data storage, formulas, and charts.
     """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
-    uploaded_file = st.file_uploader("Upload an Excel file", type=["xlsx", "xls"])
-    if uploaded_file:
-        try:
-            df = pd.read_excel(uploaded_file)
-            st.write("Preview of the uploaded file:")
-            st.dataframe(df)
-        except Exception as e:
-            st.error("An error occurred while reading the file. Please ensure it is a valid Excel file.")
-
+elif st.session_state.current_page == "explore_csv":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring CSV</h3>
+    """, unsafe_allow_html=True)
+    st.write("""
+    CSV is a simple text-based format where data fields are separated by commas.
+    """)
     if st.button("Go Back"):
         navigate_to("main")
 
-# Images Page
 elif st.session_state.current_page == "explore_images":
     st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">Exploring Images</h3>
-        </div>
+        <h3 style="color: #e25822;">Exploring Images</h3>
     """, unsafe_allow_html=True)
+    st.write("""
+    Images are unstructured data used for visual representation, e.g., JPEG or PNG.
+    """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
+elif st.session_state.current_page == "explore_audio":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring Audio</h3>
+    """, unsafe_allow_html=True)
     st.write("""
-    Images are a form of unstructured data often used in visual applications like facial recognition and medical imaging.
-    Common formats include JPEG, PNG, and BMP.
+    Audio formats include MP3 and WAV for storing sound.
     """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
+elif st.session_state.current_page == "explore_video":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring Video</h3>
+    """, unsafe_allow_html=True)
+    st.write("""
+    Video formats include MP4 and AVI for multimedia storage.
+    """)
     if st.button("Go Back"):
         navigate_to("main")
 
-# JSON Page
-elif st.session_state.current_page == "explore_json":
+elif st.session_state.current_page == "explore_text":
     st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">Exploring JSON</h3>
-        </div>
+        <h3 style="color: #e25822;">Exploring Text</h3>
     """, unsafe_allow_html=True)
+    st.write("""
+    Text includes unstructured data like emails or plain-text files.
+    """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
+elif st.session_state.current_page == "explore_json":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring JSON</h3>
+    """, unsafe_allow_html=True)
     st.write("""
-    JSON (JavaScript Object Notation) is a lightweight data-interchange format often used in web applications.
-    It is easy for humans to read and write and easy for machines to parse and generate.
+    JSON is a semi-structured format used for APIs and data exchange.
     """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
-    st.code("""
-    {
-        "name": "John Doe",
-        "age": 30,
-        "city": "New York"
-    }
-    """, language="json")
+elif st.session_state.current_page == "explore_xml":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring XML</h3>
+    """, unsafe_allow_html=True)
+    st.write("""
+    XML uses tags to structure semi-structured data.
+    """)
+    if st.button("Go Back"):
+        navigate_to("main")
 
+elif st.session_state.current_page == "explore_html":
+    st.markdown("""
+        <h3 style="color: #e25822;">Exploring HTML</h3>
+    """, unsafe_allow_html=True)
+    st.write("""
+    HTML structures web pages using elements like <div> and <p>.
+    """)
     if st.button("Go Back"):
         navigate_to("main")