Spaces:
Sleeping
Sleeping
| 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} | ✉️ <a href="mailto:{EMAIL}">{EMAIL}</a> | 📞 {PHONE}</p> | |
| <p> | |
| <a href="{LINKEDIN}" target="_blank">🔗 LinkedIn</a> | | |
| <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 · © {NAME} 2026</p> | |
| <p><a href="{LINKEDIN}" target="_blank">LinkedIn</a> · | |
| <a href="{HUGGINGFACE}" target="_blank">Hugging Face</a> · | |
| <a href="mailto:{EMAIL}">Email</a></p> | |
| </div> | |
| """ | |
| # ------------------------------------------------------------------ | |
| # CONTACT FORM HANDLER (demo only — no backend email sending) | |
| # ------------------------------------------------------------------ | |
| 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() |