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']

def generate_circular_text_design(word):
    """Generate a styled design for a word by styling each letter individually, including animations."""
    # 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"]

    # 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: scale(1) rotate(0deg); }}
        25%  {{ transform: scale(1.2) rotate(10deg); }}
        50%  {{ transform: scale(1) rotate(0deg); }}
        75%  {{ transform: scale(1.2) rotate(-10deg); }}
        100% {{ transform: scale(1) rotate(0deg); }}
    }}
    """

    # Create HTML for each letter with dynamic styling and animation
    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': f'{random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"])}',
            'position': 'relative',
            'top': random.choice(font_tops),
            'color': f'#{random.randint(0, 0xFFFFFF):06x}',
            'display': 'inline-block',
            'margin': '0 1px',
            'animation': f'{animation_name} 2s infinite'
        }

        # Convert style to inline CSS
        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])

        # Assign a unique ID for possible future reference
        styled_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
        styled_letters.append(styled_letter)

    # Combine letters into a container with flex display
    return f'''
    <style>
    {keyframes}
    </style>
    <div style="display: flex; align-items: baseline;">{" ".join(styled_letters)}</div>
    '''

def process_text(input_text):
    """Process text and apply special styling to matching words."""
    # Limit input length to prevent long processing times
    max_input_length = 20  # Adjust as needed
    input_text = ' '.join(input_text.split()[:max_input_length])

    # 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 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:
            words[i] = generate_circular_text_design(word)
        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">
    </head>
    <body style='background-color: #000; color: #fff; font-size: 18px; line-height: 1.6; font-family: "Josefin Sans", sans-serif;'>
        <div style='max-width: 800px; margin: auto; padding: 20px;'>
            {output_html}
        </div>
    </body>
    </html>
    """

    return final_output

# Create Gradio interface
iface = gr.Interface(
    fn=process_text,
    inputs="text",
    outputs=gr.HTML(label="Generated Text"),
    title="Circular Text Styler",
    description="Enter a prompt to generate text with special word styling."
)
iface.launch()