index.html

<!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>
    <!-- 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>

    <!-- Modelin beklediği 30x30 boyutuna uygun gizli tuval -->
    <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';
        
        // Fare (Mouse) Eventleri
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);
        
        // Dokunmatik (Touch) Eventleri
        canvas.addEventListener('touchstart', handleTouchStart, { passive: false });
        canvas.addEventListener('touchmove', handleTouchMove, { passive: false });
        canvas.addEventListener('touchend', stopDrawing);
        canvas.addEventListener('touchcancel', stopDrawing);
        
        // Fare için çizim fonksiyonları
        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);
        }
        
        // Dokunmatik ekran için özel fonksiyonlar
        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(); // Sayfanın kaymasını engelle
            isDrawing = true;
            const pos = getTouchPos(e);
            ctx.beginPath();
            ctx.moveTo(pos.x, pos.y);
        }
        
        function handleTouchMove(e) {
            if (!isDrawing) return;
            e.preventDefault(); // Sayfanın kaymasını engelle
            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');
                
                // Tensor boyutunu 3'e düşürdük [1, 30, 30]
                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>