#302 [Feature] Refresh for Extra Networks

src/src/App.vue

@@ -67,6 +67,7 @@
                             :hotkey="hotkey"
                             @show-extra-networks="onShowExtraNetworks"
                             @hide-extra-networks="onHideExtraNetworks"
+                            @refresh-extra-networks="onRefreshExtraNetworks"
             ></physton-prompt>
         </template>
         <translate-setting ref="translateSetting" v-model:language-code="languageCode"
@@ -1209,6 +1210,9 @@ export default {
         onHideExtraNetworks() {
             this.$refs.extraNetworksPopup.hide()
         },
+        onRefreshExtraNetworks() {
+            this._loadExtraNetworks()
+        },
     },
 }
 </script>

src/src/components/phystonPrompt.vue

@@ -504,6 +504,11 @@
                                     </Transition>
                                     <div class="tags-footer" v-if="item.type === 'extraNetworks'">
                                         <div class="tags-size">
+                                            <div class="tags-size-item" @click="onClickGroupExtraNetworkRefresh">
+                                                <icon-svg v-if="extraNetworksRefreshing" name="loading"/>
+                                                <icon-svg v-if="!extraNetworksRefreshing" class="hover-scale-120" name="refresh"/>
+                                                <div class="size-title">{{ this.getLang('refresh') }}</div>
+                                            </div>
                                             <div class="tags-size-item">
                                                 <!--<input class="size-range" type="range" min="10" max="1000" step="1"
                                                        :value="extraNetworksWidth"
@@ -750,7 +755,7 @@ export default {
             default: () => ({}),
         }
     },
-    emits: ['update:languageCode', 'update:autoTranslate', 'update:autoTranslateToEnglish', 'update:autoTranslateToLocal', 'update:autoRemoveSpace', 'update:autoRemoveLastComma', 'update:autoKeepWeightZero', 'update:autoKeepWeightOne', 'update:hideDefaultInput', 'update:hidePanel', 'update:enableTooltip', 'update:translateApi', 'click:translateApi', 'click:promptFormat', 'click:blacklist', 'click:hotkey', 'click:selectTheme', 'click:switchTheme', 'click:showAbout', 'click:selectLanguage', 'click:showHistory', 'click:showFavorite', 'refreshFavorites', 'click:showChatgpt', 'update:hideGroupTags', 'update:groupTagsColor', 'update:blacklist', 'showExtraNetworks', 'hideExtraNetworks', 'update:extraNetworksWidth', 'update:extraNetworksHeight', 'update:autoLoadWebuiPrompt'],
+    emits: ['update:languageCode', 'update:autoTranslate', 'update:autoTranslateToEnglish', 'update:autoTranslateToLocal', 'update:autoRemoveSpace', 'update:autoRemoveLastComma', 'update:autoKeepWeightZero', 'update:autoKeepWeightOne', 'update:hideDefaultInput', 'update:hidePanel', 'update:enableTooltip', 'update:translateApi', 'click:translateApi', 'click:promptFormat', 'click:blacklist', 'click:hotkey', 'click:selectTheme', 'click:switchTheme', 'click:showAbout', 'click:selectLanguage', 'click:showHistory', 'click:showFavorite', 'refreshFavorites', 'click:showChatgpt', 'update:hideGroupTags', 'update:groupTagsColor', 'update:blacklist', 'showExtraNetworks', 'hideExtraNetworks', 'refreshExtraNetworks', 'update:extraNetworksWidth', 'update:extraNetworksHeight', 'update:autoLoadWebuiPrompt'],
     data() {
         return {
             prompt: '',

src/src/mixins/phystonPrompt/groupTagsMixin.js

@@ -7,6 +7,7 @@ export default {
             groupTagsActive: '',
             subGroupTagsActive: '',
             groupTagsProcessed: [],
+            extraNetworksRefreshing: false,
         }
     },
     watch: {
@@ -224,11 +225,13 @@ export default {
                 let setLoading = (num) => {
                     if (num > 100) {
                         data.loading = false
+                        setTimeout(this.onClickGroupExtraNetworkRefresh, 1000)
                         // console.log('超时')
                         return
                     }
-                    if (opts && opts.sd_model_checkpoint === data.basename) {
+                    if (opts && opts.sd_model_checkpoint.indexOf(data.basename) === 0) {
                         data.loading = false
+                        setTimeout(this.onClickGroupExtraNetworkRefresh, 1000)
                         // console.log('已加载')
                         return
                     }
@@ -359,5 +362,12 @@ export default {
         onGroupExtraNetworkMouseLeave() {
             this.$emit('hideExtraNetworks')
         },
+        onClickGroupExtraNetworkRefresh() {
+            this.$emit('refreshExtraNetworks')
+            // this.extraNetworksRefreshing = true
+            // this._loadExtraNetworks().finally(() => {
+            //     this.extraNetworksRefreshing = false
+            // })
+        },
     }
 }

styles/main.less

@@ -1158,6 +1158,16 @@
     // .physton-prompt .prompt-tags .group-tabs .group-body .group-main .sub-group-main .tags-footer .tags-size .tags-size-item:hover
     --pp-pt-gt-gb-gm-sgm-tf-ts-tagsSizeItemHover-flex-basis: 50%;
 
+    // .physton-prompt .prompt-tags .group-tabs .group-body .group-main .sub-group-main .tags-footer .tags-size .tags-size-item .icon-svg-refresh
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-width: 16px;
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-height: 16px;
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-color: #999;
+
+    // .physton-prompt .prompt-tags .group-tabs .group-body .group-main .sub-group-main .tags-footer .tags-size .tags-size-item .icon-svg-loading
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-width: auto;
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-height: 16px;
+    --pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-color: none;
+
     // .physton-prompt .prompt-tags .group-tabs .group-body .group-main .sub-group-main .tags-footer .tags-size .tags-size-item:hover .size-range
     --pp-pt-gt-gb-gm-sgm-tf-ts-tsih-sizeRange-display: block;
 
@@ -3740,6 +3750,9 @@
                             justify-content: var(--pp-pt-gt-gb-gm-sgm-tf-ts-tagsSizeItem-justify-content);
                             align-items: var(--pp-pt-gt-gb-gm-sgm-tf-ts-tagsSizeItem-align-items);
 
+                            .set-icon-svg(var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-width), var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-height), var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgRefresh-color), icon-svg-refresh);
+                            .set-icon-svg(var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-width), var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-height), var(--pp-pt-gt-gb-gm-sgm-tf-ts-tsi-iconSvgLoading-color), icon-svg-loading);
+
                             &:hover {
                                 //flex-basis: var(--pp-pt-gt-gb-gm-sgm-tf-ts-tagsSizeItemHover-flex-basis);
                                 .size-range {