💄 style: update tags style

.gitignore

@@ -37,3 +37,4 @@ lambda/mock/index.js
 config.yml
 yarn.lock
 venv
+temp

src/components/Sidebar/TagList.tsx

@@ -1,11 +1,12 @@
 import React, { useCallback, useMemo } from 'react'
 import { WithContext, ReactTagsProps as WithContextProps } from 'react-tag-input'
 import styled from 'styled-components'
-import { suggestions } from './utils'
+import { genTagType, suggestions } from './utils'
 
 export interface TagItem {
   id: string
   text: string
+  className?: string
 }
 
 export type PromptType = 'positive' | 'negative'
@@ -114,7 +115,20 @@ const View = styled.div<{ type: PromptType }>`
     border: none;
     cursor: pointer;
     background: none;
-    color: white;
+    color: var(--color-text);
+  }
+
+  .ReactTags__lora {
+    background: var(--cyan-2) !important;
+    border-color: var(--cyan-3) !important;
+  }
+  .ReactTags__hypernet {
+    background: var(--purple-2) !important;
+    border-color: var(--purple-3) !important;
+  }
+  .ReactTags__embedding {
+    background: var(--orange-2) !important;
+    border-color: var(--orange-3) !important;
   }
 `
 
@@ -144,7 +158,7 @@ const TagList: React.FC<TagListProps> = ({ tags, setTags, type, setValue }) => {
 
   const handleAddition = useCallback(
     (tag: TagItem) => {
-      const newTags = [...tags, tag]
+      const newTags = [...tags, genTagType(tag)]
       setTags(newTags)
       setValue(newTags)
     },
@@ -155,7 +169,7 @@ const TagList: React.FC<TagListProps> = ({ tags, setTags, type, setValue }) => {
     (tag: TagItem, currPos: number, newPos: number) => {
       const newTags = tags.slice()
       newTags.splice(currPos, 1)
-      newTags.splice(newPos, 0, tag)
+      newTags.splice(newPos, 0, genTagType(tag))
       setTags(newTags)
       setValue(newTags)
     },
@@ -165,7 +179,7 @@ const TagList: React.FC<TagListProps> = ({ tags, setTags, type, setValue }) => {
   const handleTagUpdate = useCallback(
     (i: number, tag: TagItem) => {
       const newTags = [...tags]
-      newTags[i] = tag
+      newTags[i] = genTagType(tag)
       setTags(newTags)
       setValue(newTags)
     },

src/components/Sidebar/utils.ts

@@ -1,6 +1,21 @@
 import negativeData from '@/data/negative.json'
 import positiveData from '@/data/positive.json'
 import { Converter } from '@/script/format-prompt'
+import { TagItem } from './TagList'
+
+export const genTagType = (tag: TagItem): TagItem => {
+  const newTag = tag
+  if (newTag.text.includes('<lora')) {
+    newTag.className = 'ReactTags__lora'
+  } else if (newTag.text.includes('<hypernet')) {
+    newTag.className = 'ReactTags__hypernet'
+  } else if (newTag.text.includes('<embedding')) {
+    newTag.className = 'ReactTags__embedding'
+  } else {
+    newTag.className = undefined
+  }
+  return newTag
+}
 
 export const formatPrompt = (value: string) => {
   const text = Converter.convertStr(value)
@@ -15,7 +30,7 @@ export const formatPrompt = (value: string) => {
       .replace(/,/g, ', ')
     return Converter.convertStr2Array(newItem).join(', ')
   })
-  return textArray.map((tag) => ({ id: tag, text: tag }))
+  return textArray.map((tag) => genTagType({ id: tag, text: tag }))
 }
 
 const genSuggestions = (array: string[]) =>

src/pages/index/index.tsx

@@ -40,17 +40,14 @@ const Root: React.FC = () => {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
+  favicon()
   const root = document.createElement('div')
   root.setAttribute('id', 'root')
   gradioApp().append(root)
   const client = createRoot(root)
   client.render(<Root />)
 })
 
-onUiLoaded(() => {
-  favicon()
-})
-
 onUiUpdate(() => {
   formatPrompt()
   promptBracketChecker()

src/script/favicon.ts

@@ -1,21 +1,7 @@
-/**
- * 处理网站的 favicon 图标
- */
-class FaviconHandler {
-  /**
-   * 设置网站的 favicon 图标
-   */
-  static setFavicon(): void {
-    const link: HTMLLinkElement = document.createElement('link')
-    link.rel = 'icon'
-    link.type = 'image/svg+xml'
-    link.href = 'https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg'
-    document.getElementsByTagName('head')[0].appendChild(link)
-  }
-}
-
-onUiLoaded(() => {})
-
 export default () => {
-  FaviconHandler.setFavicon()
+  const link: HTMLLinkElement = document.createElement('link')
+  link.rel = 'icon'
+  link.type = 'image/svg+xml'
+  link.href = 'https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg'
+  document.getElementsByTagName('head')[0].appendChild(link)
 }

src/script/format-prompt.ts

@@ -265,12 +265,6 @@ export class Converter {
   }
 }
 
-/**
- * 注册UI更新回调函数
- * 在UI更新时添加提示按钮
- */
-onUiUpdate(() => {})
-
 export default () => {
   Converter.addPromptButton('txt2img')
   Converter.addPromptButton('img2img')

src/script/prompt-bracket-checker.ts

@@ -63,8 +63,6 @@ const setupBracketChecking = (idPrompt: string, idCounter: string): void => {
   textarea.addEventListener('input', bracketChecker.check)
 }
 
-onUiUpdate(() => {})
-
 export default () => {
   const elements = ['txt2img', 'txt2img_neg', 'img2img', 'img2img_neg']
   elements.forEach((prompt) => {

src/theme/components/extra-network.less

@@ -69,6 +69,10 @@ button#img2img_extra_networks {
         a {
           font-size: 15px !important;
           margin: 0 !important;
+          text-shadow: 1px 1px black;
+          color: #fff;
+          white-space: nowrap;
+          text-overflow: ellipsis;
         }
       }
     }