Update app.py

app.py

@@ -42,7 +42,7 @@ def generate_glyphs_html(glyphs, cols=5, width=100, height=100):
             </g>
         </svg>
         """
-        html_parts.append(f"<div style='display: flex; flex-direction: column; align-items: center; margin: 10px; text-align: center; background-color: #f8f9fa; border-radius: 8px; padding: 10px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);'><h3 style='margin-bottom: 8px; color: #333;'>{lettre}</h3>{svg_content}</div>")
+        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>'
 
@@ -260,108 +260,52 @@ def respond(message: str, system_message: str, max_tokens: int, temperature: flo
     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('Inter'), 'ui-sans-serif', 'system-ui'],
-    ).set(
-        body_background_fill="#f0f4f8",
-        block_background_fill="white",
-        block_border_width="1px",
-        block_shadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
-        button_primary_background_fill="#3b82f6",
-        button_primary_background_fill_hover="#2563eb",
-        button_primary_text_color="white",
-        slider_color="#3b82f6",
-        input_background_fill="#f9fafb",
-        input_border_color="#d1d5db",
-    )
+    with gr.Blocks(theme=gr.themes.Default()) as demo:
+        gr.Markdown("# TypTopType")
+        gr.Markdown("## Générateur de glyphes à partir de texte")
 
-    with gr.Blocks(theme=theme, title="TypTopType - Générateur de Glyphes Stylé") as demo:
-        gr.Markdown(
-            """
-            # TypTopType ✨
-            ## Créez des glyphes personnalisés à partir de votre texte !
-            Entrez une description, ajustez les paramètres, et générez des glyphes uniques pour vos polices.
-            """,
-            elem_classes="header-markdown"
-        )
-
-        with gr.Row(variant="panel"):
+        with gr.Row():
             with gr.Column(scale=1):
-                gr.Markdown("### Entrée Utilisateur")
-                msg = gr.Textbox(
-                    label="Description du Style de Police",
-                    placeholder="Décrivez le style de vos glyphes (ex: 'une police futuriste avec des courbes fluides')...",
-                    lines=3,
-                    show_label=False,
-                )
-                send_btn = gr.Button("Générer Glyphes", variant="primary", size="lg")
-
-                with gr.Accordion("⚙️ Paramètres Avancés", 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="Prompt Système",
-                        lines=2,
+                        label="Message système"
                     )
                     max_tokens = gr.Slider(
                         minimum=1, maximum=9048, value=9048, step=1, label="Max Tokens"
                     )
                     temperature = gr.Slider(
-                        minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Température (Créativité)"
+                        minimum=0.1, maximum=4.0, value=0.7, step=0.1, label="Temperature"
                     )
                     top_p = gr.Slider(
-                        minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top P (Diversité)"
+                        minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top P"
                     )
                     cols = gr.Slider(
-                        minimum=1, maximum=10, value=5, step=1, label="Nombre de Colonnes"
+                        minimum=1, maximum=10, value=5, step=1, label="Colonnes"
                     )
                     width = gr.Slider(
-                        minimum=50, maximum=200, value=100, step=10, label="Largeur des Glyphes"
+                        minimum=50, maximum=200, value=100, step=10, label="Largeur"
                     )
                     height = gr.Slider(
-                        minimum=50, maximum=200, value=100, step=10, label="Hauteur des Glyphes"
+                        minimum=50, maximum=200, value=100, step=10, label="Hauteur"
                     )
-
-                gr.Markdown("### Exemples Rapides")
-                examples = gr.Examples(
-                    examples=[
-                        "Une police élégante et classique comme Times New Roman",
-                        "Une police futuriste avec des angles vifs et des effets néon",
-                        "Une police manuscrite cursive et fluide",
-                    ],
-                    inputs=[msg],
-                    label=None,
-                )
-
-                with gr.Row():
-                    download_btn = gr.Button("Télécharger SVG (ZIP)", variant="secondary", icon="📁")
-                    otf_export_btn = gr.Button("Exporter en OTF", variant="secondary", icon="📱")
-
+                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("### Aperçu des Glyphes")
-                svg_preview = gr.HTML(label="Aperçu SVG", show_label=False)
-                download_output = gr.File(label="Téléchargements", visible=False)
+                gr.Markdown("## Aperçu")
+                svg_preview = gr.HTML(label="Aperçu SVG")
+                download_output = gr.File(label="Télécharger ZIP")
 
-                gr.Markdown("### Aperçu de la Police")
-                font_preview_text = gr.Textbox(
-                    value="ABCDEFGHIJKLMNOPQRSTUVWXYZ",
-                    label="Testez votre police avec ce texte",
-                    interactive=True,
-                )
-                font_preview = gr.HTML(visible=False)  # We'll add font preview later if possible
-
-        # Custom CSS for enhanced styling
         demo.css = """
-        .header-markdown { text-align: center; margin-bottom: 20px; }
-        .gr-button { min-width: 150px; }
-        .gr-accordion .gr-box { background-color: #ffffff; }
-        .gr-examples { margin-top: 20px; }
-        .gr-html svg { transition: transform 0.2s; }
-        .gr-html svg:hover { transform: scale(1.05); }
+        .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([])
@@ -380,36 +324,33 @@ def create_demo():
                     glyphs_list = glyphs
                     svg_html = generate_glyphs_html(glyphs_list, cols=cols, width=width, height=height)
                 else:
-                    svg_html = "<p style='text-align: center; color: #ef4444;'>Aucun glyphe détecté. Essayez une autre description !</p>"
+                    svg_html = "No glyphs found."
                 yield svg_html, glyphs_list
 
         def download_svg(glyphs, width, height):
             if not glyphs:
-                return gr.Warning("Générez des glyphes d'abord !")
+                return None
             svg_files = generate_svg_files(glyphs, width=width, height=height)
             zip_path = create_zip(svg_files)
             return zip_path
 
         def export_to_otf(glyphs):
             if not glyphs:
-                return gr.Warning("Générez des glyphes d'abord !")
+                return None
             with tempfile.NamedTemporaryFile(delete=False, suffix=".otf") as tmp_file:
                 otf_path = tmp_file.name
             created_path = create_otf_font(glyphs, otf_path)
             if created_path:
                 return created_path
             else:
-                return gr.Warning("Erreur lors de la création du fichier OTF.")
-
-        # Note: Font preview would require loading the OTF in browser, which is complex. Skipping for now.
+                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],
-            show_progress="full"
+            [svg_preview, glyphs_state]
         )
 
         msg.submit(
@@ -417,31 +358,23 @@ def create_demo():
         ).then(
             bot,
             [message_history, system_message, max_tokens, temperature, top_p, cols, width, height],
-            [svg_preview, glyphs_state],
-            show_progress="full"
+            [svg_preview, glyphs_state]
         )
 
         download_btn.click(
             download_svg,
             inputs=[glyphs_state, width, height],
-            outputs=download_output,
-            show_progress="full"
+            outputs=download_output
         )
-
         otf_export_btn.click(
             export_to_otf,
             inputs=[glyphs_state],
-            outputs=download_output,
-            show_progress="full"
+            outputs=download_output
         )
 
-        # Add loading indicator for generation
-        send_btn.click(fn=lambda: gr.Info("Génération en cours... Cela peut prendre un moment."), js="""() => {
-            document.querySelector('.gr-progress').style.display = 'block';
-        }""")
-
-    return demo
+        return demo
 
 demo = create_demo()
+
 if __name__ == "__main__":
     demo.launch()