app.py

import gradio as gr
import random
import time

# Global variables
initial_word_designs = []
special_words = []

def generate_initial_design(word):
    """Generate initial design for the special word in 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"]
    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"
    ]
    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]

    letters = list(word)
    styled_letters = []
    
    for i, letter in enumerate(letters):
        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.02cm", "0.00cm", "0.02cm"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': '#000000',
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'middle'
        }
        
        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)

    return f'''
    <span class="special-word" style="display: inline-flex; 
                 align-items: baseline; 
                 vertical-align: middle; 
                 margin: 0 2px;">
        {" ".join(styled_letters)}
    </span>'''

def generate_movement_design(word):
    """Generate a completely new random design for the movement animation."""
    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 = ["18px", "19px", "20px"]
    font_tops = ["0px", "1px", "-1px"]
    letter_spacings = ["-1px", "0px", "1px"]
    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"
    ]
    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]

    # Generate random color for the movement design
    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
    
    # Generate unique animation name
    animation_name = f"animate_{random.randint(0, 10000)}"

    # Create keyframes for the animation sequence
    keyframes = f"""
    @keyframes {animation_name} {{
        0% {{ transform: scale(1) rotate(0deg); }}
        50% {{ transform: scale(1.2) rotate(10deg); }}
        100% {{ transform: scale(1) rotate(0deg); }}
    }}
    """

    letters = list(word)
    styled_letters = []
    
    for i, letter in enumerate(letters):
        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.02cm", "0.00cm", "0.02cm"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': random_color,
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'middle',
            'animation': f'{animation_name} 0.5s ease-in-out',
            'animation-delay': f'{i * 0.1}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)

    return f'''
    <style>
    {keyframes}
    .styled-letter {{
        transition: all 0.3s ease;
    }}
    </style>
    <span class="special-word" style="display: inline-flex; 
                 align-items: baseline; 
                 vertical-align: middle; 
                 margin: 0 2px;">
        {" ".join(styled_letters)}
    </span>
    '''

def typing_effect():
    global initial_word_designs, special_words
    
    paragraphs = [
        'Proctors\'s voice quavered, "Where are we, Benshiro? This can\'t be real. We went full speed into that..."',
        '"Proctor, I hear you! Is that you? I\'m so thankful, but where are you? I can\'t see you." Benshiro\'s words echoed in the void.'
    ]

    # Process paragraphs to add styling
    styled_paragraphs = []
    initial_word_designs = []
    special_words = []
    
    for paragraph in paragraphs:
        words = paragraph.split()
        if words:
            special_word = random.choice(words)
            special_words.append(special_word)
            styled_word = generate_initial_design(special_word)
            initial_word_designs.append(styled_word)
            styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
            styled_paragraphs.append(styled_paragraph)

    # Join paragraphs with proper spacing
    all_text = ' '.join(styled_paragraphs)
    
    # Create HTML with chatbot-style reveal animation
    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">
        <style>
        body {{
            background-color: #fff;
            color: #000;
            font-size: 18px;
            line-height: 1.6;
            font-family: "Josefin Sans", sans-serif;
            padding: 20px;
        }}
        .styled-letter {{
            transition: all 0.3s ease;
        }}
        </style>
    </head>
    <body>
        <div style='max-width: 800px; margin: auto;' id="text-content">
            <!-- Content will be revealed here -->
        </div>
        <script>
        function revealText() {{
            const container = document.getElementById('text-content');
            const fullText = `{all_text}`;
            const words = fullText.split(' ');
            container.innerHTML = '';
            let i = 0;
            
            function displayNextWord() {{
                if (i < words.length) {{
                    container.innerHTML += words[i] + ' ';
                    i++;
                    setTimeout(displayNextWord, 200); // Adjust speed here
                }}
            }}
            displayNextWord();
        }}
        
        // Start revealing text immediately
        setTimeout(revealText, 500);
        </script>
    </body>
    </html>
    """
    
    return final_output

def trigger_movement(input_html):
    """Function to trigger the movement animation."""
    global initial_word_designs, special_words
    
    if not initial_word_designs or not special_words:
        return input_html
    
    updated_html = input_html
    for i, (initial_design, special_word) in enumerate(zip(initial_word_designs, special_words)):
        movement_design = generate_movement_design(special_word)
        updated_html = updated_html.replace(initial_design, movement_design, 1)
    
    return updated_html

# Create Gradio interface using Blocks
with gr.Blocks() as demo:
    gr.Markdown("# CircularText Styler\nText with special word styling and animations.")
    
    output_html = gr.HTML()
    with gr.Row():
        start_btn = gr.Button("▶ Start Typing")
        animate_btn = gr.Button("✨ Trigger Movement")
    
    start_btn.click(typing_effect, inputs=[], outputs=output_html)
    animate_btn.click(trigger_movement, inputs=output_html, outputs=output_html)

# Launch the app
demo.launch()

# Launch the app
demo.launch()