JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>TensorFlow</title>
  
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- IMPORT bootstrap และ jquery -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
  
    <!-- IMPORT tensorflow.js -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>

    <!-- IMPOT ประวัติราคาหุ้น CPF -->
    <script src="https://xn--12cb3ech1bdffb0m0b3iuam.net/stock/cpf_history.js"></script> 


</head>
<body>
    
    
    
    <div class="container" >
    
    <div>
    โดย <a title="รับเขียนโปรแกรม จัดการฐานข้อมูล Web Application" href="https://xn--12cb3ech1bdffb0m0b3iuam.net">www.รับเขียนโปรแกรม.net</a>
    </div>

        <div class="card">
            <div class="card-body">
                    <!----  แสดงสถานะการ train  --->
                    <div class="row">
                        <div class="col-sm-6">
                            <div>Epoch: <input  class="form-control form-control-sm" id="train-epoch" readonly="true"></input></div>
                            
                        </div>
                        <div class="col-sm-6">
                            
                            <div>Training loss: <input id="train-loss" class="form-control form-control-sm" readonly="true"></input></div>
                           
                        </div>
                    </div>

                    <!----  div สำหรับแสดงผลการทดสอบ model  --->
                    <div id="result_div" ></div>

            </div>
            
          </div>

          <!----  div สำหรับแสดงว่ากำลัง train อยู่ ...

JavaScript

var input_data=[];//สร้างตัวแปร array สำหรับเก็บ input สำหรับ tarin model ที่เป็นประวัติราคา
            var output_data=[];//สร้างตัวแปร array สำหรับเก็บ output สำหรับ tarin model ที่เป็นราคาปิด

            var test_input_data=[];//สร้างตัวแปร array สำหรับเก็บ input สำหรับทดสอบ model ที่เป็นประวัติราคา
            var test_output_data=[];//สร้างตัวแปร array สำหรับเก็บ output สำหรับทดสอบ model ที่เป็นราคาปิด

            var critical= Math.round(cpf.length*0.8) ;//แบ่งจำนวน train-data 80% และ test-data 20%

            cpf.map((item,i)=>{ //อ่านข้อมูลประวัติราคาทีละแถว

                    //แสดงประวัติราคา ในตาราง
                    $("#raw_data").append(`<tr >
                        <td>`+item.Date+`</td>
                        <td>`+item.Open+`</td>
                        <td>`+item.High+`</td>
                        <td>`+item.Low+`</td>
                        <td>`+item.Close+`</td>
                        
                    </tr>`);

                    if(i<=critical)//สำหรับข้อมูล 80% จะเป็นข้อมูลสำหรับ train
                    {
                        input_data.push([item.Open,item.High,item.Low]);//ใช้ข้อมูล ราคา Open ราคา High ราคา Low เป็น ตัวแปรสำหรับทำนาย
                        output_data.push(item.Close);

                    }
                    else//สำหรับข้อมูลอีก 20% จะเป็นข้อมูลสำหรับ ทดสอบ model
                    {
                        test_input_data.push([item.Open,item.High,item.Low]);
                        test_output_data.push(item.Close);
                    }

            });

            var train_data = tf.tensor2d(input_data);//สร้าง tensor object ประวัติราคา สำหรับ  train model
            var result_data = tf.tensor1d(output_data);//สร้าง tensor object ผลลัพธ์ สำหรับ  train model
            var test_data = tf.tensor2d(test_input_data);//สร้าง tensor object ประวัติราคา สำหรับทดสอบ model
            var test_output= tf.tensor1d(test_output_data);//สร้าง tensor object ผลลัพธ์ สำหรับทดสอบ  model

           ...