Spaces:
Sleeping
Sleeping
| 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", | |
| "'Rajdhani', sans-serif", | |
| "'Anton', sans-serif", | |
| "'Caveat', cursive", | |
| "'Patrick Hand', cursive", | |
| "'Nothing You Could Do', cursive", | |
| "'Reenie Beanie', cursive", | |
| "'Orbitron', sans-serif", | |
| "'Raleway', sans-serif" | |
| ] | |
| font_sizes = ["18px", "19px", "20px"] | |
| font_tops = ["0px", "1px", "-1px"] | |
| letter_spacings = ["-1px", "0px", "1px"] | |
| text_shadows = [ | |
| "0px 0px 1px", | |
| "0px 0px 2px", | |
| "1px 0px 0px", | |
| "0px 0px 0px", | |
| "0px 1px 0px", | |
| "0px 2px 0px", | |
| "0px 1px 1px", | |
| "1px 1px 0px", | |
| "1px 0px 1px" | |
| ] | |
| skew_angles = ["-25deg", "-20deg", "-15deg", "-10deg", "0deg", "10deg", "15deg", "20deg", "25deg"] | |
| letters = list(word) | |
| styled_letters = [] | |
| for letter in letters: | |
| style = { | |
| 'font-family': random.choice(fonts), | |
| 'line-height': '1.6', | |
| 'font-size': random.choice(font_sizes), | |
| 'letter-spacing': random.choice(letter_spacings), | |
| 'text-shadow': random.choice(text_shadows), | |
| 'transform': f'skew({random.choice(skew_angles)})', | |
| 'margin-top': random.choice(["-0.02cm", "0.00cm", "0.02cm"]), | |
| 'position': 'relative', | |
| 'top': random.choice(font_tops), | |
| '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}">{letter}</span>' | |
| styled_letters.append(styled_letter) | |
| return f'<span style="display:inline-flex;align-items:baseline;margin:0 2px;">{"".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." | |
| ] | |
| processed_paragraphs = [] | |
| for paragraph in paragraphs: | |
| words = paragraph.split() | |
| 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) | |
| processed_paragraphs.append(styled_paragraph) | |
| 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"> | |
| <style> | |
| body {{ | |
| font-family: "Josefin Sans", sans-serif; | |
| background-color: #fff; | |
| padding: 20px; | |
| color: #000; | |
| line-height: 1.6; | |
| font-size: 18px; | |
| }} | |
| .styled-letter {{ | |
| transition: transform 0.3s ease; | |
| display: inline-block; | |
| }} | |
| .styled-letter.animate {{ | |
| transform: rotate(10deg) scale(1.3); | |
| }} | |
| #animate-btn {{ | |
| background-color: #4CAF50; | |
| border: none; | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| margin-top: 15px; | |
| border-radius: 6px; | |
| }} | |
| #animate-btn:hover {{ | |
| background-color: #45a049; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="chat-area"></div> | |
| <button id="animate-btn" onclick="triggerMovement()">Animate Letters</button> | |
| <script> | |
| const paragraphs = {processed_paragraphs}; | |
| function typeParagraph(index) {{ | |
| return new Promise(resolve => {{ | |
| if (index >= paragraphs.length) {{ | |
| resolve(); | |
| return; | |
| }} | |
| let container = document.getElementById('chat-area'); | |
| let words = paragraphs[index].split(' '); | |
| let i = 0; | |
| let pElem = document.createElement('p'); | |
| container.appendChild(pElem); | |
| function addWord() {{ | |
| if (i < words.length) {{ | |
| pElem.innerHTML += words[i] + ' '; | |
| i++; | |
| setTimeout(addWord, 60); // typing speed | |
| }} else {{ | |
| setTimeout(() => resolve(), 500); // pause before next paragraph | |
| }} | |
| }} | |
| addWord(); | |
| }}); | |
| }} | |
| async function startTyping() {{ | |
| for (let i = 0; i < paragraphs.length; i++) {{ | |
| await typeParagraph(i); | |
| }} | |
| }} | |
| function triggerMovement() {{ | |
| document.querySelectorAll('.styled-letter').forEach(el => {{ | |
| el.classList.add('animate'); | |
| setTimeout(() => el.classList.remove('animate'), 300); | |
| }}); | |
| }} | |
| window.onload = startTyping; | |
| </script> | |
| </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() | |