app.py

import gradio as gr
import random
import time

# Global variables
initial_word_designs = []
special_words = []
current_text = ""

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"
    ]
    font_sizes = ["18px", "19px", "20px" , "21px", "22px"]
    font_tops = ["0px", "1px", "-1px"]
    letter_spacings = ["-3px", "-2px", "-1px", "1px", "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"
    ]
    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">{" ".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" , "21px", "22px"]
    font_tops = ["0px", "1px", "-1px"]
    letter_spacings = ["-3px", "-2px", "-1px", "1px", "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"
    ]
    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}'

    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'
        }
        
        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">{" ".join(styled_letters)}</span>'

def typing_effect():
    global initial_word_designs, special_words, current_text
    
    paragraphs = [
        'Proctors voice quavered, "Where are we, Benshiro? This cant be real. We went full speed into that..."',
        '"Proctor, I hear you! Is that you? Im so thankful, but where are you? I cant see you." Benshiros 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)

    current_text = '<br><br>'.join(styled_paragraphs)
    
    # Simulate typing effect by yielding incremental text
    words = current_text.split()
    displayed_text = ""
    
    for i, word in enumerate(words):
        displayed_text += word + " "
        time.sleep(0.01)  # Small delay
        yield f"""
        <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
            {displayed_text}
        </div>
        """
    
    return f"""
    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
        {current_text}
    </div>
    """

def trigger_movement():
    global initial_word_designs, special_words, current_text
    
    if not initial_word_designs or not special_words:
        return current_text
    
    updated_text = current_text
    for i, (initial_design, special_word) in enumerate(zip(initial_word_designs, special_words)):
        movement_design = generate_movement_design(special_word)
        updated_text = updated_text.replace(initial_design, movement_design, 1)
    
    current_text = updated_text
    
    return f"""
    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
        {updated_text}
    </div>
    """

# 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=[], outputs=output_html)

# Launch the app
demo.launch()