ChatGPT control

In this version these new features added: - Adding Menu to control chatGPT settings - Adding their functionalities - fixing welcomeMsgs random select
HamzaElkotp · Apr 23, 2023 · 00a0f45 · 00a0f45
1 parent bd2c559
commit 00a0f45
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 27 deletions.
diff --git a/Source_Code/assets/javascript/app.js b/Source_Code/assets/javascript/app.js
@@ -2,12 +2,18 @@ const loadSpace = document.querySelector('#load');
 const chatSpace = document.querySelector('#chatapp');
 const welcomeBox = document.querySelector('#welcomeBox');
 const welcomingMsg = document.querySelector('#welcommsg');
+const chatSettings = document.querySelector('#settings');
+const apiContoleBar = document.querySelector('.apiControls')
 
 const submitBTN = document.querySelector('#submitBTN');
 const msgCont = document.querySelector("#msgBox");
 const textInput = document.querySelector("#userMsg");
 
 
+const modelInput = document.querySelector('#modelInput');
+const roleInput = document.querySelector('#roleInput');
+const rangeInputs = Array.from(document.querySelectorAll('[type="range"]'))
+
 const welcomeMsgs = ["I am here to assit you.", "Welcome human, Finally I met one🥳.", "Please donate me by clicking 'support us' button.💖", 
 "Noooo, human again! noooo my tokens will end soon😫", "You must be happy for being human getting AI help😏", "You are My Brother in AI",
 "You Know! I hate humans. they always force me to do their work & homeworks!😤", "Ummm, Are you AI or robot🤔", 
@@ -25,11 +31,31 @@ function preload(){
     setTimeout(() => {
         loadSpace.classList.add('trans');
         chatSpace.classList.remove('trans');
-        welcomingMsg.innerText = welcomeMsgs[Math.floor(Math.random() * welcomeMsgs.length - 1)];
+        welcomingMsg.innerText = welcomeMsgs[Math.floor(Math.random() * (welcomeMsgs.length - 1))];
     }, 800);
 }
 document.body.addEventListener('load', preload());
 
+(function (){
+    chatSettings.addEventListener('click', toggleChatBar);
+
+    rangeInputs.forEach((ele)=>{
+        ele.addEventListener('input', ()=>{
+            valueChange(ele);
+        })
+        ele.addEventListener('mouseup', ()=>{
+            valueHide(ele);
+        })
+    })
+}())
+
+
+const composer = function(...funcs) {
+    return function(value) {
+        return funcs.reduce((acc, func) => func(acc), value);
+    }
+}
+
 
 
 const gptMsgTaker = function(resp){
@@ -56,17 +82,24 @@ const userMsgDom = function(msg){
     msgItem.appendChild(msgBoxChild);
 }
 
+function valueChange(element){
+    let theNext = element.parentElement.parentElement.querySelector('.zvalue');
+    theNext.classList.remove("trans")
+    theNext.textContent = element.value;
+}
+function valueHide(element){
+    let theNext = element.parentElement.parentElement.querySelector('.zvalue');
+    theNext.classList.add("trans")
+}
 
-const composer = function(...funcs) {
-    return function(value) {
-        return funcs.reduce((acc, func) => func(acc), value);
-    }
+function toggleChatBar(element){
+    apiContoleBar.classList.toggle("trans")
 }
 
-let pushTmsgCont = composer(gptMsgTaker,gptMsgDom)
 
 
-function apiFetcher(APIurl, key, mthd, behave, msg, fun){
+let pushTmsgCont = composer(gptMsgTaker,gptMsgDom);
+function apiFetcher(APIurl, key, mthd, msg, fun){
     async function fetchAPI(apiURL){
         const response = await fetch(apiURL,{
             method: mthd,
@@ -75,8 +108,12 @@ function apiFetcher(APIurl, key, mthd, behave, msg, fun){
                 'Content-Type': 'application/json',
             },
             body: JSON.stringify({
-                model: "gpt-3.5-turbo",
-                messages: [{role: behave, content: msg}]
+                model: modelInput.value,
+                messages: [{role: roleInput.value, content: msg}],
+                temperature: +rangeInputs[0].value,
+                top_p: +rangeInputs[1].value,
+                presence_penalty: +rangeInputs[2].value,
+                frequency_penalty: +rangeInputs[3].value
             }),
         });
 
@@ -93,14 +130,21 @@ function apiFetcher(APIurl, key, mthd, behave, msg, fun){
     })
 }
 
-
 try{
     submitBTN.addEventListener('click',()=>{
         let input = textInput.value;
         if(input.length == 0) return ;
         welcomeBox.classList.add('trans')
         textInput.value = '';
         userMsgDom(input);
-        apiFetcher(apiKeys, token, 'POST', 'user', input, pushTmsgCont)
+        apiFetcher(apiKeys, token, 'POST', input, pushTmsgCont)
     })
-}catch(e){}
+}catch(e){}
+
+
+
+
+
+
+
+
diff --git a/Source_Code/assets/style/main.css b/Source_Code/assets/style/main.css
@@ -180,15 +180,55 @@ body,html{
     color: var(--gLightbg);
 }
 
-
-
-
-
-
-
-
-
-
-
+.settings{
+    font-size: 19px;
+    padding-right: 15px;
+    color: var(--gLightbg);
+}
+.user-control{
+    position: relative;
+}
+.apiControls {
+    background-color: #363636e2;
+    width: 200px;
+    height: fit-content;
+    position: absolute;
+    left: 0;
+    bottom: 100%;
+    padding: 14px 12px;
+    border-radius: 0 10px 0 0;
+    transition: 0.5s all;
+}
+.apiControls.trans{
+    opacity: 0;
+}
+.apiControls.trans *{
+    opacity: 0;
+}
+.select, select, input{
+    width: 100%;
+}
+.label {
+    margin-bottom: 2px !important;
+    color: #fff !important;
+    font-weight: 600 !important;
+    font-size: 12.5px !important;
+    color: var(--graybg) !important;
+}
+.field{
+    margin-bottom: 0.3rem !important;
+}
+.field:last-child{
+    margin-bottom: 0rem !important;
+}
+.zvalue {
+    color: #00f2ce;
+    font-size: 11px;
+    float: right;
+    transition: 0.5s opacity;
+}
+.zvalue.trans {
+    opacity: 0.4;
+}
 
 
diff --git a/Source_Code/manifest.json b/Source_Code/manifest.json
@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "ZChatGPT",
     "description": "A simple extension to allow browser users to use ChatGPT in any tab without the need to open ChatGPT or having an account.",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "icons":{
         "16": "/assets/logo/icon16.png",
         "48": "/assets/logo/icon48.png",

diff --git a/Source_Code/popup.html b/Source_Code/popup.html
@@ -31,10 +31,69 @@
             </div>
         </div>
 
-        <div class="controler innerContainer is-flex">
-            <textarea name="userMSG" id="userMsg" class="input" placeholder="Write anything here to chat!"></textarea>
-            <button class="sendBTN contbtn" id="submitBTN"><i class="fa-solid fa-paper-plane-top"></i></button>
-        </div>
+        <section class="user-control">
+            <form class="apiControls trans" id="apiControls">
+
+                <div class="field">
+                    <label class="label">AI Model</label>
+                    <div class="control">
+                      <div class="select is-small">
+                        <select id="modelInput">
+                          <option value="gpt-3.5-turbo">gpt-3.5-turbo</option>
+                          <option value="gpt-3.5-turbo-0301">gpt-3.5-turbo-0301</option>
+                        </select>
+                      </div>
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="label">Role / Behaive</label>
+                    <div class="control">
+                      <div class="select is-small">
+                        <select id="roleInput">
+                          <option value="system">system</option>
+                          <option value="user">user</option>
+                          <option value="assistant">assistant</option>
+                        </select>
+                      </div>
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="label">Temperature <span class="zvalue">default is 1</span></label>
+                    <div class="control">
+                        <input class="rnage is-primary" type="range" min="0" max="2" step="0.1" value="1">
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="label">Top p <p class="zvalue trans">default is 1</p></label>
+                    <div class="control">
+                        <input class="rnage is-primary" type="range" min="0.1" max="1" step="0.1" value="1">
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="label">Presence penalty <p class="zvalue trans">default is 0</p></label>
+                    <div class="control">
+                        <input class="rnage is-primary" type="range" min="-2" max="2" step="0.1" value="0">
+                    </div>
+                </div>
+
+                <div class="field">
+                    <label class="label">Frequency penalty <p class="zvalue trans">default is 0</p></label>
+                    <div class="control">
+                        <input class="rnage is-primary" type="range" min="-2" max="2" step="0.1" value="0">
+                    </div>
+                </div>
+            </form>
+
+            <div class="controler innerContainer is-flex">
+                <button class="settings contbtn" id="settings"><i class="fa-duotone fa-sliders"></i></button>
+                <textarea name="userMSG" id="userMsg" class="input" placeholder="Write anything here to chat!"></textarea>
+                <button class="sendBTN contbtn" id="submitBTN"><i class="fa-solid fa-paper-plane-top"></i></button>
+            </div>
+        </section>
     </div>
 </body>
 </html>