/react-cs-images-suggestion

SPFX Webpart finding visually similar images through Azure Cognitive Services

Primary LanguageTypeScript

react-cs-images-suggestion

Summary

A SPFX webpart using the open source library react-dropzone to upload an image and immediately search for visually similar images inside a SharePoint Online Picture Library, by the employment of Azure Cognitive Services - Computer Vision and SharePoint Search REST API. Keywords of the images in the library are enriched during upload thanks to a Microsoft Flow connected to the Azure Cognitive Services Computer Vision (thanks to rasper87 for the inspiration, steps 1-4 in the architecture)

Architecture

Architecture

react-cs-images-suggestion SPFX WebPart in action!

WebPartInAction

Microsoft Flow in action!

FlowInAction

Microsoft Flow configuration with Azure Cognitive Services

Flow

Used SharePoint Framework Version

drop

Applies to

Prerequisites

  • Azure Subscription

Solution

Solution Author
react-cs-images-suggestion Federico Porceddu

Version history

Version Date Comments
1.0 March 8, 2019 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

  • Clone this repository
  • Move to right solution folder
  • in the command line run:
    • npm install
    • gulp serve
  • create Azure Cognitive EndPoint, change the key into cognitiveServicesKey
  • create AI Picture Library into your Modern Team Site
  • create MS FLow following Microsoft Flow configuration with Azure Cognitive Services instructions
  • Upload images, let's SharePoint crawler run (some minutes)

Features

This webpart illustrates the following concepts: