Update app.py

app.py

@@ -1,165 +1,86 @@
 import gradio as gr
 import random
+import time
 
-def generate_initial_design(word):
-    """Generate initial design for the special word in black color."""
+def style_special_word(word):
+    """Apply fancy random style to a special word."""
     fonts = [
-        "'VT323', monospace",
-        "'Josefin Sans', sans-serif",
-        "'Rajdhani', sans-serif",
-        "'Anton', sans-serif",
-        "'Caveat', cursive",
-        "'Patrick Hand', cursive",
-        "'Nothing You Could Do', cursive",
-        "'Reenie Beanie', cursive",
-        "'Orbitron', sans-serif",
-        "'Raleway', sans-serif"
+        "'Courier New', monospace",
+        "'Arial', sans-serif",
+        "'Georgia', serif",
+        "'Times New Roman', serif"
     ]
-    font_sizes = ["18px", "19px", "20px"]
-    font_tops = ["0px", "1px", "-1px"]
-    letter_spacings = ["-1px", "0px", "1px"]
-    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"
+    colors = ["red", "blue", "green", "black", "orange", "purple", "deeppink", "cyan"]
+    font_weights = ["bold", "normal", "bolder"]
+    decorations = ["underline", "overline", "line-through", "none"]
+    shadows = [
+        "2px 2px 5px gray",
+        "0px 0px 10px gold",
+        "3px 3px 5px #000000",
+        "1px 1px 5px lime"
+    ]
+    transforms = [
+        "rotate(5deg)",
+        "rotate(-5deg)",
+        "scale(1.2)",
+        "skewX(10deg)",
+        "skewY(-5deg)"
     ]
-    skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"]
-
-    letters = list(word)
-    styled_letters = []
     
-    for letter in letters:
-        style = {
-            'font-family': random.choice(fonts),
-            '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"]),
-            'position': 'relative',
-            'top': random.choice(font_tops),
-            'color': '#000000',
-            'display': 'inline-block',
-            'margin': '0 1px',
-            'vertical-align': 'middle',
-            'cursor': 'pointer'
-        }
-        
-        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)
+    style = (
+        f"font-family:{random.choice(fonts)};"
+        f"color:{random.choice(colors)};"
+        f"font-weight:{random.choice(font_weights)};"
+        f"text-decoration:{random.choice(decorations)};"
+        f"text-shadow:{random.choice(shadows)};"
+        f"display:inline-block; transform:{random.choice(transforms)};"
+    )
+    return f'<span style="{style}">{word}</span>'
 
-    return f'<span style="display:inline-flex;align-items:baseline;margin:0 2px;">{"".join(styled_letters)}</span>'
-
-def generate_output_html():
+def typing_effect():
+    """Stream paragraphs word by word with fancy styled words."""
     paragraphs = [
-        "Proctors's voice quavered, “Where are we, Benshiro? This can't be real. We went full speed into that...”",
+        "Proctor'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."
     ]
-
-    processed_paragraphs = []
+    html_output = ""
+    
     for paragraph in paragraphs:
         words = paragraph.split()
+        # Choose a random special word
         special_word = random.choice(words)
-        styled_word = generate_initial_design(special_word)
-        styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
-        processed_paragraphs.append(styled_paragraph)
-
-    return f"""
-    <html>
-    <head>
-        <link href="https://fonts.googleapis.com/css?family=VT323|Josefin+Sans|Rajdhani|Anton|Caveat|Patrick+Hand|Nothing+You+Could+Do|Reenie+Beanie|Orbitron|Raleway" rel="stylesheet">
-        <style>
-            body {{
-                font-family: "Josefin Sans", sans-serif;
-                background-color: #fff;
-                padding: 20px;
-                color: #000;
-                line-height: 1.6;
-                font-size: 18px;
-            }}
-            .styled-letter {{
-                transition: transform 0.3s ease;
-                display: inline-block;
-            }}
-            .styled-letter.animate {{
-                transform: rotate(10deg) scale(1.3);
-            }}
-            #animate-btn {{
-                background-color: #4CAF50;
-                border: none;
-                color: white;
-                padding: 10px 20px;
-                font-size: 16px;
-                cursor: pointer;
-                margin-top: 15px;
-                border-radius: 6px;
-            }}
-            #animate-btn:hover {{
-                background-color: #45a049;
-            }}
-        </style>
-    </head>
-    <body>
-        <div id="chat-area"></div>
-        <button id="animate-btn" onclick="triggerMovement()">Animate Letters</button>
-
-        <script>
-            const paragraphs = {processed_paragraphs};
+        styled_words = [
+            style_special_word(w) if w == special_word else w
+            for w in words
+        ]
+        for w in styled_words:
+            html_output += w + " "
+            yield html_output
+            time.sleep(0.05)
+        html_output += "<br><br>"
+        time.sleep(0.5)
 
-            function typeParagraph(index) {{
-                return new Promise(resolve => {{
-                    if (index >= paragraphs.length) {{
-                        resolve();
-                        return;
-                    }}
-                    let container = document.getElementById('chat-area');
-                    let words = paragraphs[index].split(' ');
-                    let i = 0;
-                    let pElem = document.createElement('p');
-                    container.appendChild(pElem);
-                    function addWord() {{
-                        if (i < words.length) {{
-                            pElem.innerHTML += words[i] + ' ';
-                            i++;
-                            setTimeout(addWord, 60); // typing speed
-                        }} else {{
-                            setTimeout(() => resolve(), 500); // pause before next paragraph
-                        }}
-                    }}
-                    addWord();
-                }});
-            }}
-
-            async function startTyping() {{
-                for (let i = 0; i < paragraphs.length; i++) {{
-                    await typeParagraph(i);
-                }}
-            }}
-
-            function triggerMovement() {{
-                document.querySelectorAll('.styled-letter').forEach(el => {{
-                    el.classList.add('animate');
-                    setTimeout(() => el.classList.remove('animate'), 300);
-                }});
-            }}
-
-            window.onload = startTyping;
-        </script>
-    </body>
-    </html>
-    """
+def animate_letters(current_html):
+    """Randomly restyle all previously styled words."""
+    # Just re-run the style_special_word on each styled span text
+    import re
+    def replace_style(match):
+        word = match.group(2)  # the inner text
+        return style_special_word(word)
+    
+    return re.sub(r'(<span style="[^"]*">)([^<]+)(</span>)',
+                  lambda m: replace_style(m),
+                  current_html)
 
 with gr.Blocks() as demo:
-    gr.Markdown("# Styled Text Display with Clickable Animation")
+    gr.Markdown("## Styled Typing with Clickable Animation")
     output_html = gr.HTML()
-    demo.load(fn=generate_output_html, outputs=output_html)
+    
+    with gr.Row():
+        start_btn = gr.Button("Start Typing")
+        animate_btn = gr.Button("Animate Letters")
+    
+    start_btn.click(typing_effect, outputs=output_html)
+    animate_btn.click(animate_letters, inputs=output_html, outputs=output_html)
 
 demo.launch()