django template tensorflow js

{% extends 'base.html' %}

{% load static %}
{% block head %}<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@2.1.0/dist/tf.min.js"></script>
{% endblock %}

{% block content %}

    

<div class="container container-fluid mt-3">

<div class="card">
	<div class="card-body pb-0 d-flex justify-content-between">
	
	<div class="card-body">
		<div>
			<h4 class="mb-1">병해충 데이터 기반 AI 모델을 활용한 병충해 이미지 검출</h4>
			<p>Detection of Insect and Insect Image Using AI Model Based on Insect and Insect Data</p>
			<h3 class="m-0">2022</h3>
		</div>
	
	</div>
	</div>
	
	
</div>
<div class="row m-1">

	<div class="col">
		<div class="card">
			<div class="row">
				<div class="col card-body" style="">
			
					<h4 class="mb-1">검출기</h4>
					<p>Dectector</p>
					<h3 class="m-0">검출할 이미지를 업로드하여 검출한 결과를 목록에서 확인하세요</h3>
				</div>
				 <form method="post" enctype="multipart/form-data" novalidate>
				 							{% csrf_token %}

					<div class="col card-body" style="">
					   <img width="150" height="150"  id="image_section" crossorigin="anonymous" src="#" class="rounded-circle"  alt=""/>
					</div>
					<div class="col card-body" style="">
					
						{{ form.as_p }}			
						<button class="btn btn-primary" type="button" id="upload">Upload</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</div>
 
<div class="card">
	<div class="card-body">
		 <div class="active-member">
			<div class="table-responsive">
				<table class="table table-xs mb-0">
					<thead>
						<tr>
						       <th>
									일시
								</th>
								<th >
									사진
								</th>
								<th>
									결과
								</th>
								<th>
									모델
								</th>
						</tr>
					</thead>
					<tbody>
					
						   {% for content in contents %}

							<tr>
								<td>
										{{ content.created_at | date:'Y-m-d H:i:s' }}
								</td>
							
								<td >
								<img width="400"  src="{{ content.img.url }}" class=" rounded-circle mr-2" alt="">
								</td>
									
							
								<td>

										{{ content.result }}
								</td>
								
								<td>

										{{ content.model }}
								</td>
							</tr>
							{% endfor %}

					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
      
        <script>

    function readURL(input) {
     if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
       $('#image_section').attr('src', e.target.result);
      }
      reader.readAsDataURL(input.files[0]);
      }
    }

    // 이벤트를 바인딩해서 input에 파일이 올라올때 (input에 change를 트리거할때) 위의 함수를 this context로 실행합니다.
    $("#id_img").change(function(){
       readURL(this);
    });
    
    
    
        </script>
        
    <div class="mb-3">
        {{suc}}
        {{src}}
        

	</div>
 
 <script type="module">
 var label = ["Septoria_leaf_spot","Tomato_mosaic_virus","Spider_mites","Tomato_Yellow_Leaf_Curl_Virus","Target_Spot","Early_blight","Bacterial_spot","Leaf_Mold","healthy","powdery_mildew","Late_blight"];
 
 const upload = document.querySelector("#upload");
 const model = await tf.loadGraphModel("{% static 'model/model.json' %}");
upload.addEventListener("click",  async () =>{
 
 
  
 console.log("start");
  const image = document.getElementById('image_section');
  let myFaceImage = tf.browser.fromPixels(image)

  myFaceImage = tf.image.resizeBilinear(myFaceImage, [224,224])
  myFaceImage = tf.expandDims(myFaceImage, 0)
  
  const prediction = model.predict(myFaceImage)//.strides.findIndex(ele => ele==1)
  const predictionArray = prediction.dataSync()
  const maxValue = predictionArray.indexOf(Math.max(...predictionArray))
  alert(label[maxValue]);
});
 </script>
 
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

{% endblock %}