Merge branch '26797_formatting' into 'master'
26797_formatting See merge request !2
Showing
19 changed files
with
293 additions
and
113 deletions
.gitignore
0 → 100644
| 1 | node_modules | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
client/package-lock.json
0 → 100644
This diff could not be displayed because it is too large.
| ... | @@ -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/AIPRO-BLACK.png
0 → 100644
12.9 KB
client/public/assets/images/AIPRO-WHITE.png
0 → 100644
34 KB
client/public/assets/images/bot.png
0 → 100644
5.99 KB
1.36 KB
client/public/assets/images/send.png
0 → 100644
8.29 KB
client/public/assets/images/send2.png
0 → 100644
8.74 KB
client/public/assets/images/send3.png
0 → 100644
8.9 KB
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 |
| ... | @@ -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; | 108 | |
| 107 | 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 { |
| ... | @@ -208,4 +216,4 @@ | ... | @@ -208,4 +216,4 @@ |
| 208 | } | 216 | } |
| 209 | .submit:hover { | 217 | .submit:hover { |
| 210 | background:#066d55; | 218 | background:#066d55; |
| 211 | } | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 219 | } | ... | ... |
| 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 | ||
| ... | @@ -38,7 +40,7 @@ function App() { | ... | @@ -38,7 +40,7 @@ function App() { |
| 38 | setModels(data.models.data) | 40 | setModels(data.models.data) |
| 39 | }) | 41 | }) |
| 40 | } | 42 | } |
| 41 | 43 | ||
| 42 | async function handleSubmit(e){ | 44 | async function handleSubmit(e){ |
| 43 | e.preventDefault(); | 45 | e.preventDefault(); |
| 44 | let chatLogNew = [...chatLog, { user: "me", message: `${chatInput}`} ] | 46 | let chatLogNew = [...chatLog, { user: "me", message: `${chatInput}`} ] |
| ... | @@ -46,30 +48,89 @@ function App() { | ... | @@ -46,30 +48,89 @@ function App() { |
| 46 | setChatLog(chatLogNew) | 48 | setChatLog(chatLogNew) |
| 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 | } |
| ... | @@ -77,17 +138,17 @@ function App() { | ... | @@ -77,17 +138,17 @@ function App() { |
| 77 | return ( | 138 | return ( |
| 78 | <div className="App"> | 139 | <div className="App"> |
| 79 | <SideMenu | 140 | <SideMenu |
| 80 | currentModel={currentModel} | 141 | currentModel={currentModel} |
| 81 | setCurrentModel={setCurrentModel} | 142 | setCurrentModel={setCurrentModel} |
| 82 | models={models} | 143 | models={models} |
| 83 | setTemperature={handleTemp} | 144 | setTemperature={handleTemp} |
| 84 | temperature={temperature} | 145 | temperature={temperature} |
| 85 | clearChat={clearChat} | 146 | clearChat={clearChat} |
| 86 | /> | 147 | /> |
| 87 | <ChatBox | 148 | <ChatBox |
| 88 | chatInput={chatInput} | 149 | chatInput={chatInput} |
| 89 | chatLog={chatLog} | 150 | chatLog={chatLog} |
| 90 | setChatInput={setChatInput} | 151 | setChatInput={setChatInput} |
| 91 | handleSubmit={handleSubmit} /> | 152 | handleSubmit={handleSubmit} /> |
| 92 | </div> | 153 | </div> |
| 93 | ); | 154 | ); | ... | ... |
| ... | @@ -10,7 +10,7 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) => | ... | @@ -10,7 +10,7 @@ const ChatBox = ({chatLog, setChatInput, handleSubmit, chatInput}) => |
| 10 | </div> | 10 | </div> |
| 11 | <div className="chat-input-holder"> | 11 | <div className="chat-input-holder"> |
| 12 | <form className="form" onSubmit={handleSubmit}> | 12 | <form className="form" onSubmit={handleSubmit}> |
| 13 | <input | 13 | <input |
| 14 | rows="1" | 14 | rows="1" |
| 15 | value={chatInput} | 15 | value={chatInput} |
| 16 | onChange={(e)=> setChatInput(e.target.value)} | 16 | onChange={(e)=> setChatInput(e.target.value)} |
| ... | @@ -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 | ) | ... | ... |
| 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="side-menu-button" onClick={clearChat}> | 3 | <div className="ai-logo-container"> |
| 4 | <span>+</span> | 4 | <img className="ai-logo" src="../assets/images/AIPRO-WHITE.png" height="50px"/> |
| 5 | New Chat | 5 | </div> |
| 6 | </div> | 6 | <div className="side-menu-button" onClick={clearChat}> |
| 7 | <div className="models"> | 7 | <span>+</span> |
| 8 | <label className="side-label">Model</label> | 8 | New Chat |
| 9 | <select | 9 | </div> |
| 10 | // active if model is select is currentModel | 10 | <div className="models"> |
| 11 | value={currentModel} | 11 | <label className="side-label">Model</label> |
| 12 | className="select-models" | 12 | <select |
| 13 | onChange={(e)=>{ | 13 | // active if model is select is currentModel |
| 14 | setCurrentModel(e.target.value) | 14 | value={currentModel} |
| 15 | }}> | 15 | className="select-models" |
| 16 | {models && models.length ? models.map((model, index) => ( | 16 | onChange={(e)=>{ |
| 17 | <option | 17 | setCurrentModel(e.target.value) |
| 18 | key={model.id} | 18 | }}> |
| 19 | value={model.id}>{model.id}</option> | 19 | {models && models.length ? models.map((model, index) => ( |
| 20 | )) : <option | 20 | <option |
| 21 | key={"text-davinci-003"} | 21 | key={model.id} |
| 22 | value={"text-davinci-003"}>{"text-davinci-003"}</option>} | 22 | value={model.id}>{model.id}</option> |
| 23 | </select> | 23 | )) : <option |
| 24 | 24 | key={"text-davinci-003"} | |
| 25 | <Button | 25 | value={"text-davinci-003"}>{"text-davinci-003"}</option>} |
| 26 | text="Smart - Davinci" | 26 | </select> |
| 27 | onClick={()=>setCurrentModel("text-davinci-003")} /> | 27 | |
| 28 | <Button | 28 | <Button |
| 29 | text="Code - Crushman" | 29 | text="Smart - Davinci" |
| 30 | onClick={()=>setCurrentModel("code-cushman-001")} /> | 30 | onClick={()=>setCurrentModel("text-davinci-003")} /> |
| 31 | <span className="info"> | 31 | <Button |
| 32 | The model parameter controls the engine used to generate the response. Davinci produces best results. | 32 | text="Code - Crushman" |
| 33 | </span> | 33 | onClick={()=>setCurrentModel("code-cushman-001")} /> |
| 34 | <label className="side-label" >Temperature</label> | 34 | <span className="info"> |
| 35 | <input | 35 | The model parameter controls the engine used to generate the response. Davinci produces best results. |
| 36 | className="select-models" | 36 | </span> |
| 37 | type="number" | 37 | <label className="side-label" >Temperature</label> |
| 38 | onChange={(e)=> setTemperature(e.target.value)} | 38 | <input |
| 39 | min="0" | 39 | className="select-models" |
| 40 | max="1" | 40 | type="number" |
| 41 | step="0.1" | 41 | onChange={(e)=> setTemperature(e.target.value)} |
| 42 | value={temperature} | 42 | min="0" |
| 43 | /> | 43 | max="1" |
| 44 | <Button | 44 | step="0.1" |
| 45 | text="0 - Logical" | 45 | value={temperature} |
| 46 | onClick={()=>setTemperature(0)} /> | 46 | /> |
| 47 | <Button | 47 | <Button |
| 48 | text="0.5 - Balanced" | 48 | text="0 - Logical" |
| 49 | onClick={()=>setTemperature(0.5)} /> | 49 | onClick={()=>setTemperature(0)} /> |
| 50 | <Button | 50 | <Button |
| 51 | text="1 - Creative" | 51 | text="0.5 - Balanced" |
| 52 | onClick={()=>setTemperature(1)} /> | 52 | onClick={()=>setTemperature(0.5)} /> |
| 53 | <span className="info"> | 53 | <Button |
| 54 | The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative. | 54 | text="1 - Creative" |
| 55 | </span> | 55 | onClick={()=>setTemperature(1)} /> |
| 56 | </div> | 56 | <span className="info"> |
| 57 | </aside> | 57 | The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative. |
| 58 | </span> | ||
| 59 | </div> | ||
| 60 | </aside> | ||
| 58 | 61 | ||
| 59 | const Button = ({ onClick, text }) => | 62 | const Button = ({ onClick, text }) => |
| 60 | <div | 63 | <div |
| 61 | className="button-picker" | 64 | className="button-picker" |
| 62 | onClick={onClick}> | 65 | onClick={onClick}> |
| 63 | {text} | 66 | {text} |
| 64 | </div> | 67 | </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 |
| ... | @@ -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 | ||
| ... | @@ -19,7 +19,7 @@ app.use(cors()) | ... | @@ -19,7 +19,7 @@ app.use(cors()) |
| 19 | app.use(require('morgan')('dev')) | 19 | app.use(require('morgan')('dev')) |
| 20 | 20 | ||
| 21 | 21 | ||
| 22 | // Routing | 22 | // Routing |
| 23 | 23 | ||
| 24 | // Primary Open AI Route | 24 | // Primary Open AI Route |
| 25 | app.post('/', async (req, res) => { | 25 | app.post('/', async (req, res) => { |
| ... | @@ -27,7 +27,7 @@ app.post('/', async (req, res) => { | ... | @@ -27,7 +27,7 @@ app.post('/', async (req, res) => { |
| 27 | const response = await openai.createCompletion({ | 27 | const response = await openai.createCompletion({ |
| 28 | model: `${currentModel}`,// "text-davinci-003", | 28 | model: `${currentModel}`,// "text-davinci-003", |
| 29 | prompt: `${message}`, | 29 | prompt: `${message}`, |
| 30 | max_tokens: 100, | 30 | max_tokens: 100, |
| 31 | temperature, | 31 | temperature, |
| 32 | }); | 32 | }); |
| 33 | res.json({ | 33 | res.json({ | ... | ... |
package-lock.json
0 → 100644
This diff is collapsed.
Click to expand it.
-
Please register or sign in to post a comment