frontend: better error handling
This commit is contained in:
parent
fd1c1d29a7
commit
55197f2209
@ -34,7 +34,11 @@ export default async function inpaint(
|
|||||||
method: 'POST',
|
method: 'POST',
|
||||||
body: fd,
|
body: fd,
|
||||||
}).then(async r => {
|
}).then(async r => {
|
||||||
return r.blob()
|
console.log(r)
|
||||||
|
if (r.ok) {
|
||||||
|
return r.blob()
|
||||||
|
}
|
||||||
|
throw new Error('Something went wrong on server side.')
|
||||||
})
|
})
|
||||||
|
|
||||||
return URL.createObjectURL(res)
|
return URL.createObjectURL(res)
|
||||||
|
@ -15,7 +15,7 @@ import {
|
|||||||
TransformComponent,
|
TransformComponent,
|
||||||
TransformWrapper,
|
TransformWrapper,
|
||||||
} from 'react-zoom-pan-pinch'
|
} from 'react-zoom-pan-pinch'
|
||||||
import { useRecoilValue } from 'recoil'
|
import { useRecoilState, useRecoilValue } from 'recoil'
|
||||||
import { useWindowSize, useKey, useKeyPressEvent } from 'react-use'
|
import { useWindowSize, useKey, useKeyPressEvent } from 'react-use'
|
||||||
import inpaint from '../../adapters/inpainting'
|
import inpaint from '../../adapters/inpainting'
|
||||||
import Button from '../shared/Button'
|
import Button from '../shared/Button'
|
||||||
@ -28,7 +28,7 @@ import {
|
|||||||
loadImage,
|
loadImage,
|
||||||
useImage,
|
useImage,
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import { settingState } from '../../store/Atoms'
|
import { settingState, toastState } from '../../store/Atoms'
|
||||||
|
|
||||||
const TOOLBAR_SIZE = 200
|
const TOOLBAR_SIZE = 200
|
||||||
const BRUSH_COLOR = '#ffcc00bb'
|
const BRUSH_COLOR = '#ffcc00bb'
|
||||||
@ -73,6 +73,7 @@ function mouseXY(ev: SyntheticEvent) {
|
|||||||
export default function Editor(props: EditorProps) {
|
export default function Editor(props: EditorProps) {
|
||||||
const { file } = props
|
const { file } = props
|
||||||
const settings = useRecoilValue(settingState)
|
const settings = useRecoilValue(settingState)
|
||||||
|
const [toastVal, setToastState] = useRecoilState(toastState)
|
||||||
const [brushSize, setBrushSize] = useState(40)
|
const [brushSize, setBrushSize] = useState(40)
|
||||||
const [original, isOriginalLoaded] = useImage(file)
|
const [original, isOriginalLoaded] = useImage(file)
|
||||||
const [renders, setRenders] = useState<HTMLImageElement[]>([])
|
const [renders, setRenders] = useState<HTMLImageElement[]>([])
|
||||||
@ -144,12 +145,11 @@ export default function Editor(props: EditorProps) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const newLineGroups = [...lineGroups, curLineGroup]
|
const newLineGroups = [...lineGroups, curLineGroup]
|
||||||
setLineGroups(newLineGroups)
|
|
||||||
setCurLineGroup([])
|
setCurLineGroup([])
|
||||||
setIsDraging(false)
|
setIsDraging(false)
|
||||||
setIsInpaintingLoading(true)
|
setIsInpaintingLoading(true)
|
||||||
|
|
||||||
drawAllLinesOnMask(newLineGroups)
|
drawAllLinesOnMask(newLineGroups)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const res = await inpaint(
|
const res = await inpaint(
|
||||||
file,
|
file,
|
||||||
@ -165,9 +165,16 @@ export default function Editor(props: EditorProps) {
|
|||||||
const newRenders = [...renders, newRender]
|
const newRenders = [...renders, newRender]
|
||||||
setRenders(newRenders)
|
setRenders(newRenders)
|
||||||
draw(newRender, [])
|
draw(newRender, [])
|
||||||
|
// Only append new LineGroup after inpainting success
|
||||||
|
setLineGroups(newLineGroups)
|
||||||
} catch (e: any) {
|
} catch (e: any) {
|
||||||
// eslint-disable-next-line
|
setToastState({
|
||||||
alert(e.message ? e.message : e.toString())
|
open: true,
|
||||||
|
desc: e.message ? e.message : e.toString(),
|
||||||
|
state: 'error',
|
||||||
|
duration: 2000,
|
||||||
|
})
|
||||||
|
drawOnCurrentRender([])
|
||||||
}
|
}
|
||||||
setIsInpaintingLoading(false)
|
setIsInpaintingLoading(false)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user