Hugging Face's logo

Spaces:
circulartext
/
CircularText-Reading
Sleeping

App Files Community
circulartext commited on
Commit
f30068b
·
verified ·
1 Parent(s): edaca51

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +72 -56
app.py CHANGED
@@ -56,13 +56,7 @@ def generate_initial_design(word):
56
  styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
57
  styled_letters.append(styled_letter)
58
 
59
- return f'''
60
- <span style="display: inline-flex;
61
- align-items: baseline;
62
- vertical-align: middle;
63
- margin: 0 2px;">
64
- {"".join(styled_letters)}
65
- </span>'''
66
 
67
  def generate_output_html():
68
  paragraphs = [
@@ -70,73 +64,95 @@ def generate_output_html():
70
  "“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."
71
  ]
72
 
73
- result = []
74
-
75
  for paragraph in paragraphs:
76
  words = paragraph.split()
77
  special_word = random.choice(words)
78
  styled_word = generate_initial_design(special_word)
79
  styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
80
- result.append(styled_paragraph)
81
-
82
- output_html = '<br><br>'.join(result)
83
 
84
  return f"""
85
  <html>
86
  <head>
87
  <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">
88
  <style>
89
- body {{
90
- background-color: #fff;
91
- color: #000;
92
- font-size: 18px;
93
- line-height: 1.6;
94
- font-family: "Josefin Sans", sans-serif;
95
- padding: 20px;
96
- }}
97
- .styled-letter {{
98
- transition: transform 0.3s ease;
99
- display: inline-block;
100
- }}
101
- .styled-letter.animate {{
102
- transform: rotate(10deg) scale(1.3);
103
- }}
 
 
 
 
 
 
 
 
 
 
 
 
 
104
  </style>
 
 
 
 
 
105
  <script>
106
- function typeWriter(textContentId, words) {{
107
- const textContent = document.getElementById(textContentId);
108
- textContent.innerHTML = '';
109
- let i = 0;
110
- function displayWord() {{
111
- if (i < words.length) {{
112
- textContent.innerHTML += words[i] + ' ';
113
- i++;
114
- setTimeout(displayWord, 60); // typing speed
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  }}
116
  }}
117
- displayWord();
118
- }}
119
 
120
- function triggerMovement() {{
121
- document.querySelectorAll('.styled-letter').forEach(el => {{
122
- el.classList.add('animate');
123
- setTimeout(() => el.classList.remove('animate'), 300);
124
- }});
125
- }}
126
 
127
- window.onload = function() {{
128
- const words = document.getElementById('full-text').innerHTML.split(' ');
129
- typeWriter('text-content', words);
130
- }}
131
  </script>
132
- </head>
133
- <body>
134
- <div style='max-width: 800px; margin: auto;'>
135
- <div id="full-text" style="display:none;">{output_html}</div>
136
- <div id="text-content"></div>
137
- <br>
138
- <button onclick="triggerMovement()">Animate Letters</button>
139
- </div>
140
  </body>
141
  </html>
142
  """
 
56
  styled_letter = f'<span class="styled-letter" style="{style_str}">{letter}</span>'
57
  styled_letters.append(styled_letter)
58
 
59
+ return f'<span style="display:inline-flex;align-items:baseline;margin:0 2px;">{"".join(styled_letters)}</span>'
 
 
 
 
 
 
60
 
61
  def generate_output_html():
62
  paragraphs = [
 
64
  "“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."
65
  ]
66
 
67
+ processed_paragraphs = []
 
68
  for paragraph in paragraphs:
69
  words = paragraph.split()
70
  special_word = random.choice(words)
71
  styled_word = generate_initial_design(special_word)
72
  styled_paragraph = ' '.join(word if word != special_word else styled_word for word in words)
73
+ processed_paragraphs.append(styled_paragraph)
 
 
74
 
75
  return f"""
76
  <html>
77
  <head>
78
  <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">
79
  <style>
80
+ body {{
81
+ font-family: "Josefin Sans", sans-serif;
82
+ background-color: #fff;
83
+ padding: 20px;
84
+ color: #000;
85
+ line-height: 1.6;
86
+ font-size: 18px;
87
+ }}
88
+ .styled-letter {{
89
+ transition: transform 0.3s ease;
90
+ display: inline-block;
91
+ }}
92
+ .styled-letter.animate {{
93
+ transform: rotate(10deg) scale(1.3);
94
+ }}
95
+ #animate-btn {{
96
+ background-color: #4CAF50;
97
+ border: none;
98
+ color: white;
99
+ padding: 10px 20px;
100
+ font-size: 16px;
101
+ cursor: pointer;
102
+ margin-top: 15px;
103
+ border-radius: 6px;
104
+ }}
105
+ #animate-btn:hover {{
106
+ background-color: #45a049;
107
+ }}
108
  </style>
109
+ </head>
110
+ <body>
111
+ <div id="chat-area"></div>
112
+ <button id="animate-btn" onclick="triggerMovement()">Animate Letters</button>
113
+
114
  <script>
115
+ const paragraphs = {processed_paragraphs};
116
+
117
+ function typeParagraph(index) {{
118
+ return new Promise(resolve => {{
119
+ if (index >= paragraphs.length) {{
120
+ resolve();
121
+ return;
122
+ }}
123
+ let container = document.getElementById('chat-area');
124
+ let words = paragraphs[index].split(' ');
125
+ let i = 0;
126
+ let pElem = document.createElement('p');
127
+ container.appendChild(pElem);
128
+ function addWord() {{
129
+ if (i < words.length) {{
130
+ pElem.innerHTML += words[i] + ' ';
131
+ i++;
132
+ setTimeout(addWord, 60); // typing speed
133
+ }} else {{
134
+ setTimeout(() => resolve(), 500); // pause before next paragraph
135
+ }}
136
+ }}
137
+ addWord();
138
+ }});
139
+ }}
140
+
141
+ async function startTyping() {{
142
+ for (let i = 0; i < paragraphs.length; i++) {{
143
+ await typeParagraph(i);
144
  }}
145
  }}
 
 
146
 
147
+ function triggerMovement() {{
148
+ document.querySelectorAll('.styled-letter').forEach(el => {{
149
+ el.classList.add('animate');
150
+ setTimeout(() => el.classList.remove('animate'), 300);
151
+ }});
152
+ }}
153
 
154
+ window.onload = startTyping;
 
 
 
155
  </script>
 
 
 
 
 
 
 
 
156
  </body>
157
  </html>
158
  """