app.py

import gradio as gr
import random
from transformers import pipeline

# Load the model once when the app starts
generator = pipeline('text-generation', model='distilgpt2', max_length=25)  # Reduced max_length for faster inference

# Predefined words to check
SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat', 'spring', 'winter']

# Global variables
initial_word_design = ""
special_word = ""

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 = ["17px", "19px", "21px", "23px", "25px", "27px"]
    font_tops = ["11px", "13px", "15px"]
    letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
    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': '138%',
            '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.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': '#000000',
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'baseline'
        }
        
        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 style="display: inline-flex; align-items: baseline; position: relative;">{" ".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 = ["17px", "19px", "21px", "23px", "25px", "27px"]
    font_tops = ["11px", "13px", "15px"]
    letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
    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': '138%',
            '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.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': random_color,
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'baseline',
            '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 style="display: inline-flex; align-items: baseline; position: relative;">
        {" ".join(styled_letters)}
    </span>
    '''

def process_text(input_text):
    """Process text and generate the initial output with special word styled in black."""
    global initial_word_design, special_word

    # Generate text with limited length
    generated = generator(input_text, num_return_sequences=1)
    generated_text = generated[0]['generated_text']
    generated_text = generated_text[:200]  # Limit output length

    words = generated_text.split()
    
    for i, word in enumerate(words):
        clean_word = ''.join(filter(str.isalnum, word)).lower()
        if clean_word in SPECIAL_WORDS:
            special_word = word
            initial_word_design = generate_initial_design(word)
            words[i] = initial_word_design
        else:
            words[i] = word

    output_html = ' '.join(words)
    
    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;
        }}
        </style>
    </head>
    <body>
        <div style='max-width: 800px; margin: auto;'>
            {output_html}
        </div>
    </body>
    </html>
    """
    
    return final_output

def trigger_movement(input_html):
    """Function to trigger the movement animation."""
    global initial_word_design, special_word
    
    if not initial_word_design or not special_word:
        return input_html

    movement_design = generate_movement_design(special_word)
    updated_html = input_html.replace(initial_word_design, movement_design, 1)

    return updated_html

# Create Gradio interface using Blocks
with gr.Blocks() as demo:
    gr.Markdown("# Circular Text Styler\nEnter a prompt to generate text with special word styling.")
    
    with gr.Row():
        input_text = gr.Textbox(label="Input Prompt")
        submit_button = gr.Button("Generate")
    
    output_html = gr.HTML()
    animate_button = gr.Button("Trigger Movement")
    
    submit_button.click(process_text, inputs=input_text, outputs=output_html)
    animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)

# Launch the app
demo.launch()