Update app.py

app.py

@@ -1,18 +1,27 @@
 import gradio as gr
+import openai
 from openai import OpenAI
 import os
 
-# Initialize OpenAI client
+# Initialize OpenAI client - for Hugging Face Spaces
 api_key = os.getenv("OPENAI_API_KEY")
 if not api_key:
-    raise ValueError("OPENAI_API_KEY not found in environment variables.")
+    raise ValueError("OPENAI_API_KEY not found in environment variables. Please set it in the Space secrets.")
+    
+# Debug: Print first few characters to verify format (remove this after testing)
+print(f"API Key format check: {api_key[:10]}...") 
 
 client = OpenAI(api_key=api_key)
 
 def generate_business_concept(item1, item2, market1, market2):
+    """
+    Generate a business concept using two items and two target markets
+    """
+    # Validate inputs
     if not all([item1, item2, market1, market2]):
         return "Please provide all four inputs: two items and two target markets."
     
+    # System prompt that defines the GPT's behavior
     system_prompt = """You are a business concept generator. When given exactly two items and two target markets, you must:
 
 1. Create exactly two sentences describing a business that uses or sells both items as a coherent product or service.
@@ -24,9 +33,11 @@ Output format:
 
 Provide no additional commentary, explanations, or text beyond these three sentences."""
 
+    # User message with the inputs
     user_message = f"Items: {item1}, {item2}\nTarget Markets: {market1}, {market2}"
     
     try:
+        # Call OpenAI API
         response = client.chat.completions.create(
             model="gpt-3.5-turbo",
             messages=[
@@ -36,28 +47,151 @@ Provide no additional commentary, explanations, or text beyond these three sente
             temperature=0.7,
             max_tokens=200
         )
+        
         return response.choices[0].message.content.strip()
+    
     except Exception as e:
         return f"Error generating concept: {str(e)}"
 
-# Simple interface - better for mobile
-iface = gr.Interface(
-    fn=generate_business_concept,
-    inputs=[
-        gr.Textbox(label="Item 1", placeholder="Enter first item"),
-        gr.Textbox(label="Item 2", placeholder="Enter second item"),
-        gr.Textbox(label="Target Market 1", placeholder="Enter first market"),
-        gr.Textbox(label="Target Market 2", placeholder="Enter second market")
-    ],
-    outputs=gr.Textbox(label="Business Concept", lines=4),
-    title="Business Concept Generator",
-    description="Generate business concepts by combining two items and two target markets.",
-    examples=[
-        ["Coffee", "Books", "Students", "Remote Workers"],
-        ["Bicycles", "Solar Panels", "Urban Commuters", "Eco-conscious Homeowners"]
-    ],
-    theme="default"
-)
+# Create Gradio interface with mobile-first design
+def create_interface():
+    with gr.Blocks(
+        title="Business Concept Generator",
+        theme=gr.themes.Default(),
+        css="""
+        /* Mobile-first CSS */
+        .gradio-container {
+            max-width: 100% !important;
+            padding: 10px !important;
+        }
+        
+        /* Force vertical layout on small screens */
+        @media (max-width: 480px) {
+            .gr-row {
+                flex-direction: column !important;
+            }
+            .gr-column {
+                width: 100% !important;
+                min-width: 100% !important;
+            }
+        }
+        
+        /* Make inputs more touch-friendly */
+        input[type="text"], textarea {
+            font-size: 16px !important; /* Prevents zoom on iOS */
+            padding: 12px !important;
+            width: 100% !important;
+            box-sizing: border-box !important;
+        }
+        
+        /* Style the button for mobile */
+        .gr-button {
+            width: 100% !important;
+            min-height: 50px !important;
+            font-size: 18px !important;
+            font-weight: bold !important;
+            -webkit-appearance: none !important;
+            -moz-appearance: none !important;
+            appearance: none !important;
+            touch-action: manipulation !important;
+            margin: 10px 0 !important;
+        }
+        
+        /* Compact header */
+        h1 {
+            font-size: 24px !important;
+            margin: 10px 0 !important;
+        }
+        
+        /* Reduce spacing */
+        .gr-form {
+            gap: 10px !important;
+        }
+        
+        /* Make textboxes more compact */
+        .gr-textbox {
+            margin-bottom: 10px !important;
+        }
+        
+        /* Hide examples on very small screens */
+        @media (max-width: 375px) {
+            .gr-examples {
+                display: none !important;
+            }
+        }
+        """
+    ) as demo:
+        gr.Markdown("""
+        # Business Concept Generator
+        
+        Generate business ideas from 2 items & 2 markets.
+        """)
+        
+        # Use single column layout for mobile
+        with gr.Column():
+            item1 = gr.Textbox(
+                label="Item 1",
+                placeholder="First item",
+                lines=1,
+                max_lines=1
+            )
+            
+            item2 = gr.Textbox(
+                label="Item 2", 
+                placeholder="Second item",
+                lines=1,
+                max_lines=1
+            )
+            
+            market1 = gr.Textbox(
+                label="Target Market 1",
+                placeholder="First market",
+                lines=1,
+                max_lines=1
+            )
+            
+            market2 = gr.Textbox(
+                label="Target Market 2",
+                placeholder="Second market", 
+                lines=1,
+                max_lines=1
+            )
+        
+        generate_btn = gr.Button(
+            "Generate Concept", 
+            variant="primary",
+            elem_classes=["generate-button"]
+        )
+        
+        output = gr.Textbox(
+            label="Business Concept",
+            lines=3,
+            max_lines=5,
+            interactive=False
+        )
+        
+        # Handle button click
+        generate_btn.click(
+            fn=generate_business_concept,
+            inputs=[item1, item2, market1, market2],
+            outputs=output
+        )
+        
+        # Compact examples
+        with gr.Accordion("Examples", open=False):
+            gr.Examples(
+                examples=[
+                    ["Coffee", "Books", "Students", "Remote Workers"],
+                    ["Bikes", "Solar", "Commuters", "Eco-owners"]
+                ],
+                inputs=[item1, item2, market1, market2],
+                label=""
+            )
+    
+    return demo
 
+# Main execution
 if __name__ == "__main__":
-    iface.launch()
+    # Create and launch the interface
+    demo = create_interface()
+    demo.launch()