import gradio as gr
# Project data - expanded with examples to demonstrate the showcase functionality
projects = [
{
"name": "Toxic Comment Classifier",
"description": "An NLP model to detect toxic comments in real-time, built with transformers and deployed as an interactive app. Highlights my skills in natural language processing and UI integration.",
"impact": "Achieved 90%+ accuracy on a diverse dataset; fine-tuned for low latency to handle real-time inputs.",
"link": "https://huggingface.co/spaces/JanviMl/toxic-comment-classifier",
"built_with": "Transformers, Python, Gradio",
"category": "NLP"
},
{
"name": "ToxiScan",
"description": "application that classifies images as toxic or non-toxic using a pre-trained Vision Transformer (ViT) model from Hugging Face.",
"impact": "Leverages a pre-trained ViT model (`google/vit-base-patch16-224`) to predict if an image is toxic or non-toxic.Results are shown with the uploaded image, prediction label, confidence percentages, and a bar chart.",
"link": "https://huggingface.co/spaces/JanviMl/ToxiScan",
"built_with": "PyTorch, VIT, Python, StreamLit",
"category": "Computer Vision"
},
{
"name": "STLC-AI: Generative QA Automation for Insurance Billing Systems",
"description": "STLC-AI demonstrates an end-to-end automated testing lifecycle that transforms user stories into executable test scenarios using advanced language models.",
"impact": "This project specifically targets insurance billing and payment systems, providing a realistic simulation of AI-driven QA automation.",
"link": "https://huggingface.co/spaces/JanviMl/QA_VAM",
"built_with": "Python 3.10+ | Gradio Framework | Multi-LLM Integration (OpenAI, Anthropic) | Plotly Visualization | Cloud-Native Deployment",
"category": "Generative AI"
},
{
"name": "Enhanced FinSolve AI Assistant",
"description": "A production-ready RAG (Retrieval-Augmented Generation) system for FinSolve Technologies featuring advanced RBAC enforcement, interactive visualizations, and comprehensive security measures.",
"impact": "Advanced RAG System with Role-Based Access Control, Visualizations, and Enhanced Security",
"link": "https://huggingface.co/spaces/JanviMl/RAGFintech",
"built_with": "Tech Stack: Python, FastAPI, Streamlit, OpenAI GPT, ChromaDB,LangChain, SentenceTransformers, Plotly, JWT, RBAC, HuggingFace Spaces",
"category": " RAG "
},
{
"name": "MFPModelEvaluator",
"description": "A Streamlit app to compare MFP effectuation models (Direct Discount vs. Rebate) based on the blog Cracking the MFP Code.",
"impact": "Compare models on usability, speed, and cash flow",
"link": "https://huggingface.co/spaces/JanviMl/MFPModelEvaluator",
"built_with": " Streamlit, Pandas, Matplotlib",
"category": "Data Visualization"
},
{
"name": "AI Hallucination",
"description": "AI That Only Tells You What You Want to Hear.",
"impact": "A demo showing how AI can become an echo chamber when trained to agree with you.",
"link": "https://huggingface.co/spaces/JanviMl/Echo_Chamber_AI_chatbot",
"built_with": "GPT2, Python, Streamlit",
"category": "AI Ethics"
},
{
"name": "Task_Mate",
"description": "A chat-based task manager built with Python, Gradio and Fire",
"impact": "A demo showing how AI can become an echo chamber when trained to agree with you.",
"link": "https://huggingface.co/spaces/JanviMl/Taskmate",
"built_with": "Firebase, Python, Gradio",
"category": "Utilities"
}
]
# Custom CSS with animations and modern styling focused on projects
custom_css = """
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #f9fafb;
}
.container {max-width: 1200px; margin: auto;}
.header {
text-align: center;
padding: 40px 30px;
background: linear-gradient(135deg, #1E3A8A 0%, #3B82F6 100%);
color: white;
border-radius: 12px;
margin-bottom: 30px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
animation: fadeIn 0.8s ease-in-out;
}
@keyframes fadeIn {
from {opacity: 0; transform: translateY(-20px);}
to {opacity: 1; transform: translateY(0);}
}
.category-nav {
display: flex;
justify-content: center;
gap: 12px;
margin-bottom: 30px;
padding: 0 15px;
flex-wrap: wrap;
animation: slideIn 0.6s ease-in-out;
}
@keyframes slideIn {
from {opacity: 0; transform: translateY(20px);}
to {opacity: 1; transform: translateY(0);}
}
.category-btn {
background-color: white;
color: #2563EB;
border: 2px solid #E0E7FF;
padding: 10px 20px;
border-radius: 30px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 0.95rem;
}
.category-btn:hover, .category-btn-active {
background-color: #2563EB;
color: white;
border-color: #2563EB;
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.projects-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 25px;
padding: 0 15px;
}
.project-card {
border: none;
border-radius: 12px;
padding: 25px;
background-color: white;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
height: 100%;
display: flex;
flex-direction: column;
animation: cardPopIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode: both;
animation-delay: calc(var(--delay) * 0.1s);
}
.project-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
@keyframes cardPopIn {
from {opacity: 0; transform: scale(0.9) translateY(20px);}
to {opacity: 1; transform: scale(1) translateY(0);}
}
.project-title {
font-size: 1.5rem;
color: #1E3A8A;
margin-bottom: 10px;
font-weight: 600;
line-height: 1.3;
}
.project-category {
display: inline-block;
background-color: #E0E7FF;
color: #1E3A8A;
font-size: 0.8rem;
padding: 5px 12px;
border-radius: 20px;
margin-bottom: 15px;
font-weight: 500;
}
.project-desc {
font-size: 1rem;
color: #4B5563;
margin-bottom: 15px;
line-height: 1.6;
}
.project-impact {
font-size: 0.95rem;
color: #0F766E;
font-weight: 500;
margin-bottom: 15px;
padding: 10px;
background-color: #ECFDF5;
border-radius: 8px;
line-height: 1.5;
}
.project-tech {
margin-top: auto;
padding-top: 15px;
}
.tech-tag {
display: inline-block;
background-color: #F3F4F6;
padding: 6px 12px;
border-radius: 6px;
font-size: 0.85rem;
color: #4B5563;
margin: 0 6px 6px 0;
}
.project-btn {
background-color: #2563EB;
color: white;
border: none;
padding: 12px 20px;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 10px;
width: 100%;
justify-content: center;
}
.project-btn:hover {
background-color: #1E40AF;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(37, 99, 235, 0.3);
}
.project-btn svg {
width: 18px;
height: 18px;
}
.footer {
text-align: center;
padding: 30px 20px;
margin-top: 50px;
color: #6B7280;
font-size: 0.9rem;
animation: fadeIn 1s ease-in-out;
animation-delay: 0.5s;
animation-fill-mode: both;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
margin-top: 15px;
}
.social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #F3F4F6;
color: #4B5563;
transition: all 0.3s ease;
}
.social-btn:hover {
background-color: #2563EB;
color: white;
transform: translateY(-3px);
}
"""
# Function to create category buttons
def generate_category_buttons():
# Get unique categories
categories = sorted(list(set(p["category"] for p in projects)))
categories.insert(0, "All Projects")
return [
gr.Button(
category,
elem_id=f"category-{category.lower().replace(' ', '-')}",
elem_classes=["category-btn"] + (["category-btn-active"] if category == "All Projects" else [])
)
for category in categories
]
# Function to create project cards with staggered animation
def create_project_cards(category="All Projects"):
filtered_projects = projects if category == "All Projects" else [p for p in projects if p["category"] == category]
html_content = "
"
for i, project in enumerate(filtered_projects):
tech_tags = " ".join([f"{tech.strip()}" for tech in project["built_with"].split(",")])
html_content += f"""