Add AI User Journey Generator demo (Breadcrumb Product Hunt)

journey_generator_app.py

@@ -0,0 +1,222 @@
+import gradio as gr
+import nexaapi
+import requests
+import json
+from io import BytesIO
+from PIL import Image
+
+def generate_journey_diagram(
+    api_key: str,
+    journey_title: str,
+    steps_json: str,
+    model: str,
+    width: int,
+    height: int
+):
+    """
+    Generate a user journey diagram using NexaAPI.
+    
+    Args:
+        api_key: NexaAPI key from nexa-api.com
+        journey_title: Title for the journey diagram
+        steps_json: JSON string with steps data
+        model: AI model to use
+        width: Image width
+        height: Image height
+    
+    Returns:
+        PIL Image of the generated diagram
+    """
+    if not api_key or api_key.strip() == "":
+        return None, "❌ Please enter your NexaAPI key. Get one free at https://nexa-api.com"
+    
+    try:
+        steps = json.loads(steps_json)
+    except json.JSONDecodeError as e:
+        return None, f"❌ Invalid JSON format: {e}"
+    
+    if not steps or len(steps) < 2:
+        return None, "❌ Please provide at least 2 journey steps"
+    
+    # Build prompt
+    steps_desc = " → ".join([
+        f"{s.get('name', 'Step')} ({s.get('users', 0):,} users)"
+        for s in steps
+    ])
+    
+    drop_offs = [
+        f"{s.get('name', 'Step')}: {int(s.get('drop_off', 0) * 100)}% drop-off"
+        for s in steps
+        if s.get("drop_off", 0) > 0
+    ]
+    
+    prompt = (
+        f"Professional user journey funnel diagram titled '{journey_title}'. "
+        f"Sequential steps: {steps_desc}. "
+        f"Drop-off rates: {', '.join(drop_offs) if drop_offs else 'not specified'}. "
+        "Clean modern flat design, gradient blue-to-green color scheme, "
+        "white background, clear typography, directional arrows, "
+        "user count labels, professional business style."
+    )
+    
+    try:
+        client = nexaapi.Client(api_key=api_key.strip())
+        
+        response = client.images.generate(
+            model=model,
+            prompt=prompt,
+            width=width,
+            height=height,
+            num_images=1
+        )
+        
+        image_url = response.data[0].url
+        
+        # Download image
+        img_response = requests.get(image_url, timeout=30)
+        img_response.raise_for_status()
+        
+        image = Image.open(BytesIO(img_response.content))
+        
+        return image, f"✅ Generated successfully!\n🔗 URL: {image_url}"
+        
+    except Exception as e:
+        return None, f"❌ Generation failed: {str(e)}\n\nMake sure your API key is valid at https://nexa-api.com"
+
+
+# Example journey data
+EXAMPLE_STEPS = json.dumps([
+    {"name": "Landing Page",    "users": 10000, "drop_off": 0.35},
+    {"name": "Sign Up",         "users": 6500,  "drop_off": 0.20},
+    {"name": "Email Verified",  "users": 5200,  "drop_off": 0.15},
+    {"name": "First Action",    "users": 4420,  "drop_off": 0.10},
+    {"name": "Paid Conversion", "users": 3978,  "drop_off": 0.00}
+], indent=2)
+
+ECOMMERCE_STEPS = json.dumps([
+    {"name": "Homepage",     "users": 50000, "drop_off": 0.60},
+    {"name": "Product Page", "users": 20000, "drop_off": 0.40},
+    {"name": "Add to Cart",  "users": 12000, "drop_off": 0.50},
+    {"name": "Checkout",     "users": 6000,  "drop_off": 0.30},
+    {"name": "Purchase",     "users": 4200,  "drop_off": 0.00}
+], indent=2)
+
+MOBILE_STEPS = json.dumps([
+    {"name": "App Install",  "users": 5000, "drop_off": 0.20},
+    {"name": "Permissions",  "users": 4000, "drop_off": 0.15},
+    {"name": "Account Setup","users": 3400, "drop_off": 0.10},
+    {"name": "Tutorial",     "users": 3060, "drop_off": 0.08},
+    {"name": "First Use",    "users": 2815, "drop_off": 0.00}
+], indent=2)
+
+
+# Build Gradio interface
+with gr.Blocks(
+    title="AI User Journey Generator",
+    theme=gr.themes.Soft(),
+    css="""
+    .header { text-align: center; padding: 20px; }
+    .links { text-align: center; font-size: 14px; }
+    """
+) as demo:
+    
+    gr.HTML("""
+    <div class="header">
+        <h1>🗺️ AI User Journey Generator</h1>
+        <p>Generate beautiful user journey diagrams from your analytics data using AI</p>
+        <p>Inspired by <strong>Breadcrumb.ai</strong> on Product Hunt 🚀</p>
+    </div>
+    """)
+    
+    with gr.Row():
+        with gr.Column(scale=1):
+            gr.Markdown("### ⚙️ Configuration")
+            
+            api_key = gr.Textbox(
+                label="NexaAPI Key",
+                placeholder="Enter your API key from nexa-api.com",
+                type="password",
+                info="Get a free key at https://nexa-api.com"
+            )
+            
+            journey_title = gr.Textbox(
+                label="Journey Title",
+                value="SaaS Onboarding Funnel",
+                placeholder="e.g., SaaS Onboarding Funnel"
+            )
+            
+            model = gr.Dropdown(
+                label="AI Model",
+                choices=["flux-schnell", "flux-dev", "sdxl", "dall-e-3"],
+                value="flux-schnell",
+                info="flux-schnell is fastest; flux-dev is highest quality"
+            )
+            
+            with gr.Row():
+                width = gr.Slider(512, 1920, value=1200, step=64, label="Width")
+                height = gr.Slider(512, 1080, value=700, step=64, label="Height")
+            
+            gr.Markdown("### 📊 Journey Steps (JSON)")
+            gr.Markdown("Format: `[{\"name\": \"Step\", \"users\": 1000, \"drop_off\": 0.20}]`")
+            
+            steps_json = gr.Code(
+                label="Steps Data",
+                value=EXAMPLE_STEPS,
+                language="json",
+                lines=12
+            )
+            
+            with gr.Row():
+                gr.Button("📱 Mobile Example", size="sm").click(
+                    fn=lambda: ("Mobile App Onboarding", MOBILE_STEPS),
+                    outputs=[journey_title, steps_json]
+                )
+                gr.Button("🛒 E-commerce Example", size="sm").click(
+                    fn=lambda: ("E-commerce Purchase Flow", ECOMMERCE_STEPS),
+                    outputs=[journey_title, steps_json]
+                )
+            
+            generate_btn = gr.Button(
+                "🎨 Generate Journey Diagram",
+                variant="primary",
+                size="lg"
+            )
+        
+        with gr.Column(scale=1):
+            gr.Markdown("### 🖼️ Generated Diagram")
+            
+            output_image = gr.Image(
+                label="User Journey Visualization",
+                type="pil",
+                height=500
+            )
+            
+            status_text = gr.Textbox(
+                label="Status",
+                interactive=False,
+                lines=3
+            )
+    
+    generate_btn.click(
+        fn=generate_journey_diagram,
+        inputs=[api_key, journey_title, steps_json, model, width, height],
+        outputs=[output_image, status_text]
+    )
+    
+    gr.HTML("""
+    <div class="links">
+        <p>
+            🌐 <a href="https://nexa-api.com" target="_blank">nexa-api.com</a> &nbsp;|&nbsp;
+            📦 <a href="https://pypi.org/project/nexaapi" target="_blank">PyPI</a> &nbsp;|&nbsp;
+            📦 <a href="https://npmjs.com/package/nexaapi" target="_blank">npm</a> &nbsp;|&nbsp;
+            🔗 <a href="https://rapidapi.com/user/nexaquency" target="_blank">RapidAPI</a>
+        </p>
+        <p style="color: #666; font-size: 12px;">
+            Powered by NexaAPI — 38+ AI models, one API key
+        </p>
+    </div>
+    """)
+
+
+if __name__ == "__main__":
+    demo.launch()