search

osu-cs492-w23 / final-project-team-11

final-project-team-11 created by GitHub Classroom
0 stars 2 forks source link

Update ui for img-cards #14

Open cdgco opened 1 year ago

cdgco commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

We could have preset images in that case

cdgco commented 1 year ago

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

JetLiTheQT commented 1 year ago

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 commented 1 year ago

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.

Image

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.

Image

cdgco commented 1 year ago

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:

Image

JetLiTheQT commented 1 year ago

Updated the card shape and text styling.