Hugging Face's logo

Spaces:
circulartext
/
CircularText-Reading
Sleeping

App Files Community
circulartext commited on
Commit
6153859
·
verified ·
1 Parent(s): c0a5aff

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +13 -13
app.py CHANGED
@@ -52,7 +52,7 @@ def generate_initial_design(word):
52
  }
53
 
54
  style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
55
- styled_letter = f'<span class="styled-letter" style="{style_str}" onclick="triggerMovement(this)">{letter}</span>'
56
  styled_letters.append(styled_letter)
57
 
58
  return f'''
@@ -98,13 +98,17 @@ def create_html_with_script(output_text):
98
  .styled-letter {{
99
  transition: all 0.3s ease;
100
  }}
 
 
 
 
 
101
  </style>
102
  <script>
103
- function triggerMovement(el) {{
104
- el.style.animation = '';
105
- setTimeout(() => {{
106
- el.style.animation = 'scale(1.2) rotate(10deg) 0.5s ease-in-out';
107
- }}, 10);
108
  }}
109
 
110
  function revealWords() {{
@@ -122,23 +126,19 @@ def create_html_with_script(output_text):
122
  }}
123
  displayWord();
124
  }}
125
-
126
- function activateMovement() {{
127
- document.querySelectorAll('.styled-letter').forEach(triggerMovement);
128
- }}
129
  </script>
130
  </head>
131
  <body>
132
  <div style='max-width: 800px; margin: auto;' id="text-content"></div>
133
- <button onclick="revealWords()">Start</button>
134
- <button onclick="activateMovement()">Activate Movement</button>
135
  </body>
136
  </html>
137
  """
138
 
139
  # Create Gradio interface using Blocks
140
  with gr.Blocks() as demo:
141
- gr.Markdown("# Styled Text Display with Clickable Animation")
142
  output_html = gr.HTML()
143
  demo.load(fn=lambda: create_html_with_script(generate_output_html()), outputs=output_html)
144
 
 
52
  }
53
 
54
  style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
55
+ styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
56
  styled_letters.append(styled_letter)
57
 
58
  return f'''
 
98
  .styled-letter {{
99
  transition: all 0.3s ease;
100
  }}
101
+ @keyframes wiggle {{
102
+ 0% {{ transform: rotate(0deg); }}
103
+ 50% {{ transform: rotate(5deg); }}
104
+ 100% {{ transform: rotate(0deg); }}
105
+ }}
106
  </style>
107
  <script>
108
+ function triggerMovement() {{
109
+ document.querySelectorAll('.styled-letter').forEach(el => {{
110
+ el.style.animation = 'wiggle 0.5s infinite';
111
+ }});
 
112
  }}
113
 
114
  function revealWords() {{
 
126
  }}
127
  displayWord();
128
  }}
 
 
 
 
129
  </script>
130
  </head>
131
  <body>
132
  <div style='max-width: 800px; margin: auto;' id="text-content"></div>
133
+ <button onclick="revealWords()">Start Text</button>
134
+ <button onclick="triggerMovement()">Start Movement</button>
135
  </body>
136
  </html>
137
  """
138
 
139
  # Create Gradio interface using Blocks
140
  with gr.Blocks() as demo:
141
+ gr.Markdown("# Styled Text with Animation")
142
  output_html = gr.HTML()
143
  demo.load(fn=lambda: create_html_with_script(generate_output_html()), outputs=output_html)
144