diff --git a/README.md b/README.md index b0ed063..9bbca1b 100644 --- a/README.md +++ b/README.md @@ -26,10 +26,6 @@ You just need to enter on the keyboard the code you have set into the ext Type back the code on the keyboard and the code will be removed from the current page. -## Test - -To test the code, you can run the index.js file located in the "test" folder. - ## Options

@@ -39,9 +35,11 @@ To test the code, you can run the index.js file located in the "test" fol - Api key\*: the openai api key. - Code\*: code that you will need to inject/remove the code. - Langage: the langage you want chatgpt reply (if it's not set it will take the question langage). +- GPT Model: the gpt model you want to use (by default it's "gpt-3.5-turbo"). - Cursor indication: show a pointer cursor and a hourglass to know when the request is finished. - Title indication: show some informations into the title to know for example if the code have been injected.
![Injected](./assets/title-injected.png) +- Infinite try: click as much as you want on the question (don't forget to reset the question). - Console logs: show logs into the console.
Logs - Typing effect: create a typing effect for text. Type any text and it will be replaced by the correct one. If you want to stop it press Backspace key. @@ -85,3 +83,7 @@ To test the code, you can run the index.js file located in the "test" fol To know if the answer has been copied to the clipboard, you can look at the title of the page which will become "Copied to clipboard" for 3 seconds. ![Clipboard](./assets/clipboard.gif) + +## Test + +To test the code, you can run the index.js file located in the "test" folder. diff --git a/assets/logs.png b/assets/logs.png index fc0b8cd..bd62287 100644 Binary files a/assets/logs.png and b/assets/logs.png differ diff --git a/assets/popup.png b/assets/popup.png index f73dbf6..21a20c9 100644 Binary files a/assets/popup.png and b/assets/popup.png differ diff --git a/extension/moodle-gpt.js b/extension/moodle-gpt.js index 72711cc..b48f02b 100644 --- a/extension/moodle-gpt.js +++ b/extension/moodle-gpt.js @@ -34,7 +34,7 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { for (const listener of listeners) { if (config.cursor) listener.element.style.cursor = "initial"; listener.element.removeEventListener("click", listener.fn, { - once: true, + once: !config.infinite, }); } if (config.title) titleIndications("Removed"); @@ -54,7 +54,7 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { if (config.cursor) hiddenButton.style.cursor = "pointer"; const fn = reply.bind(null, hiddenButton, form, query); listeners.push({ element: hiddenButton, fn }); - hiddenButton.addEventListener("click", fn, { once: true }); + hiddenButton.addEventListener("click", fn, { once: !config.infinite }); } if (config.title) titleIndications("Injected"); @@ -87,7 +87,8 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { Authorization: `Bearer ${config.apiKey}`, }, body: JSON.stringify({ - model: "gpt-3.5-turbo", + model: + config.model && config.model !== "" ? config.model : "gpt-3.5-turbo", messages: [{ role: "user", content: question }], temperature: 0.8, top_p: 1.0, @@ -105,7 +106,7 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { */ class Logs { static question(text) { - const css = "color: blue"; + const css = "color: cyan"; console.log("%c[QUESTION]: %s", css, text); } @@ -143,7 +144,7 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { : "the following question langage" } and only show the result: ${question} - (If you have to choose between multiple results only show the corrects one and seprate responses with new line)`; + (If you have to choose between multiple results only show the corrects one and separate them with new line)`; const response = await getChatGPTResponse(finalQuestion); @@ -152,7 +153,8 @@ chrome.storage.sync.get(["moodleGPT"]).then(function (storage) { Logs.response(response); } - if (config.cursor) hiddenButton.style.cursor = "initial"; + if (config.cursor) + hiddenButton.style.cursor = config.infinite ? "pointer" : "initial"; //if we dont find the input we copy into the clipboard if (inputList.length === 0) { diff --git a/extension/popup/index.html b/extension/popup/index.html index 318e85b..527c05c 100644 --- a/extension/popup/index.html +++ b/extension/popup/index.html @@ -19,42 +19,63 @@ >icon

MoodleGPT

-
+
-
+
-
+
-
- - +
+ +
-
- - +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
-
- - -
-
- - -
-
- - -
-

-
+

Message

+
+ + See the documentation + diff --git a/extension/popup/index.js b/extension/popup/index.js index ef6b53d..0366410 100644 --- a/extension/popup/index.js +++ b/extension/popup/index.js @@ -1,8 +1,15 @@ const saveBtn = document.querySelector(".save"); const message = document.querySelector("#message"); -const inputsText = ["apiKey", "code", "langage"]; -const inputsCheckbox = ["logs", "title", "cursor", "typing", "mouseover"]; +const inputsText = ["apiKey", "code", "langage", "model"]; +const inputsCheckbox = [ + "logs", + "title", + "cursor", + "typing", + "mouseover", + "infinite", +]; function showMessage(messageTxt, valide) { message.style.color = valide ? "limegreen" : "red"; @@ -13,10 +20,10 @@ function showMessage(messageTxt, valide) { //save the configuration saveBtn.addEventListener("click", function () { - const [apiKey, code, langage] = inputsText.map((selector) => + const [apiKey, code, langage, model] = inputsText.map((selector) => document.querySelector("#" + selector).value.trim() ); - const [logs, title, cursor, typing, mouseover] = inputsCheckbox.map( + const [logs, title, cursor, typing, mouseover, infinite] = inputsCheckbox.map( (selector) => document.querySelector("#" + selector).checked ); @@ -35,11 +42,13 @@ saveBtn.addEventListener("click", function () { apiKey, code, langage, + model, logs, title, cursor, typing, mouseover, + infinite, }, }); diff --git a/extension/popup/style.css b/extension/popup/style.css index 8a40cf8..64ea098 100644 --- a/extension/popup/style.css +++ b/extension/popup/style.css @@ -32,28 +32,37 @@ main { padding: 0.75rem; gap: 0.4rem; text-align: center; - width: 20rem; + width: 22rem; } img { width: 5rem; - margin-top: 1rem; + margin-top: 0.75rem; } h1 { - margin-top: 1rem; - margin-bottom: 1rem; + margin-top: 0.75rem; + margin-bottom: 0.75rem; +} + +a { + color: var(--btn-color); + margin: 0; } .line { display: flex; + width: 100%; + gap: 0.5rem; +} + +.center { justify-content: center; align-items: center; - width: 100%; } .line .textLabel { - width: 5rem; + width: 6rem; text-transform: uppercase; } @@ -72,18 +81,25 @@ h1 { margin-right: 0.3rem; } +.col { + display: flex; + flex-direction: column; + text-align: left; +} + .save { border: none; background-color: var(--btn-color); - margin-top: 1.5rem; padding: 0.5rem 2rem; + margin-top: 1rem; cursor: pointer; border-radius: 0.2rem; font-size: 1.5rem; - margin-bottom: 1rem; + margin-bottom: 0.75rem; } #message { display: none; - margin-top: 1rem; + margin-top: 0.75rem; + margin-bottom: -0.25rem; } diff --git a/test/index.html b/test/index.html index 8c96863..b83d1ba 100644 --- a/test/index.html +++ b/test/index.html @@ -121,14 +121,17 @@
-

Put the following tags in the order of creation of a html file:

+

+ Put the three steps needed in a general sense for a computer program + to solve the problem in the correct order +

- +
-

html

+

Understand the problem
-

body

+

Carry out the plan and write the actual code

head

 +

Create a step-by-step plan for how you'll solve it

+ 		- +
-

5*5

+

1. 5*5
-

20 - 10

+

2. 20 - 10

10+10

3. 10+10