Bouquet Designer

• 

  Paypal payment - allows users to login to their account and pay the required amount for their bouquet that they designed.

• 

  How to button - the '?' button that plays a short demo clip on how to use specific functionalities. In this case, how to adjust flowers.

• 

  Main Page - main page of the program : 3D render of bouquet in center, tools and payment on the right side, AI florist on the bottom left

• 

  Using the 'AI florist' - giving it a design idea and color choices such as 'christmas with lots of red and white'

Inspiration

I was inspired by walking around uni and seeing the graduates holding different flower bouquets, which reminded me of my high school graduation where I also had a flower bouquet. I remember asking my parents about whether they were able to design it themselves or see how it looks before the final product, but they told me that most cases you just tell the florist what the event is for and they'll design and make it for you. Which inspired me to want to create a program that allows customers to self design their bouquet which they can then send to actual florists to help create.

What it does

Bouquet Designer allows customers to design their own bouqettes in their browser. The customers can adjust the positioning and composition of the flowers or use presets to gain inspiration. An 'AI florist' chatbot can also be used to help create and rearrange bouquets. When a design is finalized, customers can pay directly to florists via the Paypal Checkout.

How we built it

Using TypeScript to build backend and overall functionality of the program including aspects such as flower data, bouquet data, server handling, storage of data, etc. Using Babylon.js to render the 3D flower models downloaded from Sketchfab in the compositions desired. Deploying the webpage on Render and using the Paypal API and sandbox accounts to simulate payment.

Challenges we ran into

Initially the auto flower arrange mechanic had the flowers' stems spaced out evenly. Although this prevented overlapping of the 3D models by creating sufficient spacing between flowers, this overcompensation caused the bouquet to look like a spike ball instead. Therefore, the mechanics were changed so that rather than having a fixed value of stem angles, the angle values adapt depending on the size of the bouquet. Also by allowing small bits of overlapping in the models, this made the entire bouqette looked more natural.

Accomplishments that we're proud of

The 'AI florist' mechanic, which uses the Gemini API to design bouqette for customers based on their input in the chatbox. It calls available tools depending on the customer requests and responses. The bouquet design is then built in-front of the customer live which makes the experience personalized.

What's next for Bouquet Designer

Integrating this program with real florist shops for further testing and gain feedback to help improve the program.

Built With

• babylon.js
• claude
• cloudflare-workers
• css3
• gemini
• glb
• html5
• javascript
• node.js
• paypal
• paypal-checkout
• paypal-orders-api
• render
• sketchfab
• typescript
• vite
• webgl