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 cn_lines_json = []
let en_lines_json = []
let ja_lines_json = []

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");

    loadData();

    return true;
}

async function loadData() {
    const fetchLines = fetch('file=assets/lines.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });

    const fetchCnLines = fetch('file=assets/cn_lines.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });

    const fetchEnLines = fetch('file=assets/en_lines.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });

    const fetchJaLines = fetch('file=assets/ja_lines.json')
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        });

    Promise.all([fetchLines, fetchCnLines, fetchEnLines, fetchJaLines])
        .then(([linesData, cnLinesData, enLinesData, jaLinesData]) => {
            lines_json = linesData;
            cn_lines_json = cnLinesData;
            en_lines_json = enLinesData;
            ja_lines_json = jaLinesData;
            set_speak_examples();
        })
        .catch(error => {
            console.error('There has been a problem with your fetch operation:', error);
        });
}

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

    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);
    let cnlinesArray = Object.values(cn_lines_json);
    let enlinesArray = Object.values(en_lines_json);
    let jalinesArray = Object.values(ja_lines_json);

    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() {
        if (voice.value == "Chinese") {
            const randomString = cnlinesArray[Math.floor(Math.random() * cnlinesArray.length)];
            speak_input.value = randomString;
            var event = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            speak_input.dispatchEvent(event);
        } else if (voice.value == "English") {
            const randomString = enlinesArray[Math.floor(Math.random() * enlinesArray.length)];
            speak_input.value = randomString;
            var event = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            speak_input.dispatchEvent(event);
        } else if (voice.value == "Japanese"){
            const randomString = jalinesArray[Math.floor(Math.random() * jalinesArray.length)];
            speak_input.value = randomString;
            var event = new Event('input', {
                bubbles: true,
                cancelable: true,
            });
            speak_input.dispatchEvent(event);
        }


        // 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!");