|
|
import gradio as gr |
|
|
import random |
|
|
|
|
|
|
|
|
initial_word_design = "" |
|
|
special_words = [] |
|
|
|
|
|
def generate_initial_design(word): |
|
|
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' |
|
|
} |
|
|
|
|
|
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; |
|
|
vertical-align: middle; |
|
|
margin: 0 2px;"> |
|
|
{" ".join(styled_letters)} |
|
|
</span>''' |
|
|
|
|
|
def process_text(): |
|
|
global initial_word_design, 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." |
|
|
] |
|
|
|
|
|
result = [] |
|
|
|
|
|
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) |
|
|
result.append(styled_paragraph) |
|
|
|
|
|
output_html = '<br><br>'.join(result) |
|
|
|
|
|
final_output = 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 {{ |
|
|
background-color: #fff; |
|
|
color: #000; |
|
|
font-size: 18px; |
|
|
line-height: 1.6; |
|
|
font-family: "Josefin Sans", sans-serif; |
|
|
padding: 20px; |
|
|
}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div style='max-width: 800px; margin: auto;'> |
|
|
{output_html} |
|
|
</div> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
return final_output |
|
|
|
|
|
|
|
|
with gr.Blocks() as demo: |
|
|
gr.Markdown("# Styled Text Display") |
|
|
|
|
|
output_html = gr.HTML() |
|
|
|
|
|
demo.load(fn=process_text, outputs=output_html) |
|
|
|
|
|
|
|
|
demo.launch() |
