Support Azure OpenAI API

[kotobuki09]

Would love to see this support Azure OpenAI API!

[Niek]

Should be rather trivial, looking at https://learn.microsoft.com/en-us/azure/cognitive-services/openai/reference#chat-completions

It's unfortunate they are so super-strict with the API access. I applied a few times but haven't heard anything since then.

[kiwizznz]

Same here! I've seen other attempts and the suggestion was a translator service of sorts (so apps like this don't need to take into consideration the different formatting for Azure OpenAI) but I'd rather have native support!

[kiwizznz]

Should be rather trivial, looking at https://learn.microsoft.com/en-us/azure/cognitive-services/openai/reference#chat-completions

It's unfortunate they are so super-strict with the API access. I applied a few times but haven't heard anything since then.

Happy to help with testing Niek. I've got access. There's another discussion which might help over here: https://github.com/mckaywrigley/chatbot-ui/issues/243

[othmanelhoufi]

I am trying to make some changes in order to connect with Microsoft Azure OpenAI, I can't find the 'new' instance of OpenAI API. Any help?

[othmanelhoufi]

Finally I managed to edit the code so that it works with Azure OpenAI API, and it's pretty easy, you should edit these two functions in "Chat.svelte":

response = await (
        await fetch(apiBase + `deployments/${modelSetting.default}/chat/completions?api-version=2023-03-15-preview`, {
          method: 'POST',
          headers: {
            "api-key": `${$apiKeyStorage}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify(request)
        })
      ).json()
    } catch (e) {
      response = { error: { message: e.message } } as Response
    }

    // Hide updating bar
    updating = false

    return response
  }

const showSettings = async () => {
    settings.classList.add('is-active')

    // Load available models from OpenAI
    const allModels = (await (
      await fetch(apiBase + 'models?api-version=2023-03-15-preview', {
        method: 'GET',
        headers: {
          'api-key': `${$apiKeyStorage}`,
          'Content-Type': 'application/json'
        }
      })
    ).json()) as ResponseModels
    const filteredModels = supportedModels.filter((model) => allModels.data.find((m) => m.id === model))

    // Update the models in the settings
    modelSetting.options = filteredModels
    settingsMap = settingsMap
  }

Basically is only the link and the header format that changes, then edit the link in apiBase:

  const apiBase = 'https://[YOUR_ENDPOINT].openai.azure.com/openai/'

Finally, wherever there is "gpt-3.5-turbo" change it to "gpt-35-turbo" because that's the deployement name in Azure OpenAI.

[Niek]

OK, that's not too bad. If someone can share an Azure OpenAI key with me privately (see contact info in my profile), I'll try to implement support for both APIs.

[KrisQuack]

OK, that's not too bad. If someone can share an Azure OpenAI key with me privately (see contact info in my profile), I'll try to implement support for both APIs.

Hey just seeing this project and it looks great, Did you have any luck/need any help with this? I have full access on Azure so can provide a key for testing if needed

[melonique]

I did connect your app to our Azure setup. I dont have time to make it an option and a PR and everything, but here is the code that works great for us:

<script context="module" lang="ts">
  import { type Request, type Response } from './Types.svelte'

  const OPENAI_API_BASE = import.meta.env.VITE_OPENAI_BASE_URL
  const OPENAI_API_KEY = import.meta.env.VITE_OPENAI_API_KEY

  export const sendAPIRequest = async (request: Request): Promise<Response> => {
    let response: Response
    try {
      response = await (
        await fetch(
          OPENAI_API_BASE +
            '/openai/deployments/' +
            request.model +
            '/chat/completions?api-version=2023-03-15-preview',
          {
            method: 'POST',
            headers: {
              Authorization: `Bearer ${OPENAI_API_KEY}`,
              'Content-Type': 'application/json',
              'api-key': `${OPENAI_API_KEY}`
            },
            body: JSON.stringify(request)
          }
        )
      ).json()
    } catch (e) {
      response = { error: { message: e.message } } as Response
    }
    return response
  }
</script>

[nodomain]

+1

[810220822]

Finally I managed to edit the code so that it works with Azure OpenAI API, and it's pretty easy, you should edit these two functions in "Chat.svelte":

response = await (
        await fetch(apiBase + `deployments/${modelSetting.default}/chat/completions?api-version=2023-03-15-preview`, {
          method: 'POST',
          headers: {
            "api-key": `${$apiKeyStorage}`,
            "Content-Type": "application/json",
          },
          body: JSON.stringify(request)
        })
      ).json()
    } catch (e) {
      response = { error: { message: e.message } } as Response
    }

    // Hide updating bar
    updating = false

    return response
  }

const showSettings = async () => {
    settings.classList.add('is-active')

    // Load available models from OpenAI
    const allModels = (await (
      await fetch(apiBase + 'models?api-version=2023-03-15-preview', {
        method: 'GET',
        headers: {
          'api-key': `${$apiKeyStorage}`,
          'Content-Type': 'application/json'
        }
      })
    ).json()) as ResponseModels
    const filteredModels = supportedModels.filter((model) => allModels.data.find((m) => m.id === model))

    // Update the models in the settings
    modelSetting.options = filteredModels
    settingsMap = settingsMap
  }

Basically is only the link and the header format that changes, then edit the link in apiBase:

  const apiBase = 'https://[YOUR_ENDPOINT].openai.azure.com/openai/'

Finally, wherever there is "gpt-3.5-turbo" change it to "gpt-35-turbo" because that's the deployement name in Azure OpenAI.

code changed? can't find the tow functions