0a4a261d by Ryan

Merge branch '26903_chatgpt_output_error' into 'master'

26903 chatgpt output error

See merge request !12
2 parents 3f4efe8d ed824fdc
node_modules
\ No newline at end of file
node_modules
.env
\ No newline at end of file
......
# ChatGPT Server
## Installation
npm install on the root directory.
## Create ENV Variables
Create an .env file in the root directory of your application.
Duplicate the env-template and rename to .env
In the .env file, define the environment variables you want to use in your application. ex.
`API_KEY="sk-xxxxxxxx"`
`API_ORG="org-xxxxxxx"`
## Run server
Run server on the root directory
`node index.js`
### Additional Configuration
After running server, proceed to /client README.md for instructions
\ No newline at end of file
......@@ -2,7 +2,6 @@
# dependencies
/node_modules
node_modules
/.pnp
.pnp.js
......@@ -14,6 +13,7 @@ node_modules
# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
......
# ChatGPT Client
# Getting Started with Create React App
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
## Installation
npm install on the /client directory.
## Create ENV Variables
Create an .env file in the /client directory of your application.
Duplicate the env-template and rename to .env
In the .env file, define the environment variables you want to use in your application. ex.
REACT_APP_SERVER_URL=http://xxxxxx/
## Available Scripts
In the project directory, you can run:
In the /client directory, you can run:
### `npm start`
......
REACT_APP_SERVER_URL=
\ No newline at end of file
......@@ -2996,9 +2996,9 @@
}
},
"@types/yargs": {
"version": "17.0.20",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.20.tgz",
"integrity": "sha512-eknWrTHofQuPk2iuqDm1waA7V6xPlbgBoaaXEgYkClhLOnB0TtbW+srJaOToAgawPxPlHQzwypFA2bhZaUGP5A==",
"version": "17.0.22",
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.22.tgz",
"integrity": "sha512-pet5WJ9U8yPVRhkwuEIp5ktAeAqRZOq4UdAyWLWzxbtpyXnzbtLdKiXAjJzi/KLmPGS9wk86lUFWZFN6sISo4g==",
"requires": {
"@types/yargs-parser": "*"
}
......@@ -3009,14 +3009,15 @@
"integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
},
"@typescript-eslint/eslint-plugin": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.49.0.tgz",
"integrity": "sha512-IhxabIpcf++TBaBa1h7jtOWyon80SXPRLDq0dVz5SLFC/eW6tofkw/O7Ar3lkx5z5U6wzbKDrl2larprp5kk5Q==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.50.0.tgz",
"integrity": "sha512-vwksQWSFZiUhgq3Kv7o1Jcj0DUNylwnIlGvKvLLYsq8pAWha6/WCnXUeaSoNNha/K7QSf2+jvmkxggC1u3pIwQ==",
"requires": {
"@typescript-eslint/scope-manager": "5.49.0",
"@typescript-eslint/type-utils": "5.49.0",
"@typescript-eslint/utils": "5.49.0",
"@typescript-eslint/scope-manager": "5.50.0",
"@typescript-eslint/type-utils": "5.50.0",
"@typescript-eslint/utils": "5.50.0",
"debug": "^4.3.4",
"grapheme-splitter": "^1.0.4",
"ignore": "^5.2.0",
"natural-compare-lite": "^1.4.0",
"regexpp": "^3.2.0",
......@@ -3025,56 +3026,56 @@
}
},
"@typescript-eslint/experimental-utils": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.49.0.tgz",
"integrity": "sha512-veLpCJLYn44Fru7mSvi2doxQMzMCOFSDYdMUQhAzaH1vFYq2RVNpecZ8d18Wh6UMv07yahXkiv/aShWE48iE9Q==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.50.0.tgz",
"integrity": "sha512-gZIhzNRivy0RVqcxjKnQ+ipGc0qolilhBeNmvH+Dvu7Vymug+IfiYxTj2zM7mIlHsw6Q5aH7L7WmuTE3tZyzag==",
"requires": {
"@typescript-eslint/utils": "5.49.0"
"@typescript-eslint/utils": "5.50.0"
}
},
"@typescript-eslint/parser": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.49.0.tgz",
"integrity": "sha512-veDlZN9mUhGqU31Qiv2qEp+XrJj5fgZpJ8PW30sHU+j/8/e5ruAhLaVDAeznS7A7i4ucb/s8IozpDtt9NqCkZg==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.50.0.tgz",
"integrity": "sha512-KCcSyNaogUDftK2G9RXfQyOCt51uB5yqC6pkUYqhYh8Kgt+DwR5M0EwEAxGPy/+DH6hnmKeGsNhiZRQxjH71uQ==",
"requires": {
"@typescript-eslint/scope-manager": "5.49.0",
"@typescript-eslint/types": "5.49.0",
"@typescript-eslint/typescript-estree": "5.49.0",
"@typescript-eslint/scope-manager": "5.50.0",
"@typescript-eslint/types": "5.50.0",
"@typescript-eslint/typescript-estree": "5.50.0",
"debug": "^4.3.4"
}
},
"@typescript-eslint/scope-manager": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.49.0.tgz",
"integrity": "sha512-clpROBOiMIzpbWNxCe1xDK14uPZh35u4QaZO1GddilEzoCLAEz4szb51rBpdgurs5k2YzPtJeTEN3qVbG+LRUQ==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.50.0.tgz",
"integrity": "sha512-rt03kaX+iZrhssaT974BCmoUikYtZI24Vp/kwTSy841XhiYShlqoshRFDvN1FKKvU2S3gK+kcBW1EA7kNUrogg==",
"requires": {
"@typescript-eslint/types": "5.49.0",
"@typescript-eslint/visitor-keys": "5.49.0"
"@typescript-eslint/types": "5.50.0",
"@typescript-eslint/visitor-keys": "5.50.0"
}
},
"@typescript-eslint/type-utils": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.49.0.tgz",
"integrity": "sha512-eUgLTYq0tR0FGU5g1YHm4rt5H/+V2IPVkP0cBmbhRyEmyGe4XvJ2YJ6sYTmONfjmdMqyMLad7SB8GvblbeESZA==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.50.0.tgz",
"integrity": "sha512-dcnXfZ6OGrNCO7E5UY/i0ktHb7Yx1fV6fnQGGrlnfDhilcs6n19eIRcvLBqx6OQkrPaFlDPk3OJ0WlzQfrV0bQ==",
"requires": {
"@typescript-eslint/typescript-estree": "5.49.0",
"@typescript-eslint/utils": "5.49.0",
"@typescript-eslint/typescript-estree": "5.50.0",
"@typescript-eslint/utils": "5.50.0",
"debug": "^4.3.4",
"tsutils": "^3.21.0"
}
},
"@typescript-eslint/types": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.49.0.tgz",
"integrity": "sha512-7If46kusG+sSnEpu0yOz2xFv5nRz158nzEXnJFCGVEHWnuzolXKwrH5Bsf9zsNlOQkyZuk0BZKKoJQI+1JPBBg=="
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.50.0.tgz",
"integrity": "sha512-atruOuJpir4OtyNdKahiHZobPKFvZnBnfDiyEaBf6d9vy9visE7gDjlmhl+y29uxZ2ZDgvXijcungGFjGGex7w=="
},
"@typescript-eslint/typescript-estree": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.49.0.tgz",
"integrity": "sha512-PBdx+V7deZT/3GjNYPVQv1Nc0U46dAHbIuOG8AZ3on3vuEKiPDwFE/lG1snN2eUB9IhF7EyF7K1hmTcLztNIsA==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.50.0.tgz",
"integrity": "sha512-Gq4zapso+OtIZlv8YNAStFtT6d05zyVCK7Fx3h5inlLBx2hWuc/0465C2mg/EQDDU2LKe52+/jN4f0g9bd+kow==",
"requires": {
"@typescript-eslint/types": "5.49.0",
"@typescript-eslint/visitor-keys": "5.49.0",
"@typescript-eslint/types": "5.50.0",
"@typescript-eslint/visitor-keys": "5.50.0",
"debug": "^4.3.4",
"globby": "^11.1.0",
"is-glob": "^4.0.3",
......@@ -3083,15 +3084,15 @@
}
},
"@typescript-eslint/utils": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.49.0.tgz",
"integrity": "sha512-cPJue/4Si25FViIb74sHCLtM4nTSBXtLx1d3/QT6mirQ/c65bV8arBEebBJJizfq8W2YyMoPI/WWPFWitmNqnQ==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.50.0.tgz",
"integrity": "sha512-v/AnUFImmh8G4PH0NDkf6wA8hujNNcrwtecqW4vtQ1UOSNBaZl49zP1SHoZ/06e+UiwzHpgb5zP5+hwlYYWYAw==",
"requires": {
"@types/json-schema": "^7.0.9",
"@types/semver": "^7.3.12",
"@typescript-eslint/scope-manager": "5.49.0",
"@typescript-eslint/types": "5.49.0",
"@typescript-eslint/typescript-estree": "5.49.0",
"@typescript-eslint/scope-manager": "5.50.0",
"@typescript-eslint/types": "5.50.0",
"@typescript-eslint/typescript-estree": "5.50.0",
"eslint-scope": "^5.1.1",
"eslint-utils": "^3.0.0",
"semver": "^7.3.7"
......@@ -3114,11 +3115,11 @@
}
},
"@typescript-eslint/visitor-keys": {
"version": "5.49.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.49.0.tgz",
"integrity": "sha512-v9jBMjpNWyn8B6k/Mjt6VbUS4J1GvUlR4x3Y+ibnP1z7y7V4n0WRz+50DY6+Myj0UaXVSuUlHohO+eZ8IJEnkg==",
"version": "5.50.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.50.0.tgz",
"integrity": "sha512-cdMeD9HGu6EXIeGOh2yVW6oGf9wq8asBgZx7nsR/D36gTfQ0odE5kcRYe5M81vjEFAcPeugXrHg78Imu55F6gg==",
"requires": {
"@typescript-eslint/types": "5.49.0",
"@typescript-eslint/types": "5.50.0",
"eslint-visitor-keys": "^3.3.0"
}
},
......@@ -3977,9 +3978,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001449",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001449.tgz",
"integrity": "sha512-CPB+UL9XMT/Av+pJxCKGhdx+yg1hzplvFJQlJ2n68PyQGMz9L/E2zCyLdOL8uasbouTUgnPl+y0tccI/se+BEw=="
"version": "1.0.30001450",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001450.tgz",
"integrity": "sha512-qMBmvmQmFXaSxexkjjfMvD5rnDL0+m+dUMZKoDYsGG8iZN29RuYh9eRoMvKsT6uMAWlyUUGDEQGJJYjzCIO9ew=="
},
"case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",
......@@ -9145,9 +9146,9 @@
"integrity": "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="
},
"node-releases": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz",
"integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A=="
"version": "2.0.9",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.9.tgz",
"integrity": "sha512-2xfmOrRkGogbTK9R6Leda0DGiXeY3p2NJpy4+gNCffdUvV6mdEJnaDEic1i3Ec2djAo8jWYoJMR5PB0MSMpxUA=="
},
"normalize-path": {
"version": "3.0.0",
......@@ -10512,11 +10513,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
},
"react-openai-api": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/react-openai-api/-/react-openai-api-1.0.2.tgz",
"integrity": "sha512-jpyVrBmZryD3QbFLIW+6ltTRZ3En9m+ypppXS/selyKJ8URElP0Z/0YGqYHZ/X6oX9ryQdq/W435Mv1afsWbgQ=="
},
"react-refresh": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
......@@ -11157,9 +11153,9 @@
"integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
},
"shell-quote": {
"version": "1.7.4",
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
"integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw=="
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.0.tgz",
"integrity": "sha512-QHsz8GgQIGKlRi24yFc6a6lN69Idnx634w49ay6+jA5yFh7a1UY+4Rp6HPx/L/1zcEDPEij8cIsiqR6bQsE5VQ=="
},
"side-channel": {
"version": "1.0.4",
......@@ -11627,9 +11623,9 @@
}
},
"terser": {
"version": "5.16.1",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.1.tgz",
"integrity": "sha512-xvQfyfA1ayT0qdK47zskQgRZeWLoOQ8JQ6mIgRGVNwZKdQMU+5FkCBjmv4QjcrTzyZquRw2FVtlJSRUmMKQslw==",
"version": "5.16.2",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.16.2.tgz",
"integrity": "sha512-JKuM+KvvWVqT7muHVyrwv7FVRPnmHDwF6XwoIxdbF5Witi0vu99RYpxDexpJndXt3jbZZmmWr2/mQa6HvSNdSg==",
"requires": {
"@jridgewell/source-map": "^0.3.2",
"acorn": "^8.5.0",
......
......@@ -8,7 +8,6 @@
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-openai-api": "^1.0.2",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
......
......@@ -9,7 +9,7 @@
.sidemenu {
width:260px;
padding:10px;
background-color: #202123;
background-color:#202123;
}
/* under 640px do this */
@media (max-width: 640px) {
......@@ -34,7 +34,6 @@
padding-right:12px;
}
.chatbox {
flex:1;
background-color:#343541;
......@@ -59,17 +58,16 @@
position:absolute;
bottom:0;
left:0;right:0;
background: rgb(57 57 57);
}
.chat-input-textarea {
background-color: #40414f;
width: 90%;
padding: 12px;
border-radius: 5px;
color: #ffffff;
font-size: 1.25em;
border: none;
outline: none;
background-color:#40414f;
width:90%;
padding:12px;
border-radius:5px;
color:white;
font-size:1.25em;
border:none;
outline:none;
box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
}
......@@ -96,21 +94,20 @@
}
.chat-message.chatgpt {
background-color:#ffffff;
background-color:#444654;
}
.chat-message-center {
max-width:640px;
margin-left:auto;
margin-right:auto;
display:flex;
padding: 12px 24px;
}
section::-webkit-scrollbar {
display: none;
padding:12px;
padding-left: 24px;
padding-right: 24px;
}
.avatar {
background:#ffffff;
background:white;
border-radius:50%;
width: 40px;
height: 40px;
......@@ -121,8 +118,6 @@ section::-webkit-scrollbar {
font-size:14px;
color:#444654;
}
.avatar.chatgpt {
background:#0da37f;
border-radius:50%;
......@@ -132,11 +127,8 @@ section::-webkit-scrollbar {
color:white;
}
.message {
padding: 7px 20px;
}
.chat-message.false {
background: #eef2ff;
padding-left: 40px;
padding-right: 40px;
}
@keyframes App-logo-spin {
......@@ -150,18 +142,18 @@ section::-webkit-scrollbar {
.select-models {
border: 1px solid white;
padding: 12px;
padding:12px;
border-radius:5px;
color: white;
background: transparent;
color:white;
background:transparent;
outline:none;
cursor:pointer;
max-width:100%;
min-width:100%;
}
.select-models option {
background: black;
color: #ffffff;
background:black;
color:white;
}
.button-picker {
......@@ -216,4 +208,4 @@ section::-webkit-scrollbar {
}
.submit:hover {
background:#066d55;
}
}
\ No newline at end of file
......
......@@ -4,7 +4,6 @@ import './color_theme_1.css';
import { useState, useEffect } from 'react';
import SideMenu from './SideMenu'
import ChatBox from './ChatBox'
import OpenAIAPI from "react-openai-api";
function App() {
......@@ -14,7 +13,7 @@ function App() {
const [chatInput, setChatInput] = useState("");
const [models, setModels] = useState([]);
const [temperature, setTemperature] = useState(0.5);
const [temperature, setTemperature] = useState(0.7);
const [currentModel, setCurrentModel] = useState("text-davinci-003");
const [chatLog, setChatLog] = useState([{
user: "gpt",
......@@ -27,10 +26,10 @@ function App() {
}
function getEngines(){
fetch("http://localhost:3080/models")
fetch(process.env.REACT_APP_SERVER_URL + "/models")
.then(res => res.json())
.then(data => {
console.log(data.models.data)
// console.log(data.models.data)
// set models in order alpahbetically
data.models.data.sort((a, b) => {
if(a.id < b.id) { return -1; }
......@@ -43,94 +42,76 @@ function App() {
async function handleSubmit(e){
e.preventDefault();
let chatLogNew = [...chatLog, { user: "me", message: `${chatInput}`} ]
// console.log(chatInput)
const userInput = ['what', 'why', 'when', 'where' , 'which', 'did', 'do', 'how', 'can', 'are', 'who', 'hey'];
const userInputRegex = new RegExp(`\\b(${userInput.join('|')})\\b`, 'gi');
const inputMatches = chatInput.match(userInputRegex);
const userPunctuation = ['.', '?', '!', ':', ';', ','];
const userPunctuationRegex = new RegExp(`${userPunctuation.join('')}$`, 'gi');
const punctuationMatches = chatInput.match(userPunctuationRegex);
// console.log(punctuationMatches)
var userModifiedInput = chatInput
if (!punctuationMatches) {
if (!inputMatches) {
userModifiedInput = chatInput + ".";
// console.log("not a question!")
} else {
userModifiedInput = chatInput + "?";
// console.log("its a question!")
}
}
let chatLogNew = [...chatLog, { user: "me", message: `${userModifiedInput}`} ]
setChatInput("");
setChatLog(chatLogNew)
// fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
const messages = chatLogNew.map((message) => message.message).join("\n")
// const response = await fetch("http://localhost:3080/", {
// method: "POST",
// headers: {
// "Content-Type": "application/json"
// },
// body: JSON.stringify({
// message: messages,
// currentModel,
// })
// });
// const data = await response.json();
// setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
// var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
// scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
var oHttp = new XMLHttpRequest();
oHttp.open("POST", "https://api.openai.com/v1/completions");
oHttp.setRequestHeader("Accept", "application/json");
oHttp.setRequestHeader("Content-Type", "application/json");
oHttp.setRequestHeader("Authorization", "Bearer " + "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")
oHttp.onreadystatechange = function () {
if (oHttp.readyState === 4) {
var s = ''
var oJson = {}
if (s != "") s += "\n";
try {
oJson = JSON.parse(oHttp.responseText);
} catch (ex) {
s += "Error: " + ex.message
}
if (oJson.error && oJson.error.message) {
s += "Error: " + oJson.error.message;
} else if (oJson.choices && oJson.choices[0].text) {
s = oJson.choices[0].text;
var a = s.split("?\n");
if (a.length == 2) {
s = a[1];
}
// if (selLang.value != "en-US") {
// var a = s.split("?\n");
// if (a.length == 2) {
// s = a[1];
// }
// }
if (s == "") s = "No response";
console.log('ssssssssssssssssssssss',s);
var replaceBR= (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
}
}
};
var sModel = currentModel;// "text-davinci-003";
var iMaxTokens = 100;
var sUserId = "1";
var dTemperature =temperature;
var data = {
model: sModel,
prompt: messages,
max_tokens: iMaxTokens,
//user: sUserId,
temperature: dTemperature,
// frequency_penalty: 0.0, //Number between -2.0 and 2.0 Positive value decrease the model's likelihood to repeat the same line verbatim.
//presence_penalty: 0.0, //Number between -2.0 and 2.0. Positive values increase the model's likelihood to talk about new topics.
//stop: ["#", ";"] //Up to 4 sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.
const response = await fetch(process.env.REACT_APP_SERVER_URL + "/api", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
message: messages,
currentModel,
})
});
const data = await response.json();
const parsedData = data.message.trim();
// console.log(parsedData)
const programmingKeywords = ['code', 'application', 'controller', 'rails' , 'PHP', 'java', 'javascript', 'script', 'console', 'python', 'programming', 'table'];
const regex = new RegExp(`\\b(${programmingKeywords.join('|')})\\b`, 'gi');
// console.log(regex)
const matches = parsedData.match(regex);
// console.log(matches);
if (!matches) {
var replaceTags = (parsedData.replace(/(?:\r\n|\r|\n)/g, '<br>').replace(/\./g, '. '))
// console.log("not programming!")
} else {
replaceTags = (parsedData.replace(':',':<code>').replace('<?','&#60;?').replace('?>','?&#62;').replace(/\n/g, '<br>'))
// console.log("programming!")
//.replace('<?','&#60;' + '?').replace('?>','?'+'&#62;')
}
setChatLog([...chatLogNew, { user: "gpt", message: `${replaceTags}`} ])
oHttp.send(JSON.stringify(data));;
// setChatLog([...chatLogNew, { user: "gpt", message: `<div>${parsedData}</div>`} ])
var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
}
function handleTemp(temp) {
if(temp > 1){
// setTemperature(1)
setTemperature(1)
} else if (temp < 0){
// setTemperature(0)
setTemperature(0)
} else {
// setTemperature(temp)
setTemperature(temp)
}
}
......
import OpenAISVGLogo from './OpenAISVGLogo'
// import OpenAISVGLogo from './OpenAISVGLogo'
// Primary Chat Window
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
......@@ -26,7 +26,7 @@ const ChatMessage = ({ message }) => {
<div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
<div className="chat-message-center">
<div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
{message.user === "gpt" ? <img className="ai-logo" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" src="../assets/images/user.svg" />}
{message.user === "gpt" ? <img className="ai-logo" alt="Ai-pro bot" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" alt="Ai-pro user" src="../assets/images/user.svg" />}
</div>
{/* <div className="message">
{message.message}
......
const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) =>
<aside className="sidemenu">
<div className="ai-logo-container">
<img className="ai-logo" src="../assets/images/AIPRO-WHITE.png" height="50px"/>
<img className="ai-logo" alt="Ai-pro logo" src="../assets/images/AIPRO-WHITE.png" height="50px"/>
</div>
<div className="side-menu-button" onClick={clearChat}>
<span>+</span>
New Chat
</div>
<div className="models">
<label className="side-label">Model</label>
<select
// active if model is select is currentModel
value={currentModel}
className="select-models"
onChange={(e)=>{
setCurrentModel(e.target.value)
}}>
{models && models.length ? models.map((model, index) => (
<option
key={model.id}
value={model.id}>{model.id}</option>
)) : <option
key={"text-davinci-003"}
value={"text-davinci-003"}>{"text-davinci-003"}</option>}
</select>
<div className="side-menu-button" onClick={clearChat}>
<span>+</span>
New Chat
</div>
<div className="models">
<label className="side-label">Model</label>
<select
// active if model is select is currentModel
value={currentModel}
className="select-models"
onChange={(e)=>{
setCurrentModel(e.target.value)
}}>
{models && models.length ? models.map((model, index) => (
<option
key={model.id}
value={model.id}>{model.id}</option>
)) : <option
key={"text-davinci-003"}
value={"text-davinci-003"}>{"text-davinci-003"}</option>}
</select>
<Button
text="Smart - Davinci"
onClick={()=>setCurrentModel("text-davinci-003")} />
<Button
text="Code - Crushman"
onClick={()=>setCurrentModel("code-cushman-001")} />
<span className="info">
The model parameter controls the engine used to generate the response. Davinci produces best results.
</span>
<label className="side-label" >Temperature</label>
<input
className="select-models"
type="number"
onChange={(e)=> setTemperature(e.target.value)}
min="0"
max="1"
step="0.1"
value={temperature}
/>
<Button
text="0 - Logical"
onClick={()=>setTemperature(0)} />
<Button
text="0.5 - Balanced"
onClick={()=>setTemperature(0.5)} />
<Button
text="1 - Creative"
onClick={()=>setTemperature(1)} />
<span className="info">
The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative.
</span>
</div>
</aside>
<Button
text="Smart - Davinci"
onClick={()=>setCurrentModel("text-davinci-003")} />
<Button
text="Code - Crushman"
onClick={()=>setCurrentModel("code-cushman-001")} />
<span className="info">
The model parameter controls the engine used to generate the response. Davinci produces best results.
</span>
<label className="side-label" >Temperature</label>
<input
className="select-models"
type="number"
onChange={(e)=> setTemperature(e.target.value)}
min="0"
max="1"
step="0.1"
value={temperature}
/>
<Button
text="0 - Logical"
onClick={()=>setTemperature(0)} />
<Button
text="0.5 - Balanced"
onClick={()=>setTemperature(0.5)} />
<Button
text="1 - Creative"
onClick={()=>setTemperature(1)} />
<span className="info">
The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative.
</span>
</div>
</aside>
const Button = ({ onClick, text }) =>
<div
......
......@@ -35,13 +35,19 @@ span.info {
color: #101827 !important;
font-size: 16px !important;
box-shadow: 0px 7px 6px -6px black !important;
height: 45px;
}
.chat-message.chatgpt {
background-color:#ffffff !important;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(45deg, #feffff 0%, #ddf1f9 55%, #eff7f5 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #feffff 0%,#ddf1f9 55%,#eff7f5 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #feffff 0%,#ddf1f9 55%,#eff7f5 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#eff7f5',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.chat-message-center {
padding: 20px 10px !important;
padding: 20px 10vw !important;
max-width: none;
}
.avatar {
......@@ -56,6 +62,34 @@ span.info {
border-radius:5px !important;
box-shadow: 0px 5px 5px -3px black !important;
}
.chat-log::-webkit-scrollbar{
/*display: none;*/
}
/* Let's get this party started */
.chat-log::-webkit-scrollbar {
width: 8px;
}
/* Track */
.chat-log::-webkit-scrollbar-track {
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);*/
-webkit-border-radius: 0px;
border-radius: 0px;
}
/* Handle */
.chat-log::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #cccccc;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
.chat-log::-webkit-scrollbar-thumb:window-inactive {
background: #eeeeee;
}
.message {
padding: 7px 20px !important;
line-height: 25px;
......@@ -98,4 +132,50 @@ span.info {
.ai-logo-container {
text-align: center;
padding: 10px 0;
}
.message code {
background: #303030;
width: 100%;
color: #fff;
padding: 15px 20px;
border-radius: 10px;
font-family: monospace, sans-serif;
font-size: 12px;
display: block;
margin: 15px 5px;
}
code br:nth-child(-n+2) {
display: none;
}
@media (min-width: 1280px) {
.message {
font-size: 18px;
}
}
@media (max-width: 1279px) {
.message {
font-size: 16px;
}
}
@media (max-width: 991px) {
.message {
font-size: 14px;
}
.chat-message-center {
padding: 20px 5vw !important;
}
}
@media (max-width: 414px) {
.message {
font-size: 14px;
}
.chat-message-center {
padding: 20px 5vw !important;
}
}
\ No newline at end of file
......
OPENAI_API_ORG=
OPENAI_API_KEY=
\ No newline at end of file
......@@ -2,11 +2,13 @@ const { Configuration, OpenAIApi } = require("openai");
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
require('dotenv').config()
// Open AI Configuration
// console.log(process.env.OPENAI_API_ORG)
const configuration = new Configuration({
organization: "org-2OIAoj4fSwE4RCzgvglUM55T",
apiKey: "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",
organization: process.env.OPENAI_API_ORG,
apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);
......@@ -22,14 +24,15 @@ app.use(require('morgan')('dev'))
// Routing
// Primary Open AI Route
app.post('/', async (req, res) => {
app.post('/api', async (req, res) => {
const { message, currentModel, temperature } = req.body;
const response = await openai.createCompletion({
model: `${currentModel}`,// "text-davinci-003",
prompt: `${message}`,
max_tokens: 100,
max_tokens: 2500,
temperature,
});
res.json({
message: response.data.choices[0].text,
})
......
......@@ -142,6 +142,11 @@
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="
},
"dotenv": {
"version": "16.0.3",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.3.tgz",
"integrity": "sha512-7GO6HghkA5fYG9TYnNxi14/7K9f5occMlp3zXAuSxn7CKCxt9xbNWG7yF8hTCSUchlfWSe3uLmlPfigevRItzQ=="
},
"ee-first": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
......
......@@ -11,6 +11,7 @@
"dependencies": {
"body-parser": "^1.20.1",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"morgan": "^1.10.0",
"openai": "^3.1.0"
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!