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')  # Lightweight model

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

# Function to generate the initial design (black color)
def generate_initial_design(word):
    """Generate initial design for the special word in black color."""
    # Controlled randomization parameters
    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",
        "'Abril Fatface', cursive",
        "'Gloria Hallelujah', cursive",
        "'Righteous', cursive",
        "'Annie Use Your Telescope', cursive"
    ]
    font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
    font_tops = ["11px", "11px", "13px", "13px", "15px", "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"]
    
    # Create HTML for each letter with random styling (black color)
    letters = list(word)
    styled_letters = []
    for i, letter in enumerate(letters):
        style = {
            'font-family': random.choice(fonts),
            'line-height': '110%',
            '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',  # Black color
            'display': 'inline-block',
            'margin': '0 1px'
        }
        
        # Convert style to inline CSS
        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
        
        # Wrap the letter in a span
        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
        styled_letters.append(styled_letter)
    
    # Combine letters into a container with inline display
    return f'<span>{" ".join(styled_letters)}</span>'

# Function to generate the movement design (random color)
def generate_movement_design(word):
    """Generate movement design for the special word in random color."""
    # Controlled randomization parameters (could be different ranges if desired)
    # Reuse the same parameters or define new ranges for the movement
    fonts = [
        "'VT323', monospace",
        "'Josefin Sans', sans-serif",
        "'Rajdhani', sans-serif",
        "'Anton', sans-serif",
        # You can include different fonts if you want
    ]
    font_sizes = ["20px", "22px", "24px", "26px", "28px", "30px"]
    font_tops = ["10px", "12px", "14px", "16px"]
    letter_spacings = ["-3px", "-2px", "-1px", "0px", "1px", "2px", "3px"]
    text_shadows = [
        "0px 0px 5px #ff0000",  # Red glow
        "0px 0px 5px #00ff00",  # Green glow
        "0px 0px 5px #0000ff",  # Blue glow
        # Add more if desired
    ]
    skew_angles = ["-15deg", "-10deg", "0deg", "10deg", "15deg"]
    
    # Generate a unique animation name for CSS
    animation_name = f"animate_{random.randint(0, 10000)}"
    
    # Create CSS keyframes for the animation
    keyframes = f"""
    @keyframes {animation_name} {{
        0%   {{ transform: translateY(0px); }}
        50%  {{ transform: translateY(-10px); }}
        100% {{ transform: translateY(0px); }}
    }}
    """
    # Generate random color
    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
    
    # Create HTML for each letter with random styling and animation (random color)
    letters = list(word)
    styled_letters = []
    for i, letter in enumerate(letters):
        style = {
            'font-family': random.choice(fonts),
            'line-height': '110%',
            '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.03cm", "0.00cm", "0.03cm"]),
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': random_color,  # Random color
            'display': 'inline-block',
            'margin': '0 1px',
            'animation': f'{animation_name} 1s ease-in-out forwards'
        }
        
        # Convert style to inline CSS
        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
        
        # Wrap the letter in a span
        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
        styled_letters.append(styled_letter)
    
    # Combine letters into a container with inline display and include keyframes
    return f'''
    <style>
    {keyframes}
    </style>
    <span>{" ".join(styled_letters)}</span>
    '''

# Global variable to store the initial design
initial_word_design = ""

def process_text(input_text):
    """Process text and generate the initial output with special word styled in black."""
    global initial_word_design
    
    # Generate text with limited length
    generated = generator(input_text, max_length=50, num_return_sequences=1)
    generated_text = generated[0]['generated_text']
    
    # Limit output length to prevent overflow
    generated_text = generated_text[:300]  # Limit to first 300 characters
    
    # Split text into words
    words = generated_text.split()
    
    # Check for special words and apply initial styling
    for i, word in enumerate(words):
        # Clean the word for matching
        clean_word = ''.join(filter(str.isalnum, word)).lower()
        if clean_word in SPECIAL_WORDS:
            # Store the initial design
            initial_word_design = generate_initial_design(word)
            words[i] = initial_word_design
        else:
            words[i] = word
    
    # Combine words back into HTML-formatted text
    output_html = ' '.join(words)
    
    # Build the complete HTML
    final_output = f"""
    <html>
    <head>
        <!-- Include all necessary fonts -->
        <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" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Oswald:300" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Oswald:200" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Poiret+One|Dosis:300|Fjalla+One" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Pacifico|Shadows+Into+Light|Dancing+Script|Amatic+SC" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Josefin+Sans|Gloria+Hallelujah|Roboto+Slab|Righteous|Sacramento|Yellowtail" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Just+Me+Again+Down+Here|Nixie+One|Six+Caps|Unkempt" rel="stylesheet">
        <style>
        body {{
            background-color: #fff;
            color: #000;
            font-size: 18px;
            line-height: 1.6;
            font-family: "Josefin Sans", sans-serif;
        }}
        </style>
    </head>
    <body>
        <div style='max-width: 800px; margin: auto; padding: 20px;'>
            {output_html}
        </div>
    </body>
    </html>
    """
    
    return final_output

def trigger_movement(input_html):
    """Function to trigger the movement animation by updating the special word design."""
    # Since we don't have a way to animate already rendered HTML, we regenerate the movement design.
    # We need to replace the initial design with the movement design in the input_html.
    global initial_word_design
    
    # Edge case: if initial_word_design is empty, return the input_html
    if not initial_word_design:
        return input_html  # No special word was found previously
    
    # Extract the special word from the initial design
    start_marker = '<span class="'
    start_index = initial_word_design.find(start_marker)
    if start_index == -1:
        return input_html  # Can't find the initial design
    
    # Get the word from the initial_design
    special_word = ''.join([c for c in initial_word_design if c.isalpha()])
    
    # Generate the movement design
    movement_design = generate_movement_design(special_word)
    
    # Replace the initial design with the movement design in the input_html
    updated_html = input_html.replace(initial_word_design, movement_design, 1)
    
    # After the animation ends, we can set the design back to initial
    # Since we can't execute JavaScript, the design will remain as the movement design
    # Alternatively, we can schedule the change back using CSS animations
    
    # Append CSS to change back to black after animation (using animation-fill-mode)
    updated_html = updated_html.replace('</head>', '''
    <style>
    .styled-letter {
        animation-fill-mode: forwards;
    }
    </style>
    </head>''')
    
    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")
    
    # Connect functions
    submit_button.click(process_text, inputs=input_text, outputs=output_html)
    animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)
    
    gr.HTML("""
    <style>
    /* Center the buttons */
    .gradio-container .gr-button {
        margin-top: 10px;
        margin-bottom: 10px;
   <span class="ml-2" /><span class="inline-block w-3 h-3 rounded-full bg-neutral-a12 align-middle mb-[0.1rem]" />