Update app.py

app.py

@@ -25,11 +25,11 @@ SPECIAL_WORDS = [
 ]
 
 # Global variables
-original_word_styles = {}
+original_designs = {}
 selected_words = []
 
-def generate_word_design(word, word_id):
-    """Generate initial styled design for a word (black color)."""
+def generate_word_design(word, word_id, is_animated=False):
+    """Generate styled design for a word."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -47,75 +47,154 @@ def generate_word_design(word, word_id):
         "'Pacifico', cursive",
         "'Teko', sans-serif"
     ]
-    font_sizes = ["18px", "19px", "20px"]
-    font_tops = ["0px", "1px", "-1px"]
-    letter_spacings = ["-1px", "0px", "1px", "2px"]
-    text_shadows = [
-        "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 is_animated:
+        # Original state values
+        font_sizes = ["18px", "19px", "20px"]
+        font_tops = ["0px", "1px", "-1px"]
+        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"]
+    else:
+        # Animated state values
+        font_sizes = ["20px", "22px", "24px", "26px"]
+        font_tops = ["-3px", "0px", "3px", "5px"]
+        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)]
 
     letters = list(word)
     styled_letters = []
-    letter_styles_data = []
+    keyframes_css = ""
     
-    for i, letter in enumerate(letters):
-        # 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': font_family,
-            'line-height': '1.6',
-            'font-size': font_size,
-            'letter-spacing': letter_spacing,
-            'text-shadow': text_shadow,
-            'transform': f'skew({skew_angle})',
-            'margin-top': margin_top,
-            'position': 'relative',
-            'top': top,
-            'color': '#000000',
-            'display': 'inline-block',
-            'margin': '0 1px',
-            'vertical-align': 'middle',
-            'transition': 'all 0.8s ease-in-out'  # Smooth transition for all properties
-        }
+    if is_animated:
+        # Get original styles to create transition keyframes
+        original_data = original_designs.get(word_id, {})
         
+    for i, letter in enumerate(letters):
+        if not is_animated:
+            # Store original values for later animation
+            if word_id not in original_designs:
+                original_designs[word_id] = {'letters': []}
+            
+            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),
+                'color': '#000000'
+            }
+            original_designs[word_id]['letters'].append(original_styles)
+            
+            style = {
+                'font-family': original_styles['font_family'],
+                'line-height': '1.6',
+                'font-size': original_styles['font_size'],
+                'letter-spacing': original_styles['letter_spacing'],
+                'text-shadow': original_styles['text_shadow'],
+                'transform': f'skew({original_styles["skew_angle"]})',
+                'margin-top': original_styles['margin_top'],
+                'position': 'relative',
+                'top': original_styles['top'],
+                'color': original_styles['color'],
+                'display': 'inline-block',
+                'margin': '0 1px',
+                'vertical-align': 'middle'
+            }
+        else:
+            # Create animated version with keyframes
+            original_letter_styles = original_data['letters'][i] if i < len(original_data.get('letters', [])) else {}
+            
+            # New target values
+            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_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"])
+            
+            # Create unique animation name
+            animation_name = f"move_{word_id}_{i}_{random.randint(1000, 9999)}"
+            
+            # Get original values for keyframes
+            orig_font_size = original_letter_styles.get('font_size', '18px')
+            orig_letter_spacing = original_letter_styles.get('letter_spacing', '0px')
+            orig_color = original_letter_styles.get('color', '#000000')
+            orig_text_shadow = original_letter_styles.get('text_shadow', '0px 0px 0px #000')
+            orig_skew_angle = original_letter_styles.get('skew_angle', '0deg')
+            orig_top = original_letter_styles.get('top', '0px')
+            orig_margin_top = original_letter_styles.get('margin_top', '0.00cm')
+            
+            # Create keyframes that transition from original to new values
+            keyframes_css += f"""
+            @keyframes {animation_name} {{
+                0% {{
+                    font-size: {orig_font_size};
+                    letter-spacing: {orig_letter_spacing};
+                    color: {orig_color};
+                    text-shadow: {orig_text_shadow};
+                    transform: skew({orig_skew_angle}) scale(1);
+                    top: {orig_top};
+                    margin-top: {orig_margin_top};
+                }}
+                25% {{
+                    font-size: {new_font_size};
+                    letter-spacing: {new_letter_spacing};
+                    color: {new_color};
+                    text-shadow: {new_text_shadow};
+                    transform: skew({new_skew_angle}) scale(1.2);
+                    top: {new_top};
+                    margin-top: {new_margin_top};
+                }}
+                50% {{
+                    transform: skew({new_skew_angle}) scale(0.9);
+                }}
+                75% {{
+                    transform: skew({new_skew_angle}) scale(1.1);
+                }}
+                100% {{
+                    font-size: {new_font_size};
+                    letter-spacing: {new_letter_spacing};
+                    color: {new_color};
+                    text-shadow: {new_text_shadow};
+                    transform: skew({new_skew_angle}) scale(1);
+                    top: {new_top};
+                    margin-top: {new_margin_top};
+                }}
+            }}
+            """
+            
+            style = {
+                'font-family': new_font_family,  # Font changes instantly
+                'line-height': '1.6',
+                'font-size': new_font_size,
+                'letter-spacing': new_letter_spacing,
+                'text-shadow': new_text_shadow,
+                'transform': f'skew({new_skew_angle})',
+                'margin-top': new_margin_top,
+                'position': 'relative',
+                'top': new_top,
+                'color': new_color,
+                'display': 'inline-block',
+                'margin': '0 1px',
+                'vertical-align': 'middle',
+                'animation': f'{animation_name} 1.5s ease-in-out forwards',
+                'animation-delay': f'{i * 0.1}s'
+            }
+
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
         styled_letter = f'<span class="letter-{word_id}-{i}" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    # Store styles for animation
-    original_word_styles[word_id] = {
-        'word': word,
-        'letter_styles': letter_styles_data
-    }
-
     return f'''
+    {f"<style>{keyframes_css}</style>" if keyframes_css else ""}
     <span class="word-container" id="word-{word_id}" style="display: inline-block; 
                                        margin: 10px; 
                                        padding: 8px 12px; 
@@ -131,15 +210,15 @@ def generate_word_design(word, word_id):
 
 def generate_random_words():
     """Generate 5 random words with initial styling."""
-    global original_word_styles, selected_words
+    global original_designs, selected_words
     
     # Reset data
-    original_word_styles = {}
+    original_designs = {}
     selected_words = random.sample(SPECIAL_WORDS, 5)
     
     styled_words = []
     for i, word in enumerate(selected_words):
-        word_design = generate_word_design(word, i)
+        word_design = generate_word_design(word, i, is_animated=False)
         styled_words.append(word_design)
     
     final_output = f"""
@@ -185,90 +264,54 @@ def generate_random_words():
     return final_output
 
 def trigger_movement(input_html):
-    """Function to create smooth transitions from original values to new values."""
-    global original_word_styles, selected_words
+    """Replace words with animated versions that transition from original to new styling."""
+    global original_designs, selected_words
     
-    if not original_word_styles or not selected_words:
+    if not original_designs or not selected_words:
         return 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"
-    ]
+    updated_html = input_html
     
-    # 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"])
+    # Replace each word with its animated version
+    for i, word in enumerate(selected_words):
+        if i in original_designs:
+            # Generate animated version that transitions from original values
+            animated_design = generate_word_design(word, i, is_animated=True)
+            
+            # Find and replace the original word container
+            old_pattern = f'<span class="word-container" id="word-{i}"'
+            old_end = '</span></span>'
             
-            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}';
+            # Find the full original word HTML
+            start_idx = updated_html.find(old_pattern)
+            if start_idx != -1:
+                # Find the end of this word container
+                temp_html = updated_html[start_idx:]
+                span_count = 0
+                end_idx = start_idx
                 
-                // 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
-    
+                for j, char in enumerate(temp_html):
+                    if temp_html[j:j+5] == '<span':
+                        span_count += 1
+                    elif temp_html[j:j+7] == '</span>':
+                        span_count -= 1
+                        if span_count == 0:
+                            end_idx = start_idx + j + 7
+                            break
+                
+                if end_idx > start_idx:
+                    old_word_html = updated_html[start_idx:end_idx]
+                    updated_html = updated_html.replace(old_word_html, animated_design, 1)
+
     return updated_html
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Random Word Styler\nWords smoothly transition from their original styling to completely new styling!")
+    gr.Markdown("# Random Word Styler\nWords progressively transition from original styling to new styling!")
     
     generate_button = gr.Button("Generate Random Words", variant="primary")
     output_html = gr.HTML()
-    animate_button = gr.Button("Trigger Smooth Movement", variant="secondary")
+    animate_button = gr.Button("Trigger Progressive Movement", variant="secondary")
     
     generate_button.click(generate_random_words, outputs=output_html)
     animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)