Spaces:

circulartext
/

CircularText-Reading

Sleeping

App Files Files Community

circulartext commited on 11 days ago

Commit

c8cd9c7

verified ·

1 Parent(s): 46404cc

Update app.py

Browse files

Files changed (1) hide show

app.py +39 -19

app.py CHANGED Viewed

@@ -1,11 +1,8 @@
 import gradio as gr
 import random
-# Global variables
-initial_word_design = ""
-special_words = []
 def generate_initial_design(word):
     fonts = [
         "'VT323', monospace",
         "'Josefin Sans', sans-serif",
@@ -37,7 +34,7 @@ def generate_initial_design(word):
     letters = list(word)
     styled_letters = []
-    for letter in letters:
         style = {
             'font-family': random.choice(fonts),
             'line-height': '1.6',
@@ -51,11 +48,12 @@ def generate_initial_design(word):
             'color': '#000000',
             'display': 'inline-block',
             'margin': '0 1px',
-            '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'''
@@ -66,9 +64,7 @@ def generate_initial_design(word):
         {" ".join(styled_letters)}
     </span>'''
-def process_text():
-    global initial_word_design, special_words
     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."
@@ -82,10 +78,10 @@ def process_text():
         styled_word = generate_initial_design(special_word)
         styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
         result.append(styled_paragraph)
     output_html = '<br><br>'.join(result)
-    final_output = 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">
@@ -98,25 +94,49 @@ def process_text():
             font-family: "Josefin Sans", sans-serif;
             padding: 20px;
         }}
         </style>
     </head>
     <body>
-        <div style='max-width: 800px; margin: auto;'>
             {output_html}
         </div>
     </body>
     </html>
     """
-    return final_output
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
-    gr.Markdown("# Styled Text Display")
     output_html = gr.HTML()
-    demo.load(fn=process_text, outputs=output_html)
 # Launch the app
 demo.launch()

 import gradio as gr
 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 i, letter in enumerate(letters):
         style = {
             'font-family': random.choice(fonts),
             'line-height': '1.6',
             '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}" onclick="triggerMovement(this)">{letter}</span>'
         styled_letters.append(styled_letter)
     return f'''
         {" ".join(styled_letters)}
     </span>'''
+def generate_output_html():
     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."
         styled_word = generate_initial_design(special_word)
         styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
         result.append(styled_paragraph)
     output_html = '<br><br>'.join(result)
+    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">
             font-family: "Josefin Sans", sans-serif;
             padding: 20px;
         }}
+        .styled-letter {{
+            transition: all 0.3s ease;
+        }}
         </style>
+        <script>
+        function triggerMovement(el) {{
+            el.style.animation = '';
+            setTimeout(() => {{
+                el.style.animation = 'skew 0.5s ease-in-out';
+            }}, 10);
+        }}
+        </script>
     </head>
     <body>
+        <div style='max-width: 800px; margin: auto;' id="text-content">
             {output_html}
         </div>
+        <script>
+        function revealWords() {{
+            const textContent = document.getElementById('text-content');
+            const words = textContent.innerHTML.split(' ');
+            textContent.innerHTML = '';
+            let i = 0;
+            function displayWord() {{
+                if (i < words.length) {{
+                    textContent.innerHTML += words[i] + ' ';
+                    i++;
+                    setTimeout(displayWord, 200);
+                }}
+            }}
+            displayWord();
+        }}
+        revealWords();
+        </script>
     </body>
     </html>
     """
 # Create Gradio interface using Blocks
 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)
 # Launch the app
 demo.launch()