circulartext commited on
Commit
3571ebc
·
verified ·
1 Parent(s): a299eb5

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +40 -30
app.py CHANGED
@@ -3,8 +3,8 @@ import random
3
  import time
4
  import re
5
 
6
- # Fancy random styling for special word
7
- def style_special_word(word):
8
  fonts = [
9
  "'VT323', monospace",
10
  "'Josefin Sans', sans-serif",
@@ -33,27 +33,33 @@ def style_special_word(word):
33
  ]
34
  skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
35
 
36
- style = {
37
- 'font-family': random.choice(fonts),
38
- 'line-height': '1.6',
39
- 'font-size': random.choice(font_sizes),
40
- 'letter-spacing': random.choice(letter_spacings),
41
- 'text-shadow': random.choice(text_shadows),
42
- 'transform': f'skew({random.choice(skew_angles)})',
43
- 'margin-top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),
44
- 'position': 'relative',
45
- 'top': random.choice(font_tops),
46
- 'color': '#000000',
47
- 'display': 'inline-block',
48
- 'margin': '0 1px',
49
- 'vertical-align': 'middle',
50
- 'cursor': 'pointer'
51
- }
52
 
53
- style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
54
- return f'<span class="styled-letter" style="{style_str}">{word}</span>'
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
55
 
56
- # Typing effect with styled special words
 
 
57
  def typing_effect():
58
  paragraphs = [
59
  "Proctor's voice quavered, “Where are we, Benshiro? This can't be real. We went full speed into that...”",
@@ -64,7 +70,7 @@ def typing_effect():
64
  for paragraph in paragraphs:
65
  words = paragraph.split()
66
  special_word = random.choice(words)
67
- styled_words = [style_special_word(w) if w == special_word else w for w in words]
68
 
69
  for w in styled_words:
70
  html_output += w + " "
@@ -74,20 +80,24 @@ def typing_effect():
74
  html_output += "<br><br>"
75
  time.sleep(0.3)
76
 
77
- # Re-style all existing styled words when button clicked
78
  def animate_letters(current_html):
79
- def replace_style(match):
80
- word = match.group(2)
81
- return style_special_word(word)
82
-
83
- return re.sub(r'(<span[^>]*>)([^<]+)(</span>)', lambda m: replace_style(m), current_html)
 
84
 
 
85
  with gr.Blocks() as demo:
86
- gr.Markdown("## 🎨 Fancy Styled Typing Effect with Animation Button")
 
 
87
  output_html = gr.HTML()
88
  with gr.Row():
89
  start_btn = gr.Button("▶ Start Typing")
90
- animate_btn = gr.Button("✨ Animate Letters")
91
 
92
  start_btn.click(typing_effect, outputs=output_html)
93
  animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)
 
3
  import time
4
  import re
5
 
6
+ # === Your original per-letter styling algorithm ===
7
+ def generate_initial_design(word):
8
  fonts = [
9
  "'VT323', monospace",
10
  "'Josefin Sans', sans-serif",
 
33
  ]
34
  skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
35
 
36
+ letters = list(word)
37
+ styled_letters = []
 
 
 
 
 
 
 
 
 
 
 
 
 
 
38
 
39
+ for letter in letters:
40
+ style = {
41
+ 'font-family': random.choice(fonts),
42
+ 'line-height': '1.6',
43
+ 'font-size': random.choice(font_sizes),
44
+ 'letter-spacing': random.choice(letter_spacings),
45
+ 'text-shadow': random.choice(text_shadows),
46
+ 'transform': f'skew({random.choice(skew_angles)})',
47
+ 'margin-top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]),
48
+ 'position': 'relative',
49
+ 'top': random.choice(font_tops),
50
+ 'color': '#000000',
51
+ 'display': 'inline-block',
52
+ 'margin': '0 1px',
53
+ 'vertical-align': 'middle',
54
+ 'cursor': 'pointer'
55
+ }
56
+ style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
57
+ styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
58
+ styled_letters.append(styled_letter)
59
 
60
+ return f"<span>{' '.join(styled_letters)}</span>"
61
+
62
+ # === Typing effect with your letter-by-letter styled special words ===
63
  def typing_effect():
64
  paragraphs = [
65
  "Proctor's voice quavered, “Where are we, Benshiro? This can't be real. We went full speed into that...”",
 
70
  for paragraph in paragraphs:
71
  words = paragraph.split()
72
  special_word = random.choice(words)
73
+ styled_words = [generate_initial_design(w) if w == special_word else w for w in words]
74
 
75
  for w in styled_words:
76
  html_output += w + " "
 
80
  html_output += "<br><br>"
81
  time.sleep(0.3)
82
 
83
+ # === Re-randomize ALL styled letters on button click ===
84
  def animate_letters(current_html):
85
+ def re_style_letters(match):
86
+ letter = match.group(1)
87
+ return generate_initial_design(letter) if len(letter) > 1 else letter
88
+
89
+ # Replace entire special word spans by regenerating styles for each letter
90
+ return re.sub(r'<span[^>]*>([^<]+)</span>', lambda m: f"<span>{''.join(generate_initial_design(m.group(1)))}</span>", current_html)
91
 
92
+ # === Gradio UI ===
93
  with gr.Blocks() as demo:
94
+ 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">""")
95
+ gr.Markdown("## 🎨 Per-Letter Styled Typing Effect with Animation Button")
96
+
97
  output_html = gr.HTML()
98
  with gr.Row():
99
  start_btn = gr.Button("▶ Start Typing")
100
+ animate_btn = gr.Button("✨ Re-Randomize Styles")
101
 
102
  start_btn.click(typing_effect, outputs=output_html)
103
  animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)