¿Cómo usar las respuestas inteligentes de Firebase ML Kit en Android?

Hemos visto el uso de chatbots en Android para responder a las preguntas más comunes de los usuarios. En este artículo, veremos la implementación de las respuestas inteligentes de Firebase ML Kit en Android . Las respuestas inteligentes de Firebase ML Kit se utilizan para proporcionar respuestas inteligentes a las preguntas realizadas por los usuarios que usan Firebase ML Kit. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que crearemos una interfaz similar a un chat en la que el usuario publicará su consulta en el cuadro de chat y, de acuerdo con la consulta del usuario, podremos ver el mensaje de Firebase ML Kit.

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: conecta tu aplicación a Firebase

Después de crear un nuevo proyecto en Android Studio, conecte su aplicación a Firebase. Para conectar su aplicación a firebase. Navegue a Herramientas en la barra superior. Después de eso, haga clic en Firebase. Se abrirá una nueva ventana en el lado derecho. Dentro de esa ventana, haga clic en Firebase ML y luego haga clic en Usar el kit Firebase ML en Android. Puede ver la opción debajo de la captura de pantalla.  

Conectarse a Firebase

Paso 3: Agregar dependencia para la traducción de idiomas al archivo build.gradle

Gradle Scripts > build.gradle(Módulo:aplicación)

// dependencia para firebase core.

implementación’com.google.firebase:firebase-core:15.0.2′

// Dependencia de Firebase ML

implementación ‘com.google.firebase:firebase-ml-vision:24.0.3’ 

// dependencia para respuesta inteligente

implementación ‘com.google.firebase:firebase-ml-natural-language-smart-reply-model:20.0.7’

Dentro del mismo archivo Gradle. Agregue el siguiente código en la sección de Android. 

aaptOptions {

       noComprimir «tflite»

  }

Ahora sincronice su proyecto y avancemos hacia la implementación de las respuestas inteligentes de Firebase ML Kit.

Paso 4: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--recycler view for displaying our chat messages-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVMessage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/idLLmessage" />
  
    <LinearLayout
        android:id="@+id/idLLmessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:weightSum="5">
  
        <!--edit text for entering user message-->
        <EditText
            android:id="@+id/idEdtUserMsg"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_weight="4.5" />
  
        <!--fab for sending message-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idBtnFAB"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="5dp"
            android:layout_weight="0.5"
            android:src="@drawable/ic_baseline_send_24"
            app:backgroundTint="@color/purple_200"
            app:fabSize="mini"
            app:tint="@color/white" />
    </LinearLayout>
      
</RelativeLayout>

Paso 5: Crear una clase modal para almacenar nuestros datos

Como estamos mostrando todos nuestros datos en nuestro RecyclerView . Entonces tenemos que almacenar estos datos en una clase modal. Para crear una clase modal, vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre ChatMsgModal y agréguele el siguiente código.

public class ChatMsgModal {
    // variable for our string and int for a type of message.
    // type is to use weather the message in our recycler 
    // view is from user or from FIrebase ML kit.
    private String message;
    private int type;
  
    public String getMessage() {
        return message;
    }
  
    public void setMessage(String message) {
        this.message = message;
    }
  
    public int getType() {
        return type;
    }
  
    public void setType(int type) {
        this.type = type;
    }
  
    public ChatMsgModal(String message, int type) {
        this.message = message;
        this.type = type;
    }
}

Paso 6: crear un archivo de diseño para cada elemento del mensaje 

Navegue a la aplicación> res> diseño> Haga clic derecho en él> Nuevo> archivo de recursos de diseño y asígnele el nombre msg_rv_item y agregue el código a continuación. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/idCVMessage"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="8dp"
    app:cardElevation="5dp">
  
    <!--text view for displaying our message-->
    <TextView
        android:id="@+id/idTVMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:padding="5dp"
        android:text="Message"
        android:textColor="@color/black" />
      
</androidx.cardview.widget.CardView>

Paso 7: crear una clase de adaptador para mostrar estos datos

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y asígnele el nombre ChatRVAdapter y agréguele el siguiente código.

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.cardview.widget.CardView;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.ArrayList;
  
public class ChatRVAdapter extends RecyclerView.Adapter<ChatRVAdapter.ViewHolder> {
      
    // variable for context and array list.
    private Context context;
    private ArrayList<ChatMsgModal> chatMsgModalArrayList;
  
    // create a constructor for our context and array list.
    public ChatRVAdapter(Context context, ArrayList<ChatMsgModal> chatMsgModalArrayList) {
        this.context = context;
        this.chatMsgModalArrayList = chatMsgModalArrayList;
    }
  
    @NonNull
    @Override
    public ChatRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inside on create view holder method we are inflating our layout file which we created.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.msg_rv_item, parent, false);
        return new ChatRVAdapter.ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull ChatRVAdapter.ViewHolder holder, int position) {
        ChatMsgModal modal = chatMsgModalArrayList.get(position);
        if (modal.getType() == 0) {
            // when we get type as 0 then the
            // message will be of user type.
            holder.msgTV.setText(modal.getMessage());
        } else {
            // other than this condition we will display 
            // the text background color and text color.
            holder.msgTV.setText(modal.getMessage());
            holder.msgCV.setCardBackgroundColor(context.getResources().getColor(R.color.purple_200));
            holder.msgTV.setTextColor(context.getResources().getColor(R.color.white));
        }
    }
  
    @Override
    public int getItemCount() {
        // on below line returning
        // the size of our array list.
        return chatMsgModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our 
        // card view and text view.
        private TextView msgTV;
        private CardView msgCV;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing variables for our text view and card view.
            msgTV = itemView.findViewById(R.id.idTVMessage);
            msgCV = itemView.findViewById(R.id.idCVMessage);
  
        }
    }
}

Paso 8: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;
import android.widget.Toast;
  
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.firebase.ml.naturallanguage.FirebaseNaturalLanguage;
import com.google.firebase.ml.naturallanguage.smartreply.FirebaseSmartReply;
import com.google.firebase.ml.naturallanguage.smartreply.FirebaseTextMessage;
import com.google.firebase.ml.naturallanguage.smartreply.SmartReplySuggestionResult;
  
import java.util.ArrayList;
import java.util.List;
  
public class MainActivity extends AppCompatActivity {
    // on below line we are creating 
    // a list with Firebase Text Message.
    List<FirebaseTextMessage> messageList;
      
    // on below line we are creating variables for 
    // our edittext, recycler view, floating action button,
    // array list for storing our message
    // and creating a variable for our adapter class.
    private EditText userMsgEdt;
    private RecyclerView msgRV;
    private FloatingActionButton sendFAB;
    private ArrayList<ChatMsgModal> chatMsgModalArrayList;
    private ChatRVAdapter adapter;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
         
        // initializing all our variables.
        userMsgEdt = findViewById(R.id.idEdtUserMsg);
        msgRV = findViewById(R.id.idRVMessage);
        sendFAB = findViewById(R.id.idBtnFAB);
          
        // initializing our array list.
        messageList = new ArrayList<>();
        chatMsgModalArrayList = new ArrayList<>();
         
        // initializing our adapter.
        adapter = new ChatRVAdapter(MainActivity.this, chatMsgModalArrayList);
         
        // layout manager for our recycler view.
        LinearLayoutManager manager = new LinearLayoutManager(MainActivity.this);
         
        // setting layout manager
        // for our recycler view.
        msgRV.setLayoutManager(manager);
          
        // setting adapter to our recycler view.
        msgRV.setAdapter(adapter);
  
        // adding on click listener for our floating action button
        sendFAB.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // validating if the edit text is empty or not.
                if (TextUtils.isEmpty(userMsgEdt.getText().toString())) {
                    Toast.makeText(MainActivity.this, "Please enter your message..", Toast.LENGTH_SHORT).show();
                    return;
                }
                // calling a method to send our message
                // and getting the response.
                sendMessage();
                userMsgEdt.setText("");
            }
        });
    }
  
    private void sendMessage() {
        // on below line we are creating a variable for our Firebase text message
        // and passing our user input message to it along with time.
        FirebaseTextMessage message = FirebaseTextMessage.createForRemoteUser(
                userMsgEdt.getText().toString(), // Content of the message
                System.currentTimeMillis(),      // Time at which the message was sent
                "uid"                            // This has to be unique for every other person involved 
                                                 // in the chat who is not your user
        );
        // on below line we are adding
        // our message to our message list.
        messageList.add(message);
          
        // on below line we are adding our edit text field
        // value to our array list and setting type as 0.
        // as we are using type as 0 for our user message 
        // and 1 for our message from Firebase.
        chatMsgModalArrayList.add(new ChatMsgModal(userMsgEdt.getText().toString(), 0));
          
        // on below line we are calling a method 
        // to notify data change in adapter.
        adapter.notifyDataSetChanged();
          
        // on below line we are creating a variable for our Firebase
        // smart reply and getting instance of it.
        FirebaseSmartReply smartReply = FirebaseNaturalLanguage.getInstance().getSmartReply();
          
        // on below line we are calling a method to suggest reply for our user message.
        smartReply.suggestReplies(messageList).addOnSuccessListener(new OnSuccessListener<SmartReplySuggestionResult>() {
            @Override
            public void onSuccess(SmartReplySuggestionResult smartReplySuggestionResult) {
                // inside on success listener method we are checking if the language is not supported.
                if (smartReplySuggestionResult.getStatus() == SmartReplySuggestionResult.STATUS_NOT_SUPPORTED_LANGUAGE) {
                    // displaying toast message if the language is not supported.
                    Toast.makeText(MainActivity.this, "Language not supported..", Toast.LENGTH_SHORT).show();
                } else if (smartReplySuggestionResult.getStatus() == SmartReplySuggestionResult.STATUS_SUCCESS) {
                    // if we get a successful status message.
                    // we are adding that message  to our 
                    // array list and notifying our adapter
                    // that data has been changed.
                    chatMsgModalArrayList.add(new ChatMsgModal(smartReplySuggestionResult.getSuggestions().get(0).getText(), 1));
                    adapter.notifyDataSetChanged();
                }
            }
        }).addOnFailureListener(new OnFailureListener() {
            @Override
            public void onFailure(@NonNull Exception e) {
                // inside on failure method we are displaying a toast message
                Toast.makeText(MainActivity.this, "Fail to get data.." + e.getMessage(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción:

Nota : Obtendrá una cierta demora en la respuesta de Firebase por primera vez. Además, la respuesta de Firebase no será precisa, ya que esta respuesta se envía desde el modelo del kit Firebase ML.