Update app.py

app.py

@@ -354,12 +354,39 @@ class FontMoodGenerator:
 
         return css
 
-    def generate_palette_and_theme(self, mood_text: str) -> tuple[str, str]:
-        """
-        Generates a font palette HTML and a dynamic theme CSS string.
-        """
+    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>", ""
+            return "<p>Please enter a mood or a description.</p>", []
 
         mood_embedding = self.embedding_model.encode(
             mood_text,
@@ -370,43 +397,194 @@ class FontMoodGenerator:
         )[0]
 
         palette_html = self._format_palette_as_html(top_hits)
-        theme_css = self._create_dynamic_theme_css(top_hits)
+        return palette_html, top_hits
 
-        return palette_html, theme_css
+    def apply_theme(self, top_hits: list[dict[str, any]]) -> str:
+        """Applies the theme CSS."""
+        return self._create_dynamic_theme_css(top_hits)
 
-    def clear_theme(self) -> tuple[str, str]:
-        return "", ""
+    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 ---
-# Defines and launches the web interface.
+# --- GRADIO UI WITH WALKTHROUGH ---
 
 def create_ui(generator: FontMoodGenerator):
-    """Creates the Gradio web interface."""
+    """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:
-        # This invisible component will hold our dynamic CSS
+        # Dynamic CSS output
         dynamic_css_output = gr.HTML()
-
+        
         gr.Markdown("""
             # 📝 Font Mood Generator
-            Describe a mood, a scene, or a feeling, and get a matching font palette.<br>
-            **The UI fonts will update to match your mood!**
+            Follow the steps below to generate and apply a personalized font palette based on your mood or description.
         """)
 
-        with gr.Row():
-            with gr.Column(scale=4):
+        with gr.Walkthrough(selected=0) as walkthrough:
+            
+            # STEP 1: Input Mood
+            with gr.Step("🎯 Describe Your Mood", id=0):
+                gr.Markdown("""
+                    ### Step 1: Tell us about your mood or vision
+                    Describe the feeling, atmosphere, or aesthetic you're aiming for. 
+                    Be as detailed as you like - the more descriptive, the better the results!
+                """)
+                
                 mood_input = gr.Textbox(
-                    value="Elegant wedding invitation",
+                    value="Elegant wedding invitation with vintage charm",
                     label="Enter Your Mood or Scene",
-                    info="Be as descriptive as you like!"
+                    info="Examples: 'Modern tech startup', 'Playful children's book', 'Gothic horror movie'",
+                    lines=3
+                )
+                
+                gr.Examples(
+                    [
+                        "Elegant wedding invitation with vintage charm",
+                        "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",
+                    ],
+                    inputs=mood_input,
+                )
+                
+                generate_btn = gr.Button("Generate Font Palette →", variant="primary", size="lg")
+                
+                def generate_and_move(mood_text):
+                    palette_html, top_hits = generator.generate_palette(mood_text)
+                    return palette_html, top_hits, gr.Walkthrough(selected=1)
+                
+                generate_btn.click(
+                    fn=generate_and_move,
+                    inputs=mood_input,
+                    outputs=[gr.State(), font_state, walkthrough]
+                )
+            
+            # STEP 2: Review Generated Fonts
+            with gr.Step("🎨 Review Your Font Palette", id=1):
+                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")
+                
+                back_to_input_btn.click(
+                    fn=lambda: gr.Walkthrough(selected=0),
+                    outputs=walkthrough
+                )
+                
+                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_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. 
+                    The fonts from your palette are now applied throughout the UI.
+                """)
+                
+                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.
+                    
+                    **Font Roles:**
+                    - **Primary Font**: Used for headings and primary buttons
+                    - **Secondary Font**: Used for input fields and body text  
+                    - **Accent Font**: Used for secondary buttons and highlights
+                """)
+                
+                with gr.Row():
+                    back_to_palette_btn = gr.Button("← Back to Palette", variant="secondary")
+                    get_code_btn = gr.Button("Get CSS Code →", variant="primary", size="lg")
+                
+                back_to_palette_btn.click(
+                    fn=lambda: gr.Walkthrough(selected=1),
+                    outputs=walkthrough
+                )
+                
+                get_code_btn.click(
+                    fn=lambda: gr.Walkthrough(selected=3),
+                    outputs=walkthrough
+                )
+            
+            # STEP 4: Export and Use
+            with gr.Step("💾 Export & Use Your Fonts", id=3):
+                gr.Markdown("""
+                    ### Step 4: Get the code and use your fonts
+                    Copy the CSS code below to use your font palette in your own projects.
+                """)
+                
+                css_code_output = gr.Code(
+                    language="css", 
+                    label="Your Font Palette CSS",
+                    value="",
+                    lines=15
+                )
+                
+                def generate_css_code(top_hits):
+                    return generator.generate_css_code(top_hits)
+                
+                # Generate CSS when entering this step
+                demo.load(
+                    fn=generate_css_code,
+                    inputs=font_state,
+                    outputs=css_code_output
+                )
+                
+                gr.Markdown("""
+                    **🚀 Next Steps:**
+                    1. Copy the CSS code above
+                    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")
+                    
+                def restart():
+                    return "", [], gr.Walkthrough(selected=0)
+                
+                start_over_btn.click(
+                    fn=restart,
+                    outputs=[dynamic_css_output, font_state, walkthrough]
                 )
-            with gr.Column(scale=1, min_width=150):
-                submit_button = gr.Button("Generate Fonts", variant="primary")
-                clear_button = gr.Button("Clear", variant="secondary")
-
-        palette_output = gr.HTML(label="Your Generated Font Palette")
 
-        # Define CSS for font cards here once
+        # Static CSS for font cards
         gr.HTML("""
             <style>
                 .font-palette-container {
@@ -451,66 +629,33 @@ 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>
         """)
 
-        # Define the function to be called by events
-        event_handler = generator.generate_palette_and_theme
-        outputs_list = [palette_output, dynamic_css_output]
-
-        gr.Examples(
-            [
-                "Elegant wedding invitation with vintage charm",
-                "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",
-                "Academic research paper with scholarly tone",
-                "Surf shop with California beach culture",
-                "Gothic medieval manuscript with ancient feel",
-                "Futuristic sci-fi interface with cyber aesthetics"
-            ],
-            inputs=mood_input,
-            outputs=outputs_list,
-            fn=event_handler,
-            run_on_click=True,
-        )
-
-        submit_button.click(
-            fn=event_handler,
-            inputs=mood_input,
-            outputs=outputs_list,
-        )
-        clear_button.click(
-            fn=generator.clear_theme,
-            outputs=outputs_list,
-        )
-        # Also allow submitting by pressing Enter in the textbox
-        mood_input.submit(
-            fn=event_handler,
-            inputs=mood_input,
-            outputs=outputs_list,
-        )
-
         gr.Markdown("""
             ----
-            ## What is this?
-            This interactive application, the **Font Mood Generator**, transforms your words into a curated typography palette. Simply describe a mood, a scene, or a feeling and the app will generate a set of matching fonts. As a unique touch, the entire user interface dynamically updates its typography to reflect the generated palette, immersing you in your chosen aesthetic.
-             
-            ## How It Works?
-            At its core, this tool is powered by [**EmbeddingGemma**](http://huggingface.co/google/embeddinggemma-300M), a state-of-the-art text embedding model. The process works in a few simple steps:
+            ## About This App
             
-            1. **Text to Vector**: When you enter a description, EmbeddingGemma converts your text into a numerical representation called an **embedding**. This embedding captures the semantic essence, or the "vibe" of your words.
-            2. **Semantic Font Search**: The application has a pre-defined library of fonts, where each font is associated with its own descriptive text and a pre-computed embedding.
-            3. **Finding the Match**: Your input embedding is compared against the entire library of font embeddings to find the closest matches based on a similarity score.
-            4. **Palette Creation**: The fonts with the highest similarity scores are selected and presented to you as a complete typography palette.
+            This **Font Mood Generator** uses the new `gr.Walkthrough` component to create a guided, step-by-step experience for generating typography palettes. 
             
-            The Font Mood Generator demonstrates how embeddings can be used for creative applications in typography and design, going beyond simple text search to understand the emotional and aesthetic qualities of typefaces.
+            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
 
+
 if __name__ == "__main__":
     # Initialize application components
     generator = FontMoodGenerator(config=Config(), font_data=FONT_DATA)