Obtenez des étiquettes de données en les associant à l'API Google Cloud Vision lors de la prévisualisation d'images avec Rails

introduction

Je crée un portefeuille d'applications Web avec Ruby on Rails. Je suis un débutant en Rails. Cette fois, j'ai mis en place un simple travail d'analyse d'image au moment de la prévisualisation de l'image avant de publier à l'aide de l'API Google Cloud Vision, je vais donc le laisser comme mémorandum.

Aperçu

Les contenus mis en œuvre cette fois sont les suivants.

1. Lorsqu'une image est téléchargée sur l'écran de publication, "est-ce une image vide" est déterminé en même temps que l'aperçu de l'image, et si ce n'est pas une image vide, "pas une image vide" est sortie.
2. S'il est déterminé qu'il s'agit d'une image vide, les quatre premières étiquettes du résultat de l'analyse sont automatiquement sorties sous forme de balises.

Le produit fini ressemble à ceci.

La raison pour laquelle j'ai décidé de le faire

Je crée un service Web appelé "is your sky", un SNS qui partage le ciel que j'ai pris. https://isyoursky-web.herokuapp.com/

Puisque le ciel est le service principal jusqu'au dernier, j'aimerais que les utilisateurs publient ** des images montrant le ciel **! Je vois souvent la fonction qui empêche la publication d'images radicales, mais le but est un peu différent. Cette fois, nous avons dû ** "inviter les utilisateurs à publier des images vides" **. Ainsi, une fois que l'image n'est pas vide au moment de l'aperçu sur l'écran de publication, j'ai pensé à émettre une alerte pour que l'utilisateur le remarque volontairement. C'est la fonction de 1.

De plus, l'écran de publication a également une fonction de balise, mais il serait pratique que des balises correspondant aux photos soient automatiquement ajoutées! J'ai également créé la fonction de 2. __ * Cependant, comme je l'ai découvert après avoir implémenté cette fonction, le texte sur l'étiquette ne fonctionne pas beaucoup comme une balise. Des mots tels que Ciel et rouge sortent relativement, donc cela n'a pas beaucoup de sens comme étiquette ... Pour le moment, je vais le laisser en mémoire, mais c'est une politique de ne pas l'adopter dans mon application Web. __

Qu'est-ce que l'API Google Cloud Vision?

C'est l'un des services de Vision AI, un service d'analyse d'image qui utilise l'apprentissage automatique fourni par Google.

L'API Vision de Google Cloud fournit un puissant modèle d'apprentissage automatique pré-formé via l'API REST et l'API RPC. L'attribution d'étiquettes aux images vous permet de classer rapidement les images dans des millions de catégories prédéfinies. Détecte les objets et les visages, lit le texte imprimé et le texte manuscrit et crée des métadonnées utiles dans le catalogue d'images

• Cité sur le site officiel

En plus de Google, IBM, AWS, Window, etc. fournissent de telles API d'analyse d'image, Google a une haute précision d'extraction d'objets et de fonctions d'étiquetage Je l'ai choisi parce que je pensais que ce serait le meilleur match pour ce que je voulais réaliser cette fois. Le fait que j'utilisais à l'origine Google Cloud Platform est également un facteur majeur.

référence) Comparaison des services de l'API d'analyse d'images L'API de reconnaissance d'image de Google est la plus puissante! !! Résultat de la comparaison approfondie de l'API de reconnaissance d'image

supposition

Connectez-vous à Google Cloud Platform avec votre compte Google et créez un projet, Vous avez déjà obtenu le fichier json pour la clé de compte de service. Veuillez vous référer à divers sites de référence pour ce domaine. référence) Analysons les images avec l'API Google Cloud Vision [Introduction] Présentation de l'API Google Cloud Vision to Rails pour détecter facilement les images radicales

environnement

Je crée généralement des conteneurs avec Docker pour Mac et je développe des Rails.

ruby 2.4.5
Ruby on rails 5.0.7.2

Préparation

Installez Gem pour utiliser l'API Google Cloud Vision

Gemfile

gem 'google-cloud-vision'

Pour le moment, l'installation du bundle

terminal

bundle install

• Depuis octobre 2020, les versions installées sont les suivantes. Cette fois, j'écrirai dans cette manière d'écrire 1.0.0.

Gemfile.lock

google-cloud-vision (1.0.0)

• Google-cloud-vision semble avoir été considérablement mis à jour avec la version 1.0.0. Certaines parties sont différentes de la version précédente, donc pour votre référence. Les détails sont répertoriés dans le document, veuillez donc consulter ici pour plus de détails ...

Comment mettre en œuvre

Dans ce cas, je vais l'écrire dans le code jQuery qui se déclenche au moment de l'aperçu de l'image. Une fois que l'utilisateur a sélectionné une image, le déroulement est le suivant.

1. jQuery se déclenche
2. Envoyez l'image téléchargée par l'utilisateur au contrôleur par communication asynchrone (Ajax)
3. Liez à l'API Vision dans le contrôleur et définissez diverses informations dans les variables d'instance
4. Utilisez jBuilder pour convertir les variables d'instance en un tableau et le renvoyer du côté jQuery.
5. Processus côté jQuery et affichage à l'écran

C'est un peu déroutant en ce qui concerne les caractères, mais c'est principalement le fichier js et le contrôleur qui le traitent. Nous nous concentrerons sur le traitement dans ce domaine.

code

View Le premier est le code de vue. Un formulaire général avec du code pour l'aperçu de l'image. Ajout de la classe span avec l'ID ʻimage_isnot_sky au bas de la classe ʻimage-preview. S'il est déterminé que l'image n'est pas vide, cette partie est masquée et affichée sous forme de caractères à l'écran.

Pour la fonction tag, tag-it est utilisé. Référence) tag-it

ruby:_form.html.slim

= form_with model: post, local: true do |f|
:
(Omission)
  .form-group
    = f.label :image, "image"
    = f.file_field :image, class:"form-control", id: 'post_img'
  .image-preview
    img[id="image_img_prev" src="#" class='hidden']
    - if post.persisted? && post.image?
      = image_tag post.image.url, class: 'image_present_img'
      label
        = f.check_box :remove_image
        |Supprimer l'image
    - else
      = f.hidden_field :avatar_cache
    span[id="image_isnot_sky" class="hidden"]
      |Ce n'est peut-être pas une image vide. Veuillez publier une photo vide


  #post-tags-field
    = f.label "marque"
    ul[id="post-tags"]
    = hidden_field_tag :tag_hidden, tag_list
:

javascript(jQuery)

Comme nous l'avons vu précédemment, jQuery se déclenche lorsque le fichier est chargé dans le champ file_field de la vue. La communication asynchrone est effectuée dans la partie $ .ajax, et si elle réussit, elle entre done, et si elle échoue, elle entre fail. Mettez controller and method name dans url, POST in type, et mettez les données que vous souhaitez communiquer cette fois (formData dans ce cas) dans data.

Je n'ai pas pris connaissance des parties de processData: false et contentType: false, mais si je les supprime, les données seront traitées et envoyées, elles ne pourront donc pas être lues correctement. .. (Je n'ai pas écrit ici et j'ai eu une erreur pendant un moment ...)

post.js

:
  function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        //Ouvrez le fichier téléchargé avec formData
        var formData = new FormData();
        formData.append("image_cache", input.files[0]);
        //traitement de la communication ajax
        $.ajax({
          url: "/posts/check_cache_image",
          type: "POST",
          data: formData,
          dataType: "json",
          processData: false,
          contentType: false,
        }).done(function(data){
           var tag_list = data.data.tag_list
           var image_flag = data.data.image_flag

           if(image_flag == true){
             //Afficher les alertes
             $('#image_isnot_sky').removeClass('hidden');
             //Supprimer la balise
             $("#post-tags").tagit("removeAll");
           }else{
             //Masquer les alertes si elles ont déjà été affichées
             $('#image_isnot_sky').addClass('hidden');
             //Supprimer la balise
             $("#post-tags").tagit("removeAll");

             //Créer une étiquette basée sur l'étiquette
             $.each(tag_list, function(index, tag){
               $('#post-tags').tagit('createTag', tag);
             })
           }

        }).fail(function(){
          //En cas d'erreur, émettez une alerte.
          alert('Échec du chargement de l'image');
        })
        //Effectuer un aperçu de l'image
        $('#image_img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
:

En outre, les routes sont essentielles pour la communication asynchrone. Je vais l'ajouter.

route/.rb

Rails.application.routes.draw do
:
  post "posts/check_cache_image"
:
end

JSON (en utilisant jbuilder)

La variable data utilisée dans done stocke les données renvoyées par le contrôleur à l'aide de jBuilder au format json. jBuilder peut être utilisé en créant nom du contrôleur.json.jbuilder dans le même dossier de vue. Voir ci-dessous pour plus de détails Référence) https://pikawaka.com/rails/jbuilder

:check_cache_image.json.jbuilder

json.data do |data|
  json.image_flag @data[:image_flag]
  json.tag_list @data[:tag_list]
end

Controller

De là, regardons de plus près. Le premier est le lien avec l'API Vision. Cette fois, nous utiliserons la fonction ** "Détection d'étiquette" ** dans l'API.

Pour la variable d'environnement, spécifiez le chemin d'accès au fichier json du compte de service mentionné au début.

• La façon d'écrire la configuration a été modifiée comme suit à partir de la version 1.0.0.

post_controller.rb

:
  def check_cache_image
    require "google/cloud/vision"

    #Paramètres de l'API Vision
    image_annotator  = Google::Cloud::Vision.image_annotator do | config |
      config.credentials = ENV["GOOGLE_APPLICATION_CREDENTIALS"]
    end
:

Récupérez l'image_cache apportée par formData et transmettez-la à l'API Vision. Le code ici est basé sur le Code officiel presque tel quel. J'obtiens le nom de l'étiquette avec label.description.

post_controller.rb

:
    #Obtenir des informations sur le cache
    image = params[:image_cache].path
    #Transmettez le cache à l'API Vision en guise de réponse.
    response = image_annotator.label_detection image: image

    #Mettre l'étiquette dans un tableau
    label_list = []
    response.responses.each do |res|
      res.label_annotations.each do |label|
        label_list.push(label.description)
      end
    end
:

Après cela, diverses informations nécessaires sont acquises en fonction de l'étiquette détectée.

1. S'il y a "Sky" dans l'étiquette, il est considéré comme "photo vide"
2. Récupérez les 4 premiers éléments de l'étiquette et affichez-les sous forme de balises

post_controller.rb

:
    #1.Déterminez s'il s'agit d'une photo vide
    if label_list.include?("Sky")
      @image_flag = false
    else
      @image_flag = true
    end

    #2.Apportez les quatre premières étiquettes en tant que balises
    if label_list.length >= 4
      @tag_list = label_list[0..3]
    else
      @tag_list = label_list
    end
:

Le dernier est le traitement JSON.

post_controller.rb

:
    #Prêt à envoyer à jBuilder
    @data = { tag_list: @tag_list, image_flag: @image_flag }
    
    respond_to do |format|
      format.html
      format.json
    end
  end
:

Avec ce qui précède, au moment de l'aperçu de l'image, il est possible de "déterminer s'il s'agit d'une image vide" et "d'ajouter une étiquette automatiquement". C'est peut-être tout à fait impossible, mais j'ai pu le mettre en œuvre pour le moment ... Je vous serais reconnaissant si vous pouviez signaler des erreurs.

À la fin

J'ai pu mettre en œuvre une analyse d'image simple à l'aide de l'API Google Cloud Vision. J'ai envoyé quelques photos au hasard dans le test, mais s'il y a même un peu de ciel, "Sky" sera étiqueté correctement. C'est trop étonnant ...! C'est énorme que vous puissiez l'utiliser gratuitement. (Si vous passez un certain nombre, vous serez facturé ...) C'était plus facile à mettre en œuvre que ce à quoi je m'attendais, alors j'aimerais aussi utiliser d'autres fonctions :)

Site utile

Merci beaucoup! Utilisez l'API Google Cloud Vision pour lire de manière asynchrone le texte de l'image de l'emballage alimentaire et remplissez le formulaire Rails: Comment frapper l'action du contrôleur avec jquery et renvoyer la variable à jquery Présentation de l'API Google Cloud Vision to Rails pour détecter facilement les images radicales