Update app.py

app.py

@@ -13,7 +13,6 @@ class Config:
     HF_TOKEN = os.getenv('HF_TOKEN')
 
 # --- FONT DATA ---
-
 FONT_DATA = [
     {
         "name": "Playfair Display",
@@ -253,10 +252,13 @@ class FontMoodGenerator:
         return embeddings
 
     def _format_palette_as_html(self, top_hits: list[dict[str, any]]) -> str:
-        """Formats the top font hits into a displayable HTML string."""
+        """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)
+
         sample_texts = [
             "The Quick Brown Fox Jumps Over The Lazy Dog",
             "Sphinx of black quartz, judge my vow",
@@ -288,7 +290,32 @@ class FontMoodGenerator:
                 </div>
             </div>
             """
-        return f"<div class='font-palette-container'>{cards_html}</div>"
+        
+        # Include font imports directly in the HTML
+        return f"""
+        <style>
+            {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."""
@@ -478,9 +505,6 @@ 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]
@@ -490,7 +514,7 @@ def create_ui(generator: FontMoodGenerator):
                 apply_theme_btn.click(
                     fn=apply_theme_and_move,
                     inputs=font_data_hidden,
-                    outputs=[theme_css_hidden, walkthrough]
+                    outputs=[theme_css_display, walkthrough]
                 )
             
             # STEP 3: Experience the Typography
@@ -500,15 +524,6 @@ 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!** 
                     
@@ -576,9 +591,12 @@ def create_ui(generator: FontMoodGenerator):
                 
                 start_over_btn.click(
                     fn=restart,
-                    outputs=[palette_html_hidden, font_data_hidden, theme_css_hidden, walkthrough]
+                    outputs=[palette_html_hidden, font_data_hidden, theme_css_display, walkthrough]
                 )
 
+        # Global theme CSS display that persists across all steps
+        theme_css_display = gr.HTML()
+
         # Static CSS for font cards
         gr.HTML("""
             <style>