Add basic length control

Author: Ali Raheem

aify.xpi

@@ -14,13 +14,19 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
 });
 async function callBackendAPI(original, action) {
-    const data = await browser.storage.local.get(["model", "apiKey"]);
+    const data = await browser.storage.local.get(["model", "apiKey", "maxTokens"]);
     const model = data.model;
     const apiKey = data.apiKey;
+    const maxTokens = parseInt(data.maxTokens);
+    console.log(maxTokens);
     const response = await fetch("https://api.openai.com/v1/chat/completions", {
         method: "POST",
         headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKey}` },
-        body: JSON.stringify({ model: model, messages: [{ role: "user", content: `${action}\n---\n${original}` }] }),
+	body: JSON.stringify({ 
+	    model: model, 
+	    messages: [{ role: "user", content: `${action}\n---\n${original}` }], 
+	    ...(maxTokens ? { 'max_tokens': maxTokens } : {})
+	}),
     });
     if (!response.ok) {
         throw new Error(`API request failed: ${response.status}`);

plugin/html/draft.js

@@ -23,7 +23,6 @@ label {
 .button {
     color: #fff;
     padding: 12px 20px;
-    border: none;
     border-radius: 4px;
     cursor: pointer;
 }

plugin/html/settings.css

@@ -52,6 +52,17 @@ <h1>Aify Settings</h1>
         <div class="col-25"> <label for="api-key">API Key</label></div>
         <div class="col-75"> <input type="text" id="api-key" placeholder="Your API Key.." class="full-width"></div>
       </div>
+      <div class="row">
+        <div class="col-25"> <label for="max-tokens">Max Length (in tokens)</label></div>
+        <div class="col-75">
+          <select id="max-tokens">
+            <option value="0">Unlimited</option>
+            <option value="300">Long (300 tokens)</option>
+            <option value="100">Medium (100 tokens)</option>
+            <option value="50">Short (50 tokens)</option>
+          </select>
+	</div>
+      </div>
       <div class="row">
         <div class="col-25"> <label for="actions-container">Actions</label> </div>
         <div class="col-75"> <div class="container" id="actions-container"> </div></div>

plugin/html/settings.html

@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", function () {
     var actionsContainer = document.getElementById("actions-container");
     var addActionButton = document.getElementById("add-action");
     var saveButton = document.getElementById("save-settings");
+    var maxTokensInput = document.getElementById("max-tokens");
     var defaultButton = document.getElementById("default-settings");
     var defaultActions = [
         { name: "Reply to this", prompt: "Reply to the following email." },
@@ -14,9 +15,10 @@ document.addEventListener("DOMContentLoaded", function () {
         { name: "Prompt provided", prompt: " " },
     ];
     var defaultModel = "gpt-3.5-turbo";
-    browser.storage.local.get(["model", "apiKey", "actions"], function (data) {
+    browser.storage.local.get(["model", "apiKey", "actions", "maxTokens"], function (data) {
         modelSelect.value = data.model || defaultModel;
         apiKeyInput.value = data.apiKey || "";
+	maxTokensInput.value = data.maxTokens || 0;
         var actions = data.actions || defaultActions;
         actions.forEach(function (action) {
             addAction(action.name, action.prompt);
@@ -31,14 +33,15 @@ document.addEventListener("DOMContentLoaded", function () {
             var promptInput = actionDiv.querySelector(".action-prompt");
             return { name: nameInput.value, prompt: promptInput.value };
         });
-        browser.storage.local.set({ model: modelSelect.value, apiKey: apiKeyInput.value, actions: actions });
+        browser.storage.local.set({ model: modelSelect.value, apiKey: apiKeyInput.value, actions: actions, maxTokens: maxTokensInput.value });
     });
     defaultButton.addEventListener("click", function () {
         while (actionsContainer.firstChild) {
             actionsContainer.removeChild(actionsContainer.firstChild);
         }
         modelSelect.value = defaultModel;
         apiKeyInput.value = "";
+	maxTokens.value = 0;
         defaultActions.forEach(function (action) {
             addAction(action.name, action.prompt);
         });