Brain Palette

Visualize your Brain with AI
Html / CSS
JavaScript
AI Tools
Role
Web Developer
Designer
Team
Jack Cheng
Avery Hsieh
Bo-Chen Peng
Shima Solati
Timeframe
March - April 2023
2 months
Tools
CodeSandbox
Midjourney
Cloudinary
Introducing Brain Palette:
Visualize Your Brain
Unlock the Palette of your mind with Brain Palette!
Taste the results
Hover to reveal what their brain look like!
Product Demo: Discover How It Works in 3 minutes!
How it work?
Stage
Behind the Scenes
Rotate the gif background using CSS
Store user-selected data in an array using JavaScript's 'sessionStorage'
1. Request camera permission

2. Automate image uploads to Cloudinary by utilizing JavaScript's 'fetch' function to establish an API connection
1. Concretize user-selected data (e.g., transforming "Subjective" to "Mirror" as a prompt for the AI model)

2. Combine them into a sentence as a prompt

3. Retrieve the URL link of the user's photo by fetching Cloudinary again

4. Wrap them together and send the photo link and prompt to Discord, making them ready for use with Midjourney.
1. Calculate the percentage of the result

2. Randomly animate and display the result using JavaScript
See others' amazing results
Brain Palette Gallery
Thank you for scrolling!
Other Works
or explore VR Game Design, 2D/3D Animation, and other Design in my
PLAYGROUND➔
© 2023 Jack C. All rights reserved
some images for illustrative purposes by Freepik