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"
}

104
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,
@ -674,9 +674,7 @@ function ImageGenContent(): JSX.Element {
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) => {
@ -2324,7 +2322,8 @@ function ImageGenContent(): JSX.Element {
SD_TOKEN_LIMIT SD_TOKEN_LIMIT
} }
style={{ style={{
height: `${((promptTokens[promptid] ?? 0) / height: `${
((promptTokens[promptid] ?? 0) /
SD_TOKEN_LIMIT) * SD_TOKEN_LIMIT) *
100 100
}%`, }%`,
@ -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>
@ -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 {
@ -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};
@ -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,
}) })
} }
} }

Write Preview
Loading…
Cancel
Save