Cómo traducir texto desde Presentaciones de Google

En esta guía de inicio rápido, se crea un complemento del Editor de Presentaciones de Google que traduce el texto seleccionado en una presentación.

Objetivos

  • Configurar la secuencia de comandos
  • Ejecutar la secuencia de comandos

Requisitos previos

Para usar esta muestra, debes cumplir con los siguientes requisitos previos:

  • Una Cuenta de Google (es posible que las cuentas de Google Workspace requieran la aprobación del administrador)
  • Un navegador web con acceso a Internet

Configura la secuencia de comandos

  1. Crea una presentación de Presentaciones en slides.new.
  2. Haz clic en Extensiones > Apps Script.
  3. Haz clic en Proyecto sin título.
  4. Cambia el nombre del proyecto de Apps Script a Translate Slides y haz clic en Cambiar nombre.
  5. Junto al archivo Code.gs, haz clic en Más > Cambiar nombre. Asigna el nombre translate al archivo.
  6. Haz clic en Agregar un archivo > HTML. Asigna el nombre sidebar al archivo.

  7. Reemplaza el contenido de cada archivo por el siguiente código correspondiente y, luego, haz clic en Guardar Ícono de un botón de guardar.

    translate.gs

    slides/translate/translate.gs
    /**
 * @OnlyCurrentDoc Limits the script to only accessing the current presentation.
 */

/**
 * Create a open translate menu item.
 * @param {Event} event The open event.
 */
function onOpen(event) {
  SlidesApp.getUi()
    .createAddonMenu()
    .addItem("Open Translate", "showSidebar")
    .addToUi();
}

/**
 * Open the Add-on upon install.
 * @param {Event} event The install event.
 */
function onInstall(event) {
  onOpen(event);
}

/**
 * Opens a sidebar in the document containing the add-on's user interface.
 */
function showSidebar() {
  const ui =
    HtmlService.createHtmlOutputFromFile("sidebar").setTitle("Translate");
  SlidesApp.getUi().showSidebar(ui);
}

/**
 * Recursively gets child text elements a list of elements.
 * @param {PageElement[]} elements The elements to get text from.
 * @return {Text[]} An array of text elements.
 */
function getElementTexts(elements) {
  let texts = [];
  for (const element of elements) {
    switch (element.getPageElementType()) {
      case SlidesApp.PageElementType.GROUP:
        for (const child of element.asGroup().getChildren()) {
          texts = texts.concat(getElementTexts(child));
        }
        break;
      case SlidesApp.PageElementType.TABLE: {
        const table = element.asTable();
        for (let r = 0; r < table.getNumRows(); ++r) {
          for (let c = 0; c < table.getNumColumns(); ++c) {
            texts.push(table.getCell(r, c).getText());
          }
        }
        break;
      }
      case SlidesApp.PageElementType.SHAPE:
        texts.push(element.asShape().getText());
        break;
    }
  }
  return texts;
}

/**
 * Translates selected slide elements to the target language using Apps Script's Language service.
 *
 * @param {string} targetLanguage The two-letter short form for the target language. (ISO 639-1)
 * @return {number} The number of elements translated.
 */
function translateSelectedElements(targetLanguage) {
  // Get selected elements.
  const selection = SlidesApp.getActivePresentation().getSelection();
  const selectionType = selection.getSelectionType();
  let texts = [];
  switch (selectionType) {
    case SlidesApp.SelectionType.PAGE:
      for (const page of selection.getPageRange().getPages()) {
        texts = texts.concat(getElementTexts(page.getPageElements()));
      }
      break;
    case SlidesApp.SelectionType.PAGE_ELEMENT: {
      const pageElements = selection.getPageElementRange().getPageElements();
      texts = texts.concat(getElementTexts(pageElements));
      break;
    }
    case SlidesApp.SelectionType.TABLE_CELL:
      for (const cell of selection.getTableCellRange().getTableCells()) {
        texts.push(cell.getText());
      }
      break;
    case SlidesApp.SelectionType.TEXT:
      for (const element of selection.getPageElementRange().getPageElements()) {
        texts.push(element.asShape().getText());
      }
      break;
  }

  // Translate all elements in-place.
  for (const text of texts) {
    text.setText(
      LanguageApp.translate(text.asRenderedString(), "", targetLanguage),
    );
  }

  return texts.length;
}

    sidebar.html

    slides/translate/sidebar.html
    <html>
<head>
  <link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
  <style>
    .logo { vertical-align: middle; }
    ul { list-style-type: none; padding: 0; }
    h4 { margin: 0; }
  </style>
</head>
<body>
<form class="sidebar branding-below">
  <h4>Translate selected slides into:</h4>
  <ul id="languages"></ul>
  <div class="block" id="button-bar">
    <button class="blue" id="run-translation">Translate</button>
  </div>
  <h5 class="error" id="error"></h5>
</form>
<div class="sidebar bottom">
  <img alt="Add-on logo" class="logo"
       src="https://www.gstatic.com/images/branding/product/1x/translate_48dp.png" width="27" height="27">
  <span class="gray branding-text">Translate sample by Google</span>
</div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
  $(function() {
    // Add an input radio button for every language.
    const languages = {
      ar: 'Arabic',
      zh: 'Chinese',
      en: 'English',
      fr: 'French',
      de: 'German',
      hi: 'Hindi',
      ja: 'Japanese',
      pt: 'Portuguese',
      es: 'Spanish'
    };
    const languageList = Object.keys(languages).map((id)=> {
      return $('<li>').html([
        $('<input>')
                .attr('type', 'radio')
                .attr('name', 'dest')
                .attr('id', 'radio-dest-' + id)
                .attr('value', id),
        $('<label>')
                .attr('for', 'radio-dest-' + id)
                .html(languages[id])
      ]);
    });

    $('#run-translation').click(runTranslation);
    $('#languages').html(languageList);
  });

  /**
   * Runs a server-side function to translate the text on all slides.
   */
  function runTranslation() {
    this.disabled = true;
    $('#error').text('');
    google.script.run
            .withSuccessHandler((numTranslatedElements, element) =>{
              element.disabled = false;
              if (numTranslatedElements === 0) {
                $('#error').empty()
                        .append('Did you select elements to translate?')
                        .append('<br/>')
                        .append('Please select slides or individual elements.');
              }
              return false;
            })
            .withFailureHandler((msg, element)=> {
              element.disabled = false;
              $('#error').text('Something went wrong. Please check the add-on logs.');
              return false;
            })
            .withUserObject(this)
            .translateSelectedElements($('input[name=dest]:checked').val());
  }
</script>
</body>
</html>

Ejecuta la secuencia de comandos

  1. En tu presentación de Presentaciones, vuelve a cargar la página.
  2. Haz clic en Extensiones > Translate Slides > Iniciar. El elemento de menú del complemento puede tardar varios segundos en aparecer.
  3. Cuando se te solicite, autoriza el complemento.
  4. Vuelve a hacer clic en Extensiones > Translate Slides > Iniciar.
  5. Agrega texto a tu presentación y selecciónalo.
  6. En el complemento, haz clic en Traducir para reemplazar el texto seleccionado.

Próximos pasos