@Blog{zip358.com}

Uncaught (in promise) Error: Tensorflow Op is not supported: _FusedConv2D

<!-- Load TensorFlow.js. This is required to use MobileNet. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0"> </script>
<!-- Load the MobileNet model. -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@2.1.1"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="cat.jpg.webp"></img>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  // Notice there is no 'import' statement. 'mobilenet' and 'tf' is
  // available on the index-page because of the script tag above.

  const img = document.getElementById('img');

  // Load the model.
  mobilenet.load().then(model => {
    // Classify the image.
    model.classify(img).then(predictions => {
      console.log('Predictions: ');
      console.log(predictions);
    });
  });
</script>

<button id="likeBtn">👍</button>
<button id="dislikeBtn">👎</button>

<p><span id="likeCount">0</span></p>

// カウンターの初期値を設定
let likeCount = 0;
let dislikeCount = 0;

// 「いいね」ボタンのクリックイベントを追加
document.getElementById("likeBtn").addEventListener("click", function() {
  likeCount++;
  document.getElementById("likeCount").textContent = likeCount;
});

counterHtml = "<br><span id='counter'>アクセスカウンター：0</span><br><br>";
document.getElementById("site_description").insertAdjacentHTML("afterend",counterHtml);
if(!(localStorage.getItem("counter")) || ( parseInt(localStorage.getItem("counter")) + 420000 < (new Date()).getTime()) ){
    fetch("/counter/?counter=1").then(response=>response.json()).then(data=>{
        document.getElementById("counter").innerText = "アクセスカウンター：" + data.cnt;
        localStorage.setItem("counter",(new Date()).getTime());
    });
}else{
    fetch("/counter/?counter=0").then(response=>response.json()).then(data=>{
        document.getElementById("counter").innerText = "アクセスカウンター：" + data.cnt;
        localStorage.setItem("counter",(new Date()).getTime());
    });
}

<?php
if($_GET["counter"]==1){
    $cnt = (int)(file_get_contents("cnt.txt"));
    $cnt++;
    file_put_contents("cnt.txt",$cnt);
    print json_encode(["cnt"=>$cnt]);
}else{
    print json_encode(["cnt"=>(int)file_get_contents("cnt.txt")]);
}

document.getElementById('btn').addEventListener('click', () => {
    const formData = new FormData();
    formData.append('id', document.getElementById('id_number').value);
    formData.append('_method','PUT');//DELETE・PATCH・PUT

    fetch('ajax-test', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
        body: formData
    })
        .then(response => response.json()) 
        .then(res => {
            console.log('res: '+res[0].id);
            document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
        })
        .catch(error => {
            console.log(error); // エラー表示
        });
});

let funs = {
    init: { htmlcode: document.getElementById("vals").innerHTML },
    highlight: function (e) {
        document.getElementById("vals").innerHTML = funs.init.htmlcode;
        if (!String(this.value).match(/[a-zA-Z]/) && this.value) {
            document.getElementById("vals").innerHTML = String(funs.init.htmlcode).replace(new RegExp(this.value, 'g'), '<span style="color:red">' + this.value + '</span>');
        }
    },
    inputevent:function(){
        document.getElementById("txt").addEventListener("input", this.highlight);
    }
};
funs.inputevent();

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

        const ctx = document.getElementById('myChart');
        let data = [12, 19, 3, 19, 2, 3];
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: ['demo1', 'demo2', 'demo3', 'demo4', 'demo5', 'demo6'],
                datasets: [{
                    label: '# of Votes',
                    data: data,
                    borderWidth: 1
                }]
            },
            options: {
                scales: {
                    x: {
                        beginAtZero: true
                    }
                }
            }
        });

document.getElementById("sh").addEventListener("input",(e)=>{
    $.ajax({
        type: "post",
        url: "example.com/sh.php",
        data: {text:this.value},
        dataType: "json",
        success: function (response) {
            
        }
    });
});

document.getElementById("example").addEventListener("input",function(){
    main()
})
document.getElementById("example").addEventListener("input",main);

function main(){
    if(this.value){
        console.log(this);
    }
}

	let x = [40,0,30];
	let y = [0,40,30];
	let xp = [5,5,5]; 
	let yp = [5,5,5];
	let color = ["rgba(255,0,255,0.8)","rgba(255,255,0,0.8)","rgba(0,0,255,0.8)"]
	let cn = function(element,color,bx,by){
		var context = element.getContext( "2d" ) ;
		context.beginPath () ;
		context.arc((bx), (by), 5, 0 * Math.PI / 180, 360 * Math.PI / 180, false ) ;
		context.fillStyle = color;
		context.fill() ;
		context.strokeStyle = "purple" ;
		context.lineWidth = 2 ;
		context.stroke();
	};
	setInterval(() => {
		for(a = 0 ;a < x.length;a++){
			let base = xy(a);
			cn(document.getElementById("c"),color[a],base[0],base[1]);
		}
	},1);
	// setInterval(()=>{
	// 	let element = document.getElementById("c");
	// 	var context = element.getContext( "2d" ) ;
	// 	context.clearRect(0, 0, context.canvas.clientWidth, context.canvas.clientHeight);
	// },500);

	function xy(a){
		xp[a] = x[a] > 490 || x[a] < 0 ?xp[a]*-1:xp[a];
		yp[a] = y[a] > 440 || y[a] < 0 ?yp[a]*-1:yp[a];
		x[a]=x[a]+xp[a];
		y[a]=y[a]+yp[a];
		return [x[a],y[a]];
	}

document.getElementById("money").addEventListener("input",function(){
	var money = document.getElementById("money").value;
	var change = {
		calc1:{yen:10000,change:0,str1:"紙幣",str2:"枚"},
		calc2:{yen:5000,change:0,str1:"紙幣",str2:"枚"},
		// calc33:{yen:2000,change:0,str:"紙幣",str2:"枚"},
		calc3:{yen:1000,change:0,str1:"紙幣",str2:"枚"},
		calc4:{yen:500,change:0,str1:"硬貨",str2:"個"},
		calc5:{yen:100,change:0,str1:"硬貨",str2:"個"},
		calc6:{yen:50,change:0,str1:"硬貨",str2:"個"},
		calc7:{yen:10,change:0,str1:"硬貨",str2:"個"},
		calc8:{yen:5,change:0,str1:"硬貨",str2:"個"},
		calc9:{yen:1,change:0,str1:"硬貨",str2:"個"}
	};
	money = money.replace(/[,|，]/g,"");
	if(money.match(/[0-9]{1,}/g)){
		for (const key in change) {
			if (change.hasOwnProperty(key)) {
				const obj = change[key];
				change[key].change  = Math.floor(money / obj.yen);
				money = money % obj.yen;
			}
		}
		var anser = function() {
			var str = "";
			for (const key in change) {
				if (change.hasOwnProperty(key)) {
					const obj = change[key];
					if(obj.change){
						str+= obj.yen + "円、" + obj.str1 + "が" + obj.change + obj.str2 + "<br>";
					}
				}
			}
			return str;
		};
		document.getElementById("change_print").innerHTML = anser();
	}else{
		document.getElementById("change_print").innerHTML = "入力が不適切です！";
	}
});

document.getElementById("my-textarea").addEventListener("input",()=>{
	document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});