|
|
import gradio as gr |
|
|
import random |
|
|
|
|
|
|
|
|
SPECIAL_WORDS = [ |
|
|
'movie', 'excited', 'waiting', 'long', 'time', 'production', 'real', 'coded', 'digital', 'favorite', |
|
|
'asking', 'doing', 'basketball', 'soccer', 'football', 'baseball', 'soup', 'food', 'burgers', 'pizza', |
|
|
'fruit', 'pineapple', 'milk', 'jello', 'candy', 'rice', 'greens', 'lettuce', 'oatmeal', 'cereal', |
|
|
'dogs', 'cats', 'animals', 'goats', 'sheep', 'movies', 'money', 'bank', 'account', 'keeping', |
|
|
'looking', 'moving', 'boxes', 'elephants', 'movement', 'coding', 'developing', 'going', 'cruise', |
|
|
'ship', 'boat', 'bahamas', 'foods', 'healthy', 'eating', 'important', 'pennsylvania', 'atlanta', |
|
|
'north carolina', 'new york', 'france', 'paris', 'work', 'jobs', 'computers', 'computer', 'grocery', |
|
|
'glamorous', 'version', 'truck', 'pickup', 'play', 'types', 'games', 'applications', 'quantum', |
|
|
'speeds', 'advancements', 'technological', 'glimpse', 'countless', 'technology', 'future', 'walking', |
|
|
'hello', 'jordan', 'season', 'superstar', 'nba', 'championship', 'leading', 'points', 'assist', |
|
|
'career', 'chicago', 'scared', 'tongue', 'energy', 'disguise', 'business', 'older', 'grown', 'call', |
|
|
'bills', 'garden', 'house', 'fallen', 'blossoms', 'lawn', 'love', 'forever', 'most', 'fan', 'clout', |
|
|
'space', 'team', 'today', 'woke', 'work', 'relax', 'quicker', 'thicker', 'richer', 'data', 'ballet', |
|
|
'dancer', 'goat', 'post', 'lebron', 'james', 'eagles', 'rockets', 'times', 'tank', 'pencil', 'watch', |
|
|
'rolex', 'rappers', 'rockstar', 'rocket', 'rocks', 'tooth', 'teeth', 'pancake', 'breakfast', 'lunch', |
|
|
'dinner', 'zoom', 'calling', 'talking', 'rule', 'ruler', 'rick', 'morty', 'martin', 'smith', 'wild', |
|
|
'track', 'field', 'touchdown', 'basket', 'hope', 'yours', 'thank', 'olympics', 'sports', 'help', |
|
|
'legal', 'law', 'firm', 'crowd', 'winner', 'winter', 'smoking', 'green', 'purple', 'blue', 'pink', |
|
|
'orange', 'black', 'white', 'yellow', 'gold', 'weather', 'sun', 'middle', 'summer', 'heat', 'spring' |
|
|
] |
|
|
|
|
|
|
|
|
original_word_styles = {} |
|
|
selected_words = [] |
|
|
|
|
|
def generate_word_design(word, word_id): |
|
|
"""Generate initial styled design for a word (black color).""" |
|
|
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", |
|
|
"'Open Sans Condensed', sans-serif", |
|
|
"'Poiret One', cursive", |
|
|
"'Indie Flower', cursive", |
|
|
"'Pacifico', cursive", |
|
|
"'Teko', sans-serif" |
|
|
] |
|
|
font_sizes = ["18px", "19px", "20px"] |
|
|
font_tops = ["0px", "1px", "-1px"] |
|
|
letter_spacings = ["-1px", "0px", "1px", "2px"] |
|
|
text_shadows = [ |
|
|
"0px 0px 1px #000", |
|
|
"0px 0px 2px #000", |
|
|
"1px 0px 0px #000", |
|
|
"0px 0px 0px #000", |
|
|
"0px 1px 0px #000", |
|
|
"0px 2px 0px #000", |
|
|
"0px 1px 1px #000", |
|
|
"1px 1px 0px #000", |
|
|
"1px 0px 1px #000" |
|
|
] |
|
|
skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"] |
|
|
|
|
|
letters = list(word) |
|
|
styled_letters = [] |
|
|
letter_styles_data = [] |
|
|
|
|
|
for i, letter in enumerate(letters): |
|
|
|
|
|
font_family = random.choice(fonts) |
|
|
font_size = random.choice(font_sizes) |
|
|
letter_spacing = random.choice(letter_spacings) |
|
|
text_shadow = random.choice(text_shadows) |
|
|
skew_angle = random.choice(skew_angles) |
|
|
margin_top = random.choice(["-0.02cm", "0.00cm", "0.02cm"]) |
|
|
top = random.choice(font_tops) |
|
|
|
|
|
|
|
|
letter_styles_data.append({ |
|
|
'font_family': font_family, |
|
|
'font_size': font_size, |
|
|
'letter_spacing': letter_spacing, |
|
|
'text_shadow': text_shadow, |
|
|
'skew_angle': skew_angle, |
|
|
'margin_top': margin_top, |
|
|
'top': top |
|
|
}) |
|
|
|
|
|
style = { |
|
|
'font-family': font_family, |
|
|
'line-height': '1.6', |
|
|
'font-size': font_size, |
|
|
'letter-spacing': letter_spacing, |
|
|
'text-shadow': text_shadow, |
|
|
'transform': f'skew({skew_angle})', |
|
|
'margin-top': margin_top, |
|
|
'position': 'relative', |
|
|
'top': top, |
|
|
'color': '#000000', |
|
|
'display': 'inline-block', |
|
|
'margin': '0 1px', |
|
|
'vertical-align': 'middle', |
|
|
'transition': 'all 0.8s ease-in-out' |
|
|
} |
|
|
|
|
|
style_str = '; '.join([f'{k}: {v}' for k, v in style.items()]) |
|
|
styled_letter = f'<span class="letter-{word_id}-{i}" style="{style_str}">{letter}</span>' |
|
|
styled_letters.append(styled_letter) |
|
|
|
|
|
|
|
|
original_word_styles[word_id] = { |
|
|
'word': word, |
|
|
'letter_styles': letter_styles_data |
|
|
} |
|
|
|
|
|
return f''' |
|
|
<span class="word-container" id="word-{word_id}" style="display: inline-block; |
|
|
margin: 10px; |
|
|
padding: 8px 12px; |
|
|
border: 2px solid #333; |
|
|
border-radius: 8px; |
|
|
background-color: rgba(255,255,255,0.8);"> |
|
|
<span style="display: inline-flex; |
|
|
align-items: baseline; |
|
|
vertical-align: middle;"> |
|
|
{" ".join(styled_letters)} |
|
|
</span> |
|
|
</span>''' |
|
|
|
|
|
def generate_random_words(): |
|
|
"""Generate 5 random words with initial styling.""" |
|
|
global original_word_styles, selected_words |
|
|
|
|
|
|
|
|
original_word_styles = {} |
|
|
selected_words = random.sample(SPECIAL_WORDS, 5) |
|
|
|
|
|
styled_words = [] |
|
|
for i, word in enumerate(selected_words): |
|
|
word_design = generate_word_design(word, i) |
|
|
styled_words.append(word_design) |
|
|
|
|
|
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"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap" rel="stylesheet"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poiret+One&display=swap" rel="stylesheet"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body {{ |
|
|
background-color: #f5f5f5; |
|
|
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; text-align: center;'> |
|
|
<h2 style="margin-bottom: 30px;">Random Styled Words</h2> |
|
|
<div id="words-container" style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;"> |
|
|
{" ".join(styled_words)} |
|
|
</div> |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
return final_output |
|
|
|
|
|
def trigger_movement(input_html): |
|
|
"""Function to create smooth transitions from original values to new values.""" |
|
|
global original_word_styles, selected_words |
|
|
|
|
|
if not original_word_styles or not selected_words: |
|
|
return input_html |
|
|
|
|
|
|
|
|
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", "'Open Sans Condensed', sans-serif", "'Poiret One', cursive", |
|
|
"'Indie Flower', cursive", "'Pacifico', cursive", "'Teko', sans-serif" |
|
|
] |
|
|
|
|
|
|
|
|
animation_script = """ |
|
|
<script> |
|
|
function triggerSmoothTransitions() { |
|
|
""" |
|
|
|
|
|
for word_id, data in original_word_styles.items(): |
|
|
word = data['word'] |
|
|
letter_styles = data['letter_styles'] |
|
|
|
|
|
for i, original_style in enumerate(letter_styles): |
|
|
|
|
|
new_color = f"#{random.randint(0, 0xFFFFFF):06x}" |
|
|
new_font_family = random.choice(fonts) |
|
|
new_font_size = random.choice(["20px", "22px", "24px", "26px"]) |
|
|
new_letter_spacing = random.choice(["-3px", "-2px", "0px", "2px", "3px", "4px"]) |
|
|
new_text_shadow = random.choice([ |
|
|
f"0px 0px 5px {new_color}", |
|
|
f"2px 2px 4px {new_color}", |
|
|
f"0px 0px 8px {new_color}", |
|
|
f"3px 3px 6px {new_color}", |
|
|
"none" |
|
|
]) |
|
|
new_skew = random.choice(["-35deg", "-25deg", "0deg", "25deg", "35deg", "45deg"]) |
|
|
new_top = random.choice(["-3px", "0px", "3px", "5px"]) |
|
|
new_margin_top = random.choice(["-0.05cm", "0.00cm", "0.03cm", "0.05cm"]) |
|
|
|
|
|
animation_script += f""" |
|
|
// Animate letter {i} of word {word_id} |
|
|
setTimeout(() => {{ |
|
|
const letter = document.querySelector('.letter-{word_id}-{i}'); |
|
|
if (letter) {{ |
|
|
// Font changes instantly (can't interpolate) |
|
|
letter.style.fontFamily = '{new_font_family}'; |
|
|
|
|
|
// These properties transition smoothly from original to new values |
|
|
letter.style.color = '{new_color}'; |
|
|
letter.style.fontSize = '{new_font_size}'; |
|
|
letter.style.letterSpacing = '{new_letter_spacing}'; |
|
|
letter.style.textShadow = '{new_text_shadow}'; |
|
|
letter.style.transform = 'skew({new_skew}) scale(1.1)'; |
|
|
letter.style.top = '{new_top}'; |
|
|
letter.style.marginTop = '{new_margin_top}'; |
|
|
}} |
|
|
}}, {i * 100}); |
|
|
""" |
|
|
|
|
|
animation_script += """ |
|
|
} |
|
|
|
|
|
// Trigger the transitions |
|
|
triggerSmoothTransitions(); |
|
|
</script> |
|
|
""" |
|
|
|
|
|
|
|
|
if "</body>" in input_html: |
|
|
updated_html = input_html.replace("</body>", animation_script + "</body>") |
|
|
else: |
|
|
updated_html = input_html + animation_script |
|
|
|
|
|
return updated_html |
|
|
|
|
|
|
|
|
with gr.Blocks() as demo: |
|
|
gr.Markdown("# Random Word Styler\nWords smoothly transition from their original styling to completely new styling!") |
|
|
|
|
|
generate_button = gr.Button("Generate Random Words", variant="primary") |
|
|
output_html = gr.HTML() |
|
|
animate_button = gr.Button("Trigger Smooth Movement", variant="secondary") |
|
|
|
|
|
generate_button.click(generate_random_words, outputs=output_html) |
|
|
animate_button.click(trigger_movement, inputs=output_html, outputs=output_html) |
|
|
|
|
|
|
|
|
demo.launch() |
