Flutter: riconoscere la lingua e tradurre un testo - 2/2

Nella prima parte dell'articolo abbiamo visto come identificare con una certa probabilità la lingua di un testo digitato grazie al Machine Leaning Kit di Google. Ora proveremo ad utilizzare questa informazione per tradurre il testo in un'altra lingua.

Riprendiamo il progetto in Flutter

Da terminale, aggiungiamo un package che permette di utilizzare le API dell'ML Kit per la traduzione del testo:


 flutter pub add google_mlkit_translation

Nella cartella helpers modifichiamo il mlkit.dart aggiungendo il codice necessario per scaricare i modelli dei linguaggi che ci interessano (necessari per la traduzione) la funzione che si occupa della traduzione vera e propria:

import 'package:google_mlkit_translation/google_mlkit_translation.dart';

class MLHelper {
  final translationManager = OnDeviceTranslatorModelManager();
....

  Future<bool> downloadLanguage(String languageCode) async {
    return await translationManager.downloadModel(languageCode);
  }

  Future<String> translateLanguage(String text, bool toItalian) async {
    String result = "";

    final sourceLanguage =
        (toItalian) ? TranslateLanguage.english : TranslateLanguage.italian;
    final targetLanguage =
        (toItalian) ? TranslateLanguage.italian : TranslateLanguage.english;

    final languageTranslation = OnDeviceTranslator(
        sourceLanguage: sourceLanguage, targetLanguage: targetLanguage);
    result = await languageTranslation.translateText(text);

    return result;
  }

}


La funzione accetta in ingresso una testo e un valore boolean che indica la direzione di traduzione (per semplicità gestiremo solo traduzione dall'italiano all'inglese e viceversa, ma il codice è facilmente modificabile per includere anche altre lingue).

Nel file home_view.dart, modifichiamo la funzione analyzeText() per gestire la traduzione, in questo modo:


  void analyzeText() {
    if (textController.text.isEmpty) return;

    waiting = true;
    String textValue = textController.text;

    items.insert(
        0,
        ItemModel(
          text: textValue,
          type: "text",
        ));
    textController.clear();
    setState(() {});

    helper.identifyLanguage(textValue).then((result) {
      bool toItalian = false;
      bool translate = false;
      if (result.first.text == "it") {
        translate = true;
        toItalian = false;
      } else if (result.first.text == "en") {
        translate = true;
        toItalian = true;
      }
      List<String> text = [];
      for (LanguageModel language in result) {
        text.add(
            '${language.text.toUpperCase()} (${(language.confidence * 100).toStringAsFixed(1)}%)');
      }

      items.insert(
          0,
          ItemModel(
            text: text.join(","),
            type: "language",
          ));
      setState(() {});
      if (translate) {
        helper.translateLanguage(textValue, toItalian).then((result) {
          items.insert(
              0,
              ItemModel(
                text: result,
                type: "translation",
              ));
          setState(() {
            waiting = false;
          });
        });
      } else {
        setState(() {
          waiting = false;
        });
      }
    });
  }


Ora la funzione identifica la lingua e se è italiano determina la traduzione in inglese (e viceversa). Nel caso di altre lingue si limita a fare ciò che faceva prima.
 
Aggiungiamo tra le proprietà della classe _HomeState anche il riferimento all'helper e procediamo a caricare i modelli che ci interessano nella fase di inizializzazione (quello per la lingua italiana e quello per la lingua inglese) in modo da averli disponibili all'occorrenza:


class _HomeState extends State<Home> {
....
  MLHelper helper = MLHelper();

  @override
  void initState() {
    super.initState();
    helper.downloadLanguage('it');
    helper.downloadLanguage('en');
  }
...


Non ci resta che aggiornare il file bubble_widget.dart per assegnare un diverso colore al testo tradotto:


...
              color: (type == "text")
                  ? Colors.blueAccent
                  : ((type == "translation") ? Colors.orange : Colors.teal),
...


Salvo errori, dovreste avere un risultato simile a questo:



Fine seconda parte

Anche la seconda parte del progetto è terminato e l'applicazione di esempio è completa.
Come per gli articoli precedenti potete trovare questo codice tra le mie repo GitHub: https://github.com/luigimicco/flutter_translate.

Commenti