Update app.py

app.py

@@ -55,7 +55,7 @@ def generate_word_design(word, word_id, is_animated=False):
         letter_spacings = ["-1px", "0px", "1px", "2px"]
         text_shadows = ["0px 0px 1px #000", "0px 0px 2px #000", "1px 0px 0px #000", "0px 0px 0px #000"]
         skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
-        colors = ["#000000"]
+        word_color = "#000000"  # All letters in original word are black
     else:
         # Animated state values
         font_sizes = ["20px", "22px", "24px", "26px"]
@@ -63,7 +63,7 @@ def generate_word_design(word, word_id, is_animated=False):
         letter_spacings = ["-3px", "-2px", "0px", "2px", "3px", "4px"]
         text_shadows = ["0px 0px 5px", "2px 2px 4px", "0px 0px 8px", "3px 3px 6px", "1px 1px 10px"]
         skew_angles = ["-35deg", "-25deg", "0deg", "25deg", "35deg", "45deg"]
-        colors = [f"#{random.randint(0, 0xFFFFFF):06x}" for _ in range(10)]
+        word_color = f"#{random.randint(0, 0xFFFFFF):06x}"  # ONE color for the entire word
 
     letters = list(word)
     styled_letters = []
@@ -77,7 +77,7 @@ def generate_word_design(word, word_id, is_animated=False):
         if not is_animated:
             # Store original values for later animation
             if word_id not in original_designs:
-                original_designs[word_id] = {'letters': []}
+                original_designs[word_id] = {'letters': [], 'word_color': word_color}
             
             original_styles = {
                 'font_family': random.choice(fonts),
@@ -87,9 +87,10 @@ def generate_word_design(word, word_id, is_animated=False):
                 'skew_angle': random.choice(skew_angles),
                 'margin_top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),
                 'top': random.choice(font_tops),
-                'color': '#000000'
+                'color': word_color  # Same color for all letters in this word
             }
             original_designs[word_id]['letters'].append(original_styles)
+            original_designs[word_id]['word_color'] = word_color
             
             style = {
                 'font-family': original_styles['font_family'],
@@ -109,13 +110,13 @@ def generate_word_design(word, word_id, is_animated=False):
         else:
             # Create animated version with keyframes
             original_letter_styles = original_data['letters'][i] if i < len(original_data.get('letters', [])) else {}
+            original_word_color = original_data.get('word_color', '#000000')
             
-            # New target values
+            # New target values (but same color for all letters in this word)
             new_font_family = random.choice(fonts)
             new_font_size = random.choice(font_sizes)
             new_letter_spacing = random.choice(letter_spacings)
-            new_color = random.choice(colors)
-            new_text_shadow = f"{random.choice(text_shadows)} {new_color}"
+            new_text_shadow = f"{random.choice(text_shadows)} {word_color}"  # Use word_color for shadow
             new_skew_angle = random.choice(skew_angles)
             new_top = random.choice(font_tops)
             new_margin_top = random.choice(["-0.05cm", "0.00cm", "0.03cm", "0.05cm"])
@@ -147,7 +148,7 @@ def generate_word_design(word, word_id, is_animated=False):
                 25% {{
                     font-size: {new_font_size};
                     letter-spacing: {new_letter_spacing};
-                    color: {new_color};
+                    color: {word_color};
                     text-shadow: {new_text_shadow};
                     transform: skew({new_skew_angle}) scale(1.2);
                     top: {new_top};
@@ -162,7 +163,7 @@ def generate_word_design(word, word_id, is_animated=False):
                 100% {{
                     font-size: {new_font_size};
                     letter-spacing: {new_letter_spacing};
-                    color: {new_color};
+                    color: {word_color};
                     text-shadow: {new_text_shadow};
                     transform: skew({new_skew_angle}) scale(1);
                     top: {new_top};
@@ -181,7 +182,7 @@ def generate_word_design(word, word_id, is_animated=False):
                 'margin-top': new_margin_top,
                 'position': 'relative',
                 'top': new_top,
-                'color': new_color,
+                'color': word_color,  # Same color for all letters in this word
                 'display': 'inline-block',
                 'margin': '0 1px',
                 'vertical-align': 'middle',
@@ -307,7 +308,7 @@ def trigger_movement(input_html):
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Random Word Styler\nWords progressively transition from original styling to new styling!")
+    gr.Markdown("# Random Word Styler\nEach word gets ONE color and transitions from original to new styling!")
     
     generate_button = gr.Button("Generate Random Words", variant="primary")
     output_html = gr.HTML()