Update app.py

app.py

@@ -1,10 +1,9 @@
 import gradio as gr
 import random
 import time
-import re
 
-# === Your original per-letter styling algorithm ===
 def generate_initial_design(word):
+    """Generate initial design for the special word in black color."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -35,8 +34,8 @@ def generate_initial_design(word):
 
     letters = list(word)
     styled_letters = []
-
-    for letter in letters:
+    
+    for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
             'line-height': '1.6',
@@ -50,56 +49,180 @@ def generate_initial_design(word):
             'color': '#000000',
             'display': 'inline-block',
             'margin': '0 1px',
+            'vertical-align': 'middle'
+        }
+        
+        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
+        styled_letters.append(styled_letter)
+
+    return f'''
+    <span style="display: inline-flex; 
+                 align-items: baseline; 
+                 vertical-align: middle; 
+                 margin: 0 2px;">
+        {" ".join(styled_letters)}
+    </span>'''
+
+def generate_movement_design(word):
+    """Generate a completely new random design for the movement animation."""
+    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"
+    ]
+    font_sizes = ["18px", "19px", "20px"]
+    font_tops = ["0px", "1px", "-1px"]
+    letter_spacings = ["-1px", "0px", "1px"]
+    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 random color for the movement design
+    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
+    
+    # Generate unique animation name
+    animation_name = f"animate_{random.randint(0, 10000)}"
+
+    # Create keyframes for the animation sequence
+    keyframes = f"""
+    @keyframes {animation_name} {{
+        0% {{ transform: scale(1) rotate(0deg); }}
+        50% {{ transform: scale(1.2) rotate(10deg); }}
+        100% {{ transform: scale(1) rotate(0deg); }}
+    }}
+    """
+
+    letters = list(word)
+    styled_letters = []
+    
+    for i, letter in enumerate(letters):
+        style = {
+            'font-family': random.choice(fonts),
+            'line-height': '1.6',
+            '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': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),
+            'position': 'relative',
+            'top': random.choice(font_tops),
+            'color': random_color,
+            'display': 'inline-block',
+            'margin': '0 1px',
             'vertical-align': 'middle',
-            'cursor': 'pointer'
+            'animation': f'{animation_name} 0.5s ease-in-out',
+            'animation-delay': f'{i * 0.1}s'
         }
+        
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
         styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    return f"<span>{' '.join(styled_letters)}</span>"
+    return f'''
+    <style>
+    {keyframes}
+    .styled-letter {{
+        transition: all 0.3s ease;
+    }}
+    </style>
+    <span style="display: inline-flex; 
+                 align-items: baseline; 
+                 vertical-align: middle; 
+                 margin: 0 2px;">
+        {" ".join(styled_letters)}
+    </span>
+    '''
 
-# === Typing effect with your letter-by-letter styled special words ===
 def typing_effect():
     paragraphs = [
-        "Proctor's voice quavered, “Where are we, Benshiro? This can't be real. We went full speed into that...”",
-        "“Proctor, I hear you! Is that you? I'm so thankful, but where are you? I can't see you.” Benshiro's words echoed in the void."
+        "Proctors's voice quavered, "Where are we, Benshiro? This can't be real. We went full speed into that..."",
+        ""Proctor, I hear you! Is that you? I'm so thankful, but where are you? I can't see you." Benshiro's words echoed in the void."
     ]
-    html_output = ""
 
+    # Process paragraphs to add styling
+    styled_paragraphs = []
     for paragraph in paragraphs:
         words = paragraph.split()
-        special_word = random.choice(words)
-        styled_words = [generate_initial_design(w) if w == special_word else w for w in words]
+        if words:  # Make sure there are words in the paragraph
+            special_word = random.choice(words)
+            styled_word = generate_initial_design(special_word)
+            styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
+            styled_paragraphs.append(styled_paragraph)
 
-        for w in styled_words:
-            html_output += w + " "
-            yield html_output
-            time.sleep(0.05)
+    # Create the full HTML output
+    output_html = '<br><br>'.join(styled_paragraphs)
+    
+    final_output = f"""
+    <html>
+    <head>
+        <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">
+        <style>
+        body {{
+            background-color: #fff;
+            color: #000;
+            font-size: 18px;
+            line-height: 1.6;
+            font-family: "Josefin Sans", sans-serif;
+            padding: 20px;
+        }}
+        </style>
+    </head>
+    <body>
+        <div style='max-width: 800px; margin: auto;'>
+            {output_html}
+        </div>
+    </body>
+    </html>
+    """
+    
+    return final_output
 
-        html_output += "<br><br>"
-        time.sleep(0.3)
+def trigger_movement(input_html):
+    """Function to trigger the movement animation."""
+    if not input_html:
+        return input_html
 
-# === Re-randomize ALL styled letters on button click ===
-def animate_letters(current_html):
-    def re_style_letters(match):
-        letter = match.group(1)
-        return generate_initial_design(letter) if len(letter) > 1 else letter
+    # Find styled words and regenerate them with movement
+    # This is a simple approach - in practice, you might want to track the specific words
+    return typing_effect()  # For now, regenerate with new random styling
 
-    # Replace entire special word spans by regenerating styles for each letter
-    return re.sub(r'<span[^>]*>([^<]+)</span>', lambda m: f"<span>{''.join(generate_initial_design(m.group(1)))}</span>", current_html)
-
-# === Gradio UI ===
+# Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.HTML("""<link href="https://fonts.googleapis.com/css?family=VT323|Josefin+Sans|Rajdhani|Anton|Caveat|Patrick+Hand|Nothing+You+Could+Do|Reenie+Beanie|Orbitron|Raleway" rel="stylesheet">""")
-    gr.Markdown("## 🎨 Per-Letter Styled Typing Effect with Animation Button")
-
+    gr.Markdown("# CircularText Styler\nText with special word styling and animations.")
+    
     output_html = gr.HTML()
     with gr.Row():
         start_btn = gr.Button("▶ Start Typing")
         animate_btn = gr.Button("✨ Re-Randomize Styles")
+    
+    start_btn.click(typing_effect, inputs=[], outputs=output_html)
+    animate_btn.click(trigger_movement, inputs=output_html, outputs=output_html)
 
-    start_btn.click(typing_effect, outputs=output_html)
-    animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)
-
-demo.launch()
+# Launch the app
+demo.launch()