Skip to content

Commit ef16817

Browse files
imigueldiazimigueldiaz
committed
Transforming input type number on input type range
1 parent 833c399 commit ef16817

File tree

7 files changed

+213
-108
lines changed

7 files changed

+213
-108
lines changed

‎background/background.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ async function callPerplexityAPI(apiKey, model, temperature, topk, topp, frequen
5151
temperature: temperature
5252
};
5353

54-
if (topk !== null) body.top_k = topk;
55-
if (topp !== null) body.top_p = topp;
56-
if (frequencyPenalty !== null) body.frequency_penalty = frequencyPenalty;
57-
if (presencePenalty !== null) body.presence_penalty = presencePenalty;
58-
if (maxTokens !== null) body.max_tokens = maxTokens;
54+
if (topk !== 0) body.top_k = topk;
55+
if (topp !== 0) body.top_p = topp;
56+
if (frequencyPenalty !== -2) body.frequency_penalty = frequencyPenalty;
57+
if (presencePenalty !== 0) body.presence_penalty = presencePenalty;
58+
if (maxTokens !== 0) body.max_tokens = maxTokens;
5959

6060
options.body = JSON.stringify(body);
6161

‎options/options.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ label {
3737

3838
input[type="password"],
3939
input[type="text"],
40-
input[type="number"] {
40+
input[type="range"] {
4141
width: 100%;
4242
padding: 10px;
4343
border: 1px solid #ccc;

‎options/options.html‎

Lines changed: 85 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -6,63 +6,92 @@
66
</head>
77
<body>
88
<form id="options-form">
9-
<fieldset role="group" aria-labelledby="api-settings">
10-
<legend id="api-settings"></legend>
11-
<label for="apiKey" id="apiKeyLabel"></label>
12-
<input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true"><br>
13-
<label for="model" id="modelLabel"></label>
14-
<select id="model" name="model" aria-required="true">
15-
<optgroup label="Perplexity Models">
16-
<option value="sonar-small-chat">sonar-small-chat (7B)</option>
17-
<option value="sonar-small-online">sonar-small-online (7B)</option>
18-
<option value="sonar-medium-chat" selected>sonar-medium-chat (8x7B)</option>
19-
<option value="sonar-medium-online">sonar-medium-online (8x7B)</option>
20-
</optgroup>
21-
<optgroup label="Open-Source Models">
22-
<option value="codellama-70b-instruct">codellama-70b-instruct (70B)</option>
23-
<option value="mistral-7b-instruct">mistral-7b-instruct (7B)</option>
24-
<option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct (8x7B)</option>
25-
</optgroup>
26-
</select>
9+
<fieldset role="group" aria-labelledby="api-settings">
10+
<legend id="api-settings"></legend>
11+
<label for="apiKey" id="apiKeyLabel"></label>
2712

28-
<div class="input-row">
29-
<div class="input-group">
30-
<label for="temperature" id="tempLabel"></label>
31-
<input type="number" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="true">
32-
</div>
33-
<div class="input-group">
34-
<label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
35-
<input type="number" id="maxTokens" name="maxTokens" value="" step="1" min="1" max="2048" aria-required="true">
36-
</div>
37-
</div>
38-
<div class="input-row">
39-
<div class="input-group">
40-
<label for="topP" id="topPLabel">Top-p</label>
41-
<input type="number" id="topP" name="topP" value="" step="0.01" min="0" max="1" aria-required="true">
42-
</div>
43-
<div class="input-group">
44-
<label for="topK" id="topKLabel">Top-k</label>
45-
<input type="number" id="topK" name="topK" value="" step="1" min="1" max="2048" aria-required="true">
46-
</div>
47-
</div>
48-
<div class="input-row">
49-
<div class="input-group">
50-
<label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
51-
<input type="number" id="frequencyPenalty" name="frequencyPenalty" value="" step="0.1" min="-2" max="2" aria-required="true">
52-
</div>
53-
<div class="input-group">
54-
<label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
55-
<input type="number" id="presencePenalty" name="presencePenalty" value="" step="0.1" min="0" max="2" aria-required="true">
56-
</div>
57-
</div>
58-
<div class="button-row">
59-
<button type="submit" class="ok" id="save">
60-
<span class="button-text"></span>
61-
<img src="save.svg" alt="Save icon" width="20" height="20" id="saveImg"/>
62-
</button>
63-
</div>
64-
</fieldset>
65-
</form>
13+
<input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true">
14+
15+
<label for="model" id="modelLabel"></label>
16+
<select id="model" name="model" aria-required="true">
17+
<optgroup label="Perplexity Models">
18+
<option value="sonar-small-chat">sonar-small-chat (7B)</option>
19+
<option value="sonar-small-online">sonar-small-online (7B)</option>
20+
<option value="sonar-medium-chat" selected>sonar-medium-chat (8x7B)</option>
21+
<option value="sonar-medium-online">sonar-medium-online (8x7B)</option>
22+
</optgroup>
23+
<optgroup label="Open-Source Models">
24+
<option value="codellama-70b-instruct">codellama-70b-instruct (70B)</option>
25+
<option value="mistral-7b-instruct">mistral-7b-instruct (7B)</option>
26+
<option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct (8x7B)</option>
27+
</optgroup>
28+
</select>
29+
30+
<div class="input-row">
31+
<div class="input-group">
32+
<label for="temperature" id="tempLabel"></label>
33+
<div class="range-container">
34+
<input type="range" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="false">
35+
<output for="temperature" id="temperatureOutput"></output>
36+
37+
</div>
38+
39+
</div>
40+
<div class="input-group">
41+
<label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
42+
<div class="range-container">
43+
<input type="range" id="maxTokens" name="maxTokens" value="0" step="1" min="0" max="2048" aria-required="false">
44+
<output for="maxTokens" id="maxTokensOutput"></output>
45+
46+
</div>
47+
</div>
48+
</div>
49+
<div class="input-row">
50+
<div class="input-group">
51+
<label for="topP" id="topPLabel">Top-p</label>
52+
<div class="range-container">
53+
<input type="range" id="topP" name="topP" value="0" step="0.01" min="0" max="1" aria-required="false">
54+
<output for="topP" id="topPOutput"></output>
55+
56+
</div>
57+
</div>
58+
<div class="input-group">
59+
<label for="topK" id="topKLabel">Top-k</label>
60+
<div class="range-container">
61+
<input type="range" id="topK" name="topK" value="0" step="1" min="0" max="2048" aria-required="false">
62+
<output for="topK" id="topKOutput"></output>
63+
64+
</div>
65+
</div>
66+
</div>
67+
<div class="input-row">
68+
<div class="input-group">
69+
<label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
70+
<div class="range-container">
71+
<input type="range" id="frequencyPenalty" name="frequencyPenalty" value="-2" step="0.1" min="-2" max="2" aria-required="false">
72+
<output for="frequencyPenalty" id="frequencyPenaltyOutput"></output>
73+
74+
</div>
75+
</div>
76+
<div class="input-group">
77+
<label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
78+
<div class="range-container">
79+
<input type="range" id="presencePenalty" name="presencePenalty" value="0" step="0.1" min="0" max="2" aria-required="false">
80+
<output for="presencePenalty" id="presencePenaltyOutput"></output>
81+
82+
</div>
83+
</div>
84+
</div>
85+
<div class="button-row">
86+
<button type="submit" class="ok" id="save">
87+
<span class="button-text"></span>
88+
<img src="save.svg" alt="Save icon" width="20" height="20" id="saveImg"/>
89+
</button>
90+
</div>
91+
</fieldset>
92+
<div id="saveSuccess" class="info-badge" role="status"></div>
93+
<div id="saveError" class="error-badge" role="alert"></div>
94+
</form>
6695

6796
<script src="options.js"></script>
6897
</body>

‎options/options.js‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,17 +13,17 @@
1313
function saveOptions(e) {
1414
e.preventDefault(); // Prevent the form from submitting normally
1515

16-
const topk = parseFloatOrDefault(document.querySelector("#topK").value);
17-
const topp = parseFloatOrDefault(document.querySelector("#topP").value);
18-
const frequencyPenalty = parseFloatOrDefault(document.querySelector("#frequencyPenalty").value);
19-
const presencePenalty = parseFloatOrDefault(document.querySelector("#presencePenalty").value);
16+
const topk = parseFloatOrDefault(document.querySelector("#topK").value, 0);
17+
const topp = parseFloatOrDefault(document.querySelector("#topP").value, 0);
18+
const frequencyPenalty = parseFloatOrDefault(document.querySelector("#frequencyPenalty").value,-2);
19+
const presencePenalty = parseFloatOrDefault(document.querySelector("#presencePenalty").value,0);
2020

21-
if (topk !== null && topp !== null) {
21+
if (topk !== 0 && topp !== 0) {
2222
console.error("Error: topk and topp are mutually exclusive. Please only set one of them.");
2323
showErrorBadge(browser.i18n.getMessage('errorTopkTopp'));
2424
return;
2525
}
26-
if (frequencyPenalty !== null && presencePenalty !== null) {
26+
if (frequencyPenalty !== -2 && presencePenalty !== 0) {
2727
console.error("Error: frequencyPenalty and presencePenalty are mutually exclusive. Please only set one of them.");
2828
showErrorBadge(browser.i18n.getMessage('errorFrequencyPresence'))
2929
return;
@@ -32,12 +32,12 @@ function saveOptions(e) {
3232
browser.storage.local.set({
3333
apiKey: document.querySelector("#apiKey").value,
3434
model: document.querySelector("#model").value,
35-
temperature: parseFloatOrDefault(document.querySelector("#temperature").value),
35+
temperature: parseFloatOrDefault(document.querySelector("#temperature").value, 1),
3636
topk: topk,
3737
topp: topp,
3838
frequencyPenalty: frequencyPenalty,
3939
presencePenalty: presencePenalty,
40-
maxTokens: parseFloatOrDefault(document.querySelector("#maxTokens").value),
40+
maxTokens: parseFloatOrDefault(document.querySelector("#maxTokens").value, 0),
4141
}).then(() => {
4242
console.log("Settings saved");
4343
showInfoBadge();
@@ -60,9 +60,9 @@ function showErrorBadge(message) {
6060
}
6161

6262

63-
function parseFloatOrDefault(value) {
63+
function parseFloatOrDefault(value,defaultVal) {
6464
const parsedValue = parseFloat(value);
65-
return isNaN(parsedValue) ? null : parsedValue;
65+
return isNaN(parsedValue) ? defaultVal : parsedValue;
6666
}
6767

6868

@@ -90,11 +90,11 @@ function restoreOptions() {
9090
document.querySelector("#apiKey").value = result.apiKey || 'pplx-xxxxxxxxxxx';
9191
document.querySelector("#model").value = result.model || 'sonar-medium-chat';
9292
document.querySelector("#temperature").value = result.temperature || 1;
93-
document.querySelector("#topK").value = result.topk || '';
94-
document.querySelector("#topP").value = result.topp || '';
95-
document.querySelector("#frequencyPenalty").value = result.frequencyPenalty || '';
96-
document.querySelector("#presencePenalty").value = result.presencePenalty || '';
97-
document.querySelector("#maxTokens").value = result.maxTokens || '';
93+
document.querySelector("#topK").value = result.topk || 0;
94+
document.querySelector("#topP").value = result.topp || 0;
95+
document.querySelector("#frequencyPenalty").value = result.frequencyPenalty || -2;
96+
document.querySelector("#presencePenalty").value = result.presencePenalty || 0;
97+
document.querySelector("#maxTokens").value = result.maxTokens || 0;
9898
}
9999

100100
/**

‎popup/extension.html‎

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -74,38 +74,56 @@
7474
<div class="input-row">
7575
<div class="input-group">
7676
<label for="temperature" id="tempLabel"></label>
77-
<input type="number" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="true">
78-
<span class="help-icon" data-tooltip-i18n="temperatureTip">?</span>
77+
<div class="range-container">
78+
<input type="range" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="false">
79+
<output for="temperature" id="temperatureOutput"></output>
80+
<span class="help-icon" data-tooltip-i18n="temperatureTip">?</span>
81+
</div>
7982

8083
</div>
8184
<div class="input-group">
8285
<label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
83-
<input type="number" id="maxTokens" name="maxTokens" value="" step="1" min="1" max="2048" aria-required="true">
84-
<span class="help-icon" data-tooltip-i18n="maxTokensTip">?</span>
86+
<div class="range-container">
87+
<input type="range" id="maxTokens" name="maxTokens" value="200" step="1" min="0" max="2048" aria-required="false">
88+
<output for="maxTokens" id="maxTokensOutput"></output>
89+
<span class="help-icon" data-tooltip-i18n="maxTokensTip">?</span>
90+
</div>
8591
</div>
8692
</div>
8793
<div class="input-row">
8894
<div class="input-group">
8995
<label for="topP" id="topPLabel">Top-p</label>
90-
<input type="number" id="topP" name="topP" value="" step="0.01" min="0" max="1" aria-required="true">
91-
<span class="help-icon" data-tooltip-i18n="toppTip">?</span>
96+
<div class="range-container">
97+
<input type="range" id="topP" name="topP" value="0" step="0.01" min="0" max="1" aria-required="false">
98+
<output for="topP" id="topPOutput"></output>
99+
<span class="help-icon" data-tooltip-i18n="toppTip">?</span>
100+
</div>
92101
</div>
93102
<div class="input-group">
94103
<label for="topK" id="topKLabel">Top-k</label>
95-
<input type="number" id="topK" name="topK" value="" step="1" min="1" max="2048" aria-required="true">
96-
<span class="help-icon" data-tooltip-i18n="topkTip">?</span>
104+
<div class="range-container">
105+
<input type="range" id="topK" name="topK" value="0" step="1" min="0" max="2048" aria-required="false">
106+
<output for="topK" id="topKOutput"></output>
107+
<span class="help-icon" data-tooltip-i18n="topkTip">?</span>
108+
</div>
97109
</div>
98110
</div>
99111
<div class="input-row">
100112
<div class="input-group">
101113
<label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
102-
<input type="number" id="frequencyPenalty" name="frequencyPenalty" value="" step="0.1" min="-2" max="2" aria-required="true">
103-
<span class="help-icon" data-tooltip-i18n="frequencyPenaltyTip">?</span>
114+
<div class="range-container">
115+
<input type="range" id="frequencyPenalty" name="frequencyPenalty" value="-2" step="0.1" min="-2" max="2" aria-required="false">
116+
<output for="frequencyPenalty" id="frequencyPenaltyOutput"></output>
117+
<span class="help-icon" data-tooltip-i18n="frequencyPenaltyTip">?</span>
118+
</div>
104119
</div>
105120
<div class="input-group">
106121
<label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
107-
<input type="number" id="presencePenalty" name="presencePenalty" value="" step="0.1" min="0" max="2" aria-required="true">
108-
<span class="help-icon" data-tooltip-i18n="presencePenaltyTip">?</span>
122+
<div class="range-container">
123+
<input type="range" id="presencePenalty" name="presencePenalty" value="0" step="0.1" min="0" max="2" aria-required="false">
124+
<output for="presencePenalty" id="presencePenaltyOutput"></output>
125+
<span class="help-icon" data-tooltip-i18n="presencePenaltyTip">?</span>
126+
</div>
109127
</div>
110128
</div>
111129
<div class="button-row">

‎popup/popup.js‎

Lines changed: 43 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,22 +22,22 @@ async function getConfiguration() {
2222
apiKey: 'pplx-xxxxxxxxxxx', // Default API key
2323
model: 'sonar-medium-chat', // Default model
2424
temperature: 1, // Default temperature
25-
topk: null,
26-
topp: null,
27-
frequencyPenalty: null,
28-
presencePenalty: null,
29-
maxTokens: null
25+
topk: 0,
26+
topp: 0,
27+
frequencyPenalty: -2,
28+
presencePenalty: 0,
29+
maxTokens: 0
3030
}).catch(error => {
3131
console.error(`Error getting configuration: ${error}`);
3232
return {
3333
apiKey: 'pplx-xxxxxxxxxxx', // Default API key
3434
model: 'sonar-medium-chat', // Default model
3535
temperature: 1, // Default temperature
36-
topk: null,
37-
topp: null,
38-
frequencyPenalty: null,
39-
presencePenalty: null,
40-
maxTokens: null
36+
topk: 0,
37+
topp: 0,
38+
frequencyPenalty: -2,
39+
presencePenalty: 0,
40+
maxTokens: 0
4141

4242
};
4343
});
@@ -405,6 +405,30 @@ function loadInitialText() {
405405

406406
}
407407

408+
/**
409+
* Change the output value of the range input
410+
* when the input value changes.
411+
* @param {Event} event - The input event.
412+
* @returns {void}
413+
**/
414+
function changeRangeOutput(event) {
415+
const output = event.target.nextElementSibling;
416+
output.textContent = event.target.value;
417+
}
418+
419+
/**
420+
* Set the initial range output value
421+
* when the popup is loaded.
422+
* @param {Element} element - The range input element.
423+
* @returns {void}
424+
**/
425+
function setInitialRangeOutput(element) {
426+
const output = document.querySelector(`output[for='${element.id}'`);
427+
output.textContent = element.value;
428+
}
429+
430+
431+
408432
// Add an event listener to the resume button to trigger the API call.
409433
document.getElementById('resume').addEventListener('click', triggerAPI);
410434

@@ -418,6 +442,15 @@ document.querySelectorAll('.help-icon').forEach(icon => {
418442
icon.setAttribute('data-tooltip', tooltipMessage);
419443
});
420444

445+
// Add event listeners to the range inputs to change the output value.
446+
document.querySelectorAll("input[type='range']").forEach(range => {
447+
range.addEventListener('input', changeRangeOutput);
448+
});
449+
450+
document.querySelectorAll("input[type='range']").forEach(range => {
451+
setInitialRangeOutput(range);
452+
});
453+
421454

422455
// Add an event listener to the popup's elements.
423456
document.addEventListener("DOMContentLoaded", function() {

0 commit comments

Comments
 (0)