Spaces:
Sleeping
Sleeping
Update app.py
Browse files
app.py
CHANGED
|
@@ -2,7 +2,6 @@ import gradio as gr
|
|
| 2 |
import random
|
| 3 |
|
| 4 |
def generate_initial_design(word):
|
| 5 |
-
"""Generate initial design for the special word in black color."""
|
| 6 |
fonts = [
|
| 7 |
"'VT323', monospace",
|
| 8 |
"'Josefin Sans', sans-serif",
|
|
@@ -80,7 +79,9 @@ def generate_output_html():
|
|
| 80 |
result.append(styled_paragraph)
|
| 81 |
|
| 82 |
output_html = '<br><br>'.join(result)
|
|
|
|
| 83 |
|
|
|
|
| 84 |
return f"""
|
| 85 |
<html>
|
| 86 |
<head>
|
|
@@ -102,32 +103,35 @@ def generate_output_html():
|
|
| 102 |
function triggerMovement(el) {{
|
| 103 |
el.style.animation = '';
|
| 104 |
setTimeout(() => {{
|
| 105 |
-
el.style.animation = '
|
| 106 |
}}, 10);
|
| 107 |
}}
|
| 108 |
-
|
| 109 |
-
</head>
|
| 110 |
-
<body>
|
| 111 |
-
<div style='max-width: 800px; margin: auto;' id="text-content">
|
| 112 |
-
{output_html}
|
| 113 |
-
</div>
|
| 114 |
-
<script>
|
| 115 |
function revealWords() {{
|
| 116 |
-
const
|
| 117 |
-
const
|
| 118 |
-
|
|
|
|
| 119 |
let i = 0;
|
| 120 |
function displayWord() {{
|
| 121 |
if (i < words.length) {{
|
| 122 |
-
|
| 123 |
i++;
|
| 124 |
-
setTimeout(displayWord,
|
| 125 |
}}
|
| 126 |
}}
|
| 127 |
displayWord();
|
| 128 |
}}
|
| 129 |
-
|
|
|
|
|
|
|
|
|
|
| 130 |
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 131 |
</body>
|
| 132 |
</html>
|
| 133 |
"""
|
|
@@ -136,7 +140,7 @@ def generate_output_html():
|
|
| 136 |
with gr.Blocks() as demo:
|
| 137 |
gr.Markdown("# Styled Text Display with Clickable Animation")
|
| 138 |
output_html = gr.HTML()
|
| 139 |
-
demo.load(fn=generate_output_html, outputs=output_html)
|
| 140 |
|
| 141 |
# Launch the app
|
| 142 |
demo.launch()
|
|
|
|
| 2 |
import random
|
| 3 |
|
| 4 |
def generate_initial_design(word):
|
|
|
|
| 5 |
fonts = [
|
| 6 |
"'VT323', monospace",
|
| 7 |
"'Josefin Sans', sans-serif",
|
|
|
|
| 79 |
result.append(styled_paragraph)
|
| 80 |
|
| 81 |
output_html = '<br><br>'.join(result)
|
| 82 |
+
return output_html
|
| 83 |
|
| 84 |
+
def create_html_with_script(output_text):
|
| 85 |
return f"""
|
| 86 |
<html>
|
| 87 |
<head>
|
|
|
|
| 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() {{
|
| 111 |
+
const container = document.getElementById('text-content');
|
| 112 |
+
const fullText = `{output_text}`;
|
| 113 |
+
const words = fullText.split(' ');
|
| 114 |
+
container.innerHTML = '';
|
| 115 |
let i = 0;
|
| 116 |
function displayWord() {{
|
| 117 |
if (i < words.length) {{
|
| 118 |
+
container.innerHTML += words[i] + ' ';
|
| 119 |
i++;
|
| 120 |
+
setTimeout(displayWord, 150);
|
| 121 |
}}
|
| 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 |
"""
|
|
|
|
| 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 |
|
| 145 |
# Launch the app
|
| 146 |
demo.launch()
|