From 0eef05908d47bae80c6c70021c392d3063f71db9 Mon Sep 17 00:00:00 2001 From: joe Date: Mon, 31 Jul 2023 14:52:30 +0900 Subject: [PATCH] live2d addition --- .../scripts/extensions/expressions/index.js | 139 ++++++++++++++++-- 1 file changed, 127 insertions(+), 12 deletions(-) diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index be4fa18a2..54ab14da5 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/public/scripts/extensions/expressions/index.js @@ -9,6 +9,7 @@ const MODULE_NAME = 'expressions'; const UPDATE_INTERVAL = 2000; const FALLBACK_EXPRESSION = 'joy'; const DEFAULT_EXPRESSIONS = [ + "live2d", "admiration", "amusement", "anger", @@ -44,6 +45,9 @@ let lastCharacter = undefined; let lastMessage = null; let spriteCache = {}; let inApiCall = false; +let live2d_var = false; +let previousSrc = null; + function isVisualNovelMode() { return Boolean(!isMobile() && power_user.waifuMode && getContext().groupId); @@ -392,6 +396,68 @@ function onExpressionsShowDefaultInput() { } } +function loadLiveChar(value_name) { + const extensionsUrlInput = document.getElementById("extensions_url"); + + // Extract the value of the input element + const baseUrl = extensionsUrlInput.value; + + // Construct the full URL with the loadchar parameter + let url = `${baseUrl}/api/live2d/load?loadchar=http://localhost:8000/characters/${value_name}`; + console.log(url); + + fetch(url, { + method: 'GET', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + }) + .then(response => response.text()) + .then(data => console.log(data)) + .catch((error) => console.error('Error:', error)); +} + + +function handleImageChange(isChecked) { + const imgElement = document.querySelector('img#expression-image.expression'); + + if (!imgElement) { + console.log("Cannot find addExpressionImage()"); + return; + } + + if (isChecked) { + // Method get IP of endpoint + const extensionsUrlInput = document.getElementById("extensions_url"); + const value = extensionsUrlInput.value; + //const newValue = value.replace(/:\d+$/, ":5555"); + console.log(value); + + if (imgElement.src !== value + '/api/live2d/result_feed') { + const expressionListItemElement = document.querySelector('#live2d'); + const expressionImageElement = expressionListItemElement.querySelector('.expression_list_image'); + const newSrc = expressionImageElement.src; + + fetch(newSrc, { + method: 'HEAD' + }) + .then(response => { + if (response.ok) { + imgElement.src = value + '/api/live2d/result_feed'; + } + }) + .catch(error => { + console.error(error); // Log the error if necessary + }); + } else if (previousSrc) { + imgElement.src = previousSrc; // Revert the src to its previous value + } + } else if (previousSrc !== null) { + imgElement.src = previousSrc; // Revert the src to its previous value + } + live2d_var = isChecked; +} + async function moduleWorker() { const context = getContext(); @@ -405,6 +471,24 @@ async function moduleWorker() { if (context.groupId !== lastCharacter && context.characterId !== lastCharacter) { removeExpression(); spriteCache = {}; + + previousSrc = null; + + //uncheck live image + let checkbox = document.getElementById('image_type_toggle'); + if (checkbox.checked) { + checkbox.click(); + } + + //clear expression + let imgElement = document.getElementById('expression-image'); + imgElement.src = ""; + + //change live character + let inputElement = document.querySelector('input[name="avatar_url"]'); // get char name + let value_name = inputElement.value; + loadLiveChar(value_name); + } const vnMode = isVisualNovelMode(); @@ -654,7 +738,6 @@ async function getSpritesList(name) { try { const result = await fetch(`/get_sprites?name=${encodeURIComponent(name)}`); - let sprites = result.ok ? (await result.json()) : []; return sprites; } @@ -697,6 +780,8 @@ async function getExpressionsList() { } async function setExpression(character, expression, force) { + if (live2d_var == false) { + console.debug('entered setExpressions'); await validateImages(character); const img = $('img.expression'); @@ -725,8 +810,8 @@ async function setExpression(character, expression, force) { } } } - //only swap expressions when necessary - if (prevExpressionSrc !== sprite.path + //only swap expressions when necessary + if (prevExpressionSrc !== sprite.path && !img.hasClass('expression-animating')) { //clone expression expressionClone.addClass('expression-clone') @@ -789,23 +874,32 @@ async function setExpression(character, expression, force) { setDefault(); } }); - } - - } else { - if (extension_settings.expressions.showDefault) { - setDefault(); + } else { + if (extension_settings.expressions.showDefault) { + setDefault(); + } } } function setDefault() { console.debug('setting default'); const defImgUrl = `/img/default-expressions/${expression}.png`; - console.log(defImgUrl); + //console.log(defImgUrl); img.attr('src', defImgUrl); img.addClass('default'); } document.getElementById("expression-holder").style.display = ''; -} + + if (live2d_var == true) { + // Find the element with id="expression-image" and class="expression" + const imgElement = document.querySelector('img#expression-image.expression'); + //console.log("searching"); + if (imgElement) { + console.log("setting value"); + imgElement.src = 'http://127.0.0.1:5555/result_feed'; + }} + } + } function onClickExpressionImage() { // online mode doesn't need force set @@ -1052,7 +1146,6 @@ function setExpressionOverrideHtml(forceClear = false) { $('body').append(element); } function addSettings() { - const html = `
@@ -1060,8 +1153,16 @@ function setExpressionOverrideHtml(forceClear = false) { Character Expressions
+
-
+ +
+
+
You are in offline mode. Click on the image below to set the expression.
@@ -1090,6 +1191,7 @@ function setExpressionOverrideHtml(forceClear = false) {
`; + $('#extensions_settings').append(html); $('#expression_override_button').on('click', onClickExpressionOverrideButton); $('#expressions_show_default').on('input', onExpressionsShowDefaultInput); @@ -1105,7 +1207,19 @@ function setExpressionOverrideHtml(forceClear = false) { $(document).on('click', '.expression_list_delete', onClickExpressionDelete); $(window).on("resize", updateVisualNovelModeDebounced); $('.expression_settings').hide(); + + + $('#image_type_toggle').on('change', function() { + const isChecked = this.checked; + const inputElement = document.querySelector('input[name="avatar_url"]'); + const value_name = inputElement ? inputElement.value : ''; + if (isChecked) { + loadLiveChar(value_name); + } + handleImageChange(isChecked); + }); } + addExpressionImage(); addVisualNovelMode(); @@ -1116,6 +1230,7 @@ function setExpressionOverrideHtml(forceClear = false) { moduleWorker(); dragElement($("#expression-holder")) eventSource.on(event_types.CHAT_CHANGED, () => { + console.log("checked: " + live2d_var); setExpressionOverrideHtml(); if (isVisualNovelMode()) {