import gradio as gr import numpy as np import os from huggingface_hub import login from sentence_transformers import SentenceTransformer, util # --- CONFIGURATION --- class Config: """Configuration settings for the application.""" EMBEDDING_MODEL_ID = "google/embeddinggemma-300M" PROMPT_NAME = "STS" TOP_K = 5 HF_TOKEN = os.getenv('HF_TOKEN') # --- FONT DATA --- FONT_DATA = [ { "name": "Playfair Display", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap", "description": "Elegant, sophisticated, editorial, high-contrast serif with dramatic flair, perfect for luxury brands and fashion magazines" }, { "name": "Inter", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap", "description": "Modern, clean, professional, highly legible sans-serif designed for digital interfaces and contemporary design" }, { "name": "Amatic SC", "family": "handwriting", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&display=swap", "description": "Playful, casual, handwritten, fun, child-like, informal font perfect for creative and whimsical projects" }, { "name": "Crimson Text", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Crimson+Text:wght@400;600&display=swap", "description": "Classical, scholarly, academic, readable serif inspired by old-style typefaces, ideal for books and literature" }, { "name": "Roboto", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap", "description": "Friendly, approachable, geometric sans-serif with a mechanical skeleton, widely used in digital applications" }, { "name": "Dancing Script", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap", "description": "Romantic, flowing, elegant script font perfect for wedding invitations, greeting cards, and feminine designs" }, { "name": "Oswald", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600&display=swap", "description": "Bold, condensed, impactful sans-serif with strong presence, ideal for headlines and masculine designs" }, { "name": "Lora", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap", "description": "Warm, friendly, contemporary serif with calligraphic roots, perfect for body text and storytelling" }, { "name": "Montserrat", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap", "description": "Urban, modern, versatile sans-serif inspired by Buenos Aires signage, great for branding and corporate use" }, { "name": "Pacifico", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Pacifico&display=swap", "description": "Surfing, California, retro, casual script font with beach vibes and laid-back summer feeling" }, { "name": "Source Code Pro", "family": "monospace", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;600&display=swap", "description": "Technical, programming, coding, monospaced font designed for developers and technical documentation" }, { "name": "Merriweather", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap", "description": "Traditional, readable, pleasant serif designed for comfortable reading on screens and in print" }, { "name": "Abril Fatface", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap", "description": "Bold, dramatic, high-contrast display serif inspired by French and Italian typography, perfect for headlines" }, { "name": "Great Vibes", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap", "description": "Elegant, formal, calligraphic script with sophisticated curves, ideal for luxury and premium branding" }, { "name": "Raleway", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600&display=swap", "description": "Sophisticated, thin, elegant sans-serif with distinctive 'W', perfect for fashion and high-end design" }, { "name": "Fredoka One", "family": "display", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap", "description": "Friendly, rounded, playful display font perfect for children's content, toys, and fun applications" }, { "name": "Libre Baskerville", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap", "description": "Classic, traditional, scholarly serif based on American Type Founder's Baskerville, perfect for academic texts" }, { "name": "Poppins", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap", "description": "Geometric, modern, friendly sans-serif with circular forms, popular for contemporary web design" }, { "name": "Lobster", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Lobster&display=swap", "description": "Bold, retro, vintage script font with a 1950s diner feel, perfect for nostalgic and Americana designs" }, { "name": "Open Sans", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap", "description": "Neutral, friendly, optimistic sans-serif designed for legibility across interfaces, print, and web" }, { "name": "Shadows Into Light", "family": "handwriting", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap", "description": "Casual, handwritten, personal font that feels like natural handwriting with a marker or pen" }, { "name": "Creepster", "family": "display", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Creepster&display=swap", "description": "Horror, scary, Halloween, gothic font with dripping effect, perfect for spooky and thriller themes" }, { "name": "Righteous", "family": "display", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Righteous&display=swap", "description": "Futuristic, sci-fi, technology, bold display font with unique character shapes for modern designs" }, { "name": "Satisfy", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Satisfy&display=swap", "description": "Casual, relaxed, handwritten script with natural flow, perfect for personal and informal communications" }, { "name": "Anton", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Anton&display=swap", "description": "Bold, condensed, impactful sans-serif perfect for headlines, posters, and attention-grabbing text" }, { "name": "Courgette", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Courgette&display=swap", "description": "French, bistro, café, elegant script font with continental European charm and sophistication" }, { "name": "Indie Flower", "family": "handwriting", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap", "description": "Indie, hipster, handwritten font with quirky personality, perfect for creative and artistic projects" }, { "name": "PT Serif", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap", "description": "Russian, Cyrillic, transitional serif with excellent readability for both Latin and Cyrillic scripts" }, { "name": "Questrial", "family": "sans-serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Questrial&display=swap", "description": "Simple, clean, minimal sans-serif with subtle quirks, perfect for modern and understated designs" }, { "name": "Bangers", "family": "display", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Bangers&display=swap", "description": "Comic book, superhero, pop art font inspired by mid-20th century comic books and advertisements" }, { "name": "Sacramento", "family": "script", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Sacramento&display=swap", "description": "Monoline, cursive script with vintage charm, perfect for elegant and sophisticated branding" }, { "name": "Bitter", "family": "serif", "google_fonts_url": "https://fonts.googleapis.com/css2?family=Bitter:wght@400;700&display=swap", "description": "Contemporary, slab serif with slight contrast, designed for comfortable reading in long texts" } ] # --- CORE LOGIC --- class FontMoodGenerator: """Handles model loading, embedding generation, and font palette creation.""" def __init__(self, config: Config, font_data: list[dict[str, any]]): """Initializes the generator, logs in, and loads necessary assets.""" self.config = config self.font_data = font_data self._login_to_hf() self.embedding_model = self._load_model() self.font_embeddings = self._precompute_font_embeddings() def _login_to_hf(self): """Logs into Hugging Face Hub if a token is provided.""" if self.config.HF_TOKEN: print("Logging into Hugging Face Hub...") login(token=self.config.HF_TOKEN) else: print("HF_TOKEN not found. Proceeding without login.") def _load_model(self) -> SentenceTransformer: """Loads the Sentence Transformer model.""" print(f"Initializing embedding model: {self.config.EMBEDDING_MODEL_ID}...") try: return SentenceTransformer(self.config.EMBEDDING_MODEL_ID) except Exception as e: print(f"Error loading model: {e}") raise def _precompute_font_embeddings(self) -> np.ndarray: """Generates and stores embeddings for the font descriptions.""" print("Pre-computing embeddings for font palette...") font_texts = [ f"{font['name']}, {font['description']}" for font in self.font_data ] embeddings = self.embedding_model.encode( font_texts, prompt_name=self.config.PROMPT_NAME ) print("Embeddings computed successfully.") return embeddings def _create_persistent_font_imports(self, top_hits: list[dict[str, any]]) -> str: """Creates persistent font imports that work across all steps.""" if not top_hits: return "" imports = [] seen_urls = set() for hit in top_hits: font_info = self.font_data[hit['corpus_id']] google_fonts_url = font_info['google_fonts_url'] if google_fonts_url not in seen_urls: imports.append(f"@import url('{google_fonts_url}');") seen_urls.add(google_fonts_url) return "\n".join(imports) def _format_palette_as_html(self, top_hits: list[dict[str, any]]) -> str: """Formats the top font hits into a displayable HTML string with embedded font imports.""" if not top_hits: return "

Could not generate a font palette. Please try another mood.

" # Get font imports for the selected fonts font_imports = self._create_persistent_font_imports(top_hits) sample_texts = [ "The Quick Brown Fox Jumps Over The Lazy Dog", "Sphinx of black quartz, judge my vow", "How vexingly quick daft zebras jump!", "Pack my box with five dozen liquor jugs", "Waltz, bad nymph, for quick jigs vex" ] cards_html = "" for i, hit in enumerate(top_hits): font_info = self.font_data[hit['corpus_id']] font_name = font_info['name'] font_family = font_info['family'] score = hit['score'] sample_text = sample_texts[i % len(sample_texts)] cards_html += f"""

{font_name}

Score: {score:.2f}
{sample_text}
{font_family.title()} {font_info['description'][:100]}...
""" # Include font imports directly in the HTML with unique ID to prevent conflicts return f"""
{cards_html}
""" def generate_palette(self, mood_text: str) -> tuple[str, list[dict[str, any]]]: """Generates font palette and returns both HTML and raw data.""" if not mood_text or not mood_text.strip(): return "

Please enter a mood or a description.

", [] mood_embedding = self.embedding_model.encode( mood_text, prompt_name=self.config.PROMPT_NAME ) top_hits = util.semantic_search( mood_embedding, self.font_embeddings, top_k=self.config.TOP_K )[0] palette_html = self._format_palette_as_html(top_hits) return palette_html, top_hits def generate_css_code(self, top_hits: list[dict[str, any]]) -> str: """Generates exportable CSS code.""" if not top_hits: return "/* No fonts generated yet */" font_imports = self._create_persistent_font_imports(top_hits) css_code = f"""/* Generated Font Palette CSS */ {font_imports} /* Font Variables */ :root {{""" for i, hit in enumerate(top_hits): font_info = self.font_data[hit['corpus_id']] font_name = font_info['name'] css_code += f""" --font-{i+1}: '{font_name}', {font_info['family']};""" css_code += """ } /* Usage Examples */ .heading { font-family: var(--font-1); } .body-text { font-family: var(--font-2); } .accent { font-family: var(--font-3); }""" return css_code def apply_theme_css(self, top_hits: list[dict[str, any]]) -> str: """Generates CSS to apply fonts to the UI while preserving palette fonts.""" if not top_hits: return "" font_imports = self._create_persistent_font_imports(top_hits) css_rules = [] if len(top_hits) >= 1: primary_font = self.font_data[top_hits[0]['corpus_id']]['name'].replace("'", "\\'") css_rules.append(f"h1, h2, h3:not(.font-card h3), .gr-button-primary {{ font-family: '{primary_font}', sans-serif !important; }}") if len(top_hits) >= 2: secondary_font = self.font_data[top_hits[1]['corpus_id']]['name'].replace("'", "\\'") css_rules.append(f".gr-textbox input, .gr-textbox textarea {{ font-family: '{secondary_font}', sans-serif !important; }}") if len(top_hits) >= 3: tertiary_font = self.font_data[top_hits[2]['corpus_id']]['name'].replace("'", "\\'") css_rules.append(f".gr-button-secondary {{ font-family: '{tertiary_font}', sans-serif !important; }}") css_rules_str = "\n ".join(css_rules) css = f"""""" return css # --- GRADIO UI WITH WALKTHROUGH --- def create_ui(generator: FontMoodGenerator): """Creates the Gradio web interface with Walkthrough.""" with gr.Blocks(theme="ocean") as demo: gr.Markdown(""" # 📝 Font Mood Generator Follow the steps below to generate and apply a personalized font palette based on your mood or description. """) with gr.Walkthrough(selected=0) as walkthrough: # STEP 1: Input Mood with gr.Step("🎯 Describe Your Mood", id=0): gr.Markdown(""" ### Step 1: Tell us about your mood or vision Describe the feeling, atmosphere, or aesthetic you're aiming for. Be as detailed as you like - the more descriptive, the better the results! """) mood_input = gr.Textbox( value="Horror movie poster with scary atmosphere", label="Enter Your Mood or Scene", info="Examples: 'Modern tech startup', 'Playful children's book', 'Gothic horror movie'", lines=3 ) gr.Examples( [ "Elegant wedding invitation with vintage charm", "Modern tech startup with clean aesthetics", "Playful children's book with whimsical characters", "Horror movie poster with scary atmosphere", "Luxury fashion brand with sophisticated appeal", "Retro 1950s diner with nostalgic vibes", "Academic research paper with scholarly tone", "Surf shop with California beach culture", "Gothic medieval manuscript with ancient feel", "Futuristic sci-fi interface with cyber aesthetics" ], inputs=mood_input, ) generate_btn = gr.Button("Generate Font Palette →", variant="primary", size="lg") # Hidden outputs to store results palette_html_hidden = gr.HTML(visible=False) font_data_hidden = gr.JSON(visible=False) def generate_and_move(mood_text): palette_html, top_hits = generator.generate_palette(mood_text) # Convert to serializable format font_data_json = [{"corpus_id": hit["corpus_id"], "score": hit["score"]} for hit in top_hits] return palette_html, font_data_json, gr.Walkthrough(selected=1) generate_btn.click( fn=generate_and_move, inputs=mood_input, outputs=[palette_html_hidden, font_data_hidden, walkthrough] ) # STEP 2: Review Generated Fonts with gr.Step("🎨 Review Your Font Palette", id=1): gr.Markdown(""" ### Step 2: Review your generated fonts Here are the fonts that best match your mood, ranked by similarity score. """) palette_display = gr.HTML() with gr.Row(): back_to_input_btn = gr.Button("← Back to Input", variant="secondary") apply_theme_btn = gr.Button("Apply Typography Theme →", variant="primary", size="lg") back_to_input_btn.click( fn=lambda: gr.Walkthrough(selected=0), outputs=walkthrough ) # Update display when entering this step def show_generated_palette(palette_html): return palette_html palette_html_hidden.change( fn=show_generated_palette, inputs=palette_html_hidden, outputs=palette_display ) # Hidden CSS output for theming theme_css_hidden = gr.HTML(visible=False) def apply_theme_and_move(font_data_json): # Convert back to the format expected by apply_theme_css top_hits = [{"corpus_id": item["corpus_id"], "score": item["score"]} for item in font_data_json] theme_css = generator.apply_theme_css(top_hits) return theme_css, gr.Walkthrough(selected=2) apply_theme_btn.click( fn=apply_theme_and_move, inputs=font_data_hidden, outputs=[theme_css_hidden, walkthrough] ) # STEP 3: Experience the Typography with gr.Step("✨ Experience Your Typography", id=2): gr.Markdown(""" ### Step 3: See your fonts in action! Notice how the entire interface has transformed to reflect your chosen aesthetic. """) # Apply CSS when entering this step theme_css_display = gr.HTML() theme_css_hidden.change( fn=lambda css: css, inputs=theme_css_hidden, outputs=theme_css_display ) gr.Markdown(""" **🎉 Your typography theme is now active!** Look around the interface - the headings, buttons, and text inputs now use fonts from your generated palette. **Font Roles:** - **Primary Font**: Used for headings and primary buttons - **Secondary Font**: Used for input fields and body text - **Accent Font**: Used for secondary buttons and highlights """) with gr.Row(): back_to_palette_btn = gr.Button("← Back to Palette", variant="secondary") get_code_btn = gr.Button("Get CSS Code →", variant="primary", size="lg") back_to_palette_btn.click( fn=lambda: gr.Walkthrough(selected=1), outputs=walkthrough ) get_code_btn.click( fn=lambda: gr.Walkthrough(selected=3), outputs=walkthrough ) # STEP 4: Export and Use with gr.Step("💾 Export & Use Your Fonts", id=3): theme_css_display_step4 = gr.HTML() gr.Markdown(""" ### Step 4: Get the code and use your fonts Copy the CSS code below to use your font palette in your own projects. """) css_code_output = gr.Code( language="css", label="Your Font Palette CSS", value="/* Generate a palette first to see CSS code here */", lines=15 ) # Update CSS code when font data changes def update_css_code(font_data_json): if not font_data_json: return "/* Generate a palette first to see CSS code here */" top_hits = [{"corpus_id": item["corpus_id"], "score": item["score"]} for item in font_data_json] return generator.generate_css_code(top_hits) font_data_hidden.change( fn=update_css_code, inputs=font_data_hidden, outputs=css_code_output ) def apply_theme_to_step4(theme_css): return theme_css theme_css_hidden.change( fn=apply_theme_to_step4, inputs=theme_css_hidden, outputs=theme_css_display_step4 ) gr.Markdown(""" **🚀 Next Steps:** 1. Copy the CSS code above 2. Include it in your website's stylesheet 3. Apply the font variables to your HTML elements 4. Enjoy your new typography! """) start_over_btn = gr.Button("🔄 Start Over", variant="secondary", size="lg") def restart(): return "", [], "", "", gr.Walkthrough(selected=0) start_over_btn.click( fn=restart, outputs=[palette_html_hidden, font_data_hidden, theme_css_hidden, theme_css_display, walkthrough] ) # Static CSS for font cards with DARK THEME SUPPORT gr.HTML(""" """) return demo if __name__ == "__main__": # Initialize application components generator = FontMoodGenerator(config=Config(), font_data=FONT_DATA) demo = create_ui(generator) demo.launch()