Add Azure AI Studio API or ChatGPT OpenAI selection + API calls implementation

README.md

@@ -1,15 +1,26 @@
 # GraphGPT
-### Natural Language → Knowledge Graph
+
+## Intro
+**GraphGPT** converts unstructured natural language into a knowledge graph. 
+Pass in the synopsis of your favorite movie, a passage from a confusing Wikipedia page, or transcript from a video to generate a graph visualization of entities and their relationships. 
+
+Successive queries can update the existing state of the graph or create an entirely new structure. For example, updating the current state could involve injecting new information through nodes and edges or changing the color of certain nodes.
+
+The current few-shot prompt guides GPT-3 in accurately understanding the JSON formatting GraphGPT or Azure AI Studio API requires for proper rendering. You can see the entire prompt in `public/prompts/main.prompt`. A major issue at the moment is latency. Due to the nature of OpenAI API calls, it takes up to 20 seconds to receive a response.
+
+
+## How it works?
+
+### Natural Language → Knowledge Graph (demo first version)
 
 ![demo](demo.gif)
 
-*Note: this is a toy project I built out over a weekend. If you want to use knowledge graphs in your project, check out [GPT Index](https://github.com/jerryjliu/gpt_index).*
+### Natural Language → Knowledge Graph (demo version with Azure AI Studio switch)
 
-GraphGPT converts unstructured natural language into a knowledge graph. Pass in the synopsis of your favorite movie, a passage from a confusing Wikipedia page, or transcript from a video to generate a graph visualization of entities and their relationships. 
+![screen-with-azure-switch](screen-with-azure-switch.png)
 
-Successive queries can update the existing state of the graph or create an entirely new structure. For example, updating the current state could involve injecting new information through nodes and edges or changing the color of certain nodes.
+*Note: this is a toy project I built out over a weekend. If you want to use knowledge graphs in your project, check out [GPT Index](https://github.com/jerryjliu/gpt_index).*
 
-The current few-shot prompt guides GPT-3 in accurately understanding the JSON formatting GraphGPT requires for proper rendering. You can see the entire prompt in `public/prompts/main.prompt`. A major issue at the moment is latency. Due to the nature of OpenAI API calls, it takes up to 20 seconds to receive a response.
 
 ## Prompts
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphgpt",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
@@ -36,4 +36,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

public/prompts/stateless.prompt

@@ -4,7 +4,7 @@ If an update is a relationship, provide [ENTITY 1, RELATIONSHIP, ENTITY 2]. The
 
 If an update is related to a color, provide [ENTITY, COLOR]. Color is in hex format.
 
-If an update is related to deleting an entity, provide ["DELETE", ENTITY].
+If an update is related to deleting an entity, provide [DELETE, ENTITY].
 
 Example:
 prompt: Alice is Bob's roommate. Make her node green.

src/App.css

@@ -79,7 +79,7 @@
   margin-bottom: 50px;
 }
 
-.searchBar {
+.searchBar, .apiURI {
   border: 1px solid rgb(0, 0, 0);
   border-radius: 5px;
   box-shadow: 0 0 5px rgb(0 0 0 / 10%);
@@ -150,4 +150,4 @@
 
 .clearButton:hover {
   background-color: rgba(239, 239, 239, 0.8);
-}
+}