javascript/main.js

var key_down_history = [];
var currentIndex = -1;

var gradioContainer = null;

var isInIframe = (window.self !== window.top);
var currentTime = new Date().getTime();

let windowWidth = window.innerWidth;
let lines_json = []
let lines_praise = []

function addInit() {
    return true;
}

function gradioApp() {
    const elems = document.getElementsByTagName('gradio-app');
    const elem = elems.length == 0 ? document : elems[0];

    if (elem !== document) {
        elem.getElementById = function(id) {
            return document.getElementById(id);
        };
    }
    return elem.shadowRoot ? elem.shadowRoot : elem;
}

function initialize() {
    gradioObserver.observe(gradioApp(), { childList: true, subtree: true });

    gradioContainer = gradioApp().querySelector(".gradio-container");

    fetch('file=assets/lines.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            lines_json = data;
            set_speak_examples();
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });

    

    return true;
}

function set_speak_examples() {
    buttons = gradioApp().querySelectorAll("#examples div button");
    speak_input = gradioApp().querySelector("#speak_input label textarea");

    let lines_praise = lines_json["夸夸你 | Praise"];
    let lines_scripts = lines_json["游戏台词 | Scripts"];
    let lines_meme = lines_json["玩梗 | Meme"];
    let praiseArray = Object.values(lines_praise);
    let scriptsArray = Object.values(lines_scripts);
    let memeArray = Object.values(lines_meme);

    buttons[0].addEventListener("click", function() {
        const randomString = praiseArray[Math.floor(Math.random() * praiseArray.length)];
        speak_input.value = randomString;
        var event = new Event('input', {
            bubbles: true,
            cancelable: true,
        });
        speak_input.dispatchEvent(event);
    });
    buttons[1].addEventListener("click", function() {
        const randomString = scriptsArray[Math.floor(Math.random() * scriptsArray.length)];
        speak_input.value = randomString;
        var event = new Event('input', {
            bubbles: true,
            cancelable: true,
        });
        speak_input.dispatchEvent(event);
    });
    buttons[2].addEventListener("click", function() {
        const randomString = memeArray[Math.floor(Math.random() * memeArray.length)];
        speak_input.value = randomString;
        var event = new Event('input', {
            bubbles: true,
            cancelable: true,
        });
        speak_input.dispatchEvent(event);
    });

}

// 监视页面内部 DOM 变动
var gradioObserver = new MutationObserver(function (mutations) {
    for (var i = 0; i < mutations.length; i++) {
        if (mutations[i].addedNodes.length) {
            if (addInit()) {
                gradioObserver.disconnect();
                return;
            }
        }
    }
});

// 监视页面变化
window.addEventListener("DOMContentLoaded", function () {
    windowWidth = window.innerWidth;
    gradioApp().addEventListener("render", initialize);
    isInIframe = (window.self !== window.top);
});

console.log("Welcome to TalkingFlower!");