| <!DOCTYPE html> |
| <html lang="tr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Shape Recognition Model</title> |
| |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script> |
| <style> |
| body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f3f4f6; margin-top: 50px; } |
| canvas { border: 2px solid #333; background-color: white; cursor: crosshair; touch-action: none; } |
| .controls { margin-top: 20px; display: flex; gap: 10px; } |
| button { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #4CAF50; color: white; border: none; border-radius: 5px; } |
| button.clear { background-color: #f44336; } |
| #result { margin-top: 20px; font-size: 24px; font-weight: bold; color: #333; } |
| </style> |
| </head> |
| <body> |
| <h2>Draw a Shape</h2> |
| |
| <canvas id="canvas" width="500" height="500"></canvas> |
| |
| <div class="controls"> |
| <button onclick="predict()">Predict</button> |
| <button class="clear" onclick="clearCanvas()">Clear</button> |
| </div> |
| |
| <div id="result">Waiting...</div> |
|
|
| |
| <canvas id="hiddenCanvas" width="30" height="30" style="display:none;"></canvas> |
|
|
| <script> |
| const canvas = document.getElementById('canvas'); |
| const ctx = canvas.getContext('2d'); |
| let isDrawing = false; |
| |
| const classes = ["Circle", "Triangle", "Rectangle", "Pentagon", "Parallelogram", "Line", "Hexagon"]; |
| |
| ctx.lineWidth = 20; |
| ctx.lineCap = 'round'; |
| ctx.strokeStyle = 'black'; |
| |
| |
| canvas.addEventListener('mousedown', startDrawing); |
| canvas.addEventListener('mousemove', draw); |
| canvas.addEventListener('mouseup', stopDrawing); |
| canvas.addEventListener('mouseout', stopDrawing); |
| |
| |
| canvas.addEventListener('touchstart', handleTouchStart, { passive: false }); |
| canvas.addEventListener('touchmove', handleTouchMove, { passive: false }); |
| canvas.addEventListener('touchend', stopDrawing); |
| canvas.addEventListener('touchcancel', stopDrawing); |
| |
| |
| function startDrawing(e) { |
| isDrawing = true; |
| draw(e); |
| } |
| |
| function stopDrawing() { |
| isDrawing = false; |
| ctx.beginPath(); |
| } |
| |
| function draw(e) { |
| if (!isDrawing) return; |
| const rect = canvas.getBoundingClientRect(); |
| ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top); |
| ctx.stroke(); |
| ctx.beginPath(); |
| ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top); |
| } |
| |
| |
| function getTouchPos(e) { |
| const rect = canvas.getBoundingClientRect(); |
| return { |
| x: e.touches[0].clientX - rect.left, |
| y: e.touches[0].clientY - rect.top |
| }; |
| } |
| |
| function handleTouchStart(e) { |
| e.preventDefault(); |
| isDrawing = true; |
| const pos = getTouchPos(e); |
| ctx.beginPath(); |
| ctx.moveTo(pos.x, pos.y); |
| } |
| |
| function handleTouchMove(e) { |
| if (!isDrawing) return; |
| e.preventDefault(); |
| const pos = getTouchPos(e); |
| ctx.lineTo(pos.x, pos.y); |
| ctx.stroke(); |
| ctx.beginPath(); |
| ctx.moveTo(pos.x, pos.y); |
| } |
| |
| function clearCanvas() { |
| ctx.clearRect(0, 0, canvas.width, canvas.height); |
| document.getElementById('result').innerText = "Waiting..."; |
| } |
| |
| async function predict() { |
| document.getElementById('result').innerText = "Calculating..."; |
| |
| const hiddenCanvas = document.getElementById('hiddenCanvas'); |
| const hiddenCtx = hiddenCanvas.getContext('2d'); |
| |
| hiddenCtx.fillStyle = "white"; |
| hiddenCtx.fillRect(0, 0, 30, 30); |
| |
| hiddenCtx.drawImage(canvas, 0, 0, 30, 30); |
| |
| const imgData = hiddenCtx.getImageData(0, 0, 30, 30).data; |
| const floatArray = new Float32Array(30 * 30); |
| |
| for (let i = 0; i < imgData.length; i += 4) { |
| const r = imgData[i], g = imgData[i+1], b = imgData[i+2]; |
| const gray = 0.299 * r + 0.587 * g + 0.114 * b; |
| const val = gray < 128 ? 1.0 : 0.0; |
| floatArray[i/4] = val; |
| } |
| |
| try { |
| const session = await ort.InferenceSession.create('./model.onnx'); |
| |
| |
| const tensor = new ort.Tensor('float32', floatArray, [1, 30, 30]); |
| const results = await session.run({ input: tensor }); |
| |
| const output = results.output.data; |
| let maxIndex = 0; |
| let maxValue = output[0]; |
| |
| for (let i = 1; i < output.length; i++) { |
| if (output[i] > maxValue) { |
| maxValue = output[i]; |
| maxIndex = i; |
| } |
| } |
| |
| document.getElementById('result').innerText = "Prediction: " + classes[maxIndex]; |
| } catch (err) { |
| console.error(err); |
| document.getElementById('result').innerText = "Error loading model!"; |
| } |
| } |
| </script> |
| </body> |
| </html> |
