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 @@ ...@@ -6,12 +6,10 @@
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",
10 "react": "^18.2.0", 9 "react": "^18.2.0",
11 "react-dom": "^18.2.0", 10 "react-dom": "^18.2.0",
12 "react-openai-api": "^1.0.2", 11 "react-openai-api": "^1.0.2",
13 "react-scripts": "5.0.1", 12 "react-scripts": "5.0.1",
14 "react-syntax-highlighter": "^13.2.1",
15 "web-vitals": "^2.1.4" 13 "web-vitals": "^2.1.4"
16 }, 14 },
17 "scripts": { 15 "scripts": {
......
client/public/index.html
...@@ -2,20 +2,19 @@ ...@@ -2,20 +2,19 @@
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">
7 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1" />
8 <meta name="theme-color" content="#000000" /> 7 <meta name="theme-color" content="#000000" />
9 <meta 8 <meta
10 name="description" 9 name="description"
11 content="Web site created using create-react-app" 10 content="Web site created using create-react-app"
12 /> 11 />
13 <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> --> 12 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
14 <!-- 13 <!--
15 manifest.json provides metadata used when your web app is installed on a 14 manifest.json provides metadata used when your web app is installed on a
16 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ 15 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
17 --> 16 -->
18 <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> --> 17 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
19 <!-- 18 <!--
20 Notice the use of %PUBLIC_URL% in the tags above. 19 Notice the use of %PUBLIC_URL% in the tags above.
21 It will be replaced with the URL of the `public` folder during the build. 20 It will be replaced with the URL of the `public` folder during the build.
...@@ -41,4 +40,4 @@ ...@@ -41,4 +40,4 @@
41 To create a production bundle, use `npm run build` or `yarn build`. 40 To create a production bundle, use `npm run build` or `yarn build`.
42 --> 41 -->
43 </body> 42 </body>
44 </html> 43 </html>
...\ No newline at end of file ...\ No newline at end of file
......
client/src/App.js
...@@ -4,9 +4,7 @@ import './color_theme_1.css'; ...@@ -4,9 +4,7 @@ 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";
10 8
11 function App() { 9 function App() {
12 10
...@@ -16,7 +14,7 @@ function App() { ...@@ -16,7 +14,7 @@ function App() {
16 14
17 const [chatInput, setChatInput] = useState(""); 15 const [chatInput, setChatInput] = useState("");
18 const [models, setModels] = useState([]); 16 const [models, setModels] = useState([]);
19 const [temperature, setTemperature] = useState(0.5); 17 const [temperature, setTemperature] = useState(0.7);
20 const [currentModel, setCurrentModel] = useState("text-davinci-003"); 18 const [currentModel, setCurrentModel] = useState("text-davinci-003");
21 const [chatLog, setChatLog] = useState([{ 19 const [chatLog, setChatLog] = useState([{
22 user: "gpt", 20 user: "gpt",
...@@ -29,38 +27,40 @@ function App() { ...@@ -29,38 +27,40 @@ function App() {
29 } 27 }
30 28
31 function getEngines(){ 29 function getEngines(){
32 // fetch("http://localhost:3080/models") 30 fetch("http://localhost:3080/models")
33 // .then(res => res.json()) 31 .then(res => res.json())
34 // .then(data => { 32 .then(data => {
35 // console.log(data.models.data) 33 // console.log(data.models.data)
36 // // set models in order alpahbetically 34 // // set models in order alpahbetically
37 // data.models.data.sort((a, b) => { 35 data.models.data.sort((a, b) => {
38 // if(a.id < b.id) { return -1; } 36 if(a.id < b.id) { return -1; }
39 // if(a.id > b.id) { return 1; } 37 if(a.id > b.id) { return 1; }
40 // return 0; 38 return 0;
41 // }) 39 })
42 // setModels(data.models.data) 40 setModels(data.models.data)
43 // }) 41 })
44 var myHeaders = new Headers(); 42
45 myHeaders.append("Authorization", "Bearer " + "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"); 43 // var myHeaders = new Headers();
46 44 // myHeaders.append("Authorization", "Bearer " + "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");
47 var requestOptions = { 45
48 method: 'GET', 46 // var requestOptions = {
49 headers: myHeaders, 47 // method: 'GET',
50 redirect: 'follow' 48 // headers: myHeaders,
51 }; 49 // redirect: 'follow'
52 50 // };
53 fetch("https://api.openai.com/v1/models", requestOptions) 51
54 .then(res => res.json()) 52 // fetch("https://api.openai.com/v1/models", requestOptions)
55 .then(data => { 53
56 // set models in order alpahbetically 54 // .then(res => res.json())
57 data.data.sort((a, b) => { 55 // .then(data => {
58 if (a.id < b.id) { return -1; } 56 // // set models in order alpahbetically
59 if (a.id > b.id) { return 1; } 57 // data.models.data.sort((a, b) => {
60 return 0; 58 // if (a.id < b.id) { return -1; }
61 }) 59 // if (a.id > b.id) { return 1; }
62 setModels(data.data) 60 // return 0;
63 }).catch(error => console.log('error', error)); 61 // })
62 // setModels(data.models.data)
63 // })//.catch(error => console.log('error', error));
64 } 64 }
65 65
66 async function handleSubmit(e){ 66 async function handleSubmit(e){
...@@ -72,26 +72,26 @@ function App() { ...@@ -72,26 +72,26 @@ function App() {
72 const messages = chatLogNew.map((message) => message.message).join("\n") 72 const messages = chatLogNew.map((message) => message.message).join("\n")
73 73
74 74
75 // const response = await fetch("http://localhost:3080/", { 75 const response = await fetch("http://localhost:3080/", {
76 // method: "POST", 76 method: "POST",
77 // headers: { 77 headers: {
78 // "Content-Type": "application/json" 78 "Content-Type": "application/json"
79 // }, 79 },
80 // body: JSON.stringify({ 80 body: JSON.stringify({
81 // message: messages, 81 message: messages,
82 // currentModel, 82 currentModel,
83 // }) 83 })
84 // }); 84 });
85 // const data = await response.json(); 85 const data = await response.json();
86 // setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ]) 86 setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
87 // var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0]; 87 var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
88 // scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight; 88 scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
89 89
90 var oHttp = new XMLHttpRequest(); 90 var oHttp = new XMLHttpRequest();
91 oHttp.open("POST", "https://api.openai.com/v1/completions"); 91 // oHttp.open("POST", "https://api.openai.com/v1/completions");
92 oHttp.setRequestHeader("Accept", "application/json"); 92 // oHttp.setRequestHeader("Accept", "application/json");
93 oHttp.setRequestHeader("Content-Type", "application/json"); 93 // oHttp.setRequestHeader("Content-Type", "application/json");
94 oHttp.setRequestHeader("Authorization", "Bearer " + "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") 94 // oHttp.setRequestHeader("Authorization", "Bearer " + "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")
95 95
96 oHttp.onreadystatechange = function () { 96 oHttp.onreadystatechange = function () {
97 if (oHttp.readyState === 4) { 97 if (oHttp.readyState === 4) {
...@@ -118,16 +118,16 @@ function App() { ...@@ -118,16 +118,16 @@ function App() {
118 // s = a[1]; 118 // s = a[1];
119 // } 119 // }
120 // } 120 // }
121 if (s == "") s = "No response"; 121 // if (s == "") s = "No response";
122 console.log('ssssssssssssssssssssss',s); 122 // console.log('ssssssssssssssssssssss',s);
123 123
124 var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")); 124 // var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>"));
125 console.log('replaceBR replaceBR', replaceBR); 125 // // console.log('replaceBR replaceBR', replaceBR);
126 //var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, ""); 126 // //var replaceBR = (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
127 127
128 var newStr = replaceBR.replace(/^(<br>)+/,""); 128 // var newStr = replaceBR.replace(/^(<br>)+/,"");
129 var newStr11 = newStr.replace(/<br><br>/g,"<br>"); 129 // var newStr11 = newStr.replace(/<br><br>/g,"<br>");
130 setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]); 130 // setChatLog([...chatLogNew, { user: "gpt", message: `${s}` }]);
131 // setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]); 131 // setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
132 } 132 }
133 } 133 }
...@@ -138,7 +138,7 @@ function App() { ...@@ -138,7 +138,7 @@ function App() {
138 var sUserId = "1"; 138 var sUserId = "1";
139 var dTemperature =temperature; 139 var dTemperature =temperature;
140 140
141 var data = { 141 var data1 = {
142 model: sModel, 142 model: sModel,
143 prompt: messages, 143 prompt: messages,
144 max_tokens: iMaxTokens, 144 max_tokens: iMaxTokens,
...@@ -150,17 +150,17 @@ function App() { ...@@ -150,17 +150,17 @@ function App() {
150 stop:["\"\"\""] 150 stop:["\"\"\""]
151 } 151 }
152 152
153 oHttp.send(JSON.stringify(data)); 153 oHttp.send(JSON.stringify(data1));
154 154
155 } 155 }
156 156
157 function handleTemp(temp) { 157 function handleTemp(temp) {
158 if(temp > 1){ 158 if(temp > 1){
159 // setTemperature(1) 159 setTemperature(1)
160 } else if (temp < 0){ 160 } else if (temp < 0){
161 // setTemperature(0) 161 setTemperature(0)
162 } else { 162 } else {
163 // setTemperature(temp) 163 setTemperature(temp)
164 } 164 }
165 165
166 } 166 }
......
client/src/ChatBox.js
1 // import OpenAISVGLogo from './OpenAISVGLogo' 1 // import OpenAISVGLogo from './OpenAISVGLogo'
2 import { Light as SyntaxHighlighter } from 'react-syntax-highlighter'; 2 // import { Light as SyntaxHighlighter } from 'react-syntax-highlighter';
3 import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino'; 3 // import arduino from 'react-syntax-highlighter/dist/cjs/languages/hljs/arduino';
4 import { arduinoLight } from 'react-syntax-highlighter/dist/cjs/styles/hljs'; 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"; 5 // import atelierCaveDark from "react-syntax-highlighter/dist/esm/styles/hljs/atelier-cave-dark";
6 SyntaxHighlighter.registerLanguage('arduino', arduino); 6 // SyntaxHighlighter.registerLanguage('arduino', arduino);
7 7
8 // Primary Chat Window 8 // Primary Chat Window
9 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) => 9 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
...@@ -36,14 +36,7 @@ const ChatMessage = ({ message }) => { ...@@ -36,14 +36,7 @@ const ChatMessage = ({ message }) => {
36 {/* <div className="message"> 36 {/* <div className="message">
37 {message.message} 37 {message.message}
38 </div> */} 38 </div> */}
39 {/* <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 }} />}
47 </div> 40 </div>
48 </div> 41 </div>
49 ) 42 )
......
client/src/chatbot.js 0 → 100644
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);
7
8 // Primary Chat Window
9 const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) =>
10 <section className="chatbox">
11 <div className="chat-log">
12 {chatLog.map((message, index) => (
13 <ChatMessage key={index} message={message} />
14 ))}
15 </div>
16 <div className="chat-input-holder">
17 <form className="form" onSubmit={handleSubmit}>
18 <input
19 rows="1"
20 value={chatInput}
21 onChange={(e)=> setChatInput(e.target.value)}
22 className="chat-input-textarea" ></input>
23 <button className="submit" type="submit">Submit</button>
24 </form>
25 </div>
26 </section>
27
28 // Individual Chat Message
29 const ChatMessage = ({ message }) => {
30 return (
31 <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
32 <div className="chat-message-center">
33 <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
34 {message.user === "gpt" ? <img className="ai-logo" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" src="../assets/images/user.svg" />}
35 </div>
36 {/* <div className="message">
37 {message.message}
38 </div> */}
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 }} />}
47 </div>
48 </div>
49 )
50 }
51
52 export default ChatBox
...\ No newline at end of file ...\ No newline at end of file
index.js
...@@ -5,8 +5,8 @@ const cors = require('cors') ...@@ -5,8 +5,8 @@ const cors = require('cors')
5 5
6 // Open AI Configuration 6 // Open AI Configuration
7 const configuration = new Configuration({ 7 const configuration = new Configuration({
8 organization: "org-2OIAoj4fSwE4RCzgvglUM55T", 8 organization: "org-YgE1xiPAzhVmwwrtZnXIRyiF",
9 apiKey: "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", 9 apiKey: "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",
10 }); 10 });
11 const openai = new OpenAIApi(configuration); 11 const openai = new OpenAIApi(configuration);
12 12
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!