Update src/app.py

src/app.py

@@ -1,65 +1,155 @@
 import streamlit as st
 import random
+from io import BytesIO
+from PIL import Image, ImageDraw, ImageFont
 
-# Page config
-st.set_page_config(
-    page_title="AI Name Magic - Procelevate",
-    page_icon="✨",
-    layout="centered"
-)
+# ---------- CONFIG ----------
+BRAND = "#0F2C59"          # Procelevate navy
+ACCENT = "#00FFFF"         # Cyan glow
+PINK = "#FF00FF"           # Magenta glow
+
+st.set_page_config(page_title="AI Name Magic - Procelevate", page_icon="✨", layout="centered")
 
-# --- Branding Header ---
-st.image("src/procelevate_logo.png", width=150)
+# ---------- HEADER ----------
 st.markdown(
-    """
-    <h1 style='color:#0F2C59; text-align:center;'>
-        AI Name Magic ✨
-    </h1>
-    <h4 style='text-align:center; color:#444;'>
-        Powered by <span style="color:#0F2C59;">Procelevate Consulting</span>
-    </h4>
+    f"""
+    <div style="text-align:center; margin-top:10px;">
+      <h1 style="margin:0; color:{BRAND};">AI Name Magic ✨</h1>
+      <div style="font-size:20px; color:#1f2937;">Powered by <b style="color:{BRAND};">Procelevate Consulting</b></div>
+    </div>
+    <hr style="opacity:.2;"/>
     """,
-    unsafe_allow_html=True
+    unsafe_allow_html=True,
 )
 
-st.markdown("---")
-
-# --- Input Section ---
-st.subheader("🔮 Type Your Name & See AI Magic")
-name = st.text_input("Enter your name:")
+# ---------- INPUT ----------
+with st.form("name_form", clear_on_submit=False):
+    st.subheader("🔮 Type Your Name & See AI Magic")
+    name = st.text_input("Enter your name:")
+    submitted = st.form_submit_button("Show My AI Prediction 🚀")
 
-# Fun fact pool
+# ---------- FUN FACTS ----------
 facts = [
     "AI predicts you’ll be a Future Innovator 🚀",
-    "Your name glows with creativity 🌟",
-    "You might be the Next Data Scientist 📊",
+    "You have the next big idea that transform the world 💡",
+    "You might be the Next Data Scientist / Data Engineer 📊",
     "AI says you’ll shape the Future of Tech 🤖",
-    "Leadership is in your DNA 💡",
-    "AI foresees a great journey ahead 🌍"
+    "Leadership and technology is in your DNA 🌟",
+    "AI foresees the future CEO / CTO of a biggest company...! 🌍",
 ]
 
-if name:
-    styled_name = f"🌌 {name.upper()} 🌌"
+def make_card(name_text: str, fact_text: str) -> bytes:
+    """Create a branded PNG 'Future Me Card'."""
+    W, H = 1200, 630
+    img = Image.new("RGB", (W, H), (15,44,89))  # #0F2C59 background
+    draw = ImageDraw.Draw(img)
+
+    # subtle gradient overlay
+    grad = Image.new("RGB", (W, H))
+    for y in range(H):
+        c = int(255 * (y / H) * 0.18)  # very light cyan tint
+        grad.putpixel((0, y), (0, 180, 180 - c))
+    grad = grad.resize((W, H))
+    img = Image.blend(img, grad, 0.15)
+    draw = ImageDraw.Draw(img)
+
+    # Load logo if available
+    try:
+        logo = Image.open("src/procelevate_logo.png").convert("RGBA")
+        base = 140
+        logo = logo.resize((base, base))
+        img.paste(logo, (50, 50), logo)
+    except Exception:
+        pass
+
+    # Fallback fonts (Pillow will map to system fonts in slim image)
+    try:
+        title_font = ImageFont.truetype("DejaVuSans-Bold.ttf", 70)
+        name_font  = ImageFont.truetype("DejaVuSans-Bold.ttf", 120)
+        fact_font  = ImageFont.truetype("DejaVuSans.ttf", 46)
+    except:
+        title_font = ImageFont.load_default()
+        name_font  = ImageFont.load_default()
+        fact_font  = ImageFont.load_default()
+
+    # Title
+    title = "YOUR AI PREDICTION"
+    tw, th = draw.textlength(title, font=title_font), title_font.size
+    draw.rounded_rectangle([(400, 70), (400+tw+60, 70+th+40)], radius=18, fill=(255,255,255))
+    draw.text((430, 90), title, font=title_font, fill=(15,44,89))
+
+    # Name (neon effect)
+    name_text = name_text.upper()
+    nx, ny = 120, 260
+    # Magenta / cyan shadow
+    draw.text((nx+6, ny+6), name_text, font=name_font, fill=(255,0,255))
+    draw.text((nx-6, ny-6), name_text, font=name_font, fill=(0,255,255))
+    draw.text((nx, ny), name_text, font=name_font, fill=(255,255,255))
+
+    # Fact
+    fact_box_y = ny + 170
+    draw.rounded_rectangle([(80, fact_box_y), (W-80, fact_box_y+170)], radius=24, fill=(255,255,255))
+    draw.text((110, fact_box_y+55), f"✨ {fact_text}", font=fact_font, fill=(15,44,89))
+
+    # Footer
+    footer = "© Procelevate Academy • Learn -> Transform -> Elevate."
+    fw, _ = draw.textlength(footer, font=ImageFont.truetype("DejaVuSans.ttf", 28)), 28
+    draw.text(((W-fw)//2, H-60), footer, font=ImageFont.truetype("DejaVuSans.ttf", 28), fill=(230,240,245))
+
+    buf = BytesIO()
+    img.save(buf, format="PNG")
+    buf.seek(0)
+    return buf.getvalue()
+
+# ---------- OUTPUT ----------
+if submitted and name.strip():
+    fact = random.choice(facts)
+
+    # Confetti 🎈
+    st.balloons()
+
+    # Neon Name Banner
     st.markdown(
         f"""
-        <h2 style='color:#0F2C59;
-                   text-shadow: 2px 2px #00FFFF, -2px -2px #FF00FF;
-                   font-size: 42px;
-                   text-align:center;'>
-            {styled_name}
-        </h2>
+        <div style="
+            margin: 10px auto 0 auto;
+            max-width: 820px;
+            text-align:center;
+            padding: 18px 22px;
+            border-radius: 16px;
+            background:
+                radial-gradient(circle at 20% 10%, rgba(0,255,255,.25), transparent 40%),
+                radial-gradient(circle at 80% 0%, rgba(255,0,255,.25), transparent 35%),
+                linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
+            border: 2px solid #e6eef7;">
+          <div style="font-size:14px; letter-spacing:1px; color:{BRAND}; font-weight:700;
+                      display:inline-block; padding:6px 12px; border-radius:999px; background:#e6f3ff; margin-bottom:8px;">
+            YOUR AI PREDICTION
+          </div>
+          <h1 style="margin:4px 0 8px 0; font-size:56px; color:{BRAND};
+                     text-shadow: 2px 2px {ACCENT}, -2px -2px {PINK};">
+            {name.upper()}
+          </h1>
+          <div style="font-size:22px; color:#0b2239; padding:12px 16px; border-radius:12px;
+                      background:#f0f9ff; display:inline-block;">
+            ✨ {fact}
+          </div>
+        </div>
         """,
-        unsafe_allow_html=True
+        unsafe_allow_html=True,
     )
 
-    st.success(random.choice(facts))
-    st.info("📸 Take a picture of this screen to save your AI Magic moment!")
+    # Build and show downloadable card
+    png_bytes = make_card(name, fact)
+    st.download_button("⬇️ Download My Future Me Card (PNG)", data=png_bytes,
+                       file_name=f"{name.replace(' ','_')}_future_me.png", mime="image/png")
+
+    st.caption("Tip: Save the card or share it with your friends!")
+elif submitted:
+    st.warning("Please enter your name first 🙂")
 
-# --- Footer ---
-st.markdown("---")
+st.markdown("<hr style='opacity:.2;'/>", unsafe_allow_html=True)
 st.markdown(
-    "<p style='text-align:center; font-size:14px;'>"
-    "© 2025 Procelevate Consulting | Elevating Processes. Empowering People."
-    "</p>",
+    "<p style='text-align:center; font-size:14px;'>© 2025 Procelevate Consulting</p>",
     unsafe_allow_html=True
 )