Implement caption plugin

extensions/caption/assets/image-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>

extensions/caption/index.js

@@ -1,3 +1,109 @@
 const MODULE_NAME = 'caption';
+const UPDATE_INTERVAL = 1000;
 
-alert(MODULE_NAME);
+const getContext = function () {
+    return window['TavernAI'].getContext();
+}
+
+const getApiUrl = function () {
+    return localStorage.getItem('extensions_url');
+}
+
+function getBase64Async(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = function () {
+            resolve(reader.result);
+        };
+        reader.onerror = function (error) {
+            reject(error);
+        };
+    });
+}
+
+async function moduleWorker() {
+    const context = getContext();
+
+    context.onlineStatus === 'no_connection'
+        ? $('#send_picture').hide(200)
+        : $('#send_picture').show(200);
+}
+
+async function sendCaptionedMessage(caption, image) {
+    const context = getContext();
+    const messageText = `[${context.name1} sends ${context.name2 ?? ''} a picture that contains: ${caption}]`;
+    const message = {
+        name: context.name1,
+        is_user: true,
+        is_name: true,
+        send_date: Date.now(),
+        mes: messageText,
+        extra: { image: image },
+    };
+    context.chat.push(message);
+    context.addOneMessage(message);
+    await context.generate();
+}
+
+async function onSelectImage(e) {
+    const file = e.target.files[0];
+
+    if (!file) {
+        return;
+    }
+
+    try {
+        const base64Img = await getBase64Async(file);
+        const url = new URL(getApiUrl());
+        url.pathname = '/api/caption';
+
+        const apiResult = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ image: base64Img.split(',')[1] }) });
+
+        if (apiResult.ok) {
+            const data = await apiResult.json();
+            const caption = data.caption;
+            await sendCaptionedMessage(caption, base64Img);
+        }
+    }
+    catch (error) {
+        console.log(error);
+    }
+    finally {
+        e.target.form.reset();
+    }
+}
+
+$(document).ready(function () {
+    function patchSendForm() {
+        const columns = $('#send_form').css('grid-template-columns').split(' ');
+        columns[columns.length - 1] = `${parseInt(columns[columns.length - 1]) + 40}px`;
+        columns[1] = 'auto';
+        $('#send_form').css('grid-template-columns', columns.join(' '));
+    }
+    function addSendPictureButton() {
+        const sendButton = document.createElement('input');
+        const imgUrl = new URL(getApiUrl());
+        imgUrl.pathname = `/api/asset/${MODULE_NAME}/image-solid.svg`;
+        sendButton.type = 'button';
+        sendButton.id = 'send_picture';
+        sendButton.style.backgroundImage = `url(${imgUrl.toString()})`;
+        $(sendButton).hide();
+        $(sendButton).on('click', () => $('#img_file').click());
+        $('#send_but_sheld').prepend(sendButton);
+    }
+    function addPictureSendForm() {
+        const inputHtml = `<input id="img_file" type="file" accept="image/*">`;
+        const imgForm = document.createElement('form');
+        imgForm.id = 'img_form';
+        $(imgForm).append(inputHtml);
+        $(imgForm).hide();
+        $('#form_sheld').append(imgForm);
+        $('#img_file').on('change', onSelectImage);
+    }
+
+    addPictureSendForm();
+    addSendPictureButton();
+    patchSendForm();
+    setInterval(moduleWorker, UPDATE_INTERVAL);
+});

extensions/caption/manifest.json

@@ -4,5 +4,8 @@
         "caption"
     ],
     "js": "index.js",
-    "css": "style.css"
+    "css": "style.css",
+    "assets": [
+        "image-solid.svg"
+    ]
 }

extensions/caption/style.css

@@ -1,3 +1,35 @@
-.test {
-    color: red;
+#send_picture {
+    width: 40px;
+    height: 40px;
+    margin: 0;
+    padding: 1px;
+    background: no-repeat;
+    background-size: 26px auto;
+    background-position: center center;
+    outline: none;
+    border: none;
+    cursor: pointer;
+    transition: 0.3s;
+    filter: invert(1);
+    opacity: 0.5;
+}
+
+#send_picture:hover {
+    opacity: 1;
+}
+
+#img_form {
+    display: none;
+}
+
+.mes img.img_extra {
+    max-width: 600px;
+    max-height: 300px;
+    border-radius: 10px;
+}
+
+@media (max-width: 768px) {
+    .mes img.img_extra {
+        max-width: 100%;
+    }
 }

extensions/memory/index.js

@@ -1,3 +1,3 @@
 const MODULE_NAME = 'memory';
 
-alert(MODULE_NAME);
+console.log(MODULE_NAME);