app.py

import streamlit as st
from datetime import datetime


# Disable automatic reruns for smoother scrolling
if 'initialized' not in st.session_state:
    st.session_state.initialized = True


# Page config
st.set_page_config(
    page_title="Suchith Natraj Javali - AI Portfolio",
    page_icon="🤖",
    layout="wide",
    initial_sidebar_state="expanded"
)

# Custom CSS
# Custom CSS (replace your existing st.markdown CSS section)
st.markdown("""
    <style>
    /* Force full height - no internal scroll */
    section.main > div:has(~ footer ) {
        overflow: visible !important;
        max-height: none !important;
    }
    
    .main .block-container {
        overflow: visible !important;
        max-height: none !important;
    }
    
    /* Hide Streamlit's scrollbar completely */
    ::-webkit-scrollbar {
        width: 0px;
        background: transparent;
    }
    
    /* Let only browser scrollbar show */
    iframe body {
        overflow: auto !important;
    }
    
    /* Smooth browser scrolling */
    html {
        scroll-behavior: smooth;
    }
    h1 {color: #FF9D00;}
    
    .highlight-box {
        padding: 2rem;
        background: linear-gradient(135deg, #FF9D00 0%, #FFD21E 100%);
        color: #1F1F1F;
        border-radius: 10px;
        margin: 1rem 0;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    }
    
    .metric-card {
        background: #f0f2f6;
        padding: 1.5rem;
        border-radius: 10px;
        text-align: center;
        transition: transform 0.2s ease;
    }
    
    .metric-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    </style>
""", unsafe_allow_html=True)

def smooth_scroll():
    st.markdown("""
        <script>
        window.addEventListener('load', function() {
            document.querySelectorAll('details').forEach(function(detail) {
                detail.addEventListener('toggle', function() {
                    if (this.open) {
                        setTimeout(function() {
                            detail.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                        }, 100);
                    }
                });
            });
        });
        </script>
    """, unsafe_allow_html=True)

smooth_scroll()

col1, col2 = st.columns([3, 1])
with col1:
    st.title("Suchith Natraj Javali - AI Portfolio")
    st.markdown("### Production-Ready AI/ML Services")
with col2:
    st.markdown("[![HuggingFace](https://img.shields.io/badge/🤗-HuggingFace-FFD21E?style=for-the-badge)](https://huggingface.co/suchithnj12)")
    st.markdown("[![GitHub](https://img.shields.io/badge/GitHub-Profile-181717?style=for-the-badge&logo=github)](https://github.com/Suchith-nj)")

# Hero section
st.markdown("""
    <div class="highlight-box">
        <h2 style="color: #1F1F1F; margin: 0;">Welcome to My AI Portfolio</h2>
        <p style="color: #1F1F1F; opacity: 0.9; margin-top: 0.5rem; font-size: 1.1rem;">
            Explore my collection of <strong>production-ready AI/ML services</strong> built with 
            PyTorch, HuggingFace Transformers, LangChain, and modern frameworks. 
            Each service demonstrates end-to-end ML engineering capabilities.
        </p>
        <p style="color: #1F1F1F; opacity: 0.8; margin-top: 0.5rem;">
            💡 <strong>16GB RAM</strong> | 2 vCPU | Hosted on HuggingFace Spaces
        </p>
    </div>
""", unsafe_allow_html=True)

st.write("")

# Metrics row
col1, col2, col3, col4 = st.columns(4)

with col1:
    st.markdown('<div class="metric-card">', unsafe_allow_html=True)
    st.metric(label="Total Services", value="10+", delta="Growing")
    st.markdown('</div>', unsafe_allow_html=True)

with col2:
    st.markdown('<div class="metric-card">', unsafe_allow_html=True)
    st.metric(label="Primary Stack", value="Python", delta="PyTorch & LangChain")
    st.markdown('</div>', unsafe_allow_html=True)

with col3:
    st.markdown('<div class="metric-card">', unsafe_allow_html=True)
    st.metric(label="Platform", value="HuggingFace", delta="16GB RAM")
    st.markdown('</div>', unsafe_allow_html=True)

with col4:
    st.markdown('<div class="metric-card">', unsafe_allow_html=True)
    st.metric(label="Status", value="Active", delta="Week 0")
    st.markdown('</div>', unsafe_allow_html=True)

st.write("")

# About section
# st.header("👨‍💻 About This Portfolio")

# col1, col2 = st.columns([2, 1])

# with col1:
#     st.markdown("""
#     I'm an **AI Engineer** specializing in building production-ready ML services. 
#     This portfolio showcases my ability to:
    
#     - **Train & Fine-tune Models**: Deep learning with PyTorch, transfer learning
#     - **Deploy to Production**: FastAPI, Docker, AWS, scalable architectures
#     - **Full-Stack AI Apps**: End-to-end applications with modern frameworks
#     - **MLOps Practices**: Experiment tracking, monitoring, CI/CD pipelines
#     - **Multi-Agent Systems**: Coordinated AI agents with LangChain & AutoGen
#     - **LLM Applications**: RAG pipelines, prompt engineering, agent frameworks
#     """)

# with col2:
#     st.info("**Navigate Services**\n\nUse the sidebar to explore each AI service")
#     st.success("**✨ New Service Every Week**\n\nThis portfolio grows weekly as I build new services")

# st.write("")

# Services Grid
st.header("🛠️ Available AI Services")
st.markdown("Select any service from the sidebar to explore →")

# Service cards in expandable sections
col1, col2 = st.columns(2)

services_left = [
    {
        "icon": "💬",
        "name": "Food Classifier",
        "status": "✅ Active",
        "desc": "ResNet-50 trained on Food-101 (101 food categories, 41% accuracy)",
        "tech": "PyTorch • ResNet-50 • HuggingFace",
        "features": ["101 food categories", "Real-time inference", "Top-5 predictions"]
    },
    {
        "icon": "💬",
        "name": "Sentiment Analysis",
        "status": "Week 2",
        "desc": "BERT-based sentiment detection for text analysis",
        "tech": "HuggingFace Transformers • BERT • FastAPI",
        "features": ["Multi-language support", "Batch processing", "Fine-tuned on domain data"]
    },
    {
        "icon": "💬",
        "name": "AI Chatbot",
        "status": "Week 3",
        "desc": "Conversational AI with memory and context awareness",
        "tech": "LangChain • OpenAI • PostgreSQL • Memory",
        "features": ["Context retention", "Conversation history", "Multi-turn dialogue"]
    },
    {
        "icon": "💬",
        "name": "Document Q&A (RAG)",
        "status": "Week 4",
        "desc": "Retrieval-Augmented Generation for document understanding",
        "tech": "LangChain • Pinecone • Vector Search • RAG",
        "features": ["PDF/DOCX upload", "Semantic search", "Source citations"]
    },
]

services_right = [
    {
        "icon": "📚",
        "name": "Multi-Doc RAG",
        "status": "Week 5",
        "desc": "Advanced RAG system handling multiple documents",
        "tech": "ChromaDB • Hybrid Search • Re-ranking",
        "features": ["Multiple file upload", "Cross-document queries", "Advanced retrieval"]
    },
    {
        "icon": "🔧",
        "name": "AI Agent with Tools",
        "status": "Week 6",
        "desc": "Autonomous agent that can use external tools",
        "tech": "LangChain Agents • ReAct • Function Calling",
        "features": ["Web search", "Calculator", "API integration"]
    },
    {
        "icon": "👥",
        "name": "Multi-Agent System",
        "status": "Week 7",
        "desc": "Coordinated AI agents for complex research tasks",
        "tech": "AutoGen • LangGraph • Multi-Agent",
        "features": ["Agent coordination", "Task delegation", "Parallel execution"]
    },
    {
        "icon": "🎨",
        "name": "Image Analysis (Multi-Modal)",
        "status": "Week 9",
        "desc": "Vision-language understanding with CLIP/BLIP",
        "tech": "CLIP • BLIP • Multi-Modal",
        "features": ["Image captioning", "Visual Q&A", "Object detection"]
    },
]

with col1:
    for service in services_left:
        with st.expander(f"{service['icon']} {service['name']}", expanded=False):
            st.markdown(f"**Status**: {service['status']}")
            st.write(service['desc'])
            st.code(service['tech'], language=None)
            st.markdown("**Key Features:**")
            for feature in service['features']:
                st.markdown(f"• {feature}")

with col2:
    for service in services_right:
        with st.expander(f"{service['icon']} {service['name']}", expanded=False):
            st.markdown(f"**Status**: {service['status']}")
            st.write(service['desc'])
            st.code(service['tech'], language=None)
            st.markdown("**Key Features:**")
            for feature in service['features']:
                st.markdown(f"• {feature}")

st.write("")
st.header("⚡ Tech Stack & Tools")

tech_col1, tech_col2, tech_col3, tech_col4 = st.columns(4)

with tech_col1:
    st.markdown("**Deep Learning**")
    st.markdown("""
    • PyTorch
    • TensorFlow
    • Scikit-learn
    • OpenCV
    """)

with tech_col2:
    st.markdown("**NLP & LLMs**")
    st.markdown("""
    • HuggingFace Transformers
    • LangChain
    • OpenAI API
    • Anthropic Claude
    """)

with tech_col3:
    st.markdown("**Backend & APIs**")
    st.markdown("""
    • FastAPI
    • Streamlit
    • PostgreSQL
    • Redis
    """)

with tech_col4:
    st.markdown("**DevOps & Deploy**")
    st.markdown("""
    • AWS (EC2, S3, ECS)
    • Docker
    • GitHub Actions
    • HuggingFace Spaces
    """)

st.write("")

# GitHub & Contact
st.header("Connect With Me")

contact_col1, contact_col2, contact_col3, contact_col4 = st.columns(4)

with contact_col1:
    st.markdown("** GitHub**")
    st.markdown("[View All Projects](https://github.com/Suchith-nj)")

with contact_col2:
    st.markdown("** LinkedIn**")
    st.markdown("[Connect](https://linkedin.com/in/suchith-nj)")

with contact_col3:
    st.markdown("** Email**")
    st.markdown("[Contact Me](mailto:suchithnj12@gmail.com)")


# Footer
st.write("")
st.write("")
st.markdown("---")
st.markdown(f"""
    <div style="text-align: center; opacity: 0.7; padding: 1rem;">
        <p>Built using <strong>Streamlit</strong> | Hosted on <strong>🤗 HuggingFace Spaces</strong></p>
        <p>Last Updated: {datetime.now().strftime('%B %Y')} | Week 0 Foundation Complete</p>
        <p><a href="https://github.com/Suchith-nj/ai-portfolio" target="_blank">View Source Code on GitHub</a></p>
    </div>
""", unsafe_allow_html=True)

# Sidebar
with st.sidebar:
    st.markdown("## AI Services Portfolio")
    st.markdown("**Suchith Natraj Javali**")
    st.markdown("AI Engineer")
    
    st.markdown("---")
    
    st.markdown("### Build Progress")
    progress = 5  # Update each week
    st.progress(progress / 100)
    st.caption(f"{progress}% Complete..")
    st.caption("Foundation deployed")
    
    st.markdown("---")
    
    st.markdown("### Navigation")
    st.info("Select a service from the **Pages** menu above to explore different AI capabilities")
    
    st.markdown("---")
    
    st.markdown("### 🔗 Quick Links")
    st.markdown("• [HuggingFace Profile](https://huggingface.co/suchithnj12)")
    st.markdown("• [GitHub](https://github.com/Suchith-nj)")
    st.markdown("• [LinkedIn](https://linkedin.com/in/suchith-nj)")    
    st.markdown("---")
    
    st.markdown("### 💡 About")
    st.caption("""
    This portfolio showcases production-ready AI/ML services built with modern frameworks. 
    Each service is a complete, deployable application demonstrating end-to-end ML engineering skills.
    """)
    
    st.markdown("---")
    st.caption("© 2024 Suchith Natraj Javali | All Rights Reserved")