Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
21eeded6 by Janis
Options

Merge branch 'fix_master_updated_ui' into '1DEVT' 

fix_master_updated_ui

See merge request !4
2 parents 3f4efe8d 5fbcb51a
Expand all
Inline Side-by-side
Showing 7 changed files with 97 additions and 167 deletions
client/.gitignore
......@@ -2,7 +2,6 @@
# dependencies
/node_modules
node_modules
/.pnp
.pnp.js
......
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",
......@@ -49,88 +48,29 @@ function App() {
// 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.
}
oHttp.send(JSON.stringify(data));;
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;
}
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/SideMenu.js
......@@ -3,61 +3,61 @@ const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTempera
<div className="ai-logo-container">
<img className="ai-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
......
index.js
......@@ -5,8 +5,8 @@ const cors = require('cors')
// Open AI Configuration
const configuration = new Configuration({
organization: "org-2OIAoj4fSwE4RCzgvglUM55T",
apiKey: "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",
organization: "org-organization",
apiKey: "sk-apiKey",
});
const openai = new OpenAIApi(configuration);
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!