Last updated 4 months ago
This guide demonstrates how to create an image search application using the Koyeb Serverless Platform, AWS Rekognition to detect labels, and Algolia to index and search images labels.
Once you have completed this tutorial, you have a Next.js app up & running allowing you to search images by labels and upload new images. Each time an image is uploaded, a Koyeb function is triggered to detect image labels using AWS Rekognition and index the result in Algolia.
You can preview the app we will build here.
To create the image search application, you need to follow these steps:
The first step is to create a Koyeb Store to upload and serve images. Koyeb natively provides an S3-compatible API allowing you to manage your data programmatically using any S3-compatible SDKs and tools. We will use the Koyeb S3 API endpoint to upload and serve images in our app.
In this guide, we use a Koyeb Managed Store for simplicity, but you can connect your own Cloud Storage Provider to use it directly. You can refer to this documentation to get started with this method.
To create a new Koyeb Managed Store, go to the Koyeb Control Panel.
We have now created a Koyeb Managed Store and can go to the next step.
As our Koyeb function uses AWS Rekognition to detect labels in images, we need to generate AWS Credentials to access the service.
Below, we generate new credentials scoped to the AWS Rekognition API and create new Secrets to store these credentials in the Koyeb console so our function can access them at runtime.
From the AWS Console
You have now successfully configured AWS Rekognition credentials. Save them in a secure place, we will need them in the next step.
From the Koyeb Console
We now have generated AWS Rekognition credentials and created the Koyeb Secrets required by our function to perform the label detection each time a new image is uploaded.
The next step is to configure Algolia by creating a new index to store image labels detect by AWS Rekognition.
Now our index is created, we need to create new Koyeb Secrets to allow our function to index detected labels into Algolia at runtime.
From the Algolia console
Make sure to copy these values in a safe place, we will need them in the next steps.
From the Koyeb Console
From there, all the required configuration is ready. We can now deploy our function and view what happens.
The best part starts now! Fork the GitHub repository containing the Koyeb processing function and demo app here.
The GitHub repository contains:
All other files present in the repository are used to run the Next.js app. The app lets you explore the Koyeb Store images and upload new images that will be automatically processed by the function running on Koyeb.
Below is the repository structure:
1## Koyeb folders and files 2koyeb.yaml 3koyeb-functions 4└── image-search.js 5## Next.js app folders & files 6components 7├── instant-search.js 8└── uploader.js 9pages 10├── _app.js 11├── api 12│ ├── images 13│ │ ├── [key].js 14│ │ └── index.js 15│ └── upload.js 16└── index.js 17public 18├── favicon.ico 19└── vercel.svg 20styles 21└── tailwind.css 22package.json 23node_modules 24
Open theand replace the with your Koyeb Store name. If you named the secrets as mentioned above, there is nothing else to edit.
1functions: 2 - name: image-search 3 runtime: nodejs14 4 handler: koyeb-functions/image-search.handler 5 env: 6 AWS_ACCESS_KEY: 7 value_from_secret: aws-reko-access-key 8 AWS_SECRET_KEY: 9 value_from_secret: aws-reko-secret-key 10 ALGOLIA_APP_ID: 11 value_from_secret: algolia-app-id 12 ALGOLIA_API_KEY: 13 value_from_secret: algolia-api-key 14 ALGOLIA_INDEX: 15 value_from_secret: algolia-index 16 volumes: 17 - store: REPLACE_ME_WITH_YOUR_KOYEB_STORE_NAME 18 events: 19 - cloudevent: 20 expression: | 21 event.source == "koyeb.com/gateway" && 22 event.subject == "REPLACE_ME_WITH_YOUR_KOYEB_STORE_NAME" && 23 event.type.matches("s3:ObjectCreated:.*") && 24 data.object.key.matches("([^\\s]+(\\.(?i)(jpe?g|png))$)") 25
On the Koyeb console, click the Create button on the top-right and select Stack. You land on the Stack creation page. Choose GitHub repository as the way to manage the Stack and select the repository you previously forked in the dropdown. Click Create Stack.
Go to the Store you created and upload some images. If you followed all steps, your Stack function is executed for each image uploaded, detect labels, and index them into Algolia.
In the Algolia control panel, you should see the list of images with their detected labels indexed.
The final step is to run the Next.js app to showcase the end-to-end use-case.
In the repository you previously forked, copy theto , and edit the variable values with your own:
1NEXT_PUBLIC_ALGOLIA_APP_ID=REPLACE_ME 2NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=REPLACE_ME 3NEXT_PUBLIC_ALGOLIA_INDEX=REPLACE_ME 4KOYEB_S3_ACCESS_KEY=REPLACE_ME 5KOYEB_S3_SECRET_KEY=REPLACE_ME 6KOYEB_STORE=REPLACE_ME 7
In the terminal, run the following command to start the app:
In your browser, open, you land on a page listing your Koyeb Store images. You can search and upload new images. Each time a new image is uploaded, the function will be executed to detect labels and index the result in Algolia.