Spaces:
Sleeping
Sleeping
File size: 3,161 Bytes
46404cc f5e26af a299eb5 46404cc a299eb5 f5e26af 46404cc a299eb5 46404cc a299eb5 f5e26af a299eb5 46404cc a299eb5 f5e26af 46404cc f5e26af 46404cc f5e26af a299eb5 46404cc a299eb5 f5e26af a299eb5 f5e26af a299eb5 f30068b a299eb5 f5e26af a299eb5 f5e26af a299eb5 46404cc a299eb5 46404cc f5e26af a299eb5 f5e26af 46404cc edaca51 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
import gradio as gr
import random
import time
import re
# Fancy random styling for special word
def style_special_word(word):
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"]
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():
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()
special_word = random.choice(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.3)
# Re-style all existing styled words when button clicked
def animate_letters(current_html):
def replace_style(match):
word = match.group(2)
return style_special_word(word)
return re.sub(r'(<span[^>]*>)([^<]+)(</span>)', lambda m: replace_style(m), current_html)
with gr.Blocks() as demo:
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.click(typing_effect, outputs=output_html)
animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)
demo.launch()
|