How to use the whisper openai model in a azure function for azure static webapp

Question

Hi there dear reader,

I am working on my first azure static webapp,

With Next.js I already have a working version of it.

The concept of the application is simple, it makes a transcript of the user (voice) audio input and returns it to the user (browser). I am still working on expanding the idea.

With a azure static webapp I can test it online on my mobile outside my home.

UnfortunatIey I am struggling a bit with trying to figure out how to implement this in a azure function for the static azure webapp. I think I do need a BLOB storage as well.

The real thing I want to know i how to implement the whisper model in the azure function,
and what are the params I need.

When I implemented this in my Next.js app, I needed to specify a path of the audio file. So for this reason I thaught that I need a blob storage for the azure function, but there is a difference between a url to a file and a path location.

If someone could explain to me how to figure this out, I could not find what I needed to now in the documentation. If someone could point me to the documentation or based on have an Idea I will really appreciate it.

sources read:

• using whisper model in Nextjs app - https://learn.microsoft.com/en-us/azure/ai-services/openai/whisper-quickstart?tabs=command-line%2Cpython-new%2Ckeyless%2Cjavascript-keyless%2Ctypescript-keyless&pivots=programming-language-javascript

sources read tying to figure it out within a Azure function.

• openai textCompletion - https://learn.microsoft.com/en-us/azure/azure-functions/functions-add-openai-text-completion?pivots=programming-language-javascript
• BlobStorage - https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-upload-javascript?tabs=javascript

Answer 1

Hello Ted,

Welcome to the Microsoft Q&A and thank you for posting your questions here.

I understand that you would like to know how you can use the whisper OpenAI model in an azure function for azure static webapp.

Regarding your anticipation to use Next.js, the below are the steps to Implement Whisper Model in an Azure Function:

Make sure you can set up an Azure Function App, Node.js runtime to align with your Next.js expertise unless you prefer Python. Then, install required libraries using npm install azure-storage-blob @azure/functions whisper-api-client

Create a Blob Storage account and a container (e.g., audio-files), and enable public access or use shared access signatures (SAS) for securely accessing Blob files.

Below is a JavaScript-based Azure Function to integrate Whisper with Blob Storage:

   const { BlobServiceClient } = require('@azure/storage-blob');
   const WhisperClient = require('whisper-api-client');
   module.exports = async function (context, req) {
       const audioUrl = req.query.audioUrl || (req.body && req.body.audioUrl);
       if (!audioUrl) {
           context.res = { status: 400, body: 'Please provide the audioUrl parameter.' };
           return;
       }
       try {
           // Initialize Whisper API client
           const whisperClient = new WhisperClient({ apiKey: process.env.WHISPER_API_KEY });
           // If audio is uploaded to Blob Storage, get the signed URL
           const blobServiceClient = BlobServiceClient.fromConnectionString(process.env.AZURE_STORAGE_CONNECTION_STRING);
           const containerClient = blobServiceClient.getContainerClient('audio-files');
           const blobName = new URL(audioUrl).pathname.split('/').pop(); // Extract blob name from URL
           const blobClient = containerClient.getBlobClient(blobName);
           // Generate SAS URL for the Blob
           const sasUrl = blobClient.generateSasUrl({
               permissions: 'read',
               expiresOn: new Date(new Date().getTime() + 3600 * 1000), // 1 hour expiry
           });
           // Call Whisper API to transcribe audio
           const transcription = await whisperClient.transcribeAudio(sasUrl);
           context.res = { status: 200, body: transcription.text };
       } catch (error) {
           context.log.error('Error processing request:', error);
           context.res = { status: 500, body: 'Internal server error.' };
       }
   };

The next is to configure the following variables in the Azure Function App settings:

• AZURE_STORAGE_CONNECTION_STRING: Your Azure Blob Storage connection string.
• WHISPER_API_KEY: Your Whisper model API key (if applicable).

Make sure your File Path and URL is addressed properly,

• URLs are direct web-accessible locations for files (e.g., https://<storage-account>.blob.core.windows.net/audio-files/sample.wav).
• Paths refer to local file locations (e.g., /tmp/sample.wav). you can even generate SAS URLs for Blob files, which act as temporary URLs.

I hope this is helpful! Do not hesitate to let me know if you have any other questions.

---

Please don't forget to close up the thread here by upvoting and accept it as an answer if it is helpful.