Update service-worker.js

Closes #1

README.md

@@ -15,7 +15,11 @@ Just go to the [extension's page](https://chrome.google.com/webstore/detail/leaf
 4. Click "Load unpacked" and select the repository folder
 
 ## Configuration
-The plugin can be configured by clicking the plugin button in the Chrome toolbar. It requires inserting an API key from [OpenAI](https://platform.openai.com/account/api-keys). You also need to choose which tools you wish to enable.
+The plugin can be configured by clicking the plugin button in the Chrome toolbar. 
+
+It requires inserting an API key from [OpenAI](https://platform.openai.com/account/api-keys). 
+
+You also need to choose which tools you wish to enable. See the [Issues](#issues) section if you have problems activating the tools.
 
 ## Usage
 These are the tools that are currently available:
@@ -29,7 +33,7 @@ Select a text and press `Alt+I` to trigger the improvement tool. The original te
 ### Ask
 Select a text and press `Alt+A` to trigger the ask tool. The original text will be deleted and the answer will be inserted in its place. 
 
-For example: "Create a table 4x3 that the first row is bold face" will be replaced with, e.g.,:
+For example: "Create a table 4x3 that the first row is boldface" will be replaced with, e.g.:
 ```latex
 \begin{tabular}{|c|c|c|}
 \hline
@@ -47,7 +51,7 @@ Entry 7 & Entry 8 & Entry 9\\
 You can then, for example:
 1. Write before the table: Place the following tabular inside a table environment, center it, and give the following title: "The comparison of the three approaches"
 2. Select the sentence and the table
-3. Press `Alt+a` to trigger the ask tool. 
+3. Press `Alt+A` to trigger the ask tool. 
 
 The result will be:
 ```latex
@@ -68,10 +72,51 @@ Entry 7 & Entry 8 & Entry 9\\
 \end{table}
 ```
 
+## Using non-GPT Models
+Other LLM deployments/models are supported as long as they can be accessed via OpenAI Chat Completion API. Some examples: [vLLM models](https://docs.vllm.ai/en/latest/getting_started/quickstart.html#using-openai-chat-api-with-vllm), [LLAMA models](https://github.com/c0sogi/llama-api#usage-chat-completion), and [easyLLM](https://philschmid.github.io/easyllm/examples/chat-completion-api/).
+
+Use the plugin's JSON editor to change the URL and the model. See [Issue #8](https://github.com/bThink-BGU/LeafLLM/issues/8) for further details.
+
 ## Issues
-If nothing happens when you use the plugin, verify that the plugin's shortcuts are not in conflict with other plugins' shortcuts [here](chrome://extensions/shortcuts).
+If nothing happens when you use the plugin, verify that the plugin's shortcuts are not in conflict with other plugins' shortcuts. To do so, go to `chrome://extensions/shortcuts`.
 
 If you encounter any problem/question, please open an issue in the project's repository.
 
 ## Privacy
-The plugin saves its configuration locally on the users' computer. The plugin sends the API key and the selected text to OpenAI only, and only for the purpose it was made for (i.e., completing and improving text and asking GPT questions). The plugin's authors are not responsible for what OpenAI do with this data. The plugin's authors do not collect any data from the plugin's users.
+The plugin saves its configuration locally on the user's computer. The plugin sends the API key and the selected text to OpenAI only, and only for the purpose it was made for (i.e., completing and improving text and asking GPT questions). The plugin's authors are not responsible for what OpenAI does with this data. The plugin's authors do not collect any data from the plugin's users.
+
+## Advanced Configuration
+If you feel advanced, you can also change the request JSON sent to OpenAI and the base URL.
+To do that, go to the 'Advance Configuration' component on the configuration page. By default, the value is 
+```json
+{
+  "openai": {
+    "url": "https://api.openai.com/v1/chat/completions",
+    "base": {
+      "n": 1,
+      "temperature": 0.5,
+      "model": "gpt-3.5-turbo"
+    },
+    "Complete": {
+      "max_tokens": 512,
+      "messages": [{
+        "role": "system",
+        "content": "You are an assistant in a Latex editor that continues the given text. No need to rewrite the given text"
+      }]
+    },
+    "Improve": {
+      "messages": [{
+        "role": "system",
+        "content": "You are an assistant in a Latex editor that improves the given text"
+      }]
+    },
+    "Ask": {
+      "messages": [{
+        "role": "system",
+        "content": "You are an assistant in a Latex editor. Answer questions without introduction/explanations"
+      }]
+    }
+  }
+}
+```
+Base is the default configuration which is overridden by the specific command configuration.

manifest.json

@@ -42,5 +42,5 @@
   "manifest_version": 3,
   "name": "LeafLLM",
   "homepage_url": "https://github.com/achiyae/LeafLLM",
-  "version": "1.2.1"
+  "version": "1.4.1"
 }

popup/popup.html

@@ -1,9 +1,10 @@
 <html>
 <head>
     <script src="/scripts/jquery.js"></script>
-    <script src="/scripts/utils.js" type="module"></script>
+    <script src="/popup/jsoneditor.min.js"></script>
     <script src="/popup/popup.js" type="module"></script>
     <link rel="stylesheet" href="/popup/popup.css"/>
+    <link rel="stylesheet" href="/popup/jsoneditor.min.css"/>
 </head>
 <body>
 <h1 class="extension-title">LeafLLM: an AI-powered Overleaf</h1>
@@ -58,5 +59,14 @@
     </div>
 </div>
 <div id="message-box" class="message-box"></div>
+<div id="configuration-form" class="form-container">
+    <div class="settings-text">Advanced Configuration</div>
+    <!-- JSON Editor Container -->
+    <div id="json-editor" style="height: 300px;"></div>
+    <div class="btn-container">
+        <button class="submit btn" id="saveConfig">Save config</button>
+        <button class="clear btn" id="resetConfig">Reset config</button>
+    </div>
+</div>
 </body>
 </html>

popup/popup.js

@@ -1,4 +1,94 @@
-const apiKeyRegex = /sk-[a-zA-Z0-9]{48}/
+// Changing defaultConfigurations requires changing service-worker.js
+const defaultConfigurations = {
+  openai: {
+    url: 'https://api.openai.com/v1/chat/completions',
+    base: {
+      n: 1,
+      temperature: 0.5,
+      model: 'gpt-3.5-turbo'
+    },
+    Complete: {
+      max_tokens: 512,
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Continues the given text. No need to rewrite the given text.'
+      }]
+    },
+    Improve: {
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Style and improves the given text.'
+      }]
+    },
+    Ask: {
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Address the given questions/request without introduction/explanations.'
+      }]
+    }
+  }
+}
+
+// Changing the class here requires changing scripts/content.js
+class OpenAIAPI {
+  constructor(apiKey) {
+    this.apiKey = apiKey
+  }
+
+  query(url, data) {
+    return new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest()
+      xhr.open('POST', url, true)
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      xhr.setRequestHeader('Authorization', `Bearer ${this.apiKey}`)
+      xhr.onerror = function () {
+        reject('Failed to query OpenAI API: network error.')
+      }
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          let jsonResponse
+          try {
+            jsonResponse = JSON.parse(xhr.responseText)
+          } catch (e) {
+            reject('Failed to query OpenAI API, cannot parse response:\n' + e + '\n' + xhr.responseText)
+            return
+          }
+          if (jsonResponse.hasOwnProperty('choices')) {
+            resolve(jsonResponse.choices)
+          } else {
+            reject('Failed to query OpenAI API: invalid response: ' + jsonResponse)
+          }
+        } else {
+          reject('Failed to query OpenAI API: invalid status: ' + xhr.status + ' - ' + xhr.responseText)
+        }
+      }
+
+      xhr.send(JSON.stringify(data))
+    })
+  }
+
+  async act(command, text) {
+    let conf = (await chrome.storage.local.get('RequestConfiguration')).RequestConfiguration.openai
+    let request = Object.assign({}, conf.base)
+    let url = conf.url
+    Object.assign(request, conf[command])
+    request.messages.push({ role: 'user', 'content': text })
+    return this.query(url, request)
+      .then(result => result[0]['message'].content)
+  }
+}
+
+
+const jsonEditor = createJsonEditor()
+
+function createJsonEditor() {
+  return new JSONEditor($('#json-editor')[0], {
+    mode: 'code', // Use code mode for better editing
+    onChange: function () {
+      $('#saveConfig').prop('disabled', false);
+    }
+  })
+}
 
 function addMessage(message) {
   $('#message-box').append(`<div class="message">${message}</div>`)
@@ -17,17 +107,37 @@ async function refreshStorage() {
     $('#api-token-form .api-token-status').text(chrome.runtime.lastError || !openAIAPIKey ? 'not set' : 'set')
   })
 
+  const commands = await chrome.commands.getAll()
+
+  chrome.storage.local.get(['RequestConfiguration']).then((settings) => {
+    jsonEditor.set(settings.RequestConfiguration)
+    $('#saveConfig').prop('disabled', true);
+  })
+
   chrome.storage.local.get(['Improve', 'Complete', 'Ask']).then((settings) => {
+    Object.values(settings).forEach(setting => {
+      let command = commands.filter(({ name }) => name === setting.key)[0]
+      if (command.shortcut !== setting.shortcut) {
+        setting.shortcut = command.shortcut
+        if (setting.status === 'enabled' && setting.shortcut === '') {
+          setting.status = 'error'
+        }
+        chrome.storage.local.set({ [setting.key]: setting })
+      } else if (setting.status === 'enabled' && setting.shortcut === '') {
+        setting.status = 'error'
+        chrome.storage.local.set({ [setting.key]: setting })
+      }
+    })
     let bindingFailures = Object.values(settings)
       .filter(({ status }) => status === 'error')
-      .map(({ key, shortcut }) => `${shortcut} for ${key}`)
+      .map(({ key }) => `${key}`)
       .join(', ')
     if (bindingFailures.length > 0) {
       addErrorMessage(`Could not bind the following shortcuts:\n${bindingFailures}.\nYou can set it manually at <a href="chrome://extensions/shortcuts">chrome://extensions/shortcuts</a>.`)
     }
     Object.values(settings).forEach(({ key, status, shortcut }) => {
       $(`#settings-form input[name='text-${key}']:checkbox`).prop('checked', status === 'enabled')
-      let shortcut2 = status === 'error' ? 'not set' : shortcut
+      let shortcut2 = shortcut === '' ? 'not set' : shortcut
       $(`#shortcut-${key}`).html(`<span>${shortcut2}</span>`)
     })
   })
@@ -43,16 +153,27 @@ async function handleAPITokenSet(event) {
   const openAIAPIKey = input.val()
   input.val('')
 
-  if (!openAIAPIKey || !apiKeyRegex.test(openAIAPIKey)) {
+  if (!openAIAPIKey) {
     addErrorMessage('Invalid API Token.')
     return
   }
+  try {
+    await validateAPIKey(openAIAPIKey)
+  }catch (e) {
+    addErrorMessage(`Failed to validate API Token. Error: ${e}`)
+    return
+  }
 
   chrome.storage.local.set({ openAIAPIKey })
     .then(refreshStorage)
     .catch((error) => addErrorMessage(`Failed to remove API Token. Error: ${error}`))
 }
 
+async function validateAPIKey(apiKey) {
+  const openAI = new OpenAIAPI(apiKey)
+  return openAI.act('Ask', 'write a random latex command. do not explain it.')
+}
+
 async function handleAPITokenClear(event) {
   event.preventDefault()
   event.stopPropagation()
@@ -64,7 +185,7 @@ async function handleAPITokenClear(event) {
     .catch((error) => addErrorMessage(`Failed to remove API Token. Error: ${error}`))
 }
 
-async function makeHandleSettingChange(key) {
+function makeHandleSettingChange(key) {
   return async (event) => {
     event.preventDefault()
     event.stopPropagation()
@@ -72,14 +193,30 @@ async function makeHandleSettingChange(key) {
 
     const value = event.target.checked
     const setting = await chrome.storage.local.get(key)
-    if (setting[key].status !== 'error') {
-      setting[key].status = value ? 'enabled' : 'disabled'
-      await chrome.storage.local.set({ [key]: setting[key] })
-    }
+    /*    let commandKey = await chrome.commands.getAll()
+        commandKey = commandKey.filter(({ name }) => name === key)[0]*/
+    // if (setting[key].status !== 'error') {
+    setting[key].status = value ? 'enabled' : 'disabled'
+    await chrome.storage.local.set({ [key]: setting[key] })
+    // }
     return refreshStorage()
   }
 }
 
+async function saveConfig() {
+  clearMessages()
+  let config;
+  try {
+    config = jsonEditor.get()
+  } catch (e) {
+    addErrorMessage(`Failed to parse configuration. Error: ${e}`)
+    return
+  }
+  chrome.storage.local.set({ RequestConfiguration: config })
+    .then(refreshStorage)
+    .catch((error) => addErrorMessage(`Failed to save configuration. Error: ${error}`))
+}
+
 $(document).ready(async function () {
   $('#api-token-form .submit').on('click', handleAPITokenSet)
   $('#api-token-form .clear').on('click', handleAPITokenClear)
@@ -89,9 +226,16 @@ $(document).ready(async function () {
     $(`#settings-form input[name='text-${key}']:checkbox`).on('change', makeHandleSettingChange(key))
   })
 
-  $('body').on('click', 'a', function(){
-    chrome.tabs.create({url: $(this).attr('href')});
-    return false;
-  });
+  $('body').on('click', 'a', function () {
+    chrome.tabs.create({ url: $(this).attr('href') })
+    return false
+  })
+
+  $('#resetConfig').on('click', async function () {
+    jsonEditor.set(defaultConfigurations)
+    await saveConfig()
+  })
+
+  $('#saveConfig').on('click', saveConfig)
   return refreshStorage()
 })

scripts/content.js

@@ -1,60 +1,49 @@
-
+// Changing the class here requires changing popup/popup.js
 class OpenAIAPI {
-  static defaultModel = 'text-davinci-003'
-
   constructor(apiKey) {
     this.apiKey = apiKey
   }
 
-  query(endpoint, data) {
+  query(url, data) {
     return new Promise((resolve, reject) => {
-      const url = `https://api.openai.com/v1/${endpoint}`
-
-      if (!data.model) data.model = OpenAIAPI.defaultModel
-
       const xhr = new XMLHttpRequest()
       xhr.open('POST', url, true)
       xhr.setRequestHeader('Content-Type', 'application/json')
       xhr.setRequestHeader('Authorization', `Bearer ${this.apiKey}`)
-      xhr.onreadystatechange = function () {
-        if (xhr.readyState !== 4) return
-        if (xhr.status !== 200) return reject('Failed to query OpenAI API.')
-
-        const jsonResponse = JSON.parse(xhr.responseText)
-
-        if (!jsonResponse.choices) return reject('Failed to query OpenAI API.')
-
-        return resolve(jsonResponse.choices)
+      xhr.onerror = function () {
+        reject('Failed to query OpenAI API: network error.')
+      }
+      xhr.onload = function () {
+        if (xhr.status === 200) {
+          let jsonResponse
+          try {
+            jsonResponse = JSON.parse(xhr.responseText)
+          } catch (e) {
+            reject('Failed to query OpenAI API, cannot parse response:\n' + e + '\n' + xhr.responseText)
+            return
+          }
+          if (jsonResponse.hasOwnProperty('choices')) {
+            resolve(jsonResponse.choices)
+          } else {
+            reject('Failed to query OpenAI API: invalid response: ' + jsonResponse)
+          }
+        } else {
+          reject('Failed to query OpenAI API: invalid status: ' + xhr.status + ' - ' + xhr.responseText)
+        }
       }
 
       xhr.send(JSON.stringify(data))
     })
   }
 
-  async completeText(text) {
-    const data = {
-      max_tokens: 512,
-      prompt: text,
-      n: 1,
-      temperature: 0.5
-    }
-
-    return this.query('completions', data)
-      .then(result => result[0].text)
-  }
-
-  async improveText(text) {
-    const data = {
-      model: 'code-davinci-edit-001',
-      input: text,
-      instruction:
-        'Correct any spelling mistakes, grammar mistakes, and improve the overall style of the (latex) text.',
-      n: 1,
-      temperature: 0.5
-    }
-
-    return this.query('edits', data)
-      .then(result => result[0].text)
+  async act(command, text) {
+    let conf = (await chrome.storage.local.get('RequestConfiguration')).RequestConfiguration.openai
+    let request = Object.assign({}, conf.base)
+    let url = conf.url
+    Object.assign(request, conf[command])
+    request.messages.push({ role: 'user', 'content': text })
+    return this.query(url, request)
+      .then(result => result[0]['message'].content)
   }
 }
 
@@ -89,7 +78,7 @@ async function improveTextHandler(openAI) {
   const selection = window.getSelection()
   const selectedText = selection.toString()
   if (!selectedText) return
-  const editedText = await openAI.improveText(selectedText)
+  const editedText = await openAI.act('Improve', selectedText)
   const commentedText = commentText(selectedText)
   replaceSelectedText(commentedText + '\n' + editedText, selection)
 }
@@ -99,7 +88,7 @@ async function completeTextHandler(openAI) {
   const selection = window.getSelection()
   const selectedText = selection.toString()
   if (!selectedText) return
-  const editedText = (await openAI.completeText(selectedText)).trimStart()
+  const editedText = (await openAI.act('Complete', selectedText)).trimStart()
   replaceSelectedText(selectedText + '\n' + editedText, selection)
 }
 
@@ -108,7 +97,7 @@ async function askHandler(openAI) {
   const selection = window.getSelection()
   const selectedText = selection.toString()
   if (!selectedText) return
-  const editedText = (await openAI.completeText('In latex, ' + selectedText)).trimStart()
+  const editedText = (await openAI.act('Ask', selectedText)).trimStart()
   replaceSelectedText(editedText, selection)
 }
 
@@ -143,10 +132,7 @@ function handleCommand(command) {
 
 function error(msg, error) {
   if(error) {
-    msg += ` Error message: ${error.message}`
-    if(error.cause) {
-      console.error(`\nCause: ${JSON.stringify(error.cause)}`)
-    }
+    msg += ` Error message: ${JSON.stringify(error)}`
   }
   customAlert(msg)
   console.error(`LeafLLM: ${msg}`)
@@ -181,6 +167,8 @@ chrome.runtime.onMessage.addListener(
           setAPIKey(openAIAPIKey)
           if (openAI) {
             handleCommand(request.command)
+          } else {
+            error('OpenAI API key is not set, LeafLLM features are disabled.')
           }
         })
       } else {

scripts/service-worker.js

@@ -1,7 +1,39 @@
+// Changing defaultConfigurations requires changing popup/popup.js
+const defaultConfigurations = {
+  openai: {
+    url: 'https://api.openai.com/v1/chat/completions',
+    base: {
+      n: 1,
+      temperature: 0.5,
+      model: 'gpt-3.5-turbo'
+    },
+    Complete: {
+      max_tokens: 512,
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Continues the given text. No need to rewrite the given text.'
+      }]
+    },
+    Improve: {
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Style and improves the given text.'
+      }]
+    },
+    Ask: {
+      messages: [{
+        role: 'system',
+        content: 'You are an assistant in a Latex editor, usually used for writing academic papers. Address the given questions/request without introduction/explanations.'
+      }]
+    }
+  }
+}
+
 const settings = [
   { key: 'Complete', shortcut: 'Alt+C', status: 'enabled', type: 'Command' },
   { key: 'Improve', shortcut: 'Alt+I', status: 'enabled', type: 'Command' },
-  { key: 'Ask', shortcut: 'Alt+A', status: 'enabled', type: 'Command' }
+  { key: 'Ask', shortcut: 'Alt+A', status: 'enabled', type: 'Command' },
+  { key: 'RequestConfiguration', value: defaultConfigurations, type: 'Configuration' }
 ]
 
 async function sendMessage(message) {
@@ -20,13 +52,7 @@ function addListener(commandName) {
   })
 }
 
-chrome.runtime.onInstalled.addListener((reason) => {
-  if (reason.reason === chrome.runtime.OnInstalledReason.INSTALL) {
-    checkCommandShortcuts()
-  }
-})
-
-// Only use this function during the initial install phase. After
+// Only use this function during the initial installation phase. After
 // installation the user may have intentionally unassigned commands.
 // Example for install commands: [{"description":"","name":"_execute_action","shortcut":""},{"description":"Use the selected text to ask GPT. It adds to the beginning of the selected text: 'In Latex, '","name":"Ask","shortcut":""},{"description":"Complete selected text","name":"Complete","shortcut":""},{"description":"Improve selected text","name":"Improve","shortcut":""}]
 async function checkCommandShortcuts() {
@@ -45,6 +71,20 @@ async function checkCommandShortcuts() {
   })
 }
 
+chrome.runtime.onInstalled.addListener((reason) => {
+  if (reason.reason === chrome.runtime.OnInstalledReason.INSTALL) {
+    checkCommandShortcuts()
+    chrome.storage.local.set({ RequestConfiguration: defaultConfigurations })
+  } else if (reason.reason === chrome.runtime.OnInstalledReason.UPDATE) {
+    let newVersion = chrome.runtime.getManifest().version
+    let oldVersion = reason.previousVersion
+    let oldVersionArray = oldVersion.split('.')
+    if (parseInt(oldVersionArray[0]) === 1 && parseInt(oldVersionArray[1]) < 4) {
+      chrome.storage.local.set({ RequestConfiguration: defaultConfigurations })
+    }
+  }
+})
+
 async function setup() {
   addListener('Improve')
   addListener('Complete')