Update app.py

app.py

@@ -5,8 +5,6 @@ from huggingface_hub import login
 from sentence_transformers import SentenceTransformer, util
 
 # --- CONFIGURATION ---
-# Centralized place for all settings and constants.
-
 class Config:
     """Configuration settings for the application."""
     EMBEDDING_MODEL_ID = "google/embeddinggemma-300M"
@@ -14,10 +12,7 @@ class Config:
     TOP_K = 5
     HF_TOKEN = os.getenv('HF_TOKEN')
 
-
 # --- FONT DATA ---
-# Comprehensive font dataset with descriptions for mood matching.
-
 FONT_DATA = [
     {
         "name": "Playfair Display",
@@ -79,144 +74,9 @@ FONT_DATA = [
         "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 ---
-# Encapsulated in a class to manage state (model, embeddings) cleanly.
-
 class FontMoodGenerator:
     """Handles model loading, embedding generation, and font palette creation."""
 
@@ -235,7 +95,6 @@ class FontMoodGenerator:
             login(token=self.config.HF_TOKEN)
         else:
             print("HF_TOKEN not found. Proceeding without login.")
-            print("Note: This may fail if the model is gated.")
 
     def _load_model(self) -> SentenceTransformer:
         """Loads the Sentence Transformer model."""
@@ -265,7 +124,6 @@ class FontMoodGenerator:
         if not top_hits:
             return "<p>Could not generate a font palette. Please try another mood.</p>"
 
-        # Sample texts for different font types
         sample_texts = [
             "The Quick Brown Fox Jumps Over The Lazy Dog",
             "Sphinx of black quartz, judge my vow",
@@ -299,11 +157,27 @@ class FontMoodGenerator:
             """
         return f"<div class='font-palette-container'>{cards_html}</div>"
 
-    def _create_font_imports_css(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates CSS imports for the selected fonts."""
-        if not top_hits:
-            return ""
+    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 "<p>Please enter a mood or a description.</p>", []
+
+        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 */"
+        
         imports = []
         seen_urls = set()
         
@@ -315,18 +189,50 @@ class FontMoodGenerator:
                 imports.append(f"@import url('{google_fonts_url}');")
                 seen_urls.add(google_fonts_url)
 
-        return "\n".join(imports)
+        font_imports = "\n".join(imports)
+        
+        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 _create_dynamic_theme_css(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates a <style> block to apply fonts to different UI elements."""
+    def apply_theme_css(self, top_hits: list[dict[str, any]]) -> str:
+        """Generates CSS to apply fonts to the UI."""
         if not top_hits:
             return ""
 
-        font_imports = self._create_font_imports_css(top_hits)
+        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)
+
+        font_imports = "\n".join(imports)
         
         css_rules = []
         
-        # Apply different fonts to different elements
         if len(top_hits) >= 1:
             primary_font = self.font_data[top_hits[0]['corpus_id']]['name'].replace("'", "\\'")
             css_rules.append(f"h1, h2, h3, .gr-button-primary {{ font-family: '{primary_font}', sans-serif !important; }}")
@@ -346,7 +252,6 @@ class FontMoodGenerator:
             
             {css_rules_str}
             
-            /* Custom animations for font changes */
             * {{
                 transition: font-family 0.3s ease-in-out;
             }}
@@ -354,71 +259,12 @@ class FontMoodGenerator:
 
         return css
 
-    def _create_css_code_output(self, top_hits: list[dict[str, any]]) -> str:
-        """Creates exportable CSS code for users."""
-        if not top_hits:
-            return ""
-        
-        font_imports = self._create_font_imports_css(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 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 "<p>Please enter a mood or a description.</p>", []
-
-        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 apply_theme(self, top_hits: list[dict[str, any]]) -> str:
-        """Applies the theme CSS."""
-        return self._create_dynamic_theme_css(top_hits)
-
-    def generate_css_code(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates exportable CSS code."""
-        return self._create_css_code_output(top_hits)
-
 
 # --- GRADIO UI WITH WALKTHROUGH ---
-
 def create_ui(generator: FontMoodGenerator):
     """Creates the Gradio web interface with Walkthrough."""
     
-    # Shared state to store generated fonts across steps
-    font_state = gr.State([])
-    
     with gr.Blocks(theme="ocean") as demo:
-        # Dynamic CSS output
-        dynamic_css_output = gr.HTML()
         
         gr.Markdown("""
             # 📝 Font Mood Generator
@@ -448,22 +294,27 @@ def create_ui(generator: FontMoodGenerator):
                         "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",
+                        "Luxury fashion brand with sophisticated appeal"
                     ],
                     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)
-                    return palette_html, top_hits, gr.Walkthrough(selected=1)
+                    # 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=[gr.State(), font_state, walkthrough]
+                    outputs=[palette_html_hidden, font_data_hidden, walkthrough]
                 )
             
             # STEP 2: Review Generated Fonts
@@ -471,21 +322,10 @@ def create_ui(generator: FontMoodGenerator):
                 gr.Markdown("""
                     ### Step 2: Review your generated fonts
                     Here are the fonts that best match your mood, ranked by similarity score.
-                    Each font is scored based on how well it captures your described aesthetic.
                 """)
                 
                 palette_display = gr.HTML()
                 
-                def show_palette(palette_html):
-                    return palette_html
-                
-                # Update palette when entering this step
-                demo.load(
-                    fn=show_palette,
-                    inputs=gr.State(),
-                    outputs=palette_display
-                )
-                
                 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")
@@ -495,29 +335,51 @@ def create_ui(generator: FontMoodGenerator):
                     outputs=walkthrough
                 )
                 
-                def apply_and_move(top_hits):
-                    theme_css = generator.apply_theme(top_hits)
+                # 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_and_move,
-                    inputs=font_state,
-                    outputs=[dynamic_css_output, walkthrough]
+                    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. 
-                    The fonts from your palette are now applied throughout the UI.
+                    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. 
-                    This gives you a real preview of how these fonts work together in a design context.
+                    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
@@ -549,17 +411,20 @@ def create_ui(generator: FontMoodGenerator):
                 css_code_output = gr.Code(
                     language="css", 
                     label="Your Font Palette CSS",
-                    value="",
+                    value="/* Generate a palette first to see CSS code here */",
                     lines=15
                 )
                 
-                def generate_css_code(top_hits):
+                # 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)
                 
-                # Generate CSS when entering this step
-                demo.load(
-                    fn=generate_css_code,
-                    inputs=font_state,
+                font_data_hidden.change(
+                    fn=update_css_code,
+                    inputs=font_data_hidden,
                     outputs=css_code_output
                 )
                 
@@ -569,19 +434,16 @@ def create_ui(generator: FontMoodGenerator):
                     2. Include it in your website's stylesheet
                     3. Apply the font variables to your HTML elements
                     4. Enjoy your new typography!
-                    
-                    **💡 Pro Tip:** You can also use individual Google Fonts links if you prefer to load fonts separately.
                 """)
                 
-                with gr.Row():
-                    start_over_btn = gr.Button("🔄 Start Over", variant="secondary", size="lg")
-                    
+                start_over_btn = gr.Button("🔄 Start Over", variant="secondary", size="lg")
+                
                 def restart():
-                    return "", [], gr.Walkthrough(selected=0)
+                    return "", [], "", gr.Walkthrough(selected=0)
                 
                 start_over_btn.click(
                     fn=restart,
-                    outputs=[dynamic_css_output, font_state, walkthrough]
+                    outputs=[palette_html_hidden, font_data_hidden, theme_css_hidden, walkthrough]
                 )
 
         # Static CSS for font cards
@@ -629,30 +491,9 @@ def create_ui(generator: FontMoodGenerator):
                 .font-description {
                     color: #5d6d7e; font-size: 0.9em; line-height: 1.4;
                 }
-                
-                /* Walkthrough styling enhancements */
-                .gr-walkthrough {
-                    border-radius: 12px;
-                    overflow: hidden;
-                }
             </style>
         """)
 
-        gr.Markdown("""
-            ----
-            ## About This App
-            
-            This **Font Mood Generator** uses the new `gr.Walkthrough` component to create a guided, step-by-step experience for generating typography palettes. 
-            
-            The app is powered by [**EmbeddingGemma**](http://huggingface.co/google/embeddinggemma-300M), Google's text embedding model that understands the semantic meaning and emotional qualities of your descriptions to find matching fonts.
-            
-            **🆕 Walkthrough Features:**
-            - **Guided Experience**: Step-by-step workflow for better user experience
-            - **Progressive Disclosure**: Information and controls revealed when needed
-            - **Visual Progress**: Clear indication of current step and progress
-            - **Interactive Navigation**: Ability to go back and forth between steps
-        """)
-
     return demo