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 = ["16px", "17px", "18px" , "19px", "20px"] | |
| 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 = ["16px", "17px", "18px" , "19px", "20px"] | |
| 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 = [ | |
| 'How did we get here December 30th 2124 "Good morning, Benshiro. Wake up! We\'ve got A.I. training ahead," urged Benshiro\'s partner as they prepared for their day in sector A1 - A1000, one of the elite development sectors serving the World One government. It was the year 2124.', | |
| '2033 The police were targeting the economically disadvantaged community, and if you were living in poverty in One Country, you were looked down upon. In 2033, a civil war broke out in Philadelphia, New York, Chicago, and a few other big cities. Citizens, fed up with losing jobs to A.I. and enduring systemic mistreatment, initiated the conflict. After the long fight, substantial changes and more restrictive rules were implemented in communities, along with increased travel restrictions for all citizens. Although schools and other institutions remained, life had fundamentally changed for everyone in America.', | |
| '2034 In 2034, Anonymous developed an A.I. hack that no bank or institution could counter. This forced all American citizens to join One Country and secure their finances through One Country banking accounts. These accounts were managed by the One Country government and intended to provide security and fairness. Some even thought that the government was behind the attack in the first place.', | |
| '2036 By 2036, the government implemented a new policy for One Country accounts. If individuals committed a crime and did not turn themselves in, their accounts would be frozen. This rule was highly controversial, as it curtailed personal freedoms. In a bold initiative, the One Country President announced plans to establish a 99% robotic police force by 2045. The program will begin immediately, aiming to have 30% of the force composed of active robots within the first phase. Human officers would collaborate with these machines in decision-making processes. To support this vision, a vast 10,000-acre automation facility—equivalent to the size of Manhattan—was constructed. This facility aimed to produce advanced robots and flying vehicles, initially reserved for government officials and the wealthy, signaling a significant shift towards automation in society.' | |
| ] | |
| # 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: 16px; line-height: 1.6; padding: 20px; max-width: 800px;"> | |
| {displayed_text} | |
| </div> | |
| """ | |
| return f""" | |
| <div style="font-family: 'Josefin Sans', sans-serif; font-size: 16px; 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: 16px; 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() |