Update app.py

app.py

@@ -25,11 +25,11 @@ SPECIAL_WORDS = [
 ]
 
 # Global variables
-original_word_designs = {}
+original_word_styles = {}
 selected_words = []
 
-def generate_word_design(word, word_id, use_color=False):
-    """Generate styled design for a word."""
+def generate_word_design(word, word_id):
+    """Generate initial styled design for a word (black color)."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -47,94 +47,75 @@ def generate_word_design(word, word_id, use_color=False):
         "'Pacifico', cursive",
         "'Teko', sans-serif"
     ]
-    font_sizes = ["18px", "19px", "20px"] if not use_color else ["20px", "22px", "24px"]
-    font_tops = ["0px", "1px", "-1px"] if not use_color else ["-2px", "0px", "2px", "3px"]
-    letter_spacings = ["-1px", "0px", "1px"] if not use_color else ["-2px", "0px", "2px", "3px"]
+    font_sizes = ["18px", "19px", "20px"]
+    font_tops = ["0px", "1px", "-1px"]
+    letter_spacings = ["-1px", "0px", "1px", "2px"]
     text_shadows = [
-        "0px 0px 1px",
-        "0px 0px 2px",
-        "1px 0px 0px",
-        "0px 0px 0px",
-        "0px 1px 0px",
-        "0px 2px 0px",
-        "0px 1px 1px",
-        "1px 1px 0px",
-        "1px 0px 1px"
-    ] if not use_color else [
-        "0px 0px 5px",
-        "2px 2px 4px",
-        "0px 0px 8px",
-        "3px 3px 6px",
-        "1px 1px 10px"
+        "0px 0px 1px #000",
+        "0px 0px 2px #000",
+        "1px 0px 0px #000",
+        "0px 0px 0px #000",
+        "0px 1px 0px #000",
+        "0px 2px 0px #000",
+        "0px 1px 1px #000",
+        "1px 1px 0px #000",
+        "1px 0px 1px #000"
     ]
-    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"] if not use_color else ["-35deg", "-25deg", "0deg", "25deg", "35deg", "40deg"]
-
-    # Choose color
-    color = '#000000' if not use_color else f'#{random.randint(0, 0xFFFFFF):06x}'
-    
-    # Generate unique animation name for movement
-    animation_name = f"animate_{word_id}_{random.randint(0, 10000)}"
+    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
 
     letters = list(word)
     styled_letters = []
+    letter_styles_data = []
     
     for i, letter in enumerate(letters):
-        # Generate COMPLETELY NEW random styles (not based on original)
+        # Generate and store original styles
+        font_family = random.choice(fonts)
+        font_size = random.choice(font_sizes)
+        letter_spacing = random.choice(letter_spacings)
+        text_shadow = random.choice(text_shadows)
+        skew_angle = random.choice(skew_angles)
+        margin_top = random.choice(["-0.02cm", "0.00cm", "0.02cm"])
+        top = random.choice(font_tops)
+        
+        # Store original styles for transition
+        letter_styles_data.append({
+            'font_family': font_family,
+            'font_size': font_size,
+            'letter_spacing': letter_spacing,
+            'text_shadow': text_shadow,
+            'skew_angle': skew_angle,
+            'margin_top': margin_top,
+            'top': top
+        })
+        
         style = {
-            'font-family': random.choice(fonts),
+            'font-family': font_family,
             'line-height': '1.6',
-            'font-size': random.choice(font_sizes),
-            'letter-spacing': random.choice(letter_spacings),
-            'text-shadow': random.choice(text_shadows),
-            'transform': f'skew({random.choice(skew_angles)})',
-            'margin-top': random.choice(["-0.03cm", "-0.01cm", "0.00cm", "0.01cm", "0.03cm"]),
+            'font-size': font_size,
+            'letter-spacing': letter_spacing,
+            'text-shadow': text_shadow,
+            'transform': f'skew({skew_angle})',
+            'margin-top': margin_top,
             'position': 'relative',
-            'top': random.choice(font_tops),
-            'color': color,
+            'top': top,
+            'color': '#000000',
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'middle'
+            'vertical-align': 'middle',
+            'transition': 'all 0.8s ease-in-out'  # Smooth transition for all properties
         }
         
-        if use_color:
-            # Animation plays once and stops (no infinite)
-            style['animation'] = f'{animation_name} 1.2s ease-in-out forwards'
-            style['animation-delay'] = f'{i * 0.15}s'
-        
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
-        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
+        styled_letter = f'<span class="letter-{word_id}-{i}" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    # Create keyframes for movement animation - plays once and stops
-    keyframes = f"""
-    <style>
-    @keyframes {animation_name} {{
-        0% {{ 
-            transform: scale(1) rotate(0deg) skew({random.choice(skew_angles)});
-            opacity: 0.7;
-        }}
-        25% {{ 
-            transform: scale(1.3) rotate({random.choice(["-15deg", "15deg", "20deg"])}deg) skew({random.choice(skew_angles)});
-            opacity: 1;
-        }}
-        50% {{ 
-            transform: scale(0.9) rotate({random.choice(["-10deg", "10deg", "25deg"])}deg) skew({random.choice(skew_angles)});
-            opacity: 1;
-        }}
-        75% {{ 
-            transform: scale(1.2) rotate({random.choice(["-5deg", "5deg", "30deg"])}deg) skew({random.choice(skew_angles)});
-            opacity: 1;
-        }}
-        100% {{ 
-            transform: scale(1.1) rotate(0deg) skew({random.choice(skew_angles)});
-            opacity: 1;
-        }}
-    }}
-    </style>
-    """ if use_color else ""
+    # Store styles for animation
+    original_word_styles[word_id] = {
+        'word': word,
+        'letter_styles': letter_styles_data
+    }
 
     return f'''
-    {keyframes}
     <span class="word-container" id="word-{word_id}" style="display: inline-block; 
                                        margin: 10px; 
                                        padding: 8px 12px; 
@@ -150,18 +131,16 @@ def generate_word_design(word, word_id, use_color=False):
 
 def generate_random_words():
     """Generate 5 random words with initial styling."""
-    global original_word_designs, selected_words
+    global original_word_styles, selected_words
     
     # Reset data
-    original_word_designs = {}
+    original_word_styles = {}
     selected_words = random.sample(SPECIAL_WORDS, 5)
     
     styled_words = []
     for i, word in enumerate(selected_words):
-        # Generate original design (black)
-        original_design = generate_word_design(word, i, use_color=False)
-        original_word_designs[i] = original_design
-        styled_words.append(original_design)
+        word_design = generate_word_design(word, i)
+        styled_words.append(word_design)
     
     final_output = f"""
     <html>
@@ -190,9 +169,6 @@ def generate_random_words():
             font-family: "Josefin Sans", sans-serif;
             padding: 20px;
         }}
-        .styled-letter {{
-            transition: all 0.6s ease;
-        }}
         </style>
     </head>
     <body>
@@ -209,31 +185,90 @@ def generate_random_words():
     return final_output
 
 def trigger_movement(input_html):
-    """Function to trigger the movement by replacing each word with a completely NEW styled version."""
-    global original_word_designs, selected_words
+    """Function to create smooth transitions from original values to new values."""
+    global original_word_styles, selected_words
     
-    if not original_word_designs or not selected_words:
+    if not original_word_styles or not selected_words:
         return input_html
 
-    updated_html = input_html
+    # Generate new target styles for transition
+    fonts = [
+        "'VT323', monospace", "'Josefin Sans', sans-serif", "'Rajdhani', sans-serif", "'Anton', sans-serif",
+        "'Caveat', cursive", "'Patrick Hand', cursive", "'Nothing You Could Do', cursive", "'Reenie Beanie', cursive",
+        "'Orbitron', sans-serif", "'Raleway', sans-serif", "'Open Sans Condensed', sans-serif", "'Poiret One', cursive",
+        "'Indie Flower', cursive", "'Pacifico', cursive", "'Teko', sans-serif"
+    ]
+    
+    # Create JavaScript for smooth transitions
+    animation_script = """
+    <script>
+    function triggerSmoothTransitions() {
+    """
+    
+    for word_id, data in original_word_styles.items():
+        word = data['word']
+        letter_styles = data['letter_styles']
+        
+        for i, original_style in enumerate(letter_styles):
+            # Generate NEW target values
+            new_color = f"#{random.randint(0, 0xFFFFFF):06x}"
+            new_font_family = random.choice(fonts)
+            new_font_size = random.choice(["20px", "22px", "24px", "26px"])
+            new_letter_spacing = random.choice(["-3px", "-2px", "0px", "2px", "3px", "4px"])
+            new_text_shadow = random.choice([
+                f"0px 0px 5px {new_color}",
+                f"2px 2px 4px {new_color}",
+                f"0px 0px 8px {new_color}",
+                f"3px 3px 6px {new_color}",
+                "none"
+            ])
+            new_skew = random.choice(["-35deg", "-25deg", "0deg", "25deg", "35deg", "45deg"])
+            new_top = random.choice(["-3px", "0px", "3px", "5px"])
+            new_margin_top = random.choice(["-0.05cm", "0.00cm", "0.03cm", "0.05cm"])
+            
+            animation_script += f"""
+        // Animate letter {i} of word {word_id}
+        setTimeout(() => {{
+            const letter = document.querySelector('.letter-{word_id}-{i}');
+            if (letter) {{
+                // Font changes instantly (can't interpolate)
+                letter.style.fontFamily = '{new_font_family}';
+                
+                // These properties transition smoothly from original to new values
+                letter.style.color = '{new_color}';
+                letter.style.fontSize = '{new_font_size}';
+                letter.style.letterSpacing = '{new_letter_spacing}';
+                letter.style.textShadow = '{new_text_shadow}';
+                letter.style.transform = 'skew({new_skew}) scale(1.1)';
+                letter.style.top = '{new_top}';
+                letter.style.marginTop = '{new_margin_top}';
+            }}
+        }}, {i * 100});
+        """
+    
+    animation_script += """
+    }
+    
+    // Trigger the transitions
+    triggerSmoothTransitions();
+    </script>
+    """
+    
+    # Add the script to the HTML
+    if "</body>" in input_html:
+        updated_html = input_html.replace("</body>", animation_script + "</body>")
+    else:
+        updated_html = input_html + animation_script
     
-    # Replace each word with its completely new animated version
-    for i, word in enumerate(selected_words):
-        if i in original_word_designs:
-            # Generate COMPLETELY NEW design with color and animation (that stops)
-            new_movement_design = generate_word_design(word, i, use_color=True)
-            # Replace the original design with the new one
-            updated_html = updated_html.replace(original_word_designs[i], new_movement_design, 1)
-
     return updated_html
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Random Word Styler\nGenerate 5 random styled words that transform with a one-time animation!")
+    gr.Markdown("# Random Word Styler\nWords smoothly transition from their original styling to completely new styling!")
     
     generate_button = gr.Button("Generate Random Words", variant="primary")
     output_html = gr.HTML()
-    animate_button = gr.Button("Trigger Movement Animation", variant="secondary")
+    animate_button = gr.Button("Trigger Smooth Movement", variant="secondary")
     
     generate_button.click(generate_random_words, outputs=output_html)
     animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)