Merge pull request #13 from imigueldiaz/12-numeric-inputs-should-be-r…

…ange-or-similar 12 numeric inputs should be range or similar
imigueldiaz · Apr 11, 2024 · 0701b82 · 0701b82
2 parents 833c399 + 42dad48
commit 0701b82
Show file tree

Hide file tree

Showing 8 changed files with 214 additions and 109 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/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
@@ -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">