wip

lama_cleaner/app/src/components/Header/Header.scss

@@ -1,6 +1,6 @@
 header {
   height: 60px;
-  padding: 1rem 2rem;
+  padding: 1rem 1.5rem;
   position: absolute;
   top: 0;
   display: flex;
@@ -31,4 +31,4 @@ header {
   align-items: center;
   gap: 6px;
   justify-self: end;
-}
+}

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

@@ -1,17 +1,19 @@
 import { ArrowLeftIcon, UploadIcon } from '@heroicons/react/outline'
 import React, { useState } from 'react'
-import { useRecoilState } from 'recoil'
-import { fileState } from '../../store/Atoms'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { fileState, isSDState } from '../../store/Atoms'
 import Button from '../shared/Button'
 import Shortcuts from '../Shortcuts/Shortcuts'
 import useResolution from '../../hooks/useResolution'
 import { ThemeChanger } from './ThemeChanger'
 import SettingIcon from '../Settings/SettingIcon'
+import PromptInput from './PromptInput'
 
 const Header = () => {
   const [file, setFile] = useRecoilState(fileState)
   const resolution = useResolution()
   const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
+  const isSD = useRecoilValue(isSDState)
 
   const renderHeader = () => {
     return (
@@ -37,6 +39,8 @@ const Header = () => {
           </label>
         </div>
 
+        {isSD && file ? <PromptInput /> : <></>}
+
         <div className="header-icons-wrapper">
           <ThemeChanger />
           {file && (

lama_cleaner/app/src/components/Header/PromptInput.scss

@@ -0,0 +1,18 @@
+.prompt-wrapper {
+  display: flex;
+  gap: 12px;
+}
+
+.prompt-wrapper input {
+  all: unset;
+  border-width: 0;
+  border-radius: 0.5rem;
+  min-width: 600px;
+  padding: 0 0.8rem;
+  outline: 1px solid var(--border-color);
+
+  &:focus-visible {
+    border-width: 0;
+    outline: 1px solid var(--yellow-accent);
+  }
+}

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

@@ -0,0 +1,44 @@
+import React, { FormEvent, useState } from 'react'
+import { useRecoilState } from 'recoil'
+import emitter, { EVENT_PROMPT } from '../../event'
+import { appState, propmtState } from '../../store/Atoms'
+import Button from '../shared/Button'
+import TextInput from '../shared/Input'
+
+// TODO: show progress in input
+const PromptInput = () => {
+  const [app, setAppState] = useRecoilState(appState)
+  const [prompt, setPrompt] = useRecoilState(propmtState)
+
+  const handleOnInput = (evt: FormEvent<HTMLInputElement>) => {
+    evt.preventDefault()
+    evt.stopPropagation()
+    const target = evt.target as HTMLInputElement
+    setPrompt(target.value)
+  }
+
+  const handleRepaintClick = () => {
+    if (prompt.length !== 0 && !app.isInpainting) {
+      emitter.emit(EVENT_PROMPT)
+    }
+  }
+
+  return (
+    <div className="prompt-wrapper">
+      <TextInput
+        value={prompt}
+        onInput={handleOnInput}
+        placeholder="I want to repaint of..."
+      />
+      <Button
+        border
+        onClick={handleRepaintClick}
+        disabled={prompt.length === 0 || app.isInpainting}
+      >
+        RePaint
+      </Button>
+    </div>
+  )
+}
+
+export default PromptInput