Update app.py

app.py

@@ -8,6 +8,10 @@ generator = pipeline('text-generation', model='distilgpt2')  # Lightweight model
 # Predefined words to check
 SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat']
 
+# Global variable to store the initial design
+initial_word_design = ""
+special_word = ""
+
 # Function to generate the initial design (black color)
 def generate_initial_design(word):
     """Generate initial design for the special word in black color."""
@@ -34,7 +38,7 @@ def generate_initial_design(word):
         "'Annie Use Your Telescope', cursive"
     ]
     font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
-    font_tops = ["11px", "11px", "13px", "13px", "15px", "15px"]
+    font_tops = ["11px", "13px", "15px"]
     letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
     text_shadows = [
         "0px 0px 1px",
@@ -48,7 +52,7 @@ def generate_initial_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 = []
@@ -67,28 +71,30 @@ def generate_initial_design(word):
             '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
+    # Controlled randomization parameters
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
         "'Rajdhani', sans-serif",
         "'Anton', sans-serif",
-        # You can include different fonts if you want
+        "'Caveat', cursive",
+        "'Patrick Hand', cursive",
+        "'Nothing You Could Do', cursive",
+        "'Reenie Beanie', cursive"
     ]
     font_sizes = ["20px", "22px", "24px", "26px", "28px", "30px"]
     font_tops = ["10px", "12px", "14px", "16px"]
@@ -96,14 +102,13 @@ def generate_movement_design(word):
     text_shadows = [
         "0px 0px 5px #ff0000",  # Red glow
         "0px 0px 5px #00ff00",  # Green glow
-        "0px 0px 5px #0000ff",  # Blue glow
-        # Add more if desired
+        "0px 0px 5px #0000ff"   # Blue glow
     ]
     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} {{
@@ -112,9 +117,10 @@ def generate_movement_design(word):
         100% {{ transform: translateY(0px); }}
     }}
     """
+
     # 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 = []
@@ -134,14 +140,14 @@ def generate_movement_design(word):
             'margin': '0 1px',
             '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()])
-        
+
         # 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 and include keyframes
     return f'''
     <style>
@@ -150,37 +156,35 @@ def generate_movement_design(word):
     <span>{" ".join(styled_letters)}</span>
     '''
 
-# 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
-    
+    global initial_word_design, special_word
+
     # 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 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:
+            special_word = word  # Store the special 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>
@@ -214,6 +218,9 @@ def process_text(input_text):
             line-height: 1.6;
             font-family: "Josefin Sans", sans-serif;
         }}
+        .styled-letter {{
+            transition: all 1s ease;
+        }}
         </style>
     </head>
     <body>
@@ -223,68 +230,66 @@ def process_text(input_text):
     </body>
     </html>
     """
-    
+
     return final_output
 
 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
-    
+    global initial_word_design, special_word
+
     # Edge case: if initial_word_design is empty, return the input_html
-    if not initial_word_design:
+    if not initial_word_design or not special_word:
         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>', '''
+
+    # Append CSS to reset to initial design after animation
+    css_reset = """
     <style>
+    @keyframes reset_animation {
+        from { color: inherit; }
+        to { color: #000000; }
+    }
     .styled-letter {
-        animation-fill-mode: forwards;
+        animation: reset_animation 0s forwards;
+        animation-delay: 1s;
     }
     </style>
-    </head>''')
-    
+    </head>
+    """
+    updated_html = updated_html.replace('</head>', css_reset)
+
     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)
-    
+
+    # Add custom CSS
     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]" />
+    }
+    </style>
+    """)
+
+# Launch the app
+demo.launch()