SOS Website to detect safety of girls

Piyushsahu99 · Aug 26, 2024 · e0f8e8a · e0f8e8a
commit e0f8e8a
Show file tree

Hide file tree

Showing 3 changed files with 251 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SOS Gesture Recognition</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <button id="dark-mode-toggle">Toggle Dark Mode</button>
+    <button id="camera-toggle">Toggle Camera</button>
+
+    <div id="description">
+        <h2>How to Use This Software</h2>
+        <p>This software monitors the webcam feed for SOS gestures. If detected, an alert will sound. Use the buttons to toggle the camera and dark mode. The matrix shows the severity level of the detected gesture.</p>
+    </div>
+
+    <div id="webcam-container">
+        <div id="webcam-frame">
+            <video id="webcam" autoplay></video>
+        </div>
+    </div>
+
+    <div class="alert-box" id="alert-box">
+        <p>SOS Gesture Detected!</p>
+        <button id="stop-alarm">Stop Alarm</button>
+    </div>
+
+    <div class="matrix-container">
+        <div class="matrix-level level-1"></div>
+        <div class="matrix-level level-2"></div>
+        <div class="matrix-level level-3"></div>
+        <div class="matrix-level level-4"></div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,85 @@
+const video = document.getElementById('webcam');
+const alertBox = document.getElementById('alert-box');
+const darkModeToggle = document.getElementById('dark-mode-toggle');
+const cameraToggle = document.getElementById('camera-toggle');
+const stopAlarmButton = document.getElementById('stop-alarm');
+const matrixLevels = document.querySelectorAll('.matrix-level');
+let darkMode = false;
+let cameraOn = true;
+let audio;
+
+// Load and setup the model
+async function loadModel() {
+    const model = await tmImage.load(
+        'https://teachablemachine.withgoogle.com/models/uW6WyXpXj/model.json',
+        'https://teachablemachine.withgoogle.com/models/uW6WyXpXj/metadata.json'
+    );
+    return model;
+}
+
+async function setupWebcam() {
+    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
+    video.srcObject = stream;
+    video.addEventListener('loadeddata', async () => {
+        const model = await loadModel();
+        while (cameraOn) {
+            const predictions = await model.predict(video);
+            handlePredictions(predictions);
+            await tf.nextFrame();
+        }
+    });
+}
+
+function handlePredictions(predictions) {
+    if (predictions[0].probability > 0.9) {
+        triggerAlarm(predictions[0].probability);
+    }
+}
+
+function triggerAlarm(probability) {
+    alertBox.style.display = 'block';
+    if (!audio) {
+        audio = new Audio('https://example.com/alert-sound.mp3');  // Replace with actual sound URL
+    }
+    audio.loop = true;
+    audio.play();
+    updateMatrix(probability);
+}
+
+function stopAlarm() {
+    alertBox.style.display = 'none';
+    if (audio) {
+        audio.pause();
+        audio.currentTime = 0;
+    }
+}
+
+function updateMatrix(probability) {
+    matrixLevels.forEach((level, index) => {
+        if (probability > (index + 1) * 0.25) {
+            level.style.backgroundColor = level.classList.contains('level-4') ? 'red' : 'orange';
+        } else {
+            level.style.backgroundColor = 'grey';
+        }
+    });
+}
+
+darkModeToggle.addEventListener('click', () => {
+    darkMode = !darkMode;
+    document.body.classList.toggle('dark-mode', darkMode);
+});
+
+cameraToggle.addEventListener('click', () => {
+    cameraOn = !cameraOn;
+    if (cameraOn) {
+        setupWebcam();
+        cameraToggle.textContent = 'Turn Camera Off';
+    } else {
+        video.srcObject.getTracks().forEach(track => track.stop());
+        cameraToggle.textContent = 'Turn Camera On';
+    }
+});
+
+stopAlarmButton.addEventListener('click', stopAlarm);
+
+setupWebcam();
diff --git a/style.css b/style.css
@@ -0,0 +1,126 @@
+:root {
+    --bg-color-light: #f4f4f4;
+    --bg-color-dark: #2e2e2e;
+    --text-color-light: #000;
+    --text-color-dark: #fff;
+    --alert-bg-color: red;
+    --alert-text-color: white;
+}
+
+body {
+    font-family: Arial, sans-serif;
+    background-color: var(--bg-color-light);
+    color: var(--text-color-light);
+    margin: 0;
+    padding: 20px;
+    transition: background-color 0.3s, color 0.3s;
+}
+
+.dark-mode {
+    background-color: var(--bg-color-dark);
+    color: var(--text-color-dark);
+}
+
+button {
+    padding: 10px;
+    margin: 5px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    background-color: #555;
+    color: #fff;
+}
+
+button:hover {
+    background-color: #777;
+}
+
+#dark-mode-toggle {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+#camera-toggle {
+    position: absolute;
+    top: 50px;
+    right: 10px;
+}
+
+#webcam-container {
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+}
+
+#webcam-frame {
+    border: 5px solid #555;
+    padding: 10px;
+    border-radius: 10px;
+    width: fit-content;
+    background-color: var(--bg-color-light);
+}
+
+#webcam {
+    border-radius: 10px;
+    max-width: 100%;
+}
+
+.alert-box {
+    display: none;
+    background-color: var(--alert-bg-color);
+    color: var(--alert-text-color);
+    padding: 15px;
+    text-align: center;
+    border-radius: 5px;
+    margin-top: 20px;
+}
+
+.alert-box p {
+    margin: 0;
+    font-size: 18px;
+}
+
+.alert-box button {
+    background-color: green;
+    color: #fff;
+}
+
+.alert-box button:hover {
+    background-color: darkgreen;
+}
+
+.matrix-container {
+    margin-top: 20px;
+    text-align: center;
+}
+
+.matrix-level {
+    display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin: 5px;
+    border-radius: 50%;
+    background-color: grey;
+}
+
+.level-1 {
+    background-color: green;
+}
+
+.level-2 {
+    background-color: yellow;
+}
+
+.level-3 {
+    background-color: orange;
+}
+
+.level-4 {
+    background-color: red;
+}
+
+#description {
+    margin-bottom: 20px;
+    text-align: center;
+}