Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
0a4a261d by Ryan
Options

Merge branch '26903_chatgpt_output_error' into 'master' 

26903 chatgpt output error

See merge request !12
2 parents 3f4efe8d ed824fdc
Expand all
Inline Side-by-side
Showing 16 changed files with 280 additions and 178 deletions
.gitignore
node_modules
\ No newline at end of file
node_modules
.env
\ No newline at end of file
......
README.md 0 → 100644
# 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
client/.gitignore
......@@ -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
......
client/README.md
# 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`
......
client/env-template 0 → 100644
REACT_APP_SERVER_URL=
\ No newline at end of file
client/package.json
......@@ -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"
},
......
client/src/App.css
......@@ -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
......
client/src/App.js
......@@ -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)
}
}
......
client/src/ChatBox.js
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}
......
client/src/SideMenu.js
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
......
client/src/color_theme_1.css
......@@ -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
......
env-template 0 → 100644
OPENAI_API_ORG=
OPENAI_API_KEY=
\ No newline at end of file
index.js
......@@ -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,
})
......
package-lock.json
......@@ -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",
......
package.json
......@@ -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!