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 @@ ...@@ -6,10 +6,12 @@
6 "@testing-library/jest-dom": "^5.16.5", 6 "@testing-library/jest-dom": "^5.16.5",
7 "@testing-library/react": "^13.4.0", 7 "@testing-library/react": "^13.4.0",
8 "@testing-library/user-event": "^13.5.0", 8 "@testing-library/user-event": "^13.5.0",
9 "@types/react-syntax-highlighter": "^15.5.6",
9 "react": "^18.2.0", 10 "react": "^18.2.0",
10 "react-dom": "^18.2.0", 11 "react-dom": "^18.2.0",
11 "react-openai-api": "^1.0.2", 12 "react-openai-api": "^1.0.2",
12 "react-scripts": "5.0.1", 13 "react-scripts": "5.0.1",
14 "react-syntax-highlighter": "^13.2.1",
13 "web-vitals": "^2.1.4" 15 "web-vitals": "^2.1.4"
14 }, 16 },
15 "scripts": { 17 "scripts": {
......
client/public/index.html
...@@ -2,19 +2,20 @@ ...@@ -2,19 +2,20 @@
2 <html lang="en"> 2 <html lang="en">
3 <head> 3 <head>
4 <meta charset="utf-8" /> 4 <meta charset="utf-8" />
5 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> 5 <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
6 <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
6 <meta name="viewport" content="width=device-width, initial-scale=1" /> 7 <meta name="viewport" content="width=device-width, initial-scale=1" />
7 <meta name="theme-color" content="#000000" /> 8 <meta name="theme-color" content="#000000" />
8 <meta 9 <meta
9 name="description" 10 name="description"
10 content="Web site created using create-react-app" 11 content="Web site created using create-react-app"
11 /> 12 />
12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 13 <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
13 <!-- 14 <!--
14 manifest.json provides metadata used when your web app is installed on a 15 manifest.json provides metadata used when your web app is installed on a
15 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 16 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 --> 17 -->
17 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> 18 <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
18 <!-- 19 <!--
19 Notice the use of %PUBLIC_URL% in the tags above. 20 Notice the use of %PUBLIC_URL% in the tags above.
20 It will be replaced with the URL of the `public` folder during the build. 21 It will be replaced with the URL of the `public` folder during the build.
......
client/src/App.css
...@@ -59,7 +59,6 @@ ...@@ -59,7 +59,6 @@
59 position:absolute; 59 position:absolute;
60 bottom:0; 60 bottom:0;
61 left:0;right:0; 61 left:0;right:0;
62 background: rgb(57 57 57);
63 } 62 }
64 .chat-input-textarea { 63 .chat-input-textarea {
65 background-color: #40414f; 64 background-color: #40414f;
...@@ -96,8 +95,10 @@ ...@@ -96,8 +95,10 @@
96 } 95 }
97 96
98 .chat-message.chatgpt { 97 .chat-message.chatgpt {
99 background-color:#ffffff; 98 background-color:#444654;
100 } 99 }
100
101
101 .chat-message-center { 102 .chat-message-center {
102 max-width:640px; 103 max-width:640px;
103 margin-left:auto; 104 margin-left:auto;
...@@ -106,9 +107,6 @@ ...@@ -106,9 +107,6 @@
106 padding: 12px 24px; 107 padding: 12px 24px;
107 } 108 }
108 109
109 section::-webkit-scrollbar {
110 display: none;
111 }
112 .avatar { 110 .avatar {
113 background:#ffffff; 111 background:#ffffff;
114 border-radius:50%; 112 border-radius:50%;
...@@ -135,9 +133,7 @@ section::-webkit-scrollbar { ...@@ -135,9 +133,7 @@ section::-webkit-scrollbar {
135 padding: 7px 20px; 133 padding: 7px 20px;
136 } 134 }
137 135
138 .chat-message.false { 136
139 background: #eef2ff;
140 }
141 137
142 @keyframes App-logo-spin { 138 @keyframes App-logo-spin {
143 from { 139 from {
......
client/src/App.js
...@@ -4,7 +4,9 @@ import './color_theme_1.css'; ...@@ -4,7 +4,9 @@ import './color_theme_1.css';
4 import { useState, useEffect } from 'react'; 4 import { useState, useEffect } from 'react';
5 import SideMenu from './SideMenu' 5 import SideMenu from './SideMenu'
6 import ChatBox from './ChatBox' 6 import ChatBox from './ChatBox'
7 import OpenAIAPI from "react-openai-api"; 7 // import OpenAIAPI from "react-openai-api";
8 //import { CopyBlock } from "react-code-blocks";
9 //import { CopyBlock, dracula } from "react-code-blocks";
8 10
9 function App() { 11 function App() {
10 12
...@@ -27,18 +29,38 @@ function App() { ...@@ -27,18 +29,38 @@ function App() {
27 } 29 }
28 30
29 function getEngines(){ 31 function getEngines(){
30 fetch("http://localhost:3080/models") 32 // fetch("http://localhost:3080/models")
31 .then(res => res.json()) 33 // .then(res => res.json())
32 .then(data => { 34 // .then(data => {
33 console.log(data.models.data) 35 // console.log(data.models.data)
34 // set models in order alpahbetically 36 // // set models in order alpahbetically
35 data.models.data.sort((a, b) => { 37 // data.models.data.sort((a, b) => {
36 if(a.id < b.id) { return -1; } 38 // if(a.id < b.id) { return -1; }
37 if(a.id > b.id) { return 1; } 39 // if(a.id > b.id) { return 1; }
38 return 0; 40 // return 0;
39 }) 41 // })
40 setModels(data.models.data) 42 // setModels(data.models.data)
41 }) 43 // })
44 var myHeaders = new Headers();
45 myHeaders.append("Authorization", "Bearer " + "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");
46
47 var requestOptions = {
48 method: 'GET',
49 headers: myHeaders,
50 redirect: 'follow'
51 };
52
53 fetch("https://api.openai.com/v1/models", requestOptions)
54 .then(res => res.json())
55 .then(data => {
56 // set models in order alpahbetically
57 data.data.sort((a, b) => {
58 if (a.id < b.id) { return -1; }
59 if (a.id > b.id) { return 1; }
60 return 0;
61 })
62 setModels(data.data)
63 }).catch(error => console.log('error', error));
42 } 64 }
43 65
44 async function handleSubmit(e){ 66 async function handleSubmit(e){
...@@ -73,6 +95,7 @@ function App() { ...@@ -73,6 +95,7 @@ function App() {
73 95
74 oHttp.onreadystatechange = function () { 96 oHttp.onreadystatechange = function () {
75 if (oHttp.readyState === 4) { 97 if (oHttp.readyState === 4) {
98 console.log("11111", oHttp.responseText);
76 var s = '' 99 var s = ''
77 var oJson = {} 100 var oJson = {}
78 if (s != "") s += "\n"; 101 if (s != "") s += "\n";
...@@ -97,15 +120,21 @@ function App() { ...@@ -97,15 +120,21 @@ function App() {
97 // } 120 // }
98 if (s == "") s = "No response"; 121 if (s == "") s = "No response";
99 console.log('ssssssssssssssssssssss',s); 122 console.log('ssssssssssssssssssssss',s);
100 var replaceBR= (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
101 123
102 setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]); 124 var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>"));
125 console.log('replaceBR replaceBR', replaceBR);
126 //var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
127
128 var newStr = replaceBR.replace(/^(<br>)+/,"");
129 var newStr11 = newStr.replace(/<br><br>/g,"<br>");
130 setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]);
131 // setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
103 } 132 }
104 } 133 }
105 }; 134 };
106 135
107 var sModel = currentModel;// "text-davinci-003"; 136 var sModel = currentModel;// "text-davinci-003";
108 var iMaxTokens = 100; 137 var iMaxTokens = 2048;
109 var sUserId = "1"; 138 var sUserId = "1";
110 var dTemperature =temperature; 139 var dTemperature =temperature;
111 140
...@@ -115,12 +144,13 @@ function App() { ...@@ -115,12 +144,13 @@ function App() {
115 max_tokens: iMaxTokens, 144 max_tokens: iMaxTokens,
116 //user: sUserId, 145 //user: sUserId,
117 temperature: dTemperature, 146 temperature: dTemperature,
118 // frequency_penalty: 0.0, //Number between -2.0 and 2.0 Positive value decrease the model's likelihood to repeat the same line verbatim. 147 frequency_penalty: 0.0, //Number between -2.0 and 2.0 Positive value decrease the model's likelihood to repeat the same line verbatim.
119 //presence_penalty: 0.0, //Number between -2.0 and 2.0. Positive values increase the model's likelihood to talk about new topics. 148 presence_penalty: 0.0, //Number between -2.0 and 2.0. Positive values increase the model's likelihood to talk about new topics.
120 //stop: ["#", ";"] //Up to 4 sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence. 149 //stop: ["#", ";"] //Up to 4 sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.
150 stop:["\"\"\""]
121 } 151 }
122 152
123 oHttp.send(JSON.stringify(data));; 153 oHttp.send(JSON.stringify(data));
124 154
125 } 155 }
126 156
...@@ -150,6 +180,18 @@ function App() { ...@@ -150,6 +180,18 @@ function App() {
150 chatLog={chatLog} 180 chatLog={chatLog}
151 setChatInput={setChatInput} 181 setChatInput={setChatInput}
152 handleSubmit={handleSubmit} /> 182 handleSubmit={handleSubmit} />
183 {/*
184 <CopyBlock
185 text={ chatLog.map((message, index) => (
186 <>
187 {message.message}
188 </>
189 ))}
190 language="text"
191 showLineNumbers={true}
192 theme={dracula}
193 codeBlock
194 /> */}
153 </div> 195 </div>
154 ); 196 );
155 } 197 }
......
client/src/ChatBox.js
1 import OpenAISVGLogo from './OpenAISVGLogo' 1 // import OpenAISVGLogo from './OpenAISVGLogo'
2 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
3 import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
4 import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
5 import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
6 SyntaxHighlighter.registerLanguage('arduino', arduino);
2 7
3 // Primary Chat Window 8 // Primary Chat Window
4 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) => 9 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
...@@ -31,7 +36,14 @@ const ChatMessage = ({ message }) => { ...@@ -31,7 +36,14 @@ const ChatMessage = ({ message }) => {
31 {/* <div className="message"> 36 {/* <div className="message">
32 {message.message} 37 {message.message}
33 </div> */} 38 </div> */}
34 <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} /> 39 {/* <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} /> */}
40 {message.user === "gpt" ? <div className="message"><SyntaxHighlighter className="syntaxhighlight"
41 language="react" style={arduinoLight}
42
43
44 >
45 {message.message}
46 </SyntaxHighlighter> </div>: <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />}
35 </div> 47 </div>
36 </div> 48 </div>
37 ) 49 )
......
client/src/color_theme_1.css
1 .chat-message.false {
2 background: #eef2ff;
3 }
4
5 section::-webkit-scrollbar {
6 display: none;
7 }
8
1 .sidemenu { 9 .sidemenu {
2 background-color: #101827 !important; 10 background-color: #101827 !important;
3 } 11 }
...@@ -37,6 +45,13 @@ span.info { ...@@ -37,6 +45,13 @@ span.info {
37 box-shadow: 0px 7px 6px -6px black !important; 45 box-shadow: 0px 7px 6px -6px black !important;
38 } 46 }
39 47
48 pre {
49 font-family: monospace, monospace;
50 font-size: 1em;
51 margin: 0;
52 padding: 0 !important;
53 }
54
40 .chat-message.chatgpt { 55 .chat-message.chatgpt {
41 background-color:#ffffff !important; 56 background-color:#ffffff !important;
42 } 57 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!