$(document).ready(function() {
  $("#send_request").on("click", function() {
    var socket = new WebSocket("ws://localhost:9002");
    
    socket.addEventListener("open", (event) => {
      const msg = {"cmd": "generate", "text": $("#card_text").val()};
      socket.send(JSON.stringify(msg));
    });

    socket.addEventListener("message", (event) => {
      var msg = JSON.parse(event.data);
      if (msg.hasOwnProperty("msg")) {
        $("#status").html(msg["msg"]);
      }
      if (msg.hasOwnProperty("image")) {
        $("#images").prepend("<li><img src=\"data:image/png;base64, " + msg["image"] + "\" /></li>");
      }
    });
  });
});