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_styles = {}
selected_words = []

def generate_word_design(word, word_id):
    """Generate initial styled design for a word (black color)."""
    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"]
    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"]

    letters = list(word)
    styled_letters = []
    letter_styles_data = []
    
    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
        }
        
        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'''
    <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_styles, selected_words
    
    # Reset data
    original_word_styles = {}
    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)
    
    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;
        }}
        </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 create smooth transitions from original values to new values."""
    global original_word_styles, selected_words
    
    if not original_word_styles 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"
    ]
    
    # 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
    
    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!")
    
    generate_button = gr.Button("Generate Random Words", variant="primary")
    output_html = gr.HTML()
    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)

# Launch the app
demo.launch()