Update app.py

app.py

@@ -2,138 +2,101 @@ 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 consistent but randomized text design for a word using CSS animations"""
+    """Generate a simple animated design for a word using CSS animations."""
     # Controlled randomization parameters
-    font_sizes = [18, 20, 22, 24, 26]
-    letter_spacings = [-3, -2, -4]
-    skew_angles = [-25, -20, -15, -10, 0, 10, 15, 20, 25]
-
-    # Random single color
-    base_color = f'#{random.randint(0, 0xFFFFFF):06x}'
-
-    # Fonts with a controlled set
     fonts = [
         "'Dosis', sans-serif",
         "'Josefin Sans', sans-serif",
         "'Orbitron', sans-serif",
         "'Roboto Condensed', sans-serif"
     ]
+    font_size = random.choice([18, 20, 22, 24])
+    skew_angle = random.choice([-15, -10, 0, 10, 15])
+    base_color = f'#{random.randint(0, 0xFFFFFF):06x}'
 
-    # Generate a unique animation name for CSS
+    # Unique animation name
     animation_name = f"animation_{random.randint(0, 10000)}"
 
-    # Create HTML for each letter with dynamic styling
-    letters = list(word)
-    styled_letters = []
-
-    # Prepare CSS keyframes for animation
+    # CSS Keyframes
     keyframes = f"""
     @keyframes {animation_name} {{
-        0% {{
-            transform: scale(1) rotate(0deg);
-            color: {base_color};
-        }}
-        50% {{
-            transform: scale(1.2) rotate({random.randint(-20, 20)}deg);
-            color: #{random.randint(0, 0xFFFFFF):06x};
-        }}
-        100% {{
-            transform: scale(1) rotate(0deg);
-            color: {base_color};
-        }}
+        0%   {{ transform: skew({skew_angle}deg); color: {base_color}; }}
+        50%  {{ transform: skew({-skew_angle}deg); color: {base_color}; }}
+        100% {{ transform: skew({skew_angle}deg); color: {base_color}; }}
     }}
     """
 
-    for i, letter in enumerate(letters):
-        style = {
-            'font-family': random.choice(fonts),
-            'line-height': '138%',
-            'font-size': f'{random.choice(font_sizes)}px',
-            'letter-spacing': f'{random.choice(letter_spacings)}px',
-            'text-shadow': '1px 2px 1px',
-            'transform': f'skew({random.choice(skew_angles)}deg)',
-            'margin-top': f'{random.uniform(-0.1, 0.1):.2f}cm',
-            'position': 'relative',
-            'top': f'{random.randint(3, 11)}px',
-            'color': base_color,
-            'animation': f'{animation_name} 2s ease-in-out infinite',
-        }
-
-        # Convert style to inline CSS
-        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
-
-        styled_letter = f'<div class="CIRCDosis_SZ18_SP-3_SH1_SK0_MA0" style="{style_str}">{letter}</div>'
-        styled_letters.append(styled_letter)
-
-    # Wrap styled letters in a flex container and include keyframes in a style tag
-    return f'''
+    # Style properties
+    style = {
+        'font-family': random.choice(fonts),
+        'font-size': f'{font_size}px',
+        'color': base_color,
+        'display': 'inline-block',
+        'animation': f'{animation_name} 2s infinite',
+        'margin': '0 2px'
+    }
+
+    # Convert style to inline CSS
+    style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
+
+    # Construct HTML with embedded style and animation
+    styled_word = f'''
     <style>
     {keyframes}
     </style>
-    <div style="display: flex; align-items: baseline;">
-        {" ".join(styled_letters)}
-    </div>
+    <span style="{style_str}">{word}</span>
     '''
+    return styled_word
 
 def process_text(input_text):
-    """Process text and apply special styling to matching words"""
-    # Use inference model
-    generator = pipeline('text-generation', model='gpt2')
-    generated_text = generator(input_text, max_length=50, num_return_sequences=1)[0]['generated_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
+    # Check for special words and apply styling
     for i, word in enumerate(words):
-        clean_word = ''.join(e for e in word if e.isalnum()).lower()
+        # Clean the word for matching
+        clean_word = ''.join(filter(str.isalnum, word)).lower()
         if clean_word in SPECIAL_WORDS:
-            # Apply circular text design
             words[i] = generate_circular_text_design(word)
+        else:
+            words[i] = word
+
+    # Combine words back into HTML-formatted text
+    output_html = ' '.join(words)
 
-    # Combine words with HTML
-    output_html = f"""
+    # Build the complete HTML
+    final_output = f"""
     <html>
     <head>
-        <link href="https://fonts.googleapis.com/css2?family=Dosis&family=Josefin+Sans&family=Orbitron&family=Roboto+Condensed&display=swap" rel="stylesheet">
-        <style>
-        .CIRCDosis_SZ18_SP-3_SH1_SK0_MA0 {{
-            float: left;
-            position: relative;
-            transition: all 0.3s ease;
-        }}
-        body {{
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            font-family: 'Josefin Sans', sans-serif;
-            background-color: black;
-            color: silver;
-            text-align: center;
-            padding: 10px;
-            box-sizing: border-box;
-        }}
-        h1 {{
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-            font-size: 24px;
-        }}
-        </style>
+        <!-- Include only necessary fonts -->
+        <link href='https://fonts.googleapis.com/css2?family=Dosis&family=Josefin+Sans&family=Orbitron&family=Roboto+Condensed&display=swap' rel='stylesheet'>
     </head>
-    <body>
-        <h1>{" ".join(words)}</h1>
+    <body style='background-color: #000; color: #fff; padding: 20px; font-size: 18px; line-height: 1.6; font-family: "Josefin Sans", sans-serif;'>
+        <div style='max-width: 800px; margin: auto;'>{output_html}</div>
     </body>
     </html>
     """
 
-    return output_html
+    return final_output
 
 # Create Gradio interface
 iface = gr.Interface(
@@ -141,8 +104,8 @@ iface = gr.Interface(
     inputs="text",
     outputs=gr.HTML(label="Generated Text"),
     title="Circular Text Styler",
-    description="Enter a prompt to generate text with special word styling. If the generated text contains specific words, they'll be styled with dynamic animations."
+    description="Enter a prompt to generate text with special word styling."
 )
 
 # Launch the interface
-iface.launch()
+iface.launch()