toutjavascript/Fooocus-Log-Viewer

Empty style box area showing when no styles are applied

autronix opened this issue · 1 comments

Hello,

I encountered an issue when not applying any styles where the styles section of the batch details shows a broken image and a floating empty description on top of the images generated.

I solved the issue by correcting the code around line 1101 on viewer.html and adding a condition to not render the image div when style is empty.

{key == "Styles" ? (
  <div class="flex">
  {value.replace(/'/g, "").replace("[","").replace("]","").split(", ").map((style, i) => (
    style.trim() !== "" && (
    <div class="flex-initial text-center mx-1 styleContainer">
    <img src={ ("/file=sdxl_styles/samples/"+style.toLowerCase().replace(/ /g,"_")+".jpg") } class="styleImage"/>
    <span class="styleTitle">{style}</span>
    </div>
    )
  ))}
  </div>
) :
(
  value
)}

This prevents the empty style issue on Batch Details

Nice fix
I will add it too