├── react-web
    ├── public
    │   ├── robots.txt
    │   ├── chatgpt-open-ui-logo-compressed.jpg
    │   ├── manifest.json
    │   └── index.html
    ├── src
    │   ├── media
    │   │   └── screenshot.png
    │   ├── index.js
    │   ├── index.css
    │   ├── App.css
    │   ├── api
    │   │   └── api.js
    │   ├── components
    │   │   └── Codeblock.js
    │   ├── parseMarkdown
    │   │   └── parseMarkdown.js
    │   ├── dynamicInput
    │   │   └── dynamicInput.js
    │   ├── prism
    │   │   └── prism.css
    │   └── App.js
    ├── tailwind.config.js
    ├── .gitignore
    ├── .eslintrc.js
    ├── package.json
    └── README.md
├── LICENSE
└── README.md


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


--------------------------------------------------------------------------------
/react-web/src/media/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tohrxyz/chatgpt-open-ui/HEAD/react-web/src/media/screenshot.png


--------------------------------------------------------------------------------
/react-web/public/chatgpt-open-ui-logo-compressed.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tohrxyz/chatgpt-open-ui/HEAD/react-web/public/chatgpt-open-ui-logo-compressed.jpg


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


--------------------------------------------------------------------------------
/react-web/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 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 
13 | 


--------------------------------------------------------------------------------
/react-web/.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.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/react-web/src/index.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 8 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 9 |     sans-serif;
10 |   -webkit-font-smoothing: antialiased;
11 |   -moz-osx-font-smoothing: grayscale;
12 | }
13 | 
14 | code {
15 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
16 |     monospace;
17 | }
18 | 


--------------------------------------------------------------------------------
/react-web/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "GPT UI",
 3 |   "name": "ChatGPT Open UI",
 4 |   "icons": [
 5 |     {
 6 |       "src": "chatgpt-open-ui-logo-compressed.jpg",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "chatgpt-open-ui-logo-compressed.jpg",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "chatgpt-open-ui-logo-compressed.jpg",
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 | 


--------------------------------------------------------------------------------
/react-web/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 | 


--------------------------------------------------------------------------------
/react-web/src/api/api.js:
--------------------------------------------------------------------------------
 1 | import { Configuration, OpenAIApi } from 'openai';
 2 | 
 3 | export default async function onSubmit(apiKey, inputText, setResult) {
 4 | 
 5 |   try{
 6 | 
 7 |     const configuration = new Configuration({
 8 |       apiKey: apiKey,
 9 |     });
10 | 
11 |     const openai = new OpenAIApi(configuration);
12 | 
13 |     // let codeAddition = " specify language behind after starting ```";
14 | 
15 |     const completion = await openai.createChatCompletion({
16 |       model: "gpt-3.5-turbo",
17 |       messages: [{role: "user", content: inputText}],
18 |     });
19 | 
20 |     const txt = completion.data.choices[0].message.content;
21 |     console.log(txt);
22 |     setResult(txt.trimStart());
23 |   } catch(error) {
24 |     console.error(error);
25 |     alert(error.message);
26 |   }
27 | }


--------------------------------------------------------------------------------
/react-web/src/components/Codeblock.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import Prism from "../prism/prism.js";
 3 | import '../prism/prism.css';
 4 | 
 5 | export default function Codeblock(props) {
 6 |   useEffect(() => {
 7 |     Prism.highlightAll();
 8 |   }, []);
 9 |   
10 |   const [copied, setCopied] = useState(false);
11 | 
12 |   const handleClick = () => {
13 |     setCopied(true);
14 |   
15 |     navigator.clipboard.writeText(props.children);
16 |     setTimeout(() => {
17 |       setCopied(false);
18 |     }, 3000);
19 |   }
20 | 
21 |   return (
22 |     <pre>
23 |         <div className='flex justify-between text-sm py-1 px-4 -m-4 mb-4 bg-gray-700 text-gray-300 rounded-sm'>
24 |           {/* {console.log(props.language)} */}
25 |           <div>{props.language}</div>
26 |           <button onClick={handleClick}>{copied ? 'Copied' : 'Copy'}</button>
27 |         </div>
28 |         <code className={`language-${props.language}`}>
29 |             {props.children}
30 |         </code>
31 |     </pre>
32 |   );
33 | }


--------------------------------------------------------------------------------
/react-web/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |     env: {
 3 |         browser: true, // Browser global variables like `window` etc.
 4 |         commonjs: true, // CommonJS global variables and CommonJS scoping.Allows require, exports and module.
 5 |         es6: true, // Enable all ECMAScript 6 features except for modules.
 6 |         jest: true, // Jest global variables like `it` etc.
 7 |         node: true // Defines things like process.env when generating through node
 8 |     },
 9 |     extends: [],
10 |     parser: "@babel/eslint-parser", // Uses babel-eslint transforms.
11 |     parserOptions: {
12 |         ecmaFeatures: {
13 |             jsx: true
14 |         },
15 |         ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
16 |         sourceType: "module" // Allows for the use of imports
17 |     },
18 |     plugins: [],
19 |     root: true, // For configuration cascading.
20 |     rules: {},
21 |     settings: {
22 |         react: {
23 |             version: "detect" // Detect react version
24 |         }
25 |     }
26 | };


--------------------------------------------------------------------------------
/react-web/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-web",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "openai": "^3.2.1",
10 |     "react": "^18.2.0",
11 |     "react-dom": "^18.2.0",
12 |     "react-scripts": "5.0.1",
13 |     "react-spinners": "^0.13.8",
14 |     "web-vitals": "^2.1.4"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start",
18 |     "build": "react-scripts build",
19 |     "test": "react-scripts test",
20 |     "eject": "react-scripts eject"
21 |   },
22 |   "browserslist": {
23 |     "production": [
24 |       ">0.2%",
25 |       "not dead",
26 |       "not op_mini all"
27 |     ],
28 |     "development": [
29 |       "last 1 chrome version",
30 |       "last 1 firefox version",
31 |       "last 1 safari version"
32 |     ]
33 |   },
34 |   "devDependencies": {
35 |     "@babel/eslint-parser": "^7.19.1",
36 |     "babel-eslint": "^10.1.0",
37 |     "eslint": "^8.35.0",
38 |     "tailwindcss": "^3.2.7"
39 |   }
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Tomáš Hrib
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 👾 What is this?
 2 | An open UI front-end website to interact with ChatGPT API from OpenAI.
 3 | 
 4 | <img src="https://github.com/tohrxyz/chatgpt-open-ui/blob/main/react-web/src/media/screenshot.png" width="500px"/>
 5 | 
 6 | # 🧑‍💻 What is the tech stack?
 7 |  - written in ``React.js``
 8 |  - responsive design in ``TailWindCSS``
 9 | 
10 | # 🔌 Official hosting
11 | You can try this app on https://gpt.kotol.cloud
12 | 
13 | # 📄 License
14 | This project is licensed under [MIT License](https://github.com/tohrxyz/chatgpt-open-ui/blob/main/LICENSE)
15 | 
16 | # 💸 How to support this project?
17 |   - Bitcoin donate: ``36ZesvSFoyDBJcJMYRyUP2hnWcwjxjp7JD``
18 |   - Lightning Bitcoin donate: ``tohr@lnbc.cz``
19 |   - Monero donate: ``49261YsGmYjeEAipPeRC5g2KR8imwedAYX4i3Gy9hYvN7JUBB4Vyc5U7aDbsnUF43S7tjLptrYmdt32P4yytvo9s6p51dgc``
20 | 
21 | # 📥 How to contribute?
22 | All contributions to this FOSS project are greatly appreciated! You can look at [Issues](https://github.com/tohrxyz/chatgpt-open-ui/issues)
23 | or submitting a Pull Request with something you made yourself!
24 | 
25 | # 💻 How to run locally?
26 |   1. Clone this repository with ``git clone``
27 |   2. Go to the folder with ``cd chatgpt-open-ui/react-web``
28 |   3. ``npm install``
29 |   4. ``npm start``
30 | 


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


--------------------------------------------------------------------------------
/react-web/src/parseMarkdown/parseMarkdown.js:
--------------------------------------------------------------------------------
 1 | import Codeblock from "../components/Codeblock";
 2 | 
 3 | export default function parseMarkdown(markdown) {
 4 |   // matches a markdown codeblock
 5 |   const codeblockRegex = /(```[\s\S]*?```)/g;
 6 |   
 7 |   // splits a markdown string into parts containing either text or a codeblock
 8 |   const parts = markdown.split(codeblockRegex);
 9 | 
10 |   // if message contains codeblocks, parses the split parts into components
11 |   if (parts.length > 1) {
12 |     // iterates through the split parts,
13 |     // removes empty strings and converts string codeblocks into codeblock elements
14 |     return parts.filter(Boolean).map((part, index) => {
15 |       // if current part is a codeblock
16 |       if (part.startsWith('```')) {
17 |         // extracts language and code from the string codeblock
18 |         let matches = part.match(/^```(\S*)\n([\s\S]*)\n```$/);
19 |         let language = matches?.[1] ?? '';
20 |         let code = matches?.[2] ?? '';
21 | 
22 |         return (
23 |             <Codeblock key={index} language={correctLanguage(language)}>
24 |               {code.trim()}
25 |             </Codeblock>
26 |         );
27 |       // if current part is plain text
28 |       } else {
29 |         // if text starts with a \n, removes it
30 |         if (part.startsWith('\n')){
31 |           part = part.slice(1);
32 |         }
33 |         return (<p key={index}>{part}</p>);
34 |       };
35 |     });
36 |   }
37 | 
38 |   // if no parsing is needed, returns original string
39 |   return markdown;
40 | }
41 | 
42 | // converts language names to the ones used by Prism.js
43 | function correctLanguage(language) {
44 |   
45 |   // convert language to lowercase
46 |   language = language.toLowerCase();
47 |   
48 |   switch(language) {
49 |     case "vue": return "js";
50 |     case "react": return "js";
51 |     case "c++": return "cpp";
52 |     case "c#": return "cs";
53 |     default: return language;
54 |   }
55 | }


--------------------------------------------------------------------------------
/react-web/src/dynamicInput/dynamicInput.js:
--------------------------------------------------------------------------------
 1 | let minRows = 1;
 2 | let maxRows = 10;
 3 | 
 4 | function allowTextareasToDynamicallyResize() {
 5 |     let textareas = document.getElementsByTagName('textarea');
 6 |     
 7 |     for (let i = 0; i < textareas.length; i++) {
 8 |       textareas[i].setAttribute('rows', minRows); // Set the initial number of rows to 1
 9 |       textareas[i].style.height = textareas[i].scrollHeight + 'px';
10 |       
11 |       textareas[i].addEventListener('input', (e) => {
12 |         let lineHeight = parseInt(getComputedStyle(e.target).lineHeight);
13 |         let rows = Math.floor(e.target.scrollHeight / lineHeight);
14 | 
15 |         // checks for min and max rows
16 |         if (rows < minRows) {
17 |             rows = minRows;
18 |         } 
19 |         else if (rows > maxRows) {
20 |             rows = maxRows;
21 |             // Show the scrollbar when number of rows exceeds maxRows
22 |             e.target.style.overflowY = 'scroll';
23 |         } 
24 |         else {
25 |             // Hide the scrollbar when number of rows is between minRows and maxRows
26 |             e.target.style.overflowY = 'hidden';
27 |         }
28 |         e.target.setAttribute('rows', rows); // Update the number of rows
29 |         e.target.style.height = 'auto'; // Reset the height before setting it based on the number of rows
30 |         e.target.style.height = rows * lineHeight + 'px';
31 |       });
32 |       textareas[i].style.overflowY = 'hidden';
33 |       
34 |       // scrolls to the bottom of the textarea when it is focused
35 |       // this is to prevent the textarea from being hidden behind the keyboard on mobile
36 |       textareas[i].addEventListener('focus', (e) => {
37 |           let scrollY = window.scrollY;
38 |           let viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
39 |           let top = e.target.getBoundingClientRect().top;
40 |           let height = e.target.getBoundingClientRect().height;
41 |           if (top + height > viewportHeight) {
42 |             window.scrollTo(0, scrollY + top + height - viewportHeight);
43 |           }
44 |         });
45 |     }
46 | }
47 | 
48 | export default allowTextareasToDynamicallyResize;


--------------------------------------------------------------------------------
/react-web/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `npm start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
13 | 
14 | The page will reload when you make changes.\
15 | You may also see any lint errors in the console.
16 | 
17 | ### `npm test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `npm run build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `npm run eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
35 | 
36 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
39 | 
40 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 
48 | ### Code Splitting
49 | 
50 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
51 | 
52 | ### Analyzing the Bundle Size
53 | 
54 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
55 | 
56 | ### Making a Progressive Web App
57 | 
58 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
59 | 
60 | ### Advanced Configuration
61 | 
62 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
63 | 
64 | ### Deployment
65 | 
66 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
67 | 
68 | ### `npm run build` fails to minify
69 | 
70 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
71 | 


--------------------------------------------------------------------------------
/react-web/src/prism/prism.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.29.0
2 | https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig&plugins=line-numbers */
3 | code[class*=language-],pre[class*=language-]{color:#f8f8f2;background:0 0;text-shadow:0 1px rgba(0,0,0,.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.class-name,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}
4 | pre[class*=language-].line-numbers{position:relative;padding-left:3.8em;counter-reset:linenumber}pre[class*=language-].line-numbers>code{position:relative;white-space:inherit}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{display:block;counter-increment:linenumber}.line-numbers-rows>span:before{content:counter(linenumber);color:#999;display:block;padding-right:.8em;text-align:right}
5 | 


--------------------------------------------------------------------------------
/react-web/src/App.js:
--------------------------------------------------------------------------------
  1 | import './App.css';
  2 | import { useEffect, useState} from 'react'
  3 | import onSubmit from './api/api';
  4 | import HashLoader from 'react-spinners/HashLoader';
  5 | import parseMarkdown from './parseMarkdown/parseMarkdown';
  6 | import allowTextareasToDynamicallyResize from './dynamicInput/dynamicInput';
  7 | 
  8 | function App() {
  9 |   const [apiKey, setApiKey] = useState("");
 10 |   const [inputText, setInputText] = useState("");
 11 |   const [result, setResult] = useState("");
 12 |   const [loading, setLoading] = useState(false);
 13 |   const [checked, setChecked] = useState(false);
 14 |   const [parsedResult, setParsedResult] = useState("");
 15 | 
 16 |   // each time a result is recieved from the API,
 17 |   // parses it from plain text to elements
 18 |   useEffect(() => {
 19 |     setParsedResult(parseMarkdown(result));
 20 |   }, [result]);
 21 | 
 22 |   // gets api key from cookies and local storage and sets it into api key input field
 23 |   useEffect(() => {
 24 |     const storedApiKey = localStorage.getItem("apiKey");
 25 |     if (storedApiKey) {
 26 |       setApiKey(storedApiKey);
 27 |     }
 28 |   }, []);
 29 | 
 30 |   const handleSubmit = (e) => {
 31 |     e.preventDefault();
 32 |     setLoading(true);
 33 |     onSubmit(apiKey, inputText, setResult).then(() => {
 34 |       setLoading(false);
 35 |     });
 36 |   }
 37 | 
 38 |   // overrides default css for HashLoader spinner
 39 |   const override = {
 40 |     display: "block",
 41 |     margin: "0 auto",
 42 |   }
 43 | 
 44 |   const showPassword = () => {
 45 |     if(checked){
 46 |       setChecked(false);
 47 |     } else{
 48 |       setChecked(true);
 49 |     }
 50 |   }
 51 | 
 52 |   // saves api key to cookies and local storage
 53 |   const handleApiKeySave = (e) => {
 54 |     e.preventDefault();
 55 |     localStorage.setItem('apiKey', apiKey);
 56 |   }
 57 | 
 58 |   // update textarea height on input
 59 |   useEffect(() => {
 60 |     allowTextareasToDynamicallyResize();
 61 |   }, []);
 62 | 
 63 |   return (
 64 |     <div className="container mx-auto py-4 max-w-3xl">
 65 | 
 66 |       {/* title */}
 67 |       <h1 className="text-4xl font-bold mb-4 text-center">ChatGPT Open UI</h1>
 68 | 
 69 |       {/* form container */}
 70 |       <form onSubmit={handleSubmit} className="flex flex-col mx-5">
 71 | 
 72 |         {/* handles api key input */}
 73 |         <label htmlFor="api-key" className="mb-2 font-bold">API Key</label>
 74 |         <input
 75 |           type={checked ? "text" : "password"}
 76 |           id="api-key"
 77 |           value={apiKey}
 78 |           onChange={(e) => setApiKey(e.target.value)}
 79 |           className="border-2 rounded border-blue-400 p-2 mb-1"
 80 |         />
 81 | 
 82 |         {/* container for show api key checkbox and save api key button */}
 83 |         <div className="flex flex-row justify-between mb-6 mt-4">
 84 |          {/* handles show api key on/off */} 
 85 |           <div className="text-end">
 86 |             <label htmlFor="show-password" className='mb-3 font-bold mr-5'>Show API key:</label>
 87 |             <input
 88 |               type="checkbox"
 89 |               onClick={showPassword}
 90 |               id="show-password"
 91 |             />
 92 |           </div>
 93 | 
 94 |           <div>
 95 |             <button
 96 |               onClick={handleApiKeySave}
 97 |               className="bg-blue-500 text-white py-1 px-2 rounded text-center w-50 text-md flex justify-center hover:bg-blue-800"
 98 |             >
 99 |               Save API Key
100 |             </button>
101 |           </div>
102 |         </div>
103 | 
104 | 
105 |         {/* handles text prompt from user */}
106 |         <label htmlFor="input-text" className="mb-2 font-bold">Input Text</label>
107 |         <textarea
108 |           id="input-text"
109 |           value={inputText}
110 |           onChange={(e) => setInputText(e.target.value)}
111 |           className="border-2 rounded-xl border-blue-500 p-3 mb-10 h-auto max-h-none resize-none"
112 |           rows={1}
113 |         ></textarea>
114 | 
115 |         {/* handles button submit */}
116 |         <div className="flex justify-center">
117 |           <button type="submit" className="bg-blue-500 text-white py-3 px-4 rounded text-center w-60 flex justify-center hover:bg-blue-800" disabled={loading}>
118 |             
119 |             {/* when loading spinner is displayed, otherwise button is enabled */}
120 |             {loading ? 
121 |               <HashLoader 
122 |                 color="white"
123 |                 loading={loading}
124 |                 size={25}
125 |                 aria-label="Loading"
126 |                 cssOverride={override}
127 |               /> : <div className="font-bold">Ask nicely</div>
128 |             }
129 |           </button>
130 |         </div>
131 |       </form>
132 |       
133 |       {/* result display */}
134 |       <div>
135 |         {result && (
136 |           <h2 className="font-bold mb-2 mx-4 mt-6">Result</h2>
137 |         )}
138 |         {result && (
139 |           <div className="border-2 rounded-xl border-blue-400 p-4 mt-2 mx-4">
140 |             <div className="whitespace-pre-line">{parsedResult}</div>
141 |           </div>
142 |         )}
143 |       </div>
144 | 
145 |     </div>
146 |   );
147 | }
148 | 
149 | export default App;
150 | 


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