image-game-sample
This is an Image game sample using Azure Functions on Python and Azure Web App (for hosting the front end). The sample shows how to decode/encode images in JSON objects to send and receive over HTTP requests and to perform image tansformation on them. It uses Pillow library in Python to do rotation of images. This can easily be upgraded to do more complex transformations.
The repository contains two apps-
- solve-image-APIs: This is an Azure Function Project consisting of four APIs to do some basic image processing.
- solve-image-front-end: This directory contains static files for the UI of the sample. The UI is built using Semantic UI Framework.
The app when launched in the browser, shows a random image acquired from an Azure Storage Blob and a randomly rotated version of the image. The goal is to rotate the second image to match the first one. Something like this could easily be modified to create a new version of ReCAPTCHA that asks users to solve such tiny puzzles.
In order to deploy this app, you would need-
- An Azure Storage with a Blob container filled with any number of random
png
images. - An Azure Function App to deploy the
solve-image-APIs
project. - An Azure Web App or a similar static hosting platform.
A couple of notes to keep in mind-
- You must change the CORS settings in your Azure Function App to allow requests from your Azure Web App.
- You must update the
solve-image-front-end/script.js
to use your function app instead ofhttp://localhost:7071
. - You must add an App Setting
AZURE_IMAGE_STORAGE_CONNECTION_STRING
with the connection string of the Azure Storage with images. You must also add an App SettingAZURE_IMAGE_STORAGE_CONTAINER_NAME
with the name of your Blob container in the Azure Storage with images.
Screenshots
Homepage
Solved
Failed