zoom functionality added

app.py

@@ -15,7 +15,7 @@ def render_dep_chart(doc):
     img.write(svg.encode())
     img.seek(0)
     b64 = base64.b64encode(img.read()).decode()
-    return f"<img id='zoomable' src='data:image/svg+xml;base64,{b64}'/>"
+    return f"<img id='zoomable' class='zoomable-image' src='data:image/svg+xml;base64,{b64}'/>"
 
 def text_analysis(text):
     doc = nlp(text)
@@ -43,12 +43,30 @@ footer {display:none !important}
     --tw-bg-opacity: 1 !important;
     background-color: rgb(229,225,255) !important;
 }
-#zoomable{
-pointer: cursor;
+.zoomable-image {
+    cursor: pointer;
 }
+.zoomed-image {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    z-index: 99999;
+    background: rgba(0,0,0,0.8);
+}
+"""
+
+js = """
+document.querySelectorAll('.zoomable-image').forEach((image) => {
+    image.addEventListener('click', () => {
+        image.classList.toggle('zoomed-image');
+    });
+});
 """
 
-with gr.Blocks(title="Analyze Text | Data Science Dojo", css = css) as demo:
+with gr.Blocks(title="Analyze Text | Data Science Dojo", css = css, js=js) as demo:
     with gr.Row():
       inp = gr.Textbox(placeholder="Enter text to analyze...", label="Input")
     btn = gr.Button("Analyze Text")
@@ -66,4 +84,4 @@ with gr.Blocks(title="Analyze Text | Data Science Dojo", css = css) as demo:
         ["It's the best time to execute the plan."],
     ], fn=text_analysis, inputs=inp, outputs=[table, visual1], cache_examples=True)
     btn.click(fn=text_analysis, inputs=inp, outputs=[table, visual1])
-demo.launch()
+demo.launch()