import gradio as gr
import base64
#import execjs
# Define the Mermaid code for the flowchart

mm_html="""
<pre class="mermaid">
    graph LR
    A --- B
    B-->C[fa:fa-ban forbidden]
    B-->D(fa:fa-spinner);
</pre>"""

mermaid_code = """graph TD;
    A[Start] --> B[Decision]
    B -- Yes --> C[Option 1]
    B -- No --> D[Option 2]
    C --> E[End]
    D --> E
    E[End] --> F[End]
"""
# Create an ExecJS context
js_c=("""
    let mermaid = require('mermaid');
    mermaid.initialize({startOnLoad:true});
    function renderMermaid(mermaidCode) {
        mermaid.mermaidAPI.render('mermaid', mermaidCode, function(svgCode, bindFunctions) {
            document.getElementById('diagram').innerHTML = svgCode;
        });
    }
""")

#def call_chart(mermaidCode):
def mm(graph=mermaid_code):
    out_html=f'''<div><iframe src="https://omnibus-mermaid-script.static.hf.space/index.html?mermaid={graph}"></iframe></div>'''
    return gr.update(out_html)

"""
graph LR;
    A--> B & C & D;
    B--> A & E;
    C--> A & E;
    D--> A & E;
    E--> B & C & D;
"""




with gr.Blocks() as app:
    inp_text=gr.Textbox(value=mermaid_code)
    btn=gr.Button()
    out_html=gr.HTML()
    btn.click(mm,inp_text,out_html)
    app.load(mm,inp_text,out_html)
app.launch()