Update app.py

app.py

@@ -3,68 +3,62 @@ from datasets import load_dataset, Dataset
 from PIL import Image
 import io
 import base64
-import json
-
+import json 
 from graph_visualization import visualize_graph
 
 # Load the dataset
-dataset = load_dataset(
-    "Zaherrr/OOP_KG_Dataset", split='data'#train'
-)
+dataset = load_dataset("Zaherrr/OOP_KG_Dataset", split='data')
 print(f'This is the dataset: {dataset}')
 
-
 def reshape_json_data_to_fit_visualize_graph(graph_data):
-
     nodes = graph_data["nodes"]
     edges = graph_data["edges"]
-
     transformed_nodes = [
         {"id": nodes["id"][idx], "label": nodes["label"][idx]}
         for idx in range(len(nodes["id"]))
     ]
-
     transformed_edges = [
         {"source": edges["source"][idx], "target": edges["target"][idx], "type": "->"}
         for idx in range(len(edges["source"]))
     ]
-
-    # print(f"transformed nodes = {transformed_nodes}")
-
     graph_data = {"nodes": transformed_nodes, "edges": transformed_edges}
-
     return graph_data
 
-
-
 def display_example(index):
     example = dataset[index]
     img = example["image"]
-
+    
     # Prepare the graph data
     graph_data = {"nodes": example["nodes"], "edges": example["edges"]}
-
     transformed_graph_data = reshape_json_data_to_fit_visualize_graph(graph_data)
-
+    
     # Generate the graph visualization
     graph_html = visualize_graph(transformed_graph_data)
-
+    
+    # Wrap the graph HTML in a div with fixed height and scrolling
+    graph_html_with_style = f"""
+    <div style="height: 500px; overflow-y: auto;">
+        {graph_html}
+    </div>
+    """
+    
     # Convert graph_data to a formatted JSON string
     json_data = json.dumps(transformed_graph_data, indent=2)
-
-    return img, graph_html, json_data, transformed_graph_data
-
-
+    
+    return img, graph_html_with_style, json_data, transformed_graph_data
 
 def create_interface():
     with gr.Blocks() as demo:
         gr.Markdown("# Knowledge Graph Visualizer")
-
+        
         with gr.Row():
             index_slider = gr.Slider(
-                minimum=0, maximum=len(dataset) - 1, step=1, label="Example Index"
+                minimum=0,
+                maximum=len(dataset) - 1,
+                step=1,
+                label="Example Index"
             )
-
+        
         with gr.Row():
             image_output = gr.Image(type="pil", label="Image", height=300)
             graph_output = gr.HTML(label="Knowledge Graph")
@@ -76,17 +70,16 @@ def create_interface():
                 placeholder="Text data will appear here",
                 interactive=False,
             )
-            
+        
         index_slider.change(
             fn=display_example,
             inputs=[index_slider],
             outputs=[image_output, graph_output, json_output, text_output],
         )
-
+    
     return demo
 
-
 # Create and launch the interface
 if __name__ == "__main__":
     demo = create_interface()
-    demo.launch()
+    demo.launch()