Proofreader API

const options = {
  expectedInputLanguages: ['en'],
};
const available = if (Proofreader.availability("downloadable") === true);

const session = await Proofreader.create({
  monitor(m) {
    m.addEventListener('downloadprogress', (e) => {
      console.log(`Downloaded ${e.loaded * 100}%`);
    });
  },
  ...options,
});

const proofreader = await Proofreader.create({
  expectedInputLanguages: ["en"],
  monitor(m) {
    m.addEventListener("downloadprogress", e => {
      console.log(Downloaded ${e.loaded * 100}%);
    });
  }
};

const proofreadResult = await proofreader.proofread(
  'I seen him yesterday at the store, and he bought two loafs of bread.',
);

let inputRenderIndex = 0;

console.log(proofreadResult.correction);

for (const correction of proofreadResult.corrections) {
  // Render part of input that has no error.
  if (correction.startIndex > inputRenderIndex) {
    const unchangedInput = document.createElement('span');
    unchangedInput.textContent = input.substring(inputRenderIndex, correction.startIndex);
    editBox.append(unchangedInput);
  }
  // Render part of input that has an error and highlight as such.
  const errorInput = document.createElement('span');
  errorInput.textContent = input.substring(correction.startIndex, correction.endIndex);
  errorInput.classList.add('error');
  editBox.append(errorInput);
  inputRenderIndex = correction.endIndex;
}

// Render the rest of the input that has no error.
if (inputRenderIndex !== input.length){
  const unchangedInput = document.createElement('span');
  unchangedInput.textContent = input.substring(inputRenderIndex, input.length);
  editBox.append(unchangedInput);
}

<!--
  The hosting site at https://main.example.com can grant a cross-origin iframe
  at https://cross-origin.example.com/ access to the Proofreader API by
  setting the `allow="proofreader"` attribute.
-->
<iframe src="https://cross-origin.example.com/" allow="proofreader"></iframe>