|
|
import gradio as gr |
|
|
import base64 |
|
|
import os |
|
|
|
|
|
|
|
|
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 show_data_analytics(): |
|
|
return gr.update(visible=False), gr.update(visible=True), gr.update(visible=False), gr.update(visible=False) |
|
|
|
|
|
def show_machine_learning(): |
|
|
return gr.update(visible=False), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False) |
|
|
|
|
|
def show_computer_vision(): |
|
|
return gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), gr.update(visible=True) |
|
|
|
|
|
def go_home(): |
|
|
return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False) |
|
|
|
|
|
|
|
|
data_analytics_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><path d="M8 10h.01"></path><path d="M12 10h.01"></path><path d="M16 10h.01"></path></svg>""" |
|
|
machine_learning_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>""" |
|
|
computer_vision_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>""" |
|
|
home_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>""" |
|
|
linkedin_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>""" |
|
|
github_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>""" |
|
|
mail_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>""" |
|
|
link_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg>""" |
|
|
document_icon = """<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>""" |
|
|
|
|
|
|
|
|
def image_to_data_uri(filepath, mime_type="image/jpeg"): |
|
|
with open(filepath, "rb") as f: |
|
|
data = f.read() |
|
|
b64 = base64.b64encode(data).decode("utf-8") |
|
|
return f"data:{mime_type};base64,{b64}" |
|
|
|
|
|
|
|
|
portfolio_css = """ |
|
|
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Montserrat:wght@700;800&display=swap'); |
|
|
|
|
|
:root { |
|
|
--primary-da: #8a2be2; |
|
|
--secondary-da: #2575fc; |
|
|
--primary-ml: #00b4db; |
|
|
--secondary-ml: #0083b0; |
|
|
--primary-cv: #ff4d7e; |
|
|
--secondary-cv: #fd3e58; |
|
|
--dark-bg: #0f1118; |
|
|
--card-bg: #1a1d29; |
|
|
--text-primary: #ffffff; |
|
|
--text-secondary: #e0e0e0; |
|
|
--text-muted: #a0a0a0; |
|
|
--shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
--shadow-md: 0 8px 16px rgba(0, 0, 0, 0.2); |
|
|
--shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.2); |
|
|
--border-radius-sm: 8px; |
|
|
--border-radius-md: 12px; |
|
|
--border-radius-lg: 20px; |
|
|
--transition-fast: 0.2s ease; |
|
|
--transition-med: 0.3s ease; |
|
|
--transition-slow: 0.5s ease; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Poppins', sans-serif; |
|
|
background: var(--dark-bg); |
|
|
background-image: |
|
|
radial-gradient(circle at 25% 25%, rgba(53, 53, 113, 0.05) 0%, transparent 50%), |
|
|
radial-gradient(circle at 75% 75%, rgba(113, 53, 53, 0.05) 0%, transparent 50%); |
|
|
color: var(--text-primary); |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.gr-container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
|
|
|
/* Scrollbar styling */ |
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
border-radius: 4px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb:hover { |
|
|
background: rgba(255, 255, 255, 0.3); |
|
|
} |
|
|
|
|
|
/* Landing section */ |
|
|
.landing-section { |
|
|
text-align: center; |
|
|
margin-bottom: 60px; |
|
|
padding: 40px 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.landing-section:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 500px; |
|
|
background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.landing-section h1, .landing-section h2 { |
|
|
color: var(--text-primary) !important; |
|
|
margin-top: 0; |
|
|
} |
|
|
|
|
|
.landing-section h1 { |
|
|
font-family: 'Montserrat', sans-serif; |
|
|
font-size: 3.2rem; |
|
|
font-weight: 800; |
|
|
margin-bottom: 0.5rem; |
|
|
background: linear-gradient(90deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent !important; |
|
|
letter-spacing: -0.5px; |
|
|
} |
|
|
|
|
|
.landing-section h2 { |
|
|
font-size: 2rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 1.5rem; |
|
|
} |
|
|
|
|
|
.profile-container { |
|
|
margin: 30px auto; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
flex-direction: column; |
|
|
} |
|
|
|
|
|
.profile-pic { |
|
|
width: 180px; |
|
|
height: 180px; |
|
|
border-radius: 50%; |
|
|
object-fit: cover; |
|
|
border: 4px solid rgba(255, 255, 255, 0.2); |
|
|
box-shadow: var(--shadow-md); |
|
|
margin-bottom: 20px; |
|
|
position: relative; |
|
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-ml), var(--primary-cv)); |
|
|
padding: 4px; |
|
|
} |
|
|
|
|
|
.profile-pic img { |
|
|
border-radius: 50%; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
} |
|
|
|
|
|
.name-text { |
|
|
font-size: 2.6rem; |
|
|
font-weight: 700; |
|
|
margin-top: 10px; |
|
|
margin-bottom: 10px; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px) } |
|
|
50% { transform: translateY(-10px) } |
|
|
100% { transform: translateY(0px) } |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { transform: scale(1); } |
|
|
50% { transform: scale(1.05); } |
|
|
100% { transform: scale(1); } |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
max-width: 800px; |
|
|
margin: 0 auto 40px; |
|
|
font-size: 1.25rem; |
|
|
line-height: 1.6; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.skills-container { |
|
|
margin-top: 20px; |
|
|
display: flex; |
|
|
flex-wrap: wrap; |
|
|
justify-content: center; |
|
|
gap: 10px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.skill-pill { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
padding: 8px 16px; |
|
|
border-radius: 30px; |
|
|
font-size: 0.9rem; |
|
|
font-weight: 500; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 20px; |
|
|
margin: 30px 0; |
|
|
} |
|
|
|
|
|
.social-button { |
|
|
background: rgba(255, 255, 255, 0.1); |
|
|
border: none; |
|
|
border-radius: 50%; |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all var(--transition-med); |
|
|
color: var(--text-primary); |
|
|
font-size: 1.2rem; |
|
|
box-shadow: var(--shadow-sm); |
|
|
} |
|
|
|
|
|
.social-button:hover { |
|
|
transform: translateY(-5px); |
|
|
background: rgba(255, 255, 255, 0.2); |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.social-linkedin:hover { background: #0077b5; } |
|
|
.social-github:hover { background: #333; } |
|
|
.social-email:hover { background: #ea4335; } |
|
|
|
|
|
.social-button svg { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
} |
|
|
|
|
|
/* Card styling */ |
|
|
.cards-grid { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
margin: 40px 0; |
|
|
} |
|
|
|
|
|
.card-container { |
|
|
position: relative; /* Important for button positioning */ |
|
|
margin-bottom: 20px; |
|
|
height: 100%; |
|
|
} |
|
|
|
|
|
.card-container.da:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, var(--primary-da), var(--secondary-da)); |
|
|
z-index: 5; |
|
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
|
} |
|
|
|
|
|
.card-container.ml:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, var(--primary-ml), var(--secondary-ml)); |
|
|
z-index: 5; |
|
|
transition: all var(--transition-med); |
|
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
|
} |
|
|
|
|
|
.card-container.cv:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
height: 6px; |
|
|
background: linear-gradient(90deg, var(--primary-cv), var(--secondary-cv)); |
|
|
z-index: 5; |
|
|
border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
padding: 30px; |
|
|
min-height: 200px; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
font-size: 26px; |
|
|
font-weight: 700; |
|
|
position: relative; |
|
|
z-index: 2; |
|
|
transition: all var(--transition-med); |
|
|
} |
|
|
|
|
|
.card-content svg { |
|
|
width: 60px; |
|
|
height: 60px; |
|
|
margin-bottom: 20px; |
|
|
opacity: 0.9; |
|
|
transition: all var(--transition-med); |
|
|
} |
|
|
|
|
|
.card-inner { |
|
|
transition: transform var(--transition-med), box-shadow var(--transition-med), background-color var(--transition-med); |
|
|
text-align: center; |
|
|
border-radius: var(--border-radius-md); |
|
|
background: var(--card-bg); |
|
|
overflow: hidden; |
|
|
box-shadow: var(--shadow-md); |
|
|
height: 100%; |
|
|
cursor: pointer; /* Indicates the card is clickable */ |
|
|
position: relative; /* Ensure child elements are positioned relative to the card */ |
|
|
} |
|
|
|
|
|
.card-inner:hover { |
|
|
transform: translateY(-10px) scale(1.05); /* Adds a slight zoom effect */ |
|
|
box-shadow: var(--shadow-lg); /* Increases shadow for emphasis */ |
|
|
background: rgba(255, 255, 255, 0.1); /* Subtle background change */ |
|
|
border: 2px solid var(--primary-da); /* Optional: Add a border to emphasize hover */ |
|
|
} |
|
|
|
|
|
.card-inner:hover .card-content svg { |
|
|
transform: scale(1.1); /* Slightly enlarges the icon */ |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.card-inner:hover .card-description { |
|
|
color: var(--text-primary); /* Optional: changes text color for emphasis */ |
|
|
} |
|
|
|
|
|
/* Add a subtle glow effect */ |
|
|
.card-inner:hover:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
right: 0; |
|
|
bottom: 0; |
|
|
border-radius: var(--border-radius-md); |
|
|
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.card-description { |
|
|
padding: 0 20px 20px; |
|
|
color: var(--text-secondary); |
|
|
font-size: 1.1rem; |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
/* Card button styling - crucial for making cards clickable */ |
|
|
.card-button { |
|
|
position: absolute !important; |
|
|
top: 0 !important; |
|
|
left: 0 !important; |
|
|
width: 100% !important; |
|
|
height: 100% !important; |
|
|
opacity: 0 !important; |
|
|
z-index: 10 !important; |
|
|
cursor: pointer !important; |
|
|
margin: 0 !important; |
|
|
padding: 0 !important; |
|
|
border: none !important; |
|
|
transform: scale(1.05) !important; |
|
|
transition: transform 0.2s ease !important; |
|
|
background: none !important; |
|
|
} |
|
|
|
|
|
/* Section styling */ |
|
|
.section-container { |
|
|
padding: 40px 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.section-container:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 300px; |
|
|
background: radial-gradient(ellipse at top, rgba(255,255,255,0.05) 0%, transparent 70%); |
|
|
z-index: 0; |
|
|
} |
|
|
|
|
|
.da-section h1.section-heading { |
|
|
color: var(--primary-da); |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.ml-section h1.section-heading { |
|
|
color: var(--primary-ml); |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.cv-section h1.section-heading { |
|
|
color: var(--primary-cv); |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
} |
|
|
|
|
|
.section-heading:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 3px; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.da-section .section-heading:after { background: var(--primary-da); } |
|
|
.ml-section .section-heading:after { background: var(--primary-ml); } |
|
|
.cv-section .section-heading:after { background: var(--primary-cv); } |
|
|
|
|
|
/* Subheadings color-coded */ |
|
|
.section-subheading.da { color: var(--primary-da); } |
|
|
.section-subheading.ml { color: var(--primary-ml); } |
|
|
.section-subheading.cv { color: var(--primary-cv); } |
|
|
|
|
|
/* Back buttons */ |
|
|
.back-button { |
|
|
border: none; |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: 10px 20px; |
|
|
font-size: 0.95rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: transform var(--transition-fast), box-shadow var(--transition-fast); |
|
|
margin-bottom: 30px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 8px; |
|
|
} |
|
|
|
|
|
.back-button:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.back-button-da { |
|
|
background: linear-gradient(45deg, var(--primary-da), var(--secondary-da)); |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.back-button-ml { |
|
|
background: linear-gradient(45deg, var(--primary-ml), var(--secondary-ml)); |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.back-button-cv { |
|
|
background: linear-gradient(45deg, var(--primary-cv), var(--secondary-cv)); |
|
|
color: #fff; |
|
|
} |
|
|
|
|
|
.back-button svg { |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
} |
|
|
|
|
|
/* Contact form */ |
|
|
.contact-container { |
|
|
background: var(--card-bg); |
|
|
border-radius: var(--border-radius-md); |
|
|
padding: 30px; |
|
|
max-width: 600px; |
|
|
margin: 0 auto; |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.hire-me-button { |
|
|
background: linear-gradient(45deg, var(--primary-da), var(--primary-cv)); |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: var(--border-radius-lg); |
|
|
padding: 12px 25px; |
|
|
font-size: 1rem; |
|
|
font-weight: 600; |
|
|
cursor: pointer; |
|
|
transition: all var(--transition-med); |
|
|
margin-top: 20px; |
|
|
box-shadow: var(--shadow-sm); |
|
|
display: inline-block; |
|
|
text-decoration: none; |
|
|
} |
|
|
|
|
|
.hire-me-button:hover { |
|
|
transform: translateY(-3px); |
|
|
box-shadow: var(--shadow-md); |
|
|
filter: brightness(1.1); |
|
|
} |
|
|
|
|
|
/* Project cards */ |
|
|
.project-card { |
|
|
background: var(--card-bg); |
|
|
border-radius: var(--border-radius-md); |
|
|
padding: 25px; |
|
|
margin-bottom: 20px; |
|
|
box-shadow: var(--shadow-sm); |
|
|
transition: all var(--transition-med); |
|
|
border-left: 4px solid transparent; |
|
|
} |
|
|
|
|
|
.da-section .project-card { border-left-color: var(--primary-da); } |
|
|
.ml-section .project-card { border-left-color: var(--primary-ml); } |
|
|
.cv-section .project-card { border-left-color: var(--primary-cv); } |
|
|
|
|
|
.project-card:hover { |
|
|
transform: translateX(5px); |
|
|
box-shadow: var(--shadow-md); |
|
|
} |
|
|
|
|
|
.project-title { |
|
|
font-size: 1.3rem; |
|
|
font-weight: 600; |
|
|
margin-bottom: 10px; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
} |
|
|
|
|
|
.project-title-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.project-link { |
|
|
color: var(--text-secondary); |
|
|
transition: all var(--transition-med); |
|
|
text-decoration: none; |
|
|
display: inline-flex; |
|
|
align-items: center; |
|
|
margin-left: 10px; |
|
|
} |
|
|
|
|
|
.project-link svg { |
|
|
width: 16px; |
|
|
height: 16px; |
|
|
margin-right: 5px; |
|
|
} |
|
|
|
|
|
.da-section .project-title-text { color: var(--primary-da); } |
|
|
.ml-section .project-title-text { color: var(--primary-ml); } |
|
|
.cv-section .project-title-text { color: var(--primary-cv); } |
|
|
|
|
|
.da-section .project-link:hover { color: var(--primary-da); } |
|
|
.ml-section .project-link:hover { color: var(--primary-ml); } |
|
|
.cv-section .project-link:hover { color: var(--primary-cv); } |
|
|
|
|
|
.project-description { |
|
|
color: var(--text-secondary); |
|
|
line-height: 1.5; |
|
|
} |
|
|
|
|
|
.tech-stack { |
|
|
display: block; |
|
|
margin-top: 10px; |
|
|
font-style: italic; |
|
|
color: var(--text-muted); |
|
|
} |
|
|
|
|
|
/* Skills list */ |
|
|
.skills-list { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); |
|
|
gap: 15px; |
|
|
margin-top: 20px; |
|
|
margin-bottom: 40px; /* Added margin to create space between skills and projects */ |
|
|
} |
|
|
|
|
|
.skill-category { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
border-radius: var(--border-radius-sm); |
|
|
padding: 15px; |
|
|
transition: all var(--transition-med); |
|
|
} |
|
|
|
|
|
.skill-category:hover { |
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.skill-category h4 { |
|
|
margin-top: 0; |
|
|
margin-bottom: 10px; |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.da-section .skill-category h4 { color: var(--primary-da); } |
|
|
.ml-section .skill-category h4 { color: var(--primary-ml); } |
|
|
.cv-section .skill-category h4 { color: var(--primary-cv); } |
|
|
|
|
|
.skill-category ul { |
|
|
margin: 0; |
|
|
padding-left: 20px; |
|
|
color: var(--text-secondary); |
|
|
} |
|
|
|
|
|
.skill-category li { |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
/* Section intro text */ |
|
|
.section-intro { |
|
|
max-width: 800px; |
|
|
margin-bottom: 30px; |
|
|
line-height: 1.6; |
|
|
color: var(--text-secondary); |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
/* Footer */ |
|
|
.footer { |
|
|
text-align: center; |
|
|
padding: 40px 20px; |
|
|
margin-top: 60px; |
|
|
color: var(--text-muted); |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
/* Animations for scroll */ |
|
|
.animate-on-scroll { |
|
|
opacity: 0; |
|
|
transform: translateY(20px); |
|
|
transition: opacity 0.6s ease, transform 0.6s ease; |
|
|
} |
|
|
|
|
|
.animate-on-scroll.show { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
/* Responsive design */ |
|
|
@media (max-width: 768px) { |
|
|
.landing-section h1 { |
|
|
font-size: 2.5rem; |
|
|
} |
|
|
|
|
|
.landing-section h2 { |
|
|
font-size: 1.5rem; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
font-size: 1.1rem; |
|
|
} |
|
|
|
|
|
.cards-grid { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.skills-list { |
|
|
grid-template-columns: 1fr; |
|
|
} |
|
|
|
|
|
.profile-pic { |
|
|
width: 150px; |
|
|
height: 150px; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 480px) { |
|
|
.landing-section h1 { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.landing-section h2 { |
|
|
font-size: 1.2rem; |
|
|
} |
|
|
|
|
|
.card-content { |
|
|
min-height: 150px; |
|
|
font-size: 22px; |
|
|
} |
|
|
|
|
|
.social-links { |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.social-button { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
font-size: 1rem; |
|
|
} |
|
|
} |
|
|
""" |
|
|
|
|
|
|
|
|
with gr.Blocks(title="Manyue's Portfolio", css=portfolio_css) as demo: |
|
|
|
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container da-section") as da_section: |
|
|
with gr.Column(): |
|
|
|
|
|
back_from_da = gr.Button("← Back to Home", elem_classes="back-button back-button-da") |
|
|
gr.HTML(""" |
|
|
<h1 class="section-heading">Data Analytics</h1> |
|
|
<div class="section-intro"> |
|
|
I specialize in transforming raw data into actionable business insights that drive strategic decision-making. |
|
|
With a strong background in both data analytics and commerce, I bridge the gap between business needs and technical solutions. |
|
|
My approach combines statistical analysis with compelling data visualization to tell stories that solve real-world problems. |
|
|
I've developed expertise in designing dashboards that make complex data accessible and creating end-to-end analysis |
|
|
workflows that uncover hidden patterns and trends. |
|
|
</div> |
|
|
""") |
|
|
|
|
|
gr.HTML(""" |
|
|
<h3 class="section-subheading da">Skills</h3> |
|
|
|
|
|
<div class="skills-list"> |
|
|
<div class="skill-category"> |
|
|
<h4>Data Visualization</h4> |
|
|
<ul> |
|
|
<li>Power BI</li> |
|
|
<li>Tableau</li> |
|
|
<li>Matplotlib/Seaborn</li> |
|
|
<li>Plotly/Dash</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Data Manipulation</h4> |
|
|
<ul> |
|
|
<li>SQL</li> |
|
|
<li>Pandas</li> |
|
|
<li>NumPy</li> |
|
|
<li>ETL Pipelines</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Analysis Techniques</h4> |
|
|
<ul> |
|
|
<li>Statistical Analysis</li> |
|
|
<li>A/B Testing</li> |
|
|
<li>Time Series Analysis</li> |
|
|
<li>Customer Segmentation</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Business Intelligence</h4> |
|
|
<ul> |
|
|
<li>KPI Development</li> |
|
|
<li>Executive Reporting</li> |
|
|
<li>Data Storytelling</li> |
|
|
<li>Process Optimization</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="section-subheading da">Projects</h3> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">Northwind Sales Insight Dashboard</span> |
|
|
<a href="https://github.com/Manyue-datascientist/northwind-retail-analysis" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>View Project</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
A business-driven case study where I performed in-depth EDA on the classic Northwind dataset. I uncovered key trends in sales, customer behavior, and product performance, and built a professional dashboard for storytelling using Power BI and SQL. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> SQL, Power BI, Pandas</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">Loan Default Risk Analysis</span> |
|
|
<a href="#" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>View Project</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
A feature-driven analytics project where I identified critical drivers of loan defaults. I applied statistical analysis and visual storytelling to assist in better loan disbursement strategies. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> Python, Matplotlib, Pandas</span> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container ml-section") as ml_section: |
|
|
with gr.Column(): |
|
|
|
|
|
back_from_ml = gr.Button("← Back to Home", elem_classes="back-button back-button-ml") |
|
|
gr.HTML(""" |
|
|
<h1 class="section-heading">Machine Learning</h1> |
|
|
<div class="section-intro"> |
|
|
My machine learning expertise spans from traditional algorithms to deep learning systems that solve real business challenges. |
|
|
I've built end-to-end ML pipelines that deliver measurable impact, combining the right models with appropriate feature engineering |
|
|
techniques. I focus on creating solutions that are not only technically sound but also deployable, maintainable, |
|
|
and integrated with business workflows. With a solid foundation in Python-based ML frameworks and cloud |
|
|
deployment platforms, I develop models that generate actionable predictions and insights. |
|
|
</div> |
|
|
""") |
|
|
|
|
|
gr.HTML(""" |
|
|
<h3 class="section-subheading ml">Skills</h3> |
|
|
|
|
|
<div class="skills-list"> |
|
|
<div class="skill-category"> |
|
|
<h4>Frameworks & Libraries</h4> |
|
|
<ul> |
|
|
<li>TensorFlow/Keras</li> |
|
|
<li>PyTorch</li> |
|
|
<li>Scikit-Learn</li> |
|
|
<li>XGBoost/LightGBM</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>ML Techniques</h4> |
|
|
<ul> |
|
|
<li>Supervised Learning</li> |
|
|
<li>Unsupervised Learning</li> |
|
|
<li>Deep Learning</li> |
|
|
<li>Natural Language Processing</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>MLOps</h4> |
|
|
<ul> |
|
|
<li>ML Pipelines</li> |
|
|
<li>Model Monitoring</li> |
|
|
<li>Deployment Strategies</li> |
|
|
<li>Version Control (DVC)</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Cloud ML Services</h4> |
|
|
<ul> |
|
|
<li>AWS SageMaker</li> |
|
|
<li>Google AI Platform</li> |
|
|
<li>Azure ML</li> |
|
|
<li>MLflow</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="section-subheading ml">Projects</h3> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">University Admission Predictor</span> |
|
|
<a href="#" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>Try the Predictor</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
Built a regression model to predict the chances of a student getting admitted to top universities based on academic profiles. The project includes feature importance analysis, model tuning, and a live demo deployed with Streamlit. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> Scikit-learn, Streamlit, NumPy</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">AI Chat Assistant for Recruiters</span> |
|
|
<a href="https://huggingface.co/spaces/Manyue-DataScientist/AI-Assistant" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>Chat with Assistant</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
A custom-trained assistant that answers queries about my resume and portfolio using NLP and retrieval techniques. Built to simulate real-time interactions with hiring teams, this project showcases my ability to work with large language models and create practical AI applications. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> LangChain, OpenAI, Gradio</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">Speaker Diarization Application</span> |
|
|
<a href="https://huggingface.co/spaces/Manyue-DataScientist/speaker-diarization-app-v2" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>Try the Application</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
Developed an advanced multi-speaker audio processing system that performs speaker diarization, transcription, and summarization to extract meaningful insights from multi-speaker conversations. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> PyTorch, Hugging Face Transformers, Gradio</span> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
|
|
|
with gr.Row(visible=False, elem_classes="section-container cv-section") as cv_section: |
|
|
with gr.Column(): |
|
|
|
|
|
back_from_cv = gr.Button("← Back to Home", elem_classes="back-button back-button-cv") |
|
|
gr.HTML(""" |
|
|
<h1 class="section-heading">Computer Vision</h1> |
|
|
<div class="section-intro"> |
|
|
I'm passionate about developing computer vision systems that can perceive and understand visual information in ways that benefit humans. |
|
|
My experience spans from implementing state-of-the-art algorithms to deploying them in real-world scenarios. I've worked on projects |
|
|
that enable machines to "see" and interpret their environment through image processing, object detection, and image classification. |
|
|
I focus particularly on applications that improve accessibility and solve tangible problems, creating CV solutions |
|
|
that operate efficiently even with hardware constraints. |
|
|
</div> |
|
|
""") |
|
|
|
|
|
gr.HTML(""" |
|
|
<h3 class="section-subheading cv">Skills</h3> |
|
|
|
|
|
<div class="skills-list"> |
|
|
<div class="skill-category"> |
|
|
<h4>CV Techniques</h4> |
|
|
<ul> |
|
|
<li>Object Detection</li> |
|
|
<li>Image Segmentation</li> |
|
|
<li>Feature Extraction</li> |
|
|
<li>Image Classification</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>CV Libraries</h4> |
|
|
<ul> |
|
|
<li>OpenCV</li> |
|
|
<li>PIL/Pillow</li> |
|
|
<li>TorchVision</li> |
|
|
<li>TF Computer Vision</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Deep Learning for CV</h4> |
|
|
<ul> |
|
|
<li>CNNs</li> |
|
|
<li>YOLO frameworks</li> |
|
|
<li>Transfer Learning</li> |
|
|
<li>Object Recognition</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div class="skill-category"> |
|
|
<h4>Applications</h4> |
|
|
<ul> |
|
|
<li>Accessibility Solutions</li> |
|
|
<li>OCR/Document Analysis</li> |
|
|
<li>Motion Tracking</li> |
|
|
<li>Edge Deployment</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<h3 class="section-subheading cv">Projects</h3> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">Smart Shopping Assistant for the Blind</span> |
|
|
<a href="https://github.com/Manyue-datascientist/smart_glove_project" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>View Project</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
Designed a system using object detection and OCR to help visually impaired individuals find products and navigate shopping aisles. Developed with real-time feedback on Raspberry Pi and OAK-D camera, this project demonstrates my commitment to creating technology that solves real accessibility challenges. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> YOLOv8, OpenCV, Raspberry Pi</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="project-card"> |
|
|
<div class="project-title"> |
|
|
<span class="project-title-text">Traffic Flow Counter (Upcoming)</span> |
|
|
<a href="#" target="_blank" class="project-link"> |
|
|
""" + link_icon + """ |
|
|
<span>Coming Soon</span> |
|
|
</a> |
|
|
</div> |
|
|
<div class="project-description"> |
|
|
An edge solution using Raspberry Pi to monitor and count vehicles at intersections, providing real-time traffic flow analytics. This project demonstrates efficient deployment of CV models on resource-constrained devices. |
|
|
<span class="tech-stack"><strong>Tech Stack:</strong> YOLOv5, Raspberry Pi, OpenCV</span> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
with gr.Row(visible=True, elem_classes="landing-section") as landing_section: |
|
|
with gr.Column(): |
|
|
|
|
|
try: |
|
|
|
|
|
profile_img_uri = image_to_data_uri("data/My_photo.jpeg") |
|
|
gr.HTML(f""" |
|
|
<div class="profile-container"> |
|
|
<div class="profile-pic"> |
|
|
<img src="{profile_img_uri}" alt="Manyue Javvadi" /> |
|
|
</div> |
|
|
<div class="name-text">Manyue Javvadi</div> |
|
|
</div> |
|
|
<h2>AI/ML Engineer & Data Scientist</h2> |
|
|
<div class="about-text"> |
|
|
I'm a software engineer turned AI/ML practitioner with a strong foundation in Commerce and experience in ML, computer vision, and data analytics. |
|
|
I blend business understanding with data-driven thinking to create real-world solutions. Currently open to roles in Data Science, Machine Learning Engineering, and Computer Vision. |
|
|
</div> |
|
|
|
|
|
<div class="skills-container"> |
|
|
<div class="skill-pill">Python</div> |
|
|
<div class="skill-pill">Machine Learning</div> |
|
|
<div class="skill-pill">TensorFlow</div> |
|
|
<div class="skill-pill">PyTorch</div> |
|
|
<div class="skill-pill">Computer Vision</div> |
|
|
<div class="skill-pill">Data Analytics</div> |
|
|
<div class="skill-pill">SQL</div> |
|
|
<div class="skill-pill">Power BI</div> |
|
|
</div> |
|
|
|
|
|
<div class="social-links"> |
|
|
<a href="https://www.linkedin.com/in/manyue-javvadi-datascientist/" target="_blank" class="social-button social-linkedin" aria-label="LinkedIn"> |
|
|
""" + linkedin_icon + """ |
|
|
</a> |
|
|
<a href="https://github.com/Manyue-datascientist" target="_blank" class="social-button social-github" aria-label="GitHub"> |
|
|
""" + github_icon + """ |
|
|
</a> |
|
|
<a href="mailto:[email protected]" class="social-button social-email" aria-label="Contact Me" id="contact_btn"> |
|
|
""" + mail_icon + """ |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<h2>My Specializations</h2> |
|
|
""") |
|
|
except Exception as e: |
|
|
|
|
|
gr.HTML(""" |
|
|
<div class="profile-container"> |
|
|
<div class="profile-pic"> |
|
|
<img src="/api/placeholder/400/400" alt="Manyue Javvadi" /> |
|
|
</div> |
|
|
<div class="name-text">Manyue Javvadi</div> |
|
|
</div> |
|
|
<h2>AI/ML Engineer & Data Scientist</h2> |
|
|
<div class="about-text"> |
|
|
I'm a software engineer turned AI/ML practitioner with a strong foundation in Commerce and experience in ML, computer vision, and data analytics. |
|
|
I blend business understanding with data-driven thinking to create real-world solutions. Currently open to roles in Data Science, Machine Learning Engineering, and Computer Vision. |
|
|
</div> |
|
|
|
|
|
<div class="skills-container"> |
|
|
<div class="skill-pill">Python</div> |
|
|
<div class="skill-pill">Machine Learning</div> |
|
|
<div class="skill-pill">TensorFlow</div> |
|
|
<div class="skill-pill">PyTorch</div> |
|
|
<div class="skill-pill">Computer Vision</div> |
|
|
<div class="skill-pill">Data Analytics</div> |
|
|
<div class="skill-pill">SQL</div> |
|
|
<div class="skill-pill">Power BI</div> |
|
|
</div> |
|
|
|
|
|
<div class="social-links"> |
|
|
<a href="https://www.linkedin.com/in/manyue-javvadi-datascientist/" target="_blank" class="social-button social-linkedin" aria-label="LinkedIn"> |
|
|
""" + linkedin_icon + """ |
|
|
</a> |
|
|
<a href="https://github.com/Manyue-datascientist" target="_blank" class="social-button social-github" aria-label="GitHub"> |
|
|
""" + github_icon + """ |
|
|
</a> |
|
|
<a href="mailto:[email protected]" class="social-button social-email" aria-label="Contact Me" id="contact_btn"> |
|
|
""" + mail_icon + """ |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<h2>My Specializations</h2> |
|
|
""") |
|
|
|
|
|
|
|
|
with gr.Row(elem_classes="cards-grid"): |
|
|
with gr.Column(): |
|
|
|
|
|
gr.HTML('<div class="card-container da">') |
|
|
da_button = gr.Button("Data Analytics", elem_classes="card-button") |
|
|
gr.HTML(""" |
|
|
<div class="card-inner"> |
|
|
<div class="card-content"> |
|
|
""" + data_analytics_icon + """ |
|
|
<span>Data Analytics</span> |
|
|
</div> |
|
|
<div class="card-description"> |
|
|
Data storytelling, insights extraction, interactive dashboards & business problem-solving |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
with gr.Column(): |
|
|
|
|
|
gr.HTML('<div class="card-container ml">') |
|
|
ml_button = gr.Button("Machine Learning", elem_classes="card-button") |
|
|
gr.HTML(""" |
|
|
<div class="card-inner"> |
|
|
<div class="card-content"> |
|
|
""" + machine_learning_icon + """ |
|
|
<span>Machine Learning</span> |
|
|
</div> |
|
|
<div class="card-description"> |
|
|
Feature engineering, model training, deployment & automation pipelines |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
with gr.Column(): |
|
|
|
|
|
gr.HTML('<div class="card-container cv">') |
|
|
cv_button = gr.Button("Computer Vision", elem_classes="card-button") |
|
|
gr.HTML(""" |
|
|
<div class="card-inner"> |
|
|
<div class="card-content"> |
|
|
""" + computer_vision_icon + """ |
|
|
<span>Computer Vision</span> |
|
|
</div> |
|
|
<div class="card-description"> |
|
|
Object detection, image recognition, edge AI & accessibility applications |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
|
|
|
gr.HTML(""" |
|
|
<!-- Contact section --> |
|
|
<div id="contact_section"> |
|
|
<h2>Contact Me</h2> |
|
|
<div class="contact-container"> |
|
|
<p>Looking for a data scientist or ML engineer for your team?</p> |
|
|
<a href="mailto:[email protected]" class="hire-me-button">Hire Me</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<!-- Footer --> |
|
|
<div class="footer"> |
|
|
<p>© 2025 Manyue Javvadi. All rights reserved.</p> |
|
|
<p>Made with Gradio</p> |
|
|
</div> |
|
|
""") |
|
|
|
|
|
|
|
|
da_button.click(show_data_analytics, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
ml_button.click(show_machine_learning, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
cv_button.click(show_computer_vision, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
|
|
|
back_from_da.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
back_from_ml.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
back_from_cv.click(go_home, inputs=None, outputs=[landing_section, da_section, ml_section, cv_section]) |
|
|
|
|
|
|
|
|
demo.launch() |
