Create app.py

app.py

@@ -0,0 +1,65 @@
+import gradio as gr
+from jinja2 import Template
+
+def render_mermaid(jinja_text, user_city, property):
+    try:
+        template = Template(jinja_text)
+        rendered_code = template.render(user_city=user_city, property=property)
+        print("DEBUG: Rendered Mermaid Code:\n", rendered_code)
+        mermaid_md = f"```mermaid\n{rendered_code}\n```"
+        return mermaid_md
+    except Exception as e:
+        return f"**Template Error:** {str(e)}"
+
+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 %}"]
+"""
+
+custom_css = """
+.gr-box { padding: 1.5rem; }
+
+.sticky-left {
+    position: sticky;
+    top: 1rem;
+    align-self: flex-start;
+    height: fit-content;
+    z-index: 1;
+}
+
+.scroll-right {
+    max-height: 90vh;
+    overflow-y: auto;
+    padding-right: 1rem;
+}
+"""
+
+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.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)
+            jinja_input = gr.Code(
+                label="✍️ Jinja2 + Mermaid Template",
+                language="html",
+                value=default_template,
+                lines=18
+            )
+
+        # RIGHT SIDE (Scrollable)
+        with gr.Column(scale=1, elem_classes=["scroll-right"]):
+            rendered_md = gr.Markdown(label="📈 Live Mermaid Preview")
+
+    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)
+
+    demo.load(render_mermaid, inputs=inputs, outputs=rendered_md)
+
+demo.launch()