Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import random | |
| import time | |
| # Global variables | |
| initial_word_designs = [] | |
| special_words = [] | |
| current_text = "" | |
| def generate_initial_design(word): | |
| """Generate initial design for the special word in 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" | |
| ] | |
| font_sizes = ["18px", "19px", "20px" , "21px", "22px"] | |
| font_tops = ["0px", "1px", "-1px"] | |
| letter_spacings = ["-3px", "-2px", "-1px", "1px", "2px", "3px"] | |
| 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"] | |
| letters = list(word) | |
| styled_letters = [] | |
| for i, letter in enumerate(letters): | |
| 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' | |
| } | |
| style_str = '; '.join([f'{k}: {v}' for k, v in style.items()]) | |
| styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>' | |
| styled_letters.append(styled_letter) | |
| return f'<span class="special-word">{" ".join(styled_letters)}</span>' | |
| def generate_movement_design(word): | |
| """Generate a completely new random design for the movement animation.""" | |
| 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" , "21px", "22px"] | |
| font_tops = ["0px", "1px", "-1px"] | |
| letter_spacings = ["-3px", "-2px", "-1px", "1px", "2px", "3px"] | |
| 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"] | |
| # Generate random color for the movement design | |
| random_color = f'#{random.randint(0, 0xFFFFFF):06x}' | |
| letters = list(word) | |
| styled_letters = [] | |
| for i, letter in enumerate(letters): | |
| 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': random_color, | |
| 'display': 'inline-block', | |
| 'margin': '0 1px', | |
| 'vertical-align': 'middle' | |
| } | |
| style_str = '; '.join([f'{k}: {v}' for k, v in style.items()]) | |
| styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>' | |
| styled_letters.append(styled_letter) | |
| return f'<span class="special-word">{" ".join(styled_letters)}</span>' | |
| def typing_effect(): | |
| global initial_word_designs, special_words, current_text | |
| paragraphs = [ | |
| 'Proctors voice quavered, "Where are we, Benshiro? This cant be real. We went full speed into that..."', | |
| '"Proctor, I hear you! Is that you? Im so thankful, but where are you? I cant see you." Benshiros words echoed in the void.' | |
| ] | |
| # Process paragraphs to add styling | |
| styled_paragraphs = [] | |
| initial_word_designs = [] | |
| special_words = [] | |
| for paragraph in paragraphs: | |
| words = paragraph.split() | |
| if words: | |
| special_word = random.choice(words) | |
| special_words.append(special_word) | |
| styled_word = generate_initial_design(special_word) | |
| initial_word_designs.append(styled_word) | |
| styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words) | |
| styled_paragraphs.append(styled_paragraph) | |
| current_text = '<br><br>'.join(styled_paragraphs) | |
| # Simulate typing effect by yielding incremental text | |
| words = current_text.split() | |
| displayed_text = "" | |
| for i, word in enumerate(words): | |
| displayed_text += word + " " | |
| time.sleep(0.01) # Small delay | |
| yield f""" | |
| <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;"> | |
| {displayed_text} | |
| </div> | |
| """ | |
| return f""" | |
| <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;"> | |
| {current_text} | |
| </div> | |
| """ | |
| def trigger_movement(): | |
| global initial_word_designs, special_words, current_text | |
| if not initial_word_designs or not special_words: | |
| return current_text | |
| updated_text = current_text | |
| for i, (initial_design, special_word) in enumerate(zip(initial_word_designs, special_words)): | |
| movement_design = generate_movement_design(special_word) | |
| updated_text = updated_text.replace(initial_design, movement_design, 1) | |
| current_text = updated_text | |
| return f""" | |
| <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;"> | |
| {updated_text} | |
| </div> | |
| """ | |
| # Create Gradio interface using Blocks | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# CircularText Styler\nText with special word styling and animations.") | |
| output_html = gr.HTML() | |
| with gr.Row(): | |
| start_btn = gr.Button("▶ Start Typing") | |
| animate_btn = gr.Button("✨ Trigger Movement") | |
| start_btn.click(typing_effect, inputs=[], outputs=output_html) | |
| animate_btn.click(trigger_movement, inputs=[], outputs=output_html) | |
| # Launch the app | |
| demo.launch() |