knn_digit_learning | 程式專案

{"id":71798,"student_id":70,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript\\n  src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\\n  integrity=\\\"sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=\\\"\\n  crossorigin=\\\"anonymous\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"writing-pad\\\" class=\\\"writing-pad\\\"\u003e\u003c/div\u003e\\n    \u003cp\u003e目前的特征值：\u003cspan id=\\\"data-show\\\"\u003e\u003c/span\u003e\u003c/p\u003e\\n    \u003cbutton id=\\\"save-btn\\\"\u003e儲存\u003c/button\u003e\\n    \u003cbutton id=\\\"clear-btn\\\"\u003e清除\u003c/button\u003e\\n    \u003cbutton id=\\\"predict-btn\\\"\u003e預測\u003c/button\u003e\\n    \u003chr\u003e\\n    \u003ctable\u003e\\n        \u003cthead\u003e\\n            \u003ctr\u003e\\n                \u003cth\u003eData\u003c/th\u003e\\n                \u003cth\u003eLabel\u003c/th\u003e\\n            \u003c/tr\u003e\\n        \u003c/thead\u003e\\n        \u003ctbody id=\\\"data-rows\\\"\u003e\\n        \u003c/tbody\u003e\\n    \u003c/table\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"/* 設定整個頁面內容水平置中、內寬為 30 像素：*/\\nbody {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n/* 設定圖片的寬度為銀幕一半寬 */\\nimg {    \\n    max-width: 50%; \\n}\\n\\n/* 設定文字的顏色為淡黑色 */\\np {\\n    color: #555555;\\n}\\n\\n.writing-pad {\\n    width: 320px;\\n    height: 320px;\\n    border: 1px solid black;\\n}\\n.grid {\\n    width: 20px;\\n    height: 20px;\\n    background: #fff;\\n    float: left;\\n}\",\"js\":\"// 初始化\\nvar dataset = []\\n\\nvar mouseDown = 0;\\ndocument.body.onmousedown = function() { \\n    mouseDown = 1;\\n}\\ndocument.body.onmouseup = function() {\\n    mouseDown = 0;\\n}\\n\\nfor(let i=0; i\u003c256; i++){\\n    var elem = $(\\\"\u003cdiv class='grid'\u003e\u003c/div\u003e\\\");\\n    $(elem).data(\\\"value\\\",0)\\n    $(\\\"#writing-pad\\\").append(elem);\\n}\\n\\n$(\\\".grid\\\").on(\\\"mouseover\\\", function(elem){\\n    if(mouseDown){\\n        $(this).css(\\\"background\\\",\\\"#000\\\");\\n        $(this).data(\\\"value\\\",1);\\n        $(\\\"#data-show\\\").text( getData() );\\n    }\\n});\\n\\n// 定義 Function\\nfunction getData(){\\n    var data = [];\\n    var grids = $(\\\".grid\\\");\\n    for(let i=0; i\u003cgrids.length; i++){\\n        data.push( $(grids[i]).data(\\\"value\\\") );\\n    }\\n    return data;\\n}\\n\\nfunction clear(){\\n    $(\\\".grid\\\").css(\\\"background\\\",\\\"#fff\\\");\\n    $(\\\".grid\\\").data(\\\"value\\\",0);\\n}\\n\\nfunction knn(n, data, dataset){\\n    weightTable = [];\\n    for(let i=0; i\u003cdataset.length; i++){\\n        var weight = 0, label = dataset[i][1];\\n        for(let j=0; j\u003cdata.length; j++){\\n            weight += Math.abs(data[j]-dataset[i][0][j]);\\n        }\\n        weightTable.push([weight, label]);\\n    }\\n    weightTable.sort();\\n    var neighbors = weightTable.slice(0,n);\\n    neighbors = neighbors.map(function(e){return e[1]});\\n    \\n    // console.log(weightTable);\\n    // console.log(neighbors);\\n    \\n    var counts = {};\\n    for(let i=0; i\u003cneighbors.length; i++){\\n        if( counts[neighbors[i]] ){\\n            counts[neighbors[i]]++;\\n        } else {\\n            counts[neighbors[i]] = 1;\\n        }\\n    }\\n    maxLabel = \\\"\\\", maxCount = 0;\\n    for(let key in counts){\\n        if(counts[key]\u003emaxCount){\\n            maxLabel = key;\\n        }\\n    }\\n    return maxLabel;\\n}\\n\\n// 綁定按鍵事件\\n$(\\\"#save-btn\\\").click(function(){\\n    var label = prompt(\\\"請問這是什麼數字?\\\");\\n    var data = getData();\\n    $(\\\"#data-rows\\\").append(\\\"\u003ctr\u003e\u003ctd\u003e\\\"+data+\\\"\u003c/td\u003e\u003ctd\u003e\\\"+label+\\\"\u003c/td\u003e\u003ctr\u003e\\\");\\n    dataset.push([data, label]);\\n    clear();\\n});\\n\\n$(\\\"#clear-btn\\\").click(function(){\\n    clear()\\n});\\n\\n$(\\\"#predict-btn\\\").click(function(){\\n    var data = getData();\\n    alert( \\\"應該是\\\"+knn(3, data, dataset) );\\n});\\n\\n\\n\\n\"}","created_at":"2019-06-12T14:07:52.650+08:00","updated_at":"2023-07-26T14:45:57.784+08:00","name":"knn_digit_learning","language":"web","screenshot":{"url":"https://cdn2.koding.school/uploads/project/screenshot/71798/a352ccc534e728df998191c3f6ed7d48.jpg"},"parent_id":3,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":256,"hashid":"gk4smv46","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}