Unlocking Secrets: How To Code an AI Calorie Counter using JavaScript

Introduction to AI Calorie Counting

In our health-conscious world, tracking calorie intake has become essential. Many apps now use advanced technology to analyze food images and provide calorie estimates. This blog will explore how to build an AI calorie counter using JavaScript and the OpenAI API.

Choosing an Image for Analysis

The first step in our project involves selecting a food image. For our example, we will use a picture of a hamburger. This image will serve as our input for calorie calculation. It’s crucial to note that results from this process are for educational purposes and should not be taken as definitive.

Finding the Right Image

When searching for images, consider the following:

High-quality images
Clear visibility of food items
Images without distracting backgrounds

Setting Up the Project

To begin coding, we need to set up our project environment. We will create a new repository named “calorie-counter” to house our code. This repository will contain both backend and frontend components.

Creating the Repository

Follow these steps to create your repository:

Go to your GitHub account.
Create a new repository named “calorie-counter”.
Clone the repository to your local machine.

Building the Backend

We will use Node.js for our backend development. Node.js is a JavaScript runtime built on Chrome’s V8 engine, making it lightweight and efficient.

Setting Up Node.js

Start by creating a folder structure:

backend
frontend

Inside the backend folder, create an index.js file. This file will serve as the entry point for our backend application.

Choosing a Hosting Service

For hosting, we will use Google Cloud Functions. It provides an easy way to deploy and manage serverless applications.

Implementing the Calorie Counting Logic

Now, we will implement the logic to calculate calories from the image using the OpenAI API. This involves sending the image to the API and receiving a response in JSON format.

Setting Up OpenAI API

To interact with the OpenAI API, you need to follow these steps:

Sign up for an OpenAI account.
Create an API key in your account settings.
Store the API key securely on your local machine.

Creating the API Call

Let’s write the function that will call the OpenAI API with the image input. This function will format the request and handle the response.

Writing the Function

Here’s a simplified version of the function:

import OpenAI from 'openai';

const openai = new OpenAI({
  organization: process.env.chatOrganization,
  apiKey: process.env.chatApiKey,
});

export default async function createChatResponse(imageUrl, user) {
  const prompt = `
    I have an image of a meal. Can you calculate the approximate amount of calories in this picture? Provide a total and then a table of calories for each food item you see in the image. 
    Give me the response in JSON format with the following structure:
    {
      "foodItems": [
        {
          "name": "Hamburger",
          "calories": 490
        },
        {
          "name": "French Fries",
          "calories": 365
        },
        {
          "name": "Soft Drink",
          "calories": 200
        }
      ],
      "totalCalories": 1055
    }
    Use this structure as a template and replace the values with those calculated from the image.
  `;

  return openai.chat.completions.create({
    model: process.env.chatModel || 'gpt-4o-mini',
    user,
    messages: [
      {
        role: 'system',
        content: 'You are a helpful assistant that calculates the calorie content of meals and formats the response in JSON.',
      },
      {
        role: 'user',
        content: [
          {
            type: 'text',
            text: prompt,
          },
          {
            type: 'image_url',
            image_url: {
              url: imageUrl,
            },
          },
        ],
      },
    ],
    response_format: {
      type: 'json_object',
    },
  });
}

Testing the Functionality

After implementing our function, it’s essential to test its functionality. We can use images of various foods to see how accurately the API responds.

Handling API Responses

Once we receive a response from the API, we need to process it correctly. The response will contain the estimated calorie count and a breakdown of the food items.

{
  "foodItems": [
    {
      "name": "Pizza",
      "calories": 285
    },
    {
      "name": "Salad",
      "calories": 150
    },
    {
      "name": "Milk",
      "calories": 103
    }
  ],
  "totalCalories": 538
}

Final Testing and Deployment

Before deploying the application, it’s crucial to conduct thorough testing. Ensure that the application works seamlessly from image upload to calorie display.

Deployment Steps

Here’s how to deploy your application:

Push your code to the GitHub repository.
Deploy the backend to Google Cloud Functions.

Conclusion

Building an AI calorie counter using JavaScript and the OpenAI API is a rewarding project. It combines backend logic, API interactions, and frontend development, providing a comprehensive learning experience. Remember to take the results with a grain of salt, as they are estimates.

Check the code on GitHub: https://github.com/nerdic-coder/calorie-counter

Hope you enjoyed and until next time stay nerdic!