Spaces:

circulartext
/

CircularText-Reading

Sleeping

App Files Files Community

circulartext commited on 9 days ago

Commit

edaca51

verified ·

1 Parent(s): 6fe8ec9

Update app.py

Browse files

Files changed (1) hide show

app.py +32 -42

app.py CHANGED Viewed

@@ -2,6 +2,7 @@ import gradio as gr
 import random
 def generate_initial_design(word):
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -33,7 +34,7 @@ def generate_initial_design(word):
     letters = list(word)
     styled_letters = []
-    for i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
             'line-height': '1.6',
@@ -60,7 +61,7 @@ def generate_initial_design(word):
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
-        {" ".join(styled_letters)}
     </span>'''
 def generate_output_html():
@@ -79,9 +80,7 @@ def generate_output_html():
         result.append(styled_paragraph)
     output_html = '<br><br>'.join(result)
-    return output_html
-def create_html_with_script(output_text):
     return f"""
     <html>
     <head>
@@ -97,63 +96,54 @@ def create_html_with_script(output_text):
         }}
         .styled-letter {{
             transition: transform 0.3s ease;
-        }}
-        @keyframes wiggle {{
-            0% {{ transform: rotate(0deg); }}
-            50% {{ transform: rotate(5deg); }}
-            100% {{ transform: rotate(0deg); }}
-        }}
-        button {{
-            background-color: #4CAF50;
-            border: none;
-            color: white;
-            padding: 15px 32px;
-            text-align: center;
-            text-decoration: none;
             display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            cursor: pointer;
-            border-radius: 8px;
         }}
         </style>
         <script>
-        function triggerMovement() {{
-            document.querySelectorAll('.styled-letter').forEach(el => {{
-                el.style.animation = 'wiggle 0.5s infinite';
-            }});
-        }}
-        function revealWords() {{
-            const container = document.getElementById('text-content');
-            const fullText = `{output_text}`;
-            const words = fullText.split(' ');
-            container.innerHTML = '';
             let i = 0;
             function displayWord() {{
                 if (i < words.length) {{
-                    container.innerHTML += words[i] + ' ';
                     i++;
-                    setTimeout(displayWord, 150);
                 }}
             }}
             displayWord();
         }}
         </script>
     </head>
     <body>
-        <div style='max-width: 800px; margin: auto;' id="text-content"></div>
-        <button onclick="revealWords()">Start Text</button>
-        <button onclick="triggerMovement()">Start Movement</button>
     </body>
     </html>
     """
-# Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Styled Text with Animation")
     output_html = gr.HTML()
-    demo.load(fn=lambda: create_html_with_script(generate_output_html()), outputs=output_html)
-# Launch the app
-demo.launch()

 import random
 def generate_initial_design(word):
+    """Generate initial design for the special word in black color."""
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
     letters = list(word)
     styled_letters = []
+    for letter in letters:
         style = {
             'font-family': random.choice(fonts),
             'line-height': '1.6',
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
+        {"".join(styled_letters)}
     </span>'''
 def generate_output_html():
         result.append(styled_paragraph)
     output_html = '<br><br>'.join(result)
     return f"""
     <html>
     <head>
         }}
         .styled-letter {{
             transition: transform 0.3s ease;
             display: inline-block;
+        }}
+        .styled-letter.animate {{
+            transform: rotate(10deg) scale(1.3);
         }}
         </style>
         <script>
+        function typeWriter(textContentId, words) {{
+            const textContent = document.getElementById(textContentId);
+            textContent.innerHTML = '';
             let i = 0;
             function displayWord() {{
                 if (i < words.length) {{
+                    textContent.innerHTML += words[i] + ' ';
                     i++;
+                    setTimeout(displayWord, 60); // typing speed
                 }}
             }}
             displayWord();
         }}
+        function triggerMovement() {{
+            document.querySelectorAll('.styled-letter').forEach(el => {{
+                el.classList.add('animate');
+                setTimeout(() => el.classList.remove('animate'), 300);
+            }});
+        }}
+        window.onload = function() {{
+            const words = document.getElementById('full-text').innerHTML.split(' ');
+            typeWriter('text-content', words);
+        }}
         </script>
     </head>
     <body>
+        <div style='max-width: 800px; margin: auto;'>
+            <div id="full-text" style="display:none;">{output_html}</div>
+            <div id="text-content"></div>
+            <br>
+            <button onclick="triggerMovement()">Animate Letters</button>
+        </div>
     </body>
     </html>
     """
 with gr.Blocks() as demo:
+    gr.Markdown("# Styled Text Display with Clickable Animation")
     output_html = gr.HTML()
+    demo.load(fn=generate_output_html, outputs=output_html)
+demo.launch()