Update app.py

app.py

@@ -43,7 +43,6 @@ def generate_glyphs_html(glyphs, cols=5, width=100, height=100):
         </svg>
         """
         html_parts.append(f"<div style='display: inline-block; margin: 10px; text-align: center;'><h3>{lettre}</h3>{svg_content}</div>")
-
     grid_style = f"display: grid; grid-template-columns: repeat({cols}, 1fr); gap: 20px;"
     return f'<div style="{grid_style}">{"".join(html_parts)}</div>'
 
@@ -61,98 +60,82 @@ def generate_svg_files(glyphs, width=100, height=100):
     return svg_files
 
 def draw_svg_path(pen, path_string):
-    """
-    Parse SVG path string and draw it using the given pen.
-    Args:
-        pen: The drawing pen
-        path_string (str): SVG path string
-    """
-    # Simple SVG path parser - handles basic commands
-    # This is a simplified version - you might need to extend it for complex paths
     commands = re.findall(r'[MLHVCSQTAZmlhvcsqtaz][^MLHVCSQTAZmlhvcsqtaz]*', path_string)
     current_x, current_y = 0, 0
     for command in commands:
         cmd = command[0]
         coords = re.findall(r'-?\d+(?:\.\d+)?', command[1:])
         coords = [float(c) for c in coords]
-        if cmd == 'M':  # Move to (absolute)
+        if cmd == 'M':
             if len(coords) >= 2:
-                current_x, current_y = coords[0], -coords[1]  # Inverser l'axe Y
+                current_x, current_y = coords[0], -coords[1]
                 pen.moveTo((current_x, current_y))
-        elif cmd == 'm':  # Move to (relative)
+        elif cmd == 'm':
             if len(coords) >= 2:
                 current_x += coords[0]
-                current_y -= coords[1]  # Inverser l'axe Y
+                current_y -= coords[1]
                 pen.moveTo((current_x, current_y))
-        elif cmd == 'L':  # Line to (absolute)
+        elif cmd == 'L':
             for i in range(0, len(coords), 2):
                 if i + 1 < len(coords):
-                    current_x, current_y = coords[i], -coords[i + 1]  # Inverser l'axe Y
+                    current_x, current_y = coords[i], -coords[i + 1]
                     pen.lineTo((current_x, current_y))
-        elif cmd == 'l':  # Line to (relative)
+        elif cmd == 'l':
             for i in range(0, len(coords), 2):
                 if i + 1 < len(coords):
                     current_x += coords[i]
-                    current_y -= coords[i + 1]  # Inverser l'axe Y
+                    current_y -= coords[i + 1]
                     pen.lineTo((current_x, current_y))
-        elif cmd == 'H':  # Horizontal line to (absolute)
+        elif cmd == 'H':
             for x in coords:
                 current_x = x
                 pen.lineTo((current_x, current_y))
-        elif cmd == 'h':  # Horizontal line to (relative)
+        elif cmd == 'h':
             for dx in coords:
                 current_x += dx
                 pen.lineTo((current_x, current_y))
-        elif cmd == 'V':  # Vertical line to (absolute)
+        elif cmd == 'V':
             for y in coords:
-                current_y = -y  # Inverser l'axe Y
+                current_y = -y
                 pen.lineTo((current_x, current_y))
-        elif cmd == 'v':  # Vertical line to (relative)
+        elif cmd == 'v':
             for dy in coords:
-                current_y -= dy  # Inverser l'axe Y
+                current_y -= dy
                 pen.lineTo((current_x, current_y))
-        elif cmd == 'C':  # Cubic bezier curve (absolute)
+        elif cmd == 'C':
             for i in range(0, len(coords), 6):
                 if i + 5 < len(coords):
-                    x1, y1 = coords[i], -coords[i + 1]  # Inverser l'axe Y
-                    x2, y2 = coords[i + 2], -coords[i + 3]  # Inverser l'axe Y
-                    current_x, current_y = coords[i + 4], -coords[i + 5]  # Inverser l'axe Y
+                    x1, y1 = coords[i], -coords[i + 1]
+                    x2, y2 = coords[i + 2], -coords[i + 3]
+                    current_x, current_y = coords[i + 4], -coords[i + 5]
                     pen.curveTo((x1, y1), (x2, y2), (current_x, current_y))
-        elif cmd == 'c':  # Cubic bezier curve (relative)
+        elif cmd == 'c':
             for i in range(0, len(coords), 6):
                 if i + 5 < len(coords):
                     x1 = current_x + coords[i]
-                    y1 = current_y - coords[i + 1]  # Inverser l'axe Y
+                    y1 = current_y - coords[i + 1]
                     x2 = current_x + coords[i + 2]
-                    y2 = current_y - coords[i + 3]  # Inverser l'axe Y
+                    y2 = current_y - coords[i + 3]
                     current_x += coords[i + 4]
-                    current_y -= coords[i + 5]  # Inverser l'axe Y
+                    current_y -= coords[i + 5]
                     pen.curveTo((x1, y1), (x2, y2), (current_x, current_y))
-        elif cmd in ['Z', 'z']:  # Close path
+        elif cmd in ['Z', 'z']:
             pen.closePath()
     pen.endPath()
 
 def create_otf_font(glyphs, output_path="font.otf"):
     glyph_paths = {lettre: path for lettre, path in glyphs}
-
-    # Add default .notdef if not present (simple rectangle)
-    default_notdef_path = "M50 700H450V0H50Z M100 600L400 100 M400 600L100 100"  # Box with X, Y down for SVG
+    default_notdef_path = "M50 700H450V0H50Z M100 600L400 100 M400 600L100 100"
     if '.notdef' not in glyph_paths:
         glyph_paths['.notdef'] = default_notdef_path
-
-    # Prepare glyph order
     glyph_names = list(glyph_paths.keys())
     if glyph_names[0] != '.notdef':
-        glyph_names.insert(0, '.notdef')  # Ensure .notdef is first
-
-    # Prepare Unicode mapping
+        glyph_names.insert(0, '.notdef')
     unicode_map = {}
     for glyph_name in glyph_paths:
         if len(glyph_name) == 1 and glyph_name.isalpha():
             unicode_value = ord(glyph_name.upper())
             unicode_map[unicode_value] = glyph_name
-
-    # Prepare PrivateDict with defaults
     private_dict = PrivateDict()
     private_dict.nominalWidthX = 600
     private_dict.defaultWidthX = 600
@@ -165,20 +148,16 @@ def create_otf_font(glyphs, output_path="font.otf"):
     private_dict.BlueFuzz = 1
     private_dict.StdHW = [100]
     private_dict.StdVW = [100]
-
-    # Create charstrings
     char_strings = {}
     for glyph_name, svg_path in glyph_paths.items():
         try:
-            pen = T2CharStringPen(600, None)  # Width 600, no glyphSet yet
+            pen = T2CharStringPen(600, None)
             draw_svg_path(pen, svg_path)
             charstring = pen.getCharString(private=private_dict)
             char_strings[glyph_name] = charstring
         except Exception as e:
             print(f"Error converting glyph {glyph_name}: {e}")
             traceback.print_exc()
-
-    # Prepare font names
     new_font_name = "Custom Glyph Font"
     family_name = new_font_name
     style_name = "Regular"
@@ -189,20 +168,13 @@ def create_otf_font(glyphs, output_path="font.otf"):
         "styleName": style_name,
         "fullName": full_name,
         "psName": ps_name,
-        # Add more localized if needed
     }
-
-    # Setup FontBuilder
     try:
-        fb = FontBuilder(1000, isTTF=False)  # unitsPerEm=1000, OTF (CFF)
+        fb = FontBuilder(1000, isTTF=False)
         fb.setupGlyphOrder(glyph_names)
         fb.setupCharacterMap(unicode_map)
-
-        # Setup CFF table with privateDicts
         top_dict_data = {"FullName": full_name}
         fb.setupCFF(ps_name, top_dict_data, char_strings, {ps_name: private_dict})
-
-        # Calculate metrics with debug
         advance_widths = {gn: 600 for gn in glyph_names}
         metrics = {}
         max_ascent = 0
@@ -218,10 +190,8 @@ def create_otf_font(glyphs, output_path="font.otf"):
             except Exception as e:
                 print(f"Error calculating bounds for {gn}: {e}")
                 traceback.print_exc()
-                metrics[gn] = (advance_widths[gn], 0)  # Fallback
-
+                metrics[gn] = (advance_widths[gn], 0)
         fb.setupHorizontalMetrics(metrics)
-        # Adjust ascent/descent based on glyphs if possible
         ascent = max(800, max_ascent)
         descent = min(-200, min_descent)
         fb.setupHorizontalHeader(ascent=ascent, descent=descent)
@@ -232,11 +202,8 @@ def create_otf_font(glyphs, output_path="font.otf"):
         print(f"Error building font: {e}")
         traceback.print_exc()
         return None
-
-    # Save the font
     try:
         fb.save(output_path)
-        # Basic validation
         test_font = TTFont(output_path)
         test_font.close()
         return output_path
@@ -259,15 +226,12 @@ def respond(message: str, system_message: str, max_tokens: int, temperature: flo
     if torch.cuda.is_available():
         model = model.to('cuda')
     model_device = next(model.parameters()).device
-
     messages = [{"role": "system", "content": system_message}]
     messages.append({"role": "user", "content": message})
     inputs = tokenizer.apply_chat_template(
         messages, tokenize=True, add_generation_prompt=True, return_tensors="pt",
     ).to(model_device)
-
     streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
-
     do_sample_effective = True
     if temperature == 0.0:
         pass
@@ -286,57 +250,29 @@ def respond(message: str, system_message: str, max_tokens: int, temperature: flo
         del generation_kwargs["temperature"]
     if "top_p" in generation_kwargs:
         del generation_kwargs["top_p"]
-
     thread = Thread(target=model.generate, kwargs=generation_kwargs)
     thread.start()
-
     partial_response = ""
     for new_text in streamer:
         partial_response += new_text
         glyphs = extract_glyphs(partial_response)
         yield partial_response, glyphs
-
     thread.join()
 
 def create_demo():
-    theme = gr.themes.Soft(
-        primary_hue="blue",
-        secondary_hue="gray",
-        neutral_hue="slate",
-        spacing_size="md",
-        radius_size="lg",
-        font=[gr.themes.GoogleFont("Montserrat"), "sans-serif"],
-    )
-
-    with gr.Blocks(theme=theme, css="""
-        .gradio-container { max-width: 1200px; margin: auto; }
-        #preview-html { border: 1px solid var(--border-color-primary); border-radius: var(--radius-lg); padding: 20px; background: white; overflow-y: auto; max-height: 600px; }
-        .glyph-div { box-shadow: 0 2px 4px rgba(0,0,0,0.1); border-radius: var(--radius-md); padding: 10px; background: var(--color-background-secondary); }
-        h1 { text-align: center; margin-bottom: 20px; }
-        .input-textbox { font-size: 16px; }
-        .download-btn { margin-top: 10px; }
-    """) as demo:
-        gr.Markdown("<h1 style='font-family: Montserrat;'>🖋️ TypTopType: AI-Powered Glyph Generator</h1>")
-        gr.Markdown("Describe a font style, and let the AI generate custom SVG glyphs from A to Z. Preview, customize, and export!")
+    with gr.Blocks(theme=gr.themes.Default()) as demo:
+        gr.Markdown("# TypTopType")
+        gr.Markdown("## Générateur de glyphes à partir de texte")
 
-        glyphs_state = gr.State([])
-        message_history = gr.State([])
-
-        with gr.Row(variant="panel"):
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("### Input Your Font Description")
-                msg = gr.Textbox(
-                    label="Describe the font (e.g., 'a bold serif font with elegant curves')",
-                    placeholder="Enter your font style description here...",
-                    lines=3,
-                    elem_classes="input-textbox"
-                )
-                system_message = gr.Textbox(
-                    value="Based on the following text, give me the svgpath of the glyphs from A to Z.",
-                    visible=False
-                )
-
-                with gr.Accordion("Advanced Generation Settings", open=False):
+                msg = gr.Textbox(label="Entrée", placeholder="Tapez votre texte ici...")
+                send_btn = gr.Button("Envoyer", variant="primary", icon="📤")
+                with gr.Accordion("Paramètres avancés", open=False):
+                    system_message = gr.Textbox(
+                        value="Based on the following text, give me the svgpath of the glyphs from A to Z.",
+                        label="Message système"
+                    )
                     max_tokens = gr.Slider(
                         minimum=1, maximum=9048, value=9048, step=1, label="Max Tokens"
                     )
@@ -346,27 +282,34 @@ def create_demo():
                     top_p = gr.Slider(
                         minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top P"
                     )
-
-                with gr.Accordion("Preview Customization", open=False):
                     cols = gr.Slider(
-                        minimum=1, maximum=10, value=5, step=1, label="Columns in Grid"
+                        minimum=1, maximum=10, value=5, step=1, label="Colonnes"
                     )
                     width = gr.Slider(
-                        minimum=50, maximum=200, value=100, step=10, label="Glyph Width"
+                        minimum=50, maximum=200, value=100, step=10, label="Largeur"
                     )
                     height = gr.Slider(
-                        minimum=50, maximum=200, value=100, step=10, label="Glyph Height"
+                        minimum=50, maximum=200, value=100, step=10, label="Hauteur"
                     )
-
-                with gr.Row():
-                    download_btn = gr.Button("Download SVG ZIP", variant="primary", elem_classes="download-btn")
-                    otf_export_btn = gr.Button("Export OTF Font", variant="secondary", elem_classes="download-btn")
-
-                download_output = gr.File(label="Your Exported File", interactive=False)
-
+                download_btn = gr.Button("Télécharger SVG", variant="primary", icon="📁")
+                otf_export_btn = gr.Button("Exporter OTF", variant="primary", icon="📱")
             with gr.Column(scale=3):
-                gr.Markdown("### Glyph Preview")
-                svg_preview = gr.HTML(label="SVG Preview", elem_id="preview-html")
+                gr.Markdown("## Aperçu")
+                svg_preview = gr.HTML(label="Aperçu SVG")
+                download_output = gr.File(label="Télécharger ZIP")
+
+        demo.css = """
+        .gr-box {
+            border-radius: 10px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+        .gr-button {
+            border-radius: 5px;
+        }
+        """
+
+        glyphs_state = gr.State([])
+        message_history = gr.State([])
 
         def user(user_message, history):
             return "", history + [[user_message, None]]
@@ -380,9 +323,8 @@ def create_demo():
                 if glyphs:
                     glyphs_list = glyphs
                     svg_html = generate_glyphs_html(glyphs_list, cols=cols, width=width, height=height)
-                    svg_html = svg_html.replace("<div style='display: inline-block; margin: 10px; text-align: center;'>", "<div class='glyph-div' style='display: inline-block; margin: 10px; text-align: center;'>")
                 else:
-                    svg_html = "<p>No glyphs generated yet. Try a different description!</p>"
+                    svg_html = "No glyphs found."
                 yield svg_html, glyphs_list
 
         def download_svg(glyphs, width, height):
@@ -403,6 +345,14 @@ def create_demo():
             else:
                 return None
 
+        send_btn.click(
+            user, [msg, message_history], [msg, message_history], queue=False
+        ).then(
+            bot,
+            [message_history, system_message, max_tokens, temperature, top_p, cols, width, height],
+            [svg_preview, glyphs_state]
+        )
+
         msg.submit(
             user, [msg, message_history], [msg, message_history], queue=False
         ).then(
@@ -416,7 +366,6 @@ def create_demo():
             inputs=[glyphs_state, width, height],
             outputs=download_output
         )
-
         otf_export_btn.click(
             export_to_otf,
             inputs=[glyphs_state],
@@ -428,4 +377,4 @@ def create_demo():
 demo = create_demo()
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()