Please enter a mood or description.
", "", "" # Generate embeddings for the mood mood_embedding = self.embedding_model.encode(mood_text, prompt_name=self.config.PROMPT_NAME) # Find matching colors and fonts color_hits = util.semantic_search(mood_embedding, self.color_embeddings, top_k=self.config.TOP_K)[0] font_hits = util.semantic_search(mood_embedding, self.font_embeddings, top_k=self.config.TOP_K)[0] # Extract the actual color and font data selected_colors = [self.color_data[hit['corpus_id']] for hit in color_hits] selected_fonts = [self.font_data[hit['corpus_id']] for hit in font_hits] # Store current theme data for publishing self.current_theme_data = { "mood": mood_text, "colors": selected_colors, "fonts": selected_fonts, "color_scores": [hit['score'] for hit in color_hits], "font_scores": [hit['score'] for hit in font_hits] } # Format results for display results_html = self._format_results_as_html(color_hits, font_hits) # Create dynamic CSS for theme application theme_css = self._create_theme_css(selected_colors, selected_fonts) # Create theme name suggestion theme_name = f"mood-{mood_text.lower().replace(' ', '-')[:20]}" return results_html, theme_css, theme_name def _create_theme_css(self, colors: list, fonts: list) -> str: """Create CSS to apply the theme dynamically.""" # Import fonts font_imports = [] seen_urls = set() for font in fonts: if font['google_fonts_url'] not in seen_urls: font_imports.append(f"@import url('{font['google_fonts_url']}');") seen_urls.add(font['google_fonts_url']) # Apply colors and fonts to various elements color1 = colors[0]['hex'] if colors else "#4169E1" color2 = colors[1]['hex'] if len(colors) > 1 else color1 color3 = colors[2]['hex'] if len(colors) > 2 else color2 font1 = fonts[0]['name'] if fonts else "Inter" font2 = fonts[1]['name'] if len(fonts) > 1 else font1 css = f""" """ return css def publish_theme(self, theme_name: str, version: str = "1.0.0") -> str: """Publish the current theme to HuggingFace Hub.""" if not self.current_theme_data: return "No theme data available. Please generate a theme first." if not self.config.HF_TOKEN: return "HuggingFace token not found. Please set HF_TOKEN environment variable." # DEBUG: Print what we're actually working with print("=== DEBUG INFO ===") print(f"Colors: {[(c['name'], c['hex']) for c in self.current_theme_data['colors'][:3]]}") print(f"Fonts: {[f['name'] for f in self.current_theme_data['fonts'][:2]]}") try: # Create theme with more distinct differentiation mood_theme = MoodTheme( mood_colors=self.current_theme_data['colors'][:3], mood_fonts=self.current_theme_data['fonts'][:2], theme_name=theme_name.replace('-', '_').replace(' ', '_') ) # Additional forced differentiation based on first color first_color = self.current_theme_data['colors'][0]['hex'] if first_color in ['#DC143C', '#FF2400', '#8B0000']: # Red family mood_theme.set(button_primary_background_fill="#8B0000") elif first_color in ['#FFD700', '#F7E7CE', '#FFFACD']: # Yellow/Gold family mood_theme.set(button_primary_background_fill="#DAA520") elif first_color in ['#228B22', '#32CD32', '#50C878']: # Green family mood_theme.set(button_primary_background_fill="#006400") elif first_color in ['#4169E1', '#87CEEB', '#0F52BA']: # Blue family mood_theme.set(button_primary_background_fill="#000080") else: mood_theme.set(button_primary_background_fill=first_color) clean_name = theme_name.lower().replace(' ', '-').replace('_', '-') repo_name = f"{clean_name}-{int(time.time())}" mood_theme.push_to_hub( repo_name=repo_name, version=version, hf_token=self.config.HF_TOKEN ) return f"Theme published: {repo_name}\nFirst color: {first_color}\nFirst font: {self.current_theme_data['fonts'][0]['name']}" except Exception as e: return f"Error publishing theme: {str(e)}" def clear_theme(self) -> tuple[str, str, str]: """Clear the current theme.""" self.current_theme_data = None return "", "", "" # --- GRADIO UI --- def create_ui(generator: MoodThemeGenerator): """Creates the Gradio web interface.""" with gr.Blocks(title="Mood Theme Generator") as demo: # Dynamic CSS output dynamic_css_output = gr.HTML() gr.Markdown(""" # Mood Theme Generator Transform your words into a complete design system! Describe any mood, scene, or feeling, and get a matching **color palette** and **font selection** that's automatically applied as a **custom Gradio theme**. **Features:** - AI-powered color palette generation - Semantic font matching - Real-time theme application - One-click theme publishing to HuggingFace Hub """) with gr.Row(): with gr.Column(scale=3): mood_input = gr.Textbox( value="Cozy autumn coffee shop with warm lighting", label="Describe Your Mood", info="Be as descriptive and creative as you like!", lines=2 ) with gr.Column(scale=1): generate_btn = gr.Button("Generate Theme", variant="primary", size="lg") clear_btn = gr.Button("Clear", variant="secondary") # Results display results_output = gr.HTML(label="Generated Theme Elements") # Theme management section with gr.Row(): with gr.Column(scale=2): theme_name_input = gr.Textbox( label="Theme Name", placeholder="my-awesome-theme", info="Name for your theme (will be used for HuggingFace repo)" ) with gr.Column(scale=1): version_input = gr.Textbox( value="1.0.0", label="Version", info="Semantic version" ) with gr.Column(scale=1): publish_btn = gr.Button("Publish Theme", variant="secondary") publish_output = gr.Textbox( label="Publishing Status", interactive=False, lines=3 ) # Examples gr.Examples( examples=[ "Cozy autumn coffee shop with warm lighting and vintage books", "Futuristic cyberpunk city with neon lights and dark atmosphere", "Peaceful zen garden with natural stones and flowing water", "Vibrant music festival with colorful stage lights and energy", "Elegant luxury hotel lobby with marble and gold accents", "Retro 80s arcade with bright colors and pixel art aesthetics", "Minimalist Scandinavian office with clean lines and natural wood", "Romantic Paris café with soft pastels and vintage charm", "Bold modern art gallery with striking contrasts and geometry", "Serene beach sunset with warm oranges and calm blues" ], inputs=[mood_input], outputs=[results_output, dynamic_css_output, theme_name_input], fn=generator.generate_mood_theme, run_on_click=True, label="Try These Examples" ) # Event handlers generate_btn.click( fn=generator.generate_mood_theme, inputs=[mood_input], outputs=[results_output, dynamic_css_output, theme_name_input] ) clear_btn.click( fn=generator.clear_theme, outputs=[results_output, dynamic_css_output, theme_name_input] ) mood_input.submit( fn=generator.generate_mood_theme, inputs=[mood_input], outputs=[results_output, dynamic_css_output, theme_name_input] ) publish_btn.click( fn=generator.publish_theme, inputs=[theme_name_input, version_input], outputs=[publish_output] ) gr.Markdown(""" --- ## How It Works This application uses [**EmbeddingGemma**](https://huggingface.co/google/embeddinggemma-300M) to understand the semantic meaning of your mood description and match it with: 1. **Colors**: A curated palette of colors with rich descriptions 2. **Fonts**: A collection of Google Fonts with personality profiles 3. **Theme Generation**: Automatic creation of a cohesive Gradio theme 4. **Publishing**: One-click publishing to HuggingFace Hub for reuse The magic happens through **semantic similarity search** - your words are converted into mathematical representations (embeddings) that capture meaning, not just keywords. **Theme Application**: The generated theme is applied in real-time using: - Primary color → Headers, primary buttons, accents - Secondary color → Borders, secondary elements - Tertiary color → Backgrounds, subtle highlights - Primary font → Headers, important text - Secondary font → Body text, inputs **Publishing**: Published themes can be reused in any Gradio app with: ```python theme = gr.Theme.from_hub("your-username/your-theme-name") with gr.Blocks(theme=theme) as demo: # Your app here ``` """) return demo if __name__ == "__main__": # Initialize the generator generator = MoodThemeGenerator( config=Config(), color_data=COLOR_DATA, font_data=FONT_DATA ) # Create and launch the UI demo = create_ui(generator) demo.launch()