Update app.py

app.py

@@ -4,31 +4,65 @@ from PIL import Image
 import vtracer
 import tempfile
 
-# Localization dictionary
+# --- 1. Erweitertes Wörterbuch für die komplette Übersetzung ---
 TRANSLATIONS = {
     'en': {
-        'title': 'Convert Image to SVG Vectors',
-        'description': 'Upload an image and customize the conversion parameters as needed.'
+        'title': '# Convert Image to SVG Vectors',
+        'description': 'Upload an image and customize the conversion parameters. Click "Convert" to start.',
+        'lang_label': 'Language',
+        'image_label': 'Upload Image',
+        'advanced_label': 'Advanced Settings',
+        'color_mode_label': 'Color Mode',
+        'hierarchical_label': 'Hierarchical',
+        'mode_label': 'Mode',
+        'filter_speckle_label': 'Filter Speckle',
+        'color_precision_label': 'Color Precision',
+        'layer_difference_label': 'Layer Difference',
+        'corner_threshold_label': 'Corner Threshold',
+        'length_threshold_label': 'Length Threshold',
+        'max_iterations_label': 'Max Iterations',
+        'splice_threshold_label': 'Splice Threshold',
+        'path_precision_label': 'Path Precision',
+        'convert_button': 'Convert',
+        'output_svg_label': 'SVG Output',
+        'download_svg_label': 'Download SVG'
     },
     'de': {
-        'title': 'Bild in SVG-Vektoren umwandeln',
-        'description': 'Laden Sie ein Bild hoch und passen Sie die Konvertierungsparameter nach Bedarf an.'
+        'title': '# Bild in SVG-Vektoren umwandeln',
+        'description': 'Laden Sie ein Bild hoch und passen Sie die Parameter an. Klicken Sie auf "Umwandeln", um zu starten.',
+        'lang_label': 'Sprache',
+        'image_label': 'Bild hochladen',
+        'advanced_label': 'Erweiterte Einstellungen',
+        'color_mode_label': 'Farbmodus',
+        'hierarchical_label': 'Hierarchisch',
+        'mode_label': 'Modus',
+        'filter_speckle_label': 'Flecken filtern',
+        'color_precision_label': 'Farbpräzision',
+        'layer_difference_label': 'Ebenenunterschied',
+        'corner_threshold_label': 'Eckenschwelle',
+        'length_threshold_label': 'Längenschwelle',
+        'max_iterations_label': 'Max. Iterationen',
+        'splice_threshold_label': 'Spleißschwelle',
+        'path_precision_label': 'Pfadpräzision',
+        'convert_button': 'Umwandeln',
+        'output_svg_label': 'SVG-Ausgabe',
+        'download_svg_label': 'SVG herunterladen'
     }
 }
 
-def convert_image(image, color_mode, hierarchical, mode, filter_speckle,
- color_precision, layer_difference, corner_threshold,
- length_threshold, max_iterations, splice_threshold, path_precision, language):
+def convert_image(image, color_mode, hierarchical, mode, filter_speckle, 
+                  color_precision, layer_difference, corner_threshold, 
+                  length_threshold, max_iterations, splice_threshold, path_precision):
     """Converts an image to SVG using vtracer with customizable parameters."""
-    # Convert Gradio image to bytes for vtracer compatibility
+    if image is None:
+        return None, None
+        
     img_byte_array = io.BytesIO()
     image.save(img_byte_array, format='PNG')
     img_bytes = img_byte_array.getvalue()
 
-    # Perform the conversion
     svg_str = vtracer.convert_raw_image_to_svg(
-        img_bytes,
-        img_format='png',
+        image_data=img_bytes,
         colormode=color_mode.lower(),
         hierarchical=hierarchical.lower(),
         mode=mode.lower(),
@@ -42,75 +76,107 @@ def convert_image(image, color_mode, hierarchical, mode, filter_speckle,
         path_precision=int(path_precision)
     )
 
-    # Save the SVG string to a temporary file
-    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.svg')
-    temp_file.write(svg_str.encode('utf-8'))
+    temp_file = tempfile.NamedTemporaryFile(delete=False, suffix='.svg', mode='w', encoding='utf-8')
+    temp_file.write(svg_str)
     temp_file.close()
+    
+    # Simple preview, as full SVG rendering can be complex in gr.HTML
+    preview_html = f"<div style='background-color:#f0f0f0; padding:10px; border-radius:5px;'>SVG successfully generated. Preview:<br><img src='/file={temp_file.name}' width='300'></div>"
 
-    return (
-        gr.HTML(f'<svg viewBox="0 0 {image.width} {image.height}">{svg_str}</svg>'), 
-        temp_file.name
-    )
+    return preview_html, temp_file.name
 
-# Gradio interface
-vector_converter_interface = gr.Blocks()
+# --- 2. Manuelles UI-Layout mit gr.Blocks für volle Kontrolle ---
+with gr.Blocks() as vector_converter_interface:
+    # Initial language is 'en'
+    lang = 'de'
 
-with vector_converter_interface:
     language_dropdown = gr.Dropdown(
-        choices=['en', 'de'], 
-        value='en', 
-        label='Language'
+        choices=['en', 'de'],
+        value=lang,
+        label=TRANSLATIONS[lang]['lang_label'],
+        interactive=True
     )
-
-    # FULL REWRITE START (1/2 allowed)
-    title_component = gr.Markdown(TRANSLATIONS['en']['title'])
-    description_component = gr.Markdown(TRANSLATIONS['en']['description'])
     
+    title = gr.Markdown(value=TRANSLATIONS[lang]['title'])
+    description = gr.Markdown(value=TRANSLATIONS[lang]['description'])
+
     with gr.Row():
-        image_input = gr.Image(type="pil", label="Upload Image")
-    with gr.Row():
-        with gr.Column():
-            color_mode = gr.Radio(choices=["Color", "Binary"], value="Color", label="Color Mode")
-            hierarchical = gr.Radio(choices=["Stacked", "Cutout"], value="Stacked", label="Hierarchical")
-            mode = gr.Radio(choices=["Spline", "Polygon", "None"], value="Spline", label="Mode")
-            filter_speckle = gr.Slider(minimum=1, maximum=10, value=4, step=1, label="Filter Speckle")
-            color_precision = gr.Slider(minimum=1, maximum=8, value=6, step=1, label="Color Precision")
-        with gr.Column():
-            layer_difference = gr.Slider(minimum=1, maximum=32, value=16, step=1, label="Layer Difference")
-            corner_threshold = gr.Slider(minimum=10, maximum=90, value=60, step=1, label="Corner Threshold")
-            length_threshold = gr.Slider(minimum=3.5, maximum=10, value=4.0, step=0.5, label="Length Threshold")
-            max_iterations = gr.Slider(minimum=1, maximum=20, value=10, step=1, label="Max Iterations")
-            splice_threshold = gr.Slider(minimum=10, maximum=90, value=45, step=1, label="Splice Threshold")
-            path_precision = gr.Slider(minimum=1, maximum=10, value=8, step=1, label="Path Precision")
-    
-    convert_btn = gr.Button("Convert")
-    
-    svg_output = gr.HTML(label="SVG Output")
-    file_output = gr.File(label="Download SVG")
-    
-    convert_btn.click(
-        convert_image,
-        inputs=[
-            image_input, color_mode, hierarchical, mode, filter_speckle,
-            color_precision, layer_difference, corner_threshold,
-            length_threshold, max_iterations, splice_threshold, path_precision, language_dropdown
-        ],
-        outputs=[svg_output, file_output]
-    )
-    # FULL REWRITE END
+        with gr.Column(scale=1):
+            image_input = gr.Image(type="pil", label=TRANSLATIONS[lang]['image_label'])
+            
+            with gr.Accordion(TRANSLATIONS[lang]['advanced_label'], open=False):
+                color_mode_input = gr.Radio(choices=["Color", "Binary"], value="Color", label=TRANSLATIONS[lang]['color_mode_label'])
+                hierarchical_input = gr.Radio(choices=["Stacked", "Cutout"], value="Stacked", label=TRANSLATIONS[lang]['hierarchical_label'])
+                mode_input = gr.Radio(choices=["Spline", "Polygon", "None"], value="Spline", label=TRANSLATIONS[lang]['mode_label'])
+                filter_speckle_input = gr.Slider(minimum=1, maximum=10, value=4, step=1, label=TRANSLATIONS[lang]['filter_speckle_label'])
+                color_precision_input = gr.Slider(minimum=1, maximum=8, value=6, step=1, label=TRANSLATIONS[lang]['color_precision_label'])
+                layer_difference_input = gr.Slider(minimum=1, maximum=32, value=16, step=1, label=TRANSLATIONS[lang]['layer_difference_label'])
+                corner_threshold_input = gr.Slider(minimum=10, maximum=90, value=60, step=1, label=TRANSLATIONS[lang]['corner_threshold_label'])
+                length_threshold_input = gr.Slider(minimum=3.5, maximum=10, value=4.0, step=0.5, label=TRANSLATIONS[lang]['length_threshold_label'])
+                max_iterations_input = gr.Slider(minimum=1, maximum=20, value=10, step=1, label=TRANSLATIONS[lang]['max_iterations_label'])
+                splice_threshold_input = gr.Slider(minimum=10, maximum=90, value=45, step=1, label=TRANSLATIONS[lang]['splice_threshold_label'])
+                path_precision_input = gr.Slider(minimum=1, maximum=10, value=8, step=1, label=TRANSLATIONS[lang]['path_precision_label'])
+
+            convert_button = gr.Button(value=TRANSLATIONS[lang]['convert_button'])
+
+        with gr.Column(scale=1):
+            svg_output = gr.HTML(label=TRANSLATIONS[lang]['output_svg_label'])
+            file_output = gr.File(label=TRANSLATIONS[lang]['download_svg_label'])
 
-    # HALF-LINE CHANGE 1/2 (gr.Textbox → gr.Markdown)
+    # --- 3. Die Update-Funktion, die alle UI-Elemente aktualisiert ---
     def update_language(language):
+        t = TRANSLATIONS[language]
         return {
-            title_component: TRANSLATIONS[language]['title'],
-            description_component: TRANSLATIONS[language]['description']
+            language_dropdown: gr.update(label=t['lang_label']),
+            title: gr.update(value=t['title']),
+            description: gr.update(value=t['description']),
+            image_input: gr.update(label=t['image_label']),
+            # Python-seitige Komponenten wie das Accordion müssen so aktualisiert werden
+            gr.Accordion(label=t['advanced_label']): gr.update(),
+            color_mode_input: gr.update(label=t['color_mode_label']),
+            hierarchical_input: gr.update(label=t['hierarchical_label']),
+            mode_input: gr.update(label=t['mode_label']),
+            filter_speckle_input: gr.update(label=t['filter_speckle_label']),
+            color_precision_input: gr.update(label=t['color_precision_label']),
+            layer_difference_input: gr.update(label=t['layer_difference_label']),
+            corner_threshold_input: gr.update(label=t['corner_threshold_label']),
+            length_threshold_input: gr.update(label=t['length_threshold_label']),
+            max_iterations_input: gr.update(label=t['max_iterations_label']),
+            splice_threshold_input: gr.update(label=t['splice_threshold_label']),
+            path_precision_input: gr.update(label=t['path_precision_label']),
+            convert_button: gr.update(value=t['convert_button']),
+            svg_output: gr.update(label=t['output_svg_label']),
+            file_output: gr.update(label=t['download_svg_label']),
         }
 
-    # HALF-LINE CHANGE 2/2 (removed invisible textboxes)
+    # --- 4. Event-Handler verbinden ---
+    all_inputs = [
+        image_input, color_mode_input, hierarchical_input, mode_input, 
+        filter_speckle_input, color_precision_input, layer_difference_input, 
+        corner_threshold_input, length_threshold_input, max_iterations_input, 
+        splice_threshold_input, path_precision_input
+    ]
+    all_outputs = [svg_output, file_output]
+    
+    # Konvertierung starten
+    convert_button.click(
+        fn=convert_image,
+        inputs=all_inputs,
+        outputs=all_outputs
+    )
+    
+    # Sprache ändern
+    ui_components_to_update = [
+        language_dropdown, title, description, image_input, color_mode_input,
+        hierarchical_input, mode_input, filter_speckle_input, color_precision_input,
+        layer_difference_input, corner_threshold_input, length_threshold_input,
+        max_iterations_input, splice_threshold_input, path_precision_input,
+        convert_button, svg_output, file_output
+    ]
     language_dropdown.change(
-        update_language, 
-        inputs=language_dropdown, 
-        outputs=[title_component, description_component]
+        fn=update_language,
+        inputs=language_dropdown,
+        outputs=ui_components_to_update
     )
 
 vector_converter_interface.launch()