Update app.py

app.py

@@ -1,15 +1,15 @@
 import gradio as gr
 import random
 import time
-import threading
 
 # Global variables
 current_text = ""
 special_words = []
-is_styling = False
+original_paragraphs = []
+animation_counter = 0
 
-def generate_random_style(word):
-    """Generate random styling for a word but keep it black."""
+def generate_transition_style(word, animation_id):
+    """Generate styling with transition animation from normal to styled and back to normal."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -22,51 +22,125 @@ def generate_random_style(word):
         "'Orbitron', sans-serif",
         "'Raleway', sans-serif"
     ]
-    font_sizes = ["16px", "17px", "18px" , "19px", "20px"]
+    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"
+        "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 = []
+    keyframes_css = ""
     
     for i, letter in enumerate(letters):
+        # Generate random styled properties
+        styled_font_family = random.choice(fonts)
+        styled_font_size = random.choice(font_sizes)
+        styled_letter_spacing = random.choice(letter_spacings)
+        styled_text_shadow = random.choice(text_shadows)
+        styled_skew_angle = random.choice(skew_angles)
+        styled_top = random.choice(font_tops)
+        styled_margin_top = random.choice(["-0.02cm", "0.00cm", "0.02cm"])
+        
+        # Create unique animation name
+        animation_name = f"sneakStyle_{animation_id}_{i}"
+        
+        # Create keyframes that go: normal → styled → normal
+        keyframes_css += f"""
+        @keyframes {animation_name} {{
+            0% {{
+                font-family: 'Josefin Sans', sans-serif;
+                font-size: 16px;
+                letter-spacing: 0px;
+                color: #000000;
+                text-shadow: 0px 0px 0px #000;
+                transform: skew(0deg) scale(1);
+                top: 0px;
+                margin-top: 0.00cm;
+            }}
+            25% {{
+                font-family: {styled_font_family};
+                font-size: {styled_font_size};
+                letter-spacing: {styled_letter_spacing};
+                color: #000000;
+                text-shadow: {styled_text_shadow};
+                transform: skew({styled_skew_angle}) scale(1.1);
+                top: {styled_top};
+                margin-top: {styled_margin_top};
+            }}
+            50% {{
+                font-family: {styled_font_family};
+                font-size: {styled_font_size};
+                letter-spacing: {styled_letter_spacing};
+                color: #000000;
+                text-shadow: {styled_text_shadow};
+                transform: skew({styled_skew_angle}) scale(0.95);
+                top: {styled_top};
+                margin-top: {styled_margin_top};
+            }}
+            75% {{
+                font-family: {styled_font_family};
+                font-size: {styled_font_size};
+                letter-spacing: {styled_letter_spacing};
+                color: #000000;
+                text-shadow: {styled_text_shadow};
+                transform: skew({styled_skew_angle}) scale(1.05);
+                top: {styled_top};
+                margin-top: {styled_margin_top};
+            }}
+            100% {{
+                font-family: 'Josefin Sans', sans-serif;
+                font-size: 16px;
+                letter-spacing: 0px;
+                color: #000000;
+                text-shadow: 0px 0px 0px #000;
+                transform: skew(0deg) scale(1);
+                top: 0px;
+                margin-top: 0.00cm;
+            }}
+        }}
+        """
+        
         style = {
-            'font-family': random.choice(fonts),
+            'font-family': "'Josefin Sans', sans-serif",  # Start normal
             '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"]),
+            'font-size': '16px',
+            'letter-spacing': '0px',
+            'text-shadow': '0px 0px 0px #000',
+            'transform': 'skew(0deg)',
+            'margin-top': '0.00cm',
             'position': 'relative',
-            'top': random.choice(font_tops),
-            'color': '#000000',  # Keep black
+            'top': '0px',
+            'color': '#000000',
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'middle'
+            'vertical-align': 'middle',
+            'animation': f'{animation_name} 3s ease-in-out forwards',
+            'animation-delay': f'{i * 0.1}s'
         }
         
         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>'
+    return f"""
+    <style>{keyframes_css}</style>
+    <span class="special-word">{" ".join(styled_letters)}</span>
+    """
 
 def display_normal_text():
     """Display the text normally without any styling."""
-    global current_text, special_words
+    global current_text, special_words, original_paragraphs
     
     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.',
@@ -75,6 +149,9 @@ def display_normal_text():
     '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.'
     ]
 
+    # Store original paragraphs
+    original_paragraphs = paragraphs[:]
+    
     # Select one random word from each paragraph for future styling
     special_words = []
     for paragraph in paragraphs:
@@ -91,20 +168,34 @@ def display_normal_text():
     </div>
     """
 
-def get_styled_text():
-    """Get the styled version of the text."""
-    global current_text, special_words
+def trigger_movement():
+    """Apply transition styling to selected words - they style then return to normal automatically."""
+    global current_text, special_words, original_paragraphs, animation_counter
+    
+    if not special_words or not original_paragraphs:
+        return display_normal_text()
     
-    if not special_words:
-        return current_text
+    # Increment animation counter for unique animations
+    animation_counter += 1
     
-    paragraphs = current_text.split('<br><br>')
     styled_paragraphs = []
+    all_styles = ""
     
-    for i, paragraph in enumerate(paragraphs):
+    for i, paragraph in enumerate(original_paragraphs):
         if i < len(special_words):
             special_word = special_words[i]
-            styled_word = generate_random_style(special_word)
+            animation_id = f"{animation_counter}_{i}"
+            styled_word_html = generate_transition_style(special_word, animation_id)
+            
+            # Extract styles from styled_word_html
+            if "<style>" in styled_word_html:
+                style_start = styled_word_html.find("<style>") + 7
+                style_end = styled_word_html.find("</style>")
+                all_styles += styled_word_html[style_start:style_end]
+                styled_word = styled_word_html[styled_word_html.find("</style>") + 8:]
+            else:
+                styled_word = styled_word_html
+            
             # 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)
@@ -114,43 +205,15 @@ def get_styled_text():
     styled_text = '<br><br>'.join(styled_paragraphs)
     
     return f"""
+    <style>{all_styles}</style>
     <div style="font-family: 'Josefin Sans', sans-serif; font-size: 16px; line-height: 1.6; padding: 20px; max-width: 800px;">
         {styled_text}
     </div>
     """
 
-def get_normal_text():
-    """Get the normal version of the text."""
-    global current_text
-    
-    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():
-    """Apply styling then revert back to normal - creates sneaking effect."""
-    global is_styling
-    
-    if is_styling:
-        return get_normal_text()
-    
-    # Show styled version first
-    styled_output = get_styled_text()
-    is_styling = True
-    
-    # Use generator to show styled then normal
-    yield styled_output
-    
-    # Wait a moment then show normal text
-    time.sleep(1.5)  # Show styled text for 1.5 seconds
-    is_styling = False
-    yield get_normal_text()
-
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# CircularText Styler\nText with sneaking style effect - words style briefly then return to normal.")
+    gr.Markdown("# CircularText Styler\nText with smooth sneaking style transitions - words style then smoothly return to normal.")
     
     output_html = gr.HTML()
     with gr.Row():