app.py

import streamlit as st
from PIL import Image
import base64
from io import BytesIO

# Function to convert image to base64 for hover effect
def get_image_base64(image_path):
    img = Image.open(image_path)
    buffered = BytesIO()
    img.save(buffered, format="jpg")
    return base64.b64encode(buffered.getvalue()).decode()

# Set page configuration
st.set_page_config(
    page_title="ML Projects Portfolio",
    page_icon="📊",
    layout="wide"
)

# Custom CSS for styling
st.markdown("""
    <style>
    .project-card {
        transition: all 0.3s ease;
        border-radius: 10px;
        padding: 10px;
    }
    .project-card:hover {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }
    .main-title {
        font-size: 3rem;
        color: #1E90FF;
        text-align: center;
        margin-bottom: 2rem;
    }
    .subtitle {
        text-align: center;
        color: #666;
        margin-bottom: 3rem;
    }
    </style>
""", unsafe_allow_html=True)

# Header
st.markdown('<h1 class="main-title">Machine Learning Projects Portfolio</h1>', unsafe_allow_html=True)
st.markdown('<p class="subtitle">Click on any project image to explore</p>', unsafe_allow_html=True)

# Create three columns for layout
col1, col2, col3 = st.columns(3)

# Project data  actual project links)
projects = [
    
    {
        "title": "FCCU 'LCO D 95' Lab Value Prediction App",
        "image": "refinery.jpg",  #  image path
        "url": "https://models-rhhj7lfypshz87uadtsqnp.streamlit.app/",
        "description": "Predicts '95% Distillation' of Diesel"
    },
    {
        "title": "CDU SRN 'RVP' Prediction Tool",
        "image": "flask3.jpg",  # image path
        "url": "https://huggingface.co/spaces/basheer67/SRN_RVP",
        "description": "Predicts 'Ried Vapour Pressure' of Naptha" 
    }, 
    {
        "title": "Old Car Price Prediction",
        "image": "car.jpg",  #  image path
        "url": "https://models-efsxczfpjxgyjw4h3tavch.streamlit.app/",
        "description": "Predict prices of used cars using ML"
    },
    {
        "title": "Indian Weather monitoring app",
        "image": "weather.jpg",  #  image path
        "url": "https://huggingface.co/spaces/basheer67/basheer-models",
        "description": "Retrieves weather data of Indian cities"
    },
    {
        "title": "Depression Proneness Predictor",
        "image": "dep1.jpg",  #  image path
        "url": "https://huggingface.co/spaces/basheer67/mental_health",
        "description": "Predicts depression proneness using deep learning"
    },
    
    {
        "title": "Telegram bot of Chemical Engineering formulae",
        "image": "data.jpg",  # Replace with your image path
        "url": "https://your-data-price-project-link.com",
        "description": "Telegram bot of formulae"
    }
]

# Display projects in columns
for i, project in enumerate(projects):
    # Place projects in appropriate columns
    if i % 3 == 0:
        current_col = col1
    elif i % 3 == 1:
        current_col = col2
    else:
        current_col = col3

    with current_col:
        # Create a container for each project
        with st.container():
            st.markdown(f'<div class="project-card">', unsafe_allow_html=True)
            
            # Display image with hyperlink
            try:
                img = Image.open(project["image"])
                st.image(
                    img,
                    caption=project["title"],
                    use_container_width=True,
                    output_format="jpg"
                )
                
                # Create clickable area
                if st.button("View Project", key=f"btn_{i}"):
                    st.markdown(f'<meta http-equiv="refresh" content="0;URL={project["url"]}" />', 
                              unsafe_allow_html=True)
            
            except FileNotFoundError:
                st.error(f"Image for {project['title']} not found")
            
            st.write(project["description"])
            st.markdown('</div>', unsafe_allow_html=True)
            st.write("---")

# Footer
st.markdown("""
    <div style='text-align: center; padding: 20px;'>
        <p>Developed by SKB | © 2025 </p>
    </div>
""", unsafe_allow_html=True)