Update app.py

app.py

@@ -5,6 +5,7 @@ import time
 # Global variables
 initial_word_designs = []
 special_words = []
+current_text = ""
 
 def generate_initial_design(word):
     """Generate initial design for the special word in black color."""
@@ -18,12 +19,7 @@ def generate_initial_design(word):
         "'Nothing You Could Do', cursive",
         "'Reenie Beanie', cursive",
         "'Orbitron', sans-serif",
-        "'Raleway', sans-serif",
-        "'Open Sans Condensed', sans-serif",
-        "'Poiret One', cursive",
-        "'Indie Flower', cursive",
-        "'Pacifico', cursive",
-        "'Teko', sans-serif"
+        "'Raleway', sans-serif"
     ]
     font_sizes = ["18px", "19px", "20px"]
     font_tops = ["0px", "1px", "-1px"]
@@ -65,13 +61,7 @@ def generate_initial_design(word):
         styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
         styled_letters.append(styled_letter)
 
-    return f'''
-    <span class="special-word" style="display: inline-flex; 
-                 align-items: baseline; 
-                 vertical-align: middle; 
-                 margin: 0 2px;">
-        {" ".join(styled_letters)}
-    </span>'''
+    return f'<span class="special-word">{" ".join(styled_letters)}</span>'
 
 def generate_movement_design(word):
     """Generate a completely new random design for the movement animation."""
@@ -105,18 +95,6 @@ def generate_movement_design(word):
 
     # 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 keyframes for the animation sequence
-    keyframes = f"""
-    @keyframes {animation_name} {{
-        0% {{ transform: scale(1) rotate(0deg); }}
-        50% {{ transform: scale(1.2) rotate(10deg); }}
-        100% {{ transform: scale(1) rotate(0deg); }}
-    }}
-    """
 
     letters = list(word)
     styled_letters = []
@@ -135,36 +113,21 @@ def generate_movement_design(word):
             'color': random_color,
             'display': 'inline-block',
             'margin': '0 1px',
-            'vertical-align': 'middle',
-            'animation': f'{animation_name} 0.5s ease-in-out',
-            'animation-delay': f'{i * 0.1}s'
+            '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)
 
-    return f'''
-    <style>
-    {keyframes}
-    .styled-letter {{
-        transition: all 0.3s ease;
-    }}
-    </style>
-    <span class="special-word" style="display: inline-flex; 
-                 align-items: baseline; 
-                 vertical-align: middle; 
-                 margin: 0 2px;">
-        {" ".join(styled_letters)}
-    </span>
-    '''
+    return f'<span class="special-word">{" ".join(styled_letters)}</span>'
 
 def typing_effect():
-    global initial_word_designs, special_words
+    global initial_word_designs, special_words, current_text
     
     paragraphs = [
-        'Proctors\'s voice quavered, "Where are we, Benshiro? This can\'t be real. We went full speed into that..."',
-        '"Proctor, I hear you! Is that you? I\'m so thankful, but where are you? I can\'t see you." Benshiro\'s words echoed in the void.'
+        'Proctors voice quavered, "Where are we, Benshiro? This cant be real. We went full speed into that..."',
+        '"Proctor, I hear you! Is that you? Im so thankful, but where are you? I cant see you." Benshiros words echoed in the void.'
     ]
 
     # Process paragraphs to add styling
@@ -182,81 +145,45 @@ def typing_effect():
             styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
             styled_paragraphs.append(styled_paragraph)
 
-    # Join paragraphs with proper spacing
-    all_text = ' '.join(styled_paragraphs)
+    current_text = '<br><br>'.join(styled_paragraphs)
+    
+    # Simulate typing effect by yielding incremental text
+    words = current_text.split()
+    displayed_text = ""
     
-    # Create HTML with chatbot-style reveal animation
-    final_output = f"""
-    <html>
-    <head>
-        <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">
-        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
-        <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
-        <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">
-        <style>
-        body {{
-            background-color: #fff;
-            color: #000;
-            font-size: 18px;
-            line-height: 1.6;
-            font-family: "Josefin Sans", sans-serif;
-            padding: 20px;
-        }}
-        .styled-letter {{
-            transition: all 0.3s ease;
-        }}
-        </style>
-    </head>
-    <body>
-        <div style='max-width: 800px; margin: auto;' id="text-content">
-            <!-- Content will be revealed here -->
+    for i, word in enumerate(words):
+        displayed_text += word + " "
+        time.sleep(0.1)  # Small delay
+        yield f"""
+        <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
+            {displayed_text}
         </div>
-        <script>
-        function revealText() {{
-            const container = document.getElementById('text-content');
-            const fullText = `{all_text}`;
-            const words = fullText.split(' ');
-            container.innerHTML = '';
-            let i = 0;
-            
-            function displayNextWord() {{
-                if (i < words.length) {{
-                    container.innerHTML += words[i] + ' ';
-                    i++;
-                    setTimeout(displayNextWord, 200); // Adjust speed here
-                }}
-            }}
-            displayNextWord();
-        }}
-        
-        // Start revealing text immediately
-        setTimeout(revealText, 500);
-        </script>
-    </body>
-    </html>
-    """
+        """
     
-    return final_output
+    return f"""
+    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
+        {current_text}
+    </div>
+    """
 
-def trigger_movement(input_html):
-    """Function to trigger the movement animation."""
-    global initial_word_designs, special_words
+def trigger_movement():
+    global initial_word_designs, special_words, current_text
     
     if not initial_word_designs or not special_words:
-        return input_html
+        return current_text
     
-    updated_html = input_html
+    updated_text = current_text
     for i, (initial_design, special_word) in enumerate(zip(initial_word_designs, special_words)):
         movement_design = generate_movement_design(special_word)
-        updated_html = updated_html.replace(initial_design, movement_design, 1)
+        updated_text = updated_text.replace(initial_design, movement_design, 1)
+    
+    current_text = updated_text
     
-    return updated_html
+    return f"""
+    <div style="font-family: 'Josefin Sans', sans-serif; font-size: 18px; line-height: 1.6; padding: 20px; max-width: 800px;">
+        {updated_text}
+    </div>
+    """
 
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
@@ -268,10 +195,7 @@ with gr.Blocks() as demo:
         animate_btn = gr.Button("✨ Trigger Movement")
     
     start_btn.click(typing_effect, inputs=[], outputs=output_html)
-    animate_btn.click(trigger_movement, inputs=output_html, outputs=output_html)
-
-# Launch the app
-demo.launch()
+    animate_btn.click(trigger_movement, inputs=[], outputs=output_html)
 
 # Launch the app
 demo.launch()