Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
@@ -3,8 +3,8 @@ import random
|
|
3 |
import time
|
4 |
import re
|
5 |
|
6 |
-
#
|
7 |
-
def
|
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 |
-
|
37 |
-
|
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 |
-
|
54 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
55 |
|
56 |
-
|
|
|
|
|
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 = [
|
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-
|
78 |
def animate_letters(current_html):
|
79 |
-
def
|
80 |
-
|
81 |
-
return
|
82 |
-
|
83 |
-
|
|
|
84 |
|
|
|
85 |
with gr.Blocks() as demo:
|
86 |
-
gr.
|
|
|
|
|
87 |
output_html = gr.HTML()
|
88 |
with gr.Row():
|
89 |
start_btn = gr.Button("▶ Start Typing")
|
90 |
-
animate_btn = gr.Button("✨
|
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)
|