Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import numpy as np | |
| import matplotlib.pyplot as plt | |
| 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(""" | |
| <h2 style="color: #BB3385;">Introduction to Images and Videos📸🖼️</h2> | |
| """, unsafe_allow_html=True) | |
| # Subheading 1: What is an Image? | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h3 style="color: #5b2c6f;">What is an Image?</h3> | |
| <p style="font-size: 16px; color: #333;"> | |
| An image is a two-dimensional representation of the visible light spectrum, often captured | |
| using devices like cameras or scanners. It can store details such as <strong>colors</strong>, <strong>shapes</strong>, and <strong>textures</strong>, | |
| enabling us to visually interpret and analyze information. | |
| Common formats include JPEG, PNG, and BMP. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Subheading 2: What is a Video? | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h3 style="color: #5b2c6f;">What is a Video?</h3> | |
| <p style="font-size: 16px; color: #333;"> | |
| A video is a collection of images, often referred to as frames, displayed one after another quickly | |
| to show continuous movement. Each frame captures a moment in time, and when these frames are played | |
| sequentially, they show continuous movement. Videos typically have a frame rate (e.g., 30 frames | |
| per second or 60 frames per second), which determines how many frames are displayed per second. | |
| Common video formats include MP4, AVI, and MOV. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Subheading 3: Why is an Image Called a Grid-Like Structure? | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h3 style="color: #5b2c6f;">Why is an Image Called a Grid-Like Structure?</h3> | |
| <p style="font-size: 16px; color: #333;"> | |
| Images are called <strong>grid-like structures</strong> because they are composed of <strong>pixels</strong> arranged in rows and columns, | |
| forming a rectangular grid. Each <strong>pixel</strong> contains information about <strong>shape</strong>, <strong>color</strong>, and <strong>patterns</strong>, which | |
| together define the image's content. | |
| The total number of <strong>pixels</strong> is determined by the image's height and width (resolution), and a higher resolution provides better clarity. | |
| </p> | |
| <p style="font-size: 16px; color: #333;"> | |
| In images, <strong>pixels</strong> act as features, and the entire grid represents a single data point. This combination | |
| of features and data points gives images their grid-like nature. | |
| </p> | |
| <p style="font-size: 16px; color: #333;"> | |
| While images and tabular data are both grid-like, the difference lies in interpretation: in images, the | |
| grid represents one data point, while in tabular data, rows represent data points, and columns represent features. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Interactive Pixel Grid Section | |
| st.subheader("Interactive Pixel Grid") | |
| # User Input for Height and Width | |
| height = st.number_input("Enter Image Height (pixels):", min_value=1, max_value=50, value=10, step=1) | |
| width = st.number_input("Enter Image Width (pixels):", min_value=1, max_value=50, value=10, step=1) | |
| # Display Resolution | |
| resolution = height * width | |
| st.write(f"**Image Resolution**: {resolution} pixels") | |
| # Generate and Display Pixel Grid | |
| st.write("**Pixel Grid Visualization:**") | |
| grid = np.random.rand(int(height), int(width)) # Generate random grid values | |
| fig, ax = plt.subplots() | |
| cax = ax.imshow(grid, cmap="Pastel1") | |
| plt.colorbar(cax, ax=ax) # Add color bar for context | |
| ax.set_title("Pixel Grid") | |
| ax.set_xlabel("Width(pixels)", fontsize=8) # Set smaller font size | |
| ax.set_ylabel("Height(pixels)", fontsize=8) # Set smaller font size | |
| # Render the Plot | |
| st.pyplot(fig) | |
| # Section: What are Color Spaces? | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h3 style="color: #5b2c6f;">What are Color Spaces?</h3> | |
| <p style="font-size: 16px; color: #333;"> | |
| A <strong>color space</strong> is a technique used to represent the <strong>colors of an image</strong> in a | |
| numerical format. It allows us to preserve the <strong>color information</strong> while converting it into a | |
| form that machines can understand. Since machines cannot <strong>"see"</strong> images as humans do, they interpret | |
| <strong>numerical values</strong>. Therefore, color spaces are crucial for converting images into a format | |
| that can be processed by a machine. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Section: Example of How ML Models Work with Images | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h4 style="color: #e25822;">For Example:</h4> | |
| <p style="font-size: 16px; color: #333;"> | |
| Imagine you're building a <strong>machine learning model</strong> to classify images of | |
| <strong>dogs and cats</strong>. You provide the model with images, but since the machine cannot understand | |
| images directly, you need to convert them into <strong>numerical data</strong>. This is where | |
| <strong>color spaces</strong> play a vital role. They help convert the <strong>color information</strong> in | |
| the images into numbers that the machine can process, allowing it to <strong>learn from the data</strong> | |
| and make accurate predictions. | |
| </p> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # Section: Common Color Spaces | |
| st.write(""" | |
| <div style="text-align: left; margin-top: 20px;"> | |
| <h4 style="color: #5b2c6f;">Common Color Spaces</h4> | |
| <p style="font-size: 16px; color: #333;"> | |
| These are some of the <strong>common color spaces</strong> used in <strong>image processing</strong>: | |
| </p> | |
| <ol style="font-size: 16px; color: #333;"> | |
| <li><strong>Black and White</strong></li> | |
| <li><strong>Grayscale</strong></li> | |
| <li><strong>Red, Green, Blue (RGB)</strong></li> | |
| </ol> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.subheader("What is Black and White Color Space?") | |
| st.write(""" | |
| Black and White color space, also known as binary color space, represents an image using only two colors: | |
| **black** and **white**. | |
| - **0** represents **black**. | |
| - **1** or **255** (depending on the encoding) represents **white**. | |
| Each pixel in this color space is either completely black or completely white. | |
| Black and White color space eliminates all color information, focusing entirely on light intensity. | |
| """) | |
| st.image( | |
| "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/pages/Screenshot%202024-12-23%20175703.png", | |
| caption="Black and White Color Space.", | |
| use_container_width=True) | |
| # Section: What is Grayscale Color Space? | |
| st.subheader("What is Grayscale Color Space?") | |
| st.write(""" | |
| Grayscale color space represents an image using different shades of gray, ranging from **black** to **white**. | |
| - **0** represents **black** (no light intensity). | |
| - **255** represents **white** (maximum light intensity). | |
| - Values between **0 and 255** represent varying shades of gray. | |
| Grayscale eliminates color information, focusing entirely on the intensity of light in an image. Each pixel has only one intensity value, making it a simpler and more compact representation compared to color images. | |
| """) | |
| # Create grayscale gradient with labeled intensity values | |
| gradient = np.linspace(0, 255, 256) # Generate gradient values | |
| gradient = np.tile(gradient, (10, 1)) # Repeat the gradient to make it visually clear | |
| # Plot the gradient | |
| fig, ax = plt.subplots(figsize=(8, 1), facecolor='none') # Reduce height by half | |
| ax.imshow(gradient, cmap='gray', aspect='auto') | |
| ax.set_xticks(np.linspace(0, 255, 11)) # Set ticks for every 25.5 (0, 25, ..., 255) | |
| ax.set_xticklabels([str(int(x)) for x in np.linspace(0, 255, 11)], fontsize=8, color='red') # Adjust font size | |
| ax.set_yticks([]) # Remove y-axis ticks | |
| ax.set_title("Grayscale Representation", fontsize=10) | |
| # Save the figure with a transparent background | |
| plt.savefig('grayscale_representation.png', transparent=True) | |
| # Render the plot in Streamlit | |
| st.pyplot(fig) | |
| st.image( | |
| "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/gray_scale.jpg", | |
| caption="Gray Scale Color Space.", | |
| use_container_width=True) | |
| st.subheader("What is RGB Color Space?") | |
| st.write(""" | |
| RGB color space represents an image using three primary colors: **Red**, **Green**, and **Blue**. These colors form the basis of digital images and can be combined in different intensities to create a wide range of colors. | |
| A colored image in the RGB color space is split into three separate channels: | |
| - **Red Channel**: Contains the intensity of the red color at each pixel. | |
| - **Green Channel**: Contains the intensity of the green color at each pixel. | |
| - **Blue Channel**: Contains the intensity of the blue color at each pixel. | |
| Each of these channels is represented as a **2D array**, where: | |
| - Each pixel in the 2D array contains a value ranging from **0** (no intensity) to **255** (maximum intensity) for that color. | |
| By combining the three channels, a wide range of colors can be formed. For example: | |
| - **(255, 0, 0)** represents pure **Red**. | |
| - **(0, 255, 0)** represents pure **Green**. | |
| - **(0, 0, 255)** represents pure **Blue**. | |
| - **(255, 255, 255)** represents **White**, where all channels are at maximum intensity. | |
| - **(0, 0, 0)** represents **Black**, where all channels have no intensity. | |
| - Combining colors, such as **Red + Green = Yellow**, **Green + Blue = Cyan**, and **Blue + Red = Magenta**, creates even more colors. By adjusting the intensity of each channel, millions of unique colors can be generated. | |
| Computers interpret RGB images as **3D arrays**: | |
| - The **width** and **height** of the 3D array correspond to the dimensions of the image. | |
| - The **depth** of the 3D array corresponds to the number of color channels. | |
| Altogether, these three channels combine to form a complete color image, enabling vibrant, precise, and dynamic representations of colors in digital media. | |
| """) | |
| st.image( | |
| "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_1.jpg", | |
| use_container_width=True) | |
| st.image( | |
| "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_2.jpg", | |
| use_container_width=True) | |
| st.image( | |
| "https://huggingface.co/spaces/LakshmiHarika/MachineLearning/resolve/main/Images/rgb_3.jpg", | |
| use_container_width=True) | |
| st.write(""" | |
| In the next section, we'll dive into the exciting world of **image processing using OpenCV**. We'll cover how to: | |
| - **Load, view, and edit images** using code. | |
| - Learn the **basic tools and techniques** used in computer vision. | |
| - Discover ways to **transform images and extract useful information**. | |
| Curious to see how?👇Click here to start your journey into OpenCV Basics!🚀 | |
| """) | |
| if st.button("Image Operations with OpenCV"): | |
| navigate_to("opencv_operations") | |
| # Go Back Button | |
| if st.button("Back to previous page"): | |
| navigate_to("main") | |
| # Navigation for OpenCV Operations Page | |
| elif st.session_state.current_page == "opencv_operations": | |
| # Page Title | |
| st.markdown(""" | |
| <h2 style="color: #BB3385;">Image Operations with OpenCV</h2> | |
| """, unsafe_allow_html=True) | |
| # Introduction to OpenCV | |
| st.write(""" | |
| OpenCV (Open Source Computer Vision Library) is a powerful library used for image processing and computer vision tasks. | |
| It provides various methods for handling images, such as reading, displaying, and modifying them. | |
| """) | |
| # Basic OpenCV Methods | |
| st.markdown(""" | |
| <h3 style="color: #e25822;">Basic Operations:</h3> | |
| """, unsafe_allow_html=True) | |
| st.write(""" | |
| - **`cv2.imread()`**: Reads an image from a file and returns it as a NumPy array. | |
| - **`cv2.imshow()`**: Displays an image in a window. | |
| - **`cv2.imwrite()`**: Saves an image to a specified file. | |
| - **`cv2.resize()`**: Resizes an image to the desired dimensions. | |
| - **`cv2.cvtColor()`**: Converts an image from one color space to another. | |
| """) | |
| # Example Code | |
| st.markdown(""" | |
| <h3 style="color: #5b2c6f;">Example Code:</h3> | |
| """) | |
| st.code(""" | |
| import cv2 | |
| # Read an image | |
| image = cv2.imread("path/to/your/image.jpg") | |
| # Display the image | |
| cv2.imshow("Image", image) | |
| cv2.waitKey(0) | |
| cv2.destroyAllWindows() | |
| # Save the image | |
| cv2.imwrite("output_image.jpg", image) | |
| # Resize the image | |
| resized_image = cv2.resize(image, (100, 100)) | |
| # Convert to grayscale | |
| gray_image = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY) | |
| """, language="python") | |
| # Go Back Button | |
| if st.button("Go Back to Home Page"): | |
| 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") | |