app.py

import gradio as gr
import random

# Your predefined words list
SPECIAL_WORDS = [
    'movie', 'excited', 'waiting', 'long', 'time', 'production', 'real', 'coded', 'digital', 'favorite', 
    'asking', 'doing', 'basketball', 'soccer', 'football', 'baseball', 'soup', 'food', 'burgers', 'pizza', 
    'fruit', 'pineapple', 'milk', 'jello', 'candy', 'rice', 'greens', 'lettuce', 'oatmeal', 'cereal', 
    'dogs', 'cats', 'animals', 'goats', 'sheep', 'movies', 'money', 'bank', 'account', 'keeping', 
    'looking', 'moving', 'boxes', 'elephants', 'movement', 'coding', 'developing', 'going', 'cruise', 
    'ship', 'boat', 'bahamas', 'foods', 'healthy', 'eating', 'important', 'pennsylvania', 'atlanta', 
    'north carolina', 'new york', 'france', 'paris', 'work', 'jobs', 'computers', 'computer', 'grocery', 
    'glamorous', 'version', 'truck', 'pickup', 'play', 'types', 'games', 'applications', 'quantum', 
    'speeds', 'advancements', 'technological', 'glimpse', 'countless', 'technology', 'future', 'walking', 
    'hello', 'jordan', 'season', 'superstar', 'nba', 'championship', 'leading', 'points', 'assist', 
    'career', 'chicago', 'scared', 'tongue', 'energy', 'disguise', 'business', 'older', 'grown', 'call', 
    'bills', 'garden', 'house', 'fallen', 'blossoms', 'lawn', 'love', 'forever', 'most', 'fan', 'clout', 
    'space', 'team', 'today', 'woke', 'work', 'relax', 'quicker', 'thicker', 'richer', 'data', 'ballet', 
    'dancer', 'goat', 'post', 'lebron', 'james', 'eagles', 'rockets', 'times', 'tank', 'pencil', 'watch', 
    'rolex', 'rappers', 'rockstar', 'rocket', 'rocks', 'tooth', 'teeth', 'pancake', 'breakfast', 'lunch', 
    'dinner', 'zoom', 'calling', 'talking', 'rule', 'ruler', 'rick', 'morty', 'martin', 'smith', 'wild', 
    'track', 'field', 'touchdown', 'basket', 'hope', 'yours', 'thank', 'olympics', 'sports', 'help', 
    'legal', 'law', 'firm', 'crowd', 'winner', 'winter', 'smoking', 'green', 'purple', 'blue', 'pink', 
    'orange', 'black', 'white', 'yellow', 'gold', 'weather', 'sun', 'middle', 'summer', 'heat', 'spring'
]

# Global variables
original_word_designs = {}
selected_words = []

def generate_word_design(word, word_id, use_color=False):
    """Generate styled design for a word."""
    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"
    ]
    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",
        "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"
    ]
    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 = []
    
    for i, letter in enumerate(letters):
        # Generate COMPLETELY NEW random styles (not based on original)
        style = {
            'font-family': random.choice(fonts),
            '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"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': color,
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'middle'
        }
        
        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_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 ""

    return f'''
    {keyframes}
    <span class="word-container" id="word-{word_id}" style="display: inline-block; 
                                       margin: 10px; 
                                       padding: 8px 12px; 
                                       border: 2px solid #333; 
                                       border-radius: 8px;
                                       background-color: rgba(255,255,255,0.8);">
        <span style="display: inline-flex; 
                     align-items: baseline; 
                     vertical-align: middle;">
            {" ".join(styled_letters)}
        </span>
    </span>'''

def generate_random_words():
    """Generate 5 random words with initial styling."""
    global original_word_designs, selected_words
    
    # Reset data
    original_word_designs = {}
    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)
    
    final_output = f"""
    <html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
        <style>
        body {{
            background-color: #f5f5f5;
            color: #000;
            font-size: 18px;
            line-height: 1.6;
            font-family: "Josefin Sans", sans-serif;
            padding: 20px;
        }}
        .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 id="words-container" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
                {" ".join(styled_words)}
            </div>
        </div>
    </body>
    </html>
    """
    
    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
    
    if not original_word_designs or not selected_words:
        return input_html

    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 (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!")
    
    generate_button = gr.Button("Generate Random Words", variant="primary")
    output_html = gr.HTML()
    animate_button = gr.Button("Trigger Movement Animation", variant="secondary")
    
    generate_button.click(generate_random_words, outputs=output_html)
    animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)

# Launch the app
demo.launch()