📝 docs: add toc

main
倏昱 2023-06-06 10:51:31 +08:00
parent f631d13c3a
commit 05554907e9
35 changed files with 503 additions and 443 deletions

View File

@ -1,3 +1,3 @@
module.exports = {
displayTypes: ['feat', 'fix', 'styles', 'pref'],
}
};

View File

@ -1,11 +1,11 @@
name: "🐛 反馈缺陷 Bug Report"
description: "反馈一个问题缺陷 | Report an bug"
title: "[Bug] "
labels: "🐛 Bug"
name: '🐛 反馈缺陷 Bug Report'
description: '反馈一个问题缺陷 | Report an bug'
title: '[Bug] '
labels: '🐛 Bug'
body:
- type: dropdown
attributes:
label: "💻 系统环境 | Operating System"
label: '💻 系统环境 | Operating System'
options:
- Windows
- macOS
@ -16,7 +16,7 @@ body:
required: true
- type: dropdown
attributes:
label: "🌐 浏览器 | Browser"
label: '🌐 浏览器 | Browser'
options:
- Chrome
- Edge
@ -27,19 +27,19 @@ body:
required: true
- type: textarea
attributes:
label: "🐛 问题描述 | Bug Description"
label: '🐛 问题描述 | Bug Description'
description: A clear and concise description of the bug.
validations:
required: true
- type: textarea
attributes:
label: "🚦 期望结果 | Expected Behavior"
label: '🚦 期望结果 | Expected Behavior'
description: A clear and concise description of what you expected to happen.
- type: textarea
attributes:
label: "📷 复现步骤 | Recurrence Steps"
label: '📷 复现步骤 | Recurrence Steps'
description: A clear and concise description of how to recurrence.
- type: textarea
attributes:
label: "📝 补充信息 | Additional Information"
label: '📝 补充信息 | Additional Information'
description: If your problem needs further explanation, or if the issue you're seeing cannot be reproduced in a gist, please add more information here.

View File

@ -1,21 +1,21 @@
name: "🌠 功能需求 Feature Request"
description: "需求或建议 | Suggest an idea"
title: "[Request] "
labels: "🌠 Feature Request"
name: '🌠 功能需求 Feature Request'
description: '需求或建议 | Suggest an idea'
title: '[Request] '
labels: '🌠 Feature Request'
body:
- type: textarea
attributes:
label: "🥰 需求描述 | Feature Description"
label: '🥰 需求描述 | Feature Description'
description: Please add a clear and concise description of the problem you are seeking to solve with this feature request.
validations:
required: true
- type: textarea
attributes:
label: "🧐 解决方案 | Proposed Solution"
label: '🧐 解决方案 | Proposed Solution'
description: Describe the solution you'd like in a clear and concise manner.
validations:
required: true
- type: textarea
attributes:
label: "📝 补充信息 | Additional Information"
label: '📝 补充信息 | Additional Information'
description: Add any other context about the problem here.

View File

@ -1,15 +1,15 @@
name: "😇 疑问或帮助 Help Wanted"
description: "疑问或需要帮助 | Need help"
title: "[Question] "
labels: "😇 Help Wanted"
name: '😇 疑问或帮助 Help Wanted'
description: '疑问或需要帮助 | Need help'
title: '[Question] '
labels: '😇 Help Wanted'
body:
- type: textarea
attributes:
label: "🧐 问题描述 | Proposed Solution"
label: '🧐 问题描述 | Proposed Solution'
description: A clear and concise description of the proplem.
validations:
required: true
- type: textarea
attributes:
label: "📝 补充信息 | Additional Information"
label: '📝 补充信息 | Additional Information'
description: Add any other context about the problem here.

View File

@ -1,17 +1,17 @@
version: 2
updates:
- package-ecosystem: npm
directory: "/"
directory: '/'
schedule:
interval: weekly
time: "19:00"
time: '19:00'
timezone: 'Asia/Shanghai'
open-pull-requests-limit: 10
versioning-strategy: increase
- package-ecosystem: "github-actions"
directory: "/"
- package-ecosystem: 'github-actions'
directory: '/'
schedule:
interval: monthly
time: "19:00"
time: '19:00'
timezone: 'Asia/Shanghai'

View File

@ -2,7 +2,7 @@ name: Issue Check Inactive
on:
schedule:
- cron: "0 0 */15 * *"
- cron: '0 0 */15 * *'
permissions:
contents: read
@ -10,8 +10,8 @@ permissions:
jobs:
issue-check-inactive:
permissions:
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
runs-on: ubuntu-latest
steps:
- name: check-inactive
@ -19,4 +19,4 @@ jobs:
with:
actions: 'check-inactive'
inactive-label: 'Inactive'
inactive-day: 30
inactive-day: 30

View File

@ -2,7 +2,7 @@ name: Issue Close Require
on:
schedule:
- cron: "0 0 * * *"
- cron: '0 0 * * *'
permissions:
contents: read
@ -10,8 +10,8 @@ permissions:
jobs:
issue-close-require:
permissions:
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
runs-on: ubuntu-latest
steps:
- name: need reproduce

View File

@ -12,8 +12,8 @@ permissions:
jobs:
issue-remove-inactive:
permissions:
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
issues: write # for actions-cool/issues-helper to update issues
pull-requests: write # for actions-cool/issues-helper to update PRs
runs-on: ubuntu-latest
steps:
- name: remove inactive
@ -22,4 +22,4 @@ jobs:
with:
actions: 'remove-labels'
issue-number: ${{ github.event.issue.number }}
labels: 'Inactive'
labels: 'Inactive'

View File

@ -1,3 +1,3 @@
tasks:
- init: pnpm install
command: pnpm run start
command: pnpm run start

View File

@ -1,4 +1,4 @@
module.exports = {
extends: ['semantic-release-config-gitmoji'],
branches: ['main'],
}
};

View File

@ -1,9 +1,8 @@
const config = {
module.exports = {
plugins: [
'remark-preset-lint-recommended',
['remark-lint-list-item-indent', 'space'],
['remark-lint-no-literal-urls', false],
['remark-toc', { heading: 'TOC', maxDepth: 3 }],
],
};
module.exports = config;

View File

@ -1,25 +1,25 @@
import { defineConfig } from 'umi'
import WebpackShellPlugin from 'webpack-shell-plugin-next'
import { defineConfig } from 'umi';
import WebpackShellPlugin from 'webpack-shell-plugin-next';
// @ts-ignore
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
// @ts-ignore
import lightningcss from 'lightningcss'
import lightningcss from 'lightningcss';
// @ts-ignore
import browserslist from 'browserslist'
import browserslist from 'browserslist';
const mac = [
'rm ./javascript/index.js',
'rm ./style.css',
'cp ./dist/index.js ./javascript/index.js',
'cp ./dist/index.css ./style.css',
]
];
const win = [
'del javascript\\index.js',
'del style.css',
'copy dist\\index.js javascript\\index.js',
'copy dist\\index.css style.css',
]
];
export default defineConfig({
routes: [{ path: '/', component: 'index' }],
@ -48,7 +48,7 @@ export default defineConfig({
targets: lightningcss.browserslistToTargets(browserslist('>= 0.25%')),
},
},
])
]);
memo.plugin('shell').use(WebpackShellPlugin, [
{
onBuildExit: {
@ -57,6 +57,6 @@ export default defineConfig({
parallel: false,
},
},
])
]);
},
})
});

View File

@ -1,7 +1,7 @@
<a name="readme-top"></a>
<div align="center">
<img width="160" src="https://gw.alipayobjects.com/mdn/rms_7d1485/afts/img/A*XDYxSJXBjjwAAAAAAAAAAAAAARQnAQ">
<h1 align="center">Kitchen Theme</h1>
@ -15,8 +15,7 @@ Kitchen Theme for Stable Diffusion WebUI
[![release][release-shield]][release-url]
[![releaseDate][release-date-shield]][release-date-url]
[![ciTest][ci-test-shield]][ci-test-url]
[![ciRelease][ci-release-shield]][ci-release-url]
<br/>
[![ciRelease][ci-release-shield]][ci-release-url] <br/>
[![contributors][contributors-shield]][contributors-url]
[![forks][forks-shield]][forks-url]
[![stargazers][stargazers-shield]][stargazers-url]
@ -26,7 +25,23 @@ Kitchen Theme for Stable Diffusion WebUI
![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/screenshot.webp?raw=true)
> ⚠️⚠️⚠️ 警告:最低要求 gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
<details>
<summary><kbd>文档目录</kbd></summary>
#### TOC
- [✨ 特性](#-特性)
- [🖥 兼容环境](#-兼容环境)
- [📦 安装](#-安装)
- [⚒️ 推荐设置](#-推荐设置)
- [🪄 提示词格式化](#-提示词格式化)
- [⌨️ 本地开发](#-本地开发)
- [🤝 参与贡献](#-参与贡献)
- [🔗 链接](#-链接)
####
</details>
<br/>
@ -78,6 +93,8 @@ http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark
```
> ⚠️ 警告:最低要求 gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
<div align="right">
[![][back-to-top]](#readme-top)

View File

@ -15,8 +15,7 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [
[![release][release-shield]][release-url]
[![releaseDate][release-date-shield]][release-date-url]
[![ciTest][ci-test-shield]][ci-test-url]
[![ciRelease][ci-release-shield]][ci-release-url]
<br/>
[![ciRelease][ci-release-shield]][ci-release-url] <br/>
[![contributors][contributors-shield]][contributors-url]
[![forks][forks-shield]][forks-url]
[![stargazers][stargazers-shield]][stargazers-url]
@ -26,7 +25,23 @@ English · [简体中文](./README-zh_CN.md) · [Changelog](./CHANGELOG.md) · [
![](https://github.com/canisminor1990/sd-web-ui-kitchen-theme/blob/main/assets/screenshot.webp?raw=true)
> ⚠️⚠️⚠️ Warning: minimum requirements gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
<details>
<summary><kbd>Table of contents</kbd></summary>
#### TOC
- [✨ Features](#-features)
- [🖥 Environment Support](#-environment-support)
- [📦 Installation](#-installation)
- [⚒️ Recommended Settings](#-recommended-settings)
- [🪄 Prompt formatting](#-prompt-formatting)
- [⌨️ Local Development](#-local-development)
- [🤝 Contributing](#-contributing)
- [🔗 Credits](#-credits)
####
</details>
<br/>
@ -79,6 +94,8 @@ http://localhost:7860/?__theme=light
http://localhost:7860/?__theme=dark
```
> ⚠️ Warning: minimum requirements gradio-3.23.0 & sd-webui [4c1ad74](https://github.com/AUTOMATIC1111/stable-diffusion-webui/commit/4c1ad743e3baf1246db0711aa0107debf036a12b)
<div align="right">
[![][back-to-top]](#readme-top)

View File

@ -1,3 +1,3 @@
module.exports = {
extends: ['gitmoji'],
}
};

File diff suppressed because one or more lines are too long

View File

@ -13,38 +13,38 @@
"build": "umi build",
"dev": "umi build",
"lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" --fix",
"lint:md": "remark . -f -q",
"lint:md": "remark . --quiet --frail --output",
"lint:style": "stylelint \"src/**/*.{css,less,js,jsx,ts,tsx}\" --fix",
"prepare": "husky install",
"prettier": "prettier -c --write \"**/**\"",
"release": "semantic-release",
"sd-debug": "cd ../../ && ./webui.sh",
"setup": "umi setup",
"start": "umi build",
"stylelint": "stylelint \"src/**/*.{css,less,js,jsx,ts,tsx}\" --fix",
"test": "npm run lint",
"type-check": "tsc -p tsconfig-check.json"
},
"lint-staged": {
"*.md": [
"remark -f -q",
"remark --quiet --frail --output --",
"prettier --write --no-error-on-unmatched-pattern"
],
"*.json": [
"prettier --write --no-error-on-unmatched-pattern"
],
"*.{css,less}": [
"stylelint --fix",
"stylelint --fix --allow-empty-input",
"prettier --write"
],
"*.{js,jsx}": [
"stylelint --fix",
"eslint --fix",
"prettier --write"
"prettier --write",
"stylelint --fix --allow-empty-input",
"eslint --fix"
],
"*.{ts,tsx}": [
"prettier --parser=typescript --write",
"stylelint --fix",
"eslint --fix",
"prettier --parser=typescript --write"
"eslint --fix"
]
},
"devDependencies": {
@ -79,10 +79,10 @@
"lint-staged": "^13",
"lodash-es": "^4",
"lucide-react": "^0",
"object-to-css-variables": "^0.2",
"object-to-css-variables": "^0",
"polished": "^4",
"postcss-less": "^6",
"postcss-styled-syntax": "^0.4",
"postcss-styled-syntax": "^0",
"prettier": "^2",
"prettier-plugin-organize-imports": "^3",
"prettier-plugin-packagejson": "^2",
@ -100,6 +100,7 @@
"remark-lint": "^9",
"remark-lint-list-item-indent": "^3",
"remark-preset-lint-recommended": "^6",
"remark-toc": "^8",
"semantic-release": "^21",
"semantic-release-config-gitmoji": "^1",
"styled-components": "^5",

View File

@ -1,8 +1,8 @@
import { createStyles, css, cx } from 'antd-style'
import { createStyles, css, cx } from 'antd-style';
const offset = 17
const toggleLength = 40
const toggleShort = 16
const offset = 17;
const toggleLength = 40;
const toggleShort = 16;
export const useStyle = createStyles(({ token }, prefix: string) => {
const commonHandle = css`
@ -20,7 +20,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
background: ${token.colorPrimary};
}
}
`
`;
const commonToggle = css`
position: absolute;
@ -61,12 +61,12 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
background: ${token.colorFill};
}
}
`
`;
const float = css`
position: absolute;
z-index: 2000;
`
`;
return {
container: cx(
@ -80,7 +80,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
opacity: 1;
}
}
`
`,
),
fixed: css`
position: relative;
@ -92,7 +92,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
bottom: 0;
left: 0;
height: 100%;
`
`,
),
rightFloat: cx(
float,
@ -101,7 +101,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
right: 0;
bottom: 0;
height: 100%;
`
`,
),
topFloat: cx(
float,
@ -110,7 +110,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
right: 0;
left: 0;
width: 100%;
`
`,
),
bottomFloat: cx(
float,
@ -119,7 +119,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
bottom: 0;
left: 0;
width: 100%;
`
`,
),
toggleLeft: cx(
`${prefix}-toggle`,
@ -138,7 +138,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
border-radius: 4px 0 0 4px;
}
`
`,
),
toggleRight: cx(
`${prefix}-toggle`,
@ -157,7 +157,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
border-radius: 0 4px 4px 0;
}
`
`,
),
toggleTop: cx(
`${prefix}-toggle`,
@ -177,7 +177,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
border-radius: 4px 4px 0 0;
}
`
`,
),
toggleBottom: cx(
`${prefix}-toggle`,
@ -197,7 +197,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
border-radius: 0 0 4px 4px;
}
`
`,
),
panel: cx(
`${prefix}-fixed`,
@ -205,7 +205,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
overflow: hidden;
background: ${token.colorBgContainer};
transition: all 0.2s ${token.motionEaseOut};
`
`,
),
handlerIcon: css`
display: flex;
@ -223,7 +223,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
height: 100%;
}
`,
`${prefix}-left-handle`
`${prefix}-left-handle`,
),
rightHandle: cx(
css`
@ -234,7 +234,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
height: 100%;
}
`,
`${prefix}-right-handle`
`${prefix}-right-handle`,
),
topHandle: cx(
`${prefix}-top-handle`,
@ -246,7 +246,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
width: 100%;
height: 2px;
}
`
`,
),
bottomHandle: cx(
`${prefix}-bottom-handle`,
@ -258,7 +258,7 @@ export const useStyle = createStyles(({ token }, prefix: string) => {
width: 100%;
height: 2px;
}
`
`,
),
}
})
};
});

View File

@ -1,14 +1,14 @@
import { placementType } from './index'
import { placementType } from './index';
export const revesePlacement = (placement: placementType) => {
switch (placement) {
case 'bottom':
return 'top'
return 'top';
case 'top':
return 'bottom'
return 'bottom';
case 'right':
return 'left'
return 'left';
case 'left':
return 'right'
return 'right';
}
}
};

View File

@ -1,5 +1,5 @@
import React, { useCallback, useMemo } from 'react';
import { WithContext, ReactTagsProps as WithContextProps } from 'react-tag-input';
import { ReactTagsProps as WithContextProps,WithContext } from 'react-tag-input';
import styled from 'styled-components';
import { genTagType, suggestions } from './utils';

View File

@ -1,5 +1,5 @@
export { default as Content } from './Content'
export { default as DraggablePanel } from './DraggablePanel'
export { default as ExtraNetworkSidebar } from './ExtraNetworkSidebar'
export { default as Header } from './Header'
export { default as Sidebar } from './Sidebar'
export { default as Content } from './Content';
export { default as DraggablePanel } from './DraggablePanel';
export { default as ExtraNetworkSidebar } from './ExtraNetworkSidebar';
export { default as Header } from './Header';
export { default as Sidebar } from './Sidebar';

View File

@ -1,29 +1,29 @@
import { useEffect, useState } from 'react'
import { useEffect, useState } from 'react';
function checkIsDarkMode() {
try {
return window.matchMedia('(prefers-color-scheme: dark)').matches
return window.matchMedia('(prefers-color-scheme: dark)').matches;
} catch (err) {
return false
return false;
}
}
export function useIsDarkMode() {
const [isDarkMode, setIsDarkMode] = useState(checkIsDarkMode())
const [isDarkMode, setIsDarkMode] = useState(checkIsDarkMode());
useEffect(() => {
const mqList = window.matchMedia('(prefers-color-scheme: dark)')
const mqList = window.matchMedia('(prefers-color-scheme: dark)');
const listener = (event: any) => {
setIsDarkMode(event.matches)
}
setIsDarkMode(event.matches);
};
mqList.addEventListener('change', listener)
mqList.addEventListener('change', listener);
return () => {
mqList.removeEventListener('change', listener)
}
}, [])
mqList.removeEventListener('change', listener);
};
}, []);
return isDarkMode
return isDarkMode;
}

View File

@ -1,198 +1,211 @@
const TAB_PREFIX_LIST = ['txt2img', 'img2img']
const TAB_PREFIX_LIST = ['txt2img', 'img2img'];
const MODEL_TYPE_LIST: ['textual_inversion', 'hypernetworks', 'checkpoints', 'lora', 'lycoris'] = [
'textual_inversion',
'hypernetworks',
'checkpoints',
'lora',
'lycoris',
]
];
const MODEL_TYPE = {
textual_inversion: 'ti',
hypernetworks: 'hyper',
checkpoints: 'ckp',
lora: 'lora',
lycoris: 'lycoris',
}
const CARDID_SUFFIX = 'cards'
};
const CARDID_SUFFIX = 'cards';
// CSS
const BTN_MARGIN = '0'
const BTN_FONT_SIZE = '15px'
const BTN_THUMB_FONT_SIZE = '100%'
const BTN_THUMB_DISPLAY = 'inline'
const BTN_THUMB_POS = 'static'
const BTN_THUMB_BACKGROUND_IMAGE = 'none'
const BTN_THUMB_BACKGROUND = 'rgba(0, 0, 0, 0.8)'
const CH_BTN_TXTS = ['🌐', '💡', '🏷️']
const BTN_MARGIN = '0';
const BTN_FONT_SIZE = '15px';
const BTN_THUMB_FONT_SIZE = '100%';
const BTN_THUMB_DISPLAY = 'inline';
const BTN_THUMB_POS = 'static';
const BTN_THUMB_BACKGROUND_IMAGE = 'none';
const BTN_THUMB_BACKGROUND = 'rgba(0, 0, 0, 0.8)';
const CH_BTN_TXTS = ['🌐', '💡', '🏷️'];
const styleBtn = (node: HTMLElement, isThumbMode: boolean) => {
if (!isThumbMode) {
node.style.fontSize = BTN_FONT_SIZE
node.style.margin = BTN_MARGIN
node.style.fontSize = BTN_FONT_SIZE;
node.style.margin = BTN_MARGIN;
} else {
node.style.display = BTN_THUMB_DISPLAY
node.style.fontSize = BTN_THUMB_FONT_SIZE
node.style.position = BTN_THUMB_POS
node.style.backgroundImage = BTN_THUMB_BACKGROUND_IMAGE
node.style.display = BTN_THUMB_DISPLAY;
node.style.fontSize = BTN_THUMB_FONT_SIZE;
node.style.position = BTN_THUMB_POS;
node.style.backgroundImage = BTN_THUMB_BACKGROUND_IMAGE;
}
}
};
const updateCardForCivitai = () => {
if (!gradioApp().querySelector('#tab_civitai_helper')) return
if (!gradioApp().querySelector('#tab_civitai_helper')) return;
const replacePreviewText = getTranslation('replace preview') || 'replace preview'
const replacePreviewText = getTranslation('replace preview') || 'replace preview';
// Get component
const chAlwaysDisplayCkb = gradioApp().querySelector('#ch_always_display_ckb input') as HTMLInputElement
const chShowBtnOnThumbCkb = gradioApp().querySelector('#ch_show_btn_on_thumb_ckb input') as HTMLInputElement
const chAlwaysDisplay = chAlwaysDisplayCkb?.checked || false
const chShowBtnOnThumb = chShowBtnOnThumbCkb?.checked || false
const chAlwaysDisplayCkb = gradioApp().querySelector(
'#ch_always_display_ckb input',
) as HTMLInputElement;
const chShowBtnOnThumbCkb = gradioApp().querySelector(
'#ch_show_btn_on_thumb_ckb input',
) as HTMLInputElement;
const chAlwaysDisplay = chAlwaysDisplayCkb?.checked || false;
const chShowBtnOnThumb = chShowBtnOnThumbCkb?.checked || false;
// Change all "replace preview" into an icon
let extraNetworkId = ''
let extraNetworkNode: any = null
let metadataButton: any = null
let additionalNode: any = null
let replacePreviewBtn: any = null
let ulNode: any = null
let searchTermNode: any = null
let searchTerm = ''
let modelType = ''
let cards = null
let needToAddButtons = false
let isThumbMode = false
let extraNetworkId = '';
let extraNetworkNode: any = null;
let metadataButton: any = null;
let additionalNode: any = null;
let replacePreviewBtn: any = null;
let ulNode: any = null;
let searchTermNode: any = null;
let searchTerm = '';
let modelType = '';
let cards = null;
let needToAddButtons = false;
let isThumbMode = false;
// Get current tab
TAB_PREFIX_LIST.forEach((activeTabType) => {
MODEL_TYPE_LIST.forEach((jsModelType) => {
modelType = MODEL_TYPE[jsModelType]
modelType = MODEL_TYPE[jsModelType];
// Get model_type for python side
extraNetworkId = `${activeTabType}_${jsModelType}_${CARDID_SUFFIX}`
extraNetworkNode = gradioApp().getElementById(extraNetworkId)
extraNetworkId = `${activeTabType}_${jsModelType}_${CARDID_SUFFIX}`;
extraNetworkNode = gradioApp().getElementById(extraNetworkId);
// Check if extra network node exists
if (extraNetworkNode === null) return
if (extraNetworkNode === null) return;
// Check if extr network is under thumbnail mode
isThumbMode = false
if (extraNetworkNode?.className === 'extra-network-thumbs') isThumbMode = true
isThumbMode = false;
if (extraNetworkNode?.className === 'extra-network-thumbs') isThumbMode = true;
// Get all card nodes
cards = extraNetworkNode.querySelectorAll('.card')
cards = extraNetworkNode.querySelectorAll('.card');
for (const card of cards) {
if (card.querySelectorAll('.actions .additional a').length > 2) return
if (card.querySelectorAll('.actions .additional a').length > 2) return;
// Metadata_buttoncard
metadataButton = card.querySelector('.metadata-button')
metadataButton = card.querySelector('.metadata-button');
// Additional node
additionalNode = card.querySelector('.actions .additional')
additionalNode = card.querySelector('.actions .additional');
// Get ul node, which is the parent of all buttons
ulNode = card.querySelector('.actions .additional ul')
ulNode = card.querySelector('.actions .additional ul');
// Replace preview text button
replacePreviewBtn = card.querySelector('.actions .additional a')
replacePreviewBtn = card.querySelector('.actions .additional a');
// Check thumb mode
if (isThumbMode && additionalNode) {
additionalNode.style.display = null
additionalNode.style.display = null;
if (chShowBtnOnThumb) {
ulNode.style.background = BTN_THUMB_BACKGROUND
ulNode.style.background = BTN_THUMB_BACKGROUND;
} else {
// Reset
ulNode.style.background = null
ulNode.style.background = null;
// Remove existed buttons
if (ulNode) {
// Find all .a child nodes
const atags = ulNode.querySelectorAll('a')
const atags = ulNode.querySelectorAll('a');
for (const atag of atags) {
// Reset display
atag.style.display = null
atag.style.display = null;
// Remove extension's button
if (CH_BTN_TXTS.indexOf(atag.innerHTML) >= 0) {
// Need to remove
ulNode.removeChild(atag)
ulNode.removeChild(atag);
} else {
// Do not remove, just reset
atag.innerHTML = replacePreviewText
atag.style.display = null
atag.style.fontSize = null
atag.style.position = null
atag.style.backgroundImage = null
atag.innerHTML = replacePreviewText;
atag.style.display = null;
atag.style.fontSize = null;
atag.style.position = null;
atag.style.backgroundImage = null;
}
}
// Also remove br tag in ul
const brtag = ulNode.querySelector('br')
if (brtag) ulNode.removeChild(brtag)
const brtag = ulNode.querySelector('br');
if (brtag) ulNode.removeChild(brtag);
}
// Just reset and remove nodes, do nothing else
return
return;
}
} else {
// Full preview mode
additionalNode.style.display = chAlwaysDisplay ? 'block' : null
additionalNode.style.display = chAlwaysDisplay ? 'block' : null;
// Remove br tag
const brtag = ulNode.querySelector('br')
if (brtag) ulNode.removeChild(brtag)
const brtag = ulNode.querySelector('br');
if (brtag) ulNode.removeChild(brtag);
}
// Change replace preview text button into icon
if (replacePreviewBtn?.innerHTML !== '🖼️') {
needToAddButtons = true
replacePreviewBtn.innerHTML = '🖼️'
styleBtn(replacePreviewBtn, isThumbMode)
needToAddButtons = true;
replacePreviewBtn.innerHTML = '🖼️';
styleBtn(replacePreviewBtn, isThumbMode);
}
if (!needToAddButtons) return
if (!needToAddButtons) return;
// Search_term node
// Search_term = subfolder path + model name + ext
searchTermNode = card.querySelector('.actions .additional .search_term')
if (!searchTermNode) return
searchTermNode = card.querySelector('.actions .additional .search_term');
if (!searchTermNode) return;
// Get search_term
searchTerm = searchTermNode.innerHTML
if (!searchTerm) return
searchTerm = searchTermNode.innerHTML;
if (!searchTerm) return;
// Then we need to add 3 buttons to each ul node:
const openUrlNode = document.createElement('a')
openUrlNode.href = '#'
openUrlNode.innerHTML = '🌐'
styleBtn(openUrlNode, isThumbMode)
openUrlNode.title = "Open this model's civitai url"
openUrlNode.setAttribute('onclick', `open_model_url(event, '${modelType}', '${searchTerm}')`)
const openUrlNode = document.createElement('a');
openUrlNode.href = '#';
openUrlNode.innerHTML = '🌐';
styleBtn(openUrlNode, isThumbMode);
openUrlNode.title = "Open this model's civitai url";
openUrlNode.setAttribute(
'onclick',
`open_model_url(event, '${modelType}', '${searchTerm}')`,
);
const addTriggerWordsNode = document.createElement('a')
addTriggerWordsNode.href = '#'
addTriggerWordsNode.innerHTML = '💡'
styleBtn(addTriggerWordsNode, isThumbMode)
addTriggerWordsNode.title = 'Add trigger words to prompt'
addTriggerWordsNode.setAttribute('onclick', `add_trigger_words(event, '${modelType}', '${searchTerm}')`)
const addTriggerWordsNode = document.createElement('a');
addTriggerWordsNode.href = '#';
addTriggerWordsNode.innerHTML = '💡';
styleBtn(addTriggerWordsNode, isThumbMode);
addTriggerWordsNode.title = 'Add trigger words to prompt';
addTriggerWordsNode.setAttribute(
'onclick',
`add_trigger_words(event, '${modelType}', '${searchTerm}')`,
);
const usePreviewPromptNode = document.createElement('a')
usePreviewPromptNode.href = '#'
usePreviewPromptNode.innerHTML = '🏷️'
styleBtn(usePreviewPromptNode, isThumbMode)
usePreviewPromptNode.title = 'Use prompt from preview image'
usePreviewPromptNode.setAttribute('onclick', `use_preview_prompt(event, '${modelType}', '${searchTerm}')`)
const usePreviewPromptNode = document.createElement('a');
usePreviewPromptNode.href = '#';
usePreviewPromptNode.innerHTML = '🏷️';
styleBtn(usePreviewPromptNode, isThumbMode);
usePreviewPromptNode.title = 'Use prompt from preview image';
usePreviewPromptNode.setAttribute(
'onclick',
`use_preview_prompt(event, '${modelType}', '${searchTerm}')`,
);
// Add to card
ulNode.appendChild(openUrlNode)
ulNode.appendChild(openUrlNode);
// Add br if metadata_button exists
if (isThumbMode && metadataButton) ulNode.appendChild(document.createElement('br'))
ulNode.appendChild(addTriggerWordsNode)
ulNode.appendChild(usePreviewPromptNode)
if (isThumbMode && metadataButton) ulNode.appendChild(document.createElement('br'));
ulNode.appendChild(addTriggerWordsNode);
ulNode.appendChild(usePreviewPromptNode);
}
})
})
}
});
});
};
export default () => {
const fixInterval = setInterval(() => {
const checkDom = document.querySelector('#txt2img_lora_cards')
const checkDom = document.querySelector('#txt2img_lora_cards');
if (checkDom) {
updateCardForCivitai()
clearInterval(fixInterval)
updateCardForCivitai();
clearInterval(fixInterval);
}
}, 1000)
}
}, 1000);
};

View File

@ -1,67 +1,67 @@
const MIN_WIDTH = 240
const MIN_WIDTH = 240;
const addDraggable = (tabId: string) => {
const settings = document.getElementById(`${tabId}_settings`)
const checkDraggableLine = document.querySelector(`#tab_${tabId} .draggable-line`)
if (!settings || checkDraggableLine) return
const settings = document.getElementById(`${tabId}_settings`);
const checkDraggableLine = document.querySelector(`#tab_${tabId} .draggable-line`);
if (!settings || checkDraggableLine) return;
settings.style.minWidth = `min(${MIN_WIDTH}px, 100%)`
settings.style.minWidth = `min(${MIN_WIDTH}px, 100%)`;
const lineWrapper = document.createElement('div')
lineWrapper.classList.add('draggable-line')
const lineWrapper = document.createElement('div');
lineWrapper.classList.add('draggable-line');
settings.insertAdjacentElement('afterend', lineWrapper)
settings.insertAdjacentElement('afterend', lineWrapper);
const container: HTMLElement | any = settings.parentElement
container.classList.add('draggable-container')
const container: HTMLElement | any = settings.parentElement;
container.classList.add('draggable-container');
const results = document.getElementById(`${tabId}_results`)
if (!results) return
const results = document.getElementById(`${tabId}_results`);
if (!results) return;
results.style.minWidth = `${MIN_WIDTH}px`
results.style.minWidth = `${MIN_WIDTH}px`;
let linePosition = 50
settings.style.flexBasis = `${linePosition}%`
results.style.flexBasis = `${100 - linePosition}%`
let linePosition = 50;
settings.style.flexBasis = `${linePosition}%`;
results.style.flexBasis = `${100 - linePosition}%`;
let isDragging = false
let isDragging = false;
lineWrapper.addEventListener('mousedown', (e) => {
isDragging = true
e.preventDefault()
})
isDragging = true;
e.preventDefault();
});
document.addEventListener('mousemove', (event) => {
if (!isDragging) return
if (!isDragging) return;
const tab: HTMLElement | any = document.querySelector(`#tab_${tabId}`)
if (!tab) return
const tab: HTMLElement | any = document.querySelector(`#tab_${tabId}`);
if (!tab) return;
let offsetX = tab.offsetLeft
let parent = tab.offsetParent
let offsetX = tab.offsetLeft;
let parent = tab.offsetParent;
while (parent) {
offsetX += parent.offsetLeft
parent = parent.offsetParent
offsetX += parent.offsetLeft;
parent = parent.offsetParent;
}
const containerWidth = container.offsetWidth
const mouseX = event.clientX
const linePosition = ((mouseX - offsetX) / containerWidth) * 100
const containerWidth = container.offsetWidth;
const mouseX = event.clientX;
const linePosition = ((mouseX - offsetX) / containerWidth) * 100;
if (linePosition <= (MIN_WIDTH / containerWidth) * 100) return
if (linePosition >= (1 - MIN_WIDTH / containerWidth) * 100) return
if (linePosition <= (MIN_WIDTH / containerWidth) * 100) return;
if (linePosition >= (1 - MIN_WIDTH / containerWidth) * 100) return;
settings.style.flexBasis = `${linePosition}%`
results.style.flexBasis = `${100 - linePosition}%`
})
settings.style.flexBasis = `${linePosition}%`;
results.style.flexBasis = `${100 - linePosition}%`;
});
document.addEventListener('mouseup', () => {
isDragging = false
})
}
isDragging = false;
});
};
export default () => {
addDraggable('txt2img')
addDraggable('img2img')
}
addDraggable('txt2img');
addDraggable('img2img');
};

View File

@ -1,73 +1,73 @@
const replaceIcon = (button: HTMLButtonElement, emoji: string[], svg: string) => {
if (!button?.textContent) return
if (!button?.textContent) return;
emoji.forEach((e) => {
if (button?.textContent?.includes(e)) {
button.innerHTML = `<span role="img" class="anticon anticon-replace" aria-label={button.textContent}><svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">${svg}</svg></span>`
button.innerHTML = `<span role="img" class="anticon anticon-replace" aria-label={button.textContent}><svg viewBox="64 64 896 896" focusable="false" width="1em" height="1em" fill="currentColor" aria-hidden="true">${svg}</svg></span>`;
}
})
}
});
};
export default () => {
document.querySelectorAll('button').forEach((button) => {
replaceIcon(
button,
['📂'],
'<path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"></path>'
)
'<path d="M880 298.4H521L403.7 186.2a8.15 8.15 0 00-5.5-2.2H144c-17.7 0-32 14.3-32 32v592c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V330.4c0-17.7-14.3-32-32-32zM840 768H184V256h188.5l119.6 114.4H840V768z"></path>',
);
replaceIcon(
button,
['🔄', '🔁'],
'<path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>'
)
'<path d="M909.1 209.3l-56.4 44.1C775.8 155.1 656.2 92 521.9 92 290 92 102.3 279.5 102 511.5 101.7 743.7 289.8 932 521.9 932c181.3 0 335.8-115 394.6-276.1 1.5-4.2-.7-8.9-4.9-10.3l-56.7-19.5a8 8 0 00-10.1 4.8c-1.8 5-3.8 10-5.9 14.9-17.3 41-42.1 77.8-73.7 109.4A344.77 344.77 0 01655.9 829c-42.3 17.9-87.4 27-133.8 27-46.5 0-91.5-9.1-133.8-27A341.5 341.5 0 01279 755.2a342.16 342.16 0 01-73.7-109.4c-17.9-42.4-27-87.4-27-133.9s9.1-91.5 27-133.9c17.3-41 42.1-77.8 73.7-109.4 31.6-31.6 68.4-56.4 109.3-73.8 42.3-17.9 87.4-27 133.8-27 46.5 0 91.5 9.1 133.8 27a341.5 341.5 0 01109.3 73.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.6 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c-.1-6.6-7.8-10.3-13-6.2z"></path>',
);
replaceIcon(
button,
['↙️'],
'<path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>'
)
'<path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>',
);
replaceIcon(
button,
['🗑️'],
'<path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path>'
)
'<path d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"></path>',
);
replaceIcon(
button,
['📋'],
'<path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path>'
)
'<path d="M832 112H724V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H500V72c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v40H320c-17.7 0-32 14.3-32 32v120h-96c-17.7 0-32 14.3-32 32v632c0 17.7 14.3 32 32 32h512c17.7 0 32-14.3 32-32v-96h96c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zM664 888H232V336h218v174c0 22.1 17.9 40 40 40h174v338zm0-402H514V336h.2L664 485.8v.2zm128 274h-56V456L544 264H360v-80h68v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h152v32c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-32h68v576z"></path>',
);
replaceIcon(
button,
['💾'],
'<path d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"></path>'
)
'<path d="M893.3 293.3L730.7 130.7c-7.5-7.5-16.7-13-26.7-16V112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V338.5c0-17-6.7-33.2-18.7-45.2zM384 184h256v104H384V184zm456 656H184V184h136v136c0 17.7 14.3 32 32 32h320c17.7 0 32-14.3 32-32V205.8l136 136V840zM512 442c-79.5 0-144 64.5-144 144s64.5 144 144 144 144-64.5 144-144-64.5-144-144-144zm0 224c-44.2 0-80-35.8-80-80s35.8-80 80-80 80 35.8 80 80-35.8 80-80 80z"></path>',
);
replaceIcon(
button,
['🎲️'],
'<path d="M136 552h63.6c4.4 0 8-3.6 8-8V288.7h528.6v72.6c0 1.9.6 3.7 1.8 5.2a8.3 8.3 0 0011.7 1.4L893 255.4c4.3-5 3.6-10.3 0-13.2L749.7 129.8a8.22 8.22 0 00-5.2-1.8c-4.6 0-8.4 3.8-8.4 8.4V209H199.7c-39.5 0-71.7 32.2-71.7 71.8V544c0 4.4 3.6 8 8 8zm752-80h-63.6c-4.4 0-8 3.6-8 8v255.3H287.8v-72.6c0-1.9-.6-3.7-1.8-5.2a8.3 8.3 0 00-11.7-1.4L131 768.6c-4.3 5-3.6 10.3 0 13.2l143.3 112.4c1.5 1.2 3.3 1.8 5.2 1.8 4.6 0 8.4-3.8 8.4-8.4V815h536.6c39.5 0 71.7-32.2 71.7-71.8V480c-.2-4.4-3.8-8-8.2-8z"></path>'
)
'<path d="M136 552h63.6c4.4 0 8-3.6 8-8V288.7h528.6v72.6c0 1.9.6 3.7 1.8 5.2a8.3 8.3 0 0011.7 1.4L893 255.4c4.3-5 3.6-10.3 0-13.2L749.7 129.8a8.22 8.22 0 00-5.2-1.8c-4.6 0-8.4 3.8-8.4 8.4V209H199.7c-39.5 0-71.7 32.2-71.7 71.8V544c0 4.4 3.6 8 8 8zm752-80h-63.6c-4.4 0-8 3.6-8 8v255.3H287.8v-72.6c0-1.9-.6-3.7-1.8-5.2a8.3 8.3 0 00-11.7-1.4L131 768.6c-4.3 5-3.6 10.3 0 13.2l143.3 112.4c1.5 1.2 3.3 1.8 5.2 1.8 4.6 0 8.4-3.8 8.4-8.4V815h536.6c39.5 0 71.7-32.2 71.7-71.8V480c-.2-4.4-3.8-8-8.2-8z"></path>',
);
replaceIcon(
button,
['♻️'],
'<path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path>'
)
'<path d="M793 242H366v-74c0-6.7-7.7-10.4-12.9-6.3l-142 112a8 8 0 000 12.6l142 112c5.2 4.1 12.9.4 12.9-6.3v-74h415v470H175c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-28.7 64-64V306c0-35.3-28.7-64-64-64z"></path>',
);
replaceIcon(
button,
['🪄'],
'<defs><style></style></defs><path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"></path>'
)
'<defs><style></style></defs><path d="M899.1 869.6l-53-305.6H864c14.4 0 26-11.6 26-26V346c0-14.4-11.6-26-26-26H618V138c0-14.4-11.6-26-26-26H432c-14.4 0-26 11.6-26 26v182H160c-14.4 0-26 11.6-26 26v192c0 14.4 11.6 26 26 26h17.9l-53 305.6a25.95 25.95 0 0025.6 30.4h723c1.5 0 3-.1 4.4-.4a25.88 25.88 0 0021.2-30zM204 390h272V182h72v208h272v104H204V390zm468 440V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H416V674c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v156H202.8l45.1-260H776l45.1 260H672z"></path>',
);
replaceIcon(
button,
['⚙️'],
'<path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>'
)
'<path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path>',
);
replaceIcon(
button,
['➡️'],
'<path d="M666.7 505.5l-246-178A8 8 0 00408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>'
)
'<path d="M666.7 505.5l-246-178A8 8 0 00408 334v46.9c0 10.2 4.9 19.9 13.2 25.9L566.6 512 421.2 617.2c-8.3 6-13.2 15.6-13.2 25.9V690c0 6.5 7.4 10.3 12.7 6.5l246-178c4.4-3.2 4.4-9.8 0-13z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path>',
);
replaceIcon(
button,
['⇅'],
'<path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>'
)
})
}
'<path d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>',
);
});
};

View File

@ -1,8 +1,9 @@
export default () => {
// favicon
const favicon: HTMLLinkElement = document.createElement('link')
favicon.rel = 'icon'
favicon.type = 'image/svg+xml'
favicon.href = 'https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg'
document.getElementsByTagName('head')[0].appendChild(favicon)
}
const favicon: HTMLLinkElement = document.createElement('link');
favicon.rel = 'icon';
favicon.type = 'image/svg+xml';
favicon.href =
'https://gw.alipayobjects.com/zos/bmw-prod/51a51720-8a30-4430-b6c9-be5712364f04.svg';
document.getElementsByTagName('head')[0].appendChild(favicon);
};

View File

@ -78,7 +78,13 @@
}
[id$='_script_container'] {
.block.svelte-mppz8v:not(.livePreview, .gradio-gallery, .gradio-image, .gradio-video, .gradio-file) {
.block.svelte-mppz8v:not(
.livePreview,
.gradio-gallery,
.gradio-image,
.gradio-video,
.gradio-file
) {
border: unset !important;
}
}

View File

@ -7,8 +7,10 @@
);
/* Shadow */
--box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
--box-shadow-secondary: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%), 0 9px 28px 8px rgb(0 0 0 / 5%);
--box-shadow: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
0 9px 28px 8px rgb(0 0 0 / 5%);
--box-shadow-secondary: 0 6px 16px 0 rgb(0 0 0 / 8%), 0 3px 6px -4px rgb(0 0 0 / 12%),
0 9px 28px 8px rgb(0 0 0 / 5%);
/* Img */
--gallery-background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAFpJREFUWAntljEKADAIA23p6v//qQ+wfUEcCu1yriEgp0FHRJSJcnehmmWm1Dv/lO4HIg1AAAKjTqm03ea88zMCCEDgO4HV5bS757f+7wRoAAIQ4B9gByAAgQ3pfiDmXmAeEwAAAABJRU5ErkJggg==')

View File

@ -19,10 +19,11 @@
--color-info: #1677ff;
--color-text-base: #000;
--color-bg-base: #fff;
--font-family: 'HarmonyOS Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto, 'Helvetica Neue', arial,
'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-code: 'Hack Nerd Font Mono', hack, 'SFMono-Regular', consolas, 'Liberation Mono', menlo, courier,
monospace;
--font-family: 'HarmonyOS Sans', -apple-system, blinkmacsystemfont, 'Segoe UI', roboto,
'Helvetica Neue', arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-code: 'Hack Nerd Font Mono', hack, 'SFMono-Regular', consolas, 'Liberation Mono',
menlo, courier, monospace;
--font-size: 14px;
--line-width: 1px;
--line-type: solid;

24
src/types/gradio.d.ts vendored
View File

@ -1,14 +1,14 @@
// scripts.js
declare const gradioApp: () => DocumentFragment
declare const get_uiCurrentTab: () => HTMLElement
declare const get_uiCurrentTabContent: () => HTMLElement
declare const uiUpdateCallbacks: ((m: unknown) => void)[]
declare const uiLoadedCallbacks: ((m: unknown) => void)[]
declare const uiTabChangeCallbacks: ((m: unknown) => void)[]
declare const optionsChangedCallbacks: ((m: unknown) => void)[]
declare let uiCurrentTab: Element | null
declare const onUiUpdate: (callback: (m: unknown) => void) => void
declare const onUiLoaded: (callback: (m: unknown) => void) => void
declare const onUiTabChange: (callback: (m: unknown) => void) => void
declare const onOptionsChanged: (callback: (m: unknown) => void) => void
declare const gradioApp: () => DocumentFragment;
declare const get_uiCurrentTab: () => HTMLElement;
declare const get_uiCurrentTabContent: () => HTMLElement;
declare const uiUpdateCallbacks: ((m: unknown) => void)[];
declare const uiLoadedCallbacks: ((m: unknown) => void)[];
declare const uiTabChangeCallbacks: ((m: unknown) => void)[];
declare const optionsChangedCallbacks: ((m: unknown) => void)[];
declare let uiCurrentTab: Element | null;
declare const onUiUpdate: (callback: (m: unknown) => void) => void;
declare const onUiLoaded: (callback: (m: unknown) => void) => void;
declare const onUiTabChange: (callback: (m: unknown) => void) => void;
declare const onOptionsChanged: (callback: (m: unknown) => void) => void;

View File

@ -1,4 +1,4 @@
import { Theme as AntdStyleTheme } from 'antd-style'
import { Theme as AntdStyleTheme } from 'antd-style';
declare module 'styled-components' {
// eslint-disable-next-line @typescript-eslint/no-empty-interface

View File

@ -1,3 +1,6 @@
import React from 'react'
import React from 'react';
export type DivProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>
export type DivProps = React.DetailedHTMLProps<
React.HTMLAttributes<HTMLDivElement>,
HTMLDivElement
>;

66
src/types/webui.d.ts vendored
View File

@ -1,38 +1,38 @@
// ui.js
declare const set_theme: (theme: string) => void
declare const all_gallery_buttons: () => Element[]
declare const selected_gallery_button: () => Element | null
declare const selected_gallery_index: () => number
declare const extract_image_from_gallery: (gallery: Element[]) => Element[]
declare const args_to_array: (args: IArguments) => any[]
declare const switch_to_txt2img: () => any[]
declare const switch_to_img2img_tab: (no: number) => void
declare const switch_to_img2img: () => any[]
declare const switch_to_sketch: () => any[]
declare const switch_to_inpaint_sketch: () => any[]
declare const switch_to_inpaint: () => any[]
declare const switch_to_extras: () => any[]
declare const get_tab_index: (tabId: string) => number
declare const create_tab_index_args: (tabId: string, args: any[]) => any[]
declare const get_img2img_tab_index: () => any[]
declare const create_submit_args: (args: any[]) => any[]
declare const showSubmitButtons: (tabname: string, show: boolean) => void
declare const submit: () => any[]
declare const submit_img2img: () => any[]
declare const modelmerger: () => any[]
declare const set_theme: (theme: string) => void;
declare const all_gallery_buttons: () => Element[];
declare const selected_gallery_button: () => Element | null;
declare const selected_gallery_index: () => number;
declare const extract_image_from_gallery: (gallery: Element[]) => Element[];
declare const args_to_array: (args: IArguments) => any[];
declare const switch_to_txt2img: () => any[];
declare const switch_to_img2img_tab: (no: number) => void;
declare const switch_to_img2img: () => any[];
declare const switch_to_sketch: () => any[];
declare const switch_to_inpaint_sketch: () => any[];
declare const switch_to_inpaint: () => any[];
declare const switch_to_extras: () => any[];
declare const get_tab_index: (tabId: string) => number;
declare const create_tab_index_args: (tabId: string, args: any[]) => any[];
declare const get_img2img_tab_index: () => any[];
declare const create_submit_args: (args: any[]) => any[];
declare const showSubmitButtons: (tabname: string, show: boolean) => void;
declare const submit: () => any[];
declare const submit_img2img: () => any[];
declare const modelmerger: () => any[];
declare const ask_for_style_name: (
arg0: any,
prompt_text: string,
negative_prompt_text: string
) => [string, string, string]
declare const confirm_clear_prompt: (prompt: string, negative_prompt: string) => [string, string]
declare const recalculatePromptTokens: (name: string) => void
declare const recalculate_prompts_txt2img: () => any[]
declare const recalculate_prompts_img2img: () => any[]
declare const update_txt2img_tokens: (...args: any[]) => any
declare const update_img2img_tokens: (...args: any[]) => any
declare const restart_reload: () => any[]
declare const updateInput: (target: Element) => void
declare const selectCheckpoint: (name: string) => void
declare const getTranslation: (text: string) => string
negative_prompt_text: string,
) => [string, string, string];
declare const confirm_clear_prompt: (prompt: string, negative_prompt: string) => [string, string];
declare const recalculatePromptTokens: (name: string) => void;
declare const recalculate_prompts_txt2img: () => any[];
declare const recalculate_prompts_img2img: () => any[];
declare const update_txt2img_tokens: (...args: any[]) => any;
declare const update_img2img_tokens: (...args: any[]) => any;
declare const restart_reload: () => any[];
declare const updateInput: (target: Element) => void;
declare const selectCheckpoint: (name: string) => void;
declare const getTranslation: (text: string) => string;

File diff suppressed because one or more lines are too long

2
typings.d.ts vendored
View File

@ -1 +1 @@
import 'umi/typings'
import 'umi/typings';