Update app.py

app.py

@@ -5,8 +5,7 @@ from PIL import Image
 import requests
 from io import BytesIO
 
-# Replicate API client setup
-# Set environment variable: export RAPI_TOKEN="your_token_here"
+
 replicate_client = replicate.Client(api_token=os.getenv("RAPI_TOKEN"))
 
 # Comprehensive hairstyle options - All 93 styles
@@ -65,9 +64,67 @@ HAIR_COLOR_OPTIONS = {
     "Rose Gold": "#E0BFB8"
 }
 
+def create_color_palette_html():
+    """Create HTML for visual color palette"""
+    html = '''
+    <style>
+        .color-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+            gap: 8px;
+            padding: 10px;
+            max-height: 300px;
+            overflow-y: auto;
+            border: 1px solid #e0e0e0;
+            border-radius: 8px;
+            background-color: #f9f9f9;
+        }
+        .color-cell {
+            aspect-ratio: 1;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            overflow: hidden;
+            border: 3px solid transparent;
+        }
+        .color-cell:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
+        }
+        .color-label {
+            width: 100%;
+            background-color: rgba(0,0,0,0.7);
+            color: white;
+            font-size: 9px;
+            padding: 2px;
+            text-align: center;
+            font-weight: bold;
+        }
+    </style>
+    <div class="color-grid">
+    '''
+    
+    for color_name, color_code in HAIR_COLOR_OPTIONS.items():
+        html += f'''
+        <div class="color-cell" style="background-color: {color_code};" title="{color_name}">
+            <span class="color-label">{color_name}</span>
+        </div>
+        '''
+    
+    html += '</div>'
+    return html
+
+def update_selected_color(color_name):
+    """Update the selected color display"""
+    return f"**Selected Color:** {color_name}", color_name
+
 def change_haircut(input_image, haircut_style, hair_color):
     """
-    Process image through RAPI to change hairstyle
+    Process image through API to change hairstyle
     """
     try:
         # Check if image is provided
@@ -78,6 +135,8 @@ def change_haircut(input_image, haircut_style, hair_color):
         if not hair_color or hair_color not in HAIR_COLOR_OPTIONS:
             hair_color = "Black"
         
+        print(f"Processing with hairstyle: {haircut_style}, color: {hair_color}")
+        
         # Save PIL Image to temporary file
         temp_path = "temp_input.png"
         input_image.save(temp_path)
@@ -116,13 +175,13 @@ def change_haircut(input_image, haircut_style, hair_color):
             os.remove(temp_path)
         return None, f"Error: {str(e)}"
 
-def update_color_display(color):
-    """Update the color display text"""
-    return f"**Selected Color:** {color}"
-
 # Create Gradio interface
 with gr.Blocks(title="AI Hairstyle Changer", theme=gr.themes.Soft()) as demo:
-
+    gr.Markdown(
+        """
+        # 🎨 AI Hairstyle Changer
+        """
+    )
     
     with gr.Row():
         with gr.Column(scale=1):
@@ -137,22 +196,17 @@ with gr.Blocks(title="AI Hairstyle Changer", theme=gr.themes.Soft()) as demo:
                 gr.Markdown("### Select Hair Color")
                 selected_color_display = gr.Markdown(value="**Selected Color:** Black")
                 
-                # Create color buttons in a grid
-                color_buttons = []
-                with gr.Column():
-                    # Create rows of color buttons
-                    for i in range(0, len(HAIR_COLOR_OPTIONS), 5):
-                        with gr.Row():
-                            for color_name, color_code in list(HAIR_COLOR_OPTIONS.items())[i:i+5]:
-                                btn = gr.Button(
-                                    value=color_name,
-                                    elem_classes="color-button",
-                                    elem_id=f"color-{color_name.replace(' ', '-')}"
-                                )
-                                color_buttons.append((btn, color_name, color_code))
+                # Dropdown for color selection (functional)
+                hair_color_dropdown = gr.Dropdown(
+                    choices=list(HAIR_COLOR_OPTIONS.keys()),
+                    value="Black",
+                    label="Choose Hair Color",
+                    info="Select from dropdown for color"
+                )
                 
-                # Hidden textbox to store selected color
-                selected_color = gr.Textbox(value="Black", visible=False)
+                # Visual color palette (for reference)
+                gr.Markdown("**Color Palette Reference:**")
+                color_palette_display = gr.HTML(create_color_palette_html())
             
             submit_btn = gr.Button(
                 "🎨 Apply Hairstyle",
@@ -163,15 +217,14 @@ with gr.Blocks(title="AI Hairstyle Changer", theme=gr.themes.Soft()) as demo:
         with gr.Column(scale=2):
             # Hairstyle selection with scrollable radio buttons
             with gr.Group():
-                gr.Markdown(f"### Select Hairstyle (Total: {len(HAIRCUT_OPTIONS)} styles)")
-                with gr.Column(elem_classes="hairstyle-container"):
-                    haircut_radio = gr.Radio(
-                        choices=HAIRCUT_OPTIONS,
-                        value="Bob",
-                        label="Hairstyle Options",
-                        info="Browse and select from 93 hairstyle options",
-                        elem_classes="hairstyle-radio"
-                    )
+                gr.Markdown(f"### Select Hairstyle ({len(HAIRCUT_OPTIONS)} total styles)")
+                gr.Markdown("*Scroll down to see all 93 hairstyle options*")
+                haircut_radio = gr.Radio(
+                    choices=HAIRCUT_OPTIONS,
+                    value="Bob",
+                    label="Hairstyle Options",
+                    info="Scroll to browse all 93 hairstyle options"
+                )
         
         with gr.Column(scale=1):
             # Output section
@@ -187,110 +240,54 @@ with gr.Blocks(title="AI Hairstyle Changer", theme=gr.themes.Soft()) as demo:
                 value="Upload a photo and select a hairstyle to begin."
             )
     
-    # Custom CSS with dynamic color styling
-    custom_css = """
-    .hairstyle-container {
-        max-height: 600px;
-        overflow-y: auto;
+    # Update color display when dropdown changes
+    hair_color_dropdown.change(
+        fn=update_selected_color,
+        inputs=[hair_color_dropdown],
+        outputs=[selected_color_display, gr.State()]
+    )
+    
+    # Button click event
+    submit_btn.click(
+        fn=change_haircut,
+        inputs=[input_image, haircut_radio, hair_color_dropdown],
+        outputs=[output_image, status_text]
+    )
+    
+    # Style customization
+    demo.css = """
+    /* Radio button container */
+    #component-8 > div.wrap > div {
+        max-height: 600px !important;
+        overflow-y: auto !important;
         padding: 10px;
         border: 1px solid #e0e0e0;
         border-radius: 8px;
         background-color: #f9f9f9;
     }
     
-    .hairstyle-radio label {
-        display: block;
-        padding: 8px 12px;
-        margin: 4px 0;
-        border-radius: 6px;
-        cursor: pointer;
-        transition: all 0.2s ease;
+    /* Style radio button options */
+    label.svelte-1gfkn6j {
+        display: block !important;
+        padding: 8px 12px !important;
+        margin: 4px 0 !important;
+        border-radius: 6px !important;
+        cursor: pointer !important;
+        transition: all 0.2s ease !important;
     }
     
-    .hairstyle-radio label:hover {
-        background-color: #e8e8e8;
+    label.svelte-1gfkn6j:hover {
+        background-color: #e8e8e8 !important;
     }
     
-    .color-button {
-        min-height: 50px !important;
-        margin: 2px !important;
-        border: 3px solid transparent !important;
-        border-radius: 8px !important;
-        font-weight: bold !important;
+    /* Selected radio option */
+    label.svelte-1gfkn6j.selected {
+        background-color: #2196F3 !important;
         color: white !important;
-        text-shadow: 1px 1px 2px rgba(0,0,0,0.7) !important;
-        transition: all 0.3s ease !important;
-        position: relative !important;
-    }
-    
-    .color-button:hover {
-        transform: translateY(-2px) !important;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
     }
-    
-    .color-button.selected {
-        border-color: #2196F3 !important;
-        transform: scale(1.05) !important;
-        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3) !important;
-    }
-    """
-    
-    # Add dynamic CSS for each color button
-    for color_name, color_code in HAIR_COLOR_OPTIONS.items():
-        custom_css += f"""
-    #color-{color_name.replace(' ', '-')} > button {{
-        background-color: {color_code} !important;
-    }}
     """
     
-    demo.css = custom_css
-    
-    # Connect color button clicks
-    for btn, color_name, color_code in color_buttons:
-        btn.click(
-            fn=lambda c=color_name: (c, update_color_display(c)),
-            outputs=[selected_color, selected_color_display],
-            js=f"""(x) => {{
-                // Remove selected class from all buttons
-                document.querySelectorAll('.color-button').forEach(b => b.classList.remove('selected'));
-                // Add selected class to clicked button
-                document.querySelector('#color-{color_name.replace(' ', '-')} > button').classList.add('selected');
-                return '{color_name}';
-            }}"""
-        )
-    
-    # Button click event
-    submit_btn.click(
-        fn=change_haircut,
-        inputs=[input_image, haircut_radio, selected_color],
-        outputs=[output_image, status_text]
-    )
-    
-    # Set initial selection
-    demo.load(
-        js="""() => {
-            document.querySelector('#color-Black > button').classList.add('selected');
-        }"""
-    )
-    
-    # Additional information
-    gr.Markdown(
-        """
-        ### 📚 Hairstyle Categories
-        - **Short Styles**: Pixie Cut, Crew Cut, Undercut, Mohawk
-        - **Medium Styles**: Bob, Lob, Shag, Layered
-        - **Long Styles**: Straight, Wavy, Curly
-        - **Braided Styles**: French Braid, Dutch Braid, Fishtail Braid, Box Braids
-        - **Updo Styles**: Chignon, French Twist, Messy Bun, Top Knot
-        - **Special Styles**: Space Buns, Dreadlocks, Cornrows, Beehive
-        
-        ### 🎨 Hair Color Categories
-        - **Natural Colors**: Black, Browns, Blonde variations
-        - **Red Tones**: Red, Auburn, Copper, Mahogany, Burgundy
-        - **Cool Tones**: Silver, Ash Blonde, Ash Brown, Titanium
-        - **Fashion Colors**: Blue, Purple, Pink, Green, Rose Gold
-        """
-    )
+
 
 # Run the app
 if __name__ == "__main__":
@@ -299,6 +296,10 @@ if __name__ == "__main__":
         print("⚠️  Warning: RAPI_TOKEN environment variable not set!")
         print("Set it using: export RAPI_TOKEN='your_token'")
     
+    # Verify all styles are loaded
+    print(f"✅ Loaded {len(HAIRCUT_OPTIONS)} hairstyle options")
+    print(f"✅ Loaded {len(HAIR_COLOR_OPTIONS)} hair color options")
+    
     demo.launch(
         share=True,  # Create shareable link
         debug=True   # Debug mode