Update app.py

app.py

@@ -1,85 +1,94 @@
 import gradio as gr
 import random
 import time
+import re
 
+# Fancy random styling for special word
 def style_special_word(word):
-    """Apply fancy random style to a special word."""
     fonts = [
-        "'Courier New', monospace",
-        "'Arial', sans-serif",
-        "'Georgia', serif",
-        "'Times New Roman', 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",
+        "'Orbitron', sans-serif",
+        "'Raleway', sans-serif"
     ]
-    colors = ["red", "blue", "green", "black", "orange", "purple", "deeppink", "cyan"]
-    font_weights = ["bold", "normal", "bolder"]
-    decorations = ["underline", "overline", "line-through", "none"]
-    shadows = [
-        "2px 2px 5px gray",
-        "0px 0px 10px gold",
-        "3px 3px 5px #000000",
-        "1px 1px 5px lime"
+    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"
     ]
-    transforms = [
-        "rotate(5deg)",
-        "rotate(-5deg)",
-        "scale(1.2)",
-        "skewX(10deg)",
-        "skewY(-5deg)"
-    ]
-    
-    style = (
-        f"font-family:{random.choice(fonts)};"
-        f"color:{random.choice(colors)};"
-        f"font-weight:{random.choice(font_weights)};"
-        f"text-decoration:{random.choice(decorations)};"
-        f"text-shadow:{random.choice(shadows)};"
-        f"display:inline-block; transform:{random.choice(transforms)};"
-    )
-    return f'<span style="{style}">{word}</span>'
+    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
+
+    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': '#000000',
+        'display': 'inline-block',
+        'margin': '0 1px',
+        'vertical-align': 'middle',
+        'cursor': 'pointer'
+    }
 
+    style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
+    return f'<span class="styled-letter" style="{style_str}">{word}</span>'
+
+# Typing effect with styled special words
 def typing_effect():
-    """Stream paragraphs word by word with fancy styled words."""
     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."
     ]
     html_output = ""
-    
+
     for paragraph in paragraphs:
         words = paragraph.split()
-        # Choose a random special word
         special_word = random.choice(words)
-        styled_words = [
-            style_special_word(w) if w == special_word else w
-            for w in words
-        ]
+        styled_words = [style_special_word(w) if w == special_word else w for w in words]
+
         for w in styled_words:
             html_output += w + " "
             yield html_output
             time.sleep(0.05)
+
         html_output += "<br><br>"
-        time.sleep(0.5)
+        time.sleep(0.3)
 
+# Re-style all existing styled words when button clicked
 def animate_letters(current_html):
-    """Randomly restyle all previously styled words."""
-    # Just re-run the style_special_word on each styled span text
-    import re
     def replace_style(match):
-        word = match.group(2)  # the inner text
+        word = match.group(2)
         return style_special_word(word)
     
-    return re.sub(r'(<span style="[^"]*">)([^<]+)(</span>)',
-                  lambda m: replace_style(m),
-                  current_html)
+    return re.sub(r'(<span[^>]*>)([^<]+)(</span>)', lambda m: replace_style(m), current_html)
 
 with gr.Blocks() as demo:
-    gr.Markdown("## Styled Typing with Clickable Animation")
+    gr.Markdown("## 🎨 Fancy Styled Typing Effect with Animation Button")
     output_html = gr.HTML()
-    
     with gr.Row():
-        start_btn = gr.Button("Start Typing")
-        animate_btn = gr.Button("Animate Letters")
-    
+        start_btn = gr.Button("▶ Start Typing")
+        animate_btn = gr.Button("✨ Animate Letters")
+
     start_btn.click(typing_effect, outputs=output_html)
     animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)