Add API to pull available models, UX improvements

README.md

@@ -37,8 +37,9 @@ zip -r ../aify.xpi *
 
 ## Todo
 
-- [HIGH] Use the API to identify available models.
-- [MOD] You should be able to specify a model name (useful for finetunings).
+- ~~[HIGH] Use the API to identify available models.~~
+- ~~[MOD] You should be able to specify a model name (useful for finetunings).~~
+- ~~[HIGH] Limit length.~~
 - [MOD] Model selection should be on a per-prompt basis.
 - [LOW] Model selection should be selectable from the context menu.
 - [MOD] Make it so any API could be used.

plugin/html/draft.js

@@ -18,7 +18,6 @@ async function callBackendAPI(original, action) {
     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}` },

plugin/html/settings.html

@@ -15,6 +15,7 @@ <h1>Aify Settings</h1>
 	  <ol>
 	    <li>Set an API key below (obtainable from <a href="https://platform.openai.com/signup/">OpenAI</a>).</li>
 	    <li><b>Make sure you have access to the model (anyone can use gpt-3.5-turbo).</b></li>
+	    <li>(Optional) Once you've set an API key you can click Get Models to update available models.</li>
 	    <li>(Optional) Add, remove or edit the available actions.</li>
 	    <li><b>Make sure to click save at the bottom of the page.</b></li>
 	  </ol>
@@ -44,7 +45,6 @@ <h1>Aify Settings</h1>
         <div class="col-75">
           <select id="model">
 	    <option>gpt-3.5-turbo</option>
-	    <option>gpt-4</option>
 	  </select>
         </div>
       </div>
@@ -63,6 +63,13 @@ <h1>Aify Settings</h1>
           </select>
 	</div>
       </div>
+      <div class="row">
+	<div class="col-25"></div>
+	<div class="col-75">
+	  <button id="get-models" value="Update Model List" class="button neutral">Update Models (need API key)</button>
+          <button value="Save" id="save-settings" class="button good">Save</button>
+	</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>
@@ -72,7 +79,6 @@ <h1>Aify Settings</h1>
 	<div class="col-75">
           <button id="add-action" value="Add Action" class="button neutral">New Action</button>
           <button id="default-settings" value="Reset" class="button bad">Defaults</button>
-          <button value="Save" id="save-settings" class="button good">Save</button>
 	</div>
       </div>
       <script src="settings.js"></script>

plugin/html/settings.js

@@ -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 getModelsButton = document.getElementById("get-models");
     var maxTokensInput = document.getElementById("max-tokens");
     var defaultButton = document.getElementById("default-settings");
     var defaultActions = [
@@ -47,6 +48,28 @@ document.addEventListener("DOMContentLoaded", function () {
         });
         browser.storage.local.set({ model: defaultModel, apiKey: "", actions: defaultActions });
     });
+    getModelsButton.addEventListener("click", async function () {
+	var apiKeyInput = document.getElementById("api-key");
+	const response = await fetch("https://api.openai.com/v1/models", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", Authorization: `Bearer ${apiKeyInput.value}` },
+	});
+	if (!response.ok) {
+            throw new Error(`API request failed: ${response.status}`);
+	}
+	const responseData = await response.json();
+	var selectElement = document.getElementById("model");
+	selectElement.remove(0);
+	responseData.data.map(model => {
+	    let option = document.createElement("option");
+	    let selectElement = document.getElementById("model");
+	    option.value = model.id;
+	    option.text = model.id;
+	    selectElement.add(option);
+	});
+	getModelsButton.disabled = true;
+    });
+
     function addAction(name, prompt) {
         var actionDiv = document.createElement("div");
         var nameInput = document.createElement("input");

plugin/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Aify",
-  "version": "1.4",
+  "version": "1.5",
   "description": "A Thunderbird plugin to rewrite text based on user-selected actions using OpenAI's API.",
   "author": "Ali Raheem",
   "browser_specific_settings": {