Update app.py

app.py

@@ -11,25 +11,21 @@ def generate_svg(description):
         model="llama-3.3-70b-versatile",
         messages=[
             {"role": "system", "content": """
-            Create an SVG diagram for {description} with the following specifications:
+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):
 - Text: centered, with title (14px, bold) and details (12px)
 - Color scheme: professional color choices
 - Consistent stroke width: 2px
-
 - Avoid line crossings in connections
-
 6. 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. 
 Make sure it's just the code only
-Generate the correct code, ensure it is free from construct error and this kind of error: Unescaped '<' not allowed in attributes values"""},
+Generate the correct code, ensure it is free from construct error and this kind of error: Unescaped '<' not allowed in attributes values
+"""}, 
             {"role": "user", "content": description}
         ],
         temperature=0.7,
@@ -40,47 +36,56 @@ Generate the correct code, ensure it is free from construct error and this kind
     )
     
     svg_code = completion.choices[0].message.content.strip()
-    # Wrap the generated code with the complete SVG tag and apply the dynamic viewBox
     full_svg_code = f"<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1000 400'>{svg_code}</svg>"
     
     # Save the SVG code to a file for download
     with open("diagram.svg", "w") as f:
         f.write(full_svg_code)
     
-    return full_svg_code, full_svg_code, "diagram.svg"
+    # Return the HTML display, download file, 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):
     # Save the modified SVG code to the file
     with open("diagram.svg", "w") as f:
         f.write(modified_svg_code)
-    return modified_svg_code, modified_svg_code, "diagram.svg"
+    return modified_svg_code, "diagram.svg"
 
 with gr.Blocks() as demo:
     gr.Markdown("# Miru - Diagram Viewer")
-    gr.Markdown("Generate a diagram by describing it, then edit the SVG code if needed and click **Update Diagram** to refresh the display and download.")
+    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.")
 
-    with gr.Row():
-        description_input = gr.Textbox(label="Describe your diagram or animation", placeholder="Enter a description...")
-        generate_button = gr.Button("Generate Diagram")
-    
-    with gr.Row():
-        svg_output = gr.HTML(label="Generated SVG", elem_id="svg-container")
-        download_svg_output = gr.File(label="Download SVG")
-    
-    svg_code_output = gr.Textbox(label="SVG Code (editable)", lines=10, interactive=True)
-
-    update_button = gr.Button("Update Diagram")
+    # State to store the generated SVG code for editing in Tab 2
+    svg_state = gr.State()
 
-    generate_button.click(
-        fn=generate_svg, 
-        inputs=description_input, 
-        outputs=[svg_output, svg_code_output, download_svg_output]
-    )
-    
-    update_button.click(
-        fn=update_svg, 
-        inputs=svg_code_output, 
-        outputs=[svg_output, svg_code_output, download_svg_output]
-    )
+    with gr.Tabs():
+        with gr.TabItem("Generate Diagram"):
+            description_input = gr.Textbox(label="Describe your diagram or animation",
+                                           placeholder="Enter a description...",
+                                           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.
+            description_input.submit(fn=generate_svg,
+                                     inputs=description_input,
+                                     outputs=[svg_output, download_svg_output, svg_state])
+        
+        with gr.TabItem("Update Diagram"):
+            gr.Markdown("Edit the SVG code below and click **Update Diagram** to refresh the display and download file.")
+            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_download_svg_output = gr.File(label="Download SVG")
+            
+            # Load the generated SVG code from state into the editable textbox
+            load_button.click(lambda code: code, inputs=svg_state, outputs=modified_svg_input)
+            # Update the diagram when the update button is clicked
+            update_button.click(fn=update_svg,
+                                inputs=modified_svg_input,
+                                outputs=[updated_svg_output, updated_download_svg_output])
 
-demo.launch()
+demo.launch()