text: import passage from './passage';
  
  export default [
    '"use strict";',
    '',
    '// Do NOT modify the line below.',
    'import * as qna from "https://cdn.skypack.dev/@tensorflow-models/qna";',
    '// Do NOT modify the line above.',
    '',
    '/**',
    ' * Skip to the getAnswers function to see the model being used.',
    '*/',
    '',
    'document.addEventListener("DOMContentLoaded", function () {',
    '  contextElement.value = passage;',
    '});',
    '',
    'const contextElement = document.getElementById("context");',
    '',
    `const passage = \`${passage}\`;`,
    '',
    'const qnaModelFormElement = document.getElementById("qnaModelForm");',
    'const clearButtonElement = document.getElementById("clear");',
    'const submitButtonElement = document.getElementById("submit");',
    'const errorElement = document.getElementById("error");',
    'const answersContainerElement = document.getElementById("answersContainer");',
    'const answersElement = document.getElementById("answers");',
    '',
    'clearButtonElement.addEventListener("click", function (e) {',
    '  contextElement.value = "";',
    '});',
    '',
    'qnaModelFormElement.addEventListener("submit", handleFormSubmit);',
    '',
    'function handleFormSubmit(e) {',
    '  e.preventDefault();',
    '  submitButtonElement.disabled = true;',
    '  const data = Object.fromEntries(new FormData(e.target).entries());',
    '  const context = data.context.trim();',
    '  const question = data.question.trim();',
    '',
    '  if (context === "") {',
    '    answersContainerElement.style.display = "none";',
    '    errorElement.innerHTML = "<p class=\'text-danger\'>You did not provide a context or passage.</p>";',
    '    return;',
    '  }',
    '',
    '  if (question === "") {',
    '    answersContainerElement.style.display = "none";',
    '    errorElement.innerHTML = "<p class=\'text-danger\'>You did not ask a question.</p>";',
    '    return;',
    '  }',
    '  getAnswers(context, question);',
    '}',
    '',
    'function getAnswers(context, question) {',
    '  qna.load().then(function (model) {',
    '    model.findAnswers(question, context).then(function (answers) {',
    '      renderAnswers(answers);',
    '    });',
    '  });',
    '}',
    '',
    'function renderAnswers(answers) {',
    '  errorElement.style.display = "none";',
    '  answersContainerElement.style.display = "block";',
    '  answersContainerElement.innerHTML = "";',
    '',
    '  if (answers.length === 0) {',
    '    answersContainerElement.innerHTML = "<p> Oops! No answers gotten from the model.</p>";',
    '    submitButtonElement.disabled = false;',
    '    return;',
    '  }',
    '',
    '  answers.forEach(function (answer) {',
    '    const li = document.createElement("li");',
    '    li.textContent = answer.text + " (confidence: " + answer.score + ")";',
    '    answersElement.append(li);',
    '  });',
    '',
    '  submitButtonElement.disabled = false;',
    '}',
    '',
    '',
    '',
  ].join('\n');
  