Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
2a5afc6b by RSA
Options

wip

1 parent f00232ef
Expand all
Inline Side-by-side
Showing 7 changed files with 100 additions and 32 deletions
client/package.json
......@@ -6,10 +6,12 @@
"@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,19 +2,20 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
<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.
......
client/src/App.css
......@@ -59,7 +59,6 @@
position:absolute;
bottom:0;
left:0;right:0;
background: rgb(57 57 57);
}
.chat-input-textarea {
background-color: #40414f;
......@@ -96,8 +95,10 @@
}
.chat-message.chatgpt {
background-color:#ffffff;
background-color:#444654;
}
.chat-message-center {
max-width:640px;
margin-left:auto;
......@@ -106,9 +107,6 @@
padding: 12px 24px;
}
section::-webkit-scrollbar {
display: none;
}
.avatar {
background:#ffffff;
border-radius:50%;
......@@ -135,9 +133,7 @@ section::-webkit-scrollbar {
padding: 7px 20px;
}
.chat-message.false {
background: #eef2ff;
}
@keyframes App-logo-spin {
from {
......
client/src/App.js
......@@ -4,7 +4,9 @@ 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 OpenAIAPI from "react-openai-api";
//import { CopyBlock } from "react-code-blocks";
//import { CopyBlock, dracula } from "react-code-blocks";
function App() {
......@@ -27,18 +29,38 @@ function App() {
}
function getEngines(){
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)
})
// 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));
}
async function handleSubmit(e){
......@@ -73,6 +95,7 @@ function App() {
oHttp.onreadystatechange = function () {
if (oHttp.readyState === 4) {
console.log("11111", oHttp.responseText);
var s = ''
var oJson = {}
if (s != "") s += "\n";
......@@ -97,15 +120,21 @@ function App() {
// }
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 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}` }]);
// setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
}
}
};
var sModel = currentModel;// "text-davinci-003";
var iMaxTokens = 100;
var iMaxTokens = 2048;
var sUserId = "1";
var dTemperature =temperature;
......@@ -115,12 +144,13 @@ function App() {
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.
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.
stop:["\"\"\""]
}
oHttp.send(JSON.stringify(data));;
oHttp.send(JSON.stringify(data));
}
......@@ -150,6 +180,18 @@ function App() {
chatLog={chatLog}
setChatInput={setChatInput}
handleSubmit={handleSubmit} />
{/*
<CopyBlock
text={ chatLog.map((message, index) => (
<>
{message.message}
</>
))}
language="text"
showLineNumbers={true}
theme={dracula}
codeBlock
/> */}
</div>
);
}
......
client/src/ChatBox.js
import OpenAISVGLogo from './OpenAISVGLogo'
// 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}) =>
......@@ -31,7 +36,14 @@ const ChatMessage = ({ message }) => {
{/* <div className="message">
{message.message}
</div> */}
<div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />
{/* <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>
)
......
client/src/color_theme_1.css
.chat-message.false {
background: #eef2ff;
}
section::-webkit-scrollbar {
display: none;
}
.sidemenu {
background-color: #101827 !important;
}
......@@ -37,6 +45,13 @@ span.info {
box-shadow: 0px 7px 6px -6px black !important;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
margin: 0;
padding: 0 !important;
}
.chat-message.chatgpt {
background-color:#ffffff !important;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!