Update app.py

app.py

@@ -9,51 +9,76 @@ generator = pipeline('text-generation', model='distilgpt2')  # Lightweight model
 SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat']
 
 def generate_circular_text_design(word):
-    """Generate a simple animated design for a word using CSS animations."""
+    """Generate a styled design for a word by styling each letter individually."""
     # Controlled randomization parameters
     fonts = [
         "'Dosis', sans-serif",
         "'Josefin Sans', sans-serif",
         "'Orbitron', sans-serif",
-        "'Roboto Condensed', sans-serif"
+        "'Roboto Condensed', sans-serif",
+        "'VT323', monospace",
+        "'Rajdhani', sans-serif",
+        "'Anton', sans-serif",
+        "'Caveat', cursive",
+        "'Patrick Hand', cursive",
+        "'Nothing You Could Do', cursive",
+        "'Reenie Beanie', cursive",
+        "'Patrick Hand', cursive",
+        "'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_size = random.choice([18, 20, 22, 24])
-    skew_angle = random.choice([-15, -10, 0, 10, 15])
-    base_color = f'#{random.randint(0, 0xFFFFFF):06x}'
-
-    # Unique animation name
-    animation_name = f"animation_{random.randint(0, 10000)}"
-
-    # CSS Keyframes
-    keyframes = f"""
-    @keyframes {animation_name} {{
-        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}; }}
-    }}
-    """
-
-    # 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>
-    <span style="{style_str}">{word}</span>
-    '''
-    return styled_word
+    font_sizes = [17, 19, 21, 23, 25, 27]
+    font_tops = [11, 11, 13, 13, 15, 15]
+    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 = [-10, -5, 0, 5, 10, 15, 20, 25, 30]
+
+    # Create HTML for each letter with dynamic styling
+    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',
+            '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',
+            'position': 'relative',
+            'top': f'{random.choice(font_tops)}px',
+            'color': f'#{random.randint(0, 0xFFFFFF):06x}',
+            'display': 'inline-block',
+            'margin': '0 1px'
+        }
+
+        # 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)
+        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>'
 
 def process_text(input_text):
     """Process text and apply special styling to matching words."""
@@ -87,11 +112,30 @@ def process_text(input_text):
     final_output = f"""
     <html>
     <head>
-        <!-- 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'>
+        <!-- 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; 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 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>
     """