start new -> upload new

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -287,20 +287,30 @@ export default function Editor(props: EditorProps) {
 
   // Zoom reset
   const resetZoom = useCallback(() => {
-    if (!minScale || !original || !windowSize) {
+    if (!minScale) {
       return
     }
     const viewport = viewportRef.current
     if (!viewport) {
-      throw new Error('no viewport')
+      return
     }
     const offsetX = (windowSize.width - original.width * minScale) / 2
     const offsetY = (windowSize.height - original.height * minScale) / 2
-    viewport.setTransform(offsetX, offsetY, minScale, 200, 'easeOutQuad')
+    viewport.setTransform(offsetX, offsetY, minScale, 0, 'easeOutQuad')
     viewport.state.scale = minScale
+
     setScale(minScale)
     setPanned(false)
-  }, [viewportRef, minScale, original, windowSize])
+  }, [viewportRef, windowSize, original.width, windowSize.height, minScale])
+
+  useEffect(() => {
+    setLineGroups([])
+    setCurLineGroup([])
+    setRenders([])
+    resetZoom()
+    const imageSizeLimit = Math.max(original.width, original.height)
+    setSizeLimit(imageSizeLimit)
+  }, [resetZoom, file, original])
 
   useEffect(() => {
     window.addEventListener('resize', () => {

lama_cleaner/app/src/components/Editor/SizeSelector.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import Selector from '../shared/Selector'
 
 const sizes = ['720', '1080', '2000', 'Original']
@@ -14,6 +14,10 @@ export default function SizeSelector(props: SizeSelectorProps) {
   const [activeSize, setActiveSize] = useState<string>('Original')
   const longSide: number = Math.max(originalWidth, originalHeight)
 
+  useEffect(() => {
+    setActiveSize('Original')
+  }, [originalHeight, originalWidth])
+
   const getSizeShowName = useCallback(
     (size: string) => {
       if (size === 'Original') {

lama_cleaner/app/src/components/Header/Header.tsx

@@ -1,5 +1,5 @@
-import { ArrowLeftIcon } from '@heroicons/react/outline'
+import { ArrowLeftIcon, UploadIcon } from '@heroicons/react/outline'
-import React from 'react'
+import React, { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { fileState } from '../../store/Atoms'
 import Button from '../shared/Button'
@@ -11,20 +11,30 @@ import SettingIcon from '../Settings/SettingIcon'
 const Header = () => {
   const [file, setFile] = useRecoilState(fileState)
   const resolution = useResolution()
+  const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
 
   const renderHeader = () => {
     return (
       <header>
         <div style={{ visibility: file ? 'visible' : 'hidden' }}>
-          <Button
+          <label htmlFor={uploadElemId}>
-            icon={<ArrowLeftIcon />}
+            <Button icon={<UploadIcon />} style={{ border: 0 }}>
-            onClick={() => {
+              <input
-              setFile(undefined)
+                style={{ display: 'none' }}
-            }}
+                id={uploadElemId}
-            style={{ border: 0 }}
+                name={uploadElemId}
-          >
+                type="file"
-            {resolution === 'desktop' ? 'Start New' : undefined}
+                onChange={ev => {
-          </Button>
+                  const newFile = ev.currentTarget.files?.[0]
+                  if (newFile) {
+                    setFile(newFile)
+                  }
+                }}
+                accept="image/png, image/jpeg"
+              />
+              {resolution === 'desktop' ? 'Upload New' : undefined}
+            </Button>
+          </label>
         </div>
 
         <div className="header-icons-wrapper">