Teachablemachine_Result_fixed.user.js

// ==UserScript==
// @name         Teachablemachine Result
// @namespace    http://tampermonkey.net/
// @version      0.5
// @description  try to take over the world!
// @author       You
// @match        *://teachablemachine.withgoogle.com/*
// @grant        none
// @require      https://cdn.jsdelivr.net/npm/[email protected]/dist/socket.io.slim.js
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    //CodeLab Adapter
    const emit = (function () {
        const ADAPTER_TOPIC = "adapter/nodes/data";
        const NODE_ID = "eim/node_tm";
        const socket = io(`wss://codelab-adapter.codelab.club:12358` + "/test", {
            transports: ["websocket"]
        });
        socket.on("connect", () => {
            // 触发一次发布插件状态的请求
            alert("connected!");
        });
        socket.on("disconnect", reason => {
            alert(`disconnect! ${reason}`);
        });

        return function (content) {
            socket.emit("actuator", { topic: ADAPTER_TOPIC, payload: {content: content, node_id: NODE_ID} });
            console.log("emit!");
        }
    })()

    const MutationObserver = window.MutationObserver ||
        window.WebKitMutationObserver ||
        window.MozMutationObserver;
    const interval = 500 // resultHandler 触发间隔
    let result = {}
    let TmRunObserver
    window.result = result

    let resetTmRunObserver = function () {
      if (TmRunObserver) {
          TmRunObserver.disconnect();
          TmRunObserver = null;
          console.log('-----reset TmRunObserver-----');
      }
    }
    // 处理result变化
    let resultHandler = throttle(function() {
        // Use train result to do something....
        emit(result)
        console.log(getRedactedPathname() + ' result change:\n', result)
    }, interval)

    // 处理document Body变化
    let changedHandler = function (element) {
        console.log('--DOM change handler--')
        let Train = document.querySelector('tm-teachable-image-app') ||
            document.querySelector('tm-teachable-audio-app') ||
            document.querySelector('tm-teachable-pose-app')
        let tmTrain = Train && Train.shadowRoot.querySelector('tm-train')
        let trainButton = tmTrain && tmTrain.shadowRoot.querySelector('tm-progress-button');

        if (trainButton) {
            trainButton.removeEventListener('click', resetTmRunObserver);
            trainButton.addEventListener('click', resetTmRunObserver);
        }

        let resultDOM = Train && Train.shadowRoot.querySelector('tm-run')
        if (!resultDOM) return

        console.log('--Get tm-run--')
        let barResultParent = resultDOM.shadowRoot.querySelector('.sub-label')
        if (TmRunObserver || !barResultParent) return
        TmRunObserver = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                if (mutation.addedNodes) {
                    mutation.addedNodes.forEach((item => {
                        if (item.className === 'bar-graph-holder') {
                            handlerResultBar(item)
                        }
                    }))
                }
            })
        });
        TmRunObserver.observe(barResultParent, {childList: true, attributes: false, subtree: false});
        console.log('-----------sub-label is observeing-----------\n', barResultParent)
    }

    // 处理resultbar DOM的父容器变化
    function handlerResultBar (resultBar) {
        console.log('--Get bar-graph-holder--', resultBar)
        window.result = result = {}

        let classLabel = resultBar.querySelector('.bar-graph-label')
        let classGraph = resultBar.querySelector('tm-bar-graph')

        // 监听识别结果
        let resultObserver = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                result[classLabel.innerText] = mutation.target.value
                resultHandler()
            });
        });
        resultObserver.observe(classGraph, {childList: false, attributes: true, subtree: false});

    }
    if (MutationObserver) {
        // MutationObserver 配置
        let MutationObserverConfig = {
            // 监听子节点
            childList: true,
            // 监听 href 属性
            attributes: true,
            // 监听整棵树
            subtree: true
        };
        // 监听器
        let observer = new MutationObserver(function (mutations) {
            mutations.forEach(function (mutation) {
                // 处理 变化的 DOM
                changedHandler(mutation.target);
                // 处理 新增的 DOM
                if (mutation.addedNodes) {
                    mutation.addedNodes.forEach(changedHandler);
                }
                // 删除的 DOM 无需处理 (mutation.removedNodes)
            });
        });
            // 开始监听
        observer.observe(document.body, MutationObserverConfig);
    }

    function throttle (func, interval) {
        let lastExec
        let timer
        return function () {
            let now = +new Date()
            if (!lastExec) {
                lastExec = +new Date()
                func()
                return
            }
            if (now - lastExec < interval) {
                if (timer) clearTimeout(timer)
                timer = setTimeout(func, interval)
                return
            }
            lastExec = +new Date()
            func()
        }

    }
    function getRedactedPathname(){
        let p = window.location.pathname;
        p = p.replace(/(?<=\/models\/)(\w+)(\/.+)?/gi, "[redacted_id]$2");
        p = p.replace(/(\/train\/\w+\/)(\w+)(\/.+)?/gi, "$1[redacted_drive_id]$3");
        p = p.replace(/(\/drive.+)(\"\w+\")(.+)/gi, "$1[redacted_drive_id]$3")
        p = p.replace(/(\/train.+id=)(\w+)(&.+)/gi, "$1[redacted_drive_id]$3")
        return p;
    }
})();