Passing user input from html to javascript as array (to get tensor1d)

So I've been trying to get user input to calculate outer product of two vectors using tensorflow.js but I couldn't figure out how to get an array from html to pass it into javascript. for example inside the calculator function const a has to be something like this tf.tensor1d([1, 2, 3])

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
  </head>
  <body>
    <h1 class="text1">Welcome to vector cross product calculator!</h1>
    <h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
    <label>vector a</label>
    <input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
    +<br>
    <label>vector b</label>
    <input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
    <button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
    <div class="screen" id="screen1"></div>
    </button>
   <script>
    

    function calculator(){
    var vectora   = document.getElementById("vectora").value;
    var vectorb    = document.getElementById("vectorb").value;
    const a = tf.tensor1d(vectora);
    const b = tf.tensor1d(vectorb);

    var c = tf.outerProduct(a, b);
    document.getElementById("screen1").innerHTML=c;
    }
    </script>
   
  </body>
</html>

Solution

A utility function getArray can help.

function getArray(data) {
  return data.split(',').map(s => +s)
}


function calculator(){
  var vectora   = document.getElementById("vectora").value;
  var vectorb    = document.getElementById("vectorb").value;
  const a = tf.tensor1d(getArray(vectora));
  const b = tf.tensor1d(getArray(vectorb));

  var c = tf.outerProduct(a, b);
  document.getElementById("screen1").innerHTML=c;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
  </head>
  <body>
    <h1 class="text1">Welcome to vector cross product calculator!</h1>
    <h2>Please enter two vectors like 1,2,3 and 3,2,1</h2>
    <label>vector a</label>
    <input type="text" name="vectora" id="vectora" class="vectora" placeholder="enter a vector like 1,2,3"> <br>
    +<br>
    <label>vector b</label>
    <input type="text" name="vectorb" id="vectorb" class="vectorb" placeholder="enter a vector like 1,2,3"><br>
    <button type="button" class="btn btn-info" onclick="calculator()">submit</button><br><br>
    <div class="screen" id="screen1"></div>
    </button>
   <script>
   
   function getArray(data) {
    return data.split(',').map(s => +s)
   }
    

    function calculator(){
    var vectora   = document.getElementById("vectora").value;
    var vectorb    = document.getElementById("vectorb").value;
    const a = tf.tensor1d(getArray(vectora));
    const b = tf.tensor1d(getArray(vectorb));

    var c = tf.outerProduct(a, b);
    document.getElementById("screen1").innerHTML=c;
    }
    </script>
   
  </body>
</html>