Esta página foi traduzida pela API Cloud Translation.

Detecte objetos em imagens para criar uma pesquisa visual de produtos com o Kit de ML: Android

1. Antes de começar

Você já viu a demonstração do Google Lens, em que você pode apontar a câmera do smartphone para um objeto e descobrir onde comprar on-line? Se você quiser aprender a adicionar o mesmo recurso ao seu app, este codelab é para você. Ele faz parte de um programa de cursos que ensina como criar um recurso de pesquisa de imagens de produtos em um app para dispositivos móveis.

Neste codelab, você vai aprender a primeira etapa para criar um recurso de pesquisa de imagens de produto: como detectar objetos em imagens e permitir que o usuário escolha os objetos que quer pesquisar. Você usará a detecção e rastreamento de objetos do Kit de ML para criar esse recurso.

Saiba mais sobre as etapas restantes, incluindo como criar um back-end de pesquisa de produtos com a Pesquisa de produtos da API Vision, no programa de aprendizado.

O que você vai criar

Neste codelab, você criará um app Android com o Kit de ML. Seu app vai usar a API ML Kit Object Detection and Tracking para detectar objetos em uma determinada imagem. Em seguida, o usuário selecionará um objeto que deseja pesquisar em nosso banco de dados de produtos.
No final, você vai encontrar algo parecido com a imagem à direita.

O que você vai aprender

Como integrar o SDK do kit de ML ao seu aplicativo Android
API ML Kit Object Detection and Tracking

O que é necessário

Uma versão recente do Android Studio (v4.1.2+)
Emulador do Android Studio ou um dispositivo Android físico
Código de amostra
Conhecimento básico de desenvolvimento para Android em Kotlin.

Este codelab é focado no Kit de ML. Outros conceitos e blocos de código não são estudados e são fornecidos para que você simplesmente os copie e cole.

2. Começar a configuração

Fazer o download do código

Clique no link abaixo para fazer o download de todo o código para este codelab:

Descompacte o arquivo ZIP transferido por download. Isso vai descompactar uma pasta raiz (odml-pathways-main) com todos os recursos necessários. Para este codelab, você precisará apenas das origens no subdiretório product-search/codelab1/android.

O subdiretório de detecção de objetos no repositório mlkit-android contém dois diretórios:

starter: código inicial que você vai usar para este codelab.
final: código concluído do app de exemplo finalizado.

3. Adicionar a API ML Kit Object Detection and Tracking ao projeto

Importar o app para o Android Studio

Primeiro, importe o app starter para o Android Studio.

Acesse o Android Studio, selecione Import Project (Gradle, Eclipse ADT etc.) e escolha a pasta starter no código-fonte que você baixou anteriormente.

Adicionar as dependências para detecção e rastreamento de objetos do Kit de ML

As dependências do Kit de ML permitem que você integre o SDK ODT do kit de ML ao seu app.

Acesse o arquivo app/build.gradle do projeto e confirme se a dependência já está lá:

build.gradle

dependencies {
  // ...
  implementation 'com.google.mlkit:object-detection:16.2.4'
}

Sincronizar seu projeto com arquivos do Gradle

Para garantir que todas as dependências estejam disponíveis para o app, sincronize o projeto com os arquivos do Gradle neste momento.

Selecione Sync Project with Gradle Files ( ) na barra de ferramentas do Android Studio.

Se esse botão estiver desativado, importe apenas o starter/app/build.gradle, não o repositório inteiro.

4. Executar o app inicial

Agora que você importou o projeto para o Android Studio e adicionou as dependências para detecção e rastreamento de objetos do kit de ML, já pode executar o app pela primeira vez.

Conecte o dispositivo Android via USB ao host ou Inicie o emulador do Android Studio e clique em Run ( ) na barra de ferramentas do Android Studio.

Executar e conhecer o app

O app será iniciado no dispositivo Android. Ela tem um código boilerplate para capturar uma foto ou selecionar uma imagem predefinida e alimentá-la em um pipeline de detecção e rastreamento de objetos que você vai criar neste codelab. Explore o app um pouco antes de escrever o código:

Primeiro, há um Botão ( ) na parte de baixo para

iniciar o app de câmera integrado ao dispositivo/emulador
tirar uma foto dentro do app de câmera
receber a imagem capturada no app inicial
mostrar a imagem

Confira o recurso "Tirar foto" . Siga as instruções para tirar uma foto, aceitar a foto e observar que ela é exibida no app inicial.

Em segundo lugar, há três imagens predefinidas para você escolher. Você poderá usar essas imagens mais tarde para testar o código de detecção de objetos se estiver executando em um emulador do Android.

Selecione uma das três imagens predefinidas.
Observe que a imagem aparece em uma visualização maior.

5. Adicionar detecção de objetos no dispositivo

Nesta etapa, você vai adicionar a funcionalidade ao app inicial para detectar objetos em imagens. Como você viu na etapa anterior, o app inicial contém código boilerplate para tirar fotos com o app de câmera do dispositivo. Há também três imagens predefinidas no app que você pode usar para testar a detecção de objetos, se estiver executando o codelab em um Android Emulator.

Quando você seleciona uma imagem, seja das imagens predefinidas ou tirando uma foto com o app de câmera, o código boilerplate decodifica essa imagem em uma instância Bitmap, a mostra na tela e chama o método runObjectDetection com a imagem.

Nesta etapa, você vai adicionar código ao método runObjectDetection para detectar objetos.

Configurar e executar a detecção de objetos no dispositivo em uma imagem

Há apenas três etapas simples com três APIs para configurar a ODT do Kit de ML

preparar uma imagem: InputImage
crie um objeto detector: ObjectDetection.getClient(options).
Conecte os dois objetos acima: process(image)

É possível fazer isso dentro da função **runObjectDetection(bitmap: Bitmap)**no arquivo MainActivity.kt.

/**
 * ML Kit Object Detection Function
 */
private fun runObjectDetection(bitmap: Bitmap) {
}

No momento, a função está vazia. Avance para as etapas a seguir para integrar a ODT do Kit de ML. Durante o processo, o Android Studio vai solicitar que você adicione as importações necessárias

com.google.mlkit.vision.common.InputImage
com.google.mlkit.vision.objects.ObjectDetection
com.google.mlkit.vision.objects.defaults.ObjectDetectorOptions

Etapa 1: criar uma InputImage

O Kit de ML fornece uma API simples para criar um InputImage usando um Bitmap. Em seguida, é possível alimentar um InputImage nas APIs do kit de ML.

// Step 1: create ML Kit's InputImage object
val image = InputImage.fromBitmap(bitmap, 0)

Adicione o código acima à parte superior do runObjectDetection(bitmap:Bitmap).

Etapa 2: criar uma instância de detector

O kit de ML segue o padrão de design do builder. Você passaria a configuração para o builder e depois adquiriria um detector dele. Há três opções para configurar (a que está em negrito é usada no codelab):

modo detector (imagem única ou stream)
o modo de detecção (detecção de um ou múltiplos objetos)
modo de classificação (ativado ou desativado)

Este codelab é para uma imagem - detecção de vários objetos e na classificação, vamos fazer isso:

// Step 2: acquire detector object
val options = ObjectDetectorOptions.Builder()
   .setDetectorMode(ObjectDetectorOptions.SINGLE_IMAGE_MODE)
   .enableMultipleObjects()
   .enableClassification()
   .build()
val objectDetector = ObjectDetection.getClient(options)

Etapa 3: enviar imagens do feed para o detector

A detecção e classificação de objetos é um processamento assíncrono:

Você envia uma imagem para o detector (via process()).
funciona muito bem nele,
detector relata o resultado para você por meio de um callback

O código abaixo faz exatamente isso (copie e anexe o código ao código já existente em fun runObjectDetection(bitmap:Bitmap)):).

// Step 3: feed given image to detector and setup callback
objectDetector.process(image)
   .addOnSuccessListener {
       // Task completed successfully
        debugPrint(it)
   }
   .addOnFailureListener {
       // Task failed with an exception
       Log.e(TAG, it.message.toString())
   }

Após a conclusão, o detector notifica você com

Número total de objetos detectados
Cada objeto detectado é descrito com

trackingId: um número inteiro que você usa para rastrear entre frames (NÃO é usado neste codelab).
boundingBox: caixa delimitadora do objeto
labels: lista de rótulos do objeto detectado (somente quando a classificação está ativada)
index (receba o índice deste rótulo)
text (Use o texto desse rótulo, incluindo "Artigos de moda", "Comida", "Artigos para casa", "Local", "Planta")
confidence (um ponto flutuante entre 0,0 e 1, com 1,0 significa 100%)

Você provavelmente percebeu que o código imprime os resultados detectados no Logcat com debugPrint(). Adicione-o à classe MainActivity:

private fun debugPrint(detectedObjects: List<DetectedObject>) {
   detectedObjects.forEachIndexed { index, detectedObject ->
       val box = detectedObject.boundingBox

       Log.d(TAG, "Detected object: $index")
       Log.d(TAG, " trackingId: ${detectedObject.trackingId}")
       Log.d(TAG, " boundingBox: (${box.left}, ${box.top}) - (${box.right},${box.bottom})")
       detectedObject.labels.forEach {
           Log.d(TAG, " categories: ${it.text}")
           Log.d(TAG, " confidence: ${it.confidence}")
       }
   }
}

Agora está tudo pronto para aceitar imagens para detecção.

Para executar o codelab, clique em Run ( ) na barra de ferramentas do Android Studio. Selecione uma imagem predefinida ou tire uma foto e olhe para a janela do Logcat( ) no ambiente de desenvolvimento integrado. Você verá algo como:

D/MLKit Object Detection: Detected object: 0
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (481, 2021) - (2426,3376)
D/MLKit Object Detection:  categories: Fashion good
D/MLKit Object Detection:  confidence: 0.90234375
D/MLKit Object Detection: Detected object: 1
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (2639, 2633) - (3058,3577)
D/MLKit Object Detection: Detected object: 2
D/MLKit Object Detection:  trackingId: null
D/MLKit Object Detection:  boundingBox: (3, 1816) - (615,2597)
D/MLKit Object Detection:  categories: Home good
D/MLKit Object Detection:  confidence: 0.75390625

Isso significa que o detector detectou três objetos:

categorias são Moda boa e Boa casa.
não há categoria retornada para a segunda porque se trata de uma classe desconhecida.
sem trackingId (porque esse é o modo de detecção de imagem única)
posição dentro do retângulo boundingBox (por exemplo, (481, 2021) - (2426, 3376))
detector de computação em nuvem está bastante confiante de que o primeiro é um item Bem elegante (90%) (é um vestido)

Tecnicamente, isso é tudo o que você precisa para fazer com que a detecção de objetos do kit de ML funcione. Você já tem tudo isso. Parabéns!

Sim, no lado da interface, você ainda está no estágio em que começou, mas é possível usar os resultados detectados na interface, como desenhar a caixa delimitadora para criar uma experiência melhor. A próxima etapa é visualizar os resultados detectados.

6. O pós-processamento dos resultados da detecção

Nas etapas anteriores, você imprimiu o resultado detectado no logcat: simples e rápido.

Nesta seção, você vai usar o resultado na imagem:

desenhar a caixa delimitadora na imagem
desenhe o nome da categoria e a confiança dentro da caixa delimitadora

Noções básicas sobre os utilitários de visualização

Há um código boilerplate no codelab para ajudar você a visualizar o resultado da detecção. Use estes utilitários para simplificar o código de visualização:

class ImageClickableView Esta é uma classe de visualização de imagem que oferece alguns utilitários convenientes para visualização e interação com o resultado da detecção.
fun drawDetectionResults(results: List<DetectedObject>) Esse método desenha círculos brancos no centro de cada objeto detectado.
fun setOnObjectClickListener(listener: ((objectImage: Bitmap) -> Unit)) Esse é um callback para receber a imagem cortada que contém apenas o objeto em que o usuário tocou. Você vai enviar essa imagem cortada para o back-end de pesquisa de imagens em um codelab posterior para ter um resultado visualmente semelhante. Neste codelab, você ainda não vai usar esse método.

Mostrar o resultado da detecção do Kit de ML

Use os utilitários de visualização para mostrar o resultado da detecção de objetos do kit de ML na parte de cima da imagem de entrada.

Vá até o local onde você chama debugPrint() e adicione o seguinte snippet de código abaixo dele:

runOnUiThread {
    viewBinding.ivPreview.drawDetectionResults(it)
}

Executar

Agora clique em Run ( ) na barra de ferramentas do Android Studio.

Quando o app for carregado, pressione o botão com o ícone da câmera, aponte a câmera para um objeto, tire uma foto, aceite a foto (no app Câmera) ou toque facilmente em qualquer imagem predefinida. Você verá o resultado da detecção. pressione o botão novamente ou selecione outra imagem para repetir algumas vezes e teste a ODT mais recente do Kit de ML.

7. Parabéns!

Você usou o Kit de ML para adicionar recursos de detecção de objetos ao seu app:

3 etapas com 3 APIs
Criar imagem de entrada
Criar detector
Enviar imagem ao detector

Isso é tudo que você precisa para começar a usar!

O que vimos

Como adicionar a detecção e o rastreamento de objetos do kit de ML ao seu app Android
Como usar a detecção e o rastreamento de objetos no dispositivo no Kit de ML para detectar objetos em imagens

Próximas etapas

Use este codelab sobre como enviar o objeto detectado para um back-end de pesquisa de produto e mostrar os resultados da pesquisa.
Saiba mais com a ODT do Kit de ML, com mais imagens e vídeos ao vivo para detecção e a acurácia e o desempenho da classificação
Confira o programa de aprendizado Avance ainda mais com a detecção de objetos para aprender a treinar um modelo personalizado
Leia sobre as recomendações do Material Design para a detecção de objetos live-camera e static-image.
Aplicar a ODT do kit de ML no seu próprio app Android

Saiba mais

https://developers.google.com/ml-kit/vision/object-detection