Join the Webstudio community

Updated 11 months ago

Type and search in marketplace

At a glance

The post suggests adding a searchbar to the application, and the comments discuss the thumbnails used to represent different sections or templates.

Some community members feel the thumbnails are too detailed and hard to understand, and suggest using more abstract or mockup-style thumbnails. Others prefer the current detailed thumbnails as they provide a better idea of what to expect. The discussion centers around finding the right balance and guidelines for creating effective thumbnails.

The community members also explore the idea of using AI to automatically generate thumbnails, as manually creating them is time-consuming. They discuss the potential of using a GPT-based model to generate thumbnails that are reduced in representation but still close to the actual template. There is also a suggestion to move away from OpenAI and explore open-source AI alternatives.

Useful resources
Some searchbar to type and search would be nice! 😁
Attachment
image.png
3
r
s
O
32 comments
And update the thumbnails, they are horrible
I like the thumbnails actually
@Ronald from 360Creators we are aware, so far not enough items to want to search, don't you tink?
what makes you say that?
cc @John Ope from CIQ Libraries
Very detailed and hard to understand. Better would be some rectangle mockup style
So more abstract and less details is needed
Yes, so thumbnail would be more descriptive
I think it's subjective, personally I like it as it is now, detailed and not abstract, in this way I know what to expect when I click on the thumbnail
the question is really how to make the thumbnails guideline for everyone
I have a feeling we don't really understand how to make great thumbnails lol
one source of inspiration that I like and could be helpful is tailwindui thumbnails: https://tailwindui.com/components#product-application-ui, however this is for categories, maybe you could do the same and group by category template components with an abstract thumbnail on each category, then after clicking keep detailed realistic thumbnails
these are great but completely designed to be thumbnails
basically its a lot of manual labor to create these
these are completely wrong, they represent a category, not each individual section
what we are having there is each thumbnail representing a specific section template
imagine having to design for each section template a thumb
I see, I agree for scalability problem. Maybe AI could help, it would be magical to have a model that receives HTML/CSS as input (or image) and produces thumbnails.
that was my thoughts exactly
initially I thought we can just generate a thumbnail by making a screenshot but by iterating on thumbnails together with @John Ope from CIQ Libraries I realized thumbnails are much more harder to do than a small version of the section
I think at this point we can create a gpt prompt that would generate a proper thumbnail that has a bit of a reduction in its representation but not too much to still stay close to the actual template
That would really help make the process faster and easier. Manually creating those thumbnails took several trials.
As a first step we can start tinkering with a gpt prompt and see if we can make it produce great results
if results are great, we can add a πŸͺ„ button next to social preview in page settings that will do the same but automatically
generally I am also think we need to start getting away from open AI (which is not open at all ) and start playing with open source alternatives
integrating more and more of AI services into webstudio feels wrong unless we can selfhost these things
Right. However, this would concern only templates creators who want to publish templates, moreover, AI could be an option with a fallback to an AI free solution like the actual one in this case
I was thinking more of a general thumbnail from whatever is on the canvas
the image is coming from social preview image in page settings, its not specific to templates
the only thing that is specific to templates is the size at which it is used in the panel for thumbnails
but also before going any further into this discussion we need to try AI and see what's possible
Add a reply
Sign up and join the conversation on Discord