Update app.py

app.py

@@ -25,11 +25,11 @@ SPECIAL_WORDS = [
 ]
 
 # Global variables
-original_word_data = {}
+original_word_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, use_color=False):
+    """Generate styled design for a word."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -47,9 +47,9 @@ 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"]
+    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"]
     text_shadows = [
         "0px 0px 1px",
         "0px 0px 2px",
@@ -60,62 +60,65 @@ def generate_word_design(word, word_id):
         "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"
     ]
-    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
+    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)}"
 
     letters = list(word)
     styled_letters = []
-    letter_styles = []  # Store styles for animation later
     
     for i, letter in enumerate(letters):
-        # Generate random 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 style data for animation
-        letter_styles.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
-        })
-        
+        # Generate COMPLETELY NEW random styles (not based on original)
         style = {
-            'font-family': font_family,
+            'font-family': random.choice(fonts),
             '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,
+            '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"]),
             'position': 'relative',
-            'top': top,
-            'color': '#000000',  # Start with black
+            'top': random.choice(font_tops),
+            'color': color,
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'middle',
-            'transition': 'all 0.5s ease'  # Smooth transition
+            'vertical-align': 'middle'
         }
         
+        if use_color:
+            style['animation'] = f'{animation_name} 0.8s ease-in-out infinite'
+            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="letter-{word_id}-{i}" style="{style_str}">{letter}</span>'
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    # Store letter styles for later animation
-    original_word_data[word_id] = {
-        'word': word,
-        'letter_styles': letter_styles
-    }
+    # Create keyframes for movement animation
+    keyframes = f"""
+    <style>
+    @keyframes {animation_name} {{
+        0% {{ transform: scale(1) rotate(0deg) skew({random.choice(skew_angles)}); }}
+        25% {{ transform: scale(1.3) rotate({random.choice(["-15deg", "15deg", "20deg"])}deg) skew({random.choice(skew_angles)}); }}
+        50% {{ transform: scale(0.9) rotate({random.choice(["-10deg", "10deg", "25deg"])}deg) skew({random.choice(skew_angles)}); }}
+        75% {{ transform: scale(1.2) rotate({random.choice(["-5deg", "5deg", "30deg"])}deg) skew({random.choice(skew_angles)}); }}
+        100% {{ transform: scale(1.1) rotate(0deg) skew({random.choice(skew_angles)}); }}
+    }}
+    </style>
+    """ if use_color else ""
 
     return f'''
+    {keyframes}
     <span class="word-container" id="word-{word_id}" style="display: inline-block; 
                                        margin: 10px; 
                                        padding: 8px 12px; 
@@ -131,16 +134,18 @@ def generate_word_design(word, word_id):
 
 def generate_random_words():
     """Generate 5 random words with initial styling."""
-    global original_word_data, selected_words
+    global original_word_designs, selected_words
     
     # Reset data
-    original_word_data = {}
+    original_word_designs = {}
     selected_words = random.sample(SPECIAL_WORDS, 5)
     
     styled_words = []
     for i, word in enumerate(selected_words):
-        word_design = generate_word_design(word, i)
-        styled_words.append(word_design)
+        # 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)
     
     final_output = f"""
     <html>
@@ -169,21 +174,15 @@ def generate_random_words():
             font-family: "Josefin Sans", sans-serif;
             padding: 20px;
         }}
-        @keyframes bounce {{
-            0% {{ transform: scale(1) rotate(0deg); }}
-            50% {{ transform: scale(1.3) rotate(15deg); }}
-            100% {{ transform: scale(1.1) rotate(5deg); }}
-        }}
-        @keyframes colorShift {{
-            0% {{ filter: hue-rotate(0deg); }}
-            100% {{ filter: hue-rotate(360deg); }}
+        .styled-letter {{
+            transition: all 0.6s ease;
         }}
         </style>
     </head>
     <body>
         <div style='max-width: 800px; margin: auto; text-align: center;'>
             <h2 style="margin-bottom: 30px;">Random Styled Words</h2>
-            <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
+            <div id="words-container" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
                 {" ".join(styled_words)}
             </div>
         </div>
@@ -194,65 +193,27 @@ def generate_random_words():
     return final_output
 
 def trigger_movement(input_html):
-    """Function to trigger the movement animation by transitioning from original to new styling."""
-    global original_word_data, selected_words
+    """Function to trigger the movement by replacing each word with a completely NEW styled version."""
+    global original_word_designs, selected_words
     
-    if not original_word_data or not selected_words:
+    if not original_word_designs or not selected_words:
         return input_html
 
-    # Generate JavaScript to animate the existing elements
-    animation_script = """
-    <script>
-    function animateWords() {
-        // Define color array for random colors
-        const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4', '#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E9'];
-        
-    """
-    
-    for word_id, data in original_word_data.items():
-        word = data['word']
-        letter_styles = data['letter_styles']
-        random_color = f"colors[Math.floor(Math.random() * colors.length)]"
-        
-        for i, letter_style in enumerate(letter_styles):
-            # Generate new random styles for the movement
-            new_font_size = random.choice(["20px", "22px", "24px"])
-            new_skew = random.choice(["-30deg", "-20deg", "0deg", "20deg", "30deg"])
-            new_rotation = random.choice(["-10deg", "0deg", "10deg", "15deg"])
-            
-            animation_script += f"""
-        // Animate letter {i} of word {word_id}
-        setTimeout(() => {{
-            const letter = document.querySelector('.letter-{word_id}-{i}');
-            if (letter) {{
-                letter.style.color = {random_color};
-                letter.style.fontSize = '{new_font_size}';
-                letter.style.transform = 'skew({new_skew}) rotate({new_rotation}) scale(1.1)';
-                letter.style.animation = 'bounce 0.8s ease-in-out, colorShift 2s infinite';
-                letter.style.textShadow = '0px 0px 8px ' + {random_color};
-            }}
-        }}, {i * 100});
-        """
-    
-    animation_script += """
-    }
-    
-    // Trigger the animation
-    animateWords();
-    </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
+    updated_html = input_html
     
+    # 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
+            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 with smooth movement animations!")
+    gr.Markdown("# Random Word Styler\nGenerate 5 random styled words that transform into completely new styles!")
     
     generate_button = gr.Button("Generate Random Words", variant="primary")
     output_html = gr.HTML()