Data Visualization course design built with `Flask` & `Next.js`

In the age of information explosion, all kinds of news and articles flood into our sight like a tide. Using GPT model can quickly summarize the article, so that we can understand the surface content of the article in a short time, but if we want to deeply understand the details and internal relations of the article, we need other information and data representation, and knowledge graph is the best solution for this need.
In this project, GPT-4o was used to analyze the input text data, identify and extract the key information and entities, and then structure these entities and their relationships into JSON data for further visualization of the knowledge graph.

*1. Input text preprocessing: · Word segmentation and part-of-speech tagging. · Extract key information from the text.

2. Entity identification using GPT-4o: · Guide the model to entity recognition through well-designed Prompts. · The results generated by the model include entities and their categories in the text.

3. Generate structured data: · Structure the identified entities and their relationships into JSON format. · This structured data is used to build and visualize the knowledge graph.

4. Knowledge graph construction and visualization: · Use Cytoscape.js to graphically present entities and their relationships. · Provides an interactive interface where users can visually view entities and their relationships in text.*

ReAct Framework: A framework that combines Reasoning and Acting to improve the decision-making and task execution capabilities of Large language models (LLM). The ReAct framework enables models to dynamically reason, formulate and adjust action plans , and interact with the external environment by generating inference trajectories and task-specific action steps

Agent Workflow involves agents that can autonomously perceive their environment, make decisions, and take actions. These agents can perform various tasks by invoking external tools such as information retrieval, question answering, task planning, etc. The design goal of agents is to enable them to learn and adapt autonomously in complex environments to complete specific tasks.

1. The user enters text data on the front page; 2. The front-end sends user input to the back-end '/update_graph' endpoint through the fetch API; 3. After receiving the request, the back-end uses GPT-4o to process the input data and generate JSON data in the format of knowledge graph; 4. Highlight the entity to correspond to the nodes of the knowledge map and improve the interaction function; 5. The back-end returns the generated knowledge graph data to the front-end; 6. The front-end uses Cytoscape.js to visualize this data and present it to the user on the web page.

Great thanks to yoheinakajima/prettygraph for inspiring !