File size: 4,337 Bytes
48706c6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
import gradio as gr
import random
from transformers import pipeline

# Predefined words to check
SPECIAL_WORDS = ['weather', 'sun', 'middle', 'summer', 'heat']

def generate_circular_text_design(word):
    """Generate a consistent but randomized text design for a word"""
    # Controlled randomization parameters
    font_sizes = [18, 20, 22, 24, 26]
    letter_spacings = [-3, -2, -4]
    skew_angles = [-25, -20, -15, -10, 0, 10, 15, 20, 25]
    
    # Random single color (with some saturation)
    base_color = f'#{random.randint(0, 0xFFFFFF):06x}'
    
    # Fonts with a controlled set
    fonts = [
        "'Dosis', sans-serif",
        "'Josefin Sans', sans-serif",
        "'Orbitron', sans-serif",
        "'Roboto Condensed', sans-serif"
    ]
    
    # Create HTML for each letter with dynamic styling
    letters = list(word)
    styled_letters = []
    
    for i, letter in enumerate(letters):
        style = {
            'font-family': random.choice(fonts),
            'line-height': '138%',
            'font-size': f'{random.choice(font_sizes)}px',
            'letter-spacing': f'{random.choice(letter_spacings)}px',
            'text-shadow': '1px 2px 1px',
            'transform': f'skew({random.choice(skew_angles)}deg, 0deg)',
            'margin-top': f'{random.uniform(-0.1, 0.1):.2f}cm',
            'position': 'relative',
            'top': f'{random.randint(3, 11)}px',
            'color': base_color
        }
        
        # Convert style to inline CSS
        style_str = '; '.join([f'{k}: {v}' for k, v in style.items()])
        
        styled_letter = f'<div id="ddiv{i+1}" class="CIRCDosis_SZ18_SP-3_SH1_SK0_MA0" style="{style_str}">{letter}</div>'
        styled_letters.append(styled_letter)
    
    # Wrap styled letters in a flex container with movement script
    movement_script = f"""
    <script>
    function timedText2x() {{
        {' '.join([f"""
        setTimeout(() => {{
            document.getElementById('ddiv{i+1}').style.transform = 'rotate({random.randint(-20, 20)}deg) scale(1.2)';
            document.getElementById('ddiv{i+1}').style.fontSize = '{random.choice(font_sizes)+5}px';
            document.getElementById('ddiv{i+1}').style.color = '#{random.randint(0, 0xFFFFFF):06x}';
        }}, {100 * (i+1)});
        setTimeout(() => {{
            document.getElementById('ddiv{i+1}').style.transform = 'rotate(0deg) scale(1)';
            document.getElementById('ddiv{i+1}').style.fontSize = '{random.choice(font_sizes)}px';
        }}, {500 + 100 * (i+1)});
        """ for i in range(len(letters))])}
    }}
    window.onload = timedText2x;
    </script>
    """
    
    return f'<div style="display: flex; align-items: baseline;">{" ".join(styled_letters)}</div>{movement_script}'

def process_text(input_text):
    """Process text and apply special styling to matching words"""
    # Use inference model
    generator = pipeline('text-generation', model='gpt2')
    generated_text = generator(input_text, max_length=100)[0]['generated_text']
    
    # Split text into words
    words = generated_text.split()
    
    # Check for special words
    for i, word in enumerate(words):
        if word.lower() in SPECIAL_WORDS:
            # Apply circular text design
            words[i] = generate_circular_text_design(word)
    
    # Combine words with HTML
    output_html = f"""
    <html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=Dosis&family=Josefin+Sans&family=Orbitron&family=Roboto+Condensed&display=swap" rel="stylesheet">
        <style>
        .CIRCDosis_SZ18_SP-3_SH1_SK0_MA0 {{
            float: left;
            position: relative;
            transition: all 0.3s ease;
        }}
        body {{
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: 'Josefin Sans', sans-serif;
        }}
        </style>
    </head>
    <body>
        <h1>{' '.join(words)}</h1>
    </body>
    </html>
    """
    
    return output_html

# Create Gradio interface
iface = gr.Interface(
    fn=process_text,
    inputs="text",
    outputs=gr.HTML(),
    title="Circular Text Styler",
    description="Enter a prompt to generate text with special word styling"
)

# Launch the interface
iface.launch()