Error 404 Encountered During Azure Functions GET Request

I have double-checked the file and everything seems to be correct. The name matches the Azure website, the API Key is included, but I am not getting any response when trying to use this on Postman as a GET request. What could be the issue?

//https://disney-clone-portfolio.azurewebsites.net/api/getaisuggestion?term=action

import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext,
} from "@azure/functions";

import OpenAI from "openai";

const openAI = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export async function getAISuggestion(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  context.log(`Http function processed request for url "${request.url}"`);

  const term = request.query.get("term");

  const completion = await openAI.chat.completions.create({
    messages: [
      {
        role: "system",
        content: `You are a digital video assistant working for services such as Netflix, Disney Plus & Amazon Prime Video. Your job is to provide suggestions based on the videos the user specifies. Provide an quirky breakdown of what the user should watch next! It should only list the names of the films after the introduction. Keep the response short and sweet! Always list at least 3 films as suggestions. If the user mentions a genre, you should provide a suggestion based on that genre.`,
      },
      {
        role: "user",
        content: `I like: ${term}`,
      },
    ],
    model: "gpt-3.5-turbo-16k",
  });

  return {
    body: completion.choices[0].message.content || "No suggestions found",
  };
}

app.http("getAISuggestion", {
  methods: ["GET"],
  authLevel: "anonymous",
  handler: getAISuggestion,
});

Answer №1

  • Before deploying to the function app, it is crucial to test the function locally to ensure it is error-free and functions as intended.
  • I have made adjustments to the code to incorporate Azure OpenAI.
import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import OpenAI from "openai";

const apiVersion = '2024-02-15-preview';
const apiKey = process.env.OPENAI_API_KEY;

const openAI = new OpenAI({
  apiKey: apiKey,
  baseURL: process.env.OPENAI_BASE_URL,
  defaultQuery: { 'api-version': apiVersion },
  defaultHeaders: { 'api-key': apiKey },
});


export async function getAISuggestion(
    request: HttpRequest,
    context: InvocationContext
    ): Promise<HttpResponseInit> {
    context.log(`Http function processed request for url "${request.url}"`);

    const term = request.query.get("term");

    const completion = await openAI.chat.completions.create({
    messages: [
      {
        role: 'user',
        content: `You are a digital video assistant working for services such as Netflix, Disney Plus & Amazon Prime Video. Your job is to provide suggestions based on the videos the user specifies. Provide an quirky breakdown of what the user should watch next! It should only list the names of the films after the introduction. Keep the response short and sweet! Always list at least 3 films as suggestions. If the user mentions a genre, you should provide a suggestion based on that genre.`,
      },
      {
        role: "user",
        content: `I like: ${term}`,
      },
    ],
    model: "gpt-35-turbo-16k",
  });

  return {
    body: completion.choices[0].message.content || "No suggestions found",
  };
};

app.http('getAISuggestion', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: getAISuggestion
});
  • The API key and base URL have been added to the local settings file.
{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "UseDevelopmentStorage=true",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "OPENAI_API_KEY": "a0ee****2a3",
    "OPENAI_BASE_URL": "https://{resource_name}.openai.azure.com/openai/deployments/{model}"
  }
}
  • Locally, the expected output is being generated.

  • The function was deployed to the function app using VS Code, or the
    func azure functionapp publish {func-app-name}
    command can also be utilized.

  • After deployment, the key and base URL were added to App Settings.

  • The function URL can be successfully invoked.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Caution in NEXTJS: Make sure the server HTML includes a corresponding <div> within a <div> tag

Struggling with a warning while rendering pages in my Next.js and MUI project. Here's the code, any insights on how to resolve this would be greatly appreciated! import "../styles/globals.scss"; import { AppProps } from "next/app"; ...

Press the text in a React Native TypeScript component to trigger a render

I am a newcomer to React Native and TypeScript, and I am struggling to figure out how to display something on the page of my app after a button is pressed. Below is the function I'm using: const getRandomNumber = () ={ const number = Math.fl ...

Utilizing Typescript DOM library for server-side operations

I've been working on coding a Google Cloud Function that involves using the URL standard along with URLSearchParams. After discovering that they are included in the TypeScript DOM library, I made sure to add it to my tsconfig file under the lib settin ...

Adjust the size of an Angular component or directive based on the variable being passed in

I'm looking to customize the size of my spinner when loading data. Is it possible to have predefined sizes for the spinner? For example: <spinner small> would create a 50px x 50px spinner <spinner large> would create a 300px x 300p ...

I found that the Angular checkbox was only allowing me to select one value at a time instead of

Hey there, I am currently working on an angular tickbox where I want to be able to tick multiple values. However, I am facing an issue where only the latest checkbox value is displayed instead of both English and German together. How can I populate data fr ...

Having trouble deploying Next.js on Azure due to an error indicating that the function content size was too large

Encountering difficulties when attempting to deploy the Next.js SSR app on Azure static-web-app. I have included the necessary configurations in the yml file to limit caching, but I am still receiving an ERROR: "The size of the function content was too lar ...

What is the best way to assign JSON data to a Class variable within Angular?

In my code, I have a class called Projects export class Projects { project_id: number; project_name: string; category_id: number; project_type: string; start_date: Date; completion_date: Date; working_status: string; project_info: string; area: string; add ...

Invoke a method within a function triggered by the .call() method

Currently, I am developing an n8n node that essentially functions every time a specific event occurs. To facilitate this process, I have created an abstract class which is invoked by the n8n environment. However, there seems to be a limitation in calling ...

Managing errors with Angular2 Observables within the HTML template

The updated Angular's use of observables is a game-changer. No more long chains of .done().fail().always() like in JQuery - NG2 simplifies it all with the | async pipe. However, what happens if something goes wrong while loading data for myObservable? ...

Looking for a specific phrase in the data entered by the user

I am dealing with data in ckeditor that looks like this: <p>test 1</p> <p>test 2</p> <p><img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICw ...

Connecting RxJS Observables with HTTP requests in Angular 2 using TypeScript

Currently on the journey of teaching myself Angular2 and TypeScript after enjoying 4 years of working with AngularJS 1.*. It's been challenging, but I know that breakthrough moment is just around the corner. In my practice app, I've created a ser ...

What's the trick to inserting a "dot" beneath a DatePicker?

Could someone assist me in adding a small "dot" below certain dates on MUIX DatePicker, similar to the example shown here? Thank you. ...

What are the steps for incorporating the AAD B2C functionality into an Angular2 application with TypeScript?

I recently built a web application using Angular2 and TypeScript, but now one of my clients wants to integrate Azure B2C for customer login instead of OAuth. I followed a simple example on how to implement Azure B2C in a .NET Web app through the link provi ...

Custom "set attribute" feature in TypeScript

One issue I faced was resolved by creating the function shown below : function setProperty<T extends Record<string, string>>(obj: T, key: keyof T) { obj[key] = "hello"; } However, when I tried to compile the code, I encountered an ...

Comparing ESLint and TSLint: Which One Is Right for You

After looking through numerous sources, I came up empty-handed regarding this particular question. Could anyone provide insight on the drawbacks of using Eslint compared to TsLint? What are the reasons for transitioning to ESLint? ...

Creating a redux store with an object using typescript: A step-by-step guide

Having recently started using Redux and Typescript, I'm encountering an error where the store is refusing to accept the reducer when working with objects. let store = createStore(counter); //error on counter Could this be due to an incorrect type set ...

Utilizing Angular to import an SVG file from a backend and incorporate its content as a template

I am looking for a solution to load an SVG date from my Spring Boot backend and utilize it as an Angular template. Currently, the request is structured like this: getSVG (): Observable <any> { return this.http.get(`${environment.apiUrl}/path ...

How can we prevent new chips (primeng) from being added, but still allow them to be deleted in Angular 2?

Hey there! I'm currently exploring how to make the chips input non-editable. I am fetching data objects from one component and using the keys of those objects as labels for the chips. Check out my HTML code below: <div class="inputDiv" *ngFor="le ...

The current version of Firebase functions is not reflecting the most recent modifications when running "firebase serve"

Exploring firebase functions has been a fun journey for me. Everything works smoothly when I deploy to the firebase server using the command firebase deploy --only functions. However, I wanted to test my functions locally before deploying them, and encount ...

Display the initial MUI components from an array of data in a distinctive manner

Trying to display the content of an Accordion by passing props down through a list array to a component. I have identified the issue but unsure how to call the component and pass the props differently. Below is the code snippet. Code for the parent compon ...