Update app.py

app.py

@@ -3,19 +3,17 @@ import random
 from transformers import pipeline
 
 # Load the model once when the app starts
-generator = pipeline('text-generation', model='distilgpt2')  # Lightweight model
+generator = pipeline('text-generation', model='distilgpt2', max_length=25)  # Reduced max_length for faster inference
 
 # Predefined words to check
-SPECIAL_WORDS = ['weather', 'sun', 'middle', 'spring', 'heat']
+SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat', 'spring', 'winter']
 
-# Global variable to store the initial design
+# Global variables
 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."""
-    # Controlled randomization parameters
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -31,11 +29,7 @@ def generate_initial_design(word):
         "'Poiret One', cursive",
         "'Indie Flower', cursive",
         "'Pacifico', cursive",
-        "'Teko', sans-serif",
-        "'Abril Fatface', cursive",
-        "'Gloria Hallelujah', cursive",
-        "'Righteous', cursive",
-        "'Annie Use Your Telescope', cursive"
+        "'Teko', sans-serif"
     ]
     font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
     font_tops = ["11px", "13px", "15px"]
@@ -53,9 +47,9 @@ def generate_initial_design(word):
     ]
     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),
@@ -71,21 +65,15 @@ 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_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
         styled_letters.append(styled_letter)
 
-    # Combine letters into a container with inline display
-    return f'<span>{" ".join(styled_letters)}</span>'
+    return f'<div style="display: flex; align-items: baseline; position: relative; top: 20px;">{" ".join(styled_letters)}</div>'
 
-# 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
+    """Generate a completely new random design for the movement animation."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -94,36 +82,44 @@ def generate_movement_design(word):
         "'Caveat', cursive",
         "'Patrick Hand', cursive",
         "'Nothing You Could Do', cursive",
-        "'Reenie Beanie', cursive"
+        "'Reenie Beanie', cursive",
+        "'Orbitron', sans-serif",
+        "'Raleway', sans-serif"
     ]
-    font_sizes = ["20px", "22px", "24px", "26px", "28px", "30px"]
-    font_tops = ["10px", "12px", "14px", "16px"]
-    letter_spacings = ["-3px", "-2px", "-1px", "0px", "1px", "2px", "3px"]
+    font_sizes = ["17px", "19px", "21px", "23px", "25px", "27px"]
+    font_tops = ["11px", "13px", "15px"]
+    letter_spacings = ["-6px", "-4px", "-3px", "-2px", "-1px", "0px", "1px", "2px"]
     text_shadows = [
-        "0px 0px 5px #ff0000",  # Red glow
-        "0px 0px 5px #00ff00",  # Green glow
-        "0px 0px 5px #0000ff"   # Blue glow
+        "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 = ["-15deg", "-10deg", "0deg", "10deg", "15deg"]
+    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
 
-    # Generate a unique animation name for CSS
+    # Generate random color for the movement design
+    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
+    
+    # Generate unique animation name
     animation_name = f"animate_{random.randint(0, 10000)}"
 
-    # Create CSS keyframes for the animation
+    # Create keyframes for the animation sequence
     keyframes = f"""
     @keyframes {animation_name} {{
-        0%   {{ transform: translateY(0px); }}
-        50%  {{ transform: translateY(-10px); }}
-        100% {{ transform: translateY(0px); }}
+        0% {{ transform: scale(1) rotate(0deg); }}
+        50% {{ transform: scale(1.2) rotate(10deg); }}
+        100% {{ transform: scale(1) rotate(0deg); }}
     }}
     """
 
-    # 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):
         style = {
             'font-family': random.choice(fonts),
@@ -132,28 +128,30 @@ def generate_movement_design(word):
             'letter-spacing': random.choice(letter_spacings),
             'text-shadow': random.choice(text_shadows),
             'transform': f'skew({random.choice(skew_angles)})',
-            'margin-top': random.choice(["-0.03cm", "0.00cm", "0.03cm"]),
+            'margin-top': random.choice(["-0.06cm", "-0.03cm", "0.00cm", "0.03cm", "0.06cm"]),
             'position': 'relative',
             'top': random.choice(font_tops),
-            'color': random_color,  # Random color
+            'color': random_color,
             'display': 'inline-block',
             'margin': '0 1px',
-            'animation': f'{animation_name} 1s ease-in-out forwards'
+            'animation': f'{animation_name} 0.5s ease-in-out',
+            'animation-delay': f'{i * 0.1}s'
         }
-
-        # 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_letter = f'<div class="styled-letter" style="{style_str}">{letter}</div>'
         styled_letters.append(styled_letter)
 
-    # Combine letters into a container with inline display and include keyframes
     return f'''
     <style>
     {keyframes}
+    .styled-letter {{
+        transition: all 0.3s ease;
+    }}
     </style>
-    <span>{" ".join(styled_letters)}</span>
+    <div style="display: flex; align-items: baseline; position: relative; top: 20px;">
+        {" ".join(styled_letters)}
+    </div>
     '''
 
 def process_text(input_text):
@@ -161,35 +159,26 @@ def process_text(input_text):
     global initial_word_design, special_word
 
     # Generate text with limited length
-    generated = generator(input_text, max_length=50, num_return_sequences=1)
+    generated = generator(input_text, num_return_sequences=1)
     generated_text = generated[0]['generated_text']
+    generated_text = generated_text[:200]  # Limit output length
 
-    # 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
+            special_word = word
             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>
     <head>
-        <!-- Include all necessary fonts -->
         <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
@@ -199,17 +188,7 @@ def process_text(input_text):
         <link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Oswald:300" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:700|Oswald:200" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Poiret+One|Dosis:300|Fjalla+One" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Lobster" rel="stylesheet" type="text/css">
-        <link href="https://fonts.googleapis.com/css?family=Pacifico|Shadows+Into+Light|Dancing+Script|Amatic+SC" rel="stylesheet" type="text/css">
-        <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">
+        <link href="https://fonts.googleapis.com/css?family=Raleway:500" rel="stylesheet">
         <style>
         body {{
             background-color: #fff;
@@ -217,79 +196,45 @@ def process_text(input_text):
             font-size: 18px;
             line-height: 1.6;
             font-family: "Josefin Sans", sans-serif;
-        }}
-        .styled-letter {{
-            transition: all 1s ease;
+            padding: 20px;
         }}
         </style>
     </head>
     <body>
-        <div style='max-width: 800px; margin: auto; padding: 20px;'>
+        <div style='max-width: 800px; margin: auto;'>
             {output_html}
         </div>
     </body>
     </html>
     """
-
+    
     return final_output
 
 def trigger_movement(input_html):
-    """Function to trigger the movement animation by updating the special word design."""
+    """Function to trigger the movement animation."""
     global initial_word_design, special_word
-
-    # Edge case: if initial_word_design is empty, return the input_html
+    
     if not initial_word_design or not special_word:
-        return input_html  # No special word was found previously
+        return input_html
 
-    # 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)
 
-    # Append CSS to reset to initial design after animation
-    css_reset = """
-    <style>
-    @keyframes reset_animation {
-        from { color: inherit; }
-        to { color: #000000; }
-    }
-    .styled-letter {
-        animation: reset_animation 0s forwards;
-        animation-delay: 1s;
-    }
-    </style>
-    </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;
-    }
-    </style>
-    """)
-
 # Launch the app
 demo.launch()