Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,246 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+import base64
+from openai import OpenAI
+from datetime import datetime
 
-"""
-# Welcome to Streamlit!
+# Page configuration - MUST be first Streamlit command
+st.set_page_config(
+    page_title="Gen AI Learniverse - Project 17: AI Product Design Generator",
+    layout="centered",
+    page_icon="🧪"
+)
+
+# API Key Input Section
+st.markdown("### 🔑 OpenAI API Configuration")
+api_key_input = st.text_input(
+    "Enter your OpenAI API Key",
+    type="password",
+    placeholder="sk-...",
+    help="Get your API key from https://platform.openai.com/api-keys"
+)
+
+# Initialize OpenAI client with UI input
+client = None
+if api_key_input:
+    try:
+        client = OpenAI(api_key=api_key_input)
+        st.success("✅ API key provided successfully!")
+    except Exception as e:
+        st.error(f"❌ Invalid API key: {str(e)}")
+        st.stop()
+
+def create_enhanced_prompt(description, style, background):
+    """Create an optimized prompt for GPT Image"""
+
+    style_modifiers = {
+        "Photorealistic": "photorealistic, high-definition, commercial photography quality",
+        "Minimalist": "clean minimalist design, simple geometric forms, uncluttered",
+        "Premium": "luxury premium materials, high-end finish, sophisticated design",
+        "Industrial": "industrial design aesthetic, functional form, raw materials",
+        "Eco-friendly": "sustainable materials, natural textures, environmentally conscious design",
+        "Futuristic": "cutting-edge futuristic design, sleek surfaces, advanced technology",
+        "Retro": "vintage-inspired design, classic proportions, nostalgic elements"
+    }
+
+    background_settings = {
+        "White Studio": "clean white studio background with soft professional lighting",
+        "Wooden Table": "natural wood surface with warm ambient lighting",
+        "Marble Counter": "elegant marble surface with subtle veining and reflections",
+        "Gradient": "smooth gradient background transitioning from light to dark",
+        "Natural Light": "soft natural daylight with gentle shadows",
+        "Dark Dramatic": "dark moody background with dramatic accent lighting"
+    }
 
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+    prompt = f"""
+Product design visualization: {description.strip()}
 
-In the meantime, below is an example of what you can do with just a few lines of code:
+Style requirements:
+- {style_modifiers.get(style, style.lower())} aesthetic
+- {background_settings.get(background, background.lower())}
+- Professional product photography composition
+- Sharp focus with appropriate depth of field
+- Consistent lighting that highlights product features and materials
+
+Technical specifications:
+- Center the product in frame with balanced composition
+- Include subtle reflections and shadows for realism
+- Maintain accurate proportions and scale
+- Ensure all product details are clearly visible
+- Use studio-quality lighting setup
+
+Render as a catalog-ready product image with commercial photography standards.
 """
 
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+    return prompt
+
+def generate_product_design(description, style, background, size, quality, transparent):
+    """Generate product design with improved prompting"""
+
+    with st.spinner("🎨 Creating your product design... This may take up to 2 minutes for complex designs."):
+
+        # Parse size selection
+        size_map = {
+            "1024x1024 (Square)": "1024x1024",
+            "1536x1024 (Landscape)": "1536x1024",
+            "1024x1536 (Portrait)": "1024x1536"
+        }
+        selected_size = size_map[size]
+
+        # Enhanced prompt engineering
+        prompt = create_enhanced_prompt(description, style, background)
+
+        try:
+            # Prepare generation parameters
+            gen_params = {
+                "model": "gpt-image-1",
+                "prompt": prompt,
+                "size": selected_size,
+                "quality": quality,
+                "n": 1
+            }
+
+            # Add transparency if requested and compatible
+            if transparent and quality in ["medium", "high"]:
+                gen_params["background"] = "transparent"
+                st.info("🎯 Generating with transparent background")
+
+            # Generate image
+            result = client.images.generate(**gen_params)
+
+            # Process and display result
+            image_base64 = result.data[0].b64_json
+            image_bytes = base64.b64decode(image_base64)
+
+            # Display with better formatting
+            st.success("✅ Product design generated successfully!")
+
+            col_img, col_info = st.columns([3, 1])
+
+            with col_img:
+                st.image(
+                    image_bytes,
+                    caption=f"🎨 {style} Product Design",
+                    use_column_width=True
+                )
+
+            with col_info:
+                st.markdown("**Generation Details:**")
+                st.text(f"Size: {selected_size}")
+                st.text(f"Quality: {quality}")
+                st.text(f"Style: {style}")
+                if transparent and quality in ["medium", "high"]:
+                    st.text("Background: Transparent")
+
+            # Download options
+            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+            filename = f"product_design_{timestamp}.png"
+
+            st.download_button(
+                label="📥 Download High-Quality Image",
+                data=image_bytes,
+                file_name=filename,
+                mime="image/png",
+                help="Save your generated product design"
+            )
+
+        except Exception as e:
+            st.error(f"❌ Generation failed: {str(e)}")
+
+            # Provide helpful error guidance
+            if "rate limit" in str(e).lower():
+                st.info("🕒 Rate limit reached. Please wait a moment before trying again.")
+            elif "content policy" in str(e).lower():
+                st.warning("⚠️ Your prompt may have triggered content filters. Try rephrasing your description.")
+            else:
+                st.info("💡 Try simplifying your description or reducing the quality setting.")
+
+#Main UI
+st.title("Project 17: @GENAILearniverse -  AI Product Design Prototype Generator")
+st.markdown("Transform your product ideas into stunning visual prototypes using GPT Image!")
+
+# Only show main interface if API key is provided
+if client:
+    # Create tabs for better organization
+    tab1, tab2 = st.tabs(["🎨 Generate Design", "ℹ️ Tips & Examples"])
+
+    with tab1:
+        # User input with better validation
+        product_description = st.text_area(
+            "Describe Your Product Idea",
+            height=120,
+            placeholder="E.g., A sleek wireless charging pad with a transparent glass surface and glowing LED indicators, featuring a minimalist circular design",
+            help="Be specific about materials, colors, shapes, and key features"
+        )
+
+        # Enhanced options in columns
+        col1, col2, col3 = st.columns(3)
+
+        with col1:
+            style = st.selectbox(
+                "Design Style",
+                ["Photorealistic", "Minimalist", "Premium", "Industrial", "Eco-friendly", "Futuristic", "Retro"]
+            )
+
+        with col2:
+            background = st.selectbox(
+                "Background Setting",
+                ["White Studio", "Wooden Table", "Marble Counter", "Gradient", "Natural Light", "Dark Dramatic"]
+            )
+
+        with col3:
+            image_size = st.selectbox(
+                "Image Size",
+                ["1024x1024 (Square)", "1536x1024 (Landscape)", "1024x1536 (Portrait)"],
+                help="Square is fastest to generate"
+            )
+
+        # Advanced options in expander
+        with st.expander("🔧 Advanced Settings"):
+            col_adv1, col_adv2 = st.columns(2)
+
+            with col_adv1:
+                quality = st.selectbox(
+                    "Quality Level",
+                    ["auto", "high", "medium", "low"],
+                    help="Higher quality takes longer but produces better results"
+                )
+
+            with col_adv2:
+                transparent_bg = st.checkbox(
+                    "Transparent Background",
+                    help="Only works with PNG format and medium/high quality"
+                )
+
+        # Generate button with validation
+        if st.button("🚀 Generate Product Design", type="primary"):
+            if not product_description.strip():
+                st.error("Please describe your product idea first!")
+            else:
+                generate_product_design(product_description, style, background, image_size, quality, transparent_bg)
+
+    with tab2:
+        st.markdown("""
+        ### 💡 Tips for Better Results
+
+        **Be Specific:**
+        - Include materials (glass, metal, plastic, wood)
+        - Mention colors and finishes (matte black, glossy white, brushed aluminum)
+        - Describe size and proportions
+        - Add functional details (buttons, screens, ports)
+
+        **Example Prompts:**
+        - "A compact bluetooth speaker with fabric mesh front, rounded corners, and copper accents"
+        - "An ergonomic computer mouse with RGB lighting strips and textured grip surfaces"
+        - "A sleek water bottle with bamboo cap and measurement markings on the side"
+
+        **Style Guide:**
+        - **Photorealistic**: Perfect for marketing materials
+        - **Minimalist**: Clean, simple designs
+        - **Premium**: Luxury feel with high-end materials
+        - **Industrial**: Raw, functional aesthetic
+        """)
+
+else:
+    st.info("👆 Please enter your OpenAI API key above to get started!")
+
+