Code for Project (serverless_web)

2 min readJul 8, 2024

The Project folder (serverless_web) contains : 2 HTML files, 1 JS and 1 CSS file.

script.js

var API_ENDPOINT = "APIURL"

document.getElementById("sayButton").onclick = function(){

 var inputData = {
  "voice": $('#voiceSelected option:selected').val(),
  "text" : $('#postText').val()
 };

 $.ajax({
       url: API_ENDPOINT,
       type: 'POST',
       data:  JSON.stringify(inputData)  ,
       contentType: 'application/json; charset=utf-8',
       success: function (response) {
     document.getElementById("postIDreturned").textContent="Message : " + response;
       },
       error: function () {
           alert("error");
       }
   });
}


document.getElementById("searchButton").onclick = function(){

 var postId = $('#postId').val();


 $.ajax({
    url: API_ENDPOINT,
    type: 'GET',
    success: function (response) {

     $('#posts tr').slice(1).remove();

         jQuery.each(response, function(i,data) {

      var player = "<audio controls><source src='" + data['url'] + "' type='audio/mpeg'></audio>"

      if (typeof data['url'] === "undefined") {
         var player = ""
      }

      $("#posts").append("<tr>\
        <td>" + data['selected voice'] + "</td> \
        <td>" + data['input text'] + "</td> \
        <td>" + data['status'] + "</td> \
        <td>" + player + "</td> \
        </tr>");
         });
    },
    error: function () {
      alert("error");
    }
  });
}

document.getElementById("postText").onkeyup = function(){
 var length = $(postText).val().length;
 document.getElementById("charCounter").textContent="Characters: " + length;
}

Replace API_ENDPOINT with the you API Invoke URL that you copied in the above step and save the file.

index.html

<html>
  <head>
    <link rel="stylesheet" href="styles.css">
    <title>Whizlabs - Machine learing</title>
  </head>
  <body>
    <h1> Machine Learning Lab Demo : Polly</h1>
    <h3>Convert Your text to Audio</h3>
    <div id="content">

      Select Voice:

      <select id="voiceSelected">
        <option value="Joanna">Joanna - English</option>
        <option value="Maja">Maja - Polish</option>
        <option value="Enrique">Enrique - Spanish</option>
        <option value="Marlene">Marlene - German</option>
        <option value="Mathieu">Mathieu - French </option>
        <option value="Cristiano">Cristiano - Portuquese</option>
        <option value="Liv">Liv - Norwegian </option>
        <option value="Mizuki">Mizuki - Japanese </option>
        <option value="Carla">Carla - Italian </option>
        <option value="Carmen">Carmen - Romanian</option>
        <option value="Tatyana">Tatyana - Russian</option>
        <option value="Astrid">Astrid - Swedish</option>
        <option value="Filiz">Filiz - Turkish</option>
        <option value="Gwyneth">Gwyneth - Welsh</option>
        <option value="Karl">Karl - Icelandic</option>
      </select>

      <input type="submit" value="Process" id="sayButton" class="buttons">

      <span id="postIDreturned"></span>
    </br></br>

    <textarea id ="postText"></textarea>
    <span id="charCounter">Characters: 0</span>

    </br></br></br></br>
      <input type="submit" class="buttons" value="Refresh table" id="searchButton">
      <br/>
    </div>



      <table id="posts">
        <colgroup>
          <col style="width:10%">
          <col style="width:45%">
          <col style="width:8%">
          <col style="width:35%">
        </colgroup>
        <tbody>
          <tr>
            <th>Voice</th>
            <th>Post</th>
            <th>Status</th>
            <th>Player</th>
          </tr>
        </tbody>
      </table>


    <script src="scripts.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
  </body>
</html>

error.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="2022.2">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
  </style>
</head>
<body>
<p class="p1">&lt;html&gt;</p>
<p class="p1">&lt;body&gt;</p>
<p class="p1">&lt;h1&gt; 404 Page Not Found&lt;/h1&gt;</p>
<p class="p1">&lt;/body&gt;</p>
<p class="p1">&lt;/html&gt;</p>
</body>
</html>

styles.css

.buttons {
 border : solid 0px #0066cc;
 border-radius : 8px;
 moz-border-radius : 8px;
 font-size : 16px;
 color : #ffffff;
 padding : 5px 18px;
 background-color : #004C99;
 cursor:pointer;
}

.buttons:hover {
 color:black;
 background-color:#99FFFF;
}

.buttons:active {
 position:relative;
 top:1px;
}

#newPost {
 margin: 0 auto;
 width: 90%;
}

#charCounter { float:right }

textarea {
  width:  100%;
 height:  10em;
}

#content {
  width: 90% ;
  margin-left: auto ;
  margin-right: auto;
 margin-bottom: 10px;
 font-family:verdana, sans-serif;
 word-spacing:4pt;
 font-size:14px;
}

#posts {
 font-weight:normal;
 color:#000000;
 word-spacing:4pt;
 font-size:10px;
 text-align:left;
 font-family:verdana, sans-serif;
 width: 90%;
 margin: 0 auto;
}

#posts th {
 background-color: #330000;
 color: white;
 padding: 8px;
 border-bottom: 1px solid #ddd;
}

#posts td {
 padding: 8px;
 border-color: #666666;
 background-color: #ffffff;
 border-bottom: 1px solid #ddd;
}

Code for Project (serverless_web)

script.js

index.html

error.html

styles.css

Written by Sumbul Naqvi