live2d addition

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');
@@ -789,23 +874,32 @@ async function setExpression(character, expression, force) {
                     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 <img> 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 = `
         <div class="expression_settings">
             <div class="inline-drawer">
@@ -1060,7 +1153,15 @@ function setExpressionOverrideHtml(forceClear = false) {
                     <b>Character Expressions</b>
                     <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
+
                 <div class="inline-drawer-content">
+					<!-- Toggle button for aituber/static images -->
+                    <div class="toggle_button">
+						<label class="switch">
+                            <input id="image_type_toggle" type="checkbox">
+                            <span class="slider round"></span>
+                        <label for="image_type_toggle">Image Type - Live2d (extras)</label>
+                  </div>
                                       <div class="offline_mode">
                         <small>You are in offline mode. Click on the image below to set the expression.</small>
                     </div>
@@ -1090,6 +1191,7 @@ function setExpressionOverrideHtml(forceClear = false) {
             </form>
         </div>
         `;
+
         $('#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()) {