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",
@@ -213,10 +208,7 @@ 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."""
 
@@ -235,7 +227,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."""
@@ -260,12 +251,32 @@ 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."""
+        """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>"
 
-        # Sample texts for different font types
+        # Get font imports for the selected fonts
+        font_imports = self._create_persistent_font_imports(top_hits)
+
         sample_texts = [
             "The Quick Brown Fox Jumps Over The Lazy Dog",
             "Sphinx of black quartz, judge my vow",
@@ -297,39 +308,72 @@ class FontMoodGenerator:
                 </div>
             </div>
             """
-        return f"<div class='font-palette-container'>{cards_html}</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>", []
 
-    def _create_font_imports_css(self, top_hits: list[dict[str, any]]) -> str:
-        """Generates CSS imports for the selected fonts."""
+        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 ""
+            return "/* No fonts generated yet */"
+        
+        font_imports = self._create_persistent_font_imports(top_hits)
+        
+        css_code = f"""/* Generated Font Palette CSS */
+{font_imports}
 
-        imports = []
-        seen_urls = set()
+/* Font Variables */
+:root {{"""
         
-        for hit in top_hits:
+        for i, hit in enumerate(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_name = font_info['name']
+            css_code += f"""
+    --font-{i+1}: '{font_name}', {font_info['family']};"""
+        
+        css_code += """
+}
 
-        return "\n".join(imports)
+/* 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 while preserving palette fonts."""
         if not top_hits:
             return ""
 
-        font_imports = self._create_font_imports_css(top_hits)
+        font_imports = self._create_persistent_font_imports(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, .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("'", "\\'")
@@ -341,12 +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}
             
-            /* Custom animations for font changes */
+            /* Preserve palette fonts */
+            .font-sample {{ 
+                font-family: inherit !important; 
+            }}
+            
             * {{
                 transition: font-family 0.3s ease-in-out;
             }}
@@ -354,71 +402,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
@@ -436,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
@@ -448,22 +437,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 +465,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 +478,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 +554,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,90 +577,66 @@ 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, theme_css_display, walkthrough]
                 )
 
-        # Static CSS for font cards
+        # Static CSS for font cards (always loaded)
         gr.HTML("""
             <style>
                 .font-palette-container {
-                    display: flex; flex-direction: column; gap: 15px;
+                    display: flex; flex-direction: column; gap: 8px;
                     align-items: center; width: 100%;
                 }
                 .font-card {
-                    border: 2px solid #e0e0e0; border-radius: 12px;
-                    padding: 20px; width: 90%; max-width: 600px;
+                    border: 2px solid #e0e0e0; border-radius: 8px;
+                    padding: 10px; width: 90%; max-width: 600px;
                     background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-                    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+                    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
                     transition: all 0.3s ease;
                 }
                 .font-card:hover {
-                    transform: translateY(-2px);
-                    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
                 }
                 .font-header {
                     display: flex; justify-content: space-between;
-                    align-items: center; margin-bottom: 15px;
+                    align-items: center; margin-bottom: 8px;
                 }
                 .font-header h3 {
-                    margin: 0; color: #2c3e50; font-size: 1.2em;
+                    margin: 0; color: #2c3e50; font-size: 1.1em;
                 }
                 .font-score {
-                    background: #3498db; color: white; padding: 4px 8px;
-                    border-radius: 12px; font-size: 0.8em; font-weight: bold;
+                    background: #3498db; color: white; padding: 3px 6px;
+                    border-radius: 8px; font-size: 0.75em; font-weight: bold;
                 }
                 .font-sample {
-                    font-size: 24px; line-height: 1.4; margin: 15px 0;
-                    padding: 15px; background: #f8f9fa; border-radius: 8px;
-                    border-left: 4px solid #3498db; color: #2c3e50;
-                    min-height: 60px; display: flex; align-items: center;
+                    font-size: 18px; line-height: 1.2; margin: 8px 0;
+                    padding: 8px; background: #f8f9fa; border-radius: 6px;
+                    border-left: 3px solid #3498db; color: #2c3e50;
+                    min-height: 30px; display: flex; align-items: center;
                 }
                 .font-details {
-                    display: flex; flex-direction: column; gap: 8px;
+                    display: flex; flex-direction: column; gap: 4px;
                 }
                 .font-family {
-                    font-weight: bold; color: #7f8c8d; font-size: 0.9em;
+                    font-weight: bold; color: #7f8c8d; font-size: 0.8em;
                     text-transform: uppercase; letter-spacing: 1px;
                 }
                 .font-description {
-                    color: #5d6d7e; font-size: 0.9em; line-height: 1.4;
-                }
-                
-                /* Walkthrough styling enhancements */
-                .gr-walkthrough {
-                    border-radius: 12px;
-                    overflow: hidden;
+                    color: #5d6d7e; font-size: 0.85em; line-height: 1.3;
                 }
             </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