DEV Community

Cover image for Creating an ML Model and Serving it as a RESTful API: Part 2
Andrea Gonzales
Andrea Gonzales

Posted on • Originally published at dev.to

Creating an ML Model and Serving it as a RESTful API: Part 2

This post is the continuation of the Model and API creation, so be sure to check out part 1 of this series first!

Part 2 of the series will be focused on creating a very simple web app that asks for Iris's petal and sepal width and length. It will then make a call to the Iris Classification Model API to classify the type of Iris flower based on the given user data. The web app will be created in PHP and HTML, where it will be hosted in a local server.

Coding the Web App 🖥️

The web app contains four input fields to accept user data. Once the user clicks submit, it will call the API and return the predicted classification in JSON format.

To do that, we create a file called iris-app.php and enter the following PHP and HTML codes inside:

<?php
  $form = "
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Iris Classification</h1>
      <form action='iris-app.php' method='GET'>
        <p>Enter Sepal Length</p>
        <input type='text' name='slength'/>
        <br/>
        <p>Enter Sepal Width</p>
        <input type='text' name='swidth'/>
        <br/>
        <p>Enter Petal Length</p>
        <input type='text' name='plength'/>
        <br/>
        <p>Enter Petal Width</p>
        <input type='text' name='pwidth'/>
        <br/>
        <input type='submit' name='Submit'/>
        <input type='hidden' name='submitted' value='true'/>
      </form>

   </body>
  </html>";

echo $form;
Enter fullscreen mode Exit fullscreen mode

Note the extra input tag below Submit. It will be used to notify the program that the form has been submitted.

It should look like this:
Alt Text

When the user clicks submit, it will redirect back to the same file as this is where we will be doing the API request. We then have to enclose the form in an if-else statement so that the request will only happen if the user clicks submit. If not, then the form will just keep showing itself.

The code will then be:

<?php
  if(isset($_GET['submitted'])){
   //API Request Goes Here
  }
  else{
    $form = "<!DOCTYPE html>
    <html>
    <body>

    <h1>Iris Classification</h1>
    <form action='home.php' method='GET'>
      <p>Enter Sepal Length</p>
      <input type='text' name='slength'/>
      <br/>
      <p>Enter Sepal Width</p>
      <input type='text' name='swidth'/>
      <br/>
      <p>Enter Petal Length</p>
      <input type='text' name='plength'/>
      <br/>
      <p>Enter Petal Width</p>
      <input type='text' name='pwidth'/>
      <br/>
      <input type='submit' name='Submit'/>
      <input type='hidden' name='submitted' value='true'/>
    </form>

    </body>
    </html>";

    echo $form;
  }

Enter fullscreen mode Exit fullscreen mode

The cURL library can be used to make HTTP requests in PHP. We use curl_init() to initialize a cURL session first, then only make the API request using curl_setopt() where it takes three parameters:

  • cURL_handler - returned when you initialized cURL using curl_init()
  • Option - the constant value for the setting to be changed. For this program, we use CURLOPT_URL as we want to pass a URL as the value in the third parameter
  • Value - the value to be used for the setting. In this case, we make a call to the API along with the user's input as the query.

Once this is set, we send out the request using curl_exec() and finally close the cURL session using curl_close.

Full code is written below:

$swidth = $_GET['swidth'];
$slength = $_GET['slength'];
$pwidth = $_GET['pwidth'];
$plength = $_GET['plength'];
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://iris-classification-model.herokuapp.com/classify?swidth=".$swidth."&slength=".$slength."&pwidth=".$pwidth."&plength=".$plength);
$result = curl_exec($ch);
curl_close($ch);
Enter fullscreen mode Exit fullscreen mode

And we're done! If we run the program with these values:
input

We get the Iris classification as:
json

Hurrah! Now we have our Model API and interface 🎉!

Top comments (0)