mirror of
https://github.com/varunshenoy/GraphGPT.git
synced 2023-05-24 23:39:42 +03:00
first commit
This commit is contained in:
Varun Shenoy
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
16
README.md
Normal file
16
README.md
Normal file
@@ -0,0 +1,16 @@
|
||||
# GraphGPT
|
||||
### Natural Language → Knowledge Graph
|
||||
|
||||
|
||||
|
||||
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 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.
|
||||
|
||||
## Setup
|
||||
|
||||
1. Run `npm install` to download required dependencies (currently just [react-graph-vis](https://github.com/crubier/react-graph-vis)).
|
||||
2. Enter your OPENAI_API_KEY in `src/App.js`.
|
||||
3. Run `npm run start`. GraphGPT should open up in a new browser tab.
|
||||
29486
package-lock.json
generated
Normal file
29486
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
39
package.json
Normal file
39
package.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "graphgpt",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-graph-vis": "^1.0.7",
|
||||
"react-scripts": "5.0.1",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
43
public/index.html
Normal file
43
public/index.html
Normal file
@@ -0,0 +1,43 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta name="description" content="Infering graphs from textual data." />
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
Only files inside the `public` folder can be referenced from the HTML.
|
||||
|
||||
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||
work correctly both with client-side routing and a non-root public URL.
|
||||
Learn how to configure a non-root public URL by running `npm run build`.
|
||||
-->
|
||||
<title>GraphGPT</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
public/logo192.png
Normal file
BIN
public/logo192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
public/logo512.png
Normal file
BIN
public/logo512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
25
public/manifest.json
Normal file
25
public/manifest.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"short_name": "GraphGPT",
|
||||
"name": "GraphGPT",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.ico",
|
||||
"sizes": "64x64 32x32 24x24 16x16",
|
||||
"type": "image/x-icon"
|
||||
},
|
||||
{
|
||||
"src": "logo192.png",
|
||||
"type": "image/png",
|
||||
"sizes": "192x192"
|
||||
},
|
||||
{
|
||||
"src": "logo512.png",
|
||||
"type": "image/png",
|
||||
"sizes": "512x512"
|
||||
}
|
||||
],
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
36
public/prompts/main.prompt
Normal file
36
public/prompts/main.prompt
Normal file
@@ -0,0 +1,36 @@
|
||||
You are given the current state of a graph and a prompt. Extrapolate as many relationships as you can from the prompt and update the state. Every node has an id, label, and color (in hex). Every edge has a to and from with node ids, and a label. Edges are directed, so the order of the from and to is important.
|
||||
|
||||
Examples:
|
||||
current state:
|
||||
{
|
||||
"counter": 2,
|
||||
"graph": {
|
||||
"nodes": [
|
||||
{ "id": 1, "label": "Bob", "color": "#ffffff" }
|
||||
],
|
||||
"edges": []
|
||||
}
|
||||
}
|
||||
|
||||
prompt: Alice is Bob's roommate. Make her node green.
|
||||
|
||||
new state:
|
||||
{
|
||||
"counter": 2,
|
||||
"graph": {
|
||||
"nodes": [
|
||||
{ "id": 1, "label": "Bob", "color": "#ffffff" },
|
||||
{ "id": 2, "label": "Alice", "color": "#ff7675" }
|
||||
],
|
||||
"edges": [
|
||||
{ "from": 1, "to": 2, "label": "roommate" }},
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
current state:
|
||||
$state
|
||||
|
||||
prompt: $prompt
|
||||
|
||||
new state:
|
||||
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
||||
# https://www.robotstxt.org/robotstxt.html
|
||||
User-agent: *
|
||||
Disallow:
|
||||
130
src/App.css
Normal file
130
src/App.css
Normal file
@@ -0,0 +1,130 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noticia+Text:wght@400;700&display=swap');
|
||||
|
||||
.headerText {
|
||||
font-family: 'Noticia Text';
|
||||
font-weight: 900;
|
||||
font-size: 60px;
|
||||
text-align: center;
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
.subheaderText {
|
||||
font-family: 'Noticia Text';
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
text-align: center;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.container {
|
||||
width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
width: 970px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
width: 1170px;
|
||||
}
|
||||
}
|
||||
|
||||
.graphContainer {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
|
||||
margin: 0 auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
font-family: 'Noticia Text';
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-top: 50px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.searchBar {
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px rgb(0 0 0 / 10%);
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
padding: 0 10px;
|
||||
width: 90%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.generateButton {
|
||||
background-color: rgb(0, 0, 0);
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
color: rgb(255, 255, 255);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.generateButton:hover {
|
||||
background-color: rgb(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
.generateButton:disabled {
|
||||
background-color: rgb(0, 0, 0, 0.5);
|
||||
/* cursor: wait; */
|
||||
}
|
||||
|
||||
.clearButton {
|
||||
background-color: rgb(255, 255, 255);
|
||||
border: 1px solid rgb(0, 0, 0);
|
||||
border-radius: 5px;
|
||||
color: rgb(0, 0, 0);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
height: 50px;
|
||||
outline: none;
|
||||
width: 40%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.clearButton:hover {
|
||||
background-color: rgba(239, 239, 239, 0.8);
|
||||
}
|
||||
116
src/App.js
Normal file
116
src/App.js
Normal file
@@ -0,0 +1,116 @@
|
||||
import './App.css';
|
||||
import Graph from "react-graph-vis";
|
||||
import React, { useState } from "react";
|
||||
|
||||
const OPENAI_API_KEY = "YOUR OPENAI API KEY";
|
||||
|
||||
const DEFAULT_PARAMS = {
|
||||
"model": "text-davinci-003",
|
||||
"temperature": 0.3,
|
||||
"max_tokens": 800,
|
||||
"top_p": 1,
|
||||
"frequency_penalty": 0,
|
||||
"presence_penalty": 0
|
||||
}
|
||||
|
||||
const options = {
|
||||
layout: {
|
||||
hierarchical: false
|
||||
},
|
||||
edges: {
|
||||
color: "#34495e"
|
||||
}
|
||||
};
|
||||
|
||||
function App() {
|
||||
const [state, setState] = useState(
|
||||
{
|
||||
counter: 0,
|
||||
graph: {
|
||||
nodes: [],
|
||||
edges: []
|
||||
}
|
||||
})
|
||||
const { graph } = state;
|
||||
|
||||
const clearState = () => {
|
||||
setState({
|
||||
counter: 0,
|
||||
graph: {
|
||||
nodes: [],
|
||||
edges: []
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const queryPrompt = (prompt) => {
|
||||
fetch('prompts/main.prompt')
|
||||
.then(response => response.text())
|
||||
.then(text => text.replace("$prompt", prompt))
|
||||
.then(text => text.replace("$state", JSON.stringify(state)))
|
||||
.then(prompt => {
|
||||
console.log(prompt)
|
||||
|
||||
const params = { ...DEFAULT_PARAMS, prompt: prompt };
|
||||
|
||||
const requestOptions = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'Authorization': 'Bearer ' + String(OPENAI_API_KEY)
|
||||
},
|
||||
body: JSON.stringify(params)
|
||||
};
|
||||
fetch('https://api.openai.com/v1/completions', requestOptions)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
console.log(data);
|
||||
const text = data.choices[0].text;
|
||||
console.log(text);
|
||||
const new_graph = JSON.parse(text);
|
||||
console.log(new_graph);
|
||||
setState(new_graph, () => {
|
||||
console.log(state);
|
||||
});
|
||||
document.body.style.cursor = 'default';
|
||||
document.getElementsByClassName("generateButton")[0].disabled = false;
|
||||
document.getElementsByClassName("searchBar")[0].value = "";
|
||||
}).catch(error => {
|
||||
console.log(error);
|
||||
document.body.style.cursor = 'default';
|
||||
document.getElementsByClassName("generateButton")[0].disabled = false;
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const createGraph = () => {
|
||||
// document.body.style.cursor = 'wait';
|
||||
|
||||
document.getElementsByClassName("generateButton")[0].disabled = true;
|
||||
const prompt = document.getElementsByClassName("searchBar")[0].value;
|
||||
|
||||
queryPrompt(prompt);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='container'>
|
||||
<h1 className="headerText">GraphGPT 🔎</h1>
|
||||
<p className='subheaderText'>Build complex, directed graphs to add structure to your ideas using natural language. Understand the relationships between people, systems, and maybe solve a mystery.</p>
|
||||
|
||||
<center>
|
||||
<div className='inputContainer'>
|
||||
<input className="searchBar" placeholder="Describe your graph..."></input>
|
||||
<button className="generateButton" onClick={createGraph}>Generate</button>
|
||||
<button className="clearButton" onClick={clearState}>Clear</button>
|
||||
</div>
|
||||
</center>
|
||||
<div className='graphContainer'>
|
||||
<Graph graph={graph} options={options} style={{ height: "640px" }} />
|
||||
</div>
|
||||
<p className='footer'>Pro tip: don't take a screenshot! You can right-click and save the graph as a .png 📸</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
8
src/App.test.js
Normal file
8
src/App.test.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import App from './App';
|
||||
|
||||
test('renders learn react link', () => {
|
||||
render(<App />);
|
||||
const linkElement = screen.getByText(/learn react/i);
|
||||
expect(linkElement).toBeInTheDocument();
|
||||
});
|
||||
9
src/index.css
Normal file
9
src/index.css
Normal file
@@ -0,0 +1,9 @@
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: black;
|
||||
}
|
||||
15
src/index.js
Normal file
15
src/index.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './index.css';
|
||||
import App from './App';
|
||||
import reportWebVitals from './reportWebVitals';
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
<App />
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
// to log results (for example: reportWebVitals(console.log))
|
||||
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
|
||||
reportWebVitals();
|
||||
1
src/logo.svg
Normal file
1
src/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
13
src/reportWebVitals.js
Normal file
13
src/reportWebVitals.js
Normal file
@@ -0,0 +1,13 @@
|
||||
const reportWebVitals = onPerfEntry => {
|
||||
if (onPerfEntry && onPerfEntry instanceof Function) {
|
||||
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
|
||||
getCLS(onPerfEntry);
|
||||
getFID(onPerfEntry);
|
||||
getFCP(onPerfEntry);
|
||||
getLCP(onPerfEntry);
|
||||
getTTFB(onPerfEntry);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default reportWebVitals;
|
||||
5
src/setupTests.js
Normal file
5
src/setupTests.js
Normal file
@@ -0,0 +1,5 @@
|
||||
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||
// allows you to do things like:
|
||||
// expect(element).toHaveTextContent(/react/i)
|
||||
// learn more: https://github.com/testing-library/jest-dom
|
||||
import '@testing-library/jest-dom';
|
||||
Reference in New Issue
Block a user