From 0331de0b3b5e3f530cc161f07a9d9f0ea26ec8b6 Mon Sep 17 00:00:00 2001 From: Lex Lim Date: Wed, 19 Oct 2022 21:08:57 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=B6=88=E6=81=AF=E4=B8=8D?= =?UTF-8?q?=E5=BC=B9=E5=87=BA=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .lintstagedrc.json | 3 - .simple-git-hooks.json | 3 - src/pages/index.tsx | 184 ++++++++++++++++++++--------------------- 3 files changed, 90 insertions(+), 100 deletions(-) delete mode 100644 .lintstagedrc.json delete mode 100644 .simple-git-hooks.json diff --git a/.lintstagedrc.json b/.lintstagedrc.json deleted file mode 100644 index e80e8be..0000000 --- a/.lintstagedrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "*.{js,jsx,ts,tsx}": "eslint --fix" -} diff --git a/.simple-git-hooks.json b/.simple-git-hooks.json deleted file mode 100644 index 5923497..0000000 --- a/.simple-git-hooks.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "pre-commit": "npx lint-staged" -} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index f31909c..4c0703b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,7 +1,7 @@ import Head from 'next/head' import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import { cssTransition, toast, ToastContainer } from 'react-toastify' -import 'react-toastify/dist/ReactToastify.css'; +import 'react-toastify/dist/ReactToastify.css' import { useRecoilState, useRecoilValue } from 'recoil' import styled from 'styled-components' import { useRouter } from 'next/router' @@ -64,9 +64,7 @@ import Checkbox from '../components/controls/checkbox' import { getStorage } from '../data/storage/storage' import { getUserSetting } from '../data/user/settings' import { useReload } from '../hooks/useReload' -import { - BackendURLTagSearch, -} from '../globals/constants' +import { BackendURLTagSearch } from '../globals/constants' import Tooltip from '../components/tooltip' import { WorkerInterface } from '../tokenizer/interface' import { EncoderType } from '../tokenizer/encoder' @@ -98,7 +96,7 @@ export const ToastArea = styled.div` --toastify-color-progress-light: ${(props) => props.theme.colors.textHeadings}; --toastify-text-color-light: ${(props) => props.theme.colors.textMain}; --toastify-font-family: ${(props) => props.theme.fonts.default}; -`; +` const MOBILE_WIDTH = 900 @@ -144,7 +142,7 @@ const parsePrompt = (prompt: string[]): string => { } const maxSamplesForSize = (width: number, height: number, max?: number): number => { - let limit = 100; + const limit = 100 if (max) return Math.min(limit, max) return limit } @@ -487,24 +485,27 @@ function ImageGenContent(): JSX.Element { }, [savedPrompt]) // Queue remaining toast - const queueToastId = React.useRef(null); + const queueToastId = React.useRef(null) useEffect(() => { - const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`; - if (queuePos === 0 && queueToastId.current) { // hide toast + const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead` + if (queuePos === 0 && queueToastId.current) { + // hide toast toast.dismiss(queueToastId.current) queueToastId.current = null } else if (queuePos > 0) { - if (queueToastId.current) { // update toast + if (queueToastId.current) { + // update toast toast.update(queueToastId.current, { - render: msg + render: msg, }) - } else { // show toast + } else { + // show toast queueToastId.current = toast.loading(msg, { autoClose: false, draggable: false, closeButton: false, toastId: 'queueToast', - position: toast.POSITION.TOP_CENTER + position: toast.POSITION.TOP_CENTER, }) } } @@ -560,8 +561,7 @@ function ImageGenContent(): JSX.Element { const [purchaseModalOpen, setPurchaseModalOpen] = useState(false) - useEffect(() => { - }, [ + useEffect(() => {}, [ params, selectedModel, session, @@ -604,10 +604,10 @@ function ImageGenContent(): JSX.Element { lastPromptTokensGood.current = false toast.warn( 'Prompt is too long and will be cut off. Using ' + - promptTokens + - ' out of ' + - SD_TOKEN_LIMIT + - ' available tokens.' + promptTokens + + ' out of ' + + SD_TOKEN_LIMIT + + ' available tokens.' ) } else if (promptTokens.every((t) => t <= SD_TOKEN_LIMIT)) { lastPromptTokensGood.current = true @@ -646,10 +646,10 @@ function ImageGenContent(): JSX.Element { lastNegPromptTokensGood.current = false toast.warn( 'Negative prompt is too long and will be cut off. Using ' + - negPromptTokens + - ' out of ' + - SD_TOKEN_LIMIT + - ' available tokens.' + negPromptTokens + + ' out of ' + + SD_TOKEN_LIMIT + + ' available tokens.' ) } else if (negPromptTokens <= SD_TOKEN_LIMIT) { lastNegPromptTokensGood.current = true @@ -673,10 +673,8 @@ function ImageGenContent(): JSX.Element { lastTagSearchRequest.current = requestId fetch( BackendURLTagSearch + - //`?model=${encodeURIComponent(selectedModel.toString())}&prompt=${encodeURIComponent( - `?prompt=${encodeURIComponent( - prompt.trim() - )}`, + //`?model=${encodeURIComponent(selectedModel.toString())}&prompt=${encodeURIComponent( + `?prompt=${encodeURIComponent(prompt.trim())}`, { mode: 'cors', cache: 'default', @@ -695,9 +693,12 @@ function ImageGenContent(): JSX.Element { }) .catch((error) => { logError(error) - toast.error(`Error: ${error.message} - Unable to reach Naifu servers. Please wait for a moment and try again`, { - toastId: 'promptSuggesionError' - }) + toast.error( + `Error: ${error.message} - Unable to reach Naifu servers. Please wait for a moment and try again`, + { + toastId: 'promptSuggesionError', + } + ) }) .finally(() => { setSearchingTags(false) @@ -784,7 +785,11 @@ function ImageGenContent(): JSX.Element { if (!prompt[lastFocusedPrompt].slice(cursorPosition)?.trim()) { newPrompt += ', ' } - setPrompt([...prompt.slice(0, lastFocusedPrompt), newPrompt, ...prompt.slice(lastFocusedPrompt + 1)]) + setPrompt([ + ...prompt.slice(0, lastFocusedPrompt), + newPrompt, + ...prompt.slice(lastFocusedPrompt + 1), + ]) if (promptid !== undefined) { setTimeout(() => { const input = document.querySelector(`#prompt-input-${promptid}`) as HTMLInputElement @@ -1054,7 +1059,7 @@ function ImageGenContent(): JSX.Element { }, (error: any) => { setGenerating(false) - toast.error(error.message); + toast.error(error.message) }, () => { setGenerating(false) @@ -1075,11 +1080,10 @@ function ImageGenContent(): JSX.Element { body: 'Image generation completed', icon: newImages[0].url, image: newImages[0].url, - tag: 'imagegen-complete' }) - notification.onclick = () => { + notification.addEventListener('click', () => { window.focus() - } + }) } } } @@ -1174,11 +1178,10 @@ function ImageGenContent(): JSX.Element { body: 'Image generation completed', icon: newImages[0].url, image: newImages[0].url, - tag: 'imagegen-complete' }) - notification.onclick = () => { + notification.addEventListener('click', () => { window.focus() - } + }) } } resolve({ images: newImages, seeds: masks.map((m) => m.seed) }) @@ -1425,9 +1428,7 @@ function ImageGenContent(): JSX.Element { !p) || - !validateParameters(params, selectedModel) + generating || prompt.some((p) => !p) || !validateParameters(params, selectedModel) } onClick={() => { setEnhanceBoxVisible(false) @@ -1787,10 +1788,7 @@ function ImageGenContent(): JSX.Element { - + { image.forEach((img, j) => { @@ -2246,12 +2244,12 @@ function ImageGenContent(): JSX.Element { } else { return e.key === 'ArrowUp' ? (suggestionSelectionIndex + - tagSuggestions.length - - 1) % - tagSuggestions.length + tagSuggestions.length - + 1) % + tagSuggestions.length : (suggestionSelectionIndex + - 1) % - tagSuggestions.length + 1) % + tagSuggestions.length } } ) @@ -2269,7 +2267,7 @@ function ImageGenContent(): JSX.Element { e.stopPropagation() insertTagToPrompt( tagSuggestions[ - suggestionSelectionIndex + suggestionSelectionIndex ][0], promptid ) @@ -2324,10 +2322,11 @@ function ImageGenContent(): JSX.Element { SD_TOKEN_LIMIT } style={{ - height: `${((promptTokens[promptid] ?? 0) / - SD_TOKEN_LIMIT) * + height: `${ + ((promptTokens[promptid] ?? 0) / + SD_TOKEN_LIMIT) * 100 - }%`, + }%`, }} /> @@ -2484,19 +2483,19 @@ function ImageGenContent(): JSX.Element { /> {(shownHover === i || images[selectedImage].length === 1) && ( - <> - {images[selectedImage].length === 1 && - img && - topButtonGroup(img, 0)} - - {images[selectedImage].length !== 1 && - specialButtonGroup(img, i)} - {saveButtonGroup(img)} - - {images[selectedImage].length === 1 && - seedButtonGroup(img, i)} - - )} + <> + {images[selectedImage].length === 1 && + img && + topButtonGroup(img, 0)} + + {images[selectedImage].length !== 1 && + specialButtonGroup(img, i)} + {saveButtonGroup(img)} + + {images[selectedImage].length === 1 && + seedButtonGroup(img, i)} + + )} {img.isVariationOriginal && (
- {!downloadingImages ? ( - 'Download ZIP' - ) : ( - - Downloading... - - )} + {!downloadingImages ? 'Download ZIP' : Downloading...} @@ -3058,7 +3051,7 @@ const ExpandedImageContainer = styled(motion.div)` align-items: center; ` -const HistoryButton = styled(SubtleButton) <{ selected: boolean; img: string }>` +const HistoryButton = styled(SubtleButton)<{ selected: boolean; img: string }>` border: ${(props) => props.selected ? `2px solid ${props.theme.colors.textHeadings}` : `2px solid transparent`}; border-radius: 3px; @@ -3298,7 +3291,7 @@ function GenerationOptions(props: { }, [props.notiEnabled]) const setNotiEnabled = useCallback((b: boolean) => { - if (typeof window !== "undefined") { + if (typeof window !== 'undefined') { if (window.Notification.permission === 'denied') { toast.warn("You've disabled Notification in browser settings.") } else { @@ -3330,7 +3323,7 @@ function GenerationOptions(props: { onMouseDown: (e: any) => { if (e.target !== document.activeElement) { e.preventDefault() - ; (e.target as HTMLInputElement).select() + ;(e.target as HTMLInputElement).select() } }, } @@ -3895,7 +3888,7 @@ const Input = styled.input<{ warn?: boolean }>` } ` -const LargeInput = styled(TextareaAutosize) <{ warn?: boolean }>` +const LargeInput = styled(TextareaAutosize)<{ warn?: boolean }>` padding: 12px 20px; border: 1px solid ${(props) => (props.warn ? props.theme.colors.warning : props.theme.colors.bg3)}; border-radius: 3px; @@ -3938,7 +3931,7 @@ const GenerateButton = styled.button` overflow: hidden; cursor: pointer; font-weight: 700; - flex: .1 0 auto; + flex: 0.1 0 auto; border: 1px solid ${(props) => props.theme.colors.textHeadings}; &:disabled { color: ${(props) => props.theme.colors.textHeadings}; @@ -4914,7 +4907,7 @@ function Canvas(props: { onMouseDown: (e: any) => { if (e.target !== document.activeElement) { e.preventDefault() - ; (e.target as HTMLInputElement).select() + ;(e.target as HTMLInputElement).select() } }, } @@ -4973,24 +4966,27 @@ function Canvas(props: { const [queuePos, setQueuePos] = useState(0) // Queue remaining toast - const queueToastId = React.useRef(null); + const queueToastId = React.useRef(null) useEffect(() => { - const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`; - if (queuePos === 0 && queueToastId.current) { // hide toast + const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead` + if (queuePos === 0 && queueToastId.current) { + // hide toast toast.dismiss(queueToastId.current) queueToastId.current = null } else if (queuePos > 0) { - if (queueToastId.current) { // update toast + if (queueToastId.current) { + // update toast toast.update(queueToastId.current, { - render: msg + render: msg, }) - } else { // show toast + } else { + // show toast queueToastId.current = toast.loading(msg, { autoClose: false, draggable: false, closeButton: false, toastId: 'queueToast', - position: toast.POSITION.TOP_CENTER + position: toast.POSITION.TOP_CENTER, }) } } @@ -5541,7 +5537,7 @@ function Canvas(props: { backgroundImage: props.rerollImage ? `url(${props.rerollImage?.url})` : // eslint-disable-next-line max-len - `linear-gradient(45deg, #A0A0A0 25%, transparent 25%), linear-gradient(-45deg, #A0A0A0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #A0A0A0 75%), linear-gradient(-45deg, transparent 75%, #A0A0A0 75%)`, + `linear-gradient(45deg, #A0A0A0 25%, transparent 25%), linear-gradient(-45deg, #A0A0A0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #A0A0A0 75%), linear-gradient(-45deg, transparent 75%, #A0A0A0 75%)`, backgroundSize: props.rerollImage?.url ? '100%' : '30px 30px', backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px', }} @@ -5886,7 +5882,7 @@ const Filler = styled.div` height: 30px; ` -const CanvasControlButton = styled(SubtleButton) <{ selected?: boolean }>` +const CanvasControlButton = styled(SubtleButton)<{ selected?: boolean }>` padding: 8px; height: 44px; min-width: 58px; @@ -5906,13 +5902,13 @@ const CanvasControlButton = styled(SubtleButton) <{ selected?: boolean }>` width: 18px; height: 18px; background-color: ${(props) => - props.selected ? props.theme.colors.bg0 : props.theme.colors.textMain}; + props.selected ? props.theme.colors.bg0 : props.theme.colors.textMain}; } &:hover { color: ${(props) => (props.selected ? props.theme.colors.bg3 : props.theme.colors.textHeadings)}; > div { background-color: ${(props) => - props.selected ? props.theme.colors.bg0 : props.theme.colors.textHeadings}; + props.selected ? props.theme.colors.bg0 : props.theme.colors.textHeadings}; } }