hyperzlib
/
naifu-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

修复消息不弹出的问题

Browse Source
master
落雨楓 2 years ago
parent 3166357069
commit 0331de0b3b
3 changed files with 90 additions and 100 deletions
Show Stats Download Patch File Download Diff File

3
.lintstagedrc.json
Unescape Escape View File

@ -1,3 +0,0 @@
{
"*.{js,jsx,ts,tsx}": "eslint --fix"
}

3
.simple-git-hooks.json
Unescape Escape View File

@ -1,3 +0,0 @@
{
"pre-commit": "npx lint-staged"
}

184
src/pages/index.tsx
Unescape Escape View File

@ -1,7 +1,7 @@
import Head from 'next/head' import Head from 'next/head'
import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import React, { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
import { cssTransition, toast, ToastContainer } from 'react-toastify' 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 { useRecoilState, useRecoilValue } from 'recoil'
import styled from 'styled-components' import styled from 'styled-components'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
@ -64,9 +64,7 @@ import Checkbox from '../components/controls/checkbox'
import { getStorage } from '../data/storage/storage' import { getStorage } from '../data/storage/storage'
import { getUserSetting } from '../data/user/settings' import { getUserSetting } from '../data/user/settings'
import { useReload } from '../hooks/useReload' import { useReload } from '../hooks/useReload'
import { import { BackendURLTagSearch } from '../globals/constants'
BackendURLTagSearch,
} from '../globals/constants'
import Tooltip from '../components/tooltip' import Tooltip from '../components/tooltip'
import { WorkerInterface } from '../tokenizer/interface' import { WorkerInterface } from '../tokenizer/interface'
import { EncoderType } from '../tokenizer/encoder' import { EncoderType } from '../tokenizer/encoder'
@ -98,7 +96,7 @@ export const ToastArea = styled.div`
--toastify-color-progress-light: ${(props) => props.theme.colors.textHeadings}; --toastify-color-progress-light: ${(props) => props.theme.colors.textHeadings};
--toastify-text-color-light: ${(props) => props.theme.colors.textMain}; --toastify-text-color-light: ${(props) => props.theme.colors.textMain};
--toastify-font-family: ${(props) => props.theme.fonts.default}; --toastify-font-family: ${(props) => props.theme.fonts.default};
`; `
const MOBILE_WIDTH = 900 const MOBILE_WIDTH = 900
@ -144,7 +142,7 @@ const parsePrompt = (prompt: string[]): string => {
} }
const maxSamplesForSize = (width: number, height: number, max?: number): number => { const maxSamplesForSize = (width: number, height: number, max?: number): number => {
let limit = 100; const limit = 100
if (max) return Math.min(limit, max) if (max) return Math.min(limit, max)
return limit return limit
} }
@ -487,24 +485,27 @@ function ImageGenContent(): JSX.Element {
}, [savedPrompt]) }, [savedPrompt])
// Queue remaining toast // Queue remaining toast
const queueToastId = React.useRef<any>(null); const queueToastId = React.useRef<any>(null)
useEffect(() => { useEffect(() => {
const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`; const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`
if (queuePos === 0 && queueToastId.current) { // hide toast if (queuePos === 0 && queueToastId.current) {
// hide toast
toast.dismiss(queueToastId.current) toast.dismiss(queueToastId.current)
queueToastId.current = null queueToastId.current = null
} else if (queuePos > 0) { } else if (queuePos > 0) {
if (queueToastId.current) { // update toast if (queueToastId.current) {
// update toast
toast.update(queueToastId.current, { toast.update(queueToastId.current, {
render: msg render: msg,
}) })
} else { // show toast } else {
// show toast
queueToastId.current = toast.loading(msg, { queueToastId.current = toast.loading(msg, {
autoClose: false, autoClose: false,
draggable: false, draggable: false,
closeButton: false, closeButton: false,
toastId: 'queueToast', 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) const [purchaseModalOpen, setPurchaseModalOpen] = useState(false)
useEffect(() => { useEffect(() => {}, [
}, [
params, params,
selectedModel, selectedModel,
session, session,
@ -604,10 +604,10 @@ function ImageGenContent(): JSX.Element {
lastPromptTokensGood.current = false lastPromptTokensGood.current = false
toast.warn( toast.warn(
'Prompt is too long and will be cut off. Using ' + 'Prompt is too long and will be cut off. Using ' +
promptTokens + promptTokens +
' out of ' + ' out of ' +
SD_TOKEN_LIMIT + SD_TOKEN_LIMIT +
' available tokens.' ' available tokens.'
) )
} else if (promptTokens.every((t) => t <= SD_TOKEN_LIMIT)) { } else if (promptTokens.every((t) => t <= SD_TOKEN_LIMIT)) {
lastPromptTokensGood.current = true lastPromptTokensGood.current = true
@ -646,10 +646,10 @@ function ImageGenContent(): JSX.Element {
lastNegPromptTokensGood.current = false lastNegPromptTokensGood.current = false
toast.warn( toast.warn(
'Negative prompt is too long and will be cut off. Using ' + 'Negative prompt is too long and will be cut off. Using ' +
negPromptTokens + negPromptTokens +
' out of ' + ' out of ' +
SD_TOKEN_LIMIT + SD_TOKEN_LIMIT +
' available tokens.' ' available tokens.'
) )
} else if (negPromptTokens <= SD_TOKEN_LIMIT) { } else if (negPromptTokens <= SD_TOKEN_LIMIT) {
lastNegPromptTokensGood.current = true lastNegPromptTokensGood.current = true
@ -673,10 +673,8 @@ function ImageGenContent(): JSX.Element {
lastTagSearchRequest.current = requestId lastTagSearchRequest.current = requestId
fetch( fetch(
BackendURLTagSearch + BackendURLTagSearch +
//`?model=${encodeURIComponent(selectedModel.toString())}&prompt=${encodeURIComponent( //`?model=${encodeURIComponent(selectedModel.toString())}&prompt=${encodeURIComponent(
`?prompt=${encodeURIComponent( `?prompt=${encodeURIComponent(prompt.trim())}`,
prompt.trim()
)}`,
{ {
mode: 'cors', mode: 'cors',
cache: 'default', cache: 'default',
@ -695,9 +693,12 @@ function ImageGenContent(): JSX.Element {
}) })
.catch((error) => { .catch((error) => {
logError(error) logError(error)
toast.error(`Error: ${error.message} - Unable to reach Naifu servers. Please wait for a moment and try again`, { toast.error(
toastId: 'promptSuggesionError' `Error: ${error.message} - Unable to reach Naifu servers. Please wait for a moment and try again`,
}) {
toastId: 'promptSuggesionError',
}
)
}) })
.finally(() => { .finally(() => {
setSearchingTags(false) setSearchingTags(false)
@ -784,7 +785,11 @@ function ImageGenContent(): JSX.Element {
if (!prompt[lastFocusedPrompt].slice(cursorPosition)?.trim()) { if (!prompt[lastFocusedPrompt].slice(cursorPosition)?.trim()) {
newPrompt += ', ' newPrompt += ', '
} }
setPrompt([...prompt.slice(0, lastFocusedPrompt), newPrompt, ...prompt.slice(lastFocusedPrompt + 1)]) setPrompt([
...prompt.slice(0, lastFocusedPrompt),
newPrompt,
...prompt.slice(lastFocusedPrompt + 1),
])
if (promptid !== undefined) { if (promptid !== undefined) {
setTimeout(() => { setTimeout(() => {
const input = document.querySelector(`#prompt-input-${promptid}`) as HTMLInputElement const input = document.querySelector(`#prompt-input-${promptid}`) as HTMLInputElement
@ -1054,7 +1059,7 @@ function ImageGenContent(): JSX.Element {
}, },
(error: any) => { (error: any) => {
setGenerating(false) setGenerating(false)
toast.error(error.message); toast.error(error.message)
}, },
() => { () => {
setGenerating(false) setGenerating(false)
@ -1075,11 +1080,10 @@ function ImageGenContent(): JSX.Element {
body: 'Image generation completed', body: 'Image generation completed',
icon: newImages[0].url, icon: newImages[0].url,
image: newImages[0].url, image: newImages[0].url,
tag: 'imagegen-complete'
}) })
notification.onclick = () => { notification.addEventListener('click', () => {
window.focus() window.focus()
} })
} }
} }
} }
@ -1174,11 +1178,10 @@ function ImageGenContent(): JSX.Element {
body: 'Image generation completed', body: 'Image generation completed',
icon: newImages[0].url, icon: newImages[0].url,
image: newImages[0].url, image: newImages[0].url,
tag: 'imagegen-complete'
}) })
notification.onclick = () => { notification.addEventListener('click', () => {
window.focus() window.focus()
} })
} }
} }
resolve({ images: newImages, seeds: masks.map((m) => m.seed) }) resolve({ images: newImages, seeds: masks.map((m) => m.seed) })
@ -1425,9 +1428,7 @@ function ImageGenContent(): JSX.Element {
</InputLabel> </InputLabel>
<EnhanceButton <EnhanceButton
disabled={ disabled={
generating || generating || prompt.some((p) => !p) || !validateParameters(params, selectedModel)
prompt.some((p) => !p) ||
!validateParameters(params, selectedModel)
} }
onClick={() => { onClick={() => {
setEnhanceBoxVisible(false) setEnhanceBoxVisible(false)
@ -1787,10 +1788,7 @@ function ImageGenContent(): JSX.Element {
<PenIcon style={{ width: 16, height: 16 }} /> <PenIcon style={{ width: 16, height: 16 }} />
</OverlayButton> </OverlayButton>
</Tooltip> </Tooltip>
<Tooltip <Tooltip tooltip={`Generate Variations`} delay={0}>
tooltip={`Generate Variations`}
delay={0}
>
<OverlayButton <OverlayButton
disabled={generating} disabled={generating}
style={{ style={{
@ -1889,7 +1887,7 @@ function ImageGenContent(): JSX.Element {
}, 0) }, 0)
const dupeNames: any = {} const dupeNames: any = {}
const loadingToastId = toast.loading(`Downloading ${imageCount} images...`, { const loadingToastId = toast.loading(`Downloading ${imageCount} images...`, {
autoClose: false autoClose: false,
}) })
images.forEach((image, i) => { images.forEach((image, i) => {
image.forEach((img, j) => { image.forEach((img, j) => {
@ -2246,12 +2244,12 @@ function ImageGenContent(): JSX.Element {
} else { } else {
return e.key === 'ArrowUp' return e.key === 'ArrowUp'
? (suggestionSelectionIndex + ? (suggestionSelectionIndex +
tagSuggestions.length - tagSuggestions.length -
1) % 1) %
tagSuggestions.length tagSuggestions.length
: (suggestionSelectionIndex + : (suggestionSelectionIndex +
1) % 1) %
tagSuggestions.length tagSuggestions.length
} }
} }
) )
@ -2269,7 +2267,7 @@ function ImageGenContent(): JSX.Element {
e.stopPropagation() e.stopPropagation()
insertTagToPrompt( insertTagToPrompt(
tagSuggestions[ tagSuggestions[
suggestionSelectionIndex suggestionSelectionIndex
][0], ][0],
promptid promptid
) )
@ -2324,10 +2322,11 @@ function ImageGenContent(): JSX.Element {
SD_TOKEN_LIMIT SD_TOKEN_LIMIT
} }
style={{ style={{
height: `${((promptTokens[promptid] ?? 0) / height: `${
SD_TOKEN_LIMIT) * ((promptTokens[promptid] ?? 0) /
SD_TOKEN_LIMIT) *
100 100
}%`, }%`,
}} }}
/> />
</TokenLimitBarOuter> </TokenLimitBarOuter>
@ -2484,19 +2483,19 @@ function ImageGenContent(): JSX.Element {
/> />
{(shownHover === i || {(shownHover === i ||
images[selectedImage].length === 1) && ( images[selectedImage].length === 1) && (
<> <>
{images[selectedImage].length === 1 && {images[selectedImage].length === 1 &&
img && img &&
topButtonGroup(img, 0)} topButtonGroup(img, 0)}
{images[selectedImage].length !== 1 && {images[selectedImage].length !== 1 &&
specialButtonGroup(img, i)} specialButtonGroup(img, i)}
{saveButtonGroup(img)} {saveButtonGroup(img)}
{images[selectedImage].length === 1 && {images[selectedImage].length === 1 &&
seedButtonGroup(img, i)} seedButtonGroup(img, i)}
</> </>
)} )}
{img.isVariationOriginal && ( {img.isVariationOriginal && (
<div <div
style={{ style={{
@ -2586,9 +2585,9 @@ function ImageGenContent(): JSX.Element {
src={ src={
showOld === expandedImage showOld === expandedImage
? images[selectedImage][expandedImage] ? images[selectedImage][expandedImage]
.enhanceOriginal .enhanceOriginal
: images[selectedImage][expandedImage] : images[selectedImage][expandedImage]
.url .url
} }
alt={images[selectedImage][ alt={images[selectedImage][
expandedImage expandedImage
@ -2779,13 +2778,7 @@ function ImageGenContent(): JSX.Element {
} }
}} }}
> >
{!downloadingImages ? ( {!downloadingImages ? 'Download ZIP' : <span>Downloading...</span>}
'Download ZIP'
) : (
<span>
Downloading...
</span>
)}
</SubtleButton> </SubtleButton>
</HistoryBar> </HistoryBar>
</Sidebar> </Sidebar>
@ -3058,7 +3051,7 @@ const ExpandedImageContainer = styled(motion.div)`
align-items: center; align-items: center;
` `
const HistoryButton = styled(SubtleButton) <{ selected: boolean; img: string }>` const HistoryButton = styled(SubtleButton)<{ selected: boolean; img: string }>`
border: ${(props) => border: ${(props) =>
props.selected ? `2px solid ${props.theme.colors.textHeadings}` : `2px solid transparent`}; props.selected ? `2px solid ${props.theme.colors.textHeadings}` : `2px solid transparent`};
border-radius: 3px; border-radius: 3px;
@ -3298,7 +3291,7 @@ function GenerationOptions(props: {
}, [props.notiEnabled]) }, [props.notiEnabled])
const setNotiEnabled = useCallback((b: boolean) => { const setNotiEnabled = useCallback((b: boolean) => {
if (typeof window !== "undefined") { if (typeof window !== 'undefined') {
if (window.Notification.permission === 'denied') { if (window.Notification.permission === 'denied') {
toast.warn("You've disabled Notification in browser settings.") toast.warn("You've disabled Notification in browser settings.")
} else { } else {
@ -3330,7 +3323,7 @@ function GenerationOptions(props: {
onMouseDown: (e: any) => { onMouseDown: (e: any) => {
if (e.target !== document.activeElement) { if (e.target !== document.activeElement) {
e.preventDefault() 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; padding: 12px 20px;
border: 1px solid ${(props) => (props.warn ? props.theme.colors.warning : props.theme.colors.bg3)}; border: 1px solid ${(props) => (props.warn ? props.theme.colors.warning : props.theme.colors.bg3)};
border-radius: 3px; border-radius: 3px;
@ -3938,7 +3931,7 @@ const GenerateButton = styled.button`
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
font-weight: 700; font-weight: 700;
flex: .1 0 auto; flex: 0.1 0 auto;
border: 1px solid ${(props) => props.theme.colors.textHeadings}; border: 1px solid ${(props) => props.theme.colors.textHeadings};
&:disabled { &:disabled {
color: ${(props) => props.theme.colors.textHeadings}; color: ${(props) => props.theme.colors.textHeadings};
@ -4914,7 +4907,7 @@ function Canvas(props: {
onMouseDown: (e: any) => { onMouseDown: (e: any) => {
if (e.target !== document.activeElement) { if (e.target !== document.activeElement) {
e.preventDefault() e.preventDefault()
; (e.target as HTMLInputElement).select() ;(e.target as HTMLInputElement).select()
} }
}, },
} }
@ -4973,24 +4966,27 @@ function Canvas(props: {
const [queuePos, setQueuePos] = useState(0) const [queuePos, setQueuePos] = useState(0)
// Queue remaining toast // Queue remaining toast
const queueToastId = React.useRef<any>(null); const queueToastId = React.useRef<any>(null)
useEffect(() => { useEffect(() => {
const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`; const msg = `Task is lining up, ${queuePos} task${queuePos > 1 ? 's' : ''} remaining ahead`
if (queuePos === 0 && queueToastId.current) { // hide toast if (queuePos === 0 && queueToastId.current) {
// hide toast
toast.dismiss(queueToastId.current) toast.dismiss(queueToastId.current)
queueToastId.current = null queueToastId.current = null
} else if (queuePos > 0) { } else if (queuePos > 0) {
if (queueToastId.current) { // update toast if (queueToastId.current) {
// update toast
toast.update(queueToastId.current, { toast.update(queueToastId.current, {
render: msg render: msg,
}) })
} else { // show toast } else {
// show toast
queueToastId.current = toast.loading(msg, { queueToastId.current = toast.loading(msg, {
autoClose: false, autoClose: false,
draggable: false, draggable: false,
closeButton: false, closeButton: false,
toastId: 'queueToast', toastId: 'queueToast',
position: toast.POSITION.TOP_CENTER position: toast.POSITION.TOP_CENTER,
}) })
} }
} }
@ -5541,7 +5537,7 @@ function Canvas(props: {
backgroundImage: props.rerollImage backgroundImage: props.rerollImage
? `url(${props.rerollImage?.url})` ? `url(${props.rerollImage?.url})`
: // eslint-disable-next-line max-len : // 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', backgroundSize: props.rerollImage?.url ? '100%' : '30px 30px',
backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px', backgroundPosition: '0 0, 0 15px, 15px -15px, -15px 0px',
}} }}
@ -5886,7 +5882,7 @@ const Filler = styled.div`
height: 30px; height: 30px;
` `
const CanvasControlButton = styled(SubtleButton) <{ selected?: boolean }>` const CanvasControlButton = styled(SubtleButton)<{ selected?: boolean }>`
padding: 8px; padding: 8px;
height: 44px; height: 44px;
min-width: 58px; min-width: 58px;
@ -5906,13 +5902,13 @@ const CanvasControlButton = styled(SubtleButton) <{ selected?: boolean }>`
width: 18px; width: 18px;
height: 18px; height: 18px;
background-color: ${(props) => background-color: ${(props) =>
props.selected ? props.theme.colors.bg0 : props.theme.colors.textMain}; props.selected ? props.theme.colors.bg0 : props.theme.colors.textMain};
} }
&:hover { &:hover {
color: ${(props) => (props.selected ? props.theme.colors.bg3 : props.theme.colors.textHeadings)}; color: ${(props) => (props.selected ? props.theme.colors.bg3 : props.theme.colors.textHeadings)};
> div { > div {
background-color: ${(props) => background-color: ${(props) =>
props.selected ? props.theme.colors.bg0 : props.theme.colors.textHeadings}; props.selected ? props.theme.colors.bg0 : props.theme.colors.textHeadings};
} }
} }

Write Preview
Loading…
Cancel
Save