Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import pandas as pd | |
| st.set_page_config( | |
| page_title="HomePage", | |
| page_icon="🚀", | |
| layout="wide" | |
| ) | |
| # Global CSS for consistent styling across all pages | |
| st.markdown(""" | |
| <style> | |
| body, .stApp { | |
| color: #4F4F4F; /* Replace with your desired font color */ | |
| background-color: #FFFFFF; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| color: #BB3385; | |
| } | |
| p { | |
| color: #4F4F4F; | |
| } | |
| ul li { | |
| color: #4F4F4F; | |
| } | |
| </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 navigation | |
| if "current_page" not in st.session_state: | |
| st.session_state.current_page = "main" | |
| # 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> | |
| </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.""") | |
| # 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") | |
| ) | |
| 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) | |
| 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(""" | |
| 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") | |
| 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. | |
| """) | |
| st.markdown(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h4 style="color: #5b2c6f;">Characteristics:</h4> | |
| </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;">Examples:</h4> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.write(""" | |
| - **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. | |
| """) | |
| 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("Explore Images & Videos"): | |
| navigate_to("explore_images_video") | |
| if st.button("Explore Audio"): | |
| navigate_to("explore_audio") | |
| if st.button("Explore Text"): | |
| navigate_to("explore_text") | |
| 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) | |
| 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. | |
| 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. | |
| - Can store hierarchical relationships. | |
| """) | |
| 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("Explore CSV"): | |
| navigate_to("explore_csv") | |
| 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") | |
| # Pages for Each Format | |
| elif st.session_state.current_page == "explore_excel": | |
| st.markdown(""" | |
| <h3 style="color: #e25822;">Exploring Excel</h3> | |
| """, unsafe_allow_html=True) | |
| st.write(""" | |
| Excel is a structured data format used to store and analyze data in tabular form. It supports features like formulas, charts, and pivot tables. | |
| """) | |
| if st.button("Go Back"): | |
| navigate_to("main") | |
| elif st.session_state.current_page == "explore_images_video": | |
| st.markdown(""" | |
| <h1 style="color: #BB3385;">Introduction to Images📸🖼️</h1> | |
| """, unsafe_allow_html=True) | |
| st.markdown(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h2 style="color: #BB3385;">What is an Image?📊✨</h2> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| 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(""" | |
| Audio formats include MP3 and WAV for storing sound. | |
| """) | |
| if st.button("Go Back"): | |
| navigate_to("main") | |
| elif st.session_state.current_page == "explore_text": | |
| st.markdown(""" | |
| <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_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") | |
| elif st.session_state.current_page == "explore_json": | |
| st.markdown(""" | |
| <h3 style="color: #e25822;">Exploring JSON</h3> | |
| """, unsafe_allow_html=True) | |
| st.write(""" | |
| JSON is a semi-structured format used for APIs and data exchange. | |
| """) | |
| if st.button("Go Back"): | |
| navigate_to("main") | |
| 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") | |