<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Train</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://kit.fontawesome.com/624ec6011a.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
    <center>
<!--        <img src="{{ url_for('static', filename='image.png') }}">-->
        <img src="data:image/jpeg;base64,{{ img_data }}">
        <form method="POST" enctype=multipart/form-data class="text-center border border-light p-5"  style="height: 230px; width: 800px; border: 1px solid black; background:white" action="{{url_for('helper')}}">
            <div class="form-group" style="padding:10px;">
                <div class="input-group" style="padding:5px">

                    <span class="input-group-addon" style="width:300px">Please select the Classifier Algorithm</span>
                    <select name="label_select" class="selectpicker form-control">
                        {% for o in classlist %}
                        <option value="{{ o.number }}">{{ o.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <input type="submit",value="train">
        </form>
        <div style="height:500px; width:500px">
            <canvas id="myChart4" ></canvas>
              <script>
                      var ctx4 = document.getElementById('myChart4');
                      var myChart4 = new Chart(ctx4, {
                      type: 'line', //bar,horizontalBar,pie,Line,doughnut,radar,polarArea
                      data: {
                          labels: [{{iteration}}],
                          datasets: [{
                              label: 'Accuracy',
                              data: [{{data}}],
                              backgroundColor: [
                                  'rgba(0, 0, 0, 0)',
                              ],
                              borderColor: [
                                  'rgba(0, 128, 255, 1)',
                              ],
                              borderWidth: 1,
                              hoverBorderWidth:2,
                              hoverBorderColor:'#777'
                            }]
                      },
                      options: {
                        title:{
                          display:true,
                          text:" Accuracy of the model "
                        },
                        legend:{
                          display:false,
                          position:'top',
                          labels:{
                            fontColor:'#000'
                          }
                        },
                        scales: {
                            xAxes: [{
                                    display: true,
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Iteration number',
                                    },
                                }],
                            yAxes: [{
                                    display: true,
                                    ticks: {

                                                                          stepSize: 0.5
                                    },
                                    scaleLabel: {
                                        display: true,
                                        labelString: 'Accuracy Percentage',
                                    },

                                }]
                        }

                      }
                  });

              </script>
            </div>
    </center>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>
