Spaces:

koulsahil
/

LandCover_Classification

Sleeping

Update app.py

ddd6ce2 verified over 1 year ago

13.6 kB

import streamlit as st
from PIL import Image
import numpy as np
import tensorflow as tf
from tensorflow.keras.models import load_model
import io
import random
import time
from huggingface_hub import hf_hub_download

# Load model from Hugging Face Model Hub
model_path = hf_hub_download(repo_id="koulsahil/LandCoverClassification_EuroSat", filename="eurosat_rgb_model.h5")
model = tf.keras.models.load_model(model_path)


# Define the class labels (replace with your EuroSAT classes)
class_labels = [
    "AnnualCrop", "Forest", "HerbaceousVegetation", "Highway", "Industrial",
    "Pasture", "PermanentCrop", "Residential", "River", "SeaLake"
]

# Function to preprocess the image for the model
def preprocess_image(image):
    # Convert image to RGB if it has an alpha channel (4 channels)
    if image.mode == 'RGBA':
        image = image.convert('RGB')
    image = image.resize((64, 64))  # Resize to match EuroSAT input size
    image = np.array(image) / 255.0  # Normalize pixel values
    image = np.expand_dims(image, axis=0)  # Add batch dimension
    return image

# Function to make predictions
def predict(image):
    processed_image = preprocess_image(image)
    predictions = model.predict(processed_image)
    predicted_class = class_labels[np.argmax(predictions)]
    confidence = np.max(predictions)
    return predicted_class, confidence



def create_map_animation():
    st.markdown("""
    <div class="map-container">
        <div class="sun"></div>
        <div class="cloud cloud1"></div>
        <div class="cloud cloud2"></div>
        <div class="moving-car car1"></div>
        <div class="moving-car car2"></div>
    </div>
    <style>
    .map-container {
        position: relative;
        height: 400px;
        width: 100%;
        background: #87CEEB;
        border-radius: 10px;
        overflow: hidden;
        margin: 20px 0;
        border: 2px solid #4682B4;
    }
    /* Sun */
    .sun {
        position: absolute;
        top: 20px;
        right: 30px;
        width: 50px;
        height: 50px;
        background: #FFD700;
        border-radius: 50%;
        animation: sunGlow 2s ease-in-out infinite;
    }
    .sun::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border: 4px solid #FFD700;
        border-radius: 50%;
        animation: sunPulse 2s ease-out infinite;
    }
    /* Clouds */
    .cloud {
        position: absolute;
        background: white;
        border-radius: 20px;
        animation: cloudFloat 20s linear infinite;
    }
    .cloud1 {
        top: 80px;
        left: -100px;
        width: 80px;
        height: 30px;
        animation-delay: 2s;
    }
    .cloud1::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 10px;
        width: 40px;
        height: 40px;
        background: white;
        border-radius: 50%;
    }
    .cloud2 {
        top: 120px;
        left: -100px;
        width: 100px;
        height: 35px;
        animation-delay: 5s;
    }
    .cloud2::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 15px;
        width: 50px;
        height: 50px;
        background: white;
        border-radius: 50%;
    }
    /* Cars */
    .moving-car {
        position: absolute;
        bottom: 30px;
        width: 40px;
        height: 20px;
        border-radius: 5px;
        animation: drive 8s linear infinite;
    }
    .car1 {
        left: -50px;
        background: #FF4757;
        animation-delay: 1s;
    }
    .car2 {
        left: -50px;
        background: #2ED573;
        animation-delay: 3s;
    }
    .moving-car::after, .moving-car::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #333;
        border-radius: 50%;
        bottom: -5px;
    }
    .moving-car::after { left: 5px; }
    .moving-car::before { right: 5px; }
    /* Animations */
    @keyframes sunGlow {
        0%, 100% { box-shadow: 0 0 20px #FFD700; }
        50% { box-shadow: 0 0 40px #FFD700; }
    }
    @keyframes sunPulse {
        0% { transform: scale(1); opacity: 0.5; }
        100% { transform: scale(1.5); opacity: 0; }
    }
    @keyframes cloudFloat {
        0% { transform: translateX(0); }
        100% { transform: translateX(1200px); }
    }
    @keyframes drive {
        0% { transform: translateX(0); }
        100% { transform: translateX(1200px); }
    }
    </style>
    """, unsafe_allow_html=True)




# Set the page title and favicon (emoji as the icon)
st.set_page_config(
    page_title="Land Cover Classification",  # Title of the app
    page_icon="🌍",  # Use the world emoji as the icon
)





# Custom CSS for styling
st.markdown("""
<style>
    .stButton button {
        background-color: #4CAF50;
        color: white;
        border-radius: 5px;
        padding: 10px 20px;
        font-size: 16px;
    }
    .stButton button:hover {
        background-color: #45a049;
    }
    .stProgress > div > div > div {
        background-color: #4CAF50;
    }
    .stMarkdown h1 {
        color: #4CAF50;
    }
    .stMarkdown h2 {
        color: #2E86C1;
    }
    .upload-section {
        height: 150px; /* Increase the height of the upload section */
    }
    .thumbnail {
        cursor: pointer;
        border: 2px solid transparent;
        transition: border 0.3s ease;
        margin: 5px;
    }
    .thumbnail:hover {
        border: 2px solid #4CAF50;
    }
</style>
""", unsafe_allow_html=True)

# Sidebar for project information
import streamlit as st

with st.sidebar:
    st.title("About the Project 🌍")
    st.write("""
    Hi, I’m **Sahil!** I built this web app to classify satellite images using Neural Networks,
    This app leverages a **custom VGG16 deep learning model** trained on the **EuroSAT dataset** to classify land cover types in satellite images. 
    The EuroSAT dataset is a collection of **27,000 labeled satellite images** covering **10 distinct land cover classes**, such as forests, crops, industrial areas, and water bodies. 
    ### How to Use:
    1. **Select an Image**:
       - Drag and drop one of the **sample image thumbnails** to the upload section to quickly test the model.
       - Or use the dropdown menu to choose from a list of sample images, or click the select random button to choose a random image from the list.
       - Alternatively, **upload your own satellite image** by dragging and dropping it into the upload section.
    2. **Make a Prediction**:
       - Once an image is selected or uploaded, the model will automatically analyze it and display the **predicted land cover type** along with a **confidence score**.
    3. **Interpret the Results**:
       - The app will show the **top predicted class** and its confidence level.
       - You can also view the **top 3 predictions** to understand the model's certainty across multiple classes.
    ### GitHub Repository:
    Explore the code, dataset, and model training process on GitHub:  
    [GitHub Repository](https://koulmesahil.github.io/) | [LinkedIn](https://www.linkedin.com/in/sahilkoul123/)
    """)

# Main layout
st.title("Land Cover Classification from Satellite Images ")
create_map_animation()
st.write("🖼️📸 Drag and drop one of the thumbnails below, select a random image from the dropdown, or upload your own image to classify its land cover type.🌍")

# Define sample images
sample_images = {
    "Highway": "sample_images/Highway_1004.jpg",
    "Annual Crop": "sample_images/AnnualCrop_102.jpg",
    "Forest": "sample_images/Forest_1019.jpg",
    "Herbaceous Vegetation": "sample_images/HerbaceousVegetation_1024.jpg",
    "Industrial": "sample_images/Industrial_1015.jpg",
    "Pasture": "sample_images/Pasture_1023.jpg",
    "Sea Lake": "sample_images/SeaLake_1017.jpg",
    "River": "sample_images/River_1014.jpg",
    "Permenant Crop": "sample_images/PermanentCrop_1004.jpg",
    "Residential": "sample_images/Residential_1019.jpg",
    # Add more sample images here
}

# Thumbnail Section
st.write("### Sample Image Thumbnails")
cols = st.columns(len(sample_images))  # Create columns for thumbnails
for idx, (label, image_path) in enumerate(sample_images.items()):
    with cols[idx]:
        # Display the thumbnail
        image = Image.open(image_path)
        image.thumbnail((100, 100))  # Resize the image to a smaller thumbnail

        st.image(image, use_container_width=True, caption=None)


# Dropdown menu for sample images
#st.write("### Select an Image from Dropdown")
selected_image_label = st.selectbox("Choose a category to view a random image:", ["Pick a category"] + list(sample_images.keys()))

if selected_image_label != "Pick a category":
    image_path = sample_images[selected_image_label]
    with open(image_path, "rb") as file:
        uploaded_file = file.read()
    st.session_state.uploaded_file = uploaded_file
    st.session_state.selected_image_label = selected_image_label


# Add a "Select Random" button
if st.button("Random Selection"):
    random_label, random_image_path = random.choice(list(sample_images.items()))
    with open(random_image_path, "rb") as file:
        uploaded_file = file.read()
    st.session_state.uploaded_file = uploaded_file
    st.session_state.selected_image_label = random_label
    st.success(f"Randomly selected image: **{random_label}**")


# JavaScript & CSS to dynamically change the border color
st.markdown(
    """
    <style>
        /* Base styling for the upload box */
        div.stFileUploader {
            height: 250px !important;
            width: 100% !important;
            border: 3px dashed grey !important;
            padding: 40px !important;
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
        }
        /* Upload text styling */
        div.stFileUploader > label {
            font-size: 20px !important;
            font-weight: bold !important;
            color: grey !important;
            text-align: center !important;
        }
        /* JavaScript to change colors dynamically */
        <script>
            function updateUploaderColor() {
                var uploader = document.querySelector("div.stFileUploader");
                if (uploader && uploader.querySelector("input").files.length > 0) {
                    uploader.style.borderColor = "#4CAF50";
                    uploader.style.color = "#4CAF50";
                } else {
                    uploader.style.borderColor = "grey";
                    uploader.style.color = "grey";
                }
            }
            
            document.addEventListener("DOMContentLoaded", function() {
                var fileInput = document.querySelector("div.stFileUploader input");
                if (fileInput) {
                    fileInput.addEventListener("change", updateUploaderColor);
                }
            });
        </script>
    </style>
    """,
    unsafe_allow_html=True,
)

st.write("### Upload Your Image")
uploaded_file = st.file_uploader(
    "Drag and drop an image here",
    type=["jpg", "jpeg", "png"],
    key="uploader",
    accept_multiple_files=False,
    help="Upload an image to classify its land cover type."
)

if uploaded_file:
    st.markdown(
        """
        <style>
            div.stFileUploader {
                border-color: #4CAF50 !important;
                color: #4CAF50 !important;
            }
        </style>
        """,
        unsafe_allow_html=True,
    )

# Display the uploaded/selected image and make predictions
if uploaded_file is not None:
    try:
        file_type = uploaded_file.type
        if file_type not in ["image/jpeg", "image/png"]:
            st.error("Unsupported file type. Please upload a JPG or PNG image.")
        else:
            image = Image.open(uploaded_file)
            st.session_state.uploaded_file = uploaded_file.getvalue()
            st.session_state.selected_image_label = "Uploaded Image"
    except Exception as e:
        st.error(f"Error loading image: {e}")


# Display the uploaded/selected image and make predictions
if "uploaded_file" in st.session_state:
    image = Image.open(io.BytesIO(st.session_state.uploaded_file))

    # Display the image with a smaller size
    st.image(image, caption=f"Selected Image: {st.session_state.selected_image_label}", width=300)
    
    # Show balloons effect after the prediction is done
    with st.spinner("Analyzing the image..."):
        time.sleep(1)  # Simulate processing delay
        predicted_class, confidence = predict(image)
        st.balloons()  # Display balloons when prediction is complete

    # Display the prediction results in a more prominent section
    st.markdown("## Prediction Results")
    st.success(f"**Predicted Class:** {predicted_class}")
    st.info(f"**Confidence:** {confidence * 100:.2f}%")
    
    # Visualize confidence as a progress bar with a label
    st.markdown("**Confidence Level:**")
    st.progress(float(confidence))
    
    # Show top 3 predictions
    st.markdown("### Top 3 Predictions")
    processed_image = preprocess_image(image)
    predictions = model.predict(processed_image)
    top_indices = np.argsort(predictions[0])[-3:][::-1]  # Get top 3 predictions
    for i in top_indices:
        st.write(f"- **{class_labels[i]}**: {predictions[0][i] * 100:.2f}%")



# Footer
st.markdown("---")
st.markdown("""
[GitHub Repository](https://koulmesahil.github.io/) | [LinkedIn](https://www.linkedin.com/in/sahilkoul123/)
""")

	import streamlit as st
	from PIL import Image
	import numpy as np
	import tensorflow as tf
	from tensorflow.keras.models import load_model
	import io
	import random
	import time
	from huggingface_hub import hf_hub_download

	# Load model from Hugging Face Model Hub
	model_path = hf_hub_download(repo_id="koulsahil/LandCoverClassification_EuroSat", filename="eurosat_rgb_model.h5")
	model = tf.keras.models.load_model(model_path)


	# Define the class labels (replace with your EuroSAT classes)
	class_labels = [
	"AnnualCrop", "Forest", "HerbaceousVegetation", "Highway", "Industrial",
	"Pasture", "PermanentCrop", "Residential", "River", "SeaLake"
	]

	# Function to preprocess the image for the model
	def preprocess_image(image):
	# Convert image to RGB if it has an alpha channel (4 channels)
	if image.mode == 'RGBA':
	image = image.convert('RGB')
	image = image.resize((64, 64)) # Resize to match EuroSAT input size
	image = np.array(image) / 255.0 # Normalize pixel values
	image = np.expand_dims(image, axis=0) # Add batch dimension
	return image

	# Function to make predictions
	def predict(image):
	processed_image = preprocess_image(image)
	predictions = model.predict(processed_image)
	predicted_class = class_labels[np.argmax(predictions)]
	confidence = np.max(predictions)
	return predicted_class, confidence



	def create_map_animation():
	st.markdown("""
	<div class="map-container">
	<div class="sun"></div>
	<div class="cloud cloud1"></div>
	<div class="cloud cloud2"></div>
	<div class="moving-car car1"></div>
	<div class="moving-car car2"></div>
	</div>

	<style>
	.map-container {
	position: relative;
	height: 400px;
	width: 100%;
	background: #87CEEB;
	border-radius: 10px;
	overflow: hidden;
	margin: 20px 0;
	border: 2px solid #4682B4;
	}

	/* Sun */
	.sun {
	position: absolute;
	top: 20px;
	right: 30px;
	width: 50px;
	height: 50px;
	background: #FFD700;
	border-radius: 50%;
	animation: sunGlow 2s ease-in-out infinite;
	}

	.sun::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	border: 4px solid #FFD700;
	border-radius: 50%;
	animation: sunPulse 2s ease-out infinite;
	}

	/* Clouds */
	.cloud {
	position: absolute;
	background: white;
	border-radius: 20px;
	animation: cloudFloat 20s linear infinite;
	}

	.cloud1 {
	top: 80px;
	left: -100px;
	width: 80px;
	height: 30px;
	animation-delay: 2s;
	}

	.cloud1::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 10px;
	width: 40px;
	height: 40px;
	background: white;
	border-radius: 50%;
	}

	.cloud2 {
	top: 120px;
	left: -100px;
	width: 100px;
	height: 35px;
	animation-delay: 5s;
	}

	.cloud2::before {
	content: "";
	position: absolute;
	top: -15px;
	left: 15px;
	width: 50px;
	height: 50px;
	background: white;
	border-radius: 50%;
	}

	/* Cars */
	.moving-car {
	position: absolute;
	bottom: 30px;
	width: 40px;
	height: 20px;
	border-radius: 5px;
	animation: drive 8s linear infinite;
	}

	.car1 {
	left: -50px;
	background: #FF4757;
	animation-delay: 1s;
	}

	.car2 {
	left: -50px;
	background: #2ED573;
	animation-delay: 3s;
	}

	.moving-car::after, .moving-car::before {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #333;
	border-radius: 50%;
	bottom: -5px;
	}

	.moving-car::after { left: 5px; }
	.moving-car::before { right: 5px; }

	/* Animations */
	@keyframes sunGlow {
	0%, 100% { box-shadow: 0 0 20px #FFD700; }
	50% { box-shadow: 0 0 40px #FFD700; }
	}

	@keyframes sunPulse {
	0% { transform: scale(1); opacity: 0.5; }
	100% { transform: scale(1.5); opacity: 0; }
	}

	@keyframes cloudFloat {
	0% { transform: translateX(0); }
	100% { transform: translateX(1200px); }
	}

	@keyframes drive {
	0% { transform: translateX(0); }
	100% { transform: translateX(1200px); }
	}
	</style>
	""", unsafe_allow_html=True)




	# Set the page title and favicon (emoji as the icon)
	st.set_page_config(
	page_title="Land Cover Classification", # Title of the app
	page_icon="🌍", # Use the world emoji as the icon
	)





	# Custom CSS for styling
	st.markdown("""
	<style>
	.stButton button {
	background-color: #4CAF50;
	color: white;
	border-radius: 5px;
	padding: 10px 20px;
	font-size: 16px;
	}
	.stButton button:hover {
	background-color: #45a049;
	}
	.stProgress > div > div > div {
	background-color: #4CAF50;
	}
	.stMarkdown h1 {
	color: #4CAF50;
	}
	.stMarkdown h2 {
	color: #2E86C1;
	}
	.upload-section {
	height: 150px; /* Increase the height of the upload section */
	}
	.thumbnail {
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s ease;
	margin: 5px;
	}
	.thumbnail:hover {
	border: 2px solid #4CAF50;
	}
	</style>
	""", unsafe_allow_html=True)

	# Sidebar for project information
	import streamlit as st

	with st.sidebar:
	st.title("About the Project 🌍")
	st.write("""
	Hi, I’m Sahil! I built this web app to classify satellite images using Neural Networks,
	This app leverages a custom VGG16 deep learning model trained on the EuroSAT dataset to classify land cover types in satellite images.
	The EuroSAT dataset is a collection of 27,000 labeled satellite images covering 10 distinct land cover classes, such as forests, crops, industrial areas, and water bodies.


	### How to Use:
	1. Select an Image:
	- Drag and drop one of the sample image thumbnails to the upload section to quickly test the model.
	- Or use the dropdown menu to choose from a list of sample images, or click the select random button to choose a random image from the list.
	- Alternatively, upload your own satellite image by dragging and dropping it into the upload section.
	2. Make a Prediction:
	- Once an image is selected or uploaded, the model will automatically analyze it and display the predicted land cover type along with a confidence score.
	3. Interpret the Results:
	- The app will show the top predicted class and its confidence level.
	- You can also view the top 3 predictions to understand the model's certainty across multiple classes.


	### GitHub Repository:
	Explore the code, dataset, and model training process on GitHub:
	[GitHub Repository](https://koulmesahil.github.io/) \| [LinkedIn](https://www.linkedin.com/in/sahilkoul123/)
	""")

	# Main layout
	st.title("Land Cover Classification from Satellite Images ")
	create_map_animation()
	st.write("🖼️📸 Drag and drop one of the thumbnails below, select a random image from the dropdown, or upload your own image to classify its land cover type.🌍")

	# Define sample images
	sample_images = {
	"Highway": "sample_images/Highway_1004.jpg",
	"Annual Crop": "sample_images/AnnualCrop_102.jpg",
	"Forest": "sample_images/Forest_1019.jpg",
	"Herbaceous Vegetation": "sample_images/HerbaceousVegetation_1024.jpg",
	"Industrial": "sample_images/Industrial_1015.jpg",
	"Pasture": "sample_images/Pasture_1023.jpg",
	"Sea Lake": "sample_images/SeaLake_1017.jpg",
	"River": "sample_images/River_1014.jpg",
	"Permenant Crop": "sample_images/PermanentCrop_1004.jpg",
	"Residential": "sample_images/Residential_1019.jpg",
	# Add more sample images here
	}

	# Thumbnail Section
	st.write("### Sample Image Thumbnails")
	cols = st.columns(len(sample_images)) # Create columns for thumbnails
	for idx, (label, image_path) in enumerate(sample_images.items()):
	with cols[idx]:
	# Display the thumbnail
	image = Image.open(image_path)
	image.thumbnail((100, 100)) # Resize the image to a smaller thumbnail

	st.image(image, use_container_width=True, caption=None)


	# Dropdown menu for sample images
	#st.write("### Select an Image from Dropdown")
	selected_image_label = st.selectbox("Choose a category to view a random image:", ["Pick a category"] + list(sample_images.keys()))

	if selected_image_label != "Pick a category":
	image_path = sample_images[selected_image_label]
	with open(image_path, "rb") as file:
	uploaded_file = file.read()
	st.session_state.uploaded_file = uploaded_file
	st.session_state.selected_image_label = selected_image_label


	# Add a "Select Random" button
	if st.button("Random Selection"):
	random_label, random_image_path = random.choice(list(sample_images.items()))
	with open(random_image_path, "rb") as file:
	uploaded_file = file.read()
	st.session_state.uploaded_file = uploaded_file
	st.session_state.selected_image_label = random_label
	st.success(f"Randomly selected image: {random_label}")


	# JavaScript & CSS to dynamically change the border color
	st.markdown(
	"""
	<style>
	/* Base styling for the upload box */
	div.stFileUploader {
	height: 250px !important;
	width: 100% !important;
	border: 3px dashed grey !important;
	padding: 40px !important;
	border-radius: 10px;
	transition: all 0.3s ease-in-out;
	}

	/* Upload text styling */
	div.stFileUploader > label {
	font-size: 20px !important;
	font-weight: bold !important;
	color: grey !important;
	text-align: center !important;
	}

	/* JavaScript to change colors dynamically */
	<script>
	function updateUploaderColor() {
	var uploader = document.querySelector("div.stFileUploader");
	if (uploader && uploader.querySelector("input").files.length > 0) {
	uploader.style.borderColor = "#4CAF50";
	uploader.style.color = "#4CAF50";
	} else {
	uploader.style.borderColor = "grey";
	uploader.style.color = "grey";
	}
	}

	document.addEventListener("DOMContentLoaded", function() {
	var fileInput = document.querySelector("div.stFileUploader input");
	if (fileInput) {
	fileInput.addEventListener("change", updateUploaderColor);
	}
	});
	</script>
	</style>
	""",
	unsafe_allow_html=True,
	)

	st.write("### Upload Your Image")
	uploaded_file = st.file_uploader(
	"Drag and drop an image here",
	type=["jpg", "jpeg", "png"],
	key="uploader",
	accept_multiple_files=False,
	help="Upload an image to classify its land cover type."
	)

	if uploaded_file:
	st.markdown(
	"""
	<style>
	div.stFileUploader {
	border-color: #4CAF50 !important;
	color: #4CAF50 !important;
	}
	</style>
	""",
	unsafe_allow_html=True,
	)

	# Display the uploaded/selected image and make predictions
	if uploaded_file is not None:
	try:
	file_type = uploaded_file.type
	if file_type not in ["image/jpeg", "image/png"]:
	st.error("Unsupported file type. Please upload a JPG or PNG image.")
	else:
	image = Image.open(uploaded_file)
	st.session_state.uploaded_file = uploaded_file.getvalue()
	st.session_state.selected_image_label = "Uploaded Image"
	except Exception as e:
	st.error(f"Error loading image: {e}")


	# Display the uploaded/selected image and make predictions
	if "uploaded_file" in st.session_state:
	image = Image.open(io.BytesIO(st.session_state.uploaded_file))

	# Display the image with a smaller size
	st.image(image, caption=f"Selected Image: {st.session_state.selected_image_label}", width=300)

	# Show balloons effect after the prediction is done
	with st.spinner("Analyzing the image..."):
	time.sleep(1) # Simulate processing delay
	predicted_class, confidence = predict(image)
	st.balloons() # Display balloons when prediction is complete

	# Display the prediction results in a more prominent section
	st.markdown("## Prediction Results")
	st.success(f"Predicted Class: {predicted_class}")
	st.info(f"Confidence: {confidence * 100:.2f}%")

	# Visualize confidence as a progress bar with a label
	st.markdown("Confidence Level:")
	st.progress(float(confidence))

	# Show top 3 predictions
	st.markdown("### Top 3 Predictions")
	processed_image = preprocess_image(image)
	predictions = model.predict(processed_image)
	top_indices = np.argsort(predictions[0])[-3:][::-1] # Get top 3 predictions
	for i in top_indices:
	st.write(f"- {class_labels[i]}: {predictions[0][i] * 100:.2f}%")



	# Footer
	st.markdown("---")
	st.markdown("""
	[GitHub Repository](https://koulmesahil.github.io/) \| [LinkedIn](https://www.linkedin.com/in/sahilkoul123/)
	""")