Merge pull request #2 from blessedcoolant/user_input_image

User Input Image / Dev QoL Update

lama_cleaner/app/src/App.tsx

@@ -1,8 +1,9 @@
 import { ArrowLeftIcon } from '@heroicons/react/outline'
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useToggle, useWindowSize } from 'react-use'
 import Button from './components/Button'
 import FileSelect from './components/FileSelect'
+import useInputImage from './components/hooks/useInputImage'
 import ShortcutsModal from './components/ShortcutsModal'
 import Editor from './Editor'
 
@@ -31,6 +32,11 @@ function App() {
   const [file, setFile] = useState<File>()
   const [showShortcuts, toggleShowShortcuts] = useToggle(false)
   const windowSize = useWindowSize()
+  const userInputImage = useInputImage()
+
+  useEffect(() => {
+    setFile(userInputImage)
+  }, [userInputImage])
 
   return (
     <div className="h-full full-visible-h-safari flex flex-col">

lama_cleaner/app/src/components/hooks/useInputImage.js

@@ -0,0 +1,22 @@
+import { useCallback, useEffect, useState } from 'react'
+
+export default function useInputImage() {
+  const [inputImage, setInputImage] = useState()
+
+  const fetchInputImage = useCallback(() => {
+    fetch('/inputimage')
+      .then(res => res.blob())
+      .then(data => {
+        if (data && data.type.startsWith('image')) {
+          const userInput = new File([data], 'inputImage')
+          setInputImage(userInput)
+        }
+      })
+  }, [setInputImage])
+
+  useEffect(() => {
+    fetchInputImage()
+  }, [])
+
+  return inputImage
+}