File size: 15,287 Bytes
4ee7b46
 
 
 
 
eaf7360
4ee7b46
eaf7360
4ee7b46
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
c21f565
eaf7360
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4ee7b46
eaf7360
c21f565
4ee7b46
eaf7360
 
 
 
 
4ee7b46
eaf7360
 
 
4ee7b46
eaf7360
 
4ee7b46
 
eaf7360
4ee7b46
 
 
dbf1936
3b82090
4ee7b46
 
eaf7360
 
 
 
 
 
 
4ee7b46
eaf7360
4ee7b46
 
 
 
 
dbf1936
4ee7b46
 
 
 
 
 
 
 
 
 
dbf1936
4ee7b46
eaf7360
 
 
4ee7b46
eaf7360
 
 
 
4ee7b46
eaf7360
 
 
4ee7b46
eaf7360
 
4ee7b46
 
eaf7360
4ee7b46
c21f565
4ee7b46
c21f565
 
4ee7b46
 
c21f565
4ee7b46
 
 
 
 
 
 
 
c21f565
 
eaf7360
c21f565
 
 
eaf7360
 
 
 
 
 
 
c21f565
eaf7360
c21f565
 
 
 
 
 
 
eaf7360
c21f565
 
 
4ee7b46
 
 
 
 
 
 
 
 
 
 
 
c21f565
dbf1936
4ee7b46
 
eaf7360
dbf1936
4ee7b46
eaf7360
 
c9a51b3
eaf7360
4ee7b46
c21f565
 
 
4ee7b46
 
c21f565
dbf1936
 
 
c21f565
 
 
c9a51b3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
eaf7360
 
4ee7b46
 
dbf1936
 
4ee7b46
dbf1936
 
4ee7b46
dbf1936
 
 
 
 
 
 
 
 
eaf7360
4ee7b46
eaf7360
dbf1936
eaf7360
 
 
 
 
 
 
 
 
dbf1936
eaf7360
 
 
 
 
 
4ee7b46
c21f565
4ee7b46
 
 
 
 
 
 
eaf7360
dbf1936
eaf7360
 
4ee7b46
eaf7360
4ee7b46
eaf7360
4ee7b46
eaf7360
4ee7b46
c21f565
 
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
import gradio as gr
import random
from transformers import pipeline

# Load the model once when the app starts
generator = pipeline('text-generation', model='distilgpt2', max_length=25)  # Reduced max_length for faster inference

# Predefined words to check
SPECIAL_WORDS = [
    'movie', 'excited', 'waiting', 'long', 'time', 'production', 'real', 'coded', 'digital', 'favorite', 
    'asking', 'doing', 'basketball', 'soccer', 'football', 'baseball', 'soup', 'food', 'burgers', 'pizza', 
    'fruit', 'pineapple', 'milk', 'jello', 'candy', 'rice', 'greens', 'lettuce', 'oatmeal', 'cereal', 
    'dogs', 'cats', 'animals', 'goats', 'sheep', 'movies', 'money', 'bank', 'account', 'keeping', 
    'looking', 'moving', 'boxes', 'elephants', 'movement', 'coding', 'developing', 'going', 'cruise', 
    'ship', 'boat', 'bahamas', 'foods', 'healthy', 'eating', 'important', 'pennsylvania', 'atlanta', 
    'north carolina', 'new york', 'france', 'paris', 'work', 'jobs', 'computers', 'computer', 'grocery', 
    'glamorous', 'version', 'truck', 'pickup', 'play', 'types', 'games', 'applications', 'quantum', 
    'speeds', 'advancements', 'technological', 'glimpse', 'countless', 'technology', 'future', 'walking', 
    'hello', 'jordan', 'season', 'superstar', 'nba', 'championship', 'leading', 'points', 'assist', 
    'career', 'chicago', 'scared', 'tongue', 'energy', 'disguise', 'business', 'older', 'grown', 'call', 
    'bills', 'garden', 'house', 'fallen', 'blossoms', 'lawn', 'love', 'forever', 'most', 'fan', 'clout', 
    'space', 'team', 'today', 'woke', 'work', 'relax', 'quicker', 'thicker', 'richer', 'data', 'ballet', 
    'dancer', 'goat', 'post', 'lebron', 'james', 'eagles', 'rockets', 'times', 'tank', 'pencil', 'watch', 
    'rolex', 'rappers', 'rockstar', 'rocket', 'rocks', 'tooth', 'teeth', 'pancake', 'breakfast', 'lunch', 
    'dinner', 'zoom', 'calling', 'talking', 'rule', 'ruler', 'rick', 'morty', 'martin', 'smith', 'wild', 
    'track', 'field', 'touchdown', 'basket', 'hope', 'yours', 'thank', 'olympics', 'sports', 'help', 
    'legal', 'law', 'firm', 'crowd', 'winner', 'winter', 'smoking', 'green', 'purple', 'blue', 'pink', 
    'orange', 'black', 'white', 'yellow', 'gold', 'weather', 'sun', 'middle', 'summer', 'heat', 'spring',
    'travel', 'explore', 'adventure', 'journey', 'vacation', 'holiday', 'destination', 'airlines', 'flight',
    'tickets', 'booking', 'passport', 'visa', 'customs', 'luggage', 'boarding', 'hotel', 'accommodation',
    'resort', 'beach', 'mountains', 'forest', 'desert', 'safari', 'wildlife', 'nature', 'beauty', 'landscape',
    'view', 'sightseeing', 'tourism', 'culture', 'heritage', 'tradition', 'festival', 'celebration', 'nightlife',
    'entertainment', 'show', 'concert', 'music', 'art', 'gallery', 'museum', 'exhibit', 'performance',
    'audience', 'theater', 'cinema', 'director', 'actor', 'actress', 'casting', 'scene', 'script', 'dialogue',
    'surreal', 'abstract', 'realistic', 'animation', 'character', 'hero', 'villain', 'plot', 'twist', 'climax',
    'resolution', 'conflict', 'tension', 'suspense', 'thrill', 'horror', 'mystery', 'drama', 'comedy', 'romance',
    'action', 'adventure', 'sci-fi', 'fantasy', 'historical', 'documentary', 'satire', 'parody', 'spoof'
]

# Global variables
initial_word_design = ""
special_word = ""
outputs_list = []
last_design_styles = []  # To store styles of the last movement design for scoring

# Store design preferences with weights
design_preferences = {
    'font-family': {},
    'font-size': {},
    'letter-spacing': {},
    'text-shadow': {},
    'transform': {},
    'margin-top': {},
    'top': {},
    'color': {}
}

def get_choice(attribute, choices, use_weights=False):
    """Helper to get weighted or random choice based on preferences."""
    if use_weights and attribute in design_preferences and design_preferences[attribute]:
        weighted_choices = design_preferences[attribute]
        total = sum(weighted_choices.values())
        rand_val = random.uniform(0, total)
        cum_sum = 0
        for choice, weight in weighted_choices.items():
            cum_sum += weight
            if rand_val < cum_sum:
                return choice
    return random.choice(choices)

def generate_initial_design(word, use_weights=False):
    """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", "'Open Sans Condensed', sans-serif",
        "'Poiret One', cursive", "'Indie Flower', cursive", "'Pacifico', cursive", "'Teko', sans-serif"
    ]
    font_sizes = ["18px", "19px", "20px"]  # Narrower range
    font_tops = ["0px", "1px", "-1px"]  # Smaller adjustments
    letter_spacings = ["-1px", "0px", "1px"]  # Reduced range
    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"]
    margins_top = ["-0.02cm", "0.00cm", "0.02cm"]

    letters = list(word)
    styled_letters = []
    current_design_styles = []
    
    for i, letter in enumerate(letters):
        style = {
            'font-family': get_choice('font-family', fonts, use_weights),
            'line-height': '1.6',  # Consistent with body text
            'font-size': get_choice('font-size', font_sizes, use_weights),
            'letter-spacing': get_choice('letter-spacing', letter_spacings, use_weights),
            'text-shadow': get_choice('text-shadow', text_shadows, use_weights),
            'transform': f'skew({get_choice("transform", skew_angles, use_weights)})',
            'margin-top': get_choice('margin-top', margins_top, use_weights),
            'position': 'relative',
            'top': get_choice('top', font_tops, use_weights),
            'color': '#000000',
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'middle'
        }
        current_design_styles.append(style)
        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>''', current_design_styles

def generate_movement_design(word, use_weights=False):
    """Generate a completely new random design for the movement animation."""
    global last_design_styles
    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"]  # Narrower range
    font_tops = ["0px", "1px", "-1px"]  # Smaller adjustments
    letter_spacings = ["-1px", "0px", "1px"]  # Reduced range
    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"]
    margins_top = ["-0.02cm", "0.00cm", "0.02cm"]

    # Generate random color for the movement design
    random_color = f'#{random.randint(0, 0xFFFFFF):06x}'
    
    # Generate unique animation name
    animation_name = f"animate_{random.randint(0, 10000)}"

    # Create keyframes for the animation sequence
    keyframes = f"""
    @keyframes {animation_name} {{
        0% {{ transform: scale(1) rotate(0deg); }}
        50% {{ transform: scale(1.2) rotate(10deg); }}
        100% {{ transform: scale(1) rotate(0deg); }}
    }}
    """

    letters = list(word)
    styled_letters = []
    last_design_styles = []  # Reset the last design styles for new movement design
    
    for i, letter in enumerate(letters):
        style = {
            'font-family': get_choice('font-family', fonts, use_weights),
            'line-height': '1.6',  # Consistent with body text
            'font-size': get_choice('font-size', font_sizes, use_weights),
            'letter-spacing': get_choice('letter-spacing', letter_spacings, use_weights),
            'text-shadow': get_choice('text-shadow', text_shadows, use_weights),
            'transform': f'skew({get_choice("transform", skew_angles, use_weights)})',
            'margin-top': get_choice('margin-top', margins_top, use_weights),
            'position': 'relative',
            'top': get_choice('top', font_tops, use_weights),
            'color': random_color,
            'display': 'inline-block',
            'margin': '0 1px',
            'vertical-align': 'middle',
            'animation': f'{animation_name} 0.5s ease-in-out',
            'animation-delay': f'{i * 0.1}s'
        }
        last_design_styles.append(style)  # Save the style for scoring
        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'''
    <style>
    {keyframes}
    .styled-letter {{
        transition: all 0.3s ease;
    }}
    </style>
    <span style="display: inline-flex; 
                 align-items: baseline; 
                 vertical-align: middle; 
                 margin: 0 2px;">
        {" ".join(styled_letters)}
    </span>''', last_design_styles

def process_text(input_text):
    """Process text and generate the initial output with special word styled in black."""
    global initial_word_design, special_word, last_design_styles

    # Generate text with limited length
    generated = generator(input_text, num_return_sequences=1)
    generated_text = generated[0]['generated_text']
    generated_text = generated_text[:200]  # Limit output length

    words = generated_text.split()
    
    for i, word in enumerate(words):
        clean_word = ''.join(filter(str.isalnum, word)).lower()
        if clean_word in SPECIAL_WORDS:
            special_word = word
            # Use weights only if there are existing preferences
            use_weights = any(design_preferences[attr] for attr in design_preferences)
            initial_word_design, last_design_styles = generate_initial_design(word, use_weights=use_weights)
            words[i] = initial_word_design
        else:
            words[i] = word

    output_html = ' '.join(words)
    
    final_output = f"""
    <html>
    <head>
        <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Caveat&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Nothing+You+Could+Do&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway:500" 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>
    """
    outputs_list.append(final_output)
    return "<br><br>".join(outputs_list)

def trigger_movement(input_html):
    """Function to trigger the movement animation without duplicating content."""
    global initial_word_design, special_word, last_design_styles
    
    if not initial_word_design or not special_word or not outputs_list:
        return "<br><br>".join(outputs_list)

    # Use weights only if there are existing preferences
    use_weights = any(design_preferences[attr] for attr in design_preferences)
    movement_design, last_design_styles = generate_movement_design(special_word, use_weights=use_weights)
    
    # Update only the last output in the list with the movement design
    last_output = outputs_list[-1]
    updated_last_output = last_output.replace(initial_word_design, movement_design, 1)
    outputs_list[-1] = updated_last_output  # Update the last output without appending a new one
    
    return "<br><br>".join(outputs_list)

def update_design_preferences(score):
    """Update design preferences based on the score for the last design (initial or movement)."""
    global last_design_styles
    
    if last_design_styles:
        weight = score if score > 5 else (11 - score) * 0.5  # Higher score means more weight, lower score reduces weight
        for style in last_design_styles:
            for attr, value in style.items():
                if attr in design_preferences:
                    if attr == 'transform':  # Extract the skew angle from transform
                        value = value.split('(')[1].split(')')[0]
                    if attr == 'color':  # We might not weight color since it’s random each time for movement
                        continue
                    if value in design_preferences[attr]:
                        design_preferences[attr][value] += weight
                    else:
                        design_preferences[attr][value] = weight
    return "<br><br>".join(outputs_list)

# Create Gradio interface using Blocks
with gr.Blocks() as demo:
    gr.Markdown("# CircularText Styler\nEnter a prompt to generate text with special word styling.")
    
    with gr.Row():
        input_text = gr.Textbox(label="Input Prompt")
        submit_button = gr.Button("Generate")
    
    with gr.Row():
        score_slider = gr.Slider(minimum=1, maximum=10, step=1, label="Score the Current Design")
        score_button = gr.Button("Submit Score")
    
    animate_button = gr.Button("Trigger Movement")
    output_html = gr.HTML()
    
    submit_button.click(process_text, inputs=input_text, outputs=output_html)
    animate_button.click(trigger_movement, inputs=output_html, outputs=output_html)
    score_button.click(update_design_preferences, inputs=score_slider, outputs=output_html)

# Launch the app
demo.launch()