From 00a0f45d3480f3f0c8d1753f3dfcc91857195a33 Mon Sep 17 00:00:00 2001 From: Hamza Elkotb <61008779+HamzaElkotp@users.noreply.github.com> Date: Mon, 24 Apr 2023 02:44:30 +0300 Subject: [PATCH] ChatGPT control In this version these new features added: - Adding Menu to control chatGPT settings - Adding their functionalities - fixing welcomeMsgs random select --- Source_Code/assets/javascript/app.js | 68 +++++++++++++++++++++++----- Source_Code/assets/style/main.css | 60 ++++++++++++++++++++---- Source_Code/manifest.json | 2 +- Source_Code/popup.html | 67 +++++++++++++++++++++++++-- 4 files changed, 170 insertions(+), 27 deletions(-) diff --git a/Source_Code/assets/javascript/app.js b/Source_Code/assets/javascript/app.js index 4e303dc..5d19d2b 100644 --- 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,7 +130,6 @@ function apiFetcher(APIurl, key, mthd, behave, msg, fun){ }) } - try{ submitBTN.addEventListener('click',()=>{ let input = textInput.value; @@ -101,6 +137,14 @@ try{ welcomeBox.classList.add('trans') textInput.value = ''; userMsgDom(input); - apiFetcher(apiKeys, token, 'POST', 'user', input, pushTmsgCont) + apiFetcher(apiKeys, token, 'POST', input, pushTmsgCont) }) -}catch(e){} \ No newline at end of file +}catch(e){} + + + + + + + + diff --git a/Source_Code/assets/style/main.css b/Source_Code/assets/style/main.css index 52447bc..0cd548f 100644 --- 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 index 0c3a905..0f0ae49 100644 --- 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 index cfe3d1f..82cb4ad 100644 --- a/Source_Code/popup.html +++ b/Source_Code/popup.html @@ -31,10 +31,69 @@ -
- - -
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+
+ +
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+
+ +
+ + + +
+
\ No newline at end of file