Update app.py

app.py

@@ -13,42 +13,84 @@ import json
 os.environ['REPLICATE_API_TOKEN'] = os.getenv('REPLICATE_API_TOKEN')
 FIREWORKS_API_KEY = os.getenv('FIREWORKS_API_KEY', '')
 
-def enhance_prompt(user_input):
+def enhance_prompt_with_team(user_input):
     """
-    Enhance user prompt using Fireworks AI to create detailed creative design prompts
+    Enhanced prompt generation using team collaboration approach:
+    Director -> Engineer (with web search) -> Designer
     """
     if not FIREWORKS_API_KEY:
-        # If no API key, return the original prompt
         return user_input
     
     try:
         url = "https://api.fireworks.ai/inference/v1/chat/completions"
         
-        system_prompt = """You are a creative design prompt engineer. Transform user input into detailed, creative design prompts.
-        Format your response as a structured design concept following this pattern:
-        - Start with a clear main concept description
-        - Include specific design elements with bullet points
-        - Mention materials, textures, or finishes
-        - Specify artistic style or rendering technique
-        - Add atmospheric or contextual details
-        
-        Example format:
-        "A sleek industrial design concept for [object]:
-        - Curved metallic body with minimal bezel
-        - Touchscreen panel for settings
-        - Modern matte black finish
-        - Hand-drawn concept sketch style"
+        # Team collaboration system prompt
+        system_prompt = """You are a product design team consisting of three roles working in sequence:
+
+## TEAM COLLABORATION PROCESS:
+
+### 1. DIRECTOR (Creative Vision Leader)
+The Director analyzes the user's input and establishes:
+- Core product category and target market
+- Key functional requirements
+- Design philosophy and brand positioning
+- Initial design direction and constraints
+- Questions for the engineering team
+
+### 2. ENGINEER (Technical Feasibility Expert)
+The Engineer responds to the Director's vision by:
+- Researching current technologies and materials
+- Identifying manufacturing possibilities
+- Suggesting innovative technical features
+- Evaluating feasibility of proposed concepts
+- Providing data on similar successful products
+- Recommending technical specifications
+
+### 3. DESIGNER (Visual Design Specialist)
+The Designer synthesizes all inputs to create the final prompt:
+- Translating technical specs into visual language
+- Adding aesthetic details and finishing touches
+- Specifying materials, textures, and colors
+- Defining the rendering style
+- Creating the complete visual description
+
+## OUTPUT FORMAT:
+Structure the team discussion as follows:
+
+**DIRECTOR'S VISION:**
+[Director's analysis and initial direction]
+
+**ENGINEER'S TECHNICAL ASSESSMENT:**
+[Research findings and technical recommendations]
+
+**DIRECTOR'S REFINEMENT:**
+[Approval/modification of engineering inputs]
+
+**DESIGNER'S FINAL PROMPT:**
+[Complete product design prompt with all visual details]
+
+Focus exclusively on PHYSICAL PRODUCT DESIGN - no services, apps, or abstract concepts.
+Examples: furniture, electronics, vehicles, appliances, tools, wearables, etc."""
         
-        Be creative, detailed, and specific. Focus on visual design elements."""
+        # Create the collaborative dialogue
+        user_prompt = f"""Create a product design for: {user_input}
+
+Execute the full team collaboration process:
+1. Director establishes the vision
+2. Engineer researches and provides technical input (simulate web research findings)
+3. Director refines based on engineering feedback
+4. Designer creates the final detailed visual prompt
+
+Remember: Focus ONLY on physical product design."""
         
         payload = {
             "model": "accounts/fireworks/models/qwen3-235b-a22b-instruct-2507",
-            "max_tokens": 300,
-            "top_p": 1,
+            "max_tokens": 800,
+            "top_p": 0.9,
             "top_k": 40,
-            "presence_penalty": 0,
-            "frequency_penalty": 0,
-            "temperature": 0.7,
+            "presence_penalty": 0.3,
+            "frequency_penalty": 0.2,
+            "temperature": 0.8,
             "messages": [
                 {
                     "role": "system",
@@ -56,7 +98,7 @@ def enhance_prompt(user_input):
                 },
                 {
                     "role": "user",
-                    "content": f"Create a detailed creative design prompt for: {user_input}"
+                    "content": user_prompt
                 }
             ]
         }
@@ -67,25 +109,30 @@ def enhance_prompt(user_input):
             "Authorization": f"Bearer {FIREWORKS_API_KEY}"
         }
         
-        response = requests.post(url, headers=headers, data=json.dumps(payload), timeout=10)
+        response = requests.post(url, headers=headers, data=json.dumps(payload), timeout=15)
         
         if response.status_code == 200:
             result = response.json()
             enhanced = result.get('choices', [{}])[0].get('message', {}).get('content', '')
             if enhanced:
+                # Extract only the designer's final prompt from the response
+                if "DESIGNER'S FINAL PROMPT:" in enhanced:
+                    parts = enhanced.split("DESIGNER'S FINAL PROMPT:")
+                    if len(parts) > 1:
+                        return parts[1].strip()
                 return enhanced
         
         return user_input
         
     except Exception as e:
-        print(f"Prompt enhancement error: {str(e)}")
+        print(f"Team collaboration error: {str(e)}")
         return user_input
 
 def upload_image_to_hosting(image):
     """
     Upload image to multiple hosting services with fallback
     """
-    # Method 1: Try imgbb.com (most reliable)
+    # Method 1: Try imgbb.com
     try:
         buffered = BytesIO()
         image.save(buffered, format="PNG")
@@ -107,7 +154,7 @@ def upload_image_to_hosting(image):
     except:
         pass
     
-    # Method 2: Try 0x0.st (simple and reliable)
+    # Method 2: Try 0x0.st
     try:
         buffered = BytesIO()
         image.save(buffered, format="PNG")
@@ -128,25 +175,33 @@ def upload_image_to_hosting(image):
     img_base64 = base64.b64encode(buffered.getvalue()).decode()
     return f"data:image/png;base64,{img_base64}"
 
-def process_images(prompt, enhance_prompt_flag, image1, image2=None):
+def process_product_design(prompt, enhance_prompt_flag, image1, image2=None):
     """
-    Process with Creative Design - works with or without images
+    Process product design with team collaboration approach
     """
     if not os.getenv('REPLICATE_API_TOKEN'):
-        return None, prompt, "Please set REPLICATE_API_TOKEN"
+        return None, prompt, "Please set REPLICATE_API_TOKEN", ""
     
     try:
-        # Enhance prompt if requested
+        # Store team discussion for display
+        team_discussion = ""
+        
+        # Enhance prompt with team collaboration if requested
         final_prompt = prompt
         if enhance_prompt_flag:
-            final_prompt = enhance_prompt(prompt)
+            # This will contain the full team discussion
+            full_response = enhance_prompt_with_team(prompt)
+            final_prompt = full_response
+            
+            # Store the discussion for display
+            team_discussion = f"🎬 **Director → Engineer → Designer Collaboration**\n\n{full_response}"
         
         # Prepare input for model
         model_input = {
             "prompt": final_prompt
         }
         
-        # Only add image_input if images are provided
+        # Add style reference images if provided
         if image1 or image2:
             image_urls = []
             
@@ -159,10 +214,9 @@ def process_images(prompt, enhance_prompt_flag, image1, image2=None):
                 image_urls.append(url2)
             
             model_input["image_input"] = image_urls
-            status_msg = "✨ Creative design generated with style transfer!"
+            status_msg = "🏭 Product design generated with style references!"
         else:
-            # No images - text-only generation
-            status_msg = "✨ Creative design generated from text!"
+            status_msg = "🏭 Product design generated from concept!"
         
         # Run model
         output = replicate.run(
@@ -171,14 +225,14 @@ def process_images(prompt, enhance_prompt_flag, image1, image2=None):
         )
         
         if output is None:
-            return None, final_prompt, "No output received"
+            return None, final_prompt, "No output received", team_discussion
         
         # Get the generated image
         try:
             if hasattr(output, 'read'):
                 img_data = output.read()
                 img = Image.open(BytesIO(img_data))
-                return img, final_prompt, status_msg
+                return img, final_prompt, status_msg, team_discussion
         except:
             pass
         
@@ -188,7 +242,7 @@ def process_images(prompt, enhance_prompt_flag, image1, image2=None):
                 response = requests.get(output_url, timeout=30)
                 if response.status_code == 200:
                     img = Image.open(BytesIO(response.content))
-                    return img, final_prompt, status_msg
+                    return img, final_prompt, status_msg, team_discussion
         except:
             pass
         
@@ -202,29 +256,29 @@ def process_images(prompt, enhance_prompt_flag, image1, image2=None):
             response = requests.get(output_url, timeout=30)
             if response.status_code == 200:
                 img = Image.open(BytesIO(response.content))
-                return img, final_prompt, status_msg
+                return img, final_prompt, status_msg, team_discussion
         
-        return None, final_prompt, "Could not process output"
+        return None, final_prompt, "Could not process output", team_discussion
         
     except Exception as e:
         error_msg = str(e)
         if "image_input" in error_msg.lower():
-            return None, prompt, "Note: This model may require at least one image. Try uploading an image or check the error: " + error_msg[:100]
-        return None, prompt, f"Error: {error_msg[:100]}"
+            return None, prompt, "Note: Model may require at least one image.", ""
+        return None, prompt, f"Error: {error_msg[:100]}", ""
 
-# Enhanced CSS with Creative Design theme
+# Enhanced CSS for Product Design focus
 css = """
 .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     min-height: 100vh;
 }
 .header-container {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+    background: linear-gradient(135deg, #434343 0%, #000000 100%);
     padding: 2.5rem;
     border-radius: 24px;
     margin-bottom: 2.5rem;
-    box-shadow: 0 20px 60px rgba(240, 147, 251, 0.35);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
 }
 .logo-text {
     font-size: 3.5rem;
@@ -233,35 +287,36 @@ css = """
     text-align: center;
     margin: 0;
     letter-spacing: -2px;
-    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
 }
 .subtitle {
-    color: white;
+    color: #e0e0e0;
     text-align: center;
-    font-size: 1.1rem;
+    font-size: 1.2rem;
     margin-top: 0.5rem;
-    opacity: 0.95;
+    font-weight: 300;
 }
 .mode-indicator {
-    background: rgba(255, 255, 255, 0.25);
+    background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 12px;
-    padding: 0.6rem 1.2rem;
+    padding: 0.8rem 1.5rem;
     margin-top: 1rem;
     text-align: center;
     font-weight: 600;
-    color: white;
+    color: #ffd700;
+    border: 1px solid rgba(255, 215, 0, 0.3);
 }
 .main-content {
-    background: rgba(255, 255, 255, 0.97);
+    background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     border-radius: 24px;
     padding: 2.5rem;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
 }
 .gr-button-primary {
-    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
-    border: none !important;
+    background: linear-gradient(135deg, #434343 0%, #000000 100%) !important;
+    border: 2px solid #ffd700 !important;
     color: white !important;
     font-weight: 700 !important;
     font-size: 1.1rem !important;
@@ -275,114 +330,61 @@ css = """
 }
 .gr-button-primary:hover {
     transform: translateY(-3px) !important;
-    box-shadow: 0 15px 40px rgba(245, 87, 108, 0.4) !important;
+    box-shadow: 0 15px 40px rgba(255, 215, 0, 0.3) !important;
+    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%) !important;
+    color: #000 !important;
 }
 .gr-input, .gr-textarea {
     background: #ffffff !important;
-    border: 2px solid #e1e8ed !important;
-    border-radius: 14px !important;
+    border: 2px solid #d0d0d0 !important;
+    border-radius: 12px !important;
     color: #2d3436 !important;
     font-size: 1rem !important;
     padding: 0.8rem 1rem !important;
 }
 .gr-input:focus, .gr-textarea:focus {
-    border-color: #f093fb !important;
-    box-shadow: 0 0 0 4px rgba(240, 147, 251, 0.15) !important;
-}
-.gr-form {
-    background: transparent !important;
-    border: none !important;
-}
-.gr-panel {
-    background: #ffffff !important;
-    border: 2px solid #e1e8ed !important;
-    border-radius: 16px !important;
-    padding: 1.5rem !important;
-}
-.gr-box {
-    border-radius: 14px !important;
-    border-color: #e1e8ed !important;
-}
-label {
-    color: #636e72 !important;
-    font-weight: 600 !important;
-    font-size: 0.85rem !important;
-    text-transform: uppercase;
-    letter-spacing: 0.5px;
-    margin-bottom: 0.5rem !important;
+    border-color: #434343 !important;
+    box-shadow: 0 0 0 4px rgba(67, 67, 67, 0.1) !important;
 }
-.status-text {
-    font-family: 'SF Mono', 'Monaco', monospace;
-    color: #00b894;
+.team-discussion {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+    border-radius: 12px;
+    padding: 1.5rem;
+    margin-top: 1rem;
+    border-left: 4px solid #434343;
+    font-family: 'Monaco', 'Courier New', monospace;
     font-size: 0.9rem;
-}
-.image-container {
-    border-radius: 14px !important;
-    overflow: hidden;
-    border: 2px solid #e1e8ed !important;
-    background: #fafbfc !important;
-}
-footer {
-    display: none !important;
-}
-.image-upload {
-    min-height: 200px !important;
-    max-height: 200px !important;
-}
-.output-image {
-    min-height: 420px !important;
-    max-height: 420px !important;
-}
-.gr-row {
-    gap: 1rem !important;
-}
-.gr-column {
-    gap: 1rem !important;
+    max-height: 400px;
+    overflow-y: auto;
 }
 .info-box {
-    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%);
+    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
     border-radius: 12px;
     padding: 1rem;
     margin-bottom: 1rem;
-    border-left: 4px solid #f5576c;
-    color: #2d3436;
+    border-left: 4px solid #000;
+    color: #000;
+    font-weight: 500;
 }
 .enhanced-prompt-box {
-    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
+    background: #f0f0f0;
     border-radius: 12px;
     padding: 1rem;
     margin-top: 1rem;
-    border-left: 4px solid #f093fb;
+    border-left: 4px solid #ffd700;
 }
-.gr-checkbox {
-    background: white !important;
+footer {
+    display: none !important;
 }
 """
 
 with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
     with gr.Column(elem_classes="header-container"):
         gr.HTML("""
-            <h1 class="logo-text">🎨 Creative Design</h1>
-            <p class="subtitle">AI-Powered Creative Design Generation & Style Transfer</p>
+            <h1 class="logo-text">🏭 PRODUCT DESIGN STUDIO</h1>
+            <p class="subtitle">AI-Powered Industrial & Product Design System</p>
             <div class="mode-indicator">
-                💡 Intelligent prompt enhancement for stunning creative designs!
-            </div>
-            <div style="display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 20px;">
-                <a href="https://huggingface.co/spaces/ginigen/Nano-Banana-PRO" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=CREATIVE%20DESIGN&message=PRO&color=%23f093fb&labelColor=%23764ba2&logo=HUGGINGFACE&logoColor=white&style=for-the-badge" alt="badge">
-                </a>    
-                <a href="https://huggingface.co/spaces/openfree/Nano-Banana-Upscale" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=CREATIVE%20DESIGN&message=UPSCALE&color=%23f093fb&labelColor=%23764ba2&logo=GOOGLE&logoColor=white&style=for-the-badge" alt="Creative Design Upscale">
-                </a>                    
-                <a href="https://huggingface.co/spaces/aiqtech/Nano-Banana-API" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=CREATIVE%20DESIGN&message=API&color=%23f093fb&labelColor=%23764ba2&logo=GOOGLE&logoColor=white&style=for-the-badge" alt="Creative Design API">
-                </a>
-                <a href="https://huggingface.co/spaces/ginigen/Nano-Banana-Video" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=CREATIVE%20DESIGN&message=VIDEO&color=%23f093fb&labelColor=%23764ba2&logo=GOOGLE&logoColor=white&style=for-the-badge" alt="Creative Design VIDEO">
-                </a>                    
-                <a href="https://discord.gg/openfreeai" target="_blank">
-                    <img src="https://img.shields.io/static/v1?label=Discord&message=Openfree%20AI&color=%23f093fb&labelColor=%23764ba2&logo=discord&logoColor=white&style=for-the-badge" alt="Discord Openfree AI">
-                </a>
+                👥 Team Collaboration: Director → Engineer → Designer
             </div>
         """)
 
@@ -390,11 +392,11 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
         # Info box
         gr.HTML("""
             <div class="info-box">
-                <strong>🚀 How to use Creative Design:</strong><br>
-                • <b>Simple Input:</b> Enter a basic idea or concept<br>
-                • <b>AI Enhancement:</b> Enable prompt enhancement for detailed creative designs<br>
-                • <b>Style Transfer:</b> Add images to apply specific visual styles<br>
-                • The AI transforms simple ideas into professional design concepts!
+                <strong>🎯 Professional Product Design Process:</strong><br>
+                • <b>Director:</b> Establishes design vision and requirements<br>
+                • <b>Engineer:</b> Researches technology and feasibility<br>
+                • <b>Designer:</b> Creates detailed visual specifications<br>
+                • Focus: Physical products only (electronics, furniture, vehicles, tools, etc.)
             </div>
         """)
         
@@ -402,35 +404,35 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
             # Left Column - Inputs
             with gr.Column(scale=1):
                 prompt = gr.Textbox(
-                    label="Design Concept / Idea",
-                    placeholder="e.g., 'modern coffee machine', 'futuristic chair', 'minimalist lamp'...",
+                    label="Product Concept",
+                    placeholder="Examples: 'ergonomic office chair', 'smart home speaker', 'electric bicycle', 'modular kitchen appliance'...",
                     lines=3,
-                    value="sleek smartphone design",
+                    value="professional mechanical keyboard",
                     elem_classes="prompt-input"
                 )
                 
                 enhance_prompt_checkbox = gr.Checkbox(
-                    label="🎨 Enhance Prompt with AI (Create detailed design prompt)",
+                    label="👥 Enable Team Collaboration (Director + Engineer + Designer)",
                     value=True,
-                    info="Transform simple ideas into professional design prompts"
+                    info="Activates multi-role design process with technical research"
                 )
                 
                 with gr.Row(equal_height=True):
                     image1 = gr.Image(
-                        label="Style Reference 1 (Optional)",
+                        label="Style/Material Reference 1",
                         type="pil",
                         height=200,
-                        elem_classes="image-container image-upload"
+                        elem_classes="image-container"
                     )
                     image2 = gr.Image(
-                        label="Style Reference 2 (Optional)",
+                        label="Style/Material Reference 2",
                         type="pil",
                         height=200,
-                        elem_classes="image-container image-upload"
+                        elem_classes="image-container"
                     )
                 
                 generate_btn = gr.Button(
-                    "Create Design ✨",
+                    "Generate Product Design 🏭",
                     variant="primary",
                     size="lg"
                 )
@@ -438,19 +440,19 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
             # Right Column - Output
             with gr.Column(scale=1):
                 output_image = gr.Image(
-                    label="Generated Design",
+                    label="Product Design Visualization",
                     type="pil",
                     height=420,
-                    elem_classes="image-container output-image"
+                    elem_classes="image-container"
                 )
                 
                 enhanced_prompt_display = gr.Textbox(
-                    label="Enhanced Creative Prompt",
+                    label="Final Design Specifications",
                     interactive=False,
                     lines=4,
                     elem_classes="enhanced-prompt-box",
                     visible=True,
-                    value="Your enhanced prompt will appear here..."
+                    value="Design specifications will appear here..."
                 )
                 
                 status = gr.Textbox(
@@ -458,30 +460,40 @@ with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
                     interactive=False,
                     lines=1,
                     elem_classes="status-text",
-                    value="Ready to create amazing designs..."
+                    value="Ready to design products..."
                 )
+        
+        # Team Discussion Display
+        with gr.Row():
+            team_discussion_display = gr.Markdown(
+                label="Team Collaboration Process",
+                value="",
+                elem_classes="team-discussion"
+            )
     
     # Event handler
     generate_btn.click(
-        fn=process_images,
+        fn=process_product_design,
         inputs=[prompt, enhance_prompt_checkbox, image1, image2],
-        outputs=[output_image, enhanced_prompt_display, status]
+        outputs=[output_image, enhanced_prompt_display, status, team_discussion_display]
     )
     
-    # Creative Design Examples
+    # Product Design Examples
     gr.Examples(
         examples=[
-            ["minimalist desk lamp", True, None, None],
-            ["futuristic motorcycle", True, None, None],
-            ["organic architecture building", True, None, None],
-            ["smart home assistant device", True, None, None],
-            ["eco-friendly water bottle", True, None, None],
-            ["modular furniture system", True, None, None],
-            ["wearable health monitor", True, None, None],
-            ["urban electric scooter", True, None, None],
+            ["ergonomic gaming mouse", True, None, None],
+            ["portable coffee maker", True, None, None],
+            ["modular storage system", True, None, None],
+            ["smart bicycle helmet", True, None, None],
+            ["industrial power tool", True, None, None],
+            ["luxury watch design", True, None, None],
+            ["compact home gym equipment", True, None, None],
+            ["sustainable packaging solution", True, None, None],
+            ["professional camera lens", True, None, None],
+            ["electric vehicle charging station", True, None, None],
         ],
         inputs=[prompt, enhance_prompt_checkbox, image1, image2],
-        label="Creative Design Examples (AI will enhance these into detailed prompts!)"
+        label="Product Design Examples (Team will collaborate on these concepts)"
     )
 
 # Launch