From 37592a876e5399c6af49ce6eb6962d6770e37d00 Mon Sep 17 00:00:00 2001
From: caranicas <kendrick.caranicas@gmail.com>
Date: Wed, 14 Sep 2022 17:56:38 -0400
Subject: [PATCH] fix the image preview display

---
 .../advancedSettings/advancedSettings.css      |  4 ++++
 .../components/creationPanel/creationPanel.css |  5 +++++
 .../src/components/creationPanel/index.tsx     | 18 ++++++++++--------
 .../displayPanel/generatedImage/index.tsx      |  2 +-
 .../build_src/src/store/imageCreateStore.ts    |  2 +-
 5 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css b/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
index 90fbac25..09a63e5d 100644
--- a/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
+++ b/ui/frontend/build_src/src/components/creationPanel/advancedSettings/advancedSettings.css
@@ -1,3 +1,7 @@
 input[size="4"] {
   width: 4.5rem;
 }
+
+#File-Body>#File-For {
+  display: none;
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/creationPanel/creationPanel.css b/ui/frontend/build_src/src/components/creationPanel/creationPanel.css
index 69347440..418f99df 100644
--- a/ui/frontend/build_src/src/components/creationPanel/creationPanel.css
+++ b/ui/frontend/build_src/src/components/creationPanel/creationPanel.css
@@ -46,3 +46,8 @@ li {
 .modifierTag p {
   margin: 0;
 }
+
+input[type="file"] {
+  /* Dont show the file name */
+  color:transparent;
+}
\ No newline at end of file
diff --git a/ui/frontend/build_src/src/components/creationPanel/index.tsx b/ui/frontend/build_src/src/components/creationPanel/index.tsx
index 69ad3629..2d2f26ad 100644
--- a/ui/frontend/build_src/src/components/creationPanel/index.tsx
+++ b/ui/frontend/build_src/src/components/creationPanel/index.tsx
@@ -32,6 +32,7 @@ export default function CreationPanel() {
       const reader = new FileReader();
       reader.onload = (e) => {
         if (e.target) {
+          debugger;
           setRequestOption("init_image", e.target.result);
         }
       };
@@ -39,6 +40,10 @@ export default function CreationPanel() {
     }
   };
 
+  const _handleClearImage = () => {
+    setRequestOption("init_image", undefined);
+  };
+
   return (
     <div className="create-panel">
       <div className="basic-create">
@@ -47,11 +52,6 @@ export default function CreationPanel() {
           <textarea value={promptText} onChange={handlePromptChange}></textarea>
         </div>
 
-        {/* <div className="seed-image">
-          <p>Seed Image</p>
-          <input type="file" accept="image/*" />
-        </div> */}
-
         <div id="editor-inputs-init-image" className="row">
           <label>
             <b>Initial Image:</b> (optional){" "}
@@ -63,19 +63,21 @@ export default function CreationPanel() {
             onChange={_handleFileSelect}
           />
           <br />
+          {init_image && (
           <div id="init_image_preview" className="image_preview">
-            {init_image && (
               <img
                 id="init_image_preview"
                 src={init_image}
                 width="100"
                 height="100"
               />
-            )}
-            <button id="init_image_clear" className="image_clear_btn">
+
+            <button id="init_image_clear" className="image_clear_btn" onClick={_handleClearImage}>
               X
             </button>
+         
           </div>
+          )}
         </div>
 
         <MakeButton></MakeButton>
diff --git a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx b/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
index 94131f87..72099309 100644
--- a/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
+++ b/ui/frontend/build_src/src/components/displayPanel/generatedImage/index.tsx
@@ -58,8 +58,8 @@ export default function GeneratedImage({
   };
 
   const _handleUseAsInput = () => {
-    console.log(" TODO : use as input");
 
+    debugger;
     setRequestOption("init_image", imageData);
     // initImageSelector.value = null
     // initImagePreview.src = imgBody
diff --git a/ui/frontend/build_src/src/store/imageCreateStore.ts b/ui/frontend/build_src/src/store/imageCreateStore.ts
index d6e99cdb..3f24bab4 100644
--- a/ui/frontend/build_src/src/store/imageCreateStore.ts
+++ b/ui/frontend/build_src/src/store/imageCreateStore.ts
@@ -202,7 +202,7 @@ export const useImageCreate = create<ImageCreateState>(
       isCheckUseFaceCorrection: true,
       isUseRandomSeed: true,
       isUseAutoSave: false,
-      isSoundEnabled: true,
+      isSoundEnabled: false,
     },
 
     toggleAdvancedSettingsIsOpen: () => {