Add a spinner for image captioning button

README.md

@@ -55,7 +55,7 @@ Extension name in a route
 #### **Output**
 File content
 
-### BLIP model for image captioning
+### Image captioning
 `POST /api/caption`
 #### **Input**
 ```
@@ -66,7 +66,7 @@ File content
 { "caption": "caption of the posted image" }
 ```
 
-### BART model for text summarization
+### Text summarization
 `POST /api/summarize`
 #### **Input**
 ```
@@ -86,7 +86,7 @@ File content
 | `length_penalty`      | 1.5                                                           |
 | `bad_words`           | ["\n", '"', "*", "[", "]", "{", "}", ":", "(", ")", "<", ">"] |
 
-### BERT model for text classification
+### Text sentiment classification
 `POST /api/classify`
 #### **Input**
 ```
@@ -145,7 +145,7 @@ File content
 }
 ```
 
-### GPT-2 for Stable Diffusion prompt generation
+### Stable Diffusion prompt generation
 `POST /api/prompt`
 #### **Input**
 ```
@@ -156,7 +156,7 @@ File content
 { "prompts": [ "array of generated prompts" ] }
 ```
 
-### Stable Diffusion for image generation
+### Stable Diffusion image generation
 `POST /api/image`
 #### **Input**
 ```
@@ -175,10 +175,10 @@ File content
 | `--share`                | Shares the app on CloudFlare tunnel                                    |
 | `--cpu`                  | Run the models on the CPU instead of CUDA                              |
 | `--summarization-model`  | Load a custom BART summarization model.<br>Expects a HuggingFace model ID.<br>Default: [Qiliang/bart-large-cnn-samsum-ChatGPT_v3](https://huggingface.co/Qiliang/bart-large-cnn-samsum-ChatGPT_v3) |
-| `--classification-model` | Load a custom BERT sentiment classification model.<br>Expects a HuggingFace model ID.<br>Default: [bhadresh-savani/distilbert-base-uncased-emotion](https://huggingface.co/bhadresh-savani/distilbert-base-uncased-emotion) |
-| `--captioning-model`     | Load a custom BLIP captioning model.<br>Expects a HuggingFace model ID.<br>Default: [Salesforce/blip-image-captioning-base](https://huggingface.co/Salesforce/blip-image-captioning-base) |
+| `--classification-model` | Load a custom sentiment classification model.<br>Expects a HuggingFace model ID.<br>Default: [bhadresh-savani/distilbert-base-uncased-emotion](https://huggingface.co/bhadresh-savani/distilbert-base-uncased-emotion) |
+| `--captioning-model`     | Load a custom captioning model.<br>Expects a HuggingFace model ID.<br>Default: [Salesforce/blip-image-captioning-base](https://huggingface.co/Salesforce/blip-image-captioning-base) |
 | `--keyphrase-model`      | Load a custom key phrase extraction model.<br>Expects a HuggingFace model ID.<br>Default: [ml6team/keyphrase-extraction-distilbert-inspec](https://huggingface.co/ml6team/keyphrase-extraction-distilbert-inspec) |
-| `--prompt-model`         | Load a custom GPT-2 prompt generation model.<br>Expects a HuggingFace model ID.<br>Default: [FredZhang7/anime-anything-promptgen-v2](https://huggingface.co/FredZhang7/anime-anything-promptgen-v2) |
+| `--prompt-model`         | Load a custom prompt generation model.<br>Expects a HuggingFace model ID.<br>Default: [FredZhang7/anime-anything-promptgen-v2](https://huggingface.co/FredZhang7/anime-anything-promptgen-v2) |
 | `--sd-model`             | Load a custom Stable Diffusion image generation model.<br>Expects a HuggingFace model ID.<br>Default: [ckpt/anything-v4.5-vae-swapped](https://huggingface.co/ckpt/anything-v4.5-vae-swapped)<br>*Must have VAE pre-baked in PyTorch format or the output will look drab!* |
 | `--sd-cpu`               | Forces the Stable Diffusion generation pipeline to run on the CPU.<br>**SLOW!** |
 | `--enable-modules`       | Override a list of enabled modules. Runs with everything enabled by default.<br>Expects a comma-separated list of module names. See [Modules](#modules) |

extensions/caption/assets/spinner-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="M304 48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zm0 416c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM48 304c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm464-48c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48zM142.9 437c18.7-18.7 18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zm0-294.2c18.7-18.7 18.7-49.1 0-67.9S93.7 56.2 75 75s-18.7 49.1 0 67.9s49.1 18.7 67.9 0zM369.1 437c18.7 18.7 49.1 18.7 67.9 0s18.7-49.1 0-67.9s-49.1-18.7-67.9 0s-18.7 49.1 0 67.9z"/></svg>

extensions/caption/index.js

@@ -30,6 +30,22 @@ async function moduleWorker() {
         : $('#send_picture').show(200);
 }
 
+function setImageIcon() {
+    const sendButton = document.getElementById('send_picture');
+    const imgUrl = new URL(getApiUrl());
+    imgUrl.pathname = `/api/asset/${MODULE_NAME}/image-solid.svg`;
+    sendButton.style.backgroundImage = `url(${imgUrl.toString()})`;
+    sendButton.classList.remove('spin');
+}
+
+function setSpinnerIcon() {
+    const sendButton = document.getElementById('send_picture');
+    const imgUrl = new URL(getApiUrl());
+    imgUrl.pathname = `/api/asset/${MODULE_NAME}/spinner-solid.svg`;
+    sendButton.style.backgroundImage = `url(${imgUrl.toString()})`;
+    sendButton.classList.add('spin');
+}
+
 async function sendCaptionedMessage(caption, image) {
     const context = getContext();
     const messageText = `[${context.name1} sends ${context.name2 ?? ''} a picture that contains: ${caption}]`;
@@ -47,6 +63,7 @@ async function sendCaptionedMessage(caption, image) {
 }
 
 async function onSelectImage(e) {
+    setSpinnerIcon();
     const file = e.target.files[0];
 
     if (!file) {
@@ -71,6 +88,7 @@ async function onSelectImage(e) {
     }
     finally {
         e.target.form.reset();
+        setImageIcon();
     }
 }
 
@@ -83,11 +101,8 @@ $(document).ready(function () {
     }
     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);
@@ -104,6 +119,7 @@ $(document).ready(function () {
 
     addPictureSendForm();
     addSendPictureButton();
+    setImageIcon();
     patchSendForm();
     setInterval(moduleWorker, UPDATE_INTERVAL);
 });

extensions/caption/manifest.json

@@ -6,6 +6,7 @@
     "js": "index.js",
     "css": "style.css",
     "assets": [
-        "image-solid.svg"
+        "image-solid.svg",
+        "spinner-solid.svg"
     ]
 }

extensions/caption/style.css

@@ -32,4 +32,16 @@
     .mes img.img_extra {
         max-width: 100%;
     }
+}
+
+.spin {
+    animation-name: spin;
+    animation-duration: 2000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+@keyframes spin {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(360deg);}
 }