Spaces:
Running
Running
| <html lang="tr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Shape Recognition Model</title> | |
| <!-- ONNX Runtime Web kütüphanesini tarayıcıya yüklüyoruz --> | |
| <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> | |
| <!-- Arka planda resmi 50x50'ye küçültmek için gizli tuval --> | |
| <canvas id="hiddenCanvas" width="50" height="50" style="display:none;"></canvas> | |
| <script> | |
| const canvas = document.getElementById('canvas'); | |
| const ctx = canvas.getContext('2d'); | |
| let isDrawing = false; | |
| // English class names mapping the model's output | |
| const classes = ["Circle", "Triangle", "Rectangle", "Pentagon", "Parallelogram", "Line"]; | |
| 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); | |
| 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 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, 50, 50); | |
| hiddenCtx.drawImage(canvas, 0, 0, 50, 50); | |
| const imgData = hiddenCtx.getImageData(0, 0, 50, 50).data; | |
| const floatArray = new Float32Array(50 * 50); | |
| 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, 1, 50, 50]); | |
| 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> |