Spaces:

circulartext
/

CircularText-Reading

Sleeping

App Files Files Community

circulartext commited on 8 days ago

Commit

c5fdd6c

verified ·

1 Parent(s): 6412888

Update app.py

Browse files

Files changed (1) hide show

app.py +63 -14

app.py CHANGED Viewed

@@ -2,6 +2,10 @@ import gradio as gr
 import random
 import time
 def generate_initial_design(word):
     """Generate initial design for the special word in black color."""
     fonts = [
@@ -14,7 +18,12 @@ def generate_initial_design(word):
         "'Nothing You Could Do', cursive",
         "'Reenie Beanie', cursive",
         "'Orbitron', sans-serif",
-        "'Raleway', sans-serif"
     ]
     font_sizes = ["18px", "19px", "20px"]
     font_tops = ["0px", "1px", "-1px"]
@@ -57,7 +66,7 @@ def generate_initial_design(word):
         styled_letters.append(styled_letter)
     return f'''
-    <span style="display: inline-flex;
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
@@ -142,7 +151,7 @@ def generate_movement_design(word):
         transition: all 0.3s ease;
     }}
     </style>
-    <span style="display: inline-flex;
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
@@ -151,6 +160,8 @@ def generate_movement_design(word):
     '''
 def typing_effect():
     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.'
@@ -158,17 +169,23 @@ def typing_effect():
     # Process paragraphs to add styling
     styled_paragraphs = []
     for paragraph in paragraphs:
         words = paragraph.split()
-        if words:  # Make sure there are words in the paragraph
             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)
             styled_paragraphs.append(styled_paragraph)
-    # Create the full HTML output
-    output_html = '<br><br>'.join(styled_paragraphs)
     final_output = f"""
     <html>
     <head>
@@ -191,12 +208,36 @@ def typing_effect():
             font-family: "Josefin Sans", sans-serif;
             padding: 20px;
         }}
         </style>
     </head>
     <body>
-        <div style='max-width: 800px; margin: auto;'>
-            {output_html}
         </div>
     </body>
     </html>
     """
@@ -205,12 +246,17 @@ def typing_effect():
 def trigger_movement(input_html):
     """Function to trigger the movement animation."""
-    if not input_html:
         return input_html
-    # Find styled words and regenerate them with movement
-    # This is a simple approach - in practice, you might want to track the specific words
-    return typing_effect()  # For now, regenerate with new random styling
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
@@ -219,10 +265,13 @@ with gr.Blocks() as demo:
     output_html = gr.HTML()
     with gr.Row():
         start_btn = gr.Button("▶ Start Typing")
-        animate_btn = gr.Button("✨ Re-Randomize Styles")
     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()

 import random
 import time
+# Global variables
+initial_word_designs = []
+special_words = []
 def generate_initial_design(word):
     """Generate initial design for the special word in black color."""
     fonts = [
         "'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"
     ]
     font_sizes = ["18px", "19px", "20px"]
     font_tops = ["0px", "1px", "-1px"]
         styled_letters.append(styled_letter)
     return f'''
+    <span class="special-word" style="display: inline-flex;
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
         transition: all 0.3s ease;
     }}
     </style>
+    <span class="special-word" style="display: inline-flex;
                  align-items: baseline;
                  vertical-align: middle;
                  margin: 0 2px;">
     '''
 def typing_effect():
+    global initial_word_designs, 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.'
     # Process paragraphs to add styling
     styled_paragraphs = []
+    initial_word_designs = []
+    special_words = []
     for paragraph in paragraphs:
         words = paragraph.split()
+        if words:
             special_word = random.choice(words)
+            special_words.append(special_word)
             styled_word = generate_initial_design(special_word)
+            initial_word_designs.append(styled_word)
             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)
+    # Create HTML with chatbot-style reveal animation
     final_output = f"""
     <html>
     <head>
             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 -->
         </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>
     """
 def trigger_movement(input_html):
     """Function to trigger the movement animation."""
+    global initial_word_designs, special_words
+    if not initial_word_designs or not special_words:
         return input_html
+    updated_html = input_html
+    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)
+    return updated_html
 # Create Gradio interface using Blocks
 with gr.Blocks() as demo:
     output_html = gr.HTML()
     with gr.Row():
         start_btn = gr.Button("▶ Start Typing")
+        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()
 # Launch the app
 demo.launch()