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 successfully follow and implement this tutorial, you need:
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.
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
AmazonRekognitionReadOnlyAccessinto the search bar
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:
koyeb.yamlfile: used to configure and deploy the function
image-search.json Koyeb. The
koyeb.yamlfile contains environment variables required by the function to run properly, the Koyeb Store the function must access to retrieve and process the image, and the event triggering the function.
image-search.jsfile: The function to detect image labels and index them on Algolia. This function is triggered each time a new image is uploaded to the Koyeb Store.
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:
## Koyeb folders and files koyeb.yaml koyeb-functions └── image-search.js ## Next.js app folders & files components ├── instant-search.js └── uploader.js pages ├── _app.js ├── api │ ├── images │ │ ├── [key].js │ │ └── index.js │ └── upload.js └── index.js public ├── favicon.ico └── vercel.svg styles └── tailwind.css package.json node_modules
koyeb.yaml and replace the
REPLACE_ME_WITH_YOUR_KOYEB_STORE_NAME with your Koyeb Store name. If you named the secrets as mentioned above, there is nothing else to edit.
functions: - name: image-search runtime: nodejs14 handler: koyeb-functions/image-search.handler env: AWS_ACCESS_KEY: value_from_secret: aws-reko-access-key AWS_SECRET_KEY: value_from_secret: aws-reko-secret-key ALGOLIA_APP_ID: value_from_secret: algolia-app-id ALGOLIA_API_KEY: value_from_secret: algolia-api-key ALGOLIA_INDEX: value_from_secret: algolia-index volumes: - store: REPLACE_ME_WITH_YOUR_KOYEB_STORE_NAME events: - cloudevent: expression: | event.source == "koyeb.com/gateway" && event.subject == "REPLACE_ME_WITH_YOUR_KOYEB_STORE_NAME" && event.type.matches("s3:ObjectCreated:.*") && data.object.key.matches("([^\\s]+(\\.(?i)(jpe?g|png))$)")
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 the
.env.local, and edit the variable values with your own:
NEXT_PUBLIC_ALGOLIA_APP_ID=REPLACE_ME NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY=REPLACE_ME NEXT_PUBLIC_ALGOLIA_INDEX=REPLACE_ME KOYEB_S3_ACCESS_KEY=REPLACE_ME KOYEB_S3_SECRET_KEY=REPLACE_ME KOYEB_STORE=REPLACE_ME
In the terminal, run the following command to start the app:
yarn installto install the project dependencies
yarn startto start the application
In your browser, open
http://localhost:3000, 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.
Koyeb is a developer-friendly serverless platform to deploy any apps globally.Start for free
Deploy 2 services for free and enjoy our predictable pricing as you grow
Get up and running in 5 minutes