Update app.py

app.py

@@ -6,15 +6,15 @@ from transformers import pipeline
 SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat']
 
 def generate_circular_text_design(word):
-    """Generate a consistent but randomized text design for a word"""
+    """Generate a consistent but randomized text 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 (with some saturation)
+
+    # Random single color
     base_color = f'#{random.randint(0, 0xFFFFFF):06x}'
-    
+
     # Fonts with a controlled set
     fonts = [
         "'Dosis', sans-serif",
@@ -22,11 +22,32 @@ def generate_circular_text_design(word):
         "'Orbitron', sans-serif",
         "'Roboto Condensed', sans-serif"
     ]
-    
+
+    # Generate a unique animation name for CSS
+    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
+    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};
+        }}
+    }}
+    """
+
     for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
@@ -34,56 +55,46 @@ def generate_circular_text_design(word):
             '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, 0deg)',
+            '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
+            '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 id="ddiv{i+1}" class="CIRCDosis_SZ18_SP-3_SH1_SK0_MA0" style="{style_str}">{letter}</div>'
+
+        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 with movement script
-    movement_script = f"""
-    <script>
-    function timedText2x() {{
-        {' '.join([f"""
-        setTimeout(() => {{
-            document.getElementById('ddiv{i+1}').style.transform = 'rotate({random.randint(-20, 20)}deg) scale(1.2)';
-            document.getElementById('ddiv{i+1}').style.fontSize = '{random.choice(font_sizes)+5}px';
-            document.getElementById('ddiv{i+1}').style.color = '#{random.randint(0, 0xFFFFFF):06x}';
-        }}, {100 * (i+1)});
-        setTimeout(() => {{
-            document.getElementById('ddiv{i+1}').style.transform = 'rotate(0deg) scale(1)';
-            document.getElementById('ddiv{i+1}').style.fontSize = '{random.choice(font_sizes)}px';
-        }}, {500 + 100 * (i+1)});
-        """ for i in range(len(letters))])}
-    }}
-    window.onload = timedText2x;
-    </script>
-    """
-    
-    return f'<div style="display: flex; align-items: baseline;">{" ".join(styled_letters)}</div>{movement_script}'
+
+    # Wrap styled letters in a flex container and include keyframes in a style tag
+    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"""
     # Use inference model
     generator = pipeline('text-generation', model='gpt2')
-    generated_text = generator(input_text, max_length=100)[0]['generated_text']
-    
+    generated_text = generator(input_text, max_length=50, num_return_sequences=1)[0]['generated_text']
+
     # Split text into words
     words = generated_text.split()
-    
+
     # Check for special words
     for i, word in enumerate(words):
-        if word.lower() in SPECIAL_WORDS:
+        clean_word = ''.join(e for e in word if e.isalnum()).lower()
+        if clean_word in SPECIAL_WORDS:
             # Apply circular text design
             words[i] = generate_circular_text_design(word)
-    
+
     # Combine words with HTML
     output_html = f"""
     <html>
@@ -102,24 +113,35 @@ def process_text(input_text):
             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>
     </head>
     <body>
-        <h1>{' '.join(words)}</h1>
+        <h1>{" ".join(words)}</h1>
     </body>
     </html>
     """
-    
+
     return output_html
 
 # Create Gradio interface
 iface = gr.Interface(
     fn=process_text,
     inputs="text",
-    outputs=gr.HTML(),
+    outputs=gr.HTML(label="Generated Text"),
     title="Circular Text Styler",
-    description="Enter a prompt to generate text with special word styling"
+    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."
 )
 
 # Launch the interface