Skip to content

Administrator / chatgpt.ai-pro.org

Go to a project
Toggle navigation
Toggle navigation pinning
3f4efe8d by Janis
Options

Merge branch '26797_formatting' into 'master' 

26797_formatting

See merge request !2
2 parents c7cb2442 f00232ef
Expand all
Inline Side-by-side
Showing 19 changed files with 224 additions and 44 deletions
.gitignore 0 → 100644
1 node_modules
...\ No newline at end of file ...\ No newline at end of file
client/.gitignore
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
2 2
3 # dependencies 3 # dependencies
4 /node_modules 4 /node_modules
5 node_modules
5 /.pnp 6 /.pnp
6 .pnp.js 7 .pnp.js
7 8
......
client/package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
client/package.json
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
8 "@testing-library/user-event": "^13.5.0", 8 "@testing-library/user-event": "^13.5.0",
9 "react": "^18.2.0", 9 "react": "^18.2.0",
10 "react-dom": "^18.2.0", 10 "react-dom": "^18.2.0",
11 "react-openai-api": "^1.0.2",
11 "react-scripts": "5.0.1", 12 "react-scripts": "5.0.1",
12 "web-vitals": "^2.1.4" 13 "web-vitals": "^2.1.4"
13 }, 14 },
......
client/public/assets/images/user.svg 0 → 100644
1 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#fff" class="bi bi-person" viewBox="0 0 16 16">
2 <path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z"/>
3 </svg>
...\ No newline at end of file ...\ No newline at end of file
client/src/App.css
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 .sidemenu { 9 .sidemenu {
10 width:260px; 10 width:260px;
11 padding:10px; 11 padding:10px;
12 background-color:#202123; 12 background-color: #202123;
13 } 13 }
14 /* under 640px do this */ 14 /* under 640px do this */
15 @media (max-width: 640px) { 15 @media (max-width: 640px) {
...@@ -34,6 +34,7 @@ ...@@ -34,6 +34,7 @@
34 padding-right:12px; 34 padding-right:12px;
35 } 35 }
36 36
37
37 .chatbox { 38 .chatbox {
38 flex:1; 39 flex:1;
39 background-color:#343541; 40 background-color:#343541;
...@@ -58,16 +59,17 @@ ...@@ -58,16 +59,17 @@
58 position:absolute; 59 position:absolute;
59 bottom:0; 60 bottom:0;
60 left:0;right:0; 61 left:0;right:0;
62 background: rgb(57 57 57);
61 } 63 }
62 .chat-input-textarea { 64 .chat-input-textarea {
63 background-color:#40414f; 65 background-color: #40414f;
64 width:90%; 66 width: 90%;
65 padding:12px; 67 padding: 12px;
66 border-radius:5px; 68 border-radius: 5px;
67 color:white; 69 color: #ffffff;
68 font-size:1.25em; 70 font-size: 1.25em;
69 border:none; 71 border: none;
70 outline:none; 72 outline: none;
71 box-shadow: 0 0 8px 0 rgba(0,0,0,0.25); 73 box-shadow: 0 0 8px 0 rgba(0,0,0,0.25);
72 } 74 }
73 75
...@@ -94,20 +96,21 @@ ...@@ -94,20 +96,21 @@
94 } 96 }
95 97
96 .chat-message.chatgpt { 98 .chat-message.chatgpt {
97 background-color:#444654; 99 background-color:#ffffff;
98 } 100 }
99 .chat-message-center { 101 .chat-message-center {
100 max-width:640px; 102 max-width:640px;
101 margin-left:auto; 103 margin-left:auto;
102 margin-right:auto; 104 margin-right:auto;
103 display:flex; 105 display:flex;
104 padding:12px; 106 padding: 12px 24px;
105 padding-left: 24px; 107 }
106 padding-right: 24px;
107 108
109 section::-webkit-scrollbar {
110 display: none;
108 } 111 }
109 .avatar { 112 .avatar {
110 background:white; 113 background:#ffffff;
111 border-radius:50%; 114 border-radius:50%;
112 width: 40px; 115 width: 40px;
113 height: 40px; 116 height: 40px;
...@@ -118,6 +121,8 @@ ...@@ -118,6 +121,8 @@
118 font-size:14px; 121 font-size:14px;
119 color:#444654; 122 color:#444654;
120 } 123 }
124
125
121 .avatar.chatgpt { 126 .avatar.chatgpt {
122 background:#0da37f; 127 background:#0da37f;
123 border-radius:50%; 128 border-radius:50%;
...@@ -127,8 +132,11 @@ ...@@ -127,8 +132,11 @@
127 color:white; 132 color:white;
128 } 133 }
129 .message { 134 .message {
130 padding-left: 40px; 135 padding: 7px 20px;
131 padding-right: 40px; 136 }
137
138 .chat-message.false {
139 background: #eef2ff;
132 } 140 }
133 141
134 @keyframes App-logo-spin { 142 @keyframes App-logo-spin {
...@@ -142,18 +150,18 @@ ...@@ -142,18 +150,18 @@
142 150
143 .select-models { 151 .select-models {
144 border: 1px solid white; 152 border: 1px solid white;
145 padding:12px; 153 padding: 12px;
146 border-radius:5px; 154 border-radius:5px;
147 color:white; 155 color: white;
148 background:transparent; 156 background: transparent;
149 outline:none; 157 outline:none;
150 cursor:pointer; 158 cursor:pointer;
151 max-width:100%; 159 max-width:100%;
152 min-width:100%; 160 min-width:100%;
153 } 161 }
154 .select-models option { 162 .select-models option {
155 background:black; 163 background: black;
156 color:white; 164 color: #ffffff;
157 } 165 }
158 166
159 .button-picker { 167 .button-picker {
......
client/src/App.js
1 import './normal.css'; 1 import './normal.css';
2 import './App.css'; 2 import './App.css';
3 import './color_theme_1.css';
3 import { useState, useEffect } from 'react'; 4 import { useState, useEffect } from 'react';
4 import SideMenu from './SideMenu' 5 import SideMenu from './SideMenu'
5 import ChatBox from './ChatBox' 6 import ChatBox from './ChatBox'
7 import OpenAIAPI from "react-openai-api";
6 8
7 function App() { 9 function App() {
8 10
...@@ -47,29 +49,88 @@ function App() { ...@@ -47,29 +49,88 @@ function App() {
47 // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post 49 // fetch response to the api combining the chat log array of messages and seinding it as a message to localhost:3000 as a post
48 const messages = chatLogNew.map((message) => message.message).join("\n") 50 const messages = chatLogNew.map((message) => message.message).join("\n")
49 51
50 const response = await fetch("http://localhost:3080/", { 52
51 method: "POST", 53 // const response = await fetch("http://localhost:3080/", {
52 headers: { 54 // method: "POST",
53 "Content-Type": "application/json" 55 // headers: {
54 }, 56 // "Content-Type": "application/json"
55 body: JSON.stringify({ 57 // },
56 message: messages, 58 // body: JSON.stringify({
57 currentModel, 59 // message: messages,
58 }) 60 // currentModel,
59 }); 61 // })
60 const data = await response.json(); 62 // });
61 setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ]) 63 // const data = await response.json();
62 var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0]; 64 // setChatLog([...chatLogNew, { user: "gpt", message: `${data.message}`} ])
63 scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight; 65 // var scrollToTheBottomChatLog = document.getElementsByClassName("chat-log")[0];
66 // scrollToTheBottomChatLog.scrollTop = scrollToTheBottomChatLog.scrollHeight;
67
68 var oHttp = new XMLHttpRequest();
69 oHttp.open("POST", "https://api.openai.com/v1/completions");
70 oHttp.setRequestHeader("Accept", "application/json");
71 oHttp.setRequestHeader("Content-Type", "application/json");
72 oHttp.setRequestHeader("Authorization", "Bearer " + "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")
73
74 oHttp.onreadystatechange = function () {
75 if (oHttp.readyState === 4) {
76 var s = ''
77 var oJson = {}
78 if (s != "") s += "\n";
79 try {
80 oJson = JSON.parse(oHttp.responseText);
81 } catch (ex) {
82 s += "Error: " + ex.message
83 }
84 if (oJson.error && oJson.error.message) {
85 s += "Error: " + oJson.error.message;
86 } else if (oJson.choices && oJson.choices[0].text) {
87 s = oJson.choices[0].text;
88 var a = s.split("?\n");
89 if (a.length == 2) {
90 s = a[1];
91 }
92 // if (selLang.value != "en-US") {
93 // var a = s.split("?\n");
94 // if (a.length == 2) {
95 // s = a[1];
96 // }
97 // }
98 if (s == "") s = "No response";
99 console.log('ssssssssssssssssssssss',s);
100 var replaceBR= (s.replace(/(?:\r\n|\r|\n)/g, "<br>")).replace(/\r?\n|\r/, "");
101
102 setChatLog([...chatLogNew, { user: "gpt", message: `${replaceBR}`} ]);
103 }
104 }
105 };
106
107 var sModel = currentModel;// "text-davinci-003";
108 var iMaxTokens = 100;
109 var sUserId = "1";
110 var dTemperature =temperature;
111
112 var data = {
113 model: sModel,
114 prompt: messages,
115 max_tokens: iMaxTokens,
116 //user: sUserId,
117 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.
119 //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.
121 }
122
123 oHttp.send(JSON.stringify(data));;
124
64 } 125 }
65 126
66 function handleTemp(temp) { 127 function handleTemp(temp) {
67 if(temp > 1){ 128 if(temp > 1){
68 setTemperature(1) 129 // setTemperature(1)
69 } else if (temp < 0){ 130 } else if (temp < 0){
70 setTemperature(0) 131 // setTemperature(0)
71 } else { 132 } else {
72 setTemperature(temp) 133 // setTemperature(temp)
73 } 134 }
74 135
75 } 136 }
......
client/src/ChatBox.js
...@@ -26,11 +26,12 @@ const ChatMessage = ({ message }) => { ...@@ -26,11 +26,12 @@ const ChatMessage = ({ message }) => {
26 <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}> 26 <div className={`chat-message ${message.user === "gpt" && "chatgpt"}`}>
27 <div className="chat-message-center"> 27 <div className="chat-message-center">
28 <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}> 28 <div className={`avatar ${message.user === "gpt" && "chatgpt"}`}>
29 {message.user === "gpt" ? <OpenAISVGLogo /> : <div>You</div>} 29 {message.user === "gpt" ? <img className="ai-logo" src="../assets/images/bot.png" width="30px"/> : <img className="ai-logo" src="../assets/images/user.svg" />}
30 </div> 30 </div>
31 <div className="message"> 31 {/* <div className="message">
32 {message.message} 32 {message.message}
33 </div> 33 </div> */}
34 <div className="message" dangerouslySetInnerHTML={{ __html: message.message }} />
34 </div> 35 </div>
35 </div> 36 </div>
36 ) 37 )
......
client/src/SideMenu.js
1 const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) => 1 const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) =>
2 <aside className="sidemenu"> 2 <aside className="sidemenu">
3 <div className="ai-logo-container">
4 <img className="ai-logo" src="../assets/images/AIPRO-WHITE.png" height="50px"/>
5 </div>
3 <div className="side-menu-button" onClick={clearChat}> 6 <div className="side-menu-button" onClick={clearChat}>
4 <span>+</span> 7 <span>+</span>
5 New Chat 8 New Chat
...@@ -54,7 +57,7 @@ const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTempera ...@@ -54,7 +57,7 @@ const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTempera
54 The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative. 57 The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative.
55 </span> 58 </span>
56 </div> 59 </div>
57 </aside> 60 </aside>
58 61
59 const Button = ({ onClick, text }) => 62 const Button = ({ onClick, text }) =>
60 <div 63 <div
......
client/src/color_theme_1.css 0 → 100644
1 .sidemenu {
2 background-color: #101827 !important;
3 }
4
5 .side-menu-button {
6 border:0 solid white;
7 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedbe9+0,aac5de+17,6199c7+50,3a84c3+51,419ad6+59,4bb8f0+71,3a8bc2+84,26558b+100;Blue+Gloss */
8 background: rgb(206,219,233); /* Old browsers */
9 background: -moz-linear-gradient(-45deg, rgba(206,219,233,1) 0%, rgba(170,197,222,1) 17%, rgba(97,153,199,1) 50%, rgba(58,132,195,1) 51%, rgba(65,154,214,1) 59%, rgba(75,184,240,1) 71%, rgba(58,139,194,1) 84%, rgba(38,85,139,1) 100%); /* FF3.6-15 */
10 background: -webkit-linear-gradient(-45deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* Chrome10-25,Safari5.1-6 */
11 background: linear-gradient(135deg, rgba(206,219,233,1) 0%,rgba(170,197,222,1) 17%,rgba(97,153,199,1) 50%,rgba(58,132,195,1) 51%,rgba(65,154,214,1) 59%,rgba(75,184,240,1) 71%,rgba(58,139,194,1) 84%,rgba(38,85,139,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
12 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedbe9', endColorstr='#26558b',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
13 text-shadow: 1px 1px 0px black;
14 font-weight: 500;
15 }
16
17 span.info {
18 text-align: left;
19 width: 100% !important;
20 display: block;
21 padding: 10px;
22 line-height: 1.5;
23 }
24
25 .chatbox {
26 background-color:#ffffff !important;
27 }
28
29 .chat-input-holder {
30 padding:15px !important;
31 background: rgb(57 57 57) !important;
32 }
33 .chat-input-textarea {
34 background-color: #dddddd !important;
35 color: #101827 !important;
36 font-size: 16px !important;
37 box-shadow: 0px 7px 6px -6px black !important;
38 }
39
40 .chat-message.chatgpt {
41 background-color:#ffffff !important;
42 }
43 .chat-message-center {
44 padding: 20px 10px !important;
45 }
46
47 .avatar {
48 background:#6BA447 !important;
49 border-radius:5px !important;
50 box-shadow: 0px 5px 5px -3px black !important;
51 }
52
53
54 .avatar.chatgpt {
55 background:#667DF1 !important;
56 border-radius:5px !important;
57 box-shadow: 0px 5px 5px -3px black !important;
58 }
59 .message {
60 padding: 7px 20px !important;
61 line-height: 25px;
62 font-size: 14px;
63 font-family: "Poppins", "Karla", sans-serif;
64 color: #353b4f;
65 -moz-osx-font-smoothing: grayscale;
66 -webkit-font-smoothing: antialiased !important;
67 -moz-font-smoothing: antialiased !important;
68 text-rendering: optimizelegibility !important;
69 }
70
71 .select-models {
72 padding:5px 10px !important;
73 background: #4d4f54 !important;
74 color: #5c6aa5 !important;
75 background: #ffffff !important;
76 border: 0 solid white;
77 }
78 .select-models option {
79 background: #2c374b !important;
80 color: #ffffff;
81 font-size: 12px;
82 }
83
84 .button-picker {
85 background:#5c6aa5 !important;
86 }
87
88 .submit {
89 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#b4ddb4+0,83c783+17,52b152+33,008a00+67,005700+83,002400+100;Green+3D+%231 */
90 background: rgb(180,221,180); /* Old browsers */
91 background: -moz-linear-gradient(-45deg, rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6-15 */
92 background: -webkit-linear-gradient(-45deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
93 background: linear-gradient(135deg, rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
94 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
95 box-shadow: 0 10px 12px -8px black;
96 }
97
98 .ai-logo-container {
99 text-align: center;
100 padding: 10px 0;
101 }
...\ 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-organization", 8 organization: "org-2OIAoj4fSwE4RCzgvglUM55T",
9 apiKey: "sk-apiKey", 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!