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'

{text}

' def build_hero(): return f"""

{NAME}

{TITLE}

📍 {LOCATION}  |  ✉️ {EMAIL}  |  📞 {PHONE}

🔗 LinkedIn  |  🤗 Hugging Face

""" def build_experience(): items = "" for job in EXPERIENCE: points = "".join(f"
  • {p}
    • " for p in job["points"]) items += f"""

    {job['role']}

    {job['org']}
    {job['period']}
    """ return items def build_projects(): cards = "" for p in PROJECTS: cards += f"""

    {p['emoji']} {p['title']}

    {p['stack']}

    {p['desc']}

    """ return cards def build_skills(): blocks = "" for group, items in SKILLS.items(): pills = "".join(f'{s}' for s in items) blocks += f"""

    {group}

    {pills}
    """ return blocks def build_education_certs(): certs = "".join(f"
  • {c}
    • " for c in CERTIFICATIONS) return f"""

    🎓 {EDUCATION['degree']}

    {EDUCATION['school']}
    {EDUCATION['period']}

    📜 Certifications

    """ def build_footer(): return f""" """ # ------------------------------------------------------------------ # 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()