feat: azure openai api (#80)

Author: josStorer

README.md

@@ -10,7 +10,7 @@ Deep ChatGPT integrations in your browser, completely for free.
 
 [![license][license-image]][license-url]
 [![release][release-image]][release-url]
-[![size](https://img.shields.io/badge/minified%20size-350%20kB-blue)][release-url]
+[![size](https://img.shields.io/badge/minified%20size-360%20kB-blue)][release-url]
 [![verfiy][verify-image]][verify-url]
 
 English | [Indonesia](README_IN.md) | [简体中文](README_ZH.md)

README_IN.md

@@ -10,7 +10,7 @@ Integrasi Deep ChatGPT di browser Anda, sepenuhnya gratis.
 
 [![license][license-image]][license-url]
 [![release][release-image]][release-url]
-[![size](https://img.shields.io/badge/minified%20size-350%20kB-blue)][release-url]
+[![size](https://img.shields.io/badge/minified%20size-360%20kB-blue)][release-url]
 [![verfiy][verify-image]][verify-url]
 
 [Inggris](README.md) | Indonesia | [简体中文](README_ZH.md)

README_ZH.md

@@ -10,7 +10,7 @@
 
 [![license][license-image]][license-url]
 [![release][release-image]][release-url]
-[![size](https://img.shields.io/badge/minified%20size-350%20kB-blue)][release-url]
+[![size](https://img.shields.io/badge/minified%20size-360%20kB-blue)][release-url]
 [![verfiy][verify-image]][verify-url]
 
 [English](README.md) | [Indonesia](README_IN.md) | 简体中文

package-lock.json

@@ -22,6 +22,7 @@
     "@nem035/gpt-3-encoder": "^1.1.7",
     "@picocss/pico": "^1.5.7",
     "@primer/octicons-react": "^18.2.0",
+    "azure-openai": "^0.9.4",
     "countries-list": "^2.6.1",
     "eventsource-parser": "^0.1.0",
     "expiry-map": "^2.0.0",

package.json

@@ -0,0 +1,75 @@
+import { Configuration, OpenAIApi } from 'azure-openai'
+import { getUserConfig, maxResponseTokenLength } from '../../config/index.mjs'
+import { getChatSystemPromptBase, pushRecord, setAbortController } from './shared.mjs'
+import { getConversationPairs } from '../../utils/get-conversation-pairs'
+
+/**
+ * @param {Runtime.Port} port
+ * @param {string} question
+ * @param {Session} session
+ */
+export async function generateAnswersWithAzureOpenaiApi(port, question, session) {
+  const { controller, messageListener } = setAbortController(port)
+  const config = await getUserConfig()
+
+  const prompt = getConversationPairs(session.conversationRecords, false)
+  prompt.unshift({ role: 'system', content: await getChatSystemPromptBase() })
+  prompt.push({ role: 'user', content: question })
+
+  const openAiApi = new OpenAIApi(
+    new Configuration({
+      apiKey: config.azureApiKey,
+      azure: {
+        apiKey: config.azureApiKey,
+        endpoint: config.azureEndpoint,
+        deploymentName: config.azureDeploymentName,
+      },
+    }),
+  )
+
+  let answer = ''
+  const response = await openAiApi
+    .createChatCompletion(
+      {
+        messages: prompt,
+        stream: true,
+        max_tokens: maxResponseTokenLength,
+      },
+      {
+        signal: controller.signal,
+        responseType: 'stream',
+      },
+    )
+    .catch((err) => {
+      port.onMessage.removeListener(messageListener)
+      throw err
+    })
+  for await (const chunk of response.data) {
+    const lines = chunk
+      .toString('utf8')
+      .split('\n')
+      .filter((line) => line.trim().startsWith('data: '))
+
+    for (const line of lines) {
+      const message = line.replace(/^data: /, '')
+      console.debug('sse message', message)
+      if (message === '[DONE]') {
+        pushRecord(session, question, answer)
+        console.debug('conversation history', { content: session.conversationRecords })
+        port.postMessage({ answer: null, done: true, session: session })
+        break
+      }
+      let data
+      try {
+        data = JSON.parse(message)
+      } catch (error) {
+        console.debug('json error', error)
+        continue
+      }
+      answer += data.choices[0].text
+      port.postMessage({ answer: answer, done: false, session: null })
+    }
+  }
+
+  port.onMessage.removeListener(messageListener)
+}

src/background/apis/azure-openai-api.mjs

@@ -7,16 +7,8 @@ import { pushRecord, setAbortController } from './shared.mjs'
  * @param {string} question
  * @param {Session} session
  * @param {string} accessToken
- * @param {string} modelName
  */
-export async function generateAnswersWithBingWebApi(
-  port,
-  question,
-  session,
-  accessToken,
-  // eslint-disable-next-line
-  modelName,
-) {
+export async function generateAnswersWithBingWebApi(port, question, session, accessToken) {
   const { controller, messageListener } = setAbortController(port)
 
   const bingAIClient = new BingAIClient({ userToken: accessToken })

src/background/apis/bing-web.mjs

@@ -11,7 +11,9 @@ import {
   generateAnswersWithGptCompletionApi,
 } from './apis/openai-api'
 import { generateAnswersWithCustomApi } from './apis/custom-api.mjs'
+import { generateAnswersWithAzureOpenaiApi } from './apis/azure-openai-api.mjs'
 import {
+  azureOpenAiApiModelKeys,
   bingWebModelKeys,
   chatgptApiModelKeys,
   chatgptWebModelKeys,
@@ -81,13 +83,7 @@ Browser.runtime.onConnect.addListener((port) => {
         await generateAnswersWithChatgptWebApi(port, session.question, session, accessToken)
       } else if (bingWebModelKeys.includes(session.modelName)) {
         const accessToken = await getBingAccessToken()
-        await generateAnswersWithBingWebApi(
-          port,
-          session.question,
-          session,
-          accessToken,
-          session.modelName,
-        )
+        await generateAnswersWithBingWebApi(port, session.question, session, accessToken)
       } else if (gptApiModelKeys.includes(session.modelName)) {
         await generateAnswersWithGptCompletionApi(
           port,
@@ -112,6 +108,8 @@ Browser.runtime.onConnect.addListener((port) => {
           '',
           config.customModelName,
         )
+      } else if (azureOpenAiApiModelKeys.includes(session.modelName)) {
+        await generateAnswersWithAzureOpenaiApi(port, session.question, session)
       }
     } catch (err) {
       console.error(err)

src/background/index.mjs

@@ -19,13 +19,15 @@ export const Models = {
   chatgptApi4_32k: { value: 'gpt-4-32k', desc: 'ChatGPT (GPT-4-32k)' },
   gptApiDavinci: { value: 'text-davinci-003', desc: 'GPT-3.5' },
   customModel: { value: '', desc: 'Custom Model' },
+  azureOpenAi: { value: '', desc: 'ChatGPT (Azure)' },
 }
 
 export const chatgptWebModelKeys = ['chatgptFree35', 'chatgptPlus4']
 export const bingWebModelKeys = ['bingFree4']
 export const gptApiModelKeys = ['gptApiDavinci']
 export const chatgptApiModelKeys = ['chatgptApi35', 'chatgptApi4_8k', 'chatgptApi4_32k']
 export const customApiModelKeys = ['customModel']
+export const azureOpenAiApiModelKeys = ['azureOpenAi']
 
 export const TriggerMode = {
   always: 'Always',
@@ -60,13 +62,21 @@ export const defaultConfig = {
   themeMode: 'auto',
   /** @type {keyof Models}*/
   modelName: 'chatgptFree35',
-  apiKey: '',
-  /** @type {keyof ModelMode}*/
-  modelMode: 'balanced',
+
   preferredLanguage: getNavigatorLanguage(),
   insertAtTop: isMobile(),
   lockWhenAnswer: false,
   autoRegenAfterSwitchModel: false,
+
+  apiKey: '', // openai ApiKey
+
+  azureApiKey: '',
+  azureEndpoint: '',
+  azureDeploymentName: '',
+
+  /** @type {keyof ModelMode}*/
+  modelMode: 'balanced',
+
   customModelApiUrl: 'http://localhost:8000/chat/completions',
   customModelName: 'llama-7b-int4',
 
@@ -154,6 +164,10 @@ export function isUsingCustomModel(configOrSession) {
   return customApiModelKeys.includes(configOrSession.modelName)
 }
 
+export function isUsingAzureOpenAi(configOrSession) {
+  return azureOpenAiApiModelKeys.includes(configOrSession.modelName)
+}
+
 export async function getPreferredLanguageKey() {
   const config = await getUserConfig()
   if (config.preferredLanguage === 'auto') return config.userLanguage
@@ -166,12 +180,6 @@ export async function getPreferredLanguageKey() {
  */
 export async function getUserConfig() {
   const options = await Browser.storage.local.get(Object.keys(defaultConfig))
-
-  // version compatibility
-  if (options.modelName === 'chatgptFree') options.modelName = 'chatgptFree35'
-  else if (options.modelName === 'chatgptApi') options.modelName = 'chatgptApi35'
-  else if (options.modelName === 'gptDavinci') options.modelName = 'gptApiDavinci'
-
   return defaults(options, defaultConfig)
 }
 

src/config/index.mjs

@@ -5,6 +5,7 @@ import {
   getPreferredLanguageKey,
   getUserConfig,
   isUsingApiKey,
+  isUsingAzureOpenAi,
   isUsingCustomModel,
   isUsingMultiModeModel,
   ModelMode,
@@ -85,7 +86,10 @@ function GeneralPart({ config, updateConfig }) {
         <span style="display: flex; gap: 15px;">
           <select
             style={
-              isUsingApiKey(config) || isUsingMultiModeModel(config) || isUsingCustomModel(config)
+              isUsingApiKey(config) ||
+              isUsingMultiModeModel(config) ||
+              isUsingCustomModel(config) ||
+              isUsingAzureOpenAi(config)
                 ? 'width: 50%;'
                 : undefined
             }
@@ -165,6 +169,18 @@ function GeneralPart({ config, updateConfig }) {
               }}
             />
           )}
+          {isUsingAzureOpenAi(config) && (
+            <input
+              type="password"
+              style="width: 50%;"
+              value={config.azureApiKey}
+              placeholder={t('Azure API Key')}
+              onChange={(e) => {
+                const apiKey = e.target.value
+                updateConfig({ azureApiKey: apiKey })
+              }}
+            />
+          )}
         </span>
         {isUsingCustomModel(config) && (
           <input
@@ -177,6 +193,28 @@ function GeneralPart({ config, updateConfig }) {
             }}
           />
         )}
+        {isUsingAzureOpenAi(config) && (
+          <input
+            type="password"
+            value={config.azureEndpoint}
+            placeholder={t('Azure Endpoint')}
+            onChange={(e) => {
+              const endpoint = e.target.value
+              updateConfig({ azureEndpoint: endpoint })
+            }}
+          />
+        )}
+        {isUsingAzureOpenAi(config) && (
+          <input
+            type="text"
+            value={config.azureDeploymentName}
+            placeholder={t('Azure Deployment Name')}
+            onChange={(e) => {
+              const deploymentName = e.target.value
+              updateConfig({ azureDeploymentName: deploymentName })
+            }}
+          />
+        )}
       </label>
       <label>
         <legend>{t('Preferred Language')}</legend>