Update ui for img-cards

[cdgco]

evaluate if we want to maintain it as a single row for all notes on the image cards.

After determining that, update ui accordingly. Be sure to include padding, spacing, # cards / row, etc

[cdgco]

Firebase Cloud Storage can be used as an image content delivery network. It should be fairly easy to retrieve and render the images, but uploading images can be a pain.

[JetLiTheQT]

We could have preset images in that case

[cdgco]

Are you thinking more like background patterns for notes or allowing users to upload image notes?

[JetLiTheQT]

I think we could avoid image uploading. Preset background patterns/images could work, or we could use the note_title and use openai to generate an image too

[cdgco]

Idk how hard it would be, but I know Google Calendar does a similar thing where it takes the title of the event and shows a preset image (http://www.internetbestsecrets.com/2019/09/google-calendar-event-images.html). It looks like they have 50+ presets that are triggered based off certain keywords.

Looking at Google Keep's interface, they let you select between 12 preset colors, and 9 preset background images, so we could definitely do that without AI.

[cdgco]

DALL-E can be really hard to get a good output from without doing multiple attempts and hand picking the best one, and it costs a lot more than text completion, but here is a graphic I generated by having GPT-4 generate me a prompt, then choosing the best result from DALL-E-2:

GPT-4 Prompt:

I want to generate a Dall-E image for a card background in a note taking app similar to Google Keep or Google Calendar where the background image is generated based on the title of the note. I would like the style to be similar to Google's background image style with flat graphics and "minimal realism", with lots of colors. Can you provide me a prompt to feed into Dall-E for a note titled "Shopping List"?

GPT-4 Result / DALL-E-2 Prompt:

Create a flat graphic, minimal realism background image for a note-taking app inspired by Google Keep and Google Calendar, with a colorful and playful design. The background should visually represent a shopping list and include shopping cart, grocery bags, and various grocery items like fruits, vegetables, and other common products.

DALL-E-2 Result:

[JetLiTheQT]

Updated the card shape and text styling.