C

.gitignore

@@ -0,0 +1 @@
+.vercel

MANIFEST.in

@@ -0,0 +1,8 @@
+include *.md
+include requirements.txt
+include LICENSE
+include setup.py
+include ultralytics/assets/bus.jpg
+include ultralytics/assets/zidane.jpg
+recursive-include ultralytics *.yaml
+recursive-exclude __pycache__ *

app.py

@@ -0,0 +1,337 @@
+from ultralytics import YOLO
+import time
+import numpy as np
+import mediapipe as mp
+
+
+import cv2
+from flask import Flask, render_template, request, Response, session, redirect, url_for
+
+from flask_socketio import SocketIO
+import yt_dlp as youtube_dl
+
+
+model_object_detection = YOLO("bisindov2.pt")
+
+app = Flask(__name__)
+
+app.config['SECRET_KEY'] = 'secret!'
+socketio = SocketIO(app, async_mode='threading')
+stop_flag = False
+
+
+######################################################
+classes_translation = {
+    "all": "الكل",
+    "A": "أ",
+    "B": "ب",
+    "C": "ج",
+    "D": "د",
+    "F": "ف",
+    "H": "هـ",
+    "I": "أنا",
+    "J": "جيم",
+    "L": "إل",
+    "M": "إم",
+    "O": "أو",
+    "R": "ر",
+    "T": "ت",
+    "U": "يو",
+    "V": "في",
+    "W": "دبليو",
+    "Z": "زد",
+    "additional": "إضافي",
+    "alcohol": "مدرسة",
+    "allergy": "حساسية",
+    "bacon": "لحم المقدد",
+    "bag": "حقيبة",
+    "barbecue": "شواء",
+    "bill": "فاتورة",
+    "biscuit": "بسكويت",
+    "bitter": "مر",
+    "bread": "خبز",
+    "burger": "برغر",
+    "bye": "وداعاً",
+    "cheese": "جبن",
+    "chicken": "دجاج",
+    "coke": "كوكاكولا",
+    "cold": "بارد",
+    "cost": "تكلفة",
+    "coupon": "كوبون",
+    "cup": "كوب",
+    "dessert": "حلوى",
+    "drink": "شراب",
+    "drive": "قيادة",
+    "eat": "تناول الطعام",
+    "eggs": "بيض",
+    "enjoy": "استمتع",
+    "fork": "شوكة",
+    "french fries": "بطاطس مقلية",
+    "fresh": "طازج",
+    "hello": "مرحبا",
+    "hot": "ساخن",
+    "icecream": "آيس كريم",
+    "ingredients": "مكونات",
+    "juicy": "عصيري",
+    "ketchup": "كاتشب",
+    "lactose": "لاكتوز",
+    "lettuce": "خس",
+    "lid": "غطاء",
+    "manager": "مدير",
+    "menu": "قائمة الطعام",
+    "milk": "حليب",
+    "mustard": "خردل",
+    "napkin": "منديل",
+    "no": "لا",
+    "order": "طلب",
+    "pepper": "فلفل",
+    "pickle": "مخلل",
+    "pizza": "بيتزا",
+    "please": "من فضلك",
+    "ready": "جاهز",
+    "refill": "إعادة ملء",
+    "repeat": "كرر",
+    "safe": "آمن",
+    "salt": "ملح",
+    "sandwich": "ساندويتش",
+    "sauce": "صلصة",
+    "small": "صغير",
+    "soda": "صودا",
+    "sorry": "آسف",
+    "spicy": "حار",
+    "spoon": "ملعقة",
+    "straw": "قش",
+    "sugar": "سكر",
+    "sweet": "حلو",
+    "tissues": "مناديل",
+    "total": "مجموع",
+    "urgent": "عاجل",
+    "vegetables": "خضروات",
+    "warm": "دافئ",
+    "water": "ماء",
+    "what": "ماذا",
+    "yoghurt": "زبادي",
+    "your": "لك",
+    "ILoveYou":"أحبك",
+    "Halo":"مرحبًا"
+    }
+######################################################
+class VideoStreaming(object):
+    def __init__(self):
+        super(VideoStreaming, self).__init__()
+        print ("===== Video Streaming =====")
+        self._preview = False
+        self._flipH = False
+        self._detect = False
+        self._model = False
+        self._mediaPipe = False
+        self._confidence = 75.0
+        self.mp_hands = mp.solutions.hands
+        self.hands = self.mp_hands.Hands()
+
+    @property
+    def confidence(self):
+        return self._confidence
+
+    @confidence.setter
+    def confidence(self, value):
+        self._confidence = int(value)
+
+    @property
+    def preview(self):
+        return self._preview
+
+    @preview.setter
+    def preview(self, value):
+        self._preview = bool(value)
+
+    @property
+    def flipH(self):
+        return self._flipH
+
+    @flipH.setter
+    def flipH(self, value):
+        self._flipH = bool(value)
+
+    @property
+    def detect(self):
+        return self._detect
+
+    @detect.setter
+    def detect(self, value):
+        self._detect = bool(value)
+
+    @property
+    def mediaPipe(self):
+        return self._mediaPipe
+
+    @mediaPipe.setter
+    def mediaPipe(self, value):
+        self._mediaPipe = bool(value)
+
+    def show(self, url):
+        print(url)
+        self._preview = False
+        self._flipH = False
+        self._detect = False
+        self._mediaPipe = False
+
+        self._confidence = 75.0
+        ydl_opts = {
+            "quiet": True,
+            "no_warnings": True,
+            "format": "best",
+            "forceurl": True,
+        }
+
+        if url == '0':
+            cap = cv2.VideoCapture(0)
+        else:
+            
+            ydl = youtube_dl.YoutubeDL(ydl_opts)
+
+            info = ydl.extract_info(url, download=False)
+            url = info["url"]
+
+            cap = cv2.VideoCapture(url)
+
+        while True:
+            if self._preview:
+                if stop_flag:
+                    print("Process Stopped")
+                    return
+
+                grabbed, frame = cap.read()
+                if not grabbed:
+                    break
+                if self.flipH:
+                    frame = cv2.flip(frame, 1)
+
+                if self.detect:
+                    frame_yolo = frame.copy()
+                    results_yolo = model_object_detection.predict(frame_yolo, conf=self._confidence / 100)
+
+                    frame_yolo, labels = results_yolo[0].plot()
+                    list_labels = []
+                    # labels_confidences
+
+                    for label in labels:
+                        confidence = label.split(" ")[-1]
+                        label_name = " ".join(label.split(" ")[:-1])
+                        # Translate the label if it exists in the translation dictionary
+                        translated_label = classes_translation.get(label_name, label_name)
+                        list_labels.append(translated_label)
+                        list_labels.append(confidence)
+                        socketio.emit('label', list_labels)
+
+                if self.mediaPipe:
+                    # Convert the image to RGB for processing with MediaPipe
+                    image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
+                    results = self.hands.process(image)
+                    
+                    if results.multi_hand_landmarks:
+                        for hand_landmarks in results.multi_hand_landmarks:
+                            mp.solutions.drawing_utils.draw_landmarks(
+                                frame,
+                                hand_landmarks,
+                                self.mp_hands.HAND_CONNECTIONS,
+                                landmark_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(color=(255, 0, 0), thickness=4, circle_radius=3),
+                                connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(color=(255, 255, 255), thickness=2, circle_radius=2), 
+                            )
+
+                frame = cv2.imencode(".jpg", frame)[1].tobytes()
+                yield ( 
+                    b'--frame\r\n'
+                    b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n'
+                )
+            else:
+                snap = np.zeros((
+                    1000,
+                    1000
+                ), np.uint8)
+                label = "Streaming Off"
+                H, W = snap.shape
+                font = cv2.FONT_HERSHEY_PLAIN
+                color = (255, 255, 255)
+                cv2.putText(snap, label, (W//2 - 100, H//2),
+                            font, 2, color, 2)
+                frame = cv2.imencode(".jpg", snap)[1].tobytes()
+                yield (b'--frame\r\n'
+                       b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
+
+
+# check_settings()
+VIDEO = VideoStreaming()
+
+
+@app.route('/', methods=['GET', 'POST'])
+def homepage():
+    return render_template('hompage.html')
+
+
+@app.route('/index', methods=['GET', 'POST'])
+def index():
+    print("index")
+    global stop_flag
+    stop_flag = False
+    if request.method == 'POST':
+        print("Index post request")
+        url = request.form['url']
+        print("index: ", url)
+        session['url'] = url
+        return redirect(url_for('index'))
+    return render_template('index.html')
+
+@app.route('/video_feed')
+def video_feed():
+    url = session.get('url', None)
+    print("video feed: ", url)
+    if url is None:
+        return redirect(url_for('homepage'))
+
+    return Response(VIDEO.show(url), mimetype='multipart/x-mixed-replace; boundary=frame')
+
+# * Button requests
+@app.route("/request_preview_switch")
+def request_preview_switch():
+    VIDEO.preview = not VIDEO.preview
+    print("*"*10, VIDEO.preview)
+    return "nothing"
+
+@app.route("/request_flipH_switch")
+def request_flipH_switch():
+    VIDEO.flipH = not VIDEO.flipH
+    print("*"*10, VIDEO.flipH)
+    return "nothing"
+
+@app.route("/request_run_model_switch")
+def request_run_model_switch():
+    VIDEO.detect = not VIDEO.detect
+    print("*"*10, VIDEO.detect)
+    return "nothing"
+
+@app.route("/request_mediapipe_switch")
+def request_mediapipe_switch():
+    VIDEO.mediaPipe = not VIDEO.mediaPipe
+    print("*"*10, VIDEO.mediaPipe)
+    return "nothing"
+
+@app.route('/update_slider_value', methods=['POST'])
+def update_slider_value():
+    slider_value = request.form['sliderValue']
+    VIDEO.confidence = slider_value
+    return 'OK'
+
+@app.route('/stop_process')
+def stop_process():
+    print("Process stop Request")
+    global stop_flag
+    stop_flag = True
+    return 'Process Stop Request'
+
+@socketio.on('connect')
+def test_connect():
+    print('Connected')
+
+if __name__ == "__main__":
+    socketio.run(app, debug=False)

bisindo.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e83f02d6ca8848205da96f4f9b2f6ae828be81b04b3f85dcbe1aeb7aaeb92bc
+size 22568291

bisindov2.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f8a7cf3abad3a097d891edc2c9fc23ecf1dde738335ea4edb70c7c3698e19a9c
+size 22565368

camera_settings.py

@@ -0,0 +1,53 @@
+import os
+import cv2
+
+
+# attrib_list = {
+#     "exposure": cv2.CAP_PROP_EXPOSURE,
+#     "contrast": cv2.CAP_PROP_CONTRAST
+# }
+
+
+def check_settings():
+    VIDEO_CHECK = cv2.VideoCapture(0)
+
+    if not os.path.exists("camera_settings.log"):
+        f = open("camera_settings.log", "w")
+        for attrib, index in attrib_list.items():
+            f.writelines(f"{attrib} = {VIDEO_CHECK.get(index)}\n")
+        f.close()
+
+    else:
+        f = open("camera_settings.log", "r")
+        lines = f.read().split("\n")
+        for line in lines:
+            attrib = line.split(" = ")
+            if attrib[0] in attrib_list.keys():
+                VIDEO_CHECK.set(attrib_list[attrib[0]], eval(attrib[1]))
+        f.close()
+
+    print("*"*28)
+    print("* Checking camera settings *")
+    print("*"*28)
+    for attrib, index in attrib_list.items():
+        print(f"{attrib} = {VIDEO_CHECK.get(index)}")
+
+    VIDEO_CHECK.release()
+
+
+def reset_settings():
+    if not os.path.exists("camera_settings.log"):
+        print("'camera_settings.log' does not exist!")
+        print("Verify your camera settings!")
+        return False
+    else:
+        VIDEO_CHECK = cv2.VideoCapture(0)
+        f = open("camera_settings.log", "r")
+        lines = f.read().split("\n")
+        for line in lines:
+            attrib = line.split(" = ")
+            if attrib[0] in attrib_list.keys():
+                VIDEO_CHECK.set(attrib_list[attrib[0]], eval(attrib[1]))
+        f.close()
+        VIDEO_CHECK.release()
+    return True

setup.cfg

@@ -0,0 +1,56 @@
+# Project-wide configuration file, can be used for package metadata and other toll configurations
+# Example usage: global configuration for PEP8 (via flake8) setting or default pytest arguments
+# Local usage: pip install pre-commit, pre-commit run --all-files
+
+[metadata]
+license_files = LICENSE
+description_file = README.md
+
+[tool:pytest]
+norecursedirs =
+    .git
+    dist
+    build
+addopts =
+    --doctest-modules
+    --durations=25
+    --color=yes
+
+[flake8]
+max-line-length = 120
+exclude = .tox,*.egg,build,temp
+select = E,W,F
+doctests = True
+verbose = 2
+# https://pep8.readthedocs.io/en/latest/intro.html#error-codes
+format = pylint
+# see: https://www.flake8rules.com/
+ignore = E731,F405,E402,W504,E501
+    # E731: Do not assign a lambda expression, use a def
+    # F405: name may be undefined, or defined from star imports: module
+    # E402: module level import not at top of file
+    # W504: line break after binary operator
+    # E501: line too long
+    # removed:
+    # F401: module imported but unused
+    # E231: missing whitespace after ‘,’, ‘;’, or ‘:’
+    # E127: continuation line over-indented for visual indent
+    # F403: ‘from module import *’ used; unable to detect undefined names
+
+
+[isort]
+# https://pycqa.github.io/isort/docs/configuration/options.html
+line_length = 120
+# see: https://pycqa.github.io/isort/docs/configuration/multi_line_output_modes.html
+multi_line_output = 0
+
+[yapf]
+based_on_style = pep8
+spaces_before_comment = 2
+COLUMN_LIMIT = 120
+COALESCE_BRACKETS = True
+SPACES_AROUND_POWER_OPERATOR = True
+SPACE_BETWEEN_ENDING_COMMA_AND_CLOSING_BRACKET = True
+SPLIT_BEFORE_CLOSING_BRACKET = False
+SPLIT_BEFORE_FIRST_ARGUMENT = False
+# EACH_DICT_ENTRY_ON_SEPARATE_LINE = False

setup.py

@@ -0,0 +1,65 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+
+import re
+from pathlib import Path
+
+import pkg_resources as pkg
+from setuptools import find_packages, setup
+
+# Settings
+FILE = Path(__file__).resolve()
+PARENT = FILE.parent  # root directory
+README = (PARENT / 'README.md').read_text(encoding='utf-8')
+REQUIREMENTS = [f'{x.name}{x.specifier}' for x in pkg.parse_requirements((PARENT / 'requirements.txt').read_text())]
+PKG_REQUIREMENTS = ['sentry_sdk']  # pip-only requirements
+
+
+def get_version():
+    file = PARENT / 'ultralytics/__init__.py'
+    return re.search(r'^__version__ = [\'"]([^\'"]*)[\'"]', file.read_text(encoding='utf-8'), re.M)[1]
+
+
+setup(
+    name='ultralytics',  # name of pypi package
+    version=get_version(),  # version of pypi package
+    python_requires='>=3.7',
+    license='GPL-3.0',
+    description='Ultralytics YOLOv8',
+    long_description=README,
+    long_description_content_type='text/markdown',
+    url='https://github.com/ultralytics/ultralytics',
+    project_urls={
+        'Bug Reports': 'https://github.com/ultralytics/ultralytics/issues',
+        'Funding': 'https://ultralytics.com',
+        'Source': 'https://github.com/ultralytics/ultralytics'},
+    author='Ultralytics',
+    author_email='[email protected]',
+    packages=find_packages(),  # required
+    include_package_data=True,
+    install_requires=REQUIREMENTS + PKG_REQUIREMENTS,
+    extras_require={
+        'dev': ['check-manifest', 'pytest', 'pytest-cov', 'coverage', 'mkdocs-material', 'mkdocstrings[python]'],
+        'export': ['coremltools>=6.0', 'onnx', 'onnxsim', 'onnxruntime', 'openvino-dev>=2022.3'],
+        'tf': ['onnx2tf', 'sng4onnx', 'tflite_support', 'tensorflow']},
+    classifiers=[
+        'Development Status :: 4 - Beta',
+        'Intended Audience :: Developers',
+        'Intended Audience :: Education',
+        'Intended Audience :: Science/Research',
+        'License :: OSI Approved :: GNU General Public License v3 (GPLv3)',
+        'Programming Language :: Python :: 3',
+        'Programming Language :: Python :: 3.7',
+        'Programming Language :: Python :: 3.8',
+        'Programming Language :: Python :: 3.9',
+        'Programming Language :: Python :: 3.10',
+        'Programming Language :: Python :: 3.11',
+        'Topic :: Software Development',
+        'Topic :: Scientific/Engineering',
+        'Topic :: Scientific/Engineering :: Artificial Intelligence',
+        'Topic :: Scientific/Engineering :: Image Recognition',
+        'Operating System :: POSIX :: Linux',
+        'Operating System :: MacOS',
+        'Operating System :: Microsoft :: Windows', ],
+    keywords='machine-learning, deep-learning, vision, ML, DL, AI, YOLO, YOLOv3, YOLOv5, YOLOv8, HUB, Ultralytics',
+    entry_points={
+        'console_scripts': ['yolo = ultralytics.yolo.cfg:entrypoint', 'ultralytics = ultralytics.yolo.cfg:entrypoint']})

static/script.js

@@ -0,0 +1,194 @@
+//Updating Frames in Image tag to Show Video Stream
+window.addEventListener('load', function () {
+    console.log("Window UP")
+});
+var show_ad = false;
+
+$(document).ready(function () {
+
+
+    $("#banner2").hide();
+    $("#closeAd").click(function () {
+        $("#banner2").hide(1000);
+    });
+});
+
+function startCamera() {
+    var url = '0';
+    $('#urlForm').attr('action', '/index'); 
+    $('#urlForm').attr('method', 'POST'); 
+    $('#urlForm').find('#url').val(url);
+    $('#urlForm').submit();
+}
+
+function startVideo() {
+    var url = $('#url').val();
+    $('#urlForm').attr('action', '/index'); 
+    $('#urlForm').attr('method', 'POST'); 
+    $('#urlForm').find('#url').val(url);
+    $('#urlForm').submit();
+}
+
+function stopProcess(message) {
+    console.log("Stop BUTTON");
+    const terminalData = document.getElementById('terminal').innerHTML;
+    document.getElementById('terminal').innerHTML = terminalData + "<br><br><center>" + message + "</center><br><br>";
+    fetch('/stop_process')
+        .then(response => response.text())
+        .then(message => {
+            console.log(message);
+            // Redirect to homepage after stopping the process
+            window.location.href = '/';
+        })
+        .catch(error => console.error(error));
+}
+
+
+//This Code is used to Communicate b/w Client & Server via SOCKETIO
+var socket = io.connect('http://127.0.0.1:5000/');
+
+// Variabel untuk menyimpan kata-kata berturut-turut
+let consecutiveWords = [];
+let finalSentence = "";
+let wordCounter = 0;
+
+function appendToTerminal(message) {
+    var terminal = document.getElementById("terminal");
+    var p = document.createElement("p");
+    p.innerHTML = `<table class="table table-striped text-center" style="border: none;">
+                    <tr class="row">
+                        <td class="col-md-6" style="color: #01ECEC; border: none;">${message[0]}</td>
+                        <td class="col-md-6" style="color: #01ECEC; border: none;">${message[1]}</td>
+                    </tr>
+                </table>`;
+    terminal.appendChild(p);
+    terminal.scrollTop = terminal.scrollHeight;
+
+    if (consecutiveWords.length === 0 || consecutiveWords[consecutiveWords.length - 1] === message[0]) {
+        consecutiveWords.push(message[0]);
+        wordCounter++; // Menambah jumlah kemunculan kata yang sama
+    } else {
+        consecutiveWords = [message[0]];
+        wordCounter = 1; // Mengatur ulang jumlah kemunculan kata yang sama
+    }
+
+    if (wordCounter >= 7 && message[0] !== "G") {
+        finalSentence += (finalSentence.length > 0 ? " " : "") + consecutiveWords[0];
+        document.getElementById("finalSentencePara").innerText = finalSentence;
+        consecutiveWords = [];
+        wordCounter = 0;
+    }
+}
+
+//Updating Terminal with Detected Objects
+socket.on("label", (data) => {
+    appendToTerminal(data);
+});
+
+//Code For All Switches
+function toggleHSwitch() {
+    var switchElement = $("#flip-horizontal");
+    var switchIsOn = switchElement.is(":checked");
+
+    if (switchIsOn) {
+        console.log("SWITCH ON")
+        $.getJSON("/request_flipH_switch", function (data) {
+            console.log("Switch on request sent.");
+        });
+    } else {
+        console.log("SWITCH OFF")
+        $.getJSON("/request_flipH_switch", function (data) {
+            console.log("Switch off request sent.");
+        });
+    }
+}
+
+function toggleMediaPipeSwitch() {
+    var switchElement = $("#mediapipe");
+    var switchIsOn = switchElement.is(":checked");
+
+    if (switchIsOn) {
+        console.log("SWITCH ON")
+        $.getJSON("/request_mediapipe_switch", function (data) {
+            console.log("Switch on request sent.");
+        });
+    } else {
+        console.log("SWITCH OFF")
+        $.getJSON("/request_mediapipe_switch", function (data) {
+            console.log("Switch off request sent.");
+        });
+    }
+}
+
+function toggleDetSwitch() {
+
+    var switchElement = $("#run_detection");
+    var switchIsOn = switchElement.is(":checked");
+
+    if (switchIsOn) {
+        console.log("SWITCH ON")
+        $.getJSON("/request_run_model_switch", function (data) {
+            console.log("Switch on request sent.");
+        });
+    } else {
+        console.log("SWITCH OFF")
+        $.getJSON("/request_run_model_switch", function (data) {
+            console.log("Switch off request sent.");
+        });
+    }
+}
+
+function toggleOffSwitch() {
+    var switchElement = $("#turn_off");
+    var switchIsOn = switchElement.is(":checked");
+
+    if (switchIsOn) {
+        console.log("Camera ON")
+        $.getJSON("/request_preview_switch", function (data) {
+            console.log("Switch on request sent.");
+        });
+    } else {
+        console.log("Camera OFF")
+        $.getJSON("/request_preview_switch", function (data) {
+            console.log("Switch off request sent.");
+        });
+    }
+}
+
+$(document).ready(function () {
+    // Get the slider element
+    var slider = $('#slider');
+
+    // Attach the event listener to the slider element
+    slider.on('input', function () {
+        // Get the value of the slider
+        var sliderValue = slider.val();
+
+        // Call the updateSliderValue() function and pass in the slider value
+        updateSliderValue(sliderValue);
+    });
+});
+
+
+function updateSliderValue(sliderValue) {
+    console.log(sliderValue)
+    $.ajax({
+        type: 'POST',
+        url: '/update_slider_value',
+        data: {'sliderValue': sliderValue},
+        success: function () {
+            console.log('Slider value updated successfully!');
+        },
+        error: function () {
+            console.log('Error updating slider value!');
+        }
+    });
+    document.getElementById("conf_display").innerHTML = sliderValue
+}
+
+function toggleTheme() {
+    if (document.body.classList.contains("dark"))
+        document.body.classList.remove("dark");
+    else
+        document.body.classList.add("dark");
+}

static/style.css

@@ -0,0 +1,217 @@
+/* * Reset all elements */
+* {
+    margin: 0;
+    padding: 0;
+}
+
+
+/* * HTML elements */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    font-size: 18px;
+    font-weight: normal;
+    line-height: 1.5em;
+}
+
+
+/* * Local selectors */
+#container {
+    width: 100%;
+    height: 586px;
+    border: 8px #2c374a solid;
+    background-color: #0F172A;
+    border-radius: 5px;
+}
+
+#videoElement {
+    height: 570px;
+    width: 100%;
+    background-color: #0F172A;
+
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#terminal {
+    border-radius: 5px;
+    border: 5px #1C2637 solid;
+    font-family: monospace;
+    font-size: 12px;
+    background-color: #0F172A;
+    height: 490px;
+    overflow-y: scroll;
+}
+
+#control {
+    margin-top: 40px;
+}
+
+.switch {
+    position: relative;
+    display: inline-block;
+    width: 60px;
+    height: 34px;
+}
+
+.switch input {
+    display: none;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #1C2637;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 26px;
+    width: 26px;
+    left: 4px;
+    bottom: 4px;
+    background-color: #0275d8;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #03DD6F;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #000000;
+}
+
+input:checked + .slider:before {
+    transform: translateX(26px);
+    background-color: #1C2637;
+}
+
+/* Rounded sliders */
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
+
+.container1 {
+    position: relative;
+    z-index: 0;
+}
+
+.overlay1 {
+    font-size: 13px;
+    position: absolute;
+    bottom: 0;
+    right: 80px;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.overlay2 {
+    font-size: 13px;
+    position: absolute;
+    bottom: 25px;
+    right: 80px;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.overlay3 {
+    font-size: 13px;
+    position: absolute;
+    bottom: 50px;
+    right: 80px;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.no-link {
+    color: inherit;
+    text-decoration: none;
+}
+
+button.frame {
+    background: none !important;
+    border: none;
+    padding: 0 !important;
+    /*optional*/
+    font-family: arial, sans-serif;
+    /*input has OS specific font-family*/
+    color: darkred;
+    cursor: pointer;
+}
+
+@keyframes jumbo {
+    from {
+        background-position: 50% 50%, 50% 50%;
+    }
+    to {
+        background-position: 350% 50%, 350% 50%;
+    }
+}
+
+.jumbo {
+    --stripes: repeating-linear-gradient(
+        100deg,
+        #0f172a 0%,
+        #0f172a 7%,
+        transparent 10%,
+        transparent 12%,
+        #0f172a 16%
+    );
+    --stripesDark: repeating-linear-gradient(
+        100deg,
+        #0f172a 0%,
+        #0f172a 7%,
+        transparent 10%,
+        transparent 12%,
+        #0f172a 16%
+    );
+    --rainbow: repeating-linear-gradient(
+        100deg,
+        #60a5fa 10%,
+        #e879f9 15%,
+        #60a5fa 20%,
+        #5eead4 25%,
+        #60a5fa 30%
+    );
+    background-image: var(--stripesDark), var(--rainbow);
+    
+    background-size: 300%, 200%;
+    background-position: 50% 50%, 50% 50%;
+
+    filter: blur(10px) opacity(50%) saturate(200%);
+
+    mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
+
+    pointer-events: none;
+}
+
+.jumbo::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--stripes), var(--rainbow);
+    background-size: 200%, 100%;
+    animation: jumbo 60s linear infinite;
+    background-attachment: fixed;
+    mix-blend-mode: difference;
+}
+
+.dark .jumbo {
+    background-image: var(--stripesDark), var(--rainbow);
+    filter: blur(10px) opacity(50%) saturate(200%);
+}
+.dark .jumbo::after {
+    background-image: var(--stripesDark), var(--rainbow);
+}

templates/hompage copy.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>BISINDO Translator</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/2.2.19/tailwind.min.css">
+
+    <style>
+        html {
+            font-family: 'Inter', sans-serif;
+        }
+        body {
+            background-color: #1F2937;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .card {
+            max-width: 400px;
+            background-color: #4B5563;
+            padding: 30px;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .card h1, .card h2 {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        input, button {
+            border: 1px solid #CBD5E0;
+            background-color: #4C566A;
+            color: #E5E7EB;
+            padding: 10px;
+            border-radius: 5px;
+            transition: all 0.3s ease;
+        }
+        input:focus, button:focus {
+            outline: none;
+            border-color: #2563EB;
+        }
+        button {
+            cursor: pointer;
+        }
+        button:hover {
+            background-color: #6B7280;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="card">
+        <h1 class="text-4xl font-bold">Mohamed_sign_language</h1>
+        <h2 class="text-4xl font-bold">Sign Language Translation</h2>
+        <form id="urlForm">
+            <input type="text" id="url" name="url" class="text-sm rounded-lg block w-full mb-4" placeholder="Enter your video URL here..." required>
+        </form>
+        <button id="startStream" type="button" onclick="startVideo()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">Stream</button>
+        <button id="startCamera" type="button" onclick="startCamera()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">Camera</button>
+    </div>
+</body>
+
+</html>

templates/hompage.html

@@ -0,0 +1,80 @@
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mohamed</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+            crossorigin="anonymous"></script>
+
+    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+    <!-- Add this to the <head> section of your HTML file -->
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
+    <style>
+      html {
+          font-family: 'Inter', sans-serif;
+      }
+      body {
+          background-color: #1F2937;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: 100vh;
+          margin: 0;
+      }
+      .card {
+          max-width: 400px;
+          background-color: #4B5563;
+          padding: 30px;
+          border-radius: 10px;
+          box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      }
+      .card h1, .card h2 {
+          text-align: center;
+          margin-bottom: 20px;
+      }
+      input, button {
+          border: 1px solid #CBD5E0;
+          background-color: #4C566A;
+          color: #E5E7EB;
+          padding: 10px;
+          border-radius: 5px;
+          transition: all 0.3s ease;
+      }
+      input:focus, button:focus {
+          outline: none;
+          border-color: #2563EB;
+      }
+      button {
+          cursor: pointer;
+      }
+      button:hover {
+          background-color: #6B7280;
+      }
+  </style>
+</head>
+
+<body>
+    <div class="card">
+        <h1 class="text-2xl font-bold">محمد لغة الإشارة</h1>
+        <h2 class="text-4xl font-bold">ترجمة اللغة الإشارية</h2>
+        <form id="urlForm">
+            <input type="text" id="url" name="url" class="text-sm rounded-lg block w-full mb-4" placeholder="أدخل رابط الفيديو هنا..." required>
+        </form>
+        <button id="startStream" type="button" onclick="startVideo()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">URL بث</button>
+        <button id="startCamera" type="button" onclick="startCamera()" class="font-medium rounded-lg text-sm px-5 py-3 bg-gray-800 hover:bg-gray-600 focus:ring-gray-600">كاميرا</button>
+    </div>
+  </body>
+
+</html>

templates/index copy.html

@@ -0,0 +1,72 @@
+{#L1 labels/object#}
+{#L2 Logo Detection#}
+{#L3 Text/OCR#}
+
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>BISINDO Translator</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <!-- Font Awesome CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"
+          integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"
+          integrity="sha512-OivR4OdSsE1onDm/i3J3Hpsm5GmOVvr9r49K3jJ0dnsxVzZgaOJ5MfxEAxCyGrzWozL9uJGKz6un3A7L+redIQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <!-- Bootstrap Icons CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <!-- DataTables Bootstrap CSS -->
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
+    <!-- Flowbite CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
+    <!-- Google Fonts -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
+</head>
+
+<body class="bg-light-grey">
+    <div class="container mt-5">
+        <div class="card bg-medium-grey text-white">
+            <div class="card-header bg-dark-grey">
+                BISINDO Translator
+            </div>
+            <div class="card-body">
+                <div class="grid grid-cols-12 gap-4">
+                    <!-- Controls -->
+                    <div class="col-span-2">
+                        <h2 class="border-b border-grey py-4 mb-4 text-3xl font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-light-grey">Controls</h2>
+                        <!-- Controls content here -->
+                    </div>
+                    <!-- Video -->
+                    <div class="col-span-8">
+                        <!-- Video content here -->
+                    </div>
+                    <!-- Terminal -->
+                    <div class="col-span-2">
+                        <h2 class="border-b border-grey py-4 mb-4 text-3xl flex justify-end font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-light-grey">Output</h2>
+                        <!-- Terminal content here -->
+                    </div>
+                </div>
+                <!-- Final Sentence -->
+                <div class="flex items-center mx-12 text-center content-start gap-4 border-b border-grey py-4 justify-center">
+                    <span class="text-center inline-block px-3 py-1 text-xs font-bold tracking-wide text-dark-grey bg-info rounded-full">Collecting every 10 consecutive occurrences of the same word</span>
+                </div>
+                <div>
+                    <p id="finalSentencePara" class="text-light-grey mt-4 text-center"></p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Bootstrap JS -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+
+</html>

templates/index.html

@@ -0,0 +1,120 @@
+{#L1 labels/object#}
+{#L2 Logo Detection#}
+{#L3 Text/OCR#}
+
+
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Mohamed sign</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+            crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+    <!-- Add this to the <head> section of your HTML file -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"
+          integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"
+          integrity="sha512-OivR4OdSsE1onDm/i3J3Hpsm5GmOVvr9r49K3jJ0dnsxVzZgaOJ5MfxEAxCyGrzWozL9uJGKz6un3A7L+redIQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+    <link rel="stylesheet" type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
+
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
+
+</head>
+<body class="bg-gray-900"> <!-- تغيير لون الخلفية إلى رمادي 900 -->
+
+    <div class="grid grid-cols-12 gap-4 mx-8 mt-8" style="color: gray; border-radius: 10px;"> <!-- أضفت أسلوبًا لحاوية الشبكة -->
+
+        <!-- Controls -->
+        <div class="col-span-2 ml-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div التحكم -->
+            <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">التحكم</h1> <!-- تغيير لون الحدود والنص -->
+            <div class="border-b border-gray-800" style="padding: 10px;"> <!-- أضفت حشوًا للحدود الداخلية -->
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="turn_off" value="1" name="turn_off" type="checkbox" onclick="toggleOffSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="turn_off" class="form-label text-gray-500">عرض الفيديو</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="run_detection" value="0" name="run_detection" type="checkbox" onclick="toggleDetSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="run_detection" class="form-label text-gray-500">تشغيل الكشف</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="mediapipe" value="0" name="mediapipe" type="checkbox" onclick="toggleMediaPipeSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="mediapipe" class="form-label text-gray-500">عرض العلامات</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="flip-horizontal" value="0" name="flip-horizontal" type="checkbox" onclick="toggleHSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="flip-horizontal" class="form-label text-gray-500">قلب الفيديو</label><br>
+                </div>
+            </div>
+            <div class="gap-3 py-4 text-center border-b border-gray-800 mb-5">
+                <form action="/" method="POST" style="text-align: center;" class="mb-4" >
+                    <label for="slider" class="form-label text-gray-500">حد الثقة</label>
+                    <input type="range" id="slider" name="slider" min="1" max="100">
+                </form>
+                <input type="hidden" id="sliderValue" name="sliderValue" value="75">
+                <span class="rounded-lg py-2 px-3 bg-gray-800 text-gray-500" id="conf_display">75</span> <!-- تغيير لون الخلفية والنص -->
+            </div>
+            <button class="text-white focus:ring-4 focus:outline-none mt-1.5 font-medium rounded-lg text-sm w-full py-2.5 text-center bg-gray-700 hover:bg-gray-800 focus:ring-gray-900" id="stop-button" type="button" onclick="stopProcess('Stop Request')">العودة للصفحة الرئيسية</button> <!-- تغيير نمط الزر -->
+        </div>
+
+        <!-- Video -->
+        <div class="col-span-8 mx-4 mt-3" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الفيديو -->
+            <div id="container">
+                <img class="center" src="/video_feed" id="videoElement">
+            </div>
+        </div>
+
+        <!-- Terminal -->
+        <div class="col-span-2 mr-4" style="background-color: lightgrey; border-radius: 10px;"> <!-- أضفت لون خلفية ونصبت دائرة لـ div الطرفية -->
+            <h2 class="border-b border-gray-800 py-4 mb-4 text-3xl flex justify-end font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-gray-500">الناتج</h1> <!-- تغيير لون الحدود والنص -->
+            <div id="terminal" class="w-full"></div>
+        </div>
+    </div>
+
+    <div>
+        <p id="finalSentencePara" class="text-gray-500 mt-4 text-center"> <!-- تغيير لون النص -->
+        </p>
+    </div>
+</body>
+
+
+
+
+</html>

templates/indexv1.html

@@ -0,0 +1,112 @@
+{#L1 labels/object#}
+{#L2 Logo Detection#}
+{#L3 Text/OCR#}
+
+
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Live Object Detection</title>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
+            crossorigin="anonymous"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='script.js') }}"></script>
+    <!-- Add this to the <head> section of your HTML file -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"/>
+
+
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css"
+          integrity="sha512-xX2rYBFJSj86W54Fyv1de80DWBq7zYLn2z0I9bIhQG+rxIF6XVJUpdGnsNHWRa6AvP89vtFupEPDP8eZAtu9qA=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/brands.min.css"
+          integrity="sha512-OivR4OdSsE1onDm/i3J3Hpsm5GmOVvr9r49K3jJ0dnsxVzZgaOJ5MfxEAxCyGrzWozL9uJGKz6un3A7L+redIQ=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
+          integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
+
+    <link rel="stylesheet" type="text/css"
+          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
+
+
+    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.0/css/dataTables.bootstrap5.min.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
+
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.css" rel="stylesheet" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.0/flowbite.min.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap">
+
+</head>
+<body class="bg-slate-900">
+    <div class="grid grid-cols-12 gap-4 m-8">
+        <div class="col-span-6">
+            <div class="container1" style="text-align: center;">
+                <div id="container">
+                    <img class="center" src="/video_feed" id="videoElement">
+                </div>
+            </div>
+            <div id="terminal" class="w-full"></div>
+        </div>
+        <div class="col-span-6 mx-2">
+            <div class="flex justify-between border-b border-gray-700 py-4 mt-10 mx-8 mb-4 ">
+                <h2 class="text-3xl font-bold leading-none tracking-tight md:text-4xl lg:text-5xl text-cyan-500 ">Video Stream</h1>
+                <button class="text-white  focus:ring-4 focus:outline-none font-medium rounded-lg text-sm w-full sm:w-auto px-4 py-2.5 text-center bg-blue-600 hover:bg-blue-700 focus:ring-blue-800" id="stop-button" type="button" onclick="stopProcess('Stop Request')">Back to Homepage</button>
+            </div>
+            <div class="mx-8 border-b border-gray-700">
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="turn_off" value="1" name="turn_off" type="checkbox" onclick="toggleOffSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="turn_off" class="form-label text-cyan-500">Show Stream</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="run_detection" value="0" name="run_detection" type="checkbox"
+                               onclick="toggleDetSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="run_detection" class="form-label text-cyan-500">Run Detection</label><br>
+                </div>
+                <div class="flex gap-3 mb-4">
+                    <label class="switch">
+                        <input id="flip-horizontal" value="0" name="flip-horizontal" type="checkbox"
+                               onclick="toggleHSwitch()"/>
+                        <span class="slider round"></span>
+                    </label>
+                    <label for="flip-horizontal" class="form-label text-cyan-500">Flip Horizontally</label><br>
+                </div>
+            </div>
+
+            <div class="mx-8 flex items-center content-center gap-3 justify-between py-4">
+                <form action="/" method="POST" style="text-align: center;" class="flex justify-between w-full">
+                    <label for="slider" class="form-label text-cyan-500">Confidence Threshold</label>
+                    <input type="range" id="slider" name="slider" min="50" max="100">
+                </form>
+                <input type="hidden" id="sliderValue" name="sliderValue" value="75">
+                <span class="rounded-lg py-2 px-3 bg-slate-800 mr-6 text-cyan-500" id="conf_display">75</span>
+            </div>
+
+            <div class="flex items-center content-start gap-4 border-b border-gray-700 py-4 mt-10 mx-8 mb-4">
+                <h2 class=" text-2xl font-semibold leading-none tracking-tight md:text-3xl lg:text-4xl text-cyan-500 ">Final Sentence</h1>
+                <span class="inline-block px-3 py-1 text-xs font-bold tracking-wide mt-2 text-gray-900 bg-blue-500 rounded-full">Collecting every 10 consecutive occurrences of the same word</span>
+            </div>
+
+            <div>
+                <p id="finalSentencePara" class="text-cyan-200 mx-8">
+                </p>
+            </div>
+
+        </div>
+    </div>
+</body>
+</html>

tests/test_cli.py

@@ -0,0 +1,81 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+
+import subprocess
+from pathlib import Path
+
+from ultralytics.yolo.utils import LINUX, ONLINE, ROOT, SETTINGS
+
+MODEL = Path(SETTINGS['weights_dir']) / 'yolov8n'
+CFG = 'yolov8n'
+
+
+def run(cmd):
+    # Run a subprocess command with check=True
+    subprocess.run(cmd.split(), check=True)
+
+
+def test_special_modes():
+    run('yolo checks')
+    run('yolo settings')
+    run('yolo help')
+
+
+# Train checks ---------------------------------------------------------------------------------------------------------
+def test_train_det():
+    run(f'yolo train detect model={CFG}.yaml data=coco8.yaml imgsz=32 epochs=1 v5loader')
+
+
+def test_train_seg():
+    run(f'yolo train segment model={CFG}-seg.yaml data=coco8-seg.yaml imgsz=32 epochs=1')
+
+
+def test_train_cls():
+    run(f'yolo train classify model={CFG}-cls.yaml data=imagenet10 imgsz=32 epochs=1')
+
+
+# Val checks -----------------------------------------------------------------------------------------------------------
+def test_val_detect():
+    run(f'yolo val detect model={MODEL}.pt data=coco8.yaml imgsz=32')
+
+
+def test_val_segment():
+    run(f'yolo val segment model={MODEL}-seg.pt data=coco8-seg.yaml imgsz=32')
+
+
+def test_val_classify():
+    run(f'yolo val classify model={MODEL}-cls.pt data=imagenet10 imgsz=32')
+
+
+# Predict checks -------------------------------------------------------------------------------------------------------
+def test_predict_detect():
+    run(f"yolo predict model={MODEL}.pt source={ROOT / 'assets'} imgsz=32 save save_crop save_txt")
+    if ONLINE:
+        run(f'yolo predict model={MODEL}.pt source=https://ultralytics.com/images/bus.jpg imgsz=32')
+        run(f'yolo predict model={MODEL}.pt source=https://ultralytics.com/assets/decelera_landscape_min.mov imgsz=32')
+        run(f'yolo predict model={MODEL}.pt source=https://ultralytics.com/assets/decelera_portrait_min.mov imgsz=32')
+
+
+def test_predict_segment():
+    run(f"yolo predict model={MODEL}-seg.pt source={ROOT / 'assets'} imgsz=32 save save_txt")
+
+
+def test_predict_classify():
+    run(f"yolo predict model={MODEL}-cls.pt source={ROOT / 'assets'} imgsz=32 save save_txt")
+
+
+# Export checks --------------------------------------------------------------------------------------------------------
+def test_export_detect_torchscript():
+    run(f'yolo export model={MODEL}.pt format=torchscript')
+
+
+def test_export_segment_torchscript():
+    run(f'yolo export model={MODEL}-seg.pt format=torchscript')
+
+
+def test_export_classify_torchscript():
+    run(f'yolo export model={MODEL}-cls.pt format=torchscript')
+
+
+def test_export_detect_edgetpu(enabled=False):
+    if enabled and LINUX:
+        run(f'yolo export model={MODEL}.pt format=edgetpu')

tests/test_engine.py

@@ -0,0 +1,93 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+
+from pathlib import Path
+
+from ultralytics.yolo.cfg import get_cfg
+from ultralytics.yolo.utils import DEFAULT_CFG, ROOT, SETTINGS
+from ultralytics.yolo.v8 import classify, detect, segment
+
+CFG_DET = 'yolov8n.yaml'
+CFG_SEG = 'yolov8n-seg.yaml'
+CFG_CLS = 'squeezenet1_0'
+CFG = get_cfg(DEFAULT_CFG)
+MODEL = Path(SETTINGS['weights_dir']) / 'yolov8n'
+SOURCE = ROOT / 'assets'
+
+
+def test_detect():
+    overrides = {'data': 'coco8.yaml', 'model': CFG_DET, 'imgsz': 32, 'epochs': 1, 'save': False}
+    CFG.data = 'coco8.yaml'
+
+    # Trainer
+    trainer = detect.DetectionTrainer(overrides=overrides)
+    trainer.train()
+
+    # Validator
+    val = detect.DetectionValidator(args=CFG)
+    val(model=trainer.best)  # validate best.pt
+
+    # Predictor
+    pred = detect.DetectionPredictor(overrides={'imgsz': [64, 64]})
+    result = pred(source=SOURCE, model=f'{MODEL}.pt')
+    assert len(result), 'predictor test failed'
+
+    overrides['resume'] = trainer.last
+    trainer = detect.DetectionTrainer(overrides=overrides)
+    try:
+        trainer.train()
+    except Exception as e:
+        print(f'Expected exception caught: {e}')
+        return
+
+    Exception('Resume test failed!')
+
+
+def test_segment():
+    overrides = {'data': 'coco8-seg.yaml', 'model': CFG_SEG, 'imgsz': 32, 'epochs': 1, 'save': False}
+    CFG.data = 'coco8-seg.yaml'
+    CFG.v5loader = False
+    # YOLO(CFG_SEG).train(**overrides)  # works
+
+    # trainer
+    trainer = segment.SegmentationTrainer(overrides=overrides)
+    trainer.train()
+
+    # Validator
+    val = segment.SegmentationValidator(args=CFG)
+    val(model=trainer.best)  # validate best.pt
+
+    # Predictor
+    pred = segment.SegmentationPredictor(overrides={'imgsz': [64, 64]})
+    result = pred(source=SOURCE, model=f'{MODEL}-seg.pt')
+    assert len(result), 'predictor test failed'
+
+    # Test resume
+    overrides['resume'] = trainer.last
+    trainer = segment.SegmentationTrainer(overrides=overrides)
+    try:
+        trainer.train()
+    except Exception as e:
+        print(f'Expected exception caught: {e}')
+        return
+
+    Exception('Resume test failed!')
+
+
+def test_classify():
+    overrides = {'data': 'imagenet10', 'model': 'yolov8n-cls.yaml', 'imgsz': 32, 'epochs': 1, 'save': False}
+    CFG.data = 'imagenet10'
+    CFG.imgsz = 32
+    # YOLO(CFG_SEG).train(**overrides)  # works
+
+    # Trainer
+    trainer = classify.ClassificationTrainer(overrides=overrides)
+    trainer.train()
+
+    # Validator
+    val = classify.ClassificationValidator(args=CFG)
+    val(model=trainer.best)
+
+    # Predictor
+    pred = classify.ClassificationPredictor(overrides={'imgsz': [64, 64]})
+    result = pred(source=SOURCE, model=trainer.best)
+    assert len(result), 'predictor test failed'

tests/test_python.py

@@ -0,0 +1,222 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+
+from pathlib import Path
+
+import cv2
+import numpy as np
+import torch
+from PIL import Image
+
+from ultralytics import YOLO
+from ultralytics.yolo.data.build import load_inference_source
+from ultralytics.yolo.utils import LINUX, ONLINE, ROOT, SETTINGS
+
+MODEL = Path(SETTINGS['weights_dir']) / 'yolov8n.pt'
+CFG = 'yolov8n.yaml'
+SOURCE = ROOT / 'assets/bus.jpg'
+SOURCE_GREYSCALE = Path(f'{SOURCE.parent / SOURCE.stem}_greyscale.jpg')
+SOURCE_RGBA = Path(f'{SOURCE.parent / SOURCE.stem}_4ch.png')
+
+# Convert SOURCE to greyscale and 4-ch
+im = Image.open(SOURCE)
+im.convert('L').save(SOURCE_GREYSCALE)  # greyscale
+im.convert('RGBA').save(SOURCE_RGBA)  # 4-ch PNG with alpha
+
+
+def test_model_forward():
+    model = YOLO(CFG)
+    model(SOURCE)
+
+
+def test_model_info():
+    model = YOLO(CFG)
+    model.info()
+    model = YOLO(MODEL)
+    model.info(verbose=True)
+
+
+def test_model_fuse():
+    model = YOLO(CFG)
+    model.fuse()
+    model = YOLO(MODEL)
+    model.fuse()
+
+
+def test_predict_dir():
+    model = YOLO(MODEL)
+    model(source=ROOT / 'assets')
+
+
+def test_predict_img():
+    model = YOLO(MODEL)
+    seg_model = YOLO('yolov8n-seg.pt')
+    cls_model = YOLO('yolov8n-cls.pt')
+    im = cv2.imread(str(SOURCE))
+    assert len(model(source=Image.open(SOURCE), save=True, verbose=True)) == 1  # PIL
+    assert len(model(source=im, save=True, save_txt=True)) == 1  # ndarray
+    assert len(model(source=[im, im], save=True, save_txt=True)) == 2  # batch
+    assert len(list(model(source=[im, im], save=True, stream=True))) == 2  # stream
+    assert len(model(torch.zeros(320, 640, 3).numpy())) == 1  # tensor to numpy
+    batch = [
+        str(SOURCE),  # filename
+        Path(SOURCE),  # Path
+        'https://ultralytics.com/images/zidane.jpg' if ONLINE else SOURCE,  # URI
+        cv2.imread(str(SOURCE)),  # OpenCV
+        Image.open(SOURCE),  # PIL
+        np.zeros((320, 640, 3))]  # numpy
+    assert len(model(batch)) == len(batch)  # multiple sources in a batch
+
+    # Test tensor inference
+    im = cv2.imread(str(SOURCE))  # OpenCV
+    t = cv2.resize(im, (32, 32))
+    t = torch.from_numpy(t.transpose((2, 0, 1)))
+    t = torch.stack([t, t, t, t])
+    results = model(t)
+    assert len(results) == t.shape[0]
+    results = seg_model(t)
+    assert len(results) == t.shape[0]
+    results = cls_model(t)
+    assert len(results) == t.shape[0]
+
+
+def test_predict_grey_and_4ch():
+    model = YOLO(MODEL)
+    for f in SOURCE_RGBA, SOURCE_GREYSCALE:
+        for source in Image.open(f), cv2.imread(str(f)), f:
+            model(source, save=True, verbose=True)
+
+
+def test_val():
+    model = YOLO(MODEL)
+    model.val(data='coco8.yaml', imgsz=32)
+
+
+def test_val_scratch():
+    model = YOLO(CFG)
+    model.val(data='coco8.yaml', imgsz=32)
+
+
+def test_amp():
+    if torch.cuda.is_available():
+        from ultralytics.yolo.engine.trainer import check_amp
+        model = YOLO(MODEL).model.cuda()
+        assert check_amp(model)
+
+
+def test_train_scratch():
+    model = YOLO(CFG)
+    model.train(data='coco8.yaml', epochs=1, imgsz=32)
+    model(SOURCE)
+
+
+def test_train_pretrained():
+    model = YOLO(MODEL)
+    model.train(data='coco8.yaml', epochs=1, imgsz=32)
+    model(SOURCE)
+
+
+def test_export_torchscript():
+    model = YOLO(MODEL)
+    f = model.export(format='torchscript')
+    YOLO(f)(SOURCE)  # exported model inference
+
+
+def test_export_torchscript_scratch():
+    model = YOLO(CFG)
+    f = model.export(format='torchscript')
+    YOLO(f)(SOURCE)  # exported model inference
+
+
+def test_export_onnx():
+    model = YOLO(MODEL)
+    f = model.export(format='onnx')
+    YOLO(f)(SOURCE)  # exported model inference
+
+
+def test_export_openvino():
+    model = YOLO(MODEL)
+    f = model.export(format='openvino')
+    YOLO(f)(SOURCE)  # exported model inference
+
+
+def test_export_coreml():  # sourcery skip: move-assign
+    model = YOLO(MODEL)
+    model.export(format='coreml')
+    # if MACOS:
+    #    YOLO(f)(SOURCE)  # model prediction only supported on macOS
+
+
+def test_export_tflite(enabled=False):
+    # TF suffers from install conflicts on Windows and macOS
+    if enabled and LINUX:
+        model = YOLO(MODEL)
+        f = model.export(format='tflite')
+        YOLO(f)(SOURCE)
+
+
+def test_export_pb(enabled=False):
+    # TF suffers from install conflicts on Windows and macOS
+    if enabled and LINUX:
+        model = YOLO(MODEL)
+        f = model.export(format='pb')
+        YOLO(f)(SOURCE)
+
+
+def test_export_paddle(enabled=False):
+    # Paddle protobuf requirements conflicting with onnx protobuf requirements
+    if enabled:
+        model = YOLO(MODEL)
+        model.export(format='paddle')
+
+
+def test_all_model_yamls():
+    for m in list((ROOT / 'models').rglob('*.yaml')):
+        YOLO(m.name)
+
+
+def test_workflow():
+    model = YOLO(MODEL)
+    model.train(data='coco8.yaml', epochs=1, imgsz=32)
+    model.val()
+    model.predict(SOURCE)
+    model.export(format='onnx')  # export a model to ONNX format
+
+
+def test_predict_callback_and_setup():
+    # test callback addition for prediction
+    def on_predict_batch_end(predictor):  # results -> List[batch_size]
+        path, _, im0s, _, _ = predictor.batch
+        # print('on_predict_batch_end', im0s[0].shape)
+        im0s = im0s if isinstance(im0s, list) else [im0s]
+        bs = [predictor.dataset.bs for _ in range(len(path))]
+        predictor.results = zip(predictor.results, im0s, bs)
+
+    model = YOLO(MODEL)
+    model.add_callback('on_predict_batch_end', on_predict_batch_end)
+
+    dataset = load_inference_source(source=SOURCE, transforms=model.transforms)
+    bs = dataset.bs  # noqa access predictor properties
+    results = model.predict(dataset, stream=True)  # source already setup
+    for _, (result, im0, bs) in enumerate(results):
+        print('test_callback', im0.shape)
+        print('test_callback', bs)
+        boxes = result.boxes  # Boxes object for bbox outputs
+        print(boxes)
+
+
+def test_result():
+    model = YOLO('yolov8n-seg.pt')
+    res = model([SOURCE, SOURCE])
+    res[0].plot(show_conf=False)
+    res[0] = res[0].cpu().numpy()
+    print(res[0].path, res[0].masks.masks)
+
+    model = YOLO('yolov8n.pt')
+    res = model(SOURCE)
+    res[0].plot()
+    print(res[0].path)
+
+    model = YOLO('yolov8n-cls.pt')
+    res = model(SOURCE)
+    res[0].plot()
+    print(res[0].path)

train/result/best.pt

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e83f02d6ca8848205da96f4f9b2f6ae828be81b04b3f85dcbe1aeb7aaeb92bc
+size 22568291

train/result/events.out.tfevents.1703117386.69c6eee73c8d.3549.0

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:a27ee90f4ada28008b97d7d4083116bd94ff86aa9d6cedfe85ae0a9a82a0ef37
+size 1321836

train/result/results.csv

@@ -0,0 +1,51 @@
+                  epoch,         train/box_loss,         train/cls_loss,         train/dfl_loss,   metrics/precision(B),      metrics/recall(B),       metrics/mAP50(B),    metrics/mAP50-95(B),           val/box_loss,           val/cls_loss,           val/dfl_loss,                 lr/pg0,                 lr/pg1,                 lr/pg2
+                      0,                 1.3943,                 5.3965,                 1.7656,                0.52008,                0.29315,                0.35115,                0.23941,                 1.2228,                 2.5211,                 1.7095,                0.07018,              0.0033134,              0.0033134
+                      1,                 1.0957,                 2.3879,                  1.425,                0.67407,                0.66647,                0.76456,                0.57626,                 1.0231,                 1.4538,                 1.5037,               0.040048,              0.0065151,              0.0065151
+                      2,                 1.0909,                  1.854,                 1.3809,                0.76436,                0.63647,                0.74185,                0.53108,                  1.117,                 1.6168,                 1.6028,              0.0097844,              0.0095848,              0.0095848
+                      3,                  1.139,                 1.6765,                 1.4237,                0.67585,                0.74256,                0.77575,                0.55398,                 1.1557,                 1.5061,                 1.5957,               0.009406,               0.009406,               0.009406
+                      4,                 1.1085,                 1.5045,                  1.385,                0.84713,                 0.7969,                 0.8784,                0.65151,                 1.0578,                 1.0557,                 1.5447,               0.009406,               0.009406,               0.009406
+                      5,                  1.068,                 1.3402,                 1.3493,                0.87581,                0.75073,                0.85493,                0.65046,                   1.01,                 1.1246,                 1.5047,               0.009208,               0.009208,               0.009208
+                      6,                 1.0475,                 1.2473,                 1.3379,                0.90986,                  0.852,                0.93209,                0.70152,                0.97208,                0.87563,                 1.4116,                0.00901,                0.00901,                0.00901
+                      7,                 1.0083,                 1.1668,                 1.3092,                0.91183,                0.81664,                0.92471,                0.68771,                0.99811,                0.89281,                 1.4867,               0.008812,               0.008812,               0.008812
+                      8,                0.97265,                 1.0787,                   1.27,                0.85922,                0.81718,                 0.9133,                0.68808,                0.97119,                0.91105,                 1.4201,               0.008614,               0.008614,               0.008614
+                      9,                 0.9359,                 1.0149,                 1.2475,                0.92773,                0.93911,                 0.9804,                0.76781,                0.82578,                0.67889,                 1.3124,               0.008416,               0.008416,               0.008416
+                     10,                0.92692,                0.99297,                 1.2458,                0.94159,                0.89818,                0.97481,                0.75688,                0.87143,                 0.6741,                 1.3353,               0.008218,               0.008218,               0.008218
+                     11,                0.91531,                0.92136,                 1.2292,                0.93804,                0.91749,                0.97578,                0.77347,                0.83713,                0.63057,                 1.2873,                0.00802,                0.00802,                0.00802
+                     12,                0.90491,                0.91221,                 1.2346,                0.93929,                0.90441,                0.97159,                0.75345,                0.87527,                0.64437,                 1.3628,               0.007822,               0.007822,               0.007822
+                     13,                0.88162,                0.90044,                 1.2238,                0.93827,                0.92706,                0.97901,                0.77037,                 0.8561,                0.59532,                 1.3175,               0.007624,               0.007624,               0.007624
+                     14,                0.86089,                  0.845,                    1.2,                0.94078,                0.90385,                0.97265,                0.76704,                0.83484,                0.59525,                 1.3135,               0.007426,               0.007426,               0.007426
+                     15,                0.84251,                0.79662,                 1.1836,                0.95938,                0.93805,                0.98763,                0.79348,                0.79267,                0.52314,                 1.2832,               0.007228,               0.007228,               0.007228
+                     16,                0.83622,                0.79077,                 1.1887,                0.94655,                0.92611,                 0.9792,                0.79344,                0.78439,                0.52228,                  1.269,                0.00703,                0.00703,                0.00703
+                     17,                 0.8243,                0.77297,                 1.1704,                0.96865,                0.95038,                0.98743,                0.79909,                0.77058,                0.49297,                 1.2646,               0.006832,               0.006832,               0.006832
+                     18,                0.81351,                0.74555,                 1.1677,                0.93462,                0.94813,                0.97801,                 0.7942,                0.76714,                0.53705,                 1.2401,               0.006634,               0.006634,               0.006634
+                     19,                0.78967,                0.71817,                 1.1456,                0.95858,                0.95986,                0.98414,                0.80379,                0.75204,                0.47804,                 1.2391,               0.006436,               0.006436,               0.006436
+                     20,                0.77246,                0.70666,                 1.1409,                0.96397,                0.93831,                0.98219,                 0.7984,                0.75419,                0.50211,                 1.2527,               0.006238,               0.006238,               0.006238
+                     21,                0.77247,                0.70521,                 1.1468,                0.97088,                0.95931,                0.98769,                0.80524,                0.74903,                0.46267,                 1.2429,                0.00604,                0.00604,                0.00604
+                     22,                0.74288,                 0.6583,                 1.1203,                0.94444,                0.98033,                0.99014,                 0.8154,                0.72644,                0.44399,                 1.2342,               0.005842,               0.005842,               0.005842
+                     23,                0.75258,                0.65464,                 1.1312,                0.95997,                0.96409,                0.98626,                0.81721,                0.71529,                0.45629,                 1.2058,               0.005644,               0.005644,               0.005644
+                     24,                0.74541,                0.63347,                  1.129,                0.97377,                0.97256,                0.98718,                0.82631,                0.70684,                0.44788,                 1.1952,               0.005446,               0.005446,               0.005446
+                     25,                0.72792,                0.62454,                 1.1118,                0.97493,                 0.9797,                0.99013,                 0.8349,                0.68843,                0.41908,                 1.1934,               0.005248,               0.005248,               0.005248
+                     26,                0.70686,                0.58767,                 1.1022,                0.96681,                0.97581,                0.98858,                0.81522,                0.73092,                0.42983,                 1.2235,                0.00505,                0.00505,                0.00505
+                     27,                0.70378,                 0.5787,                 1.1033,                0.97741,                0.97201,                0.98914,                0.83059,                0.70443,                 0.4094,                 1.2259,               0.004852,               0.004852,               0.004852
+                     28,                0.69172,                0.56769,                 1.0945,                0.97356,                0.97641,                0.98421,                 0.8305,                0.68605,                0.39824,                 1.2049,               0.004654,               0.004654,               0.004654
+                     29,                0.68151,                0.56353,                 1.0906,                0.96161,                0.97742,                0.98511,                0.82967,                0.68371,                0.40559,                 1.1874,               0.004456,               0.004456,               0.004456
+                     30,                0.68021,                0.55879,                 1.0929,                0.97889,                0.98372,                0.98785,                0.83714,                  0.668,                0.37307,                 1.1832,               0.004258,               0.004258,               0.004258
+                     31,                0.66176,                0.54269,                 1.0707,                 0.9674,                0.98919,                0.98956,                0.84952,                0.66505,                0.38466,                 1.1738,                0.00406,                0.00406,                0.00406
+                     32,                0.65861,                0.52677,                 1.0774,                0.97646,                0.98601,                0.99199,                0.84259,                0.67371,                0.37715,                 1.1801,               0.003862,               0.003862,               0.003862
+                     33,                0.65137,                0.52748,                 1.0773,                0.97669,                0.98341,                0.98851,                0.83893,                0.67566,                0.37633,                 1.1854,               0.003664,               0.003664,               0.003664
+                     34,                0.64541,                0.50415,                 1.0702,                0.98119,                0.99023,                0.99127,                0.84832,                0.66121,                 0.3737,                 1.1784,               0.003466,               0.003466,               0.003466
+                     35,                0.62748,                0.49499,                 1.0638,                0.97031,                0.98634,                0.99042,                0.84376,                0.65157,                0.35552,                 1.1639,               0.003268,               0.003268,               0.003268
+                     36,                0.63135,                0.48207,                  1.064,                0.97523,                0.98614,                0.98985,                0.84671,                0.65972,                0.36057,                 1.1783,                0.00307,                0.00307,                0.00307
+                     37,                0.61064,                 0.4718,                 1.0482,                0.98072,                0.98071,                0.99109,                0.85346,                0.64444,                0.34325,                 1.1588,               0.002872,               0.002872,               0.002872
+                     38,                0.61294,                0.46575,                 1.0534,                0.97902,                0.98661,                0.99173,                0.85542,                0.64202,                0.34811,                 1.1502,               0.002674,               0.002674,               0.002674
+                     39,                0.59466,                0.44286,                 1.0405,                 0.9765,                0.98751,                0.99189,                0.85487,                0.64831,                0.34407,                 1.1564,               0.002476,               0.002476,               0.002476
+                     40,                0.52085,                0.31875,                 1.0323,                0.97859,                0.99306,                0.99165,                0.85463,                0.64686,                0.33968,                 1.1779,               0.002278,               0.002278,               0.002278
+                     41,                0.50485,                0.30879,                 1.0087,                0.97876,                0.98606,                0.99188,                0.86257,                0.62123,                0.33428,                  1.156,                0.00208,                0.00208,                0.00208
+                     42,                0.49148,                0.29756,                 1.0017,                0.98101,                0.97505,                0.99248,                 0.8608,                0.62874,                0.32825,                 1.1479,               0.001882,               0.001882,               0.001882
+                     43,                0.48247,                0.29054,                0.99939,                0.98812,                0.98166,                 0.9922,                0.86423,                0.62497,                0.32037,                 1.1494,               0.001684,               0.001684,               0.001684
+                     44,                0.47167,                0.28362,                0.98868,                0.98411,                0.97913,                0.98948,                0.86945,                0.61179,                0.32392,                 1.1534,               0.001486,               0.001486,               0.001486
+                     45,                0.45215,                 0.2727,                 0.9841,                0.98521,                0.98055,                0.99179,                0.86415,                0.61675,                0.31416,                 1.1466,               0.001288,               0.001288,               0.001288
+                     46,                0.44647,                0.26576,                0.96937,                0.98348,                0.98055,                0.99161,                0.86787,                0.60871,                0.30391,                 1.1544,                0.00109,                0.00109,                0.00109
+                     47,                0.43148,                0.25571,                0.96668,                0.98864,                0.98048,                0.99181,                0.86828,                0.59663,                0.30073,                 1.1472,               0.000892,               0.000892,               0.000892
+                     48,                 0.4194,                0.24958,                0.95462,                0.98468,                0.97979,                0.99169,                0.87124,                 0.6007,                0.30279,                 1.1365,               0.000694,               0.000694,               0.000694
+                     49,                0.40691,                0.24267,                0.94509,                0.98899,                0.98105,                0.99192,                0.86847,                 0.5956,                0.29325,                 1.1394,               0.000496,               0.000496,               0.000496

train/train_model.ipynb

@@ -0,0 +1,928 @@
+{
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "FyRdDYkqAKN4"
+      },
+      "source": [
+        "# BISINDO Sign Language Translator"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Description\n",
+        "\n",
+        "This project is a final project for \"Rekayasa Sistem Berbasis Pengetahuan (RSBP)\". This project is a web-based application that can translate BISINDO sign language to Indonesian language. This application is made to help people who are not familiar with BISINDO sign language to communicate with people who are deaf. </br>\n",
+        "\n",
+        "## Appoarch Method\n",
+        "\n",
+        "This project employs the Object Detection method to identify hand gestures, utilizing a customized YOLO v8 dataset model. This model is designed to detect various hand gestures and provide the bounding box coordinates delineating these gestures. Once the bounding box is identified, the corresponding region of interest (ROI) containing the hand gesture is cropped. Subsequently, this cropped image undergoes further processing through a Convolutional Neural Network (CNN) model for precise classification of the detected hand gesture. The CNN model's output yields the specific label corresponding to the gesture identified. To enhance user experience, these labels are translated into Indonesian using a Rule-Based method before being displayed on the screen interface. </br>\n",
+        "\n",
+        "In terms of visualization, the project harnesses MediaPipe, a tool enabling the drawing of hand gesture bounding boxes and their associated labels directly on the screen. This integration ensures users can visually comprehend the detected gestures in real-time with graphical representations. </br>\n",
+        "\n",
+        "Moreover, the project is built as a web-based application using Flask, allowing seamless accessibility and interaction through a web interface. This framework facilitates the deployment of the hand gesture detection system within a browser, ensuring ease of use across various devices without necessitating complex setups or installations. </br>\n",
+        "\n",
+        "## Visual Demo\n",
+        "\n",
+        "### Dashboard\n",
+        "![dashboard](../img/image.png)</br>\n",
+        "\n",
+        "### Stream Youtube Detection\n",
+        "![yt](../img/image-2.png)</br>\n",
+        "\n",
+        "### Camera Detection\n",
+        "![run](../img/image-1.png)</br>\n",
+        "\n",
+        "## Step by Step Method\n",
+        "- Train the model using YOLOv8 with custom dataset\n",
+        "- Create a CNN model to classify the cropped image\n",
+        "- Create a Flask app to run the model\n",
+        "- Create a web interface using HTML and CSS\n",
+        "- Create feature interaction using Javascript \n",
+        "\n",
+        "## Features\n",
+        "- Detect hand gesture from Camera\n",
+        "- Detect hand gesture from Youtube video\n",
+        "- Switch on/off the detection\n",
+        "- Switch on/off the landmark\n",
+        "- Flip the video\n",
+        "- Modify Confidence Threshold\n",
+        "- The result accumulates the detected words over 10 sequential frames"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "# Training Model"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Check GPU"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "Y8cDtxLIBHgQ",
+        "outputId": "d2185ab5-0f43-47b6-b675-937ee56331d5"
+      },
+      "outputs": [],
+      "source": [
+        "!nvidia-smi"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Import OS"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "CjpPg4mGKc1v",
+        "outputId": "c0bb0d9a-2cd3-4bea-d38a-070b74a5a89b"
+      },
+      "outputs": [],
+      "source": [
+        "import os\n",
+        "HOME = os.getcwd()\n",
+        "print(HOME)"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "3C3EO_2zNChu"
+      },
+      "source": [
+        "### Yolo Instalation"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "tdSMcABDNKW-",
+        "outputId": "6193e25a-2cfd-4d96-fe9f-769add6166f7"
+      },
+      "outputs": [],
+      "source": [
+        "%pip install ultralytics==8.0.20\n",
+        "\n",
+        "from IPython import display\n",
+        "display.clear_output()\n",
+        "\n",
+        "import ultralytics\n",
+        "ultralytics.checks()"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": 4,
+      "metadata": {
+        "id": "VOEYrlBoP9-E"
+      },
+      "outputs": [],
+      "source": [
+        "from ultralytics import YOLO\n",
+        "\n",
+        "from IPython.display import display, Image"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "fT1qD4toTTw0"
+      },
+      "source": [
+        "### Import Dataset Form Roboflow"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "BSd93ZJzZZKt",
+        "outputId": "eb8bcd99-cea8-48a1-bf11-7a37f2aa7018"
+      },
+      "outputs": [],
+      "source": [
+        "%mkdir {HOME}/datasets\n",
+        "%cd {HOME}/datasets\n",
+        "\n",
+        "%pip install roboflow --quiet\n",
+        "\n",
+        "from roboflow import Roboflow\n",
+        "\n",
+        "from roboflow import Roboflow\n",
+        "rf = Roboflow(api_key=\"moOAxzoPZOtIzhyyco0r\")\n",
+        "project = rf.workspace(\"bisindo-qndjb\").project(\"bisindov2\")\n",
+        "dataset = project.version(1).download(\"yolov8\")"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "YUjFBKKqXa-u"
+      },
+      "source": [
+        "### Training"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "D2YkphuiaE7_",
+        "outputId": "7f5ea4f9-6e7d-4470-8209-9a253786cd13"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "\n",
+        "yolo task=detect mode=train model=yolov8s.pt data={dataset.location}/data.yaml epochs=25 imgsz=800 plots=True"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "1MScstfHhArr",
+        "outputId": "7865d222-af3a-49bd-9aa7-3816872815c9"
+      },
+      "outputs": [],
+      "source": [
+        "%ls {HOME}/runs/detect/train/"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/",
+          "height": 485
+        },
+        "id": "_J35i8Ofhjxa",
+        "outputId": "762ae444-f7c9-42f5-cd2c-8ea7facee223"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "Image(filename=f'{HOME}/runs/detect/train/confusion_matrix.png', width=600)"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/",
+          "height": 335
+        },
+        "id": "A-urTWUkhRmn",
+        "outputId": "58b67f20-8844-43f4-ff41-c8c498036fc8"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "Image(filename=f'{HOME}/runs/detect/train/results.png', width=600)"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "6ODk1VTlevxn"
+      },
+      "source": [
+        "### Validate Model"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "YpyuwrNlXc1P",
+        "outputId": "88f5e42d-e10d-45db-c578-7c85f8667c10"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "\n",
+        "!yolo task=detect mode=val model={HOME}/runs/detect/train/weights/best.pt data={dataset.location}/data.yaml"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "i4eASbcWkQBq"
+      },
+      "source": [
+        "### Inference Model"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "Wjc1ctZykYuf",
+        "outputId": "f400774d-404b-4fef-ef58-796fc4fd522e"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "!yolo task=detect mode=predict model={HOME}/runs/detect/train/weights/best.pt conf=0.25 source={dataset.location}/test/images save=True"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "mEYIo95n-I0S"
+      },
+      "source": [
+        "### Run Model on CAMERA"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "colab": {
+          "base_uri": "https://localhost:8080/"
+        },
+        "id": "As_cl3OkQWQ1",
+        "outputId": "759e88f3-c3b8-474f-d217-35765bd81d06"
+      },
+      "outputs": [],
+      "source": [
+        "%cd {HOME}\n",
+        "!yolo task=detect mode=predict model=D:/Kuliah/\\(2023\\)S5-RSBP/FP/runs/detect/train/weights/best.pt source=0 show=true"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Training Result\n",
+        "\n",
+        "### Confussion Matrix\n",
+        "![dashboard](../img/confussion_matrix.png)</br>\n",
+        "\n",
+        "### Result Curve\n",
+        "![dashboard](../img/result.png)</br>"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Create Flask Web Application"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Install Requirements Dependencies\n",
+        "To install the Python requirements from the `requirements.txt` file, run the following command in your terminal or command prompt:"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "pip install -r requirements.txt"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Create new app.py file for main program\n",
+        "Import libray that needed for this project"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "from ultralytics import YOLO\n",
+        "import time\n",
+        "import numpy as np\n",
+        "import mediapipe as mp\n",
+        "\n",
+        "\n",
+        "import cv2\n",
+        "from flask import Flask, render_template, request, Response, session, redirect, url_for\n",
+        "\n",
+        "from flask_socketio import SocketIO\n",
+        "import yt_dlp as youtube_dl"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "Explanation for each library:\n",
+        "- ultralytics.YOLO: Used for real-time object detection.\n",
+        "- time: Handles time-related functions.\n",
+        "- numpy as np: Supports numerical computations and arrays.\n",
+        "- mediapipe as mp: Facilitates various media processing tasks like object detection and hand tracking.\n",
+        "- cv2: Offers tools for computer vision, image, and video processing.\n",
+        "- Flask: A lightweight web framework for building web applications.\n",
+        "- Flask_socketio and SocketIO: Enables WebSocket support for real-time communication in Flask.\n",
+        "- yt_dlp as youtube_dl: Used to stream media content from various streaming sites, like YouTube."
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Initialize Model"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "model_object_detection = YOLO(\"bisindo.pt\")"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Create Function for Detection"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "def show(self, url):\n",
+        "        print(url)\n",
+        "        self._preview = False\n",
+        "        self._flipH = False\n",
+        "        self._detect = False\n",
+        "        self._mediaPipe = False\n",
+        "\n",
+        "        self._confidence = 75.0\n",
+        "        ydl_opts = {\n",
+        "            \"quiet\": True,\n",
+        "            \"no_warnings\": True,\n",
+        "            \"format\": \"best\",\n",
+        "            \"forceurl\": True,\n",
+        "        }\n",
+        "\n",
+        "        if url == '0':\n",
+        "            cap = cv2.VideoCapture(0)\n",
+        "        else:\n",
+        "            \n",
+        "            ydl = youtube_dl.YoutubeDL(ydl_opts)\n",
+        "\n",
+        "            info = ydl.extract_info(url, download=False)\n",
+        "            url = info[\"url\"]\n",
+        "\n",
+        "            cap = cv2.VideoCapture(url)\n",
+        "\n",
+        "        while True:\n",
+        "            if self._preview:\n",
+        "                if stop_flag:\n",
+        "                    print(\"Process Stopped\")\n",
+        "                    return\n",
+        "\n",
+        "                grabbed, frame = cap.read()\n",
+        "                if not grabbed:\n",
+        "                    break\n",
+        "                if self.flipH:\n",
+        "                    frame = cv2.flip(frame, 1)\n",
+        "\n",
+        "                if self.detect:\n",
+        "                    frame_yolo = frame.copy()\n",
+        "                    results_yolo = model_object_detection.predict(frame_yolo, conf=self._confidence / 100)\n",
+        "\n",
+        "                    frame_yolo, labels = results_yolo[0].plot()\n",
+        "                    list_labels = []\n",
+        "                    # labels_confidences\n",
+        "                    for label in labels:\n",
+        "                        confidence = label.split(\" \")[-1]\n",
+        "                        label = (label.split(\" \"))[:-1]\n",
+        "                        label = \" \".join(label)\n",
+        "                        list_labels.append(label)\n",
+        "                        list_labels.append(confidence)\n",
+        "                        socketio.emit('label', list_labels)\n",
+        "\n",
+        "                if self.mediaPipe:\n",
+        "                    # Convert the image to RGB for processing with MediaPipe\n",
+        "                    image = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)\n",
+        "                    results = self.hands.process(image)\n",
+        "                    \n",
+        "                    if results.multi_hand_landmarks:\n",
+        "                        for hand_landmarks in results.multi_hand_landmarks:\n",
+        "                            mp.solutions.drawing_utils.draw_landmarks(\n",
+        "                                frame,\n",
+        "                                hand_landmarks,\n",
+        "                                self.mp_hands.HAND_CONNECTIONS,\n",
+        "                                landmark_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(color=(255, 0, 0), thickness=4, circle_radius=3),\n",
+        "                                connection_drawing_spec=mp.solutions.drawing_utils.DrawingSpec(color=(255, 255, 255), thickness=2, circle_radius=2), \n",
+        "                            )\n",
+        "\n",
+        "                frame = cv2.imencode(\".jpg\", frame)[1].tobytes()\n",
+        "                yield ( \n",
+        "                    b'--frame\\r\\n'\n",
+        "                    b'Content-Type: image/jpeg\\r\\n\\r\\n' + frame + b'\\r\\n'\n",
+        "                )\n",
+        "            else:\n",
+        "                snap = np.zeros((\n",
+        "                    1000,\n",
+        "                    1000\n",
+        "                ), np.uint8)\n",
+        "                label = \"Streaming Off\"\n",
+        "                H, W = snap.shape\n",
+        "                font = cv2.FONT_HERSHEY_PLAIN\n",
+        "                color = (255, 255, 255)\n",
+        "                cv2.putText(snap, label, (W//2 - 100, H//2),\n",
+        "                            font, 2, color, 2)\n",
+        "                frame = cv2.imencode(\".jpg\", snap)[1].tobytes()\n",
+        "                yield (b'--frame\\r\\n'\n",
+        "                       b'Content-Type: image/jpeg\\r\\n\\r\\n' + frame + b'\\r\\n')"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### Explanation for each object:\n",
+        "- preview(): Displays the video stream on the web interface.\n",
+        "- flipH(): Flips the video horizontally.\n",
+        "- detect(): Detects using Yolo model the hand gesture from the video stream.\n",
+        "- mediaPipe(): Draws the hand gesture landmark on the video stream.\n",
+        "\n",
+        "### Explanation for flow of the program:\n",
+        "- If user input is \"camera\", the program will run the camera detection.\n",
+        "- If user input is \"url youtube video\", the program will run the youtube detection.\n",
+        "- If user activate the preview, the program will run the video stream/camera.\n",
+        "- If user activate the detection, the program will run the detection.\n",
+        "- If user activate the landmark, the program will run the landmark.\n",
+        "- If user activate the flip, video will be flipped.\n",
+        "- Threshold is used to set the minimum confidence threshold of the detection.\n",
+        "- If the preview is not activated, the program will show `streaming off` label.\n"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "## Integration in HTML, CSS, and Javascript"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### In CSS file, create a style for the stream and output"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "/* * Local selectors */\n",
+        "#container {\n",
+        "    width: 100%;\n",
+        "    height: 586px;\n",
+        "    border: 8px #2c374a solid;\n",
+        "    background-color: #0F172A;\n",
+        "    border-radius: 5px;\n",
+        "}\n",
+        "\n",
+        "#videoElement {\n",
+        "    height: 570px;\n",
+        "    width: 100%;\n",
+        "    background-color: #0F172A;\n",
+        "\n",
+        "    display: block;\n",
+        "    margin-left: auto;\n",
+        "    margin-right: auto;\n",
+        "}\n",
+        "\n",
+        "#terminal {\n",
+        "    border-radius: 5px;\n",
+        "    border: 5px #1C2637 solid;\n",
+        "    font-family: monospace;\n",
+        "    font-size: 12px;\n",
+        "    background-color: #0F172A;\n",
+        "    height: 490px;\n",
+        "    overflow-y: scroll;\n",
+        "}"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### In Javascript, create a function needed for the web interface"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For Camera or Video Button"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "function startCamera() {\n",
+        "    var url = '0';\n",
+        "    $('#urlForm').attr('action', '/index'); \n",
+        "    $('#urlForm').attr('method', 'POST'); \n",
+        "    $('#urlForm').find('#url').val(url);\n",
+        "    $('#urlForm').submit();\n",
+        "}\n",
+        "\n",
+        "function startVideo() {\n",
+        "    var url = $('#url').val();\n",
+        "    $('#urlForm').attr('action', '/index'); \n",
+        "    $('#urlForm').attr('method', 'POST'); \n",
+        "    $('#urlForm').find('#url').val(url);\n",
+        "    $('#urlForm').submit();\n",
+        "}"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For terminal output, socket, and final output"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "var socket = io.connect('http://127.0.0.1:5000/');\n",
+        "\n",
+        "let consecutiveWords = [];\n",
+        "let finalSentence = \"\";\n",
+        "let wordCounter = 0;\n",
+        "\n",
+        "function appendToTerminal(message) {\n",
+        "    var terminal = document.getElementById(\"terminal\");\n",
+        "    var p = document.createElement(\"p\");\n",
+        "    p.innerHTML = `<table class=\"table table-striped text-center\" style=\"border: none;\">\n",
+        "                    <tr class=\"row\">\n",
+        "                        <td class=\"col-md-6\" style=\"color: #01ECEC; border: none;\">${message[0]}</td>\n",
+        "                        <td class=\"col-md-6\" style=\"color: #01ECEC; border: none;\">${message[1]}</td>\n",
+        "                    </tr>\n",
+        "                </table>`;\n",
+        "    terminal.appendChild(p);\n",
+        "    terminal.scrollTop = terminal.scrollHeight;\n",
+        "\n",
+        "    if (consecutiveWords.length === 0 || consecutiveWords[consecutiveWords.length - 1] === message[0]) {\n",
+        "        consecutiveWords.push(message[0]);\n",
+        "        wordCounter++; \n",
+        "    } else {\n",
+        "        consecutiveWords = [message[0]];\n",
+        "        wordCounter = 1;\n",
+        "    }\n",
+        "\n",
+        "    if (wordCounter >= 10) {\n",
+        "        finalSentence += (finalSentence.length > 0 ? \" \" : \"\") + consecutiveWords[0];\n",
+        "        document.getElementById(\"finalSentencePara\").innerText = finalSentence;\n",
+        "        consecutiveWords = [];\n",
+        "        wordCounter = 0;\n",
+        "    }\n",
+        "}\n",
+        "\n",
+        "socket.on(\"label\", (data) => {\n",
+        "    appendToTerminal(data);\n",
+        "});"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "Integration with SocketIO:\n",
+        "\n",
+        "- Listens for data labeled as \"label\" from a SocketIO connection.\n",
+        "- Calls appendToTerminal() to display the received data in the terminal and potentially update an advertisement based on the data.\n",
+        "\n",
+        "Function appendToTerminal(message):\n",
+        "\n",
+        "- Takes a message as input.\n",
+        "- Adds a table with two columns to the terminal for displaying the message.\n",
+        "- Keeps track of consecutive words and their counts.\n",
+        "- Constructs a final sentence if a word appears more than ten times consecutively."
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For Toggle Button"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "function toggleHSwitch() {\n",
+        "    var switchElement = $(\"#flip-horizontal\");\n",
+        "    var switchIsOn = switchElement.is(\":checked\");\n",
+        "\n",
+        "    if (switchIsOn) {\n",
+        "        console.log(\"SWITCH ON\")\n",
+        "        $.getJSON(\"/request_flipH_switch\", function (data) {\n",
+        "            console.log(\"Switch on request sent.\");\n",
+        "        });\n",
+        "    } else {\n",
+        "        console.log(\"SWITCH OFF\")\n",
+        "        $.getJSON(\"/request_flipH_switch\", function (data) {\n",
+        "            console.log(\"Switch off request sent.\");\n",
+        "        });\n",
+        "    }\n",
+        "}\n",
+        "\n",
+        "function toggleMediaPipeSwitch() {\n",
+        "    var switchElement = $(\"#mediapipe\");\n",
+        "    var switchIsOn = switchElement.is(\":checked\");\n",
+        "\n",
+        "    if (switchIsOn) {\n",
+        "        console.log(\"SWITCH ON\")\n",
+        "        $.getJSON(\"/request_mediapipe_switch\", function (data) {\n",
+        "            console.log(\"Switch on request sent.\");\n",
+        "        });\n",
+        "    } else {\n",
+        "        console.log(\"SWITCH OFF\")\n",
+        "        $.getJSON(\"/request_mediapipe_switch\", function (data) {\n",
+        "            console.log(\"Switch off request sent.\");\n",
+        "        });\n",
+        "    }\n",
+        "}\n",
+        "\n",
+        "function toggleDetSwitch() {\n",
+        "\n",
+        "    var switchElement = $(\"#run_detection\");\n",
+        "    var switchIsOn = switchElement.is(\":checked\");\n",
+        "\n",
+        "    if (switchIsOn) {\n",
+        "        console.log(\"SWITCH ON\")\n",
+        "        $.getJSON(\"/request_run_model_switch\", function (data) {\n",
+        "            console.log(\"Switch on request sent.\");\n",
+        "        });\n",
+        "    } else {\n",
+        "        console.log(\"SWITCH OFF\")\n",
+        "        $.getJSON(\"/request_run_model_switch\", function (data) {\n",
+        "            console.log(\"Switch off request sent.\");\n",
+        "        });\n",
+        "    }\n",
+        "}\n",
+        "\n",
+        "function toggleOffSwitch() {\n",
+        "    var switchElement = $(\"#turn_off\");\n",
+        "    var switchIsOn = switchElement.is(\":checked\");\n",
+        "\n",
+        "    if (switchIsOn) {\n",
+        "        console.log(\"Camera ON\")\n",
+        "        $.getJSON(\"/request_preview_switch\", function (data) {\n",
+        "            console.log(\"Switch on request sent.\");\n",
+        "        });\n",
+        "    } else {\n",
+        "        console.log(\"Camera OFF\")\n",
+        "        $.getJSON(\"/request_preview_switch\", function (data) {\n",
+        "            console.log(\"Switch off request sent.\");\n",
+        "        });\n",
+        "    }\n",
+        "}"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "### For HTML, integrate the Javascript function"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For Camera and Terminal Output"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "<!-- Video -->\n",
+        "<div class=\"col-span-8 mx-4 mt-3\">\n",
+        "    <div id=\"container\">\n",
+        "        <img class=\"center\" src=\"/video_feed\" id=\"videoElement\">\n",
+        "    </div>\n",
+        "</div>\n",
+        "\n",
+        "<!-- Terminal -->\n",
+        "<div class=\"col-span-2 mr-4\">\n",
+        "    <h2 class=\"border-b border-slate-800 py-4 mb-4 text-3xl flex justify-end font-bold leading-none tracking-tight md:text-4xl lg:text-4xl text-cyan-100 \">Output</h1>\n",
+        "    <div id=\"terminal\" class=\"w-full\"></div>\n",
+        "</div>"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For toggle switch"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "<div class=\"flex gap-3 mb-4\">\n",
+        "    <label class=\"switch\">\n",
+        "        <input id=\"turn_off\" value=\"1\" name=\"turn_off\" type=\"checkbox\" onclick=\"toggleOffSwitch()\"/>\n",
+        "        <span class=\"slider round\"></span>\n",
+        "    </label>\n",
+        "    <label for=\"turn_off\" class=\"form-label text-cyan-500\">Show Video</label><br>\n",
+        "</div>\n",
+        "<div class=\"flex gap-3 mb-4\">\n",
+        "    <label class=\"switch\">\n",
+        "        <input id=\"run_detection\" value=\"0\" name=\"run_detection\" type=\"checkbox\"\n",
+        "               onclick=\"toggleDetSwitch()\"/>\n",
+        "        <span class=\"slider round\"></span>\n",
+        "    </label>\n",
+        "    <label for=\"run_detection\" class=\"form-label text-cyan-500\">Run Detection</label><br>\n",
+        "</div>\n",
+        "<div class=\"flex gap-3 mb-4\">\n",
+        "    <label class=\"switch\">\n",
+        "        <input id=\"mediapipe\" value=\"0\" name=\"mediapipe\" type=\"checkbox\"\n",
+        "               onclick=\"toggleMediaPipeSwitch()\"/>\n",
+        "        <span class=\"slider round\"></span>\n",
+        "    </label>\n",
+        "    <label for=\"mediapipe\" class=\"form-label text-cyan-500\">Show Landmark</label><br>\n",
+        "</div>\n",
+        "<div class=\"flex gap-3 mb-4\">\n",
+        "    <label class=\"switch\">\n",
+        "        <input id=\"flip-horizontal\" value=\"0\" name=\"flip-horizontal\" type=\"checkbox\"\n",
+        "               onclick=\"toggleHSwitch()\"/>\n",
+        "        <span class=\"slider round\"></span>\n",
+        "    </label>\n",
+        "    <label for=\"flip-horizontal\" class=\"form-label text-cyan-500\">Flip Video</label><br>\n",
+        "</div>\n",
+        "\n",
+        "<div class=\"gap-3 py-4 text-center border-b border-slate-800 mb-5\">\n",
+        "    <form action=\"/\" method=\"POST\" style=\"text-align: center;\" class=\"mb-4\" >\n",
+        "        <label for=\"slider\" class=\"form-label text-cyan-500\">Confidence Threshold</label>\n",
+        "        <input type=\"range\" id=\"slider\" name=\"slider\" min=\"1\" max=\"100\">\n",
+        "    </form>\n",
+        "    <input type=\"hidden\" id=\"sliderValue\" name=\"sliderValue\" value=\"75\">\n",
+        "    <span class=\"rounded-lg py-2 px-3 bg-slate-800 text-cyan-500\" id=\"conf_display\">75</span>\n",
+        "</div>"
+      ]
+    },
+    {
+      "cell_type": "markdown",
+      "metadata": {},
+      "source": [
+        "#### For Final Output"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {},
+      "outputs": [],
+      "source": [
+        "<div>\n",
+        "    <p id=\"finalSentencePara\" class=\"text-cyan-200 mt-4 text-center\">\n",
+        "    </p>\n",
+        "</div>"
+      ]
+    }
+  ],
+  "metadata": {
+    "accelerator": "GPU",
+    "colab": {
+      "provenance": []
+    },
+    "gpuClass": "standard",
+    "kernelspec": {
+      "display_name": "Python 3",
+      "name": "python3"
+    },
+    "language_info": {
+      "codemirror_mode": {
+        "name": "ipython",
+        "version": 3
+      },
+      "file_extension": ".py",
+      "mimetype": "text/x-python",
+      "name": "python",
+      "nbconvert_exporter": "python",
+      "pygments_lexer": "ipython3",
+      "version": "3.11.5"
+    }
+  },
+  "nbformat": 4,
+  "nbformat_minor": 0
+}

ultralytics/__init__.py

@@ -0,0 +1,9 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+
+__version__ = '8.0.61'
+
+from ultralytics.hub import start
+from ultralytics.yolo.engine.model import YOLO
+from ultralytics.yolo.utils.checks import check_yolo as checks
+
+__all__ = '__version__', 'YOLO', 'checks', 'start'  # allow simpler import

ultralytics/abc

@@ -0,0 +1 @@
+

ultralytics/datasets/Argoverse.yaml

@@ -0,0 +1,73 @@
+# Ultralytics YOLO 🚀, GPL-3.0 license
+# Argoverse-HD dataset (ring-front-center camera) http://www.cs.cmu.edu/~mengtial/proj/streaming/ by Argo AI
+# Example usage: yolo train data=Argoverse.yaml
+# parent
+# ├── ultralytics
+# └── datasets
+#     └── Argoverse  ← downloads here (31.3 GB)
+
+
+# Train/val/test sets as 1) dir: path/to/imgs, 2) file: path/to/imgs.txt, or 3) list: [path/to/imgs1, path/to/imgs2, ..]
+path: ../datasets/Argoverse  # dataset root dir
+train: Argoverse-1.1/images/train/  # train images (relative to 'path') 39384 images
+val: Argoverse-1.1/images/val/  # val images (relative to 'path') 15062 images
+test: Argoverse-1.1/images/test/  # test images (optional) https://eval.ai/web/challenges/challenge-page/800/overview
+
+# Classes
+names:
+  0: person
+  1: bicycle
+  2: car
+  3: motorcycle
+  4: bus
+  5: truck
+  6: traffic_light
+  7: stop_sign
+
+
+# Download script/URL (optional) ---------------------------------------------------------------------------------------
+download: |
+  import json
+  from tqdm import tqdm
+  from ultralytics.yolo.utils.downloads import download
+  from pathlib import Path
+
+  def argoverse2yolo(set):
+      labels = {}
+      a = json.load(open(set, "rb"))
+      for annot in tqdm(a['annotations'], desc=f"Converting {set} to YOLOv5 format..."):
+          img_id = annot['image_id']
+          img_name = a['images'][img_id]['name']
+          img_label_name = f'{img_name[:-3]}txt'
+
+          cls = annot['category_id']  # instance class id
+          x_center, y_center, width, height = annot['bbox']
+          x_center = (x_center + width / 2) / 1920.0  # offset and scale
+          y_center = (y_center + height / 2) / 1200.0  # offset and scale
+          width /= 1920.0  # scale
+          height /= 1200.0  # scale
+
+          img_dir = set.parents[2] / 'Argoverse-1.1' / 'labels' / a['seq_dirs'][a['images'][annot['image_id']]['sid']]
+          if not img_dir.exists():
+              img_dir.mkdir(parents=True, exist_ok=True)
+
+          k = str(img_dir / img_label_name)
+          if k not in labels:
+              labels[k] = []
+          labels[k].append(f"{cls} {x_center} {y_center} {width} {height}\n")
+
+      for k in labels:
+          with open(k, "w") as f:
+              f.writelines(labels[k])
+
+
+  # Download
+  dir = Path(yaml['path'])  # dataset root dir
+  urls = ['https://argoverse-hd.s3.us-east-2.amazonaws.com/Argoverse-HD-Full.zip']
+  download(urls, dir=dir)
+
+  # Convert
+  annotations_dir = 'Argoverse-HD/annotations/'
+  (dir / 'Argoverse-1.1' / 'tracking').rename(dir / 'Argoverse-1.1' / 'images')  # rename 'tracking' to 'images'
+  for d in "train.json", "val.json":
+      argoverse2yolo(dir / annotations_dir / d)  # convert VisDrone annotations to YOLO labels