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>