Update index.html

index.html

@@ -1,19 +1,121 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="tr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Şekil Tanıma Modeli</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>Bir Şekil Çizin</h2>
+    <!-- Kullanıcının çizeceği 500x500 tuval -->
+    <canvas id="canvas" width="500" height="500"></canvas>
+    
+    <div class="controls">
+        <button onclick="predict()">Tahmin Et</button>
+        <button class="clear" onclick="clearCanvas()">Temizle</button>
+    </div>
+
+    <div id="result">Bekleniyor...</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;
+        
+        const classes = ["Çember", "Üçgen", "Dikdörtgen", "Beşgen", "Paralelkenar", "Çizgi"];
+
+        // Çizim Ayarları (Kalın fırça)
+        ctx.lineWidth = 20;
+        ctx.lineCap = 'round';
+        ctx.strokeStyle = 'black';
+
+        // Fare/Dokunmatik olayları
+        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 = "Bekleniyor...";
+        }
+
+        async function predict() {
+            document.getElementById('result').innerText = "Hesaplanıyor...";
+            
+            // 1. 500x500'lük çizimi 50x50'ye küçült
+            const hiddenCanvas = document.getElementById('hiddenCanvas');
+            const hiddenCtx = hiddenCanvas.getContext('2d');
+            
+            // Arka planı beyaz yap, üstüne çizimi kopyala
+            hiddenCtx.fillStyle = "white";
+            hiddenCtx.fillRect(0, 0, 50, 50);
+            hiddenCtx.drawImage(canvas, 0, 0, 50, 50);
+
+            // 2. Piksel verilerini al (RGBA)
+            const imgData = hiddenCtx.getImageData(0, 0, 50, 50).data;
+            const floatArray = new Float32Array(50 * 50);
+
+            // 3. RGBA'yı modele uygun Float'a çevir (Siyah=1.0, Beyaz=0.0)
+            for (let i = 0; i < imgData.length; i += 4) {
+                const r = imgData[i], g = imgData[i+1], b = imgData[i+2];
+                // Gri tonlama
+                const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+                // Eşik değeri uygulayıp (Siyah çizimler 1.0, beyazlar 0.0)
+                const val = gray < 128 ? 1.0 : 0.0; 
+                floatArray[i/4] = val;
+            }
+
+            try {
+                // 4. ONNX Modelini Çalıştır
+                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 });
+                
+                // 5. Çıktıları Al ve En Yüksek Olasılığı Bul
+                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 = "Tahmin: " + classes[maxIndex];
+            } catch (err) {
+                console.error(err);
+                document.getElementById('result').innerText = "Model yüklenirken hata oluştu!";
+            }
+        }
+    </script>
+</body>
+</html>