Erhalten Sie Datenbeschriftungen, indem Sie bei der Vorschau von Bildern mit Rails eine Verknüpfung mit der Google Cloud Vision-API herstellen

Einführung

Ich erstelle ein Portfolio von Web-Apps mit Ruby on Rails. Ich bin ein Rails-Anfänger. Dieses Mal habe ich zum Zeitpunkt der Bildvorschau eine einfache Bildanalyse durchgeführt, bevor ich sie mit der Google Cloud Vision-API veröffentlicht habe. Daher werde ich sie als Memorandum belassen.

Überblick

Die diesmal implementierten Inhalte sind wie folgt.

1. Wenn ein Bild auf dem Buchungsbildschirm hochgeladen wird, wird gleichzeitig mit der Bildvorschau "Ist es ein leeres Bild?" Festgelegt. Wenn es sich nicht um ein leeres Bild handelt, wird "Kein leeres Bild" ausgegeben.
2. Wenn festgestellt wird, dass es sich um ein leeres Bild handelt, werden die oberen vier Beschriftungen des Analyseergebnisses automatisch als Tags ausgegeben.

Das fertige Produkt sieht so aus.

Der Grund, warum ich mich dazu entschlossen habe

Ich erstelle einen Webdienst namens "is your sky", einen SNS, der den Himmel teilt, den ich genommen habe. https://isyoursky-web.herokuapp.com/

Da der Himmel bis zuletzt der Hauptdienst ist, möchte ich, dass Benutzer ** Bilder posten, die den Himmel zeigen **! Ich sehe oft die Funktion, die das Posten radikaler Bilder verhindert, aber der Zweck ist etwas anders. Dieses Mal mussten wir als Richtlinie ** "Benutzer auffordern, leere Bilder zu posten" **. Sobald das Bild zum Zeitpunkt der Vorschau auf dem Veröffentlichungsbildschirm nicht leer ist, habe ich darüber nachgedacht, eine Warnung auszugeben, damit der Benutzer es freiwillig bemerkt. Das ist die Funktion von 1.

Darüber hinaus verfügt der Posting-Bildschirm über eine Tag-Funktion. Es wäre jedoch praktisch, wenn Tags, die mit den Fotos übereinstimmen, automatisch hinzugefügt würden! Ich habe auch die Funktion 2 erstellt. __ * Wie ich jedoch nach der Implementierung dieser Funktion herausgefunden habe, fungiert der Text auf dem Etikett nicht sehr stark als Tag. Wörter wie "Himmel" und "Rot" kommen relativ häufig heraus, daher ist es als Tag nicht sehr sinnvoll ... Vorerst werde ich es als Memorandum belassen, aber es ist eine Richtlinie, es nicht in meine Webanwendung aufzunehmen. __ __

Was ist die Google Cloud Vision-API?

Es ist einer der Dienste von Vision AI, einem Bildanalysedienst, der maschinelles Lernen von Google nutzt.

Die Google Cloud Vision-API bietet ein leistungsstarkes vorab geschultes Modell für maschinelles Lernen über die REST-API und die RPC-API. Durch das Zuweisen von Beschriftungen zu Bildern können Sie Bilder schnell in Millionen vordefinierter Kategorien klassifizieren. Erkennt Objekte und Gesichter, liest gedruckten und handgeschriebenen Text und erstellt nützliche Metadaten im Bildkatalog

• Zitiert von der offiziellen Website

Zusätzlich zu Google bieten IBM, AWS, Window usw. solche Bildanalyse-APIs an. Google verfügt über eine hohe Genauigkeit der Objektextraktions- und Beschriftungsfunktionen Ich habe es gewählt, weil ich dachte, es würde am besten zu dem passen, was ich diesmal erreichen wollte. Die Tatsache, dass ich ursprünglich die Google Cloud Platform verwendet habe, ist ebenfalls ein wichtiger Faktor.

Referenz) Vergleich der Bildanalyse-API-Dienste Googles Bilderkennungs-API ist die stärkste! !! Gründliches Vergleichsergebnis der Bilderkennungs-API

Annahme

Melden Sie sich mit Ihrem Google-Konto bei Google Cloud Platform an und erstellen Sie ein Projekt. Sie haben bereits die JSON-Datei für den Dienstkontoschlüssel erhalten. Bitte beziehen Sie sich auf verschiedene Referenzseiten für diesen Bereich. Referenz) Lassen Sie uns Bilder mit der Google Cloud Vision-API analysieren [Einführung] Einführung der Google Cloud Vision-API in Rails zur einfachen Erkennung radikaler Bilder

Umgebung

Normalerweise erstelle ich Container mit Docker für Mac und entwickle Rails.

ruby 2.4.5
Ruby on rails 5.0.7.2

Vorbereitung

Installieren Sie gem, um die Google Cloud Vision-API zu verwenden

Gemfile

gem 'google-cloud-vision'

Vorerst Bundle installieren

terminal

bundle install

• Ab Oktober 2020 sind die installierten Verse wie folgt. Dieses Mal werde ich in dieser 1.0.0-Schreibweise schreiben.

Gemfile.lock

google-cloud-vision (1.0.0)

• Google-Cloud-Vision scheint mit der Version 1.0.0 erheblich aktualisiert worden zu sein. Es gibt einige Teile, die sich von der vorherigen Version unterscheiden, also als Referenz. Details sind im Dokument aufgeführt. Weitere Informationen finden Sie unter hier.

Wie zu implementieren

In diesem Fall schreibe ich es in den jQuery-Code, der zum Zeitpunkt der Bildvorschau ausgelöst wird. Nachdem der Benutzer ein Bild ausgewählt hat, ist der Ablauf wie folgt.

1. jQuery wird ausgelöst
2. Senden Sie das vom Benutzer hochgeladene Bild per asynchroner Kommunikation (Ajax) an den Controller.
3. Verknüpfen Sie die Vision-API im Controller und legen Sie verschiedene Informationen in Instanzvariablen fest
4. Verwenden Sie jBuilder, um Instanzvariablen in ein Array zu konvertieren und an die jQuery-Seite zurückzugeben.
5. Auf der jQuery-Seite verarbeiten und auf dem Bildschirm anzeigen

Es ist ein wenig verwirrend, wenn es um Charaktere geht, aber es sind hauptsächlich die js-Datei und der Controller, die es verarbeiten. Wir werden uns auf die Verarbeitung in diesem Bereich konzentrieren.

Code

View Erstens ist der Ansichtscode. Ein allgemeines Formular mit Code für die Bildvorschau. Es wurde eine Span-Klasse mit der ID "image_isnot_sky" am unteren Rand der "Bildvorschau" -Klasse hinzugefügt. Wenn festgestellt wird, dass das Bild nicht leer ist, wird dieser Teil ausgeblendet und als Zeichen auf dem Bildschirm angezeigt.

Für die Tag-Funktion wird tag-it verwendet. Referenz) tag-it

ruby:_form.html.slim

= form_with model: post, local: true do |f|
:
(Unterlassung)
  .form-group
    = f.label :image, "Bild"
    = 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
        |Lösche Bild
    - else
      = f.hidden_field :avatar_cache
    span[id="image_isnot_sky" class="hidden"]
      |Es darf kein leeres Bild sein. Bitte poste ein leeres Foto


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

javascript(jQuery)

Wie wir bereits gesehen haben, wird jQuery ausgelöst, wenn die Datei in das Dateifeld der Ansicht geladen wird. Die asynchrone Kommunikation wird im Teil "$ .ajax" ausgeführt. Wenn dies erfolgreich ist, wird "erledigt" eingegeben. Wenn dies fehlschlägt, wird "fehlgeschlagen" eingegeben. Geben Sie "Controller- und Methodenname" in die URL und "POST" in den Typ ein und geben Sie die Daten, die Sie diesmal kommunizieren möchten (in diesem Fall formData), in Daten ein.

Ich habe die Teile von "processData: false" und "contentType: false" nicht eingeholt, aber wenn ich sie entferne, werden die Daten verarbeitet und gesendet, sodass sie nicht richtig gelesen werden können. .. (Ich habe hier nicht geschrieben und eine Weile einen Fehler bekommen ...)

post.js

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

      reader.onload = function (e) {
        //Öffnen Sie die hochgeladene Datei mit formData
        var formData = new FormData();
        formData.append("image_cache", input.files[0]);
        //Ajax-Kommunikationsverarbeitung
        $.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){
             //Warnungen anzeigen
             $('#image_isnot_sky').removeClass('hidden');
             //Tag löschen
             $("#post-tags").tagit("removeAll");
           }else{
             //Warnungen ausblenden, wenn sie bereits angezeigt wurden
             $('#image_isnot_sky').addClass('hidden');
             //Tag löschen
             $("#post-tags").tagit("removeAll");

             //Erstellen Sie ein Tag basierend auf dem Label
             $.each(tag_list, function(index, tag){
               $('#post-tags').tagit('createTag', tag);
             })
           }

        }).fail(function(){
          //Geben Sie im Fehlerfall eine Warnung aus.
          alert('Fehler beim Laden des Bildes');
        })
        //Bildvorschau durchführen
        $('#image_img_prev').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
    }
  }
:

Routen sind auch für die asynchrone Kommunikation unerlässlich. Ich werde es hinzufügen.

route/.rb

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

JSON (mit jbuilder)

Die in done verwendete Variable data enthält die vom Controller mit jBuilder im json-Format zurückgegebenen Daten. jBuilder kann verwendet werden, indem controller name.json.jbuilder im selben Ansichtsordner erstellt wird. Siehe unten für Details Referenz) 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

Schauen wir uns von hier aus genauer um. Der erste ist die Verknüpfung mit der Vision-API. Dieses Mal verwenden wir die Funktion ** "Label Detection" ** in der API.

Geben Sie für die Umgebungsvariable den Dateipfad der JSON-Datei des eingangs genannten Dienstkontos an.

• Die Art und Weise, die Konfiguration zu schreiben, wurde von 1.0.0 wie folgt geändert.

post_controller.rb

:
  def check_cache_image
    require "google/cloud/vision"

    #Vision API-Einstellungen
    image_annotator  = Google::Cloud::Vision.image_annotator do | config |
      config.credentials = ENV["GOOGLE_APPLICATION_CREDENTIALS"]
    end
:

Holen Sie sich den von formData bereitgestellten image_cache und übergeben Sie ihn an die Vision-API. Der Code hier basiert fast so wie er ist auf dem offiziellen Code. Ich erhalte den Markennamen mit label.description.

post_controller.rb

:
    #Cache-Informationen abrufen
    image = params[:image_cache].path
    #Übergeben Sie den Cache als Antwort an die Vision-API.
    response = image_annotator.label_detection image: image

    #Beschriftung in ein Array einfügen
    label_list = []
    response.responses.each do |res|
      res.label_annotations.each do |label|
        label_list.push(label.description)
      end
    end
:

Danach werden verschiedene notwendige Informationen basierend auf dem erkannten Etikett erfasst.

1. Wenn das Etikett "Sky" enthält, wird es als "leeres Foto" bewertet.
2. Holen Sie sich die Top 4 Elemente des Etiketts und zeigen Sie sie als Tags an

post_controller.rb

:
    #1.Stellen Sie fest, ob es sich um ein leeres Foto handelt
    if label_list.include?("Sky")
      @image_flag = false
    else
      @image_flag = true
    end

    #2.Bringen Sie die ersten vier Etiketten als Tags
    if label_list.length >= 4
      @tag_list = label_list[0..3]
    else
      @tag_list = label_list
    end
:

Das letzte ist die JSON-Verarbeitung.

post_controller.rb

:
    #Bereit zum Senden an jBuilder
    @data = { tag_list: @tag_list, image_flag: @image_flag }
    
    respond_to do |format|
      format.html
      format.json
    end
  end
:

Mit dem oben Gesagten ist es zum Zeitpunkt der Bildvorschau möglich, "festzustellen, ob es sich um ein leeres Bild handelt" und "ein Tag automatisch hinzuzufügen". Es mag unmöglich sein, aber ich konnte es vorerst umsetzen ... Ich würde es begrüßen, wenn Sie auf Fehler hinweisen könnten.

Am Ende

Ich konnte eine einfache Bildanalyse mithilfe der Google Cloud Vision-API implementieren. Ich habe im Test zufällig einige Fotos gesendet, aber wenn es überhaupt einen kleinen Himmel gibt, wird "Himmel" richtig beschriftet. Es ist zu erstaunlich ...! Es ist riesig, dass Sie dies kostenlos nutzen können. (Wenn Sie eine bestimmte Nummer wählen, wird Ihnen eine Gebühr berechnet ...) Die Implementierung war einfacher als erwartet, daher möchte ich auch andere Funktionen verwenden :)

Hilfreiche Seite

Vielen Dank! Verwenden Sie die Google Cloud Vision-API, um den Text aus dem Bild der Lebensmittelverpackung asynchron zu lesen und das Formular auszufüllen Rails: So steuern Sie die Controller-Aktion mit jquery und geben Variablen an jquery zurück Einführung der Google Cloud Vision-API in Rails zur einfachen Erkennung radikaler Bilder