fix the image preview display

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;
+}

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;
+}

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>

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

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: () => {