Update app.py

app.py

@@ -14,12 +14,14 @@ def generate_svg(description):
 Create an SVG diagram for {description} with the following specifications:
 1. Canvas Setup:
 - Use viewBox="0 0 800 600"
-3. Visual Style Requirements (apply when needed):
+2. Visual Style Requirements (apply when needed):
 - Text: centered, with title (14px, bold) and details (12px)
+- Ensure consistent spacing
+- Ensure proper use of arrow only when needed
 - Color scheme: professional color choices
 - Consistent stroke width: 2px
 - Avoid line crossings in connections
-6. Additional Requirements:
+3. Additional Requirements:
 Put the name of the Diagram in bold on top
 - Multiple Color coding
 Please generate a complete SVG code that can be directly used. Ensure the code follows SVG best practices and includes proper spacing and formatting for readability. 
@@ -42,7 +44,7 @@ Generate the correct code, ensure it is free from construct error and this kind
     with open("diagram.svg", "w") as f:
         f.write(full_svg_code)
     
-    # Return the HTML display, download file, and store the full code in state for editing in Tab 2.
+    # Return: HTML for display, file path, and store the full code in state for editing in Tab 2.
     return full_svg_code, "diagram.svg", full_svg_code
 
 def update_svg(modified_svg_code):
@@ -51,7 +53,9 @@ def update_svg(modified_svg_code):
         f.write(modified_svg_code)
     return modified_svg_code, "diagram.svg"
 
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+
+""") as demo:
     gr.Markdown("# Miru - Diagram Viewer")
     gr.Markdown("Use the **Generate Diagram** tab to create a diagram by describing it. In the **Update Diagram** tab, you can edit the generated SVG code and update the diagram.")
 
@@ -65,10 +69,9 @@ with gr.Blocks() as demo:
                                            interactive=True)
             # Generated SVG displayed in a larger HTML area
             svg_output = gr.HTML(label="Generated SVG", elem_id="svg-container", value="")
-            svg_output.style(height="600px")
             download_svg_output = gr.File(label="Download SVG")
             
-            # When the user presses Enter, generate_svg is called and updates the outputs and state.
+            # Submit on pressing Enter in the description box
             description_input.submit(fn=generate_svg,
                                      inputs=description_input,
                                      outputs=[svg_output, download_svg_output, svg_state])
@@ -78,7 +81,7 @@ with gr.Blocks() as demo:
             modified_svg_input = gr.Textbox(label="Edit SVG Code", lines=10, interactive=True)
             load_button = gr.Button("Load Generated Code")
             update_button = gr.Button("Update Diagram")
-            updated_svg_output = gr.HTML(label="Updated SVG", elem_id="svg-container", value="")
+            updated_svg_output = gr.HTML(label="Updated SVG", elem_id="updated-svg-container", value="")
             updated_download_svg_output = gr.File(label="Download SVG")
             
             # Load the generated SVG code from state into the editable textbox
@@ -88,4 +91,4 @@ with gr.Blocks() as demo:
                                 inputs=modified_svg_input,
                                 outputs=[updated_svg_output, updated_download_svg_output])
 
-demo.launch()
+demo.launch()