app.py

import gradio as gr
import random
import time

# Global variables
current_text = ""
special_words = []
original_paragraphs = []
animation_counter = 0

def generate_transition_style(word, animation_id):
    """Generate styling with transition animation from normal to styled and back to normal."""
    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"
    ]
    font_sizes = ["16px", "17px", "18px", "19px", "20px"]
    font_tops = ["0px", "1px", "-1px"]
    letter_spacings = ["-3px", "-2px", "-1px", "1px", "-2px", "-3px"]
    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 = []
    keyframes_css = ""
    
    for i, letter in enumerate(letters):
        # Generate random styled properties
        styled_font_family = random.choice(fonts)
        styled_font_size = random.choice(font_sizes)
        styled_letter_spacing = random.choice(letter_spacings)
        styled_text_shadow = random.choice(text_shadows)
        styled_skew_angle = random.choice(skew_angles)
        styled_top = random.choice(font_tops)
        styled_margin_top = random.choice(["-0.02cm", "0.00cm", "0.02cm"])
        
        # Create unique animation name
        animation_name = f"sneakStyle_{animation_id}_{i}"
        
        # Create keyframes that go: normal → styled → normal (with complete reset)
        keyframes_css += f"""
        @keyframes {animation_name} {{
            0% {{
                font-family: inherit;
                font-size: inherit;
                letter-spacing: normal;
                color: inherit;
                text-shadow: none;
                transform: none;
                top: auto;
                margin-top: 0;
                margin-left: 0;
                margin-right: 0;
                font-weight: inherit;
                font-style: inherit;
            }}
            25% {{
                font-family: {styled_font_family};
                font-size: {styled_font_size};
                letter-spacing: {styled_letter_spacing};
                color: #000000;
                text-shadow: {styled_text_shadow};
                transform: skew({styled_skew_angle}) scale(1.1);
                top: {styled_top};
                margin-top: {styled_margin_top};
            }}
            50% {{
                font-family: {styled_font_family};
                font-size: {styled_font_size};
                letter-spacing: {styled_letter_spacing};
                color: #000000;
                text-shadow: {styled_text_shadow};
                transform: skew({styled_skew_angle}) scale(0.95);
                top: {styled_top};
                margin-top: {styled_margin_top};
            }}
            75% {{
                font-family: {styled_font_family};
                font-size: {styled_font_size};
                letter-spacing: {styled_letter_spacing};
                color: #000000;
                text-shadow: {styled_text_shadow};
                transform: skew({styled_skew_angle}) scale(1.05);
                top: {styled_top};
                margin-top: {styled_margin_top};
            }}
            100% {{
                font-family: inherit;
                font-size: inherit;
                letter-spacing: normal;
                color: inherit;
                text-shadow: none;
                transform: none;
                top: auto;
                margin-top: 0;
                margin-left: 0;
                margin-right: 0;
                font-weight: inherit;
                font-style: inherit;
                display: inline;
                position: static;
                vertical-align: baseline;
            }}
        }}
        """
        
        # Start with completely normal styling that will be overridden by animation
        style = {
            'display': 'inline',
            'position': 'relative',
            'animation': f'{animation_name} 3s 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 style="{style_str}">{letter}</span>'
        styled_letters.append(styled_letter)

    # Return just the letters with animation, no wrapper spans
    return f"""
    <style>{keyframes_css}</style>
    {"".join(styled_letters)}
    """

def display_normal_text():
    """Display the text normally without any styling."""
    global current_text, special_words, original_paragraphs
    
    paragraphs = [
    'How did we get here December 30th 2124 "Good morning, Benshiro. Wake up! We\'ve got A.I. training ahead," urged Benshiro\'s partner as they prepared for their day in sector A1 - A1000, one of the elite development sectors serving the World One government. It was the year 2124.',
    '2033 The police were targeting the economically disadvantaged community, and if you were living in poverty in One Country, you were looked down upon. In 2033, a civil war broke out in Philadelphia, New York, Chicago, and a few other big cities. Citizens, fed up with losing jobs to A.I. and enduring systemic mistreatment, initiated the conflict. After the long fight, substantial changes and more restrictive rules were implemented in communities, along with increased travel restrictions for all citizens. Although schools and other institutions remained, life had fundamentally changed for everyone in America.',
    '2034 In 2034, Anonymous developed an A.I. hack that no bank or institution could counter. This forced all American citizens to join One Country and secure their finances through One Country banking accounts. These accounts were managed by the One Country government and intended to provide security and fairness. Some even thought that the government was behind the attack in the first place.',
    '2036 By 2036, the government implemented a new policy for One Country accounts. If individuals committed a crime and did not turn themselves in, their accounts would be frozen. This rule was highly controversial, as it curtailed personal freedoms. In a bold initiative, the One Country President announced plans to establish a 99% robotic police force by 2045. The program will begin immediately, aiming to have 30% of the force composed of active robots within the first phase. Human officers would collaborate with these machines in decision-making processes. To support this vision, a vast 10,000-acre automation facility—equivalent to the size of Manhattan—was constructed. This facility aimed to produce advanced robots and flying vehicles, initially reserved for government officials and the wealthy, signaling a significant shift towards automation in society.'
    ]

    # Store original paragraphs
    original_paragraphs = paragraphs[:]
    
    # Select one random word from each paragraph for future styling
    special_words = []
    for paragraph in paragraphs:
        words = paragraph.split()
        special_word = random.choice(words)
        special_words.append(special_word)
    
    # Store normal text
    current_text = '<br><br>'.join(paragraphs)
    
    return f"""
    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 16px; line-height: 1.6; padding: 20px; max-width: 800px;">
        {current_text}
    </div>
    """

def trigger_movement():
    """Apply transition styling to selected words - they style then return to completely normal."""
    global current_text, special_words, original_paragraphs, animation_counter
    
    if not special_words or not original_paragraphs:
        return display_normal_text()
    
    # Increment animation counter for unique animations
    animation_counter += 1
    
    styled_paragraphs = []
    all_styles = ""
    
    for i, paragraph in enumerate(original_paragraphs):
        if i < len(special_words):
            special_word = special_words[i]
            animation_id = f"{animation_counter}_{i}"
            styled_word_html = generate_transition_style(special_word, animation_id)
            
            # Extract styles from styled_word_html
            if "<style>" in styled_word_html:
                style_start = styled_word_html.find("<style>") + 7
                style_end = styled_word_html.find("</style>")
                all_styles += styled_word_html[style_start:style_end]
                styled_word = styled_word_html[styled_word_html.find("</style>") + 8:]
            else:
                styled_word = styled_word_html
            
            # Replace only the first occurrence of the special word in this paragraph
            styled_paragraph = paragraph.replace(special_word, styled_word, 1)
            styled_paragraphs.append(styled_paragraph)
        else:
            styled_paragraphs.append(paragraph)
    
    styled_text = '<br><br>'.join(styled_paragraphs)
    
    return f"""
    <style>{all_styles}</style>
    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 16px; line-height: 1.6; padding: 20px; max-width: 800px;">
        {styled_text}
    </div>
    """

# Create Gradio interface using Blocks
with gr.Blocks() as demo:
    gr.Markdown("# CircularText Styler\nText with smooth sneaking style transitions - words style then blend back perfectly with original text.")
    
    output_html = gr.HTML()
    with gr.Row():
        start_btn = gr.Button("▶ Show Text")
        animate_btn = gr.Button("✨ Sneak Style")
    
    start_btn.click(display_normal_text, inputs=[], outputs=output_html)
    animate_btn.click(trigger_movement, inputs=[], outputs=output_html)

# Launch the app
demo.launch()