diff --git a/.gitignore b/.gitignore index 4d29575..6009125 100644 --- a/.gitignore +++ b/.gitignore @@ -13,6 +13,8 @@ # misc .DS_Store +process.env +.env .env.local .env.development.local .env.test.local diff --git a/package-lock.json b/package-lock.json index d1f7ec6..e13dc76 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,9 @@ "react-dom": "^18.1.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" + }, + "devDependencies": { + "dotenv": "^16.0.1" } }, "node_modules/@ampproject/remapping": { @@ -6245,11 +6248,12 @@ } }, "node_modules/dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz", + "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==", + "dev": true, "engines": { - "node": ">=10" + "node": ">=12" } }, "node_modules/dotenv-expand": { @@ -13534,6 +13538,14 @@ } } }, + "node_modules/react-scripts/node_modules/dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==", + "engines": { + "node": ">=10" + } + }, "node_modules/readable-stream": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz", @@ -20680,9 +20692,10 @@ } }, "dotenv": { - "version": "10.0.0", - "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", - "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + "version": "16.0.1", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.1.tgz", + "integrity": "sha512-1K6hR6wtk2FviQ4kEiSjFiH5rpzEVi8WW0x96aztHVMhEspNpc4DVOUTEHtEva5VThQ8IaBX1Pe4gSzpVVUsKQ==", + "dev": true }, "dotenv-expand": { "version": "5.1.0", @@ -25804,6 +25817,13 @@ "webpack-dev-server": "^4.6.0", "webpack-manifest-plugin": "^4.0.2", "workbox-webpack-plugin": "^6.4.1" + }, + "dependencies": { + "dotenv": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz", + "integrity": "sha512-rlBi9d8jpv9Sf1klPjNfFAuWDjKLwTIJJ/VxtoTwIR6hnZxcEOQCZg2oIL3MWBYw5GpUDKOEnND7LXTbIpQ03Q==" + } } }, "readable-stream": { diff --git a/package.json b/package.json index 3f5f344..0fbde9f 100644 --- a/package.json +++ b/package.json @@ -34,5 +34,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "devDependencies": { + "dotenv": "^16.0.1" } } diff --git a/src/App.js b/src/App.js index 3784575..2ffbc75 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,22 @@ -import logo from './logo.svg'; +import ResponseSection from './components/ResponseSection'; import './App.css'; +import { useState } from "react"; function App() { + const [userInput, setUserInput] = useState(''); + return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+

Fun with AI

+ +
+
+ + +
+
+ +
); } diff --git a/src/App.test.js b/src/App.test.js deleted file mode 100644 index 1f03afe..0000000 --- a/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/src/components/ResponseSection.js b/src/components/ResponseSection.js new file mode 100644 index 0000000..414c927 --- /dev/null +++ b/src/components/ResponseSection.js @@ -0,0 +1,65 @@ +import { useState } from "react"; + +export default function ResponseSection({ userInput }) { + let secret = process.env.API_SECRET; + + const [resCount, setResCount] = useState(1); + const [contents, setContents] = useState([ +
+
+

Prompt:

+

User prompt here

+
+ +
+

Response:

+

AI response here

+
+
+ ]); + + const help = () => { + console.log(process.env.API_SECRET); + } + + const addNewResponse = async () => { + let newState = contents; + let newCount = newState.unshift( +
+
+

Prompt:

+

{userInput}

+
+ +
+

Response:

+

.......

+
+
+ ); + + setResCount(newCount); + setContents(newState); + + let data = { prompt: userInput }; + + await fetch("https://api.openai.com/v1/engines/text-curie-001/completions", { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${secret}` + }, + body: JSON.stringify(data) + }).then(x => console.log(x)); + } + + return ( + <> + + +
+ {contents} +
+ + ) +} \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file