Update app.py

app.py

@@ -5,6 +5,8 @@ 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"
@@ -12,7 +14,10 @@ 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",
@@ -208,7 +213,10 @@ FONT_DATA = [
     }
 ]
 
+
 # --- CORE LOGIC ---
+# Encapsulated in a class to manage state (model, embeddings) cleanly.
+
 class FontMoodGenerator:
     """Handles model loading, embedding generation, and font palette creation."""
 
@@ -227,6 +235,7 @@ 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."""
@@ -251,32 +260,12 @@ class FontMoodGenerator:
         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."""
+        """Formats the top font hits into a displayable HTML string."""
         if not top_hits:
             return "<p>Could not generate a font palette. Please try another mood.</p>"
 
-        # Get font imports for the selected fonts
-        font_imports = self._create_persistent_font_imports(top_hits)
-
+        # Sample texts for different font types
         sample_texts = [
             "The Quick Brown Fox Jumps Over The Lazy Dog",
             "Sphinx of black quartz, judge my vow",
@@ -308,72 +297,39 @@ class FontMoodGenerator:
                 </div>
             </div>
             """
-        
-        # Include font imports directly in the HTML with unique ID to prevent conflicts
-        return f"""
-        <style id="palette-fonts">
-            {font_imports}
-        </style>
-        <div class='font-palette-container'>{cards_html}</div>
-        """
-
-    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]
+        return f"<div class='font-palette-container'>{cards_html}</div>"
 
-        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."""
+    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 "/* No fonts generated yet */"
-        
-        font_imports = self._create_persistent_font_imports(top_hits)
-        
-        css_code = f"""/* Generated Font Palette CSS */
-{font_imports}
+            return ""
 
-/* Font Variables */
-:root {{"""
+        imports = []
+        seen_urls = set()
         
-        for i, hit in enumerate(top_hits):
+        for hit in 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 += """
-}
+            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)
 
-/* Usage Examples */
-.heading { font-family: var(--font-1); }
-.body-text { font-family: var(--font-2); }
-.accent { font-family: var(--font-3); }"""
-        
-        return css_code
+        return "\n".join(imports)
 
-    def apply_theme_css(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates CSS to apply fonts to the UI while preserving palette fonts."""
+    def _create_dynamic_theme_css(self, top_hits: list[dict[str, any]]) -> str:
+        """Generates a <style> block to apply fonts to different UI elements."""
         if not top_hits:
             return ""
 
-        font_imports = self._create_persistent_font_imports(top_hits)
+        font_imports = self._create_font_imports_css(top_hits)
         
         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:not(.font-card h3), .gr-button-primary {{ font-family: '{primary_font}', sans-serif !important; }}")
+            css_rules.append(f"h1, h2, 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("'", "\\'")
@@ -385,16 +341,12 @@ class FontMoodGenerator:
 
         css_rules_str = "\n            ".join(css_rules)
 
-        css = f"""<style id="theme-fonts">
+        css = f"""<style>
             {font_imports}
             
             {css_rules_str}
             
-            /* Preserve palette fonts */
-            .font-sample {{ 
-                font-family: inherit !important; 
-            }}
-            
+            /* Custom animations for font changes */
             * {{
                 transition: font-family 0.3s ease-in-out;
             }}
@@ -402,12 +354,71 @@ 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
@@ -425,7 +436,7 @@ def create_ui(generator: FontMoodGenerator):
                 """)
                 
                 mood_input = gr.Textbox(
-                    value="Horror movie poster with scary atmosphere",
+                    value="Elegant wedding invitation with vintage charm",
                     label="Enter Your Mood or Scene",
                     info="Examples: 'Modern tech startup', 'Playful children's book', 'Gothic horror movie'",
                     lines=3
@@ -437,27 +448,22 @@ 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"
+                        "Luxury fashion brand with sophisticated appeal",
+                        "Retro 1950s diner with nostalgic vibes",
                     ],
                     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)
+                    return palette_html, top_hits, gr.Walkthrough(selected=1)
                 
                 generate_btn.click(
                     fn=generate_and_move,
                     inputs=mood_input,
-                    outputs=[palette_html_hidden, font_data_hidden, walkthrough]
+                    outputs=[gr.State(), font_state, walkthrough]
                 )
             
             # STEP 2: Review Generated Fonts
@@ -465,10 +471,21 @@ 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")
@@ -478,51 +495,29 @@ def create_ui(generator: FontMoodGenerator):
                     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)
+                def apply_and_move(top_hits):
+                    theme_css = generator.apply_theme(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]
+                    fn=apply_and_move,
+                    inputs=font_state,
+                    outputs=[dynamic_css_output, 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.
+                    Notice how the entire interface has transformed to reflect your chosen aesthetic. 
+                    The fonts from your palette are now applied throughout the UI.
                 """)
                 
-                # 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.
+                    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.
                     
                     **Font Roles:**
                     - **Primary Font**: Used for headings and primary buttons
@@ -554,20 +549,17 @@ def create_ui(generator: FontMoodGenerator):
                 css_code_output = gr.Code(
                     language="css", 
                     label="Your Font Palette CSS",
-                    value="/* Generate a palette first to see CSS code here */",
+                    value="",
                     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]
+                def generate_css_code(top_hits):
                     return generator.generate_css_code(top_hits)
                 
-                font_data_hidden.change(
-                    fn=update_css_code,
-                    inputs=font_data_hidden,
+                # Generate CSS when entering this step
+                demo.load(
+                    fn=generate_css_code,
+                    inputs=font_state,
                     outputs=css_code_output
                 )
                 
@@ -577,19 +569,22 @@ 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.
                 """)
                 
-                start_over_btn = gr.Button("🔄 Start Over", variant="secondary", size="lg")
-                
+                with gr.Row():
+                    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=[palette_html_hidden, font_data_hidden, theme_css_hidden, theme_css_display, walkthrough]
+                    outputs=[dynamic_css_output, font_state, walkthrough]
                 )
 
-        # Static CSS for font cards (always loaded)
+        # Static CSS for font cards
         gr.HTML("""
             <style>
                 .font-palette-container {
@@ -634,9 +629,30 @@ 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