Update app.py

app.py

@@ -8,8 +8,9 @@ generator = pipeline('text-generation', model='distilgpt2')  # Lightweight model
 # Predefined words to check
 SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat']
 
-def generate_circular_text_design(word):
-    """Generate a styled design for a word by styling each letter individually, including animations."""
+# Function to generate the initial design (black color)
+def generate_initial_design(word):
+    """Generate initial design for the special word in black color."""
     # Controlled randomization parameters
     fonts = [
         "'VT323', monospace",
@@ -47,22 +48,74 @@ def generate_circular_text_design(word):
         "1px 0px 1px"
     ]
     skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
+    
+    # Create HTML for each letter with random styling (black color)
+    letters = list(word)
+    styled_letters = []
+    for i, letter in enumerate(letters):
+        style = {
+            'font-family': random.choice(fonts),
+            'line-height': '110%',
+            '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.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
+            'position': 'relative',
+            'top': random.choice(font_tops),
+            'color': '#000000',  # Black color
+            'display': 'inline-block',
+            'margin': '0 1px'
+        }
+        
+        # Convert style to inline CSS
+        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
+        
+        # Wrap the letter in a span
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
+        styled_letters.append(styled_letter)
+    
+    # Combine letters into a container with inline display
+    return f'<span>{" ".join(styled_letters)}</span>'
 
+# Function to generate the movement design (random color)
+def generate_movement_design(word):
+    """Generate movement design for the special word in random color."""
+    # Controlled randomization parameters (could be different ranges if desired)
+    # Reuse the same parameters or define new ranges for the movement
+    fonts = [
+        "'VT323', monospace",
+        "'Josefin Sans', sans-serif",
+        "'Rajdhani', sans-serif",
+        "'Anton', sans-serif",
+        # You can include different fonts if you want
+    ]
+    font_sizes = ["20px", "22px", "24px", "26px", "28px", "30px"]
+    font_tops = ["10px", "12px", "14px", "16px"]
+    letter_spacings = ["-3px", "-2px", "-1px", "0px", "1px", "2px", "3px"]
+    text_shadows = [
+        "0px 0px 5px #ff0000",  # Red glow
+        "0px 0px 5px #00ff00",  # Green glow
+        "0px 0px 5px #0000ff",  # Blue glow
+        # Add more if desired
+    ]
+    skew_angles = ["-15deg", "-10deg", "0deg", "10deg", "15deg"]
+    
     # Generate a unique animation name for CSS
     animation_name = f"animate_{random.randint(0, 10000)}"
-
+    
     # Create CSS keyframes for the animation
     keyframes = f"""
     @keyframes {animation_name} {{
-        0%   {{ transform: scale(1) rotate(0deg); }}
-        25%  {{ transform: scale(1.2) rotate(10deg); }}
-        50%  {{ transform: scale(1) rotate(0deg); }}
-        75%  {{ transform: scale(1.2) rotate(-10deg); }}
-        100% {{ transform: scale(1) rotate(0deg); }}
+        0%   {{ transform: translateY(0px); }}
+        50%  {{ transform: translateY(-10px); }}
+        100% {{ transform: translateY(0px); }}
     }}
     """
-
-    # Create HTML for each letter with dynamic styling and animation
+    # Generate random color
+    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
+    
+    # Create HTML for each letter with random styling and animation (random color)
     letters = list(word)
     styled_letters = []
     for i, letter in enumerate(letters):
@@ -73,58 +126,61 @@ def generate_circular_text_design(word):
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
             'transform': f'skew({random.choice(skew_angles)})',
-            'margin-top': f'{random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"])}',
+            'margin-top': random.choice(["-0.03cm", "0.00cm", "0.03cm"]),
             'position': 'relative',
             'top': random.choice(font_tops),
-            'color': f'#{random.randint(0, 0xFFFFFF):06x}',
+            'color': random_color,  # Random color
             'display': 'inline-block',
             'margin': '0 1px',
-            'animation': f'{animation_name} 2s infinite'
+            'animation': f'{animation_name} 1s ease-in-out forwards'
         }
-
+        
         # Convert style to inline CSS
         style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
-
-        # Assign a unique ID for possible future reference
-        styled_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
+        
+        # Wrap the letter in a span
+        styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
-
-    # Combine letters into a container with flex display
+    
+    # Combine letters into a container with inline display and include keyframes
     return f'''
     <style>
     {keyframes}
     </style>
-    <div style="display: flex; align-items: baseline;">{" ".join(styled_letters)}</div>
+    <span>{" ".join(styled_letters)}</span>
     '''
 
-def process_text(input_text):
-    """Process text and apply special styling to matching words."""
-    # Limit input length to prevent long processing times
-    max_input_length = 20  # Adjust as needed
-    input_text = ' '.join(input_text.split()[:max_input_length])
+# Global variable to store the initial design
+initial_word_design = ""
 
+def process_text(input_text):
+    """Process text and generate the initial output with special word styled in black."""
+    global initial_word_design
+    
     # Generate text with limited length
     generated = generator(input_text, max_length=50, num_return_sequences=1)
     generated_text = generated[0]['generated_text']
-
+    
     # Limit output length to prevent overflow
     generated_text = generated_text[:300]  # Limit to first 300 characters
-
+    
     # Split text into words
     words = generated_text.split()
-
-    # Check for special words and apply styling
+    
+    # Check for special words and apply initial styling
     for i, word in enumerate(words):
         # Clean the word for matching
         clean_word = ''.join(filter(str.isalnum, word)).lower()
         if clean_word in SPECIAL_WORDS:
-            words[i] = generate_circular_text_design(word)
+            # Store the initial design
+            initial_word_design = generate_initial_design(word)
+            words[i] = initial_word_design
         else:
             words[i] = word
-
+    
     # Combine words back into HTML-formatted text
     output_html = ' '.join(words)
-
+    
     # Build the complete HTML
     final_output = f"""
     <html>
@@ -150,23 +206,85 @@ def process_text(input_text):
         <link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet" type="text/css">
         <link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Josefin+Sans|Gloria+Hallelujah|Roboto+Slab|Righteous|Sacramento|Yellowtail" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Just+Me+Again+Down+Here|Nixie+One|Six+Caps|Unkempt" rel="stylesheet">
+        <style>
+        body {{
+            background-color: #fff;
+            color: #000;
+            font-size: 18px;
+            line-height: 1.6;
+            font-family: "Josefin Sans", sans-serif;
+        }}
+        </style>
     </head>
-    <body style='background-color: #000; color: #fff; font-size: 18px; line-height: 1.6; font-family: "Josefin Sans", sans-serif;'>
+    <body>
         <div style='max-width: 800px; margin: auto; padding: 20px;'>
             {output_html}
         </div>
     </body>
     </html>
     """
-
+    
     return final_output
 
-# Create Gradio interface
-iface = gr.Interface(
-    fn=process_text,
-    inputs="text",
-    outputs=gr.HTML(label="Generated Text"),
-    title="Circular Text Styler",
-    description="Enter a prompt to generate text with special word styling."
-)
-iface.launch()
+def trigger_movement(input_html):
+    """Function to trigger the movement animation by updating the special word design."""
+    # Since we don't have a way to animate already rendered HTML, we regenerate the movement design.
+    # We need to replace the initial design with the movement design in the input_html.
+    global initial_word_design
+    
+    # Edge case: if initial_word_design is empty, return the input_html
+    if not initial_word_design:
+        return input_html  # No special word was found previously
+    
+    # Extract the special word from the initial design
+    start_marker = '<span class="'
+    start_index = initial_word_design.find(start_marker)
+    if start_index == -1:
+        return input_html  # Can't find the initial design
+    
+    # Get the word from the initial_design
+    special_word = ''.join([c for c in initial_word_design if c.isalpha()])
+    
+    # Generate the movement design
+    movement_design = generate_movement_design(special_word)
+    
+    # Replace the initial design with the movement design in the input_html
+    updated_html = input_html.replace(initial_word_design, movement_design, 1)
+    
+    # After the animation ends, we can set the design back to initial
+    # Since we can't execute JavaScript, the design will remain as the movement design
+    # Alternatively, we can schedule the change back using CSS animations
+    
+    # Append CSS to change back to black after animation (using animation-fill-mode)
+    updated_html = updated_html.replace('</head>', '''
+    <style>
+    .styled-letter {
+        animation-fill-mode: forwards;
+    }
+    </style>
+    </head>''')
+    
+    return updated_html
+
+# Create Gradio interface using Blocks
+with gr.Blocks() as demo:
+    gr.Markdown("# Circular Text Styler\nEnter a prompt to generate text with special word styling.")
+    
+    with gr.Row():
+        input_text = gr.Textbox(label="Input Prompt")
+        submit_button = gr.Button("Generate")
+    
+    output_html = gr.HTML()
+    animate_button = gr.Button("Trigger Movement")
+    
+    # Connect functions
+    submit_button.click(process_text, inputs=input_text, outputs=output_html)
+    animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)
+    
+    gr.HTML("""
+    <style>
+    /* Center the buttons */
+    .gradio-container .gr-button {
+        margin-top: 10px;
+        margin-bottom: 10px;
+   <span class="ml-2" /><span class="inline-block w-3 h-3 rounded-full bg-neutral-a12 align-middle mb-[0.1rem]" />