|
import gradio as gr
|
|
import base64
|
|
|
|
|
|
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)
|
|
|
|
|
|
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; }
|
|
"""
|
|
|
|
|
|
with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo:
|
|
|
|
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")
|
|
|
|
|
|
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"])
|
|
|
|
|
|
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"])
|
|
|
|
|
|
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"])
|
|
|
|
|
|
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)))
|
|
|
|
|
|
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_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()
|
|
|
