Update app.py

app.py

@@ -1,65 +1,131 @@
 import gradio as gr
 from jinja2 import Template
+import json
 
-def render_mermaid(jinja_text, user_city, property):
+# Render the Mermaid chart with Jinja variables
+def render_mermaid(jinja_text, variables):
     try:
         template = Template(jinja_text)
-        rendered_code = template.render(user_city=user_city, property=property)
-        print("DEBUG: Rendered Mermaid Code:\n", rendered_code)
+        rendered_code = template.render(**variables)
         mermaid_md = f"```mermaid\n{rendered_code}\n```"
         return mermaid_md
     except Exception as e:
         return f"**Template Error:** {str(e)}"
 
+# Add a new variable to the dictionary
+def add_variable(key, value, current_vars):
+    if not key:
+        return current_vars, "**Variable name is required**"
+
+    try:
+        parsed_value = json.loads(value)
+    except json.JSONDecodeError:
+        parsed_value = value
+
+    current_vars[key] = parsed_value
+    return current_vars, ""
+
+# Reset all variables
+def reset_variables():
+    return {}
+
+# Default Jinja + Mermaid template
 default_template = """
 flowchart TD
-    Start["Start"] --> AskCity["{% if user_city %}You're viewing in {{ user_city }}.{% else %}Which city would you like to view in?{% endif %}"]
-    AskCity --> AskProperty["{% if property %}You want to view {{ property }}.{% else %}What property are you interested in?{% endif %}"]
+    Start(["Start"])
+    Start --> Decision{"Is city known?"}
+    Decision -->|Yes| City["You are in {{ user_city }}"]
+    Decision -->|No| AskCity["Please choose a city"]
 """
 
 custom_css = """
 .gr-box { padding: 1.5rem; }
 
-.sticky-left {
-    position: sticky;
-    top: 1rem;
-    align-self: flex-start;
-    height: fit-content;
-    z-index: 1;
+#jinja-code-box {
+    max-height: 400px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 6px;
 }
 
-.scroll-right {
-    max-height: 90vh;
+.markdown-preview {
+    padding: 1rem;
+    max-height: 85vh;
     overflow-y: auto;
-    padding-right: 1rem;
+    white-space: pre-wrap;
+    font-size: 0.95rem;
+    line-height: 1.5;
 }
+.gr-button { margin-right: 0.5rem; }
 """
 
-with gr.Blocks(theme=gr.themes.Base(), css=custom_css) as demo:
-    gr.Markdown("## 🧠 Jinja2 → Mermaid Renderer", elem_id="title")
-    gr.Markdown("Customize the Mermaid flowchart using Jinja2 logic and see a live preview.")
+with gr.Blocks(css=custom_css) as demo:
+    gr.Markdown("## 🧠 Jinja2 → Mermaid Renderer (Dynamic Variables - Interactive)")
 
     with gr.Row():
-        # LEFT SIDE (Sticky)
-        with gr.Column(scale=1, elem_classes=["sticky-left"]):
-            user_city = gr.Textbox(label="🏙️ User City", placeholder="e.g., Liverpool", lines=1)
-            property = gr.Textbox(label="🏢 Property", placeholder="e.g., Moda Living", lines=1)
+        # LEFT COLUMN
+        with gr.Column(scale=7):
             jinja_input = gr.Code(
                 label="✍️ Jinja2 + Mermaid Template",
                 language="html",
                 value=default_template,
-                lines=18
+                lines=18,
+                elem_id="jinja-code-box"
             )
 
-        # RIGHT SIDE (Scrollable)
-        with gr.Column(scale=1, elem_classes=["scroll-right"]):
-            rendered_md = gr.Markdown(label="📈 Live Mermaid Preview")
+            gr.Markdown("### ➕ Add Template Variables")
+            with gr.Row():
+                var_key = gr.Textbox(label="🆔 Variable Name (key)", placeholder="e.g., user_city")
+                var_value = gr.Textbox(label="📦 Value (JSON)", placeholder='e.g., "London", 42, true')
+
+            with gr.Row():
+                add_btn = gr.Button("➕ Add Variable")
+                reset_btn = gr.Button("🔁 Reset Variables")
+
+            error_box = gr.Markdown("", visible=False)
+            rendered_vars = gr.JSON(label="📋 Current Variables")
+            variables_state = gr.State({})  # internal variable dictionary
+
+        # RIGHT COLUMN
+        with gr.Column(scale=5):
+            gr.Markdown("### 📈 Live Mermaid Preview")
+            rendered_md = gr.Markdown(elem_classes="markdown-preview")
+
+    # ADD VARIABLE WORKFLOW
+    add_btn.click(
+        fn=add_variable,
+        inputs=[var_key, var_value, variables_state],
+        outputs=[variables_state, error_box],
+        show_progress=False
+    ).then(
+        fn=lambda x: x,
+        inputs=variables_state,
+        outputs=rendered_vars
+    ).then(
+        fn=render_mermaid,
+        inputs=[jinja_input, variables_state],
+        outputs=rendered_md
+    )
+
+    # RESET BUTTON WORKFLOW
+    reset_btn.click(
+        fn=reset_variables,
+        inputs=[],
+        outputs=variables_state
+    ).then(
+        fn=lambda x: x,
+        inputs=variables_state,
+        outputs=rendered_vars
+    ).then(
+        fn=render_mermaid,
+        inputs=[jinja_input, variables_state],
+        outputs=rendered_md
+    )
 
-    inputs = [jinja_input, user_city, property]
-    jinja_input.change(render_mermaid, inputs=inputs, outputs=rendered_md)
-    user_city.change(render_mermaid, inputs=inputs, outputs=rendered_md)
-    property.change(render_mermaid, inputs=inputs, outputs=rendered_md)
+    # On template change
+    jinja_input.change(render_mermaid, inputs=[jinja_input, variables_state], outputs=rendered_md)
 
-    demo.load(render_mermaid, inputs=inputs, outputs=rendered_md)
+    # On load
+    demo.load(render_mermaid, inputs=[jinja_input, variables_state], outputs=rendered_md)
 
 demo.launch()