Update app.py

app.py

@@ -251,13 +251,31 @@ 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."""
         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_font_imports_css(top_hits)
+        font_imports = self._create_persistent_font_imports(top_hits)
 
         sample_texts = [
             "The Quick Brown Fox Jumps Over The Lazy Dog",
@@ -291,32 +309,14 @@ class FontMoodGenerator:
             </div>
             """
         
-        # Include font imports directly in the HTML
+        # Include font imports directly in the HTML with unique ID to prevent conflicts
         return f"""
-        <style>
+        <style id="palette-fonts">
             {font_imports}
         </style>
         <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 ""
-
-        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 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():
@@ -338,18 +338,7 @@ class FontMoodGenerator:
         if not top_hits:
             return "/* No fonts generated yet */"
         
-        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)
+        font_imports = self._create_persistent_font_imports(top_hits)
         
         css_code = f"""/* Generated Font Palette CSS */
 {font_imports}
@@ -374,28 +363,17 @@ class FontMoodGenerator:
         return css_code
 
     def apply_theme_css(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates CSS to apply fonts to the UI."""
+        """Generates CSS to apply fonts to the UI while preserving palette fonts."""
         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)
-
-        font_imports = "\n".join(imports)
+        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, .gr-button-primary {{ font-family: '{primary_font}', sans-serif !important; }}")
+            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("'", "\\'")
@@ -407,11 +385,16 @@ class FontMoodGenerator:
 
         css_rules_str = "\n            ".join(css_rules)
 
-        css = f"""<style>
+        css = f"""<style id="theme-fonts">
             {font_imports}
             
             {css_rules_str}
             
+            /* Preserve palette fonts */
+            .font-sample {{ 
+                font-family: inherit !important; 
+            }}
+            
             * {{
                 transition: font-family 0.3s ease-in-out;
             }}
@@ -442,7 +425,7 @@ def create_ui(generator: FontMoodGenerator):
                 """)
                 
                 mood_input = gr.Textbox(
-                    value="Elegant wedding invitation with vintage charm",
+                    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
@@ -505,6 +488,9 @@ def create_ui(generator: FontMoodGenerator):
                     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]
@@ -514,7 +500,7 @@ def create_ui(generator: FontMoodGenerator):
                 apply_theme_btn.click(
                     fn=apply_theme_and_move,
                     inputs=font_data_hidden,
-                    outputs=[theme_css_display, walkthrough]
+                    outputs=[theme_css_hidden, walkthrough]
                 )
             
             # STEP 3: Experience the Typography
@@ -524,6 +510,15 @@ def create_ui(generator: FontMoodGenerator):
                     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!** 
                     
@@ -587,17 +582,14 @@ def create_ui(generator: FontMoodGenerator):
                 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_display, walkthrough]
+                    outputs=[palette_html_hidden, font_data_hidden, theme_css_hidden, theme_css_display, walkthrough]
                 )
 
-        # Global theme CSS display that persists across all steps
-        theme_css_display = gr.HTML()
-
-        # Static CSS for font cards
+        # Static CSS for font cards (always loaded)
         gr.HTML("""
             <style>
                 .font-palette-container {