Update app.py

app.py

@@ -4,7 +4,7 @@ import os
 from huggingface_hub import login
 from sentence_transformers import SentenceTransformer, util
 
-# --- 1. CONFIGURATION ---
+# --- CONFIGURATION ---
 # Centralized place for all settings and constants.
 
 class Config:
@@ -15,7 +15,7 @@ class Config:
     HF_TOKEN = os.getenv('HF_TOKEN')
 
 
-# --- 2. FONT DATA ---
+# --- FONT DATA ---
 # Comprehensive font dataset with descriptions for mood matching.
 
 FONT_DATA = [
@@ -214,7 +214,7 @@ FONT_DATA = [
 ]
 
 
-# --- 3. CORE LOGIC ---
+# --- CORE LOGIC ---
 # Encapsulated in a class to manage state (model, embeddings) cleanly.
 
 class FontMoodGenerator:
@@ -328,21 +328,20 @@ class FontMoodGenerator:
         
         # Apply different fonts to different elements
         if len(top_hits) >= 1:
-            primary_font = self.font_data[top_hits[0]['corpus_id']]['name']
-            css_rules.append(f"h1, h2, h3, .gr-button-primary {{ font-family: '{primary_font}' !important; }}")
+            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; }}")
         
         if len(top_hits) >= 2:
-            secondary_font = self.font_data[top_hits[1]['corpus_id']]['name']
-            css_rules.append(f".gr-textbox input, .gr-textbox textarea {{ font-family: '{secondary_font}' !important; }}")
+            secondary_font = self.font_data[top_hits[1]['corpus_id']]['name'].replace("'", "\\'")
+            css_rules.append(f".gr-textbox input, .gr-textbox textarea {{ font-family: '{secondary_font}', sans-serif !important; }}")
         
         if len(top_hits) >= 3:
-            tertiary_font = self.font_data[top_hits[2]['corpus_id']]['name']
-            css_rules.append(f".gr-button-secondary {{ font-family: '{tertiary_font}' !important; }}")
+            tertiary_font = self.font_data[top_hits[2]['corpus_id']]['name'].replace("'", "\\'")
+            css_rules.append(f".gr-button-secondary {{ font-family: '{tertiary_font}', sans-serif !important; }}")
 
-        css_rules_str = "\n".join(css_rules)
+        css_rules_str = "\n            ".join(css_rules)
 
-        css = f"""
-        <style>
+        css = f"""<style>
             {font_imports}
             
             {css_rules_str}
@@ -351,8 +350,7 @@ class FontMoodGenerator:
             * {{
                 transition: font-family 0.3s ease-in-out;
             }}
-        </style>
-        """
+        </style>"""
 
         return css
 
@@ -380,7 +378,7 @@ class FontMoodGenerator:
         return "", ""
 
 
-# --- 4. GRADIO UI ---
+# --- GRADIO UI ---
 # Defines and launches the web interface.
 
 def create_ui(generator: FontMoodGenerator):
@@ -509,7 +507,6 @@ def create_ui(generator: FontMoodGenerator):
             4. **Palette Creation**: The fonts with the highest similarity scores are selected and presented to you as a complete typography palette.
             
             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.
-            
         """)
 
     return demo
@@ -519,4 +516,4 @@ if __name__ == "__main__":
     generator = FontMoodGenerator(config=Config(), font_data=FONT_DATA)
     
     demo = create_ui(generator)
-    demo.launch(debug=True)
+    demo.launch()