Update pages/Data Collection.py

pages/Data Collection.py

@@ -26,52 +26,39 @@ 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"
 
-# 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)
+# Function to navigate between pages
+def navigate_to(page_name):
+    st.session_state.current_page = page_name
 
-# 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.""")
+# Main Page
+if st.session_state.current_page == "main":
+    st.markdown("""
+        <div style="text-align: left; margin-top: 20px;">
+            <h2 style="color: #BB3385;">What is Data?\ud83d\udcca\u2728</h2>
+        </div>
+    """, unsafe_allow_html=True)
 
-# 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)
+    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.
+    """)
 
-# Radio Button for Data Type Selection
-data_type = st.radio(
-    "Select the type of Data:",
-    ("Structured Data", "Unstructured Data", "Semi-Structured Data")
-)
+    st.markdown("""
+        <div style="text-align: left; margin-top: 20px;">
+            <h2 style="color: #2a52be;">Types of Data</h2>
+        </div>
+    """, unsafe_allow_html=True)
 
-# Ensure session state is initialized
-if "explore_excel" not in st.session_state:
-    st.session_state.explore_excel = False
+    data_type = st.radio(
+        "Select the type of Data:",
+        ("Structured Data", "Unstructured Data", "Semi-Structured Data")
+    )
 
-# Main Structured Data Content
-if not st.session_state.explore_excel:
     if data_type == "Structured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
@@ -79,66 +66,57 @@ if not st.session_state.explore_excel:
             </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.
+        Click below to explore structured data formats:
         """)
 
+        if st.button("Explore Excel"):
+            navigate_to("explore_excel")
+
+    elif data_type == "Unstructured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
-                <h4 style="color: #5b2c6f;">Examples:</h4>
+                <h3 style="color: #e25822;">What is Unstructured Data?</h3>
             </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("""
-        A database of students with fields like ID, name, age, and gender:
+        Click below to explore unstructured data formats:
         """)
 
-        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)
+        if st.button("Explore Images"):
+            navigate_to("explore_images")
 
+    elif data_type == "Semi-Structured Data":
         st.markdown("""
             <div style="text-align: left; margin-top: 20px;">
-                <h4 style="color: #5b2c6f;">Data Formats in Structured Data:</h4>
+                <h3 style="color: #e25822;">What is Semi-Structured Data?</h3>
             </div>
         """, unsafe_allow_html=True)
 
-        st.write("Click to explore Structured Data Formats:")
-        if st.button("Structured Data Formats"):
-            st.write("Select a format to explore:")
+        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.
+        """)
 
-            # Sub-buttons for specific formats
-            col1, = st.columns(1)
+        st.write("""
+        Click below to explore semi-structured data formats:
+        """)
 
-            with col1:
-                if st.button("Explore Excel"):
-                    st.session_state.explore_excel = True
+        if st.button("Explore JSON"):
+            navigate_to("explore_json")
 
-# Excel Content Page
-if st.session_state.explore_excel:
+# Excel Page
+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>
@@ -146,25 +124,12 @@ if st.session_state.explore_excel:
     """, 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.
-        - Seamless integration with other software.
+    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.
     """)
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Why Learn Excel?</h4>
-        </div>
-    """, unsafe_allow_html=True)
-    st.write("""
-    - **Widely Used:** Excel is a powerful tool used across industries.
-    - **Versatile:** It supports data entry, visualization, and complex calculations.
-    - **Easy to Learn:** It has a user-friendly interface and a wealth of learning resources.
-    """)
-
-    # Add Excel file uploader and display content
     uploaded_file = st.file_uploader("Upload an Excel file", type=["xlsx", "xls"])
     if uploaded_file:
         try:
@@ -174,161 +139,45 @@ if st.session_state.explore_excel:
         except Exception as e:
             st.error("An error occurred while reading the file. Please ensure it is a valid Excel file.")
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Tips for Using Excel Effectively:</h4>
-        </div>
-    """, unsafe_allow_html=True)
-    st.write("""
-    - Use built-in functions like SUM, AVERAGE, and VLOOKUP to save time.
-    - Utilize conditional formatting for better data visualization.
-    - Leverage pivot tables to summarize and analyze large datasets.
-    """)
-
-    # Add a "Go Back" button
     if st.button("Go Back"):
-        st.session_state.explore_excel = False
-
-
-elif data_type == "Unstructured Data":
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">What is Unstructured 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)
-    st.write("""
-    **Unstructured data** refers to information that does not follow a predefined format or structure.
-    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.
-    """)
+        navigate_to("main")
 
+# Images Page
+elif st.session_state.current_page == "explore_images":
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Characteristics:</h4>
+            <h3 style="color: #e25822;">Exploring Images</h3>
         </div>
     """, unsafe_allow_html=True)
-    st.write("""
-    - Does not follow a specific schema or structure.
-    - Cannot be stored in traditional tabular formats like rows and columns.
-    - Requires advanced tools like machine learning or natural language processing (NLP) for analysis.
-    """)
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Example:</h4>
-        </div>
-    """, unsafe_allow_html=True)
     st.write("""
-    Examples of unstructured data include:
-    - **Images**: Photos, screenshots, or scanned documents.
-    - **Audio**: Podcasts, voice recordings, or music files.
-    - **Videos**: Recorded lectures, surveillance footage, or YouTube videos.
-    - **Text**: Emails, social media posts, and blog articles.
+    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.
     """)
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Data Formats in Unstructured Data:</h4>
-        </div>
-    """, unsafe_allow_html=True)
-
-    st.write("Click to explore Unstructured Data Formats:")
-    if st.button("Unstructured Data Formats"):
-        st.write("Select a format to explore:")
-
-        # Sub-buttons for specific formats
-        col1, col2, col3, col4 = st.columns(4)
-
-        with col1:
-            if st.button("Explore Images"):
-                st.write("Redirecting to Images page...")
-
-        with col2:
-            if st.button("Explore Audio"):
-                st.write("Redirecting to Audio page...")
-
-        with col3:
-            if st.button("Explore Video"):
-                st.write("Redirecting to Video page...")
-
-        with col4:
-            if st.button("Explore Text"):
-                st.write("Redirecting to Text page...")
-
-
-# Semi-Structured Data Section
-elif data_type == "Semi-Structured Data":
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h3 style="color: #e25822;">What is Semi-Structured Data?</h3>
-        </div>
-    """, unsafe_allow_html=True)
+    if st.button("Go Back"):
+        navigate_to("main")
 
+# JSON Page
+elif st.session_state.current_page == "explore_json":
     st.markdown("""
         <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Definition:</h4>
+            <h3 style="color: #e25822;">Exploring JSON</h3>
         </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.
-    This type of data is more flexible than structured data but still organized enough to allow for easier analysis than unstructured data.
-    """)
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Characteristics:</h4>
-        </div>
-    """, unsafe_allow_html=True)
     st.write("""
-    - Contains markers or tags (e.g., XML, JSON keys) to provide structure.
-    - More flexible than structured data, allowing for varying schemas.
-    - Easier to process than unstructured data.
+    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.
     """)
 
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Examples:</h4>
-        </div>
-    """, unsafe_allow_html=True)
-    st.write("""
-    Examples of semi-structured data include:
-    - **CSV**: Comma-separated values in plain-text files.
-    - **JSON**: A lightweight data-interchange format used in web applications.
-    - **XML**: Extensible Markup Language for structured document encoding.
-    - **HTML**: Markup language for web pages.
-    """)
-
-    st.markdown("""
-        <div style="text-align: left; margin-top: 20px;">
-            <h4 style="color: #5b2c6f;">Data Formats in Semi-Structured Data:</h4>
-        </div>
-    """, unsafe_allow_html=True)
-
-    st.write("Click to explore Semi-Structured Data Formats:")
-    if st.button("Semi-Structured Data Formats"):
-        st.write("Select a format to explore:")
-
-        # Sub-buttons for specific formats
-        col1, col2, col3, col4 = st.columns(4)
-
-        with col1:
-            if st.button("Explore CSV"):
-                st.write("Redirecting to CSV page...")
-
-        with col2:
-            if st.button("Explore JSON"):
-                st.write("Redirecting to JSON page...")
-
-        with col3:
-            if st.button("Explore XML"):
-                st.write("Redirecting to XML page...")
+    st.code("""
+    {
+        "name": "John Doe",
+        "age": 30,
+        "city": "New York"
+    }
+    """, language="json")
 
-        with col4:
-            if st.button("Explore HTML"):
-                st.write("Redirecting to HTML page...")
+    if st.button("Go Back"):
+        navigate_to("main")