minor interface updates

app.py

@@ -135,295 +135,7 @@ def extract_and_parse(sentence: str):
         edges_str += "No edges found."
     return edges_str 
 
-demo = gr.Interface(
-    fn=extract_and_parse,
-    inputs=gr.Textbox(label="Abstract or Sentence", lines=4, placeholder="Paste your scientific abstract here..."),
-    outputs=gr.Textbox(label="Extracted Scientific Triples (subject --relation--> object)", lines=8),
-    title="Scientific Relationship Extractor",
-    description="Extracts Scientific Triples (subject, relation, object) triples from scientific text using Mistral-7B-Instruct."
-)
-
-
-# def extract_and_visualize(sentence: str):
-#     # 1) Run extraction & build KG
-#     raw_output = run_mistral_extract(sentence)
-#     parsed = parse_mistral_output(raw_output)
-#     G = build_kg(parsed["triples"])
-
-#     # 2) Build pyvis network
-#     net = Network(height="600px", width="100%", bgcolor="#ffffff", directed=True)
-#     net.toggle_physics(True)
-
-#     # Add nodes and edges (ensure node ids are strings)
-#     for node in G.nodes:
-#         net.add_node(str(node), label=str(node))
-#     for u, v, d in G.edges(data=True):
-#         net.add_edge(str(u), str(v), label=d.get("label", ""))
-
-#     # 3) Save to a temporary HTML file and read it back
-#     with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".html", encoding="utf-8") as tmp:
-#         tmp_path = tmp.name
-#         net.save_graph(tmp_path)
-
-#     with open(tmp_path, "r", encoding="utf-8") as f:
-#         html_content = f.read()
-
-#     # 4) Escape and wrap in iframe using srcdoc so scripts run properly
-#     iframe = (
-#         "<iframe "
-#         "srcdoc='" + html.escape(html_content) + "' "
-#         "style='width:100%;height:650px;border:none;'></iframe>"
-#     )
-
-#     # Optional: include significance text below the iframe
-#     significance = parsed.get("significance", "")
-#     if significance:
-#         # Safe simple HTML for description (escape to avoid injection)
-#         iframe += "<div style='margin-top:8px; font-family:system-ui;'>" \
-#                   "<strong>Significance:</strong><p>" + html.escape(significance) + "</p></div>"
-
-#     return iframe
-
-# def extract_and_visualize(sentence: str):
-#     # 1. Run extraction & parse triples
-#     raw_output = run_mistral_extract(sentence)
-#     parsed = parse_mistral_output(raw_output)
-#     G = build_kg(parsed["triples"])
-
-#     # 2. Build PyVis network
-#     net = Network(height="650px", width="100%", bgcolor="#ffffff", directed=True)
-#     net.toggle_physics(True)
-#     net.set_options("""
-#     var options = {
-#       "nodes": {
-#         "shape": "dot",
-#         "size": 20,
-#         "font": {"size": 18, "face": "arial"},
-#         "borderWidth": 2
-#       },
-#       "edges": {
-#         "arrows": {"to": {"enabled": true, "scaleFactor": 0.8}},
-#         "color": {"inherit": false},
-#         "smooth": false,
-#         "font": {"size": 14, "align": "horizontal"}
-#       },
-#       "physics": {
-#         "forceAtlas2Based": {"gravitationalConstant": -50, "centralGravity": 0.01},
-#         "minVelocity": 0.75,
-#         "solver": "forceAtlas2Based",
-#         "stabilization": {"fit": false}
-#       }
-#     }
-#     """)
-
-#     # Add nodes and edges
-#     for node in G.nodes:
-#         net.add_node(
-#             str(node),
-#             label=str(node),
-#             title=f"Entity: {node}",
-#             color="#0077b6" if G.out_degree(node) > 0 else "#90e0ef"
-#         )
-
-#     for u, v, d in G.edges(data=True):
-#         rel = d.get("label", "")
-#         net.add_edge(str(u), str(v), label=rel, title=f"Relation: {rel}", color="#023e8a")
-
-#     # 3. Save HTML & embed as iframe
-#     with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".html", encoding="utf-8") as tmp:
-#         net.save_graph(tmp.name)
-#         tmp_path = tmp.name
-
-#     with open(tmp_path, "r", encoding="utf-8") as f:
-#         html_content = f.read()
-
-#     iframe_html = f"""
-#     <div style='border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow:hidden;'>
-#         <iframe
-#             srcdoc='{html.escape(html_content)}'
-#             style='width:100%; height:650px; border:none; border-radius:12px;'>
-#         </iframe>
-#     </div>
-#     """
-#     return iframe_html
-
-
-## Pure chatGPT here
-# def extract_and_visualize(sentence: str):
-#     # 1. Run extraction & parse triples
-#     raw_output = run_mistral_extract(sentence)
-#     parsed = parse_mistral_output(raw_output)
-#     G = build_kg(parsed["triples"])
-
-#     # 2. Find the largest connected component
-#     largest_cc = max(nx.connected_components(G.to_undirected()), key=len)
-
-#     # 3. Build PyVis network
-#     net = Network(height="650px", width="100%", bgcolor="#ffffff", directed=True)
-#     net.toggle_physics(True)
-#     net.set_options("""
-#     var options = {
-#       "nodes": {
-#         "shape": "dot",
-#         "size": 20,
-#         "font": {"size": 18, "face": "arial", "color": "#000000"},
-#         "borderWidth": 2
-#       },
-#       "edges": {
-#         "arrows": {"to": {"enabled": true, "scaleFactor": 0.8}},
-#         "color": {"inherit": false},
-#         "smooth": false,
-#         "font": {"size": 14, "align": "horizontal"}
-#       },
-#       "physics": {
-#         "forceAtlas2Based": {"gravitationalConstant": -50, "centralGravity": 0.01},
-#         "minVelocity": 0.75,
-#         "solver": "forceAtlas2Based",
-#         "stabilization": {"fit": false}
-#       }
-#     }
-#     """)
-
-#     # 4. Add nodes
-#     for node in G.nodes:
-#         is_main = node in largest_cc
-#         base_color = "#0077b6" if G.out_degree(node) > 0 else "#90e0ef"
-#         if is_main:
-#             color = base_color
-#             font_color = "#000000"
-#         else:
-#             color = "rgba(0,119,182,0.1)"
-#             font_color = "rgba(0,0,0,0.1)"
-#         net.add_node(
-#             str(node),
-#             label=str(node),
-#             title=f"Entity: {node}",
-#             color=color,
-#             font={"size": 18, "color": font_color},
-#         )
-
-#     # 5. Add edges (relationships)
-#     for u, v, d in G.edges(data=True):
-#         rel = d.get("label", "")
-#         is_main = u in largest_cc and v in largest_cc
-#         if is_main:
-#             edge_color = "rgba(2,62,138,0.6)"  # 60% opacity for main
-#             font_color = "rgba(0,0,0,0.6)"
-#         else:
-#             edge_color = "rgba(2,62,138,0.1)"  # 10% for non-main
-#             font_color = "rgba(0,0,0,0.1)"
-#         net.add_edge(
-#             str(u), str(v),
-#             label=rel,
-#             title=f"Relation: {rel}",
-#             color=edge_color,
-#             font={"color": font_color}
-#         )
-
-#     # 6. Save HTML
-#     with tempfile.NamedTemporaryFile(mode="w", delete=False, suffix=".html", encoding="utf-8") as tmp:
-#         net.save_graph(tmp.name)
-#         tmp_path = tmp.name
-
-#     with open(tmp_path, "r", encoding="utf-8") as f:
-#         html_content = f.read()
-
-#     # 7. Inject JS for dynamic hover behavior
-#     js_script = """
-#     <script type="text/javascript">
-#     const nodeColors = {};
-#     const edgeColors = {};
-#     nodes.forEach((n) => nodeColors[n.id] = n.color);
-#     edges.forEach((e) => edgeColors[e.id] = e.color);
-
-#     let mainComponent = new Set(
-#         nodes.getIds().filter(id => nodeColors[id].includes("0.6") || nodeColors[id] === "#0077b6")
-#     );
-#     let activeNode = null;
-
-#     // ---- Helper functions ----
-#     function setOpacity(targetNodeId, fadeNonConnected = true) {
-#         const connectedNodes = network.getConnectedNodes(targetNodeId);
-#         const connectedEdges = network.getConnectedEdges(targetNodeId);
-
-#         nodes.forEach((n) => {
-#             const connected = n.id === targetNodeId || connectedNodes.includes(n.id);
-#             const color = nodeColors[n.id];
-#             const rgb = color.startsWith("rgba") 
-#                 ? color.match(/rgba?\\(([^)]+)\\)/)[1].split(",").slice(0,3).join(",")
-#                 : `${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)}`;
-#             const newColor = connected ? `rgba(${rgb},1)` : `rgba(${rgb},0.1)`;
-#             const fontColor = connected ? "rgba(0,0,0,1)" : "rgba(0,0,0,0.1)";
-#             nodes.update({id: n.id, color: newColor, font: {color: fontColor}});
-#         });
-
-#         edges.forEach((e) => {
-#             const connected = connectedEdges.includes(e.id);
-#             const color = edgeColors[e.id];
-#             const rgb = color.startsWith("rgba")
-#                 ? color.match(/rgba?\\(([^)]+)\\)/)[1].split(",").slice(0,3).join(",")
-#                 : `${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)}`;
-#             const newColor = connected ? `rgba(${rgb},0.6)` : `rgba(${rgb},0.1)`;
-#             const fontColor = connected ? "rgba(0,0,0,1)" : "rgba(0,0,0,0.1)";
-#             edges.update({id: e.id, color: newColor, font: {color: fontColor}});
-#         });
-#     }
-
-#     function highlightMainComponent() {
-#         nodes.forEach((n) => {
-#             const inMain = mainComponent.has(n.id);
-#             const color = nodeColors[n.id];
-#             const rgb = color.startsWith("rgba") 
-#                 ? color.match(/rgba?\\(([^)]+)\\)/)[1].split(",").slice(0,3).join(",")
-#                 : `${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)}`;
-#             const newColor = inMain ? `rgba(${rgb},1)` : `rgba(${rgb},0.1)`;
-#             const fontColor = inMain ? "rgba(0,0,0,1)" : "rgba(0,0,0,0.1)";
-#             nodes.update({id: n.id, color: newColor, font: {color: fontColor}});
-#         });
-
-#         edges.forEach((e) => {
-#             const n1InMain = mainComponent.has(e.from);
-#             const n2InMain = mainComponent.has(e.to);
-#             const inMain = n1InMain && n2InMain;
-#             const color = edgeColors[e.id];
-#             const rgb = color.startsWith("rgba")
-#                 ? color.match(/rgba?\\(([^)]+)\\)/)[1].split(",").slice(0,3).join(",")
-#                 : `${parseInt(color.slice(1,3),16)},${parseInt(color.slice(3,5),16)},${parseInt(color.slice(5,7),16)}`;
-#             const newColor = inMain ? `rgba(${rgb},0.6)` : `rgba(${rgb},0.1)`;
-#             const fontColor = inMain ? "rgba(0,0,0,0.6)" : "rgba(0,0,0,0.1)";
-#             edges.update({id: e.id, color: newColor, font: {color: fontColor}});
-#         });
-#     }
-
-#     // ---- Event bindings ----
-#     network.on("click", (params) => {
-#         if (params.nodes.length > 0) {
-#             activeNode = params.nodes[0];
-#             setOpacity(activeNode);
-#         } else {
-#             activeNode = null;
-#             highlightMainComponent(); // reset to main view
-#         }
-#     });
-
-#     network.once("stabilizationIterationsDone", () => {
-#         highlightMainComponent(); // initial state
-#     });
-#     </script>
-#     """
-
-#     html_content = html_content.replace("</body>", js_script + "\n</body>")
-
-#     iframe_html = f"""
-#     <div style='border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); overflow:hidden;'>
-#         <iframe
-#             srcdoc='{html.escape(html_content)}'
-#             style='width:100%; height:650px; border:none; border-radius:12px;'>
-#         </iframe>
-#     </div>
-#     """
-
-#     return iframe_html
+# return iframe_html, all the html and JS part is chatGPT magic
 def extract_and_visualize(sentence: str):
     # 1. Extract triples and build graph
     raw_output = run_mistral_extract(sentence)
@@ -526,13 +238,9 @@ def extract_and_visualize(sentence: str):
     """
 
     html_content = html_content.replace("</body>", js_script + "\n</body>")
-
     return f"<iframe srcdoc='{html.escape(html_content)}' style='width:100%; height:650px; border:none; border-radius:12px;'></iframe>"
 
 
-
-
-
 abstract = (
     "Understanding the atomic structure of magnetite–carboxylic acid interfaces is crucial "
     "for tailoring nanocomposites involving this interface. We present a Monte Carlo (MC)-based "
@@ -569,7 +277,7 @@ def preload(preloaded):
     # Returns HTML, empty textbox, preloaded state
     return preloaded_output, "", True
 
-# ---- Interface ----
+# Interface
 with gr.Blocks() as demo:
     gr.Markdown("# Scientific Knowledge Graph Generator")
     with gr.Row():
@@ -610,73 +318,3 @@ with gr.Blocks() as demo:
 
 if __name__ == "__main__":
     demo.launch(share=False)
-
-# # ---- Preload ----
-# CACHE_DIR = "cache"
-# os.makedirs(CACHE_DIR, exist_ok=True)
-# CACHE_PATH = os.path.join(CACHE_DIR, "kg_cache.html")
-
-# def get_preload_output():
-#     if os.path.exists(CACHE_PATH):
-#         with open(CACHE_PATH, "r", encoding="utf-8") as f:
-#             html_output = f.read()
-#         sentence = abstract
-
-#     else:
-#         sentence = abstract
-#         html_output = extract_and_visualize(sentence)
-#         with open(CACHE_PATH, "w", encoding="utf-8") as f:
-#             f.write(html_output)
-#     return html_output, sentence
-
-# def preload(preloaded):
-#     html_output, sentence = get_preload_output()
-#     return html_output, sentence, True
-
-
-# # interface
-# with gr.Blocks() as demo:
-#     gr.Markdown("# Scientific Knowledge Graph Generator")
-#     with gr.Row():
-#         with gr.Column(scale=0.9):
-#             gr.Markdown(
-#                 "A lightweight app that generates scientific knowledge graphs.\n\n"
-#                 "### How it works\n"
-#                 "1. Extracts subject–relation–object (SRO) triples from scientific texts using a [large language model](https://huggingface.co/mistralai/Mistral-7B-Instruct-v0.3).\n"
-#                 "2. Visualizes SRO triples as interactive knowledge graphs.\n"
-#             )
-#             input_text = gr.Textbox(
-#                 label="Text",
-#                 lines=4,
-#                 placeholder="Paste the scientific text here (e.g., abstract)."
-#             )
-#              examples = gr.Examples(
-#                  examples=[abstract],
-#                  inputs=[input_text],
-#                  visible=False,
-#                  )
-#             btn = gr.Button("Submit", variant="primary")
-#             gr.Markdown("Note: Hover your mouse over the node/edge for more details.")
-#         with gr.Column(scale=1.2):
-#             output_html = gr.HTML(label="Knowledge Graph Visualization")
-
-#     preloaded = gr.State(value=False)
-#     demo.load(fn=preload, inputs=preloaded, outputs=[output_html, input_text, preloaded])
-#     btn.click(fn=extract_and_visualize, inputs=input_text, outputs=output_html)
-
-# if __name__ == "__main__":
-    demo.launch(share=False)
-
-
-
-# demo = gr.Interface(
-#     fn=extract_and_visualize,
-#     inputs=gr.Textbox(label="Abstract or Sentence", lines=4, placeholder="Paste your scientific abstract here..."),
-#     outputs=gr.HTML(label="Knowledge Graph Visualization"),
-#     title="Scientific Relationship Extractor (Mistral-7B)",
-#     description="Extracts subject–relation–object triples and visualizes them as an interactive knowledge graph."
-# )
-
-
-# if __name__ == "__main__":
-#     demo.launch()