Update app.py

app.py

@@ -2,107 +2,134 @@ import gradio as gr
 import random
 import time
 
-# Store original styles so we can return to them
-original_styles = {}
+# Global variables
+current_text = ""
+special_words = []
+special_word_positions = []
 
-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", "0px", "1px"]
-text_shadows = [
-    "0px 0px 1px #000000",
-    "0px 0px 2px #000000",
-    "1px 0px 0px #000000",
-    "0px 0px 0px #000000",
-    "0px 1px 0px #000000"
-]
-skew_angles = ["-25deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "25deg"]
+def generate_random_style(word):
+    """Generate random styling for a word but keep it black."""
+    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"]
 
-def render_letter(letter, style):
-    style_str = '; '.join(f"{k}: {v}" for k, v in style.items())
-    return f'<span style="{style_str}">{letter}</span>'
+    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',  # Keep black
+            '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)
 
-def make_base_style():
-    return {
-        'font-family': "'Josefin Sans', sans-serif",
-        'font-size': '16px',
-        'letter-spacing': '0px',
-        'text-shadow': '0px 0px 0px #000000',
-        'transform': 'skew(0deg)',
-        'margin-top': '0cm',
-        'position': 'relative',
-        'top': '0px',
-        'color': '#000000',
-        'display': 'inline-block',
-        'margin': '0 1px',
-        'vertical-align': 'middle',
-        'transition': 'all 0.5s ease'  # Smooth transition
-    }
+    return f'<span class="special-word">{" ".join(styled_letters)}</span>'
 
-def make_sneaky_style():
-    return {
-        'font-family': random.choice(fonts),
-        '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.05cm", "0.00cm", "0.05cm"]),
-        'position': 'relative',
-        'top': random.choice(font_tops),
-        'color': '#000000',
-        'display': 'inline-block',
-        'margin': '0 1px',
-        'vertical-align': 'middle',
-        'transition': 'all 0.5s ease'
-    }
+def display_normal_text():
+    """Display the text normally without any styling."""
+    global current_text, special_words, special_word_positions
+    
+    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.'
+    ]
 
-def show_normal():
-    text = "This is a sneaky text test."
-    styled_text = []
-    original_styles.clear()
+    # Select one random word from each paragraph
+    special_words = []
+    for paragraph in paragraphs:
+        words = paragraph.split()
+        special_word = random.choice(words)
+        special_words.append(special_word)
+    
+    # Store normal text
+    current_text = '<br><br>'.join(paragraphs)
+    
+    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>
+    """
 
-    for i, letter in enumerate(text):
-        style = make_base_style()
-        original_styles[i] = style
-        styled_text.append(render_letter(letter, style))
-
-    return f"<div>{''.join(styled_text)}</div>"
-
-def sneak_then_back():
-    text = "This is a sneaky text test."
-
-    # Step 1: Apply sneaky style
-    sneaky_html = []
-    for i, letter in enumerate(text):
-        style = make_sneaky_style()
-        sneaky_html.append(render_letter(letter, style))
-    yield f"<div>{''.join(sneaky_html)}</div>"
-
-    # Step 2: Wait, then go back
-    time.sleep(1.5)
-    normal_html = []
-    for i, letter in enumerate(text):
-        style = make_base_style()
-        normal_html.append(render_letter(letter, style))
-    yield f"<div>{''.join(normal_html)}</div>"
+def trigger_movement():
+    """Apply random styling to the selected words."""
+    global current_text, special_words
+    
+    if not special_words:
+        return current_text
+    
+    paragraphs = current_text.split('<br><br>')
+    styled_paragraphs = []
+    
+    for i, paragraph in enumerate(paragraphs):
+        if i < len(special_words):
+            special_word = special_words[i]
+            styled_word = generate_random_style(special_word)
+            # Replace only the first occurrence of the special word in this paragraph
+            styled_paragraph = paragraph.replace(special_word, styled_word, 1)
+            styled_paragraphs.append(styled_paragraph)
+        else:
+            styled_paragraphs.append(paragraph)
+    
+    updated_text = '<br><br>'.join(styled_paragraphs)
+    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:
-    output = gr.HTML()
+    gr.Markdown("# CircularText Styler\nText with special word styling and animations.")
+    
+    output_html = gr.HTML()
     with gr.Row():
-        btn_show = gr.Button("Show Normal")
-        btn_sneak = gr.Button("Sneak Then Back")
-    btn_show.click(show_normal, outputs=output)
-    btn_sneak.click(sneak_then_back, outputs=output)
+        start_btn = gr.Button("▶ Show Text")
+        animate_btn = gr.Button("✨ Trigger Movement")
+    
+    start_btn.click(display_normal_text, inputs=[], outputs=output_html)
+    animate_btn.click(trigger_movement, inputs=[], outputs=output_html)
 
-demo.launch()
+# Launch the app
+demo.launch()