Create app.py

app.py

@@ -66,6 +66,14 @@ st.markdown("""
         border-radius: 5px;
         margin-bottom: 20px;
     }
+    .placeholder-area {
+        border: 2px dashed #ddd;
+        border-radius: 10px;
+        padding: 40px;
+        text-align: center;
+        background-color: #f8f9fa;
+        color: #666;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -85,92 +93,58 @@ if "prompt_history" not in st.session_state:
 if "image_history" not in st.session_state:
     st.session_state["image_history"] = []
 
-# IMPORTANT: In a real application, this would be securely stored in environment variables or secrets management
-# For demonstration purposes only, we're using a placeholder value
-OPENAI_API_KEY = st.secrets.get("OPENAI_API_KEY", "YOUR_API_KEY_STORED_IN_SECRETS")
+# Get API key from secrets
+OPENAI_API_KEY = st.secrets.get("OPENAI_API_KEY", "")
 
 # Functions
-def generate_image_from_prompt(prompt, api_key=OPENAI_API_KEY, model="gpt-4o"):
+def generate_image_from_prompt(prompt, api_key=OPENAI_API_KEY):
+    """Generate image using OpenAI's DALL-E API"""
+    if not api_key or api_key == "YOUR_API_KEY_STORED_IN_SECRETS":
+        return {"success": False, "message": "OpenAI API key not configured. Please add your API key to Hugging Face Spaces secrets."}
+    
     headers = {
         "Content-Type": "application/json",
         "Authorization": f"Bearer {api_key}"
     }
     
-    # Create a system message directing the model to create high-quality marketing graphics,
-    # with specific emphasis on lead magnets if not specified
-    system_message = """You are an expert graphic designer specialized in creating professional marketing and lead magnet materials.
-    You excel at creating attention-grabbing graphics that convert viewers into leads and customers.
-    
-    When creating lead magnets or marketing graphics:
-    1. Make text highly readable with strong contrast against backgrounds
-    2. Use a clear visual hierarchy to guide the viewer's eye
-    3. Include compelling visual elements that reinforce the value proposition
-    4. Ensure the design conveys professionalism and trustworthiness
-    5. Position call-to-action elements prominently
-    
-    If the user hasn't specified certain design elements, use your expertise to:
-    - Choose appropriate color schemes that evoke the right emotional response for the topic
-    - Select fonts that match the industry and target audience
-    - Add visual elements that enhance the message without cluttering
-    - Create a composition that works well for digital marketing purposes"""
-    
-    # Enhance the user's prompt with specific guidance for marketing images
-    enhanced_prompt = f"""Create a professional lead magnet or marketing graphic that will drive conversions based on this description:
+    # Enhanced prompt for marketing graphics
+    enhanced_prompt = f"""Create a professional, high-quality lead magnet or marketing graphic with the following specifications:
 
 {prompt}
 
-Even if details are minimal, create a complete, professional design making appropriate assumptions.
-Make this graphic immediately usable as a marketing asset with:
-1. Attention-grabbing visual elements
-2. Clear, compelling text hierarchy
-3. Professional design elements that inspire trust
-4. Perfect readability with appropriate contrast and spacing
-5. A composition that drives the viewer toward the call-to-action
+Design requirements:
+- Make text highly readable with strong contrast
+- Use professional color schemes and typography
+- Include compelling visual elements that reinforce the value proposition
+- Ensure the design conveys professionalism and trustworthiness
+- Create a composition optimized for digital marketing
+- Make it immediately usable as a marketing asset that drives conversions
 
-The image should look like it was created by an expert marketing designer specifically to generate leads and conversions.
-"""
+The final image should look like it was created by an expert marketing designer specifically to generate leads and customer engagement."""
+    
+    # Determine image size based on aspect ratio
+    size = "1024x1024"  # Default square
     
     data = {
-        "model": model,
-        "messages": [
-            {"role": "system", "content": system_message},
-            {"role": "user", "content": enhanced_prompt}
-        ],
-        "max_tokens": 4096
+        "model": "dall-e-3",
+        "prompt": enhanced_prompt,
+        "n": 1,
+        "size": size,
+        "quality": "standard"
     }
     
     try:
         response = requests.post(
-            "https://api.openai.com/v1/chat/completions",
+            "https://api.openai.com/v1/images/generations",
             headers=headers,
-            json=data
+            json=data,
+            timeout=60
         )
         
         if response.status_code == 200:
             response_data = response.json()
-            content = response_data["choices"][0]["message"]["content"]
-            
-            # Extract image URL if present
-            if "![" in content and "](" in content:
-                image_url = content.split("](")[1].split(")")[0]
-                if image_url.startswith("https://"):
-                    return {"success": True, "image_url": image_url, "message": "Image generated successfully!"}
-            
-            # If using the newer image generation where the image is embedded in the response
-            if "image_url" in content or "data:image" in content:
-                # For newer versions where image content might be directly embedded
-                image_matches = re.findall(r'(https://[^\s]+\.(?:png|jpg|jpeg|gif))', content)
-                if image_matches:
-                    return {"success": True, "image_url": image_matches[0], "message": "Image generated successfully!"}
-                elif "data:image" in content:
-                    # Handle base64 encoded image if present
-                    base64_match = re.search(r'data:image/[^;]+;base64,([^"]+)', content)
-                    if base64_match:
-                        base64_data = base64_match.group(1)
-                        return {"success": True, "image_data": base64_data, "message": "Image generated successfully!"}
-                        
-            return {"success": False, "message": "Could not extract image from response. The model may need additional prompting."}
-            
+            image_url = response_data["data"][0]["url"]
+            return {"success": True, "image_url": image_url, "message": "Image generated successfully!"}
         else:
             error_message = f"API Error: {response.status_code}"
             if response.text:
@@ -181,6 +155,9 @@ The image should look like it was created by an expert marketing designer specif
                 except:
                     error_message += f" - {response.text[:200]}"
             return {"success": False, "message": error_message}
+            
+    except requests.exceptions.Timeout:
+        return {"success": False, "message": "Request timed out. Please try again."}
     except Exception as e:
         return {"success": False, "message": f"Error: {str(e)}"}
 
@@ -252,9 +229,9 @@ with col1:
         ]
         
         for i, example in enumerate(example_prompts):
-            if st.button(f"Example {i+1}", key=f"example_{i}"):
+            if st.button(f"Use Example {i+1}", key=f"example_{i}"):
                 st.session_state["example_prompt"] = example
-                st.experimental_rerun()
+                st.rerun()
         
         st.markdown('</div>', unsafe_allow_html=True)
     
@@ -292,61 +269,58 @@ with col1:
         st.markdown('</div>', unsafe_allow_html=True)
     
     # Build the prompt
-    if "current_prompt" in st.session_state:
-        complete_prompt = st.session_state["current_prompt"]
-        del st.session_state["current_prompt"]
-    else:
-        # Simplified prompt building
-        if quick_description:
-            prompt_parts = [quick_description]
+    if quick_description:
+        prompt_parts = [quick_description]
+        
+        # Add business info if provided
+        if 'business_name' in locals() and business_name:
+            prompt_parts.append(f"Business Name: {business_name}")
+        if 'business_type' in locals() and business_type:
+            prompt_parts.append(f"Business Type: {business_type}")
             
-            # Add business info if provided
-            if 'business_name' in locals() and business_name:
-                prompt_parts.append(f"Business Name: {business_name}")
-            if 'business_type' in locals() and business_type:
-                prompt_parts.append(f"Business Type: {business_type}")
-                
-            # Add style info if provided
-            if 'color_scheme' in locals() and color_scheme:
-                prompt_parts.append(f"Color Scheme: {color_scheme}")
-            if 'image_style' in locals() and image_style == "Custom" and 'custom_style' in locals() and custom_style:
-                prompt_parts.append(f"Style: {custom_style}")
-            elif 'image_style' in locals() and image_style != "Custom":
-                prompt_parts.append(f"Style: {image_style}")
-                
-            # Add aspect ratio
-            if "Square" in aspect_ratio:
-                prompt_parts.append("Create a square (1:1) image")
-            elif "Landscape" in aspect_ratio:
-                prompt_parts.append("Create a landscape (16:9) format image")
-            elif "Portrait" in aspect_ratio:
-                prompt_parts.append("Create a portrait (9:16) format image")
-            elif "Social Media" in aspect_ratio:
-                prompt_parts.append("Optimize dimensions for social media sharing")
+        # Add style info if provided
+        if 'color_scheme' in locals() and color_scheme:
+            prompt_parts.append(f"Color Scheme: {color_scheme}")
+        if 'image_style' in locals() and image_style == "Custom" and 'custom_style' in locals() and custom_style:
+            prompt_parts.append(f"Style: {custom_style}")
+        elif 'image_style' in locals() and image_style != "Custom":
+            prompt_parts.append(f"Style: {image_style}")
             
-            # Add special instructions if provided
-            if 'special_instructions' in locals() and special_instructions:
-                prompt_parts.append(special_instructions)
-                
-            complete_prompt = ". ".join(prompt_parts)
-        else:
-            complete_prompt = ""
+        # Add aspect ratio
+        if "Square" in aspect_ratio:
+            prompt_parts.append("Create a square (1:1) image")
+        elif "Landscape" in aspect_ratio:
+            prompt_parts.append("Create a landscape (16:9) format image")
+        elif "Portrait" in aspect_ratio:
+            prompt_parts.append("Create a portrait (9:16) format image")
+        elif "Social Media" in aspect_ratio:
+            prompt_parts.append("Optimize dimensions for social media sharing")
+        
+        # Add special instructions if provided
+        if 'special_instructions' in locals() and special_instructions:
+            prompt_parts.append(special_instructions)
+            
+        complete_prompt = ". ".join(prompt_parts)
+    else:
+        complete_prompt = ""
     
     # Generate button
     generate_button = st.button(
         "🎨 Generate My Graphic",
-        disabled=not quick_description,
+        disabled=not quick_description or not OPENAI_API_KEY,
         use_container_width=True
     )
     
     if not quick_description:
         st.info("Please describe what type of lead magnet or marketing graphic you want to create")
+    elif not OPENAI_API_KEY:
+        st.error("OpenAI API key not configured. Please add your API key to Hugging Face Spaces secrets.")
 
 # Display generated image
 with col2:
     st.markdown('<div class="custom-subheader">Generated Graphic</div>', unsafe_allow_html=True)
     
-    if generate_button:
+    if generate_button and complete_prompt and OPENAI_API_KEY:
         with st.spinner("Creating your graphic... This may take up to 60 seconds"):
             # Save the prompt to history
             if complete_prompt not in st.session_state["prompt_history"]:
@@ -358,25 +332,15 @@ with col2:
             result = generate_image_from_prompt(complete_prompt)
             
             if result["success"]:
-                # Handle image URL or base64 data
-                if "image_url" in result:
-                    try:
-                        response = requests.get(result["image_url"])
-                        img = Image.open(BytesIO(response.content))
-                        st.session_state["generated_image"] = img
-                    except Exception as e:
-                        st.error(f"Error loading image: {str(e)}")
-                elif "image_data" in result:
-                    try:
-                        img_data = base64.b64decode(result["image_data"])
-                        img = Image.open(BytesIO(img_data))
-                        st.session_state["generated_image"] = img
-                    except Exception as e:
-                        st.error(f"Error decoding image: {str(e)}")
+                try:
+                    response = requests.get(result["image_url"])
+                    img = Image.open(BytesIO(response.content))
+                    st.session_state["generated_image"] = img
+                    st.success("✅ Image generated successfully!")
+                except Exception as e:
+                    st.error(f"Error loading image: {str(e)}")
             else:
                 st.error(result["message"])
-                if "API key" in result["message"]:
-                    st.warning("There was an issue with the API key. Please try again or contact support.")
     
     if st.session_state["generated_image"] is not None:
         st.markdown('<div class="generated-image">', unsafe_allow_html=True)
@@ -407,30 +371,27 @@ with col2:
                     result = generate_image_from_prompt(complete_prompt)
                     
                     if result["success"]:
-                        if "image_url" in result:
-                            try:
-                                response = requests.get(result["image_url"])
-                                img = Image.open(BytesIO(response.content))
-                                st.session_state["generated_image"] = img
-                            except Exception as e:
-                                st.error(f"Error loading image: {str(e)}")
-                        elif "image_data" in result:
-                            try:
-                                img_data = base64.b64decode(result["image_data"])
-                                img = Image.open(BytesIO(img_data))
-                                st.session_state["generated_image"] = img
-                            except Exception as e:
-                                st.error(f"Error decoding image: {str(e)}")
+                        try:
+                            response = requests.get(result["image_url"])
+                            img = Image.open(BytesIO(response.content))
+                            st.session_state["generated_image"] = img
+                            st.success("✅ Image regenerated successfully!")
+                        except Exception as e:
+                            st.error(f"Error loading image: {str(e)}")
                     else:
                         st.error(result["message"])
     else:
-        st.info("Your generated graphic will appear here. Describe what you want in the text area and click 'Generate My Graphic'.")
-        # Placeholder image
-        st.image("https://via.placeholder.com/800x800.png?text=Your+Graphic+Will+Appear+Here", use_column_width=True)
+        # Custom placeholder instead of external image
+        st.markdown("""
+        <div class="placeholder-area">
+            <h3>🎨 Your Graphic Will Appear Here</h3>
+            <p>Describe what you want in the text area and click 'Generate My Graphic' to create your marketing graphic.</p>
+        </div>
+        """, unsafe_allow_html=True)
 
 # Footer with simplified disclaimer
 st.markdown("""
 <div class="footnote">
-    <p><strong>Note:</strong> This tool uses OpenAI's latest 4o Image Generation technology to create high-quality marketing graphics and lead magnets. For best results, be specific about what type of lead magnet or marketing content you're creating.</p>
+    <p><strong>Note:</strong> This tool uses OpenAI's DALL-E 3 technology to create high-quality marketing graphics and lead magnets. For best results, be specific about what type of lead magnet or marketing content you're creating.</p>
 </div>
 """, unsafe_allow_html=True)