Transforming input type number on input type range

imigueldiaz · Apr 11, 2024 · ef16817 · ef16817
1 parent 833c399
commit ef16817
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 108 deletions.
diff --git 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/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
@@ -6,63 +6,92 @@
 </head>
 <body>
   <form id="options-form">
-    <fieldset role="group" aria-labelledby="api-settings">
-      <legend id="api-settings"></legend>
-      <label for="apiKey" id="apiKeyLabel"></label>
-      <input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true"><br>
-      <label for="model" id="modelLabel"></label>
-      <select id="model" name="model" aria-required="true">
-        <optgroup label="Perplexity Models">
-          <option value="sonar-small-chat">sonar-small-chat (7B)</option>
-          <option value="sonar-small-online">sonar-small-online (7B)</option>
-          <option value="sonar-medium-chat" selected>sonar-medium-chat (8x7B)</option>
-          <option value="sonar-medium-online">sonar-medium-online (8x7B)</option>
-        </optgroup>
-        <optgroup label="Open-Source Models">
-          <option value="codellama-70b-instruct">codellama-70b-instruct (70B)</option>
-          <option value="mistral-7b-instruct">mistral-7b-instruct (7B)</option>
-          <option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct (8x7B)</option>
-        </optgroup>
-      </select>
+          <fieldset role="group" aria-labelledby="api-settings">
+            <legend id="api-settings"></legend>
+            <label for="apiKey" id="apiKeyLabel"></label>
 
-      <div class="input-row">
-        <div class="input-group">
-          <label for="temperature" id="tempLabel"></label>
-          <input type="number" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="true">
-        </div>
-        <div class="input-group">
-          <label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
-          <input type="number" id="maxTokens" name="maxTokens" value="" step="1" min="1" max="2048" aria-required="true">
-        </div>
-      </div>
-      <div class="input-row">
-        <div class="input-group">
-          <label for="topP" id="topPLabel">Top-p</label>
-          <input type="number" id="topP" name="topP" value="" step="0.01" min="0" max="1" aria-required="true">
-        </div>
-        <div class="input-group">
-          <label for="topK" id="topKLabel">Top-k</label>
-          <input type="number" id="topK" name="topK" value="" step="1" min="1" max="2048" aria-required="true">
-        </div>
-      </div>
-      <div class="input-row">
-        <div class="input-group">
-          <label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
-          <input type="number" id="frequencyPenalty" name="frequencyPenalty" value="" step="0.1" min="-2" max="2" aria-required="true">
-        </div>
-        <div class="input-group">
-          <label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
-          <input type="number" id="presencePenalty" name="presencePenalty" value="" step="0.1" min="0" max="2" aria-required="true">
-        </div>
-      </div>
-      <div class="button-row">
-        <button type="submit" class="ok" id="save">
-          <span class="button-text"></span>
-          <img src="save.svg" alt="Save icon" width="20" height="20" id="saveImg"/>
-        </button>
-      </div>
-    </fieldset>
-  </form>
+            <input type="password" id="apiKey" name="apiKey" value="pplx-xxxxxxxxxxx" aria-required="true">
+
+            <label for="model" id="modelLabel"></label>
+            <select id="model" name="model" aria-required="true">
+              <optgroup label="Perplexity Models">
+                <option value="sonar-small-chat">sonar-small-chat (7B)</option>
+                <option value="sonar-small-online">sonar-small-online (7B)</option>
+                <option value="sonar-medium-chat" selected>sonar-medium-chat (8x7B)</option>
+                <option value="sonar-medium-online">sonar-medium-online (8x7B)</option>
+              </optgroup>
+              <optgroup label="Open-Source Models">
+                <option value="codellama-70b-instruct">codellama-70b-instruct (70B)</option>
+                <option value="mistral-7b-instruct">mistral-7b-instruct (7B)</option>
+                <option value="mixtral-8x7b-instruct">mixtral-8x7b-instruct (8x7B)</option>
+              </optgroup>
+            </select>
+
+            <div class="input-row">
+              <div class="input-group">
+                <label for="temperature" id="tempLabel"></label>
+                <div class="range-container">
+                  <input type="range" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="false">
+                  <output for="temperature" id="temperatureOutput"></output>
+
+                </div>
+
+              </div>
+              <div class="input-group">
+                <label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
+                <div class="range-container">
+                  <input type="range" id="maxTokens" name="maxTokens" value="0" step="1" min="0" max="2048" aria-required="false">
+                  <output for="maxTokens" id="maxTokensOutput"></output>
+
+                </div>
+              </div>
+            </div>
+            <div class="input-row">
+              <div class="input-group">
+                <label for="topP" id="topPLabel">Top-p</label>
+                <div class="range-container">
+                  <input type="range" id="topP" name="topP" value="0" step="0.01" min="0" max="1" aria-required="false">
+                  <output for="topP" id="topPOutput"></output>
+
+                </div>
+              </div>
+              <div class="input-group">
+                <label for="topK" id="topKLabel">Top-k</label>
+                <div class="range-container">
+                  <input type="range" id="topK" name="topK" value="0" step="1" min="0" max="2048" aria-required="false">
+                  <output for="topK" id="topKOutput"></output>
+
+                </div>
+              </div>
+            </div>
+            <div class="input-row">
+              <div class="input-group">
+                <label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
+                <div class="range-container">
+                  <input type="range" id="frequencyPenalty" name="frequencyPenalty" value="-2" step="0.1" min="-2" max="2" aria-required="false">
+                  <output for="frequencyPenalty" id="frequencyPenaltyOutput"></output>
+
+                </div>
+              </div>
+              <div class="input-group">
+                <label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
+                <div class="range-container">
+                  <input type="range" id="presencePenalty" name="presencePenalty" value="0" step="0.1" min="0" max="2" aria-required="false">
+                  <output for="presencePenalty" id="presencePenaltyOutput"></output>
+
+                </div>
+              </div>
+            </div>
+            <div class="button-row">
+              <button type="submit" class="ok" id="save">
+                <span class="button-text"></span>
+                <img src="save.svg" alt="Save icon" width="20" height="20" id="saveImg"/>
+              </button>
+            </div>
+          </fieldset>
+          <div id="saveSuccess" class="info-badge" role="status"></div>
+          <div id="saveError" class="error-badge" role="alert"></div>
+        </form>
 
   <script src="options.js"></script>
 </body>

diff --git 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
@@ -74,38 +74,56 @@
             <div class="input-row">
               <div class="input-group">
                 <label for="temperature" id="tempLabel"></label>
-                <input type="number" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="temperatureTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="temperature" name="temperature" value="1" step="0.01" min="0" max="2" aria-required="false">
+                  <output for="temperature" id="temperatureOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="temperatureTip">?</span>
+                </div>
 
               </div>
               <div class="input-group">
                 <label for="maxTokens" id="maxTokensLabel">Max Tokens</label>
-                <input type="number" id="maxTokens" name="maxTokens" value="" step="1" min="1" max="2048" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="maxTokensTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="maxTokens" name="maxTokens" value="200" step="1" min="0" max="2048" aria-required="false">
+                  <output for="maxTokens" id="maxTokensOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="maxTokensTip">?</span>
+                </div>
               </div>
             </div>
             <div class="input-row">
               <div class="input-group">
                 <label for="topP" id="topPLabel">Top-p</label>
-                <input type="number" id="topP" name="topP" value="" step="0.01" min="0" max="1" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="toppTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="topP" name="topP" value="0" step="0.01" min="0" max="1" aria-required="false">
+                  <output for="topP" id="topPOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="toppTip">?</span>
+                </div>
               </div>
               <div class="input-group">
                 <label for="topK" id="topKLabel">Top-k</label>
-                <input type="number" id="topK" name="topK" value="" step="1" min="1" max="2048" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="topkTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="topK" name="topK" value="0" step="1" min="0" max="2048" aria-required="false">
+                  <output for="topK" id="topKOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="topkTip">?</span>
+                </div>
               </div>
             </div>
             <div class="input-row">
               <div class="input-group">
                 <label for="frequencyPenalty" id="frequencyPenaltyLabel">Frequency penalty</label>
-                <input type="number" id="frequencyPenalty" name="frequencyPenalty" value="" step="0.1" min="-2" max="2" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="frequencyPenaltyTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="frequencyPenalty" name="frequencyPenalty" value="-2" step="0.1" min="-2" max="2" aria-required="false">
+                  <output for="frequencyPenalty" id="frequencyPenaltyOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="frequencyPenaltyTip">?</span>
+                </div>
               </div>
               <div class="input-group">
                 <label for="presencePenalty" id="presencePenaltyLabel">Presence penalty</label>
-                <input type="number" id="presencePenalty" name="presencePenalty" value="" step="0.1" min="0" max="2" aria-required="true">
-                <span class="help-icon" data-tooltip-i18n="presencePenaltyTip">?</span>
+                <div class="range-container">
+                  <input type="range" id="presencePenalty" name="presencePenalty" value="0" step="0.1" min="0" max="2" aria-required="false">
+                  <output for="presencePenalty" id="presencePenaltyOutput"></output>
+                  <span class="help-icon" data-tooltip-i18n="presencePenaltyTip">?</span>
+                </div>
               </div>
             </div>
             <div class="button-row">

diff --git 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() {