app.py

import gradio as gr

# ------------------------------------------------------------------
#  ZeroGPU support
#  On Hugging Face Spaces, set the Space hardware to "ZeroGPU" and the
#  `spaces` package (already in requirements.txt) will hand any function
#  decorated with @GPU a GPU for the duration of the call, then release
#  it automatically. Locally (or on CPU-only Spaces) the import fails
#  gracefully and the decorator becomes a harmless no-op.
# ------------------------------------------------------------------
try:
    import spaces

    GPU = spaces.GPU
except ImportError:
    def GPU(func=None, **kwargs):
        """No-op fallback so the app still runs without the `spaces` package."""
        if func is None:
            return lambda f: f
        return func

# ------------------------------------------------------------------
#  DATA — edit this section to update your portfolio content
# ------------------------------------------------------------------

NAME = "Muhammad Umar Farooq"
TITLE = "AI Application Developer  |  Machine Learning Engineer  |  Computer Vision & NLP"
LOCATION = "Dera Ghazi Khan, Punjab, Pakistan"
EMAIL = "umarfarooqi6969@gmail.com"
PHONE = "+92 332 0418888"
LINKEDIN = "https://www.linkedin.com/in/muhammadumar-farooq-6964a430b"
HUGGINGFACE = "https://huggingface.co/UMAR798"

SUMMARY = (
    "AI undergraduate and Machine Learning Engineer focused on building and deploying real, "
    "usable Computer Vision and NLP applications with Python, PyTorch, Hugging Face, OpenCV, "
    "and Streamlit. Shipped an AI Financial Advisor, a YOLOv8 object detection system (93% mAP, "
    "25 FPS live video), a multilingual translator, and a deployed AI chatbot. NCEAC–HEC "
    "certified in Generative AI Application Development, with a track record of independently "
    "designing, training, and deploying end-to-end AI products and closing the gap between "
    "research and real-world use."
)

EXPERIENCE = [
    {
        "role": "AI Engineer (AI Frontend Engineering Intern)",
        "org": "FlyRank AI",
        "period": "June 2026 – Present, Pakistan",
        "points": [
            "Build and ship responsive, AI-powered web applications, integrating machine learning "
            "and generative AI APIs into functional, user-facing products end-to-end.",
            "Partner with design and engineering to translate model outputs into intuitive "
            "interfaces, prioritizing UX so AI features feel native rather than bolted on.",
        ],
    },
    {
        "role": "Artificial Intelligence Intern",
        "org": "CodeAlpha",
        "period": "June 2026 – July 2026, Remote",
        "points": [
            "Independently designed, trained, and deployed 3 AI projects — a conversational NLP "
            "chatbot, a YOLO-based object detection system, and a multilingual AI translator.",
            "Applied the full ML lifecycle per project — data preprocessing, model training, "
            "testing, and evaluation — strengthening core Python, deep learning, and NLP skills.",
        ],
    },
    {
        "role": "Web Developer",
        "org": "Red Star LLC",
        "period": "July 2025 – September 2025, Islamabad, Pakistan",
        "points": [
            "Built and shipped full-stack responsive websites using HTML, CSS, Bootstrap, "
            "Tailwind CSS, and JavaScript, converting design mockups into production-ready code.",
            "Improved integration reliability by 40% through structured REST API handling, and "
            "cut bug resolution time by 25% via code review checkpoints and clean Git/GitHub "
            "workflows.",
        ],
    },
]

PROJECTS = [
    {
        "title": "AI Finance Advisor",
        "stack": "Python · LangChain · OpenAI API · Flask",
        "desc": "Conversational agent delivering personalized savings/financial recommendations; "
        "<3s response time, 85% user satisfaction in testing.",
        "emoji": "💰",
    },
    {
        "title": "StockSense — ML Stock Prediction App",
        "stack": "scikit-learn · Plotly · Gradio",
        "desc": "15+ technical indicators, 3 ML models forecasting up to 90 days ahead, interactive "
        "dashboard.",
        "emoji": "📈",
    },
    {
        "title": "YOLOv8 Object Detection & Tracking",
        "stack": "YOLO · OpenCV · PyTorch · Streamlit",
        "desc": "Real-time detection achieving 93% mAP, processing live video at 25 FPS.",
        "emoji": "🎯",
    },
    {
        "title": "AI Language Translator",
        "stack": "Hugging Face Transformers",
        "desc": "Multilingual translation app with a clean front end, deployed to Hugging Face "
        "Spaces.",
        "emoji": "🌐",
    },
]

EDUCATION = {
    "degree": "Bachelor of Technology, Artificial Intelligence",
    "school": "The Islamia University of Bahawalpur",
    "period": "September 2024 – June 2028",
}

CERTIFICATIONS = [
    "Generative AI Application Developer — UETIANS Lahore Endowment Foundation, in "
    "collaboration with NCEAC, HEC, Pak Angels, iCode Guru & Aspire Pakistan; "
    "Promising Performer Award (Cohort 3), issued 30 May 2026.",
    "Google AI Fundamentals",
]

SKILLS = {
    "AI & ML": ["Python", "PyTorch", "TensorFlow", "Hugging Face", "Transformers", "LangChain",
                "OpenAI API", "scikit-learn", "OpenCV", "YOLO/Ultralytics", "Gradio", "EDA"],
    "Development": ["React", "JavaScript", "HTML/CSS", "Streamlit", "Flask", "REST APIs",
                    "Git & GitHub", "Pandas", "NumPy", "Plotly", "MERN Stack"],
    "Tools & Platforms": ["Hugging Face Spaces", "Google Colab", "Jupyter Notebook", "VS Code"],
}

# ------------------------------------------------------------------
#  THEME & STYLE
# ------------------------------------------------------------------

THEME = gr.themes.Soft(
    primary_hue=gr.themes.colors.violet,
    secondary_hue=gr.themes.colors.cyan,
    neutral_hue=gr.themes.colors.slate,
    font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"],
    font_mono=[gr.themes.GoogleFont("JetBrains Mono"), "ui-monospace", "monospace"],
).set(
    body_background_fill="*neutral_950",
    body_background_fill_dark="*neutral_950",
    block_background_fill="*neutral_900",
    block_background_fill_dark="*neutral_900",
    block_border_width="1px",
    block_border_color="*neutral_800",
    block_border_color_dark="*neutral_800",
    block_radius="18px",
    button_primary_background_fill="linear-gradient(90deg, #8b5cf6, #06b6d4)",
    button_primary_background_fill_hover="linear-gradient(90deg, #7c3aed, #0891b2)",
    button_primary_text_color="white",
)

CUSTOM_CSS = """
:root {
    --grad-main: linear-gradient(120deg, #7c3aed 0%, #a855f7 35%, #06b6d4 100%);
}

.gradio-container {
    max-width: 1080px !important;
    margin: auto !important;
}

/* ---------- Hero ---------- */
#hero {
    background: var(--grad-main);
    border-radius: 24px;
    padding: 46px 40px;
    text-align: center;
    box-shadow: 0 20px 45px -15px rgba(124, 58, 237, 0.55);
    border: none !important;
}
#hero h1 {
    color: #ffffff !important;
    font-size: 2.6rem;
    font-weight: 800;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
#hero h3 {
    color: rgba(255,255,255,0.92) !important;
    font-weight: 500;
    margin-top: 0;
}
#hero p {
    color: rgba(255,255,255,0.85) !important;
}
#hero a { color: #fff !important; text-decoration: underline; }

/* ---------- Section headers ---------- */
.section-title h2 {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--grad-main);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
    margin-bottom: 4px;
    border-bottom: 2px solid #7c3aed44;
    padding-bottom: 6px;
}

/* ---------- Cards ---------- */
.card {
    border-radius: 18px !important;
    padding: 20px 22px !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #ffffff14 !important;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px -10px rgba(124, 58, 237, 0.45);
    border-color: #8b5cf655 !important;
}
.card h3 { margin-top: 0; margin-bottom: 4px; font-size: 1.15rem; }
.card .stack { color: #06b6d4; font-size: 0.85rem; font-weight: 600; margin-bottom: 8px; }

/* ---------- Skill pills ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pill {
    background: linear-gradient(90deg, #7c3aed22, #06b6d422);
    border: 1px solid #8b5cf655;
    color: #e9d5ff;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 500;
}

/* ---------- Timeline ---------- */
.timeline-item {
    border-left: 3px solid #8b5cf6;
    padding-left: 18px;
    margin-bottom: 18px;
    position: relative;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--grad-main);
    box-shadow: 0 0 0 4px #7c3aed22;
}
.timeline-item h3 { margin-bottom: 2px; }
.timeline-item .org { color: #06b6d4; font-weight: 600; }
.timeline-item .period { color: #9ca3af; font-size: 0.85rem; margin-bottom: 8px; }

/* ---------- Footer ---------- */
#footer {
    text-align: center;
    padding: 24px;
    color: #9ca3af;
    font-size: 0.9rem;
}
#footer a { color: #a855f7; }
"""

# ------------------------------------------------------------------
#  HTML BUILDERS
# ------------------------------------------------------------------

def section_title(text):
    return f'<div class="section-title"><h2>{text}</h2></div>'


def build_hero():
    return f"""
    <div id="hero">
        <h1>{NAME}</h1>
        <h3>{TITLE}</h3>
        <p>📍 {LOCATION} &nbsp;|&nbsp; ✉️ <a href="mailto:{EMAIL}">{EMAIL}</a> &nbsp;|&nbsp; 📞 {PHONE}</p>
        <p>
            <a href="{LINKEDIN}" target="_blank">🔗 LinkedIn</a> &nbsp;|&nbsp;
            <a href="{HUGGINGFACE}" target="_blank">🤗 Hugging Face</a>
        </p>
    </div>
    """


def build_experience():
    items = ""
    for job in EXPERIENCE:
        points = "".join(f"<li>{p}</li>" for p in job["points"])
        items += f"""
        <div class="timeline-item">
            <h3>{job['role']}</h3>
            <div class="org">{job['org']}</div>
            <div class="period">{job['period']}</div>
            <ul>{points}</ul>
        </div>
        """
    return items


def build_projects():
    cards = ""
    for p in PROJECTS:
        cards += f"""
        <div class="card">
            <h3>{p['emoji']} {p['title']}</h3>
            <div class="stack">{p['stack']}</div>
            <p>{p['desc']}</p>
        </div>
        """
    return cards


def build_skills():
    blocks = ""
    for group, items in SKILLS.items():
        pills = "".join(f'<span class="pill">{s}</span>' for s in items)
        blocks += f"""
        <div class="card" style="margin-bottom:16px;">
            <h3>{group}</h3>
            <div class="pill-row">{pills}</div>
        </div>
        """
    return blocks


def build_education_certs():
    certs = "".join(f"<li>{c}</li>" for c in CERTIFICATIONS)
    return f"""
    <div class="card" style="margin-bottom:16px;">
        <h3>🎓 {EDUCATION['degree']}</h3>
        <div class="org">{EDUCATION['school']}</div>
        <div class="period">{EDUCATION['period']}</div>
    </div>
    <div class="card">
        <h3>📜 Certifications</h3>
        <ul>{certs}</ul>
    </div>
    """


def build_footer():
    return f"""
    <div id="footer">
        <p>Built with ❤️ using Gradio &nbsp;·&nbsp; © {NAME} 2026</p>
        <p><a href="{LINKEDIN}" target="_blank">LinkedIn</a> &nbsp;·&nbsp;
           <a href="{HUGGINGFACE}" target="_blank">Hugging Face</a> &nbsp;·&nbsp;
           <a href="mailto:{EMAIL}">Email</a></p>
    </div>
    """


# ------------------------------------------------------------------
#  CONTACT FORM HANDLER (demo only — no backend email sending)
# ------------------------------------------------------------------

@GPU
def handle_contact(name, email, message):
    if not name or not email or not message:
        return "⚠️ Please fill in all fields before sending."
    return (
        f"✅ Thanks, {name}! Your message has been noted. "
        f"For a direct reply, please email {EMAIL} — this demo form doesn't send real emails."
    )


# ------------------------------------------------------------------
#  APP
# ------------------------------------------------------------------

with gr.Blocks(theme=THEME, css=CUSTOM_CSS, title=f"{NAME} — Portfolio") as demo:
    gr.HTML(build_hero())

    gr.HTML(section_title("📝 About Me"))
    gr.Markdown(SUMMARY)

    gr.HTML(section_title("💼 Work Experience"))
    gr.HTML(build_experience())

    gr.HTML(section_title("🚀 Projects"))
    with gr.Row():
        gr.HTML(build_projects())

    gr.HTML(section_title("🛠️ Skills"))
    gr.HTML(build_skills())

    gr.HTML(section_title("🎓 Education & Certifications"))
    gr.HTML(build_education_certs())

    gr.HTML(section_title("📬 Get In Touch"))
    with gr.Row():
        with gr.Column(scale=1):
            contact_name = gr.Textbox(label="Your Name", placeholder="Jane Doe")
            contact_email = gr.Textbox(label="Your Email", placeholder="jane@example.com")
            contact_message = gr.Textbox(label="Message", lines=4, placeholder="Let's work together...")
            send_btn = gr.Button("Send Message", variant="primary")
        with gr.Column(scale=1):
            contact_output = gr.Markdown("")

    send_btn.click(
        fn=handle_contact,
        inputs=[contact_name, contact_email, contact_message],
        outputs=contact_output,
    )

    gr.HTML(build_footer())

if __name__ == "__main__":
    demo.launch()