├── .env.example
├── public
    ├── robots.txt
    ├── avatar2.png
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── openai.png
    ├── openai-dark.png
    ├── openai-light.png
    ├── openai-avatar.png
    ├── manifest.json
    └── index.html
├── postcss.config.js
├── src
    ├── fonts
    │   └── charter_regular-webfont.woff
    ├── components
    │   ├── Layouts
    │   │   ├── main.layouts.js
    │   │   ├── navbar.layouts.js
    │   │   └── sidebar.layouts.js
    │   ├── Dall-E
    │   │   ├── main.dalle.js
    │   │   └── image.dalle.js
    │   ├── ChatGPT
    │   │   ├── main.chatgpt.js
    │   │   └── completion.chatgpt.js
    │   ├── Home
    │   │   └── main.home.js
    │   ├── Utilities
    │   │   ├── octocat.js
    │   │   ├── information.js
    │   │   └── modals.js
    │   ├── Demo
    │   │   └── main.demo.js
    │   └── FAQ
    │   │   └── main.faq.js
    ├── setupTests.js
    ├── App.test.js
    ├── reportWebVitals.js
    ├── index.js
    ├── App.css
    ├── example.js
    ├── App.js
    ├── logo.svg
    └── index.css
├── tailwind.config.js
├── .gitignore
├── package.json
└── README.md


/.env.example:
--------------------------------------------------------------------------------
1 | REACT_APP_API_KEY=""
2 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/avatar2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/avatar2.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/openai.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/openai.png


--------------------------------------------------------------------------------
/public/openai-dark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/openai-dark.png


--------------------------------------------------------------------------------
/public/openai-light.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/openai-light.png


--------------------------------------------------------------------------------
/public/openai-avatar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/public/openai-avatar.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/src/fonts/charter_regular-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/armandwipangestu/openai-project/HEAD/src/fonts/charter_regular-webfont.woff


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 |   content: ["./src/**/*.{js,jsx,ts,tsx}"],
4 |   theme: {
5 |     extend: {},
6 |   },
7 |   plugins: [],
8 | };
9 | 


--------------------------------------------------------------------------------
/src/components/Layouts/main.layouts.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | 
3 | const MainLayouts = ({ children }) => {
4 |   return <React.Fragment>{children}</React.Fragment>;
5 | };
6 | 
7 | export default MainLayouts;
8 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env
17 | .env.local
18 | .env.development.local
19 | .env.test.local
20 | .env.production.local
21 | 
22 | npm-debug.log*
23 | yarn-debug.log*
24 | yarn-error.log*
25 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/components/Dall-E/main.dalle.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Image from "./image.dalle";
 3 | 
 4 | const Dalle = (props) => {
 5 |   return (
 6 |     <React.Fragment>
 7 |       <div className="mt-2 text-center">
 8 |         <h1 className="font-medium text-sm md:text-xl underline underline-offset-8 text-black">
 9 |           OpenAI - {props.title}
10 |         </h1>
11 |         <p className="text-xs md:text-base mt-3 text-black">
12 |           {props.description}
13 |         </p>
14 |       </div>
15 |       <Image />
16 |     </React.Fragment>
17 |   );
18 | };
19 | 
20 | export default Dalle;
21 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | 
 7 | const root = ReactDOM.createRoot(document.getElementById('root'));
 8 | root.render(
 9 |   <React.StrictMode>
10 |     <App />
11 |   </React.StrictMode>
12 | );
13 | 
14 | // If you want to start measuring performance in your app, pass a function
15 | // to log results (for example: reportWebVitals(console.log))
16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
17 | reportWebVitals();
18 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/ChatGPT/main.chatgpt.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Completion from "./completion.chatgpt";
 3 | 
 4 | const Chatgpt = (props) => {
 5 |   return (
 6 |     <React.Fragment>
 7 |       <div className="mt-2 text-center">
 8 |         <h1 className="font-medium text-sm md:text-xl underline underline-offset-8 text-dark">
 9 |           OpenAI - {props.title}
10 |         </h1>
11 |         <p className="text-xs md:text-base mt-3 text-dark">
12 |           {props.description}
13 |         </p>
14 |       </div>
15 |       <Completion />
16 |     </React.Fragment>
17 |   );
18 | };
19 | 
20 | export default Chatgpt;
21 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
 1 | .App {
 2 |   text-align: center;
 3 | }
 4 | 
 5 | .App-logo {
 6 |   height: 40vmin;
 7 |   pointer-events: none;
 8 | }
 9 | 
10 | @media (prefers-reduced-motion: no-preference) {
11 |   .App-logo {
12 |     animation: App-logo-spin infinite 20s linear;
13 |   }
14 | }
15 | 
16 | .App-header {
17 |   background-color: #282c34;
18 |   min-height: 100vh;
19 |   display: flex;
20 |   flex-direction: column;
21 |   align-items: center;
22 |   justify-content: center;
23 |   font-size: calc(10px + 2vmin);
24 |   color: white;
25 | }
26 | 
27 | .App-link {
28 |   color: #61dafb;
29 | }
30 | 
31 | @keyframes App-logo-spin {
32 |   from {
33 |     transform: rotate(0deg);
34 |   }
35 |   to {
36 |     transform: rotate(360deg);
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/components/Home/main.home.js:
--------------------------------------------------------------------------------
 1 | import { NavLink } from "react-router-dom";
 2 | 
 3 | const Home = (props) => {
 4 |   return (
 5 |     <div className="mt-10 md:pr-24 md:pl-24">
 6 |       <h1 className="font-medium text-2xl md:text-7xl text-dark">
 7 |         {props.title}
 8 |       </h1>
 9 |       <p className="text-xs md:text-base text-gray-600 pt-3">
10 |         {props.description}
11 |       </p>
12 |       <NavLink to="/chatgpt">
13 |         <button
14 |           type="button"
15 |           className="mt-5 w-36 md:w-52 md:h-15 md:text-2xl font-medium rounded-lg px-5 py-2.5 border-2 border-black shadow-lg text-center mr-2 mb-2 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300 text-dark"
16 |           style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
17 |         >
18 |           Let's Go
19 |         </button>
20 |       </NavLink>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default Home;
26 | 


--------------------------------------------------------------------------------
/src/example.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { Configuration, OpenAIApi } from "openai";
 3 | import "./App.css";
 4 | 
 5 | const App = () => {
 6 |   const [prompt, setPrompt] = useState("");
 7 |   const [result, setResult] = useState("");
 8 |   const configuration = new Configuration({
 9 |     apiKey: process.env.REACT_APP_API_KEY,
10 |   });
11 | 
12 |   // useEffect(() => {
13 |   //   generateImage();
14 |   // }, []);
15 | 
16 |   const openai = new OpenAIApi(configuration);
17 | 
18 |   const generateImage = async () => {
19 |     const res = await openai.createImage({
20 |       prompt: prompt,
21 |       n: 1,
22 |       size: "1024x1024",
23 |     });
24 |     setResult(res.data.data[0].url);
25 |   };
26 | 
27 |   return (
28 |     <>
29 |       <textarea onChange={(e) => setPrompt(e.target.value)} />
30 |       <button onClick={generateImage}>Generate Image</button>
31 |       {result.length > 0 ? <img src={result} /> : <></>}
32 |     </>
33 |   );
34 | };
35 | 
36 | export default App;
37 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chatgpt",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@fortawesome/fontawesome-svg-core": "^6.2.1",
 7 |     "@fortawesome/free-solid-svg-icons": "^6.2.1",
 8 |     "@fortawesome/react-fontawesome": "^0.2.0",
 9 |     "@headlessui/react": "^1.7.5",
10 |     "@heroicons/react": "^2.0.13",
11 |     "@testing-library/jest-dom": "^5.16.5",
12 |     "@testing-library/react": "^13.4.0",
13 |     "@testing-library/user-event": "^13.5.0",
14 |     "axios": "^1.2.1",
15 |     "file-saver": "^2.0.5",
16 |     "openai": "^3.1.0",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "react-router-dom": "^6.4.5",
20 |     "react-scripts": "5.0.1",
21 |     "react-textarea-autosize": "^8.4.0",
22 |     "web-vitals": "^2.1.4"
23 |   },
24 |   "scripts": {
25 |     "start": "react-scripts start",
26 |     "build": "react-scripts build",
27 |     "test": "react-scripts test",
28 |     "eject": "react-scripts eject"
29 |   },
30 |   "eslintConfig": {
31 |     "extends": [
32 |       "react-app",
33 |       "react-app/jest"
34 |     ]
35 |   },
36 |   "browserslist": {
37 |     "production": [
38 |       ">0.2%",
39 |       "not dead",
40 |       "not op_mini all"
41 |     ],
42 |     "development": [
43 |       "last 1 chrome version",
44 |       "last 1 firefox version",
45 |       "last 1 safari version"
46 |     ]
47 |   },
48 |   "devDependencies": {
49 |     "autoprefixer": "^10.4.13",
50 |     "postcss": "^8.4.20",
51 |     "tailwindcss": "^3.2.4"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/Utilities/octocat.js:
--------------------------------------------------------------------------------
 1 | const Octocat = () => {
 2 |   return (
 3 |     <a
 4 |       href="https://github.com/armandwipangestu/openai-project"
 5 |       className="github-corner"
 6 |       tabIndex="-1"
 7 |       target="_blank"
 8 |       rel="noreferrer"
 9 |     >
10 |       <svg
11 |         width="80"
12 |         height="80"
13 |         viewBox="0 0 250 250"
14 |         style={{
15 |           position: "absolute",
16 |           top: 0,
17 |           right: 0,
18 |           border: 0,
19 |           fill: "#1A1C1E",
20 |           color: "#fff",
21 |         }}
22 |       >
23 |         <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
24 |         <path
25 |           d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
26 |           fill="currentColor"
27 |           style={{ transformOrigin: "130px 106px" }}
28 |           className="octo-arm"
29 |         ></path>
30 |         <path
31 |           d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
32 |           fill="currentColor"
33 |           className="octo-body"
34 |         ></path>
35 |       </svg>
36 |     </a>
37 |   );
38 | };
39 | 
40 | export default Octocat;
41 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta name="description" content="Website OpenAI - Project" />
 9 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/openai.png" />
10 |     <!--
11 |       manifest.json provides metadata used when your web app is installed on a
12 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
13 |     -->
14 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
15 |     <!--
16 |       Notice the use of %PUBLIC_URL% in the tags above.
17 |       It will be replaced with the URL of the `public` folder during the build.
18 |       Only files inside the `public` folder can be referenced from the HTML.
19 | 
20 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
21 |       work correctly both with client-side routing and a non-root public URL.
22 |       Learn how to configure a non-root public URL by running `npm run build`.
23 |     -->
24 |     <title>OpenAI - Project</title>
25 |   </head>
26 |   <body>
27 |     <noscript>You need to enable JavaScript to run this app.</noscript>
28 |     <div id="root"></div>
29 |     <!--
30 |       This HTML file is a template.
31 |       If you open it directly in the browser, you will see an empty page.
32 | 
33 |       You can add webfonts, meta tags, or analytics to this file.
34 |       The build step will place the bundled scripts into the <body> tag.
35 | 
36 |       To begin the development, run `npm start` or `yarn start`.
37 |       To create a production bundle, use `npm run build` or `yarn build`.
38 |     -->
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { BrowserRouter, Routes, Route } from "react-router-dom";
 3 | import Chatgpt from "./components/ChatGPT/main.chatgpt";
 4 | import Dalle from "./components/Dall-E/main.dalle";
 5 | import MainLayouts from "./components/Layouts/main.layouts";
 6 | import { Sidebar } from "./components/Layouts/sidebar.layouts";
 7 | import Octocat from "./components/Utilities/octocat";
 8 | import Home from "./components/Home/main.home";
 9 | import FAQ from "./components/FAQ/main.faq";
10 | import Demo from "./components/Demo/main.demo";
11 | 
12 | const App = () => {
13 |   return (
14 |     <MainLayouts>
15 |       <BrowserRouter>
16 |         <Octocat />
17 |         <div className="flex">
18 |           <Sidebar />
19 |           <main className="p-7 flex-1">
20 |             <Routes>
21 |               <Route
22 |                 path="/"
23 |                 element={
24 |                   <Home
25 |                     title="Let's do something fun with AI."
26 |                     description="OpenAI is an AI research and deployment company. Our mission is to ensure that artificial general intelligence benefits all of humanity."
27 |                   />
28 |                 }
29 |               />
30 |               <Route
31 |                 path="/chatgpt"
32 |                 element={
33 |                   <Chatgpt
34 |                     title="ChatGPT"
35 |                     description="Interacts with AI in a conversational way."
36 |                   />
37 |                 }
38 |               />
39 |               <Route
40 |                 path="/dall-e"
41 |                 element={
42 |                   <Dalle
43 |                     title="Dall·E 2"
44 |                     description="Create original, realistic images and art from a text description"
45 |                   />
46 |                 }
47 |               />
48 |               <Route path="/question" element={<FAQ />} />
49 |               <Route path="/demo" element={<Demo />} />
50 |             </Routes>
51 |           </main>
52 |         </div>
53 |       </BrowserRouter>
54 |     </MainLayouts>
55 |   );
56 | };
57 | 
58 | export default App;
59 | 


--------------------------------------------------------------------------------
/src/components/Utilities/information.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { Link } from "react-router-dom";
 3 | 
 4 | const Information = () => {
 5 |   return (
 6 |     <>
 7 |       <div
 8 |         id="alert-additional-content-1"
 9 |         className="p-4 mb-4 mt-5 border-2 border-black rounded-lg bg-blue-300"
10 |         style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
11 |         role="alert"
12 |       >
13 |         <div className="flex items-center">
14 |           <svg
15 |             aria-hidden="true"
16 |             className="w-5 h-5 mr-2 text-dark"
17 |             fill="currentColor"
18 |             viewBox="0 0 20 20"
19 |             xmlns="http://www.w3.org/2000/svg"
20 |           >
21 |             <path
22 |               fillRule="evenodd"
23 |               d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
24 |               clipRule="evenodd"
25 |             ></path>
26 |           </svg>
27 |           <span className="sr-only">Info</span>
28 |           <h3 className="text-lg font-medium text-black">Information</h3>
29 |         </div>
30 |         <div className="mt-2 mb-4 text-sm text-black">
31 |           Because my API Key has reached the limit, the input form is disabled,
32 |           if you want to try it please read{" "}
33 |           <a
34 |             href="https://github.com/armandwipangestu/openai-project#running-on-localhost"
35 |             target="_blank"
36 |             rel="noreferrer"
37 |             className="underline"
38 |           >
39 |             this
40 |           </a>
41 |           , also check this{" "}
42 |           <a
43 |             href="https://github.com/armandwipangestu/openai-project#information"
44 |             target="_blank"
45 |             rel="noreferrer"
46 |             className="underline"
47 |           >
48 |             video
49 |           </a>{" "}
50 |           to enable input form, button, etc. To see how this is work, check out
51 |           this{" "}
52 |           <Link to="/demo" className="underline">
53 |             demo
54 |           </Link>
55 |         </div>
56 |       </div>
57 |     </>
58 |   );
59 | };
60 | 
61 | export default Information;
62 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
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>


--------------------------------------------------------------------------------
/src/components/Demo/main.demo.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | const Demo = () => {
 4 |   const lists = [
 5 |     {
 6 |       name: "ChatGPT",
 7 |       source:
 8 |         "https://user-images.githubusercontent.com/64394320/210139372-824284d8-6170-4308-95f2-02d0f272fa67.mp4",
 9 |       color: "#FAAE2B",
10 |     },
11 |     {
12 |       name: "Dall·E 2",
13 |       source:
14 |         "https://user-images.githubusercontent.com/64394320/210139754-bf37f019-1dac-49ae-9f9f-56b2e618c575.mp4",
15 |       color: "#FE98A3",
16 |     },
17 |   ];
18 | 
19 |   return (
20 |     <>
21 |       <div className="p-2 mt-2">
22 |         {lists.map((list, i) => (
23 |           <>
24 |             <div className="mb-5 mt-5" key={i}>
25 |               <div
26 |                 className="border-2 border-black px-3 py-2 rounded-lg"
27 |                 style={{
28 |                   boxShadow: "0.4rem 0.4rem 0 #222",
29 |                   backgroundColor: list.color,
30 |                 }}
31 |               >
32 |                 <div className="window">
33 |                   <div class="titlebar">
34 |                     <div class="buttons">
35 |                       <div class="close w-2.5 h-2.5 md:w-3.5 md:h-3.5">
36 |                         {/* <a class="closebutton" href="#">
37 |                           <span>
38 |                             <strong>x</strong>
39 |                           </span>
40 |                         </a> */}
41 |                       </div>
42 |                       <div class="minimize w-2.5 h-2.5 md:w-3.5 md:h-3.5">
43 |                         {/* <a class="minimizebutton" href="#">
44 |                           <span>
45 |                             <strong>&ndash;</strong>
46 |                           </span>
47 |                         </a> */}
48 |                       </div>
49 |                       <div class="zoom w-2.5 h-2.5 md:w-3.5 md:h-3.5">
50 |                         {/* <a class="zoombutton" href="#">
51 |                           <span>
52 |                             <strong>+</strong>
53 |                           </span>
54 |                         </a> */}
55 |                       </div>
56 |                     </div>
57 |                     <span className="text-xs md:text-base">{list.name}</span>
58 |                   </div>
59 |                   <div className="content mt-2">
60 |                     <video className="w-full max-w-full h-auto" controls>
61 |                       <source src={list.source} type="video/mp4" />
62 |                       Your browser does not support the video tag.
63 |                     </video>
64 |                   </div>
65 |                 </div>
66 |                 {/* <h1 className="text-black text-base md:text-2xl mb-2">
67 |                   {list.name}
68 |                 </h1> */}
69 |               </div>
70 |             </div>
71 |           </>
72 |         ))}
73 |       </div>
74 |     </>
75 |   );
76 | };
77 | 
78 | export default Demo;
79 | 


--------------------------------------------------------------------------------
/src/components/Layouts/navbar.layouts.js:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | 
 3 | const Navigation = () => {
 4 |   const [navbar, setNavbar] = useState(false);
 5 | 
 6 |   return (
 7 |     <nav className="bg-white border-gray-200 px-4 sm:px-4 py-2.5 dark:bg-gray-900 shadow-sm">
 8 |       <div className="justify-between px-1 mx-auto lg:max-w-7xl md:items-center md:flex md:px-5">
 9 |         <div>
10 |           <div className="flex items-center justify-between py-3 md:py-5 md:block">
11 |             <a href="/">
12 |               <h2 className="text-2xl font-bold text-black dark:text-white">
13 |                 OpenAI
14 |               </h2>
15 |             </a>
16 |             <div className="md:hidden">
17 |               <button
18 |                 className="p-2 text-gray-700 rounded-md outline-none focus:border-gray-400 focus:border"
19 |                 onClick={() => setNavbar(!navbar)}
20 |               >
21 |                 {navbar ? (
22 |                   <svg
23 |                     xmlns="http://www.w3.org/2000/svg"
24 |                     className="w-6 h-6 text-black dark:text-white"
25 |                     viewBox="0 0 20 20"
26 |                     fill="currentColor"
27 |                   >
28 |                     <path
29 |                       fillRule="evenodd"
30 |                       d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
31 |                       clipRule="evenodd"
32 |                     />
33 |                   </svg>
34 |                 ) : (
35 |                   <svg
36 |                     xmlns="http://www.w3.org/2000/svg"
37 |                     className="w-6 h-6 text-black dark:text-white"
38 |                     fill="none"
39 |                     viewBox="0 0 24 24"
40 |                     stroke="currentColor"
41 |                     strokeWidth={2}
42 |                   >
43 |                     <path
44 |                       strokeLinecap="round"
45 |                       strokeLinejoin="round"
46 |                       d="M4 6h16M4 12h16M4 18h16"
47 |                     />
48 |                   </svg>
49 |                 )}
50 |               </button>
51 |             </div>
52 |           </div>
53 |         </div>
54 |         <div>
55 |           <div
56 |             className={`flex-1 justify-self-center pb-3 mt-2 md:block md:pb-0 md:mt-0 ${
57 |               navbar ? "block" : "hidden"
58 |             }`}
59 |           >
60 |             <ul className="items-center justify-center space-y-4 md:flex md:space-x-6 md:space-y-0">
61 |               <li className="text-black dark:text-white">
62 |                 <a href="/">ChatGPT</a>
63 |               </li>
64 |               <li className="text-black dark:text-white">
65 |                 <a href="/dall-e">Dall-E</a>
66 |               </li>
67 |             </ul>
68 |           </div>
69 |         </div>
70 |       </div>
71 |     </nav>
72 |   );
73 | };
74 | 
75 | export default Navigation;
76 | 


--------------------------------------------------------------------------------
/src/components/Utilities/modals.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import { saveAs } from "file-saver";
 3 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 4 | import { faClose, faDownload } from "@fortawesome/free-solid-svg-icons";
 5 | 
 6 | const Modals = ({ onClose, visible, url, prompt }) => {
 7 |   const [isMobile, setIsMobile] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     const mediaQuery = window.matchMedia("(max-width: 600px)");
11 |     setIsMobile(mediaQuery.matches);
12 | 
13 |     const handleMediaQueryChange = (e) => setIsMobile(e.matches);
14 |     mediaQuery.addEventListener("change", handleMediaQueryChange);
15 | 
16 |     return () =>
17 |       mediaQuery.removeEventListener("change", handleMediaQueryChange);
18 |   }, []);
19 | 
20 |   if (!visible) return null;
21 | 
22 |   const handleClick = () => {
23 |     saveAs(url, prompt);
24 |   };
25 | 
26 |   return (
27 |     <>
28 |       <div className="fixed inset-0 bg-black bg-opacity-60 backdrop-blur-sm flex justify-center items-center">
29 |         {!isMobile && (
30 |           <div className="absolute right-0 top-12 flex flex-col mr-80">
31 |             <button
32 |               type="button"
33 |               className="text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-md text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mb-3 border-2 border-black"
34 |               style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
35 |               onClick={handleClick}
36 |             >
37 |               <FontAwesomeIcon icon={faDownload} />
38 |             </button>
39 |             <button
40 |               onClick={onClose}
41 |               type="button"
42 |               className="focus:ring-4 focus:outline-none rounded-md text-sm font-medium px-5 py-2.5 focus:z-10 bg-red-600 text-white hover:bg-red-700 focus:ring-red-700 border-2 border-black"
43 |               style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
44 |             >
45 |               <FontAwesomeIcon icon={faClose} />
46 |             </button>
47 |           </div>
48 |         )}
49 |         {isMobile && (
50 |           <div className="absolute bottom-20 md:bottom-40 space-x-2 rounded-b dark:border-gray-600">
51 |             <button
52 |               type="button"
53 |               className="text-white bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-md text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mb-3 border-2 border-black"
54 |               style={{ boxShadow: "0.2rem 0.2rem 0 #000" }}
55 |               onClick={handleClick}
56 |             >
57 |               <FontAwesomeIcon icon={faDownload} />
58 |             </button>
59 |             <button
60 |               onClick={onClose}
61 |               type="button"
62 |               className="focus:ring-4 focus:outline-none rounded-md text-sm font-medium px-5 py-2.5 focus:z-10 bg-red-600 text-white hover:bg-red-700 focus:ring-red-700 border-2 border-black"
63 |               style={{ boxShadow: "0.2rem 0.2rem 0 #000" }}
64 |             >
65 |               <FontAwesomeIcon icon={faClose} />
66 |             </button>
67 |           </div>
68 |         )}
69 |         <img
70 |           className="max-w-lg rounded-lg w-11/12 md:w-full border-2 border-black"
71 |           src={url}
72 |           style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
73 |         />
74 |       </div>
75 |     </>
76 |   );
77 | };
78 | 
79 | export default Modals;
80 | 


--------------------------------------------------------------------------------
/src/components/FAQ/main.faq.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  3 | import { faPaperclip } from "@fortawesome/free-solid-svg-icons";
  4 | 
  5 | const FAQ = () => {
  6 |   const lists = [
  7 |     {
  8 |       question: "What can this website do?",
  9 |       li: false,
 10 |       answer:
 11 |         "This website allows us to communicate with AI created by the OpenAI organization",
 12 |       color: "#D0E2DB",
 13 |     },
 14 |     {
 15 |       question: "What can AI do on this website?",
 16 |       li: true,
 17 |       answer: [
 18 |         { list_answer: "ChatGPT - Interacts with AI in a conversational way." },
 19 |         {
 20 |           list_answer:
 21 |             "Dall·E 2 - Create original, realistic images and art from a text description",
 22 |         },
 23 |       ],
 24 |       color: "#8BD3DD",
 25 |     },
 26 |     {
 27 |       question: "What technology is used on this website?",
 28 |       li: false,
 29 |       answer: "This website is built using ReactJS, Tailwind CSS, OpenAI API",
 30 |       color: "#FAAE2B",
 31 |     },
 32 |     {
 33 |       question: "How to Get API Key?",
 34 |       answer:
 35 |         "You must first register on the openai website, then click the profile menu and select View API keys",
 36 |       color: "#FE98A3",
 37 |     },
 38 |   ];
 39 | 
 40 |   return (
 41 |     <>
 42 |       <div className="p-2 mt-2">
 43 |         {lists.map((list, index) => (
 44 |           <div key={index} className="mb-5 mt-5">
 45 |             <div
 46 |               className="border-2 border-black px-3 py-2 rounded-lg"
 47 |               style={{
 48 |                 boxShadow: "0.4rem 0.4rem 0 #222",
 49 |                 backgroundColor: list.color,
 50 |               }}
 51 |             >
 52 |               <h1 className="text-black text-base md:text-2xl">
 53 |                 {list.question}
 54 |               </h1>
 55 |             </div>
 56 |             <div className="mt-3 text-gray-600 text-xs md:text-base">
 57 |               {!list.li ? (
 58 |                 <>
 59 |                   <span>{list.answer}</span>
 60 |                 </>
 61 |               ) : (
 62 |                 <>
 63 |                   <ul style={{ listStyleType: "circle" }}>
 64 |                     {list.answer.map((ans, index) => (
 65 |                       <li key={index}>{ans.list_answer}</li>
 66 |                     ))}
 67 |                   </ul>
 68 |                 </>
 69 |               )}
 70 |             </div>
 71 |           </div>
 72 |         ))}
 73 |       </div>
 74 | 
 75 |       {/* <div className="p-2">
 76 |         <div>
 77 |           <h1 className="text-white text-xl md:text-2xl">
 78 |             What can this website do?
 79 |           </h1>
 80 |           <div className="mt-3">
 81 |             <span className="text-gray-400">
 82 |               This website allows us to communicate with AI created by the
 83 |               OpenAI organization
 84 |             </span>
 85 |           </div>
 86 |         </div>
 87 | 
 88 |         <div className="mt-10">
 89 |           <h1 className="text-white text-xl md:text-2xl">
 90 |             What can AI do on this website?
 91 |           </h1>
 92 |           <div className="mt-3 text-gray-400">
 93 |             <ul style={{ listStyleType: "circle" }}>
 94 |               <li>ChatGPT - Interacts with AI in a conversational way.</li>
 95 |               <li>
 96 |                 Dall·E 2 - Create original, realistic images and art from a text
 97 |                 description
 98 |               </li>
 99 |             </ul>
100 |           </div>
101 |         </div>
102 | 
103 |         <div className="mt-10">
104 |           <h1 className="text-white text-xl md:text-2xl">
105 |             What technology is used on this website?
106 |           </h1>
107 |           <div className="mt-3">
108 |             <span className="text-gray-400">
109 |               This website is built using ReactJS, Tailwind CSS, OpenAI API
110 |             </span>
111 |           </div>
112 |         </div>
113 |       </div> */}
114 |     </>
115 |   );
116 | };
117 | 
118 | export default FAQ;
119 | 


--------------------------------------------------------------------------------
/src/components/ChatGPT/completion.chatgpt.js:
--------------------------------------------------------------------------------
  1 | import { useState } from "react";
  2 | import TextareaAutosize from "react-textarea-autosize";
  3 | import Information from "../Utilities/information";
  4 | import { Configuration, OpenAIApi } from "openai";
  5 | 
  6 | const Completion = () => {
  7 |   const [prompt, setPrompt] = useState("");
  8 |   const [loading, setLoading] = useState(false);
  9 |   const [chatLog, setChatLog] = useState([
 10 |     {
 11 |       user: "gpt",
 12 |       message: "How can I help you Today?",
 13 |       avatar: "openai-dark.png",
 14 |     },
 15 |     // {
 16 |     // user: "me",
 17 |     // message: "asdasda",
 18 |     // avatar: "avatar2.png",
 19 |     // },
 20 |   ]);
 21 |   const configuration = new Configuration({
 22 |     apiKey: process.env.REACT_APP_API_KEY,
 23 |   });
 24 | 
 25 |   const openai = new OpenAIApi(configuration);
 26 | 
 27 |   const generateCompletion = async () => {
 28 |     let chatLogNew = [...chatLog, { user: "me", message: prompt }];
 29 |     setChatLog(chatLogNew);
 30 |     setPrompt("");
 31 |     setLoading(true);
 32 |     window.document.body.scrollIntoView({ behavior: "smooth", block: "end" });
 33 |     const res = await openai.createCompletion({
 34 |       prompt: prompt,
 35 |       model: "text-davinci-003",
 36 |       temperature: 0.9,
 37 |       max_tokens: 2048,
 38 |     });
 39 |     setLoading(false);
 40 |     setChatLog([
 41 |       ...chatLogNew,
 42 |       { user: "gpt", message: `${res.data.choices[0].text}` },
 43 |     ]);
 44 |   };
 45 | 
 46 |   return (
 47 |     <>
 48 |       <div className="min-h-screen flex flex-col justify-start">
 49 |         <div>
 50 |           {/*
 51 | 
 52 |             |--------------------------------------------------------------------------
 53 |             | NOTE: Give Comment on the Component below to remove information
 54 |             |--------------------------------------------------------------------------
 55 |             |
 56 |             |
 57 | 
 58 |           */}
 59 |           <Information />
 60 | 
 61 |           {/*
 62 | 
 63 |             |--------------------------------------------------------------------------
 64 |             | NOTE: Give Uncomment on the code below to make work
 65 |             |--------------------------------------------------------------------------
 66 |             |
 67 |             |
 68 |             
 69 |           */}
 70 | 
 71 |           {/* {chatLog.map((log, i) => (
 72 |             <>
 73 |               {log.user === "me" && (
 74 |                 <div
 75 |                   className="flex p-5 rounded-lg mb-5 bg-blue-300 border-2 border-black"
 76 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
 77 |                   key={i}
 78 |                 >
 79 |                   <img
 80 |                     src="avatar2.png"
 81 |                     className="w-8 h-6 mr-2 -ml-1"
 82 |                     alt="user"
 83 |                   />
 84 |                   <div>
 85 |                     <span className="text-black mt-5">{log.message}</span>
 86 |                   </div>
 87 |                 </div>
 88 |               )}
 89 |               {log.user === "gpt" && (
 90 |                 <div
 91 |                   className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
 92 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
 93 |                   key={i}
 94 |                 >
 95 |                   <img
 96 |                     src="openai-dark.png"
 97 |                     className="w-6 h-6 mr-3"
 98 |                     alt="gpt"
 99 |                   />
100 |                   <div>
101 |                     <span className="text-black">{log.message}</span>
102 |                   </div>
103 |                 </div>
104 |               )}
105 |             </>
106 |           ))} */}
107 |           {loading && (
108 |             <div className="relative">
109 |               <div
110 |                 className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
111 |                 style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
112 |               >
113 |                 <img src="openai-dark.png" className="w-6 h-6 mr-3" alt="gpt" />
114 |                 <div class="col-3">
115 |                   <div class="snippet" data-title="dot-pulse">
116 |                     <div class="stage">
117 |                       <div class="dot-pulse"></div>
118 |                     </div>
119 |                   </div>
120 |                 </div>
121 |               </div>
122 |             </div>
123 |           )}
124 |         </div>
125 | 
126 |         <div className="mt-auto flex sticky bottom-5">
127 |           <div
128 |             className={`flex absolute bottom-0 right-0 md:pb-2.5 px-4 py-2.5 rounded-tr-md rounded-br-md ${
129 |               prompt && "bg-black text-white px-4 py-2.5"
130 |             }`}
131 |           >
132 |             <button
133 |               className={`${!prompt && "cursor-not-allowed"}`}
134 |               type="submit"
135 |               //
136 |               // |--------------------------------------------------------------------------
137 |               // | NOTE: Uncomment this attribute 'onClick' to hit API OpenAI
138 |               // |--------------------------------------------------------------------------
139 |               // |
140 |               // |
141 |               //
142 |               // onClick={generateCompletion}
143 |             >
144 |               Send
145 |             </button>
146 |           </div>
147 |           <TextareaAutosize
148 |             className="w-full border-2 border-black rounded-md placeholder-gray-500 resize-none py-2 pl-3 pr-10 md:pl-5 outline-none"
149 |             placeholder="Enter your message here"
150 |             style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
151 |             maxRows={5}
152 |             value={prompt}
153 |             onChange={(e) => setPrompt(e.target.value)}
154 |             //
155 |             // |--------------------------------------------------------------------------
156 |             // | NOTE: Give Comment on the two attributes below to enable input
157 |             // |--------------------------------------------------------------------------
158 |             // |
159 |             // |
160 |             //
161 |             disabled
162 |             readOnly
163 |           />
164 |         </div>
165 |       </div>
166 |     </>
167 |   );
168 | };
169 | 
170 | export default Completion;
171 | 


--------------------------------------------------------------------------------
/src/components/Layouts/sidebar.layouts.js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
  3 | import {
  4 |   faMessage,
  5 |   faImages,
  6 |   faInfoCircle,
  7 |   faQuestionCircle,
  8 |   faHouse,
  9 |   faVideo,
 10 | } from "@fortawesome/free-solid-svg-icons";
 11 | import { NavLink } from "react-router-dom";
 12 | 
 13 | const Sidebar = () => {
 14 |   const [isMobile, setIsMobile] = useState(false);
 15 |   const [open, setOpen] = useState(null);
 16 |   const [attention, setAttention] = useState(true);
 17 |   const menus = [
 18 |     { title: "Home", link: "/", icon: "faHouse" },
 19 |     { title: "ChatGPT", link: "/chatgpt", icon: "faMessage" },
 20 |     { title: "Dall·E", link: "/dall-e", icon: "faImages" },
 21 |     { title: "FAQs", link: "/question", icon: "faQuestionCircle" },
 22 |     { title: "Demo", link: "/demo", icon: "faVideo" },
 23 |   ];
 24 | 
 25 |   const handleIcon = (icon) => {
 26 |     switch (icon) {
 27 |       case "faMessage":
 28 |         return faMessage;
 29 |       case "faImages":
 30 |         return faImages;
 31 |       case "faQuestionCircle":
 32 |         return faQuestionCircle;
 33 |       case "faHouse":
 34 |         return faHouse;
 35 |       case "faVideo":
 36 |         return faVideo;
 37 |       default:
 38 |         return "";
 39 |     }
 40 |   };
 41 | 
 42 |   useEffect(() => {
 43 |     const mediaQuery = window.matchMedia("(max-width: 600px)");
 44 |     // setIsMobile(mediaQuery.matches);
 45 |     setOpen(!mediaQuery.matches);
 46 | 
 47 |     const handleMediaQueryChange = (e) => setIsMobile(e.matches);
 48 |     mediaQuery.addEventListener("change", handleMediaQueryChange);
 49 | 
 50 |     return () =>
 51 |       mediaQuery.removeEventListener("change", handleMediaQueryChange);
 52 |   }, []);
 53 | 
 54 |   return (
 55 |     <div
 56 |       className={`${
 57 |         open ? "w-44 md:w-72" : "w-12 md:w-16"
 58 |       } border-r-2 border-black h-screen sticky top-0`}
 59 |     >
 60 |       <div className={`flex items-center`}>
 61 |         <img
 62 |           src="openai-dark.png"
 63 |           alt="OpenAI Logo"
 64 |           className={`cursor-pointer duration-500 ${
 65 |             open && "rotate-[360deg]"
 66 |           } w-6 h-6 ml-3 mt-8 md:ml-4 md:mt-7 md:hover:rotate-[360deg]`}
 67 |           onClick={() => {
 68 |             setOpen(!open);
 69 |           }}
 70 |         />
 71 |         <div
 72 |           className={`text-black origin-left font-medium text-2xl duration-200 ml-1.5 mt-8 md:mt-7 ${
 73 |             !open && "scale-0"
 74 |           }`}
 75 |         >
 76 |           <h1 style={{ font: "charter" }}>OpenAI</h1>
 77 |         </div>
 78 |       </div>
 79 |       <ul className="pt-6">
 80 |         {menus.map((menu, index) => (
 81 |           <NavLink
 82 |             to={menu.link}
 83 |             style={({ isActive }) => ({
 84 |               color: isActive ? "#000" : "#696969",
 85 |             })}
 86 |             key={index}
 87 |           >
 88 |             <li
 89 |               className={`flex rounded-md py-3 md:py-4 px-2 cursor-pointer md:hover:bg-gray-500/10
 90 |                text-sm items-center gap-x-4`}
 91 |             >
 92 |               <FontAwesomeIcon
 93 |                 icon={handleIcon(menu.icon)}
 94 |                 className={`text-base ml-1.5 md:text-lg md:ml-2.5`}
 95 |               />
 96 |               <span
 97 |                 className={`${
 98 |                   !open && "scale-0"
 99 |                 } origin-left duration-200 md:text-lg`}
100 |               >
101 |                 {menu.title}
102 |               </span>
103 |             </li>
104 |           </NavLink>
105 |         ))}
106 |       </ul>
107 |       <div
108 |         className="px-3.5 md:px-5 mb-8 md:mb-5 rounded-lg md:bottom-0 bottom-10 absolute text-gray-600"
109 |         role="alert"
110 |       >
111 |         <FontAwesomeIcon
112 |           icon={faInfoCircle}
113 |           className={`text-base md:text-lg md:mr-6 text-black ${
114 |             open && "hidden"
115 |           } cursor-pointer ${!attention ? "hidden" : ""}`}
116 |           onClick={() => {
117 |             setOpen(!open);
118 |           }}
119 |         />
120 |         <div
121 |           className={`${open && "border-2 border-black"} ${
122 |             !open && "hidden"
123 |           } px-4 py-4 rounded-lg ${!attention ? "hidden" : ""}`}
124 |           style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
125 |         >
126 |           <div className={`flex items-center mb-3 ${!open && "hidden"}`}>
127 |             <span
128 |               className={`border-2 border-black bg-red-400 text-black text-xs md:text-sm font-semibold mr-2 px-2.5 py-0.5 rounded`}
129 |               style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
130 |             >
131 |               Attention
132 |             </span>
133 |             <button
134 |               type="button"
135 |               className="ml-auto -mx-1.5 -my-1.5 border-2 rounded-md border-black text-black focus:ring-2 focus:ring-gray-200 p-0.5 inline-flex h-6 w-6 hover:bg-red-400"
136 |               style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
137 |               data-collapse-toggle="dropdown-cta"
138 |               aria-label="Close"
139 |               onClick={() => {
140 |                 setAttention(!attention);
141 |               }}
142 |             >
143 |               <span className="sr-only">Close</span>
144 |               <svg
145 |                 aria-hidden="true"
146 |                 className="w-4 h-4"
147 |                 fill="currentColor"
148 |                 viewBox="0 0 20 20"
149 |                 xmlns="http://www.w3.org/2000/svg"
150 |               >
151 |                 <path
152 |                   fillRule="evenodd"
153 |                   d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
154 |                   clipRule="evenodd"
155 |                 ></path>
156 |               </svg>
157 |             </button>
158 |           </div>
159 |           <div className={`${!open && "hidden"}`}>
160 |             <p className={`mb-3 text-xs md:text-sm`}>
161 |               Please don't share any sensitive information in your
162 |               conversations.
163 |             </p>
164 |             <a
165 |               className="text-xs md:text-sm underline"
166 |               href="https://openai.com/blog/chatgpt/"
167 |               target="_blank"
168 |               rel="noreferrer"
169 |             >
170 |               More information
171 |             </a>
172 |           </div>
173 |         </div>
174 |       </div>
175 |     </div>
176 |   );
177 | };
178 | 
179 | export { Sidebar };
180 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @font-face {
  6 |   font-family: "charter";
  7 |   src: local("charter"),
  8 |     url(./fonts/charter_regular-webfont.woff) format("woff");
  9 | }
 10 | 
 11 | body {
 12 |   margin: 0;
 13 |   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
 14 |     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
 15 |     sans-serif;
 16 |   -webkit-font-smoothing: antialiased;
 17 |   -moz-osx-font-smoothing: grayscale;
 18 | }
 19 | 
 20 | code {
 21 |   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
 22 |     monospace;
 23 | }
 24 | 
 25 | /* textarea {
 26 |   border: none;
 27 |   overflow: auto;
 28 |   outline: none;
 29 | 
 30 |   -webkit-box-shadow: none;
 31 |   -moz-box-shadow: none;
 32 |   box-shadow: none;
 33 | } */
 34 | 
 35 | /* .sidebar {
 36 |   box-shadow: 3px 0 3px 0 #000;
 37 | } */
 38 | 
 39 | .github-corner:hover .octo-arm {
 40 |   animation: octocat-wave 560ms ease-in-out;
 41 | }
 42 | 
 43 | @keyframes octocat-wave {
 44 |   0%,
 45 |   100% {
 46 |     transform: rotate(0);
 47 |   }
 48 | 
 49 |   20%,
 50 |   60% {
 51 |     transform: rotate(-25deg);
 52 |   }
 53 | 
 54 |   40%,
 55 |   80% {
 56 |     transform: rotate(10deg);
 57 |   }
 58 | }
 59 | 
 60 | @media (max-width: 500px) {
 61 |   .github-corner:hover .octo-arm {
 62 |     animation: none;
 63 |   }
 64 | 
 65 |   .github-corner .octo-arm {
 66 |     animation: octocat-wave 560ms ease-in-out;
 67 |   }
 68 | }
 69 | 
 70 | .bg-dark {
 71 |   background-color: rgb(24, 26, 27);
 72 | }
 73 | 
 74 | .bg-dark-2 {
 75 |   background-color: #212529;
 76 | }
 77 | 
 78 | .bg-dark-2:hover {
 79 |   background-color: #212529;
 80 | }
 81 | 
 82 | /* .neu-brutalism-shadow {
 83 |   box-shadow: 0.4rem 0.4rem 0 #222;
 84 | } */
 85 | 
 86 | .dot {
 87 |   display: inline-block;
 88 |   background-color: #000;
 89 |   border-radius: 50%;
 90 |   width: 0.5rem;
 91 |   height: 0.5rem;
 92 |   animation: fade 1s infinite;
 93 | }
 94 | 
 95 | .dot:nth-child(2) {
 96 |   animation-delay: 0.5s;
 97 | }
 98 | 
 99 | .dot:nth-child(3) {
100 |   animation-delay: 1s;
101 | }
102 | 
103 | @keyframes fade {
104 |   0%,
105 |   100% {
106 |     opacity: 0;
107 |   }
108 |   50% {
109 |     opacity: 1;
110 |   }
111 | }
112 | 
113 | a {
114 |   text-decoration: none;
115 | }
116 | 
117 | span {
118 |   line-height: 9px;
119 |   vertical-align: 50%;
120 | }
121 | 
122 | .window {
123 |   /* background: #fff; */
124 |   /* width: 50vw; */
125 |   /* height: 75vh; */
126 |   /* margin: auto; */
127 |   /* margin-top: 12.5vh; */
128 |   /* border: 1px solid #acacac; */
129 |   /* border-radius: 6px; */
130 |   /* box-shadow: 0px 0px 20px #acacac; */
131 | }
132 | 
133 | .titlebar {
134 |   /* background: -webkit-gradient(
135 |     linear,
136 |     left top,
137 |     left bottom,
138 |     color-stop(0, #ebebeb, color-stop(1, #d5d5d5))
139 |   );
140 |   background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
141 |   background: -moz-linear-gradient(top, #ebebeb, #d5d5d5);
142 |   background: -ms-linear-gradient(top, #ebebeb, #d5d5d5);
143 |   background: -o-linear-gradient(top, #ebebeb, #d5d5d5);
144 |   background: linear-gradient(top, #ebebeb, #d5d5d5); */
145 |   color: #000;
146 |   font-size: 11pt;
147 |   line-height: 20px;
148 |   text-align: center;
149 |   width: 100%;
150 |   height: 20px;
151 |   /* border-top: 1px solid #f3f1f3;
152 |   border-bottom: 1px solid #b1aeb1; */
153 |   border-top-left-radius: 6px;
154 |   border-top-right-radius: 6px;
155 |   user-select: none;
156 |   -webkit-user-select: none;
157 |   -moz-user-select: none;
158 |   -ms-user-select: none;
159 |   -o-user-select: none;
160 |   cursor: default;
161 | }
162 | 
163 | .buttons {
164 |   padding-left: 8px;
165 |   padding-top: 3px;
166 |   float: left;
167 |   line-height: 0px;
168 | }
169 | 
170 | .buttons:hover a {
171 |   visibility: visible;
172 | }
173 | 
174 | .close {
175 |   background: #ff5c5c;
176 |   font-size: 9pt;
177 |   /* width: 15px;
178 |   height: 15px; */
179 |   border: 1px solid #e33e41;
180 |   border-radius: 50%;
181 |   display: inline-block;
182 | }
183 | 
184 | .close:active {
185 |   background: #c14645;
186 |   border: 1px solid #b03537;
187 | }
188 | 
189 | .close:active .closebutton {
190 |   color: #4e0002;
191 | }
192 | 
193 | .closebutton {
194 |   color: #820005;
195 |   visibility: hidden;
196 |   cursor: default;
197 | }
198 | 
199 | .minimize {
200 |   background: #ffbd4c;
201 |   font-size: 9pt;
202 |   /* line-height: 15px; */
203 |   margin-left: 4px;
204 |   /* width: 15px;
205 |   height: 15px; */
206 |   border: 1px solid #e09e3e;
207 |   border-radius: 50%;
208 |   display: inline-block;
209 | }
210 | 
211 | .minimize:active {
212 |   background: #c08e38;
213 |   border: 1px solid #af7c33;
214 | }
215 | 
216 | .minimize:active .minimizebutton {
217 |   color: #5a2607;
218 | }
219 | 
220 | .minimizebutton {
221 |   color: #9a5518;
222 |   visibility: hidden;
223 |   cursor: default;
224 | }
225 | 
226 | .zoom {
227 |   background: #00ca56;
228 |   font-size: 9pt;
229 |   /* line-height: 15px; */
230 |   margin-left: 6px;
231 |   /* width: 15px;
232 |   height: 15px; */
233 |   border: 1px solid #14ae46;
234 |   border-radius: 50%;
235 |   display: inline-block;
236 | }
237 | 
238 | .zoom:active {
239 |   background: #029740;
240 |   border: 1px solid #128435;
241 | }
242 | 
243 | .zoom:active .zoombutton {
244 |   color: #003107;
245 | }
246 | 
247 | .zoombutton {
248 |   color: #006519;
249 |   visibility: hidden;
250 |   cursor: default;
251 | }
252 | 
253 | .dot-pulse {
254 |   position: relative;
255 |   left: -9999px;
256 |   width: 0.5rem;
257 |   height: 0.5rem;
258 |   border-radius: 5px;
259 |   background-color: #000;
260 |   color: #000;
261 |   box-shadow: 9999px 0 0 -5px;
262 |   animation: dot-pulse 1s infinite linear;
263 |   animation-delay: 0.25s;
264 |   margin-left: 1rem;
265 |   margin-top: 0.5rem;
266 | }
267 | .dot-pulse::before,
268 | .dot-pulse::after {
269 |   content: "";
270 |   display: inline-block;
271 |   position: absolute;
272 |   width: 0.5rem;
273 |   height: 0.5rem;
274 |   border-radius: 5px;
275 |   background-color: #000;
276 |   color: #000;
277 | }
278 | .dot-pulse::before {
279 |   box-shadow: 9984px 0 0 -5px;
280 |   animation: dot-pulse-before 1s infinite linear;
281 |   animation-delay: 0s;
282 | }
283 | .dot-pulse::after {
284 |   box-shadow: 10014px 0 0 -5px;
285 |   animation: dot-pulse-after 1s infinite linear;
286 |   animation-delay: 0.5s;
287 | }
288 | 
289 | @keyframes dot-pulse-before {
290 |   0% {
291 |     box-shadow: 9984px 0 0 -5px;
292 |   }
293 |   30% {
294 |     box-shadow: 9984px 0 0 2px;
295 |   }
296 |   60%,
297 |   100% {
298 |     box-shadow: 9984px 0 0 -5px;
299 |   }
300 | }
301 | @keyframes dot-pulse {
302 |   0% {
303 |     box-shadow: 9999px 0 0 -5px;
304 |   }
305 |   30% {
306 |     box-shadow: 9999px 0 0 2px;
307 |   }
308 |   60%,
309 |   100% {
310 |     box-shadow: 9999px 0 0 -5px;
311 |   }
312 | }
313 | @keyframes dot-pulse-after {
314 |   0% {
315 |     box-shadow: 10014px 0 0 -5px;
316 |   }
317 |   30% {
318 |     box-shadow: 10014px 0 0 2px;
319 |   }
320 |   60%,
321 |   100% {
322 |     box-shadow: 10014px 0 0 -5px;
323 |   }
324 | }
325 | 


--------------------------------------------------------------------------------
/src/components/Dall-E/image.dalle.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import TextareaAutosize from "react-textarea-autosize";
  3 | import Modals from "../Utilities/modals";
  4 | import Information from "../Utilities/information";
  5 | import { Configuration, OpenAIApi } from "openai";
  6 | 
  7 | const Image = () => {
  8 |   const [prompt, setPrompt] = useState("");
  9 |   const [loading, setLoading] = useState(false);
 10 |   const [chatLog, setChatLog] = useState([
 11 |     // {
 12 |     //   user: "me",
 13 |     //   message: "test",
 14 |     // },
 15 |   ]);
 16 |   const [showModal, setShowModal] = useState(false);
 17 |   const [modalUrl, setModalUrl] = useState(null);
 18 |   const handleOnClose = () => setShowModal(false);
 19 |   const configuration = new Configuration({
 20 |     apiKey: process.env.REACT_APP_API_KEY,
 21 |   });
 22 | 
 23 |   const openai = new OpenAIApi(configuration);
 24 | 
 25 |   const generateImage = async () => {
 26 |     let chatLogNew = [...chatLog, { user: "me", message: prompt }];
 27 |     setChatLog(chatLogNew);
 28 |     setPrompt("");
 29 |     setLoading(true);
 30 |     window.document.body.scrollIntoView({ behavior: "smooth", block: "end" });
 31 |     const res = await openai.createImage({
 32 |       prompt: prompt,
 33 |       n: 10,
 34 |       size: "1024x1024",
 35 |     });
 36 |     setLoading(false);
 37 |     setChatLog([...chatLogNew, { user: "dall-e", message: res.data.data }]);
 38 |   };
 39 | 
 40 |   const generateSurprise = () => {
 41 |     const arr = [
 42 |       "3D render of a cute tropical fish in an aquarium on a dark blue background, digital art",
 43 |       "synthwave sports car",
 44 |       "a stained glass window depicting a robot",
 45 |       "an oil painting by Matisse of a humanoid robot playing chess",
 46 |       "a painting of a fox in the style of Starry Night",
 47 |       "teddy bears shopping for groceries in Japan, ukiyo-e",
 48 |       "an expressive oil painting of a basketball player dunking, depicted as an explosion of a nebula",
 49 |       "a fortune-telling shiba inu reading your fate in a giant hamburger, digital art",
 50 |       "a surrealist dream-like oil painting by Salvador Dalí of a cat playing checkers",
 51 |       "panda mad scientist mixing sparkling chemicals, digital art",
 52 |       "crayon drawing of several cute colorful monsters with ice cream cone bodies on dark blue paper",
 53 |       "3D render of a small pink balloon dog in a light pink room",
 54 |       "an oil painting portrait of a capybara wearing medieval royal robes and an ornate crown on a dark background", //13
 55 |       "a cat submarine chimera, digital art",
 56 |       "a bowl of soup that is also a portal to another dimension, digital art",
 57 |       "photograph of an astronaut riding a horse",
 58 |       "a pencil and watercolor drawing of a bright city in the future with flying cars",
 59 |       "a stained glass window depicting a hamburger and french fries",
 60 |       "a macro 35mm photograph of two mice in Hawaii, they're each wearing tiny swimsuits and are carrying tiny surf boards, digital art",
 61 |       "an oil painting portrait of a capybara wearing medieval royal robes and an ornate crown on a dark background",
 62 |       "An astronaut riding a horse in a photorealistic style",
 63 |       "Teddy bears mixing sparkling chemicals as mad scientists as a 1990s Saturday morning cartoon",
 64 |       "A bowl of soup that is a portal to another dimension as digital art",
 65 |       "Teddy bears shopping for groceries in the style of ukiyo-e",
 66 |       "An astronaut lounging in a tropical resort in space in a in a vaporwave style",
 67 |       "An astronaut playing basketball with cats in space as a children's book illustration",
 68 |     ];
 69 | 
 70 |     const randomIndex = Math.floor(Math.random() * arr.length);
 71 | 
 72 |     const randomElement = arr[randomIndex];
 73 |     setPrompt(randomElement);
 74 |   };
 75 | 
 76 |   return (
 77 |     <>
 78 |       <div className="min-h-screen flex flex-col justify-start">
 79 |         <div className="">
 80 |           {/*
 81 | 
 82 |             |--------------------------------------------------------------------------
 83 |             | NOTE: Give Comment on the Component below to remove information
 84 |             |--------------------------------------------------------------------------
 85 |             |
 86 |             |
 87 | 
 88 |           */}
 89 |           <Information />
 90 | 
 91 |           {/*
 92 | 
 93 |             |--------------------------------------------------------------------------
 94 |             | NOTE: Give Uncomment on the code below to make work
 95 |             |--------------------------------------------------------------------------
 96 |             |
 97 |             |
 98 |             
 99 |           */}
100 | 
101 |           {/* {chatLog.map((d, i) => (
102 |             <>
103 |               {d.user === "me" && (
104 |                 <div
105 |                   className="flex p-5 rounded-lg mt-5 mb-5 bg-blue-300 border-2 border-black"
106 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
107 |                   key={i}
108 |                 >
109 |                   <img
110 |                     src="avatar2.png"
111 |                     className="w-8 h-6 mr-2 -ml-1"
112 |                     alt="user"
113 |                   />
114 |                   <div>
115 |                     <span className="text-black">{d.message}</span>
116 |                   </div>
117 |                 </div>
118 |               )}
119 |               {d.user === "dall-e" && (
120 |                 <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-5">
121 |                   {d.message.map((res, i) => {
122 |                     return (
123 |                       <React.Fragment key={i}>
124 |                         <button
125 |                           onClick={() => {
126 |                             setShowModal(true);
127 |                             setModalUrl(res.url);
128 |                           }}
129 |                         >
130 |                           <img
131 |                             className="max-w-lg rounded-sm w-full h-48 md:hover:h-44 border-2 border-black"
132 |                             style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
133 |                             src={res.url}
134 |                             alt={`${i}`}
135 |                           />
136 |                         </button>
137 |                       </React.Fragment>
138 |                     );
139 |                   })}
140 |                   <Modals
141 |                     onClose={handleOnClose}
142 |                     visible={showModal}
143 |                     url={modalUrl}
144 |                     name={prompt}
145 |                   />
146 |                 </div>
147 |               )}
148 |             </>
149 |           ))} */}
150 |           {loading && (
151 |             <div className="relative">
152 |               <div
153 |                 className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
154 |                 style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
155 |               >
156 |                 <img
157 |                   src="openai-dark.png"
158 |                   className="w-6 h-6 mr-3 rounded-lg"
159 |                   alt="gpt"
160 |                 />
161 |                 <div className="col-3">
162 |                   <div className="snippet" data-title="dot-pulse">
163 |                     <div className="stage">
164 |                       <div className="dot-pulse"></div>
165 |                     </div>
166 |                   </div>
167 |                 </div>
168 |               </div>
169 |             </div>
170 |           )}
171 |         </div>
172 |         {!showModal && (
173 |           <div className="mt-auto flex flex-col sticky bottom-5 justify-start align-start">
174 |             <div className="mb-2 text-gray-600 text-xs md:text-sm">
175 |               Start with a detailed description
176 |               <button
177 |                 className="ml-1 border-2 border-black px-2.5 py-1 rounded-md text-black bg-green-400 hover:bg-green-500 text-xs"
178 |                 style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
179 |                 //
180 |                 // |--------------------------------------------------------------------------
181 |                 // | NOTE: Uncomment this attribute 'onClick' to hit Generate a Surprise
182 |                 // |--------------------------------------------------------------------------
183 |                 // |
184 |                 // |
185 |                 //
186 |                 // onClick={generateSurprise}
187 |               >
188 |                 Surprise me
189 |               </button>
190 |             </div>
191 |             <div
192 |               className={`flex absolute bottom-0 right-0 md:pb-2.5 px-4 py-2.5 rounded-tr-md rounded-br-md ${
193 |                 prompt && "bg-black text-white px-4 py-2.5"
194 |               }`}
195 |             >
196 |               <button
197 |                 className={`${!prompt && "cursor-not-allowed"}`}
198 |                 type="submit"
199 |                 //
200 |                 // |--------------------------------------------------------------------------
201 |                 // | NOTE: Uncomment this attribute 'onClick' to hit API OpenAI
202 |                 // |--------------------------------------------------------------------------
203 |                 // |
204 |                 // |
205 |                 //
206 |                 // onClick={generateImage}
207 |               >
208 |                 Generate
209 |               </button>
210 |             </div>
211 |             <TextareaAutosize
212 |               className="w-full border-2 border-black rounded-md placeholder-gray-500 resize-none py-2 pl-3 pr-10 md:pl-5 outline-none"
213 |               placeholder="Enter your message here"
214 |               style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
215 |               maxRows={5}
216 |               value={prompt}
217 |               onChange={(e) => setPrompt(e.target.value)}
218 |               //
219 |               // |--------------------------------------------------------------------------
220 |               // | NOTE: Give Comment on the two attributes below to enable input
221 |               // |--------------------------------------------------------------------------
222 |               // |
223 |               // |
224 |               //
225 |               disabled
226 |               readOnly
227 |             />
228 |           </div>
229 |         )}
230 |       </div>
231 |     </>
232 |   );
233 | };
234 | 
235 | export default Image;
236 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <h1 align="center">OpenAI - Project</h1>
  2 | <p align="center">This Repository using OpenAI API to interact with ChatGPT & Dall·E 2. Built with ReactJS and Tailwind CSS</p>
  3 | 
  4 | <img src="https://user-images.githubusercontent.com/64394320/210140604-04dd93f5-f9c5-4f1a-87b6-ccdc5b7c9002.png" alt="OpenAI Project">
  5 | 
  6 | # Table of Contents
  7 | 
  8 | - [Running on Localhost](https://github.com/armandwipangestu/openai-project#running-on-localhost)
  9 | - [How to get API key?](https://github.com/armandwipangestu/openai-project#how-to-get-api-key)
 10 | - [Information](https://github.com/armandwipangestu/openai-project#information)
 11 | - [Demo](https://github.com/armandwipangestu/openai-project#demo)
 12 | 
 13 | ## Running on Localhost
 14 | 
 15 | - Clone this repository
 16 | 
 17 | ```bash
 18 | git clone https://github.com/armandwipangestu/openai-project
 19 | ```
 20 | 
 21 | - Install dependency library
 22 | 
 23 | ```bash
 24 | npm i
 25 | ```
 26 | 
 27 | - Copy `.env.example` to `.env` and fill it with your API
 28 | 
 29 | ```bash
 30 | cp .env.example .env
 31 | ```
 32 | 
 33 | ```bash
 34 | REACT_APP_API_KEY="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
 35 | ```
 36 | 
 37 | - Run Application
 38 | 
 39 | ```bash
 40 | npm start
 41 | ```
 42 | 
 43 | ## How to get API key?
 44 | 
 45 | > **NOTE**: Please take care of your API Key as OpenAI limits usage to $18.00 USD
 46 | 
 47 | You must first register on the [openai website](https://beta.openai.com/), then click the profile menu and select `View API keys`
 48 | 
 49 | ## Information
 50 | 
 51 | > Because my API Key has reached the limit, the input form is disabled
 52 | 
 53 | To enable input form and button (to hit the API to OpenAI) give comment the `disabled` and `readOnly` attributes on the `<textarea>` tag and uncomment the `onClick` attribute on the `<button>` tag. To enable chatLog give uncomment the loop or map code
 54 | 
 55 | - `src/components/ChatGPT/completion.chatgpt.js`
 56 | 
 57 | https://user-images.githubusercontent.com/64394320/210139174-8cf0e038-d9a2-4ff0-97cc-ef654ca491d7.mp4
 58 | 
 59 | ```javascript
 60 | const Completion = () => {
 61 |     ...
 62 |       <div className="min-h-screen flex flex-col justify-start">
 63 |         <div>
 64 |           {/*
 65 | 
 66 |             |--------------------------------------------------------------------------
 67 |             | NOTE: Give Comment on the Component below to remove information
 68 |             |--------------------------------------------------------------------------
 69 |             |
 70 |             |
 71 | 
 72 |           */}
 73 |           {/* <Information /> */}
 74 | 
 75 |           {/*
 76 | 
 77 |             |--------------------------------------------------------------------------
 78 |             | NOTE: Give Uncomment on the code below to make work
 79 |             |--------------------------------------------------------------------------
 80 |             |
 81 |             |
 82 | 
 83 |           */}
 84 | 
 85 |           {chatLog.map((log, i) => (
 86 |             <>
 87 |               {log.user === "me" && (
 88 |                 <div
 89 |                   className="flex p-5 rounded-lg mb-5 bg-blue-300 border-2 border-black"
 90 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
 91 |                   key={i}
 92 |                 >
 93 |                   <img
 94 |                     src="avatar2.png"
 95 |                     className="w-8 h-6 mr-2 -ml-1"
 96 |                     alt="user"
 97 |                   />
 98 |                   <div>
 99 |                     <span className="text-black mt-5">{log.message}</span>
100 |                   </div>
101 |                 </div>
102 |               )}
103 |               {log.user === "gpt" && (
104 |                 <div
105 |                   className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
106 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
107 |                   key={i}
108 |                 >
109 |                   <img
110 |                     src="openai-dark.png"
111 |                     className="w-6 h-6 mr-3"
112 |                     alt="gpt"
113 |                   />
114 |                   <div>
115 |                     <span className="text-black">{log.message}</span>
116 |                   </div>
117 |                 </div>
118 |               )}
119 |             </>
120 |           ))}
121 |           {loading && (
122 |             <div className="relative">
123 |               <div
124 |                 className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
125 |                 style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
126 |               >
127 |                 <img src="openai-dark.png" className="w-6 h-6 mr-3" alt="gpt" />
128 |                 <div class="col-3">
129 |                   <div class="snippet" data-title="dot-pulse">
130 |                     <div class="stage">
131 |                       <div class="dot-pulse"></div>
132 |                     </div>
133 |                   </div>
134 |                 </div>
135 |               </div>
136 |             </div>
137 |           )}
138 |         </div>
139 | 
140 |         <div className="mt-auto flex sticky bottom-5">
141 |           <div
142 |             className={`flex absolute bottom-0 right-0 md:pb-2.5 px-4 py-2.5 rounded-tr-md rounded-br-md ${
143 |               prompt && "bg-black text-white px-4 py-2.5"
144 |             }`}
145 |           >
146 |             <button
147 |               className={`${!prompt && "cursor-not-allowed"}`}
148 |               type="submit"
149 |               //
150 |               // |--------------------------------------------------------------------------
151 |               // | NOTE: Uncomment this attribute 'onClick' to hit API OpenAI
152 |               // |--------------------------------------------------------------------------
153 |               // |
154 |               // |
155 |               //
156 |               onClick={generateCompletion}
157 |             >
158 |               Send
159 |             </button>
160 |           </div>
161 |           <TextareaAutosize
162 |             className="w-full border-2 border-black rounded-md placeholder-gray-500 resize-none py-2 pl-3 pr-10 md:pl-5 outline-none"
163 |             placeholder="Enter your message here"
164 |             style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
165 |             maxRows={5}
166 |             value={prompt}
167 |             onChange={(e) => setPrompt(e.target.value)}
168 |             //
169 |             // |--------------------------------------------------------------------------
170 |             // | NOTE: Give Comment on the two attributes below to enable input
171 |             // |--------------------------------------------------------------------------
172 |             // |
173 |             // |
174 |             //
175 |             // disabled
176 |             // readOnly
177 |           />
178 |         </div>
179 |       </div>
180 |     ...
181 | }
182 | ```
183 | 
184 | - `src/components/Dall-E/image.dalle.js`
185 | 
186 | https://user-images.githubusercontent.com/64394320/210139273-39e9aa02-4fb0-483c-a69a-e6931b4b5daf.mp4
187 | 
188 | ```javascript
189 | const Image = () => {
190 |     ...
191 |       <div className="min-h-screen flex flex-col justify-start">
192 |         <div className="">
193 |           {/*
194 | 
195 |             |--------------------------------------------------------------------------
196 |             | NOTE: Give Comment on the Component below to remove information
197 |             |--------------------------------------------------------------------------
198 |             |
199 |             |
200 | 
201 |           */}
202 |           {/* <Information /> */}
203 | 
204 |           {/*
205 | 
206 |             |--------------------------------------------------------------------------
207 |             | NOTE: Give Uncomment on the code below to make work
208 |             |--------------------------------------------------------------------------
209 |             |
210 |             |
211 | 
212 |           */}
213 | 
214 |           {chatLog.map((d, i) => (
215 |             <>
216 |               {d.user === "me" && (
217 |                 <div
218 |                   className="flex p-5 rounded-lg mt-5 mb-5 bg-blue-300 border-2 border-black"
219 |                   style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
220 |                   key={i}
221 |                 >
222 |                   <img
223 |                     src="avatar2.png"
224 |                     className="w-8 h-6 mr-2 -ml-1"
225 |                     alt="user"
226 |                   />
227 |                   <div>
228 |                     <span className="text-black">{d.message}</span>
229 |                   </div>
230 |                 </div>
231 |               )}
232 |               {d.user === "dall-e" && (
233 |                 <div className="grid grid-cols-1 md:grid-cols-5 gap-4 mb-5">
234 |                   {d.message.map((res, i) => {
235 |                     return (
236 |                       <React.Fragment key={i}>
237 |                         <button
238 |                           onClick={() => {
239 |                             setShowModal(true);
240 |                             setModalUrl(res.url);
241 |                           }}
242 |                         >
243 |                           <img
244 |                             className="max-w-lg rounded-sm w-full h-48 md:hover:h-44 border-2 border-black"
245 |                             style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
246 |                             src={res.url}
247 |                             alt={`${i}`}
248 |                           />
249 |                         </button>
250 |                       </React.Fragment>
251 |                     );
252 |                   })}
253 |                   <Modals
254 |                     onClose={handleOnClose}
255 |                     visible={showModal}
256 |                     url={modalUrl}
257 |                     name={prompt}
258 |                   />
259 |                 </div>
260 |               )}
261 |             </>
262 |           ))}
263 |           {loading && (
264 |             <div className="relative">
265 |               <div
266 |                 className="flex p-5 bg-yellow-400 rounded-lg mt-5 mb-5 border-2 border-black"
267 |                 style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
268 |               >
269 |                 <img
270 |                   src="openai-dark.png"
271 |                   className="w-6 h-6 mr-3 rounded-lg"
272 |                   alt="gpt"
273 |                 />
274 |                 <div className="col-3">
275 |                   <div className="snippet" data-title="dot-pulse">
276 |                     <div className="stage">
277 |                       <div className="dot-pulse"></div>
278 |                     </div>
279 |                   </div>
280 |                 </div>
281 |               </div>
282 |             </div>
283 |           )}
284 |         </div>
285 |         {!showModal && (
286 |           <div className="mt-auto flex flex-col sticky bottom-5 justify-start align-start">
287 |             <div className="mb-2 text-gray-600 text-xs md:text-sm">
288 |               Start with a detailed description
289 |               <button
290 |                 className="ml-1 border-2 border-black px-2.5 py-1 rounded-md text-black bg-green-400 hover:bg-green-500 text-xs"
291 |                 style={{ boxShadow: "0.2rem 0.2rem 0 #222" }}
292 |                 //
293 |                 // |--------------------------------------------------------------------------
294 |                 // | NOTE: Uncomment this attribute 'onClick' to hit Generate a Surprise
295 |                 // |--------------------------------------------------------------------------
296 |                 // |
297 |                 // |
298 |                 //
299 |                 onClick={generateSurprise}
300 |               >
301 |                 Surprise me
302 |               </button>
303 |             </div>
304 |             <div
305 |               className={`flex absolute bottom-0 right-0 md:pb-2.5 px-4 py-2.5 rounded-tr-md rounded-br-md ${
306 |                 prompt && "bg-black text-white px-4 py-2.5"
307 |               }`}
308 |             >
309 |               <button
310 |                 className={`${!prompt && "cursor-not-allowed"}`}
311 |                 type="submit"
312 |                 //
313 |                 // |--------------------------------------------------------------------------
314 |                 // | NOTE: Uncomment this attribute 'onClick' to hit API OpenAI
315 |                 // |--------------------------------------------------------------------------
316 |                 // |
317 |                 // |
318 |                 //
319 |                 onClick={generateImage}
320 |               >
321 |                 Generate
322 |               </button>
323 |             </div>
324 |             <TextareaAutosize
325 |               className="w-full border-2 border-black rounded-md placeholder-gray-500 resize-none py-2 pl-3 pr-10 md:pl-5 outline-none"
326 |               placeholder="Enter your message here"
327 |               style={{ boxShadow: "0.4rem 0.4rem 0 #222" }}
328 |               maxRows={5}
329 |               value={prompt}
330 |               onChange={(e) => setPrompt(e.target.value)}
331 |               //
332 |               // |--------------------------------------------------------------------------
333 |               // | NOTE: Give Comment on the two attributes below to enable input
334 |               // |--------------------------------------------------------------------------
335 |               // |
336 |               // |
337 |               //
338 |               // disabled
339 |               // readOnly
340 |             />
341 |           </div>
342 |         )}
343 |       </div>
344 |     ...
345 | };
346 | ```
347 | 
348 | ## Demo
349 | 
350 | - ChatGPT
351 | 
352 | https://user-images.githubusercontent.com/64394320/210139372-824284d8-6170-4308-95f2-02d0f272fa67.mp4
353 | 
354 | - Dall-E
355 | 
356 | https://user-images.githubusercontent.com/64394320/210139754-bf37f019-1dac-49ae-9f9f-56b2e618c575.mp4
357 | 


--------------------------------------------------------------------------------