Update app.py

app.py

@@ -4,9 +4,9 @@ import numpy as np
 import random
 from io import BytesIO
 
-# Function to enhance contrast of the image
+# Function to enhance contrast of the image (placeholder for future enhancement)
 def enhance_contrast(img):
-    return img  # placeholder for actual contrast enhancement logic
+    return img  # Currently, just returns the original image
 
 # Function to detect dominant colors
 def get_dominant_colors(image, n_colors=6):
@@ -35,7 +35,7 @@ def generate_harmonies(colors):
         }
     return harmonies
 
-# Function to create a LinkedIn-friendly color palette description with CSS code
+# Function to create a LinkedIn-friendly color palette description
 def create_palette_description(colors):
     descriptions = [
         "A vibrant palette for branding and marketing.",
@@ -44,20 +44,13 @@ def create_palette_description(colors):
         "Soft and neutral tones, ideal for elegant branding."
     ]
     chosen_description = random.choice(descriptions)
-    
-    # Generate the HTML palette
     palette_html = f"<h4>{chosen_description}</h4><div style='display:flex; flex-wrap:wrap;'>"
-    css_code = "/* Color Palette CSS */\n"
-    for i, color in enumerate(colors):
+    for color in colors:
         hex_color = rgb_to_hex(color)
         palette_html += f"<div style='width: 100px; height: 50px; background-color: {hex_color}; margin: 5px;'></div>"
         palette_html += f"<div style='padding: 15px;'>HEX: {hex_color}</div>"
-        # Add the CSS code for each color
-        css_code += f".color-{i} {{ background-color: {hex_color}; }}\n"
-    
     palette_html += "</div>"
-    
-    return palette_html, css_code
+    return palette_html
 
 # Function to generate a downloadable palette image
 def generate_palette_image(colors):
@@ -72,23 +65,34 @@ def generate_palette_image(colors):
     
     return palette_img  # Return PIL image directly
 
+# Function to generate the CSS code for the color palette
+def generate_css_code(colors):
+    css_code = "/* Color Palette CSS */\n"
+    for i, color in enumerate(colors):
+        hex_color = rgb_to_hex(color)
+        css_code += f".color-{i} {{ background-color: {hex_color}; }}\n"
+    return css_code
+
 # Main function to generate palette and display LinkedIn-friendly results
 def generate_palette(image_path):
     img = Image.open(image_path)
 
-    # Enhance the contrast
+    # Enhance the contrast (optional placeholder)
     img = enhance_contrast(img)
 
     # Extract dominant colors
     n_colors = 6
     colors = get_dominant_colors(img, n_colors)
 
-    # Convert colors to HEX and create palette description with CSS
-    palette_html, css_code = create_palette_description(colors)
+    # Convert colors to HEX and create palette description
+    palette_html = create_palette_description(colors)
 
     # Generate palette image for download
     palette_img = generate_palette_image(colors)
 
+    # Generate CSS code for the palette
+    css_code = generate_css_code(colors)
+
     return palette_html, palette_img, css_code
 
 # Gradio Interface
@@ -111,12 +115,12 @@ with gr.Blocks() as interface:
         with gr.Column():
             palette_output = gr.HTML(label="Generated Color Palette")
             palette_image_output = gr.Image(label="Downloadable Palette Image")
-            css_code_output = gr.Code(label="Generated CSS Code")  # Display generated CSS code
+            css_code_output = gr.Textbox(label="Generated CSS Code", lines=6)  # Use Textbox to display CSS code
     
     submit_btn.click(gradio_interface, inputs=[image_input], outputs=[
         palette_output, palette_image_output, css_code_output])
 
-    # Clear button now resets the image input and clears all outputs
+    # The Clear button now resets the image input and clears all outputs
     clear_btn.click(lambda: [None, None, None, None], outputs=[
         image_input, palette_output, palette_image_output, css_code_output])