app.py

import gradio as gr
import base64

# --- Helper Functions ---
def file_to_data_uri(filepath, mime_type="application/pdf"):
    with open(filepath, "rb") as f:
        data = f.read()
    b64 = base64.b64encode(data).decode("utf-8")
    return f"data:{mime_type};base64,{b64}"

def toggle_resume(is_visible):
    new_state = not is_visible
    new_label = "Hide Resume" if new_state else "View Resume"
    return new_state, gr.update(visible=new_state), gr.update(value=new_label)

# --- CSS ---
portfolio_css = """
/* Import Google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(to bottom right, #141414, #000);
    margin: 0;
    padding: 0;
}
.gr-container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 20px; 
}

/* Landing Section */
.landing-section { 
    text-align: center; 
    margin-bottom: 40px; 
}
.landing-section h1, .landing-section h2 {
    color: #ffffff !important;
    margin-top: 0;
}
.landing-section h1 { 
    font-size: 2.8rem; 
    font-weight: 700; 
    margin-bottom: 0.5rem; 
}
.landing-section h2 { 
    font-size: 2rem; 
    font-weight: 600; 
    margin-bottom: 1rem; 
}

/* Typewriter effect */
.typing-animation {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #ffffff;
    font-size: 2.8rem;
    font-weight: 700;
    width: 29ch;
    animation: typing 4s steps(29, end) infinite alternate, blink-caret 0.75s step-end infinite;
}
@keyframes typing { from { width: 0ch; } to { width: 29ch; } }
@keyframes blink-caret { 50% { border-color: transparent; } }

/* Global text styling */
p, li, span { 
    color: #e8e8e8; 
    font-size: 1.2rem; 
}
strong { 
    background-color: #ffffff; 
    color: #000; 
    padding: 0.2rem 0.3rem; 
    border-radius: 3px; 
    font-weight: bold; 
}

/* Card styling */
.card-container {
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}
.card-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
}
.clickable-card { cursor: pointer; }
.card-content {
    border-radius: 15px;
    padding: 30px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    margin-bottom: 10px;
    font-weight: 600;
}
/* Card gradients */
.card-da { background: linear-gradient(135deg, #6a11cb, #2575fc); }
.card-ml { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.card-cv { background: linear-gradient(135deg, #f857a6, #ff5858); }

/* Section headings */
.da-section h1.section-heading { color: #6a11cb; }
.ml-section h1.section-heading { color: #0072ff; }
.cv-section h1.section-heading { color: #f857a6; }

/* Back buttons */
.back-button {
    border: none;
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 20px;
}
.back-button:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); 
}
.back-button-da { background-color: #2575fc; color: #fff; }
.back-button-ml { background-color: #0072ff; color: #fff; }
.back-button-cv { background-color: #ff5858; color: #fff; }
"""

# --- Portfolio Layout ---
with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo:
    # ----- Landing Page -----
    with gr.Row(visible=True, elem_classes="landing-section") as landing_section:
        with gr.Column():
            gr.HTML("""
            <div class="typing-animation">Welcome to Manyue's Portfolio</div><br>
            <h2>About Me</h2>
            <p>
                Hi, I'm Manyue Javvadi – a software engineer turned AI/ML practitioner with a strong foundation in <strong>Commerce</strong> and extensive experience in <strong>machine learning, computer vision, and data analytics</strong>. 
                After gaining valuable industry experience at <strong>Cognizant Technology Solutions</strong>, I pursued formal education in <strong>Applied AI</strong> and <strong>Big Data Analytics</strong> in Canada.
                I excel at bridging <strong>business logic</strong> with <strong>innovative technical solutions</strong> to create systems that solve real-world challenges.
            </p>
            <h2>My Specializations</h2>
            """)
            with gr.Row():
                with gr.Column():
                    da_card = gr.HTML("""
                    <div class="card-container clickable-card" onclick="document.getElementById('da_hidden').click()">
                        <div class="card-content card-da"><span>Data Analytics</span></div>
                        <p style="font-weight: bold;">Data storytelling, business analysis, and visualization</p>
                    </div>
                    """)
                    da_hidden = gr.Button("", visible=False, elem_id="da_hidden")
                with gr.Column():
                    ml_card = gr.HTML("""
                    <div class="card-container clickable-card" onclick="document.getElementById('ml_hidden').click()">
                        <div class="card-content card-ml"><span>Machine Learning</span></div>
                        <p style="font-weight: bold;">Applied ML for impactful decision-making and automation</p>
                    </div>
                    """)
                    ml_hidden = gr.Button("", visible=False, elem_id="ml_hidden")
                with gr.Column():
                    cv_card = gr.HTML("""
                    <div class="card-container clickable-card" onclick="document.getElementById('cv_hidden').click()">
                        <div class="card-content card-cv"><span>Computer Vision</span></div>
                        <p style="font-weight: bold;">Real-time object detection and accessibility solutions</p>
                    </div>
                    """)
                    cv_hidden = gr.Button("", visible=False, elem_id="cv_hidden")
    
    # ----- Data Analytics Section -----
    with gr.Column(visible=False, elem_classes="da-section") as da_section:
        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Data Analytics</h1>")
        with gr.Tabs():
            with gr.TabItem("Resume"):
                gr.Markdown("### Professional Summary")
                gr.Markdown("""
**Professional Summary**  
Detail-oriented Data Analyst with a strategic business mindset and robust technical skills in data manipulation, visualization, and predictive modeling. I transform raw data into clear insights that empower decision-makers.
                """)
                gr.Markdown("### Intro Video")
                gr.Video(value="data/DA_Intro.mp4", label="Data Analytics Intro Video", autoplay=False)
                gr.Markdown("### Resume Document Preview")
                da_resume_state = gr.State(value=False)
                with gr.Group(visible=False) as da_resume_container:
                    da_pdf = file_to_data_uri("data/DA_Resume.pdf")
                    gr.HTML(f"""<iframe src="{da_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
                da_toggle_btn = gr.Button("View Resume")
                da_toggle_btn.click(fn=toggle_resume, inputs=[da_resume_state], outputs=[da_resume_state, da_resume_container, da_toggle_btn])
            with gr.TabItem("Skills"):
                gr.Markdown("### Core Skills")
                gr.Markdown("""
- **Data Wrangling & Analysis:** Expert in SQL and Python (Pandas, NumPy) for efficient data cleaning and transformation.
- **Exploratory Data Analysis:** Skilled in using Tableau, Matplotlib, and Seaborn to extract and visualize insights.
- **Predictive Modeling:** Proficient in statistical modeling and forecasting to drive informed decision-making.
                """)
            with gr.TabItem("Projects"):
                gr.Markdown("### Selected Projects")
                gr.Markdown("""
**LoanTap: Loan Eligibility Prediction**  
Leveraged logistic regression and EDA to identify key factors influencing loan approvals.

**Educational Data Insights**  
Conducted deep statistical analysis to reveal trends in student performance.

**Upcoming – Jamboree Admission Insights**  
An initiative to predict graduate admissions using advanced data techniques.
                """)
        back_da = gr.Button("← Home", elem_classes=["back-button", "back-button-da"])
    
    # ----- Machine Learning Section -----
    with gr.Column(visible=False, elem_classes="ml-section") as ml_section:
        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Machine Learning</h1>")
        with gr.Tabs():
            with gr.TabItem("Resume"):
                gr.Markdown("### Professional Summary")
                gr.Markdown("""
**Professional Summary**  
Passionate Machine Learning Engineer skilled in designing and deploying end-to-end ML solutions. I combine technical rigor with strategic insight to develop models that drive innovation and operational efficiency.
                """)
                gr.Markdown("### Intro Video")
                gr.Markdown("_Intro video is coming soon._")
                gr.Markdown("### Resume Document Preview")
                ml_resume_state = gr.State(value=False)
                with gr.Group(visible=False) as ml_resume_container:
                    ml_pdf = file_to_data_uri("data/ML_CV_Resume.pdf")
                    gr.HTML(f"""<iframe src="{ml_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
                ml_toggle_btn = gr.Button("View Resume")
                ml_toggle_btn.click(fn=toggle_resume, inputs=[ml_resume_state], outputs=[ml_resume_state, ml_resume_container, ml_toggle_btn])
            with gr.TabItem("Skills"):
                gr.Markdown("### Core Skills")
                gr.Markdown("""
- **ML Algorithms:** Deep understanding of regression, classification, clustering, and neural networks.
- **Frameworks & Libraries:** Proficient with scikit-learn, TensorFlow, and XGBoost.
- **Model Deployment:** Experienced in deploying models with Gradio and Streamlit.
- **Data Engineering:** Skilled in feature engineering and data preprocessing for optimal model performance.
                """)
            with gr.TabItem("Projects"):
                gr.Markdown("### Selected Projects")
                gr.Markdown("""
**University Admission Predictor**  
Applied linear regression to forecast admission chances based on academic and test performance.

[AI Chat Assistant](https://huggingface.co/spaces/Manyue-DataScientist/AI-Assistant)  
Built as a demonstration of a practical AI application, this assistant revolutionizes how recruiters and hiring managers interact with my
portfolio. Unlike traditional chatbots, it’s designed with a unique optimization approach that prioritizes efficiency and accuracy.

[Speaker Diarization Application](https://huggingface.co/spaces/Manyue-DataScientist/speaker-diarization-app-v2)  
Developed an advanced multi-speaker audio processing system that performs speaker diarization, transcription, and summarization to
extract meaningful insights from multi-speaker conversations.
                """)
        back_ml = gr.Button("← Home", elem_classes=["back-button", "back-button-ml"])
    
    # ----- Computer Vision Section -----
    with gr.Column(visible=False, elem_classes="cv-section") as cv_section:
        gr.Markdown("<h1 class='section-heading' style='margin-bottom: 20px;'>Computer Vision</h1>")
        with gr.Tabs():
            with gr.TabItem("Resume"):
                gr.Markdown("### Professional Summary")
                gr.Markdown("""
**Professional Summary**  
Innovative Computer Vision Engineer dedicated to crafting real-time, scalable vision solutions. I focus on building systems that improve accessibility and automate complex visual tasks.
                """)
                gr.Markdown("### Intro Video")
                gr.Markdown("_Intro video is coming soon._")
                gr.Markdown("### Resume Document Preview")
                cv_resume_state = gr.State(value=False)
                with gr.Group(visible=False) as cv_resume_container:
                    cv_pdf = file_to_data_uri("data/ML_CV_Resume.pdf")
                    gr.HTML(f"""<iframe src="{cv_pdf}" width="100%" height="600px" style="border:none;"></iframe>""")
                cv_toggle_btn = gr.Button("View Resume")
                cv_toggle_btn.click(fn=toggle_resume, inputs=[cv_resume_state], outputs=[cv_resume_state, cv_resume_container, cv_toggle_btn])
            with gr.TabItem("Skills"):
                gr.Markdown("### Core Skills")
                gr.Markdown("""
- **Vision Algorithms:** Proficient in CNNs, YOLO, and segmentation for robust object detection.
- **Technical Tools:** Expert in OpenCV, PyTorch, and TensorFlow for advanced image processing.
- **Image Analysis:** Skilled in image enhancement, filtering, and OCR integration.
- **Deep Learning:** Experienced with transfer learning and model fine-tuning for custom vision tasks.
                """)
            with gr.TabItem("Projects"):
                gr.Markdown("### Selected Projects")
                gr.Markdown("""
**Smart Shopping Assistant**  
An accessibility tool combining real-time object detection and OCR to guide visually impaired users in retail settings.

**Traffic Flow Counter (Upcoming)**  
An edge solution using Raspberry Pi to monitor and count vehicles at intersections.

**Experimental Object Datasets**  
Initiatives focused on training custom YOLO models to improve detection in complex environments.
                """)
        back_cv = gr.Button("← Home", elem_classes=["back-button", "back-button-cv"])
    
    # ----- Navigation Callbacks -----
    def switch_to_da():
        return (gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False))
    def switch_to_ml():
        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=(True)), gr.update(visible=(False)))
    def switch_to_cv():
        return (gr.update(visible=False), gr.update(visible=False), gr.update(visible=(False)), gr.update(visible=(True)))
    def back_to_main():
        return (gr.update(visible=True), gr.update(visible=(False)), gr.update(visible=(False)), gr.update(visible=(False)))
    
    # Hidden card triggers for section switching
    da_hidden.click(fn=switch_to_da, outputs=[landing_section, da_section, ml_section, cv_section])
    ml_hidden.click(fn=switch_to_ml, outputs=[landing_section, da_section, ml_section, cv_section])
    cv_hidden.click(fn=switch_to_cv, outputs=[landing_section, da_section, ml_section, cv_section])
    
    # Back button bindings for each section
    back_da.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
    back_ml.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
    back_cv.click(fn=back_to_main, outputs=[landing_section, da_section, ml_section, cv_section])
    
demo.launch()