Update app.py

app.py

@@ -9,21 +9,18 @@ generator = pipeline('text-generation', model='distilgpt2')  # Lightweight model
 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."""
+    """Generate a styled design for a word by styling each letter individually, including animations."""
     # Controlled randomization parameters
     fonts = [
-        "'Dosis', sans-serif",
-        "'Josefin Sans', sans-serif",
-        "'Orbitron', sans-serif",
-        "'Roboto Condensed', sans-serif",
         "'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",
-        "'Patrick Hand', cursive",
+        "'Orbitron', sans-serif",
         "'Raleway', sans-serif",
         "'Open Sans Condensed', sans-serif",
         "'Poiret One', cursive",
@@ -35,8 +32,8 @@ def generate_circular_text_design(word):
         "'Righteous', cursive",
         "'Annie Use Your Telescope', cursive"
     ]
-    font_sizes = [17, 19, 21, 23, 25, 27]
-    font_tops = [11, 11, 13, 13, 15, 15]
+    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",
@@ -49,36 +46,56 @@ def generate_circular_text_design(word):
         "1px 1px 0px",
         "1px 0px 1px"
     ]
-    skew_angles = [-10, -5, 0, 5, 10, 15, 20, 25, 30]
+    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
+    # 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': f'{random.choice(font_sizes)}px',
+            '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)}deg)',
-            'margin-top': f'{random.uniform(-0.1, 0.1):.2f}cm',
+            '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': f'{random.choice(font_tops)}px',
+            'top': random.choice(font_tops),
             'color': f'#{random.randint(0, 0xFFFFFF):06x}',
             'display': 'inline-block',
-            'margin': '0 1px'
+            '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 class name for possible future reference (if needed)
+        # 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)
 
-    # Wrap styled letters in a flex container
-    return f'<div style="display: flex; align-items: baseline;">{" ".join(styled_letters)}</div>'
+    # 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."""
@@ -131,11 +148,13 @@ def process_text(input_text):
         <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=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>
+        <div style='max-width: 800px; margin: auto; padding: 20px;'>
+            {output_html}
+        </div>
     </body>
     </html>
     """
@@ -150,6 +169,4 @@ iface = gr.Interface(
     title="Circular Text Styler",
     description="Enter a prompt to generate text with special word styling."
 )
-
-# Launch the interface
 iface.launch()