diff --git a/background/background.js b/background/background.js
index 84453da..25efafa 100644
--- a/background/background.js
+++ b/background/background.js
@@ -51,11 +51,11 @@ async function callPerplexityAPI(apiKey, model, temperature, topk, topp, frequen
temperature: temperature
};
-if (topk !== null) body.top_k = topk;
-if (topp !== null) body.top_p = topp;
-if (frequencyPenalty !== null) body.frequency_penalty = frequencyPenalty;
-if (presencePenalty !== null) body.presence_penalty = presencePenalty;
-if (maxTokens !== null) body.max_tokens = maxTokens;
+if (topk !== 0) body.top_k = topk;
+if (topp !== 0) body.top_p = topp;
+if (frequencyPenalty !== -2) body.frequency_penalty = frequencyPenalty;
+if (presencePenalty !== 0) body.presence_penalty = presencePenalty;
+if (maxTokens !== 0) body.max_tokens = maxTokens;
options.body = JSON.stringify(body);
diff --git a/manifest.json b/manifest.json
index 50a7554..9f870be 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "__MSG_extensionName__",
- "version": "0.5.3",
+ "version": "0.5.4",
"description": "__MSG_extensionDescription__",
"default_locale": "en",
"homepage_url": "https://github.com/imigueldiaz/firefox-quick-abstract",
diff --git a/options/options.css b/options/options.css
index c257cb1..c49088d 100644
--- a/options/options.css
+++ b/options/options.css
@@ -37,7 +37,7 @@ label {
input[type="password"],
input[type="text"],
-input[type="number"] {
+input[type="range"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
diff --git a/options/options.html b/options/options.html
index 0a84cf9..fd7598a 100644
--- a/options/options.html
+++ b/options/options.html
@@ -6,63 +6,92 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/options/options.js b/options/options.js
index e1ce510..59aa200 100644
--- a/options/options.js
+++ b/options/options.js
@@ -13,17 +13,17 @@
function saveOptions(e) {
e.preventDefault(); // Prevent the form from submitting normally
- const topk = parseFloatOrDefault(document.querySelector("#topK").value);
- const topp = parseFloatOrDefault(document.querySelector("#topP").value);
- const frequencyPenalty = parseFloatOrDefault(document.querySelector("#frequencyPenalty").value);
- const presencePenalty = parseFloatOrDefault(document.querySelector("#presencePenalty").value);
+ const topk = parseFloatOrDefault(document.querySelector("#topK").value, 0);
+ const topp = parseFloatOrDefault(document.querySelector("#topP").value, 0);
+ const frequencyPenalty = parseFloatOrDefault(document.querySelector("#frequencyPenalty").value,-2);
+ const presencePenalty = parseFloatOrDefault(document.querySelector("#presencePenalty").value,0);
- if (topk !== null && topp !== null) {
+ if (topk !== 0 && topp !== 0) {
console.error("Error: topk and topp are mutually exclusive. Please only set one of them.");
showErrorBadge(browser.i18n.getMessage('errorTopkTopp'));
return;
}
- if (frequencyPenalty !== null && presencePenalty !== null) {
+ if (frequencyPenalty !== -2 && presencePenalty !== 0) {
console.error("Error: frequencyPenalty and presencePenalty are mutually exclusive. Please only set one of them.");
showErrorBadge(browser.i18n.getMessage('errorFrequencyPresence'))
return;
@@ -32,12 +32,12 @@ function saveOptions(e) {
browser.storage.local.set({
apiKey: document.querySelector("#apiKey").value,
model: document.querySelector("#model").value,
- temperature: parseFloatOrDefault(document.querySelector("#temperature").value),
+ temperature: parseFloatOrDefault(document.querySelector("#temperature").value, 1),
topk: topk,
topp: topp,
frequencyPenalty: frequencyPenalty,
presencePenalty: presencePenalty,
- maxTokens: parseFloatOrDefault(document.querySelector("#maxTokens").value),
+ maxTokens: parseFloatOrDefault(document.querySelector("#maxTokens").value, 0),
}).then(() => {
console.log("Settings saved");
showInfoBadge();
@@ -60,9 +60,9 @@ function showErrorBadge(message) {
}
-function parseFloatOrDefault(value) {
+function parseFloatOrDefault(value,defaultVal) {
const parsedValue = parseFloat(value);
- return isNaN(parsedValue) ? null : parsedValue;
+ return isNaN(parsedValue) ? defaultVal : parsedValue;
}
@@ -90,11 +90,11 @@ function restoreOptions() {
document.querySelector("#apiKey").value = result.apiKey || 'pplx-xxxxxxxxxxx';
document.querySelector("#model").value = result.model || 'sonar-medium-chat';
document.querySelector("#temperature").value = result.temperature || 1;
- document.querySelector("#topK").value = result.topk || '';
- document.querySelector("#topP").value = result.topp || '';
- document.querySelector("#frequencyPenalty").value = result.frequencyPenalty || '';
- document.querySelector("#presencePenalty").value = result.presencePenalty || '';
- document.querySelector("#maxTokens").value = result.maxTokens || '';
+ document.querySelector("#topK").value = result.topk || 0;
+ document.querySelector("#topP").value = result.topp || 0;
+ document.querySelector("#frequencyPenalty").value = result.frequencyPenalty || -2;
+ document.querySelector("#presencePenalty").value = result.presencePenalty || 0;
+ document.querySelector("#maxTokens").value = result.maxTokens || 0;
}
/**
diff --git a/popup/extension.html b/popup/extension.html
index 8195493..e2096ce 100644
--- a/popup/extension.html
+++ b/popup/extension.html
@@ -74,38 +74,56 @@
diff --git a/popup/popup.js b/popup/popup.js
index 299f957..85d75d3 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -22,22 +22,22 @@ async function getConfiguration() {
apiKey: 'pplx-xxxxxxxxxxx', // Default API key
model: 'sonar-medium-chat', // Default model
temperature: 1, // Default temperature
- topk: null,
- topp: null,
- frequencyPenalty: null,
- presencePenalty: null,
- maxTokens: null
+ topk: 0,
+ topp: 0,
+ frequencyPenalty: -2,
+ presencePenalty: 0,
+ maxTokens: 0
}).catch(error => {
console.error(`Error getting configuration: ${error}`);
return {
apiKey: 'pplx-xxxxxxxxxxx', // Default API key
model: 'sonar-medium-chat', // Default model
temperature: 1, // Default temperature
- topk: null,
- topp: null,
- frequencyPenalty: null,
- presencePenalty: null,
- maxTokens: null
+ topk: 0,
+ topp: 0,
+ frequencyPenalty: -2,
+ presencePenalty: 0,
+ maxTokens: 0
};
});
@@ -405,6 +405,30 @@ function loadInitialText() {
}
+/**
+ * Change the output value of the range input
+ * when the input value changes.
+ * @param {Event} event - The input event.
+ * @returns {void}
+ **/
+function changeRangeOutput(event) {
+ const output = event.target.nextElementSibling;
+ output.textContent = event.target.value;
+}
+
+/**
+ * Set the initial range output value
+ * when the popup is loaded.
+ * @param {Element} element - The range input element.
+ * @returns {void}
+ **/
+function setInitialRangeOutput(element) {
+ const output = document.querySelector(`output[for='${element.id}'`);
+ output.textContent = element.value;
+}
+
+
+
// Add an event listener to the resume button to trigger the API call.
document.getElementById('resume').addEventListener('click', triggerAPI);
@@ -418,6 +442,15 @@ document.querySelectorAll('.help-icon').forEach(icon => {
icon.setAttribute('data-tooltip', tooltipMessage);
});
+// Add event listeners to the range inputs to change the output value.
+document.querySelectorAll("input[type='range']").forEach(range => {
+ range.addEventListener('input', changeRangeOutput);
+});
+
+document.querySelectorAll("input[type='range']").forEach(range => {
+ setInitialRangeOutput(range);
+});
+
// Add an event listener to the popup's elements.
document.addEventListener("DOMContentLoaded", function() {
diff --git a/style/style.css b/style/style.css
index 09491c0..ca470d6 100644
--- a/style/style.css
+++ b/style/style.css
@@ -114,10 +114,10 @@ button.ok:hover {
color: #0C0C0D;
}
#options-form input[type="text"],
-#options-form input[type="number"],
+#options-form input[type="range"],
#options-form input[type="password"] {
- width: 80%;
- padding: 8px;
+ width: 50%;
+ padding: 5px;
margin-bottom: 8px;
background-color: #FFFFFF;
border: 1px solid #D7D7DB;
@@ -153,6 +153,29 @@ button.ok:hover {
width: 48%;
}
+.range-container {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ vertical-align: middle;
+ background-color: #4a4a4a44;
+ border-radius: 6px;
+ padding: 2px 5px;
+ border: 1px solid #444;
+}
+
+output {
+ display: inline-block;
+ margin: 0 8px;
+ font-size: 12px;
+ text-align: center;
+ height: 20px;
+ line-height: 20px;
+ vertical-align: middle
+ border: 1px solid #D7D7DB;
+ border-radius: 4px;
+}
+
.button-row {
display: flex;
justify-content: flex-end;
@@ -261,6 +284,8 @@ button.ok:hover {
transition: opacity 0.5s ease-in-out;
text-align: center;
margin-top: 10px;
+ position: relative;
+ top: -35px;
}
#tabs {
display: flex;
@@ -320,9 +345,9 @@ img#logo {
text-align: center;
border: 1px solid #0a84ff33;
border-radius: 16px;
- background: linear-gradient(45deg, #f0f0f0, #fafafa);
+ background: linear-gradient(45deg, #e1e1e1, #fcfcfc);
background-size: 400% 400%;
- animation: gradientAnimation 15s ease-in-out infinite;
+ animation: gradientAnimation 5s ease-in-out infinite;
color: #0a84ff
}
@@ -380,7 +405,7 @@ img#logo {
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-in-out;
- z-index: 1;
+ z-index: 10;
width: 200px;
border : 1px solid #4a4a4a;
box-shadow: 0 0 10px 0 #4a4a4a
@@ -431,7 +456,7 @@ img#logo {
color: #F2F2F7;
}
#options-form input[type="text"],
- #options-form input[type="number"],
+ #options-form input[type="range"],
#options-form input[type="password"] {
background-color: #1C1C1E;
border-color: #3A3A3C;
@@ -483,10 +508,10 @@ img#logo {
font-weight: bold;
}
#aboutContent {
- background: linear-gradient(45deg, #2c2c2e, #1c1c1e);
+ background: linear-gradient(45deg, #3c3c3c, #1c1c1e);
border: 1px solid #007AFF55;
background-size: 400% 400%;
- animation: gradientAnimation 15s ease-in-out infinite;
+ animation: gradientAnimation 5s ease-in-out infinite;
}
#aboutContent a {
color: #007AFF;