import streamlit as st
from PIL import Image


# Load images
logo_image = Image.open("img/fireworksai_logo.png")
parameters_1_image = Image.open("img/parameters_1.png")
parameters_2_image = Image.open("img/parameters_2.png")
parameters_3_image = Image.open("img/parameters_3.png")
parameters_4_image = Image.open("img/parameters_4.png")
card_with_message_1_image = Image.open("img/card_with_message_1.png")
card_with_message_2_image = Image.open("img/card_with_message_2.png")


# Fireworks Logo at the top
st.image(logo_image)

# Title of the app
st.title("🎨 Flux Holiday Magic: Custom Card Creator")


# Description using Streamlit text and markdown
st.markdown("""
Welcome to the ultimate holiday card design experience! 🎄❄️ 
Powered by **Flux models** through **Fireworks API**, this app lets you effortlessly create stunning, personalized holiday cards with just a few clicks. Here’s what each page allows you to do:
""")

# Overview of the pages with descriptions
# Divider for sections
st.divider()
st.markdown("""
### 1. **Generate Holiday Postcard: 🎇 FLUX-tastic Holiday Postcard Generator 🎨**
Get ready to make your holiday greetings pop with a personalized, AI-generated postcard! 🎅🎨 No more boring, store-bought cards. Customize a dazzling holiday scene with your own snazzy message and festive designs, brought to life by **FLUX models**.
**How it works:**
- Choose a holiday-themed prompt or write your own 🎉
- Select a FLUX model to bring your vision to life ✨
- Customize with fonts, text backgrounds, and colors 🎨
- Generate and share your festive masterpiece with friends and family 📬
""")
st.markdown("""
![Holiday Vibes](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExMXo5Y3RhOGNzaTkzZHFmandsZmF0MW9jNHN4M3VjMjdpOGhyYnRxMSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/637gfK5GJdv552H9ab/giphy.gif)
""")

# Divider for sections
st.divider()
st.markdown("""
### 2. **Generate Multiple Holiday Borders: 🎨 Holiday Multi-Card Generator 🎨**
This page is your first stop for crafting a holiday card with multiple festive border designs. 🌟 Play around with different styles, prompts, and parameters to design the perfect card border before adding your message in the next step.
**How it works:**
- 🖼️ **Upload Your Image**: Choose the image that will be the centerpiece of your card.
- ✂️ **Crop & Adjust**: Fine-tune the crop to highlight the most important parts of your image.
- 💡 **Choose Your Style**: Select from festive borders or input your own custom prompt.
- ⚙️ **Tweak**: Experiment with guidance scales, seeds, inference steps, and more for the perfect aesthetic.
- 👀 **Preview & Download**: See your designs, tweak them, and download them as a ZIP file.
After perfecting your border, head over to Part B to add a personal message!
            """)
col1, col2 = st.columns(2)

with col1:
    st.image(parameters_1_image)
    st.image(parameters_3_image)

with col2:
    st.image(parameters_2_image)
    st.image(parameters_4_image)

# Divider for sections
st.divider()

st.markdown("""
### 3. **Customize Holiday Borders: 🎄 Holiday Card Customizer 🎅**
✨ Welcome to the final part of your holiday card creation journey! It’s time to add a festive border and a personal message to your card.
**How it works:**
- 🎁 **Upload Your Image**: Select a photo or design to be the star of your holiday card.
- ✨ **Design Your Holiday Border**: Choose from seasonal prompts or create a unique custom border.
- 💌 **Add Your Personal Message**: Write a heartfelt, funny, or warm message to spread holiday cheer.
- 📦 **Download Your Finished Card**: Ready to send to friends and family as a gift of joy! 🎉
            """)

col3, col4 = st.columns(2)
with col3:
    st.image(card_with_message_1_image)
with col4:
    st.image(card_with_message_2_image)

# Footer Section
st.divider()
st.markdown(
    """
    Thank you for using the Holiday Card Generator powered by **Fireworks**! 🎉  
    Share your creations with the world and spread the holiday cheer!  
    Happy Holidays from the **Fireworks Team**. 💥  
    """
)