Skip to content

Commit f504215

Browse files
author
Ali Raheem
committed
Massive performance re-write
1 parent 3aebeae commit f504215

File tree

1 file changed

+131
-109
lines changed

1 file changed

+131
-109
lines changed

‎plugin/html/settings.js

Lines changed: 131 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
var promptVersion = 2;
2-
var defaultActions = [
1+
const promptVersion = 2;
2+
const defaultActions = [
33
{ name: "Reply to this", prompt: "Reply to the following email." },
44
{ name: "Rewrite Polite", prompt: "Rewrite the following text to be more polite. Reply with only the re-written text and no extra comments." },
55
{ name: "Rewrite Formal", prompt: "Rewrite the following text to be more formal. Reply with only the re-written text and no extra comments." },
@@ -8,98 +8,102 @@ var defaultActions = [
88
{ name: "Translate this", prompt: "Translate the following email in English." },
99
{ name: "Prompt provided", prompt: "You are a helpful chatbot that will do their best to complete the following tasks with a single response." },
1010
];
11-
var defaultModel = "gpt-3.5-turbo";
12-
13-
document.addEventListener("DOMContentLoaded", function () {
14-
var modelSelect = document.getElementById("model");
15-
var apiKeyInput = document.getElementById("api-key");
16-
var actionsContainer = document.getElementById("actions-container");
17-
var addActionButton = document.getElementById("add-action");
18-
var saveButton = document.getElementById("save-settings");
19-
var getModelsButton = document.getElementById("get-models");
20-
var maxTokensInput = document.getElementById("max-tokens");
21-
var defaultButton = document.getElementById("default-settings");
22-
browser.storage.local.get(["model", "apiKey", "actions", "maxTokens", "promptUpdated"], function (data) {
23-
let model = data.model || defaultModel;
24-
apiKeyInput.value = data.apiKey || "";
25-
let option = document.createElement("option");
26-
option.value = model;
27-
option.text = model;
28-
modelSelect.add(option);
29-
modelSelect.value = model;
30-
maxTokensInput.value = data.maxTokens || 0;
31-
let promptUpdated = +data.promptUpdated || 0;
32-
if (promptVersion > promptUpdated) {
33-
console.log('Warn prompts are stale.');
34-
let notesContainer = document.getElementById('notes-container');
35-
let warningContainer = document.createElement('div');
36-
warningContainer.id = "warning-container";
37-
warningContainer.classList.add('row')
38-
let warningDiv25 = document.createElement('div');
39-
warningDiv25.classList.add('col-25');
40-
let warningDiv75 = document.createElement('div');
41-
warningDiv75.classList.add('col-75');
42-
let warningIcon = document.createElement('img');
43-
warningIcon.src = "/images/warning.png";
44-
warningIcon.classList.add('small-icon');
45-
let warningText = document.createElement('span');
46-
warningText.innerText = "Prompts have been updated. Please backup custom prompts and click clear to load latest prompts. ";
47-
let ignoreButton = document.createElement('button');
48-
ignoreButton.classList.add('button');
49-
ignoreButton.classList.add('bad');
50-
ignoreButton.innerText = "Ignore";
51-
ignoreButton.addEventListener('click', function () {
52-
browser.storage.local.set({promptUpdated: promptVersion});
53-
warningContainer.parentElement.removeChild(warningContainer);
54-
});
55-
warningDiv25.innerText = "Warning "
56-
warningDiv25.appendChild(warningIcon);
57-
warningDiv75.appendChild(warningText);
58-
warningDiv75.appendChild(ignoreButton);
59-
warningContainer.appendChild(warningDiv25);
60-
warningContainer.appendChild(warningDiv75);
61-
notesContainer.appendChild(warningContainer);
62-
}
63-
let actions = data.actions || defaultActions;
64-
actions.forEach(function (action) {
65-
addAction(action.name, action.prompt);
11+
const defaultModel = "gpt-3.5-turbo";
12+
13+
const addAction = (name, prompt, actionsContainer) => {
14+
const actionDiv = document.createElement("div");
15+
const nameInput = document.createElement("input");
16+
const promptInput = document.createElement("textarea");
17+
const deleteButton = document.createElement("button");
18+
19+
nameInput.type = "text";
20+
nameInput.value = name;
21+
nameInput.classList.add("action-name");
22+
23+
promptInput.value = prompt;
24+
promptInput.classList.add("action-prompt");
25+
26+
deleteButton.innerText = "Delete Prompt";
27+
deleteButton.classList.add("button", "bad");
28+
deleteButton.addEventListener("click", () => actionDiv.remove());
29+
30+
const docFrag = document.createDocumentFragment();
31+
docFrag.appendChild(nameInput);
32+
docFrag.appendChild(promptInput);
33+
docFrag.appendChild(deleteButton);
34+
35+
actionDiv.appendChild(docFrag);
36+
actionsContainer.appendChild(actionDiv);
37+
};
38+
39+
40+
const handleWarning = (promptUpdated, notesContainer) => {
41+
if (promptVersion > promptUpdated) {
42+
let warningContainer = document.createElement('div');
43+
warningContainer.id = "warning-container";
44+
warningContainer.classList.add('row')
45+
let warningDiv25 = document.createElement('div');
46+
warningDiv25.classList.add('col-25');
47+
let warningDiv75 = document.createElement('div');
48+
warningDiv75.classList.add('col-75');
49+
let warningIcon = document.createElement('img');
50+
warningIcon.src = "/images/warning.png";
51+
warningIcon.classList.add('small-icon');
52+
let warningText = document.createElement('span');
53+
warningText.innerText = "Prompts have been updated. Please backup custom prompts and click clear to load latest prompts. ";
54+
let ignoreButton = document.createElement('button');
55+
ignoreButton.classList.add('button');
56+
ignoreButton.classList.add('bad');
57+
ignoreButton.innerText = "Ignore";
58+
ignoreButton.addEventListener('click', function () {
59+
browser.storage.local.set({promptUpdated: promptVersion});
60+
warningContainer.parentElement.removeChild(warningContainer);
6661
});
62+
warningDiv25.innerText = "Warning "
63+
warningDiv25.appendChild(warningIcon);
64+
warningDiv75.appendChild(warningText);
65+
warningDiv75.appendChild(ignoreButton);
66+
warningContainer.appendChild(warningDiv25);
67+
warningContainer.appendChild(warningDiv75);
68+
notesContainer.appendChild(warningContainer);
69+
}
70+
};
71+
72+
const saveSettings = (actionsContainer, modelSelect, apiKeyInput, maxTokensInput) => {
73+
const actions = Array.from(actionsContainer.children).map(actionDiv => {
74+
const nameInput = actionDiv.querySelector(".action-name");
75+
const promptInput = actionDiv.querySelector(".action-prompt");
76+
return { name: nameInput.value, prompt: promptInput.value };
6777
});
68-
addActionButton.addEventListener("click", function () {
69-
addAction("", "");
78+
79+
browser.storage.local.set({
80+
model: modelSelect.value,
81+
apiKey: apiKeyInput.value,
82+
actions: actions,
83+
maxTokens: maxTokensInput.value,
84+
promptUpdated: promptVersion
7085
});
71-
saveButton.addEventListener("click", function () {
72-
var actions = Array.from(actionsContainer.children).map(function (actionDiv) {
73-
var nameInput = actionDiv.querySelector(".action-name");
74-
var promptInput = actionDiv.querySelector(".action-prompt");
75-
return { name: nameInput.value, prompt: promptInput.value };
76-
});
77-
browser.storage.local.set({
78-
model: modelSelect.value,
79-
apiKey: apiKeyInput.value,
80-
actions: actions,
81-
maxTokens: maxTokensInput.value,
82-
promptUpdated: promptVersion
83-
});
86+
};
87+
88+
const setDefaultSettings = (actionsContainer, modelSelect, apiKeyInput, maxTokensInput) => {
89+
while (actionsContainer.firstChild) {
90+
actionsContainer.firstChild.remove();
91+
}
92+
modelSelect.value = defaultModel;
93+
apiKeyInput.value = "";
94+
maxTokensInput.value = 0;
95+
defaultActions.forEach(({ name, prompt }) => {
96+
addAction(name, prompt, actionsContainer);
8497
});
85-
defaultButton.addEventListener("click", function () {
86-
while (actionsContainer.firstChild) {
87-
actionsContainer.removeChild(actionsContainer.firstChild);
88-
}
89-
modelSelect.value = defaultModel;
90-
apiKeyInput.value = "";
91-
maxTokensInput.value = 0;
92-
defaultActions.forEach(function (action) {
93-
addAction(action.name, action.prompt);
94-
});
95-
browser.storage.local.set({
96-
model: defaultModel,
97-
apiKey: "",
98-
actions: defaultActions,
99-
promptUpdated: promptVersion});
98+
browser.storage.local.set({
99+
model: defaultModel,
100+
apiKey: "",
101+
actions: defaultActions,
102+
promptUpdated: promptVersion
100103
});
101-
getModelsButton.addEventListener("click", async function () {
102-
var apiKeyInput = document.getElementById("api-key");
104+
};
105+
106+
const getModels = async (apiKeyInput, getModelsButton) => {
103107
const response = await fetch("https://api.openai.com/v1/models", {
104108
method: "GET",
105109
headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKeyInput.value}` },
@@ -118,26 +122,44 @@ document.addEventListener("DOMContentLoaded", function () {
118122
selectElement.add(option);
119123
});
120124
getModelsButton.disabled = true;
125+
};
126+
127+
const handleDOMContentLoad = (modelSelect, apiKeyInput, actionsContainer, addActionButton, saveButton, getModelsButton, maxTokensInput, defaultButton, notesContainer) => {
128+
browser.storage.local.get(["model", "apiKey", "actions", "maxTokens", "promptUpdated"], (data) => {
129+
const { model = defaultModel, apiKey = '', maxTokens = 0, promptUpdated = 0, actions = defaultActions } = data;
130+
131+
apiKeyInput.value = apiKey;
132+
addModelToSelect(model, modelSelect);
133+
maxTokensInput.value = maxTokens;
134+
handleWarning(promptUpdated, notesContainer);
135+
136+
actions.forEach(({ name, prompt }) => addAction(name, prompt, actionsContainer));
137+
138+
addActionButton.addEventListener("click", () => addAction("", "", actionsContainer));
139+
saveButton.addEventListener("click", () => saveSettings(actionsContainer, modelSelect, apiKeyInput, maxTokensInput));
140+
defaultButton.addEventListener("click", () => setDefaultSettings(actionsContainer, modelSelect, apiKeyInput, maxTokensInput));
141+
getModelsButton.addEventListener("click", () => getModels(apiKeyInput, getModelsButton));
121142
});
143+
}
122144

123-
function addAction(name, prompt) {
124-
var actionDiv = document.createElement("div");
125-
var nameInput = document.createElement("input");
126-
var promptInput = document.createElement("textarea");
127-
var deleteButton = document.createElement("button");
128-
nameInput.type = "text";
129-
nameInput.value = name;
130-
nameInput.classList.add("action-name");
131-
promptInput.value = prompt;
132-
promptInput.classList.add("action-prompt");
133-
deleteButton.innerText = "Delete Prompt";
134-
deleteButton.classList.add("button", "bad");
135-
deleteButton.addEventListener("click", function () {
136-
actionDiv.remove();
137-
});
138-
actionDiv.appendChild(nameInput);
139-
actionDiv.appendChild(promptInput);
140-
actionDiv.appendChild(deleteButton);
141-
actionsContainer.appendChild(actionDiv);
142-
}
145+
const addModelToSelect = (model, modelSelect) => {
146+
let option = document.createElement("option");
147+
option.value = model;
148+
option.text = model;
149+
modelSelect.add(option);
150+
modelSelect.value = model;
151+
}
152+
153+
document.addEventListener("DOMContentLoaded", () => {
154+
const modelSelect = document.getElementById("model");
155+
const apiKeyInput = document.getElementById("api-key");
156+
const actionsContainer = document.getElementById("actions-container");
157+
const addActionButton = document.getElementById("add-action");
158+
const saveButton = document.getElementById("save-settings");
159+
const getModelsButton = document.getElementById("get-models");
160+
const maxTokensInput = document.getElementById("max-tokens");
161+
const defaultButton = document.getElementById("default-settings");
162+
const notesContainer = document.getElementById("notes-container");
163+
164+
handleDOMContentLoad(modelSelect, apiKeyInput, actionsContainer, addActionButton, saveButton, getModelsButton, maxTokensInput, defaultButton, notesContainer);
143165
});

0 commit comments

Comments
 (0)