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>