How to deploy the pre-trained question and answer tensorflow.js model on the application platform

The author choosesCode 2040As aWrite for DOnationsPart of the program accepts donations.

Introduction to the

As the field of machine learning (ML) evolves, so does the list of environments that use this technology. One of these environments is the Web browser, where data-related frameworks have proliferated in recent years, targeting web-based machine learning models. An example of these frameworks is Tensorflow.js, TensorFlow’s JavaScript counterpart for training, executing, and deploying machine learning models in browsers. To make tensorflow.js usable by developers with limited or no ML experience, the library comes with several pre-trained models ready to use out of the box.

Pre-trained machine learning models are ready for machine learning, you don’t need training. Tensorflow.js includes 14 models suitable for a variety of usage situations. For example, there is an image classification model for identifying common objects and a body segmentation model for identifying body parts. The main convenience of these models is that, as the name suggests, you don’t need to train them. Instead, you load them in your application. In addition to their ease of use and pre-trained nature, these models are curated — they are accurate and fast, sometimes trained by the authors of the algorithms, and optimized for web browsers.

In this tutorial, you will create a Web application that uses tensorflow.js to provide a pre-trained model of questions and Answers (QnA). The model you will deploy is a bidirectional encoder represented deformer (BERT) model that takes a paragraph and a question as input and tries to answer the question from that paragraph.

You’ll be deploying the app on DigitalOcean’s app platform, a management solution that allows you to build, deploy and scale applications from GitHub and other sources in a matter of seconds. The application you will create includes a static page with two input fields, a paragraph and a question. Finally, you’ll write and deploy a q&A application from GitHub using a pre-trained model of tensorflow.js and DigitalOcean’s application platform.

A prerequisite for

To complete this tutorial, you will need.

• A DigitalOcean account.
• An account on GitHub that you can create by visiting the Create Your Account page.
• Configure and install Git on your local machine. See How to Contribute to Open Source. Git getting Started and How to Use Git. A Reference Guide.
• You also need a basic knowledge of JavaScript, HTML, and CSS, which you can find in our “How to Build A Website with HTML” series, “How to Build a Website with CSS” series, and “How to Code with JavaScript” series.

Step 1 – Create the application’s interface and import the required libraries

In this step, you will write the HTML code for the application, which defines its interface and imports libraries for the application. The first of these libraries is tensorflow.js, which you will load from the _ content Delivery Network _ or the CDN instead of installing the package locally. A CDN is a network of servers across multiple locations that store the content they provide to the Internet. These include JavaScript files, such as the tensorflow.js library, which can be loaded from the CDN to save you packaging them in your application. Again, you’ll import the library that contains the question and answer models. In the next step, you’ll write JavaScript for your application that uses the model to answer a given question.

In this tutorial, you will build an application that looks like this.

The application has five main elements.

• A button that loads a predefined paragraph that you can use to test the application.
• A text field for an input paragraph (if you choose to write or copy your own).
• A text field to enter a question.
• Trigger the prediction button to answer the question.
• In “** The answer!” The ** button has an area (currently blank white space) that displays the output of the model.

Start by creating a new directory called TFJS-qna-do in your preferred location. In this directory, using the text editor of your choice, create a new HTML file called index.html and paste the following code.

index.html

<! DOCTYPEhtml>
<html lang="en-US">

<head>
    <meta charset="utf-8" />
    <! -- Load TensorFlow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <! -- Load the QnA model -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/qna"></script>
    <link href="./style.css" rel="stylesheet">
</head>

<body>
    <div class="main-centered-container">
        <h1>TensorFlow.js Pre-trained "QnA" BERT model</h1>
        <h3 class="header-border">Introduction</h3>
        <p>This application hosts TensorFlow.js' pre-trained Question and Answer model, and it attempts to answer the question
        using a given passage. To use it, write a passage (any!) in the input area below and a question. Then, click the
        "answer!" button to answer the question using the given passage as a reference. You could also click the test
        button to load a pre-defined input text.</p>

        <h4>Try the test passage!</h4>
        <div id='test-buttons'></div>

        <div>
            <h4>Enter the model's input passage here</h4>
            <textarea id='input-text' rows="20" cols="100" placeholder="Write the input text..."></textarea>
        </div>

        <div>
            <h4>Enter the question to ask</h4>
            <textarea id='question' rows="5" cols="100" placeholder="Write the input text..."></textarea>
        </div>
        <h4>Click to answer the question</h4>
        <div id="answer-button"></div>
        <h4>The model's answers</h4>
        <div id='answer'></div>

        <script src="./index.js"></script>


    </div>
</body>

</html>
Copy the code

Here’s how the HTML is broken down.

• The original<html>Tags have<head>Tag to define metadata, styles, and load scripts. Its first entry is theta<meta>, where you will put the pagecharsetEncoding set toutf-8. After it, there are two<script>The tag is used to load tensorflow.js and q&A models from the CDN.
• Between the two<script>After the tag, there’s one<link>Tag to load a CSS file (which you will create next).
• Next, it’s HTML<body>, the contents of the document. Inside it, there’s a<div>Tag, whose category ismain-centered-containerContains the elements of the page. The first is one with the application title<h1>Header and a smaller one<h3>Header, followed by a brief introduction explaining how it works.
• By the way, there’s one<h4>Title and one<div>, you will add buttons here, fill paragraphs with sample text and enter text fields.
• Then, there are the application’s input fields: one for paragraphs (what you want the model to read) and one for questions (what you want the model to answer). If you want to resize them, please change themrows 和colsProperties.
• After the text field, there is an IDbutton 的<div>Later you will attach a button here that, when clicked, reads the text from the text field and uses it as input to the model.
• And finally, I have an IDanswer 的<div>, to display the output of the model, and one more<script>Tag, including the JavaScript code you’ll write in the next section.

Next, you will add CSS to the project. In the same directory where you added the index.html file, create a new file called style.css and add the following code.

style.css

body {
  margin: 50px 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial;
}

button {
  margin: 10px 10px;
  font-size: 100%;
}

p {
  line-height: 1.8;
}

.main-centered-container {
  padding: 60px;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  max-width: 960px;
}

.header-border {
  border: solid #d0d0d0;
  border-width: 0 0 1px;
  padding: 0 0 5px;
}
Copy the code

This CSS styles three HTML elements: body, button, and paragraph (

). In the body, it adds margin, padding, and changes the default font. For Button, it adds margins and increases the font size. In paragraph P, it modifies the line-height property. The CSS has one class main-centered container, which centers content, and another class header-border, which adds solid lines to elements.

In this step, you write the HTML file for your application. You import the tensorflow.js library and the QnA model, and define the elements you will use later to add paragraphs and questions you will answer. In the next steps, you’ll write JavaScript code that reads these elements and triggers the prediction.

Step 2 – Predict with a pre-trained model

In this section, you’ll implement JavaScript code for your web application, read the application’s input fields, make predictions, and write the predicted answers to HTML. You’ll implement it in a function that fires when you click the “answer” button. Once clicked, it will reference the two input fields to get their values, take them as inputs to the model, and write their output to the

In the project directory tfjs-qna-do/, create a new file named index.js and declare the following variables.

index.js

let model;

// The text field containing the input text
let inputText;

// The text field containing the question
let questionText;

// The div where we will write the model's answer
let answersOutput;
Copy the code

The first variable, Model, is where you will store the QnA model; InputText and questionText are references to input and questionText fields; AnswersOutput is a reference to the output

In addition to these variables, you need a constant to store the sample text that you will use to test your application. We’ll use a Wikipedia article about DigitalOcean as a sample paragraph. Based on this text, you can ask the model questions such as “Where is DigitalOcean based?” Hope it can export “New York”.

Copy this block to your index.js file.

index.js

// Sample passage from Wikipedia.
const doText = `DigitalOcean, Inc. is an American cloud infrastructure provider[2] headquartered in New York City with data centers worldwide.[3] 
DigitalOcean provides developers cloud services that help to deploy and scale applications that run simultaneously on multiple computers.
DigitalOcean also runs Hacktoberfest which is a month-long celebration (October 1-31) of open source software run in partnership with GitHub and Twilio.
`;
Copy the code

Now you will define the functionality of the application from createButton(). This function creates a button and appends it to an HTML element.

index.js

function createButton(innerText, id, listener, selector, disabled = false) {
  const btn = document.createElement('BUTTON');
  btn.innerText = innerText;
  btn.id = id;
  btn.disabled = disabled;

  btn.addEventListener('click', listener);
  document.querySelector(selector).appendChild(btn);
}
Copy the code

CreateButton () is a function that creates the application’s two buttons; Because all buttons work similarly, this function avoids duplicate code. The function takes five arguments.

• innerText: Text of the button.
• id: ID of a button.
• listener: a callback function that is executed when the user clicks a button.
• selector: You will attach the button<div>Elements.
• disabled: a Boolean value to disable or enable the button. The default value of this parameter isfalse 。

CreateButton () first creates an instance of the button and assigns it to the variable BTN. It then sets the innerText, ID, and Disabled properties of the button. This button uses a click-event listener that executes a callback function every time you click on it. The last line of the function appends the button to the

Next, you’ll create a new function called setupButtons() that calls createButton() twice to create the application’s buttons. First, create the **Answer of your application! * * button.

index.js

function setupButtons() {
  // Button to predict
  createButton('Answer! '.'answer-btn'.() = > {
      model.findAnswers(questionText.value, inputText.value).then((answers) = > {
        // Write the answers to the output div as an unordered list.
        // It uses map create a new list of the answers while adding the list tags.
        // Then, we use join to concatenate the answers as an array with a line break
        // between answers.
        const answersList = answers.map((answer) = > `<li>${answer.text} (confidence: ${answer.score})</li>`)
          .join('<br>');

        answersOutput.innerHTML = `<ul>${answersList}</ul>`;
      }).catch((e) = > console.log(e));
    }, '#answer-button'.true);
}
Copy the code

The first button created by this function is the one that triggers the prediction. Its first two arguments, innerText and ID, are the text of the button and the identifier you want to assign to the button. The third argument is the listener callback (explained below). The fourth argument, selector, is the one you want to add the button to

Model's output[
    {
        "text": "New York City"."score": 19.08431625366211."startIndex": 84."endIndex": 97
    },
    {
        "text": "in New York City"."score": 8.737937569618225."startIndex": 81."endIndex": 97
    },
    {
        "text": "New York"."score": 7.998648166656494."startIndex": 84."endIndex": 92
    },
    {
        "text": "York City"."score": 7.5290607213974."startIndex": 88."endIndex": 97
    },
    {
        "text": "headquartered in New York City"."score": 6.888534069061279."startIndex": 67."endIndex": 97}]Copy the code

function setupButtons() {
  // Button to predict
  createButton('Answer! '.'answer-btn'.() = > {
      model.findAnswers(questionText.value, inputText.value).then((answers) = > {
        // Write the answers to the output div as an unordered list.
        // It uses map create a new list of the answers while adding the list tags.
        // Then, we use join to concatenate the answers as an array with a line break
        // between answers.
        const answersList = answers.map((answer) = > `<li>${answer.text} (confidence: ${answer.score})</li>`)
          .join('<br>');

        answersOutput.innerHTML = `<ul>${answersList}</ul>`;
      }).catch((e) = > console.log(e));
    }, '#answer-button'.true);

  createButton('DigitalOcean'.'test-case-do-btn'.() = > {
     document.getElementById('input-text').value = doText;
    }, '#test-buttons'.false);
}
Copy the code

async function init() {
  setupButtons();
  answersOutput = document.getElementById('answer');
  inputText = document.getElementById('input-text');
  questionText = document.getElementById('question');

  model = await qna.load();
  document.getElementById('answer-btn').disabled = false;
}
Copy the code

init();
Copy the code

pwd
Copy the code

Output/Users/your_filepath/tfjs-qna-do
Copy the code

git init
Copy the code

git add .
Copy the code

git commit -m "initial version of the app"
Copy the code

git branch -M main
Copy the code

git remote add origin [email protected]:your-github-username/tfjs-qna-do.git
Copy the code

git push -u origin main
Copy the code