Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
995cfe0a by RSA
Options

WIP FDEV

1 parent 2a5afc6b
Inline Side-by-side
Showing 6 changed files with 130 additions and 88 deletions
client/package.json
......@@ -6,12 +6,10 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/react-syntax-highlighter": "^15.5.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-openai-api": "^1.0.2",
"react-scripts": "5.0.1",
"react-syntax-highlighter": "^13.2.1",
"web-vitals": "^2.1.4"
},
"scripts": {
......
client/public/index.html
......@@ -2,20 +2,19 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
......@@ -41,4 +40,4 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</html>
\ No newline at end of file
......
client/src/App.js
......@@ -4,9 +4,7 @@ import './color_theme_1.css';
import { useState, useEffect } from 'react';
import SideMenu from './SideMenu'
import ChatBox from './ChatBox'
// import OpenAIAPI from "react-openai-api";
//import { CopyBlock } from "react-code-blocks";
//import { CopyBlock, dracula } from "react-code-blocks";
import OpenAIAPI from "react-openai-api";
function App() {
......@@ -16,7 +14,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",
......@@ -29,38 +27,40 @@ function App() {
}
function getEngines(){
// fetch("http://localhost:3080/models")
// .then(res => res.json())
// .then(data => {
// console.log(data.models.data)
fetch("http://localhost:3080/models")
.then(res => res.json())
.then(data => {
// console.log(data.models.data)
// // set models in order alpahbetically
// data.models.data.sort((a, b) => {
// if(a.id < b.id) { return -1; }
// if(a.id > b.id) { return 1; }
// return 0;
// })
// setModels(data.models.data)
// })
var myHeaders = new Headers();
myHeaders.append("Authorization", "Bearer " + "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");
var requestOptions = {
method: 'GET',
headers: myHeaders,
redirect: 'follow'
};
fetch("https://api.openai.com/v1/models", requestOptions)
.then(res => res.json())
.then(data => {
// set models in order alpahbetically
data.data.sort((a, b) => {
if (a.id < b.id) { return -1; }
if (a.id > b.id) { return 1; }
return 0;
})
setModels(data.data)
}).catch(error => console.log('error', error));
data.models.data.sort((a, b) => {
if(a.id < b.id) { return -1; }
if(a.id > b.id) { return 1; }
return 0;
})
setModels(data.models.data)
})
// var myHeaders = new Headers();
// myHeaders.append("Authorization", "Bearer " + "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");
// var requestOptions = {
// method: 'GET',
// headers: myHeaders,
// redirect: 'follow'
// };
// fetch("https://api.openai.com/v1/models", requestOptions)
// .then(res => res.json())
// .then(data => {
// // set models in order alpahbetically
// data.models.data.sort((a, b) => {
// if (a.id < b.id) { return -1; }
// if (a.id > b.id) { return 1; }
// return 0;
// })
// setModels(data.models.data)
// })//.catch(error => console.log('error', error));
}
async function handleSubmit(e){
......@@ -72,26 +72,26 @@ function App() {
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;
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.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) {
......@@ -118,16 +118,16 @@ function App() {
// s = a[1];
// }
// }
if (s == "") s = "No response";
console.log('ssssssssssssssssssssss',s);
// if (s == "") s = "No response";
// console.log('ssssssssssssssssssssss',s);
var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>"));
console.log('replaceBR replaceBR', replaceBR);
//var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
// var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>"));
// // console.log('replaceBR replaceBR', replaceBR);
// //var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
var newStr = replaceBR.replace(/^(<br>)+/,"");
var newStr11 = newStr.replace(/<br><br>/g,"<br>");
setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]);
// var newStr = replaceBR.replace(/^(<br>)+/,"");
// var newStr11 = newStr.replace(/<br><br>/g,"<br>");
// setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]);
// setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
}
}
......@@ -138,7 +138,7 @@ function App() {
var sUserId = "1";
var dTemperature =temperature;
var data = {
var data1 = {
model: sModel,
prompt: messages,
max_tokens: iMaxTokens,
......@@ -150,17 +150,17 @@ function App() {
stop:["\"\"\""]
}
oHttp.send(JSON.stringify(data));
oHttp.send(JSON.stringify(data1));
}
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 { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
SyntaxHighlighter.registerLanguage('arduino', arduino);
// import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
// import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
// import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
// import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
// SyntaxHighlighter.registerLanguage('arduino', arduino);
// Primary Chat Window
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
......@@ -36,14 +36,7 @@ const ChatMessage = ({ message }) => {
{/* <div className="message">
{message.message}
</div> */}
{/* <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} /> */}
{message.user === "gpt" ? <div className="message"><SyntaxHighlighter className="syntaxhighlight"
language="react" style={arduinoLight}
>
{message.message}
</SyntaxHighlighter> </div>: <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />}
<div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />
</div>
</div>
)
......
client/src/chatbot.js 0 → 100644
// import OpenAISVGLogo from './OpenAISVGLogo'
import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
SyntaxHighlighter.registerLanguage('arduino', arduino);
// Primary Chat Window
const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
<section className="chatbox">
<div className="chat-log">
{chatLog.map((message, index) => (
<ChatMessage key={index} message={message} />
))}
</div>
<div className="chat-input-holder">
<form className="form" onSubmit={handleSubmit}>
<input
rows="1"
value={chatInput}
onChange={(e)=> setChatInput(e.target.value)}
className="chat-input-textarea" ></input>
<button className="submit" type="submit">Submit</button>
</form>
</div>
</section>
// Individual Chat Message
const ChatMessage = ({ message }) => {
return (
<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" />}
</div>
{/* <div className="message">
{message.message}
</div> */}
{/* <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} /> */}
{message.user === "gpt" ? <div className="message"><SyntaxHighlighter className="syntaxhighlight"
language="react" style={arduinoLight}
>
{message.message}
</SyntaxHighlighter> </div>: <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />}
</div>
</div>
)
}
export default ChatBox
\ No newline at end of file
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-YgE1xiPAzhVmwwrtZnXIRyiF",
apiKey: "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",
});
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!