DEV Community: eitanwaxman

What does the next generation of AI eCom look like?

eitanwaxman — Sun, 14 Jul 2024 20:01:49 +0000

This is a submission for the Wix Studio Challenge .

What I Built

For this challenge I chose to explore a future of AI driven eCommerce. I tried to take AI innovation beyond the typical chatbot or content generation use case and break the shopping experience free of what has become the standard for the past 10+ years.

By tapping into the design capabilities of Wix Studio, the Velo APIs of Wix's eCommerce business solution Wix Store, and OpenAIs completion models I created an immersive shopping experience like nothing you have seen before (I hope 😅).

In this shop instead of browsing and interacting alone by clicking around, you are accompanied by an AI companion who shows your products, adds them to your cart, and even helps take you to the checkout when your done.

While this MVP only accommodates text based interactions - the concept opens up a world of more interactive and accessible shopping experiences using voice and vision capabilities of modern AI models.

Demo

Try it out yourself here: https://eitanwaxman.wixstudio.io/ai-store

Development Journey

I started out by building an 'agent' that can create Vector embeddings using the product data and store it in a Wix Collection. This agent runs whenever a product is added or updated in the Wix Store. These embeddings serve as the foundation for the semantic search capabilities of the shop.
Note: In an ideal world I would utilize a Vector database for this but opted to stay in Wix to save time.

Next I moved on to building out the brain of the shop which essentially follows this process:

Receives a query from the user and gets the intent from the 'intent agent'. This intent is one of many actions the user might want to be taking in the shop such as browsing products, adding something to their cart, or checking out.
Executes an action by interacting with the Velo APIs via a dedicated agent. These agents use AI to get a JSON object of parameters that are then passed to the API.
Generates a plain text response based on: The companion personality, the conversation history, the action taken, and the data returned.

After that it was a matter of tweaking, debugging, and elaborating on the above.

Some challenges I encountered (some still not completely resolved 🙃):

Handling situations where multiple chain actions need to be taken based on a single user query.
Handling special scenarios like product variants.
Getting the AI not to confuse conversation history with facts and data.

Which APIs and Libraries did you utilize?

wix-stores-backend: Creating embeddings onProductCreated and onProductUpdated events. Also for retrieving product variants.
wix-ecom-backend: Adding products to cart, other cart interactions and generating a checkout link.
wix-data: Storing and retrieving embeddings.
wix-fetch & wix-secrets-backend: Fetching responses from OpenAI APIs.
wix-location-frontend: Navigation to the checkout link.
wix-storage: Storing the companion selection in session.

Thanks for reading!

A Loading Bar So Beautiful You Can't Look Away 🌈

eitanwaxman — Wed, 27 Jul 2022 01:12:58 +0000

Wait for it...

Yes you just spent 30 seconds watching that 😊

What data structure is best for caching? An experiment 🧪

eitanwaxman — Sun, 24 Jul 2022 14:12:51 +0000

While trying to broaden my horizons about data structures, I learned about two native JavaScript structures I had never heard of - Sets and Maps.

Now why had I never heard of them? Is it because I am a complete noob? Or maybe they are just not so common? (my nice way of saying useless).

To figure it out I decided to run a small experiment to test the build and retrieval times for each of the big 4 - Arrays, Objects, Sets, and Maps.

Here's what I did:

First I tested Arrays- constructing it with a for loop and retrieving using the indexOf method (for a worst case scenario item).

const myArray = []

function storeWithArray(array, itemToFind) {
    const startTime = Date.now()

    for (let i = 0; i < 10000000; i++) {
        array.push(i)
    }

    const buildTime = Date.now()
    console.log("Array Build Time: ", buildTime - startTime)

    console.log(array.indexOf(itemToFind) === itemToFind)

    const retrievalTime = Date.now()
    console.log("Array Retrieval Time: ", retrievalTime - buildTime)
}

Then I used the array I built to test the other three structures:

Sets

function storeWithSet(array, itemToFind) {
    const startTime = Date.now()

    const mySet = new Set();

    array.forEach((item) => {
        mySet.add(item)
    })

    const buildTime = Date.now()
    console.log("Set Build Time: ", buildTime - startTime)

    console.log(mySet.has(itemToFind))

    const retrievalTime = Date.now()
    console.log("Set Retrieval Time: ", retrievalTime - buildTime)
}

Objects

function storeWithObject(array, itemToFind) {
    const startTime = Date.now()

    const myObject = new Object();

    array.forEach((item) => {
        myObject[item] = item;
    })
    const buildTime = Date.now()
    console.log("Object Build Time: ", buildTime - startTime)

    console.log(myObject[itemToFind] === itemToFind)

    const retrievalTime = Date.now()
    console.log("Object Retrieval Time: ", retrievalTime - buildTime)
}

Maps

function storeWithMap(array, itemToFind) {
    const startTime = Date.now()

    const myMap = new Map();

    array.forEach((item) => {
        myMap.set(item, item)
    })
    const buildTime = Date.now()
    console.log("Map Build Time: ", buildTime - startTime)

    console.log(myMap.get(itemToFind) === itemToFind)

    const retrievalTime = Date.now()
    console.log("Map Retrieval Time: ", retrievalTime - buildTime)
}

And run time:

storeWithArray(myArray, 9999999)
storeWithSet(myArray, 9999999)
storeWithObject(myArray, 9999999)
storeWithMap(myArray, 9999999)

Here are the results:

Unsurprisingly Array retrieval time was the longest, but the build time was much shorter than Sets and Maps!

Objects seem to be the clear winner with the shortest build time and marginally longer retrieval time than Maps and Sets (sometimes it even beat them).

So basically if you need to store and retrieve information - objects are your best bet.

Then what are Maps and Sets good for?
I know they poses unique qualities - they are ordered like Arrays and can prevent duplicate values etc. But what is the use case that warrants their apparent inefficiency?

Magnifying Glass for Text and more!

eitanwaxman — Mon, 18 Jul 2022 20:57:17 +0000

After discovering the backdrop-filter property - specifically "blur()" function - I thought it would be cool if there was also a "scale()" option.

Unfortunately, I couldn't find anything of the sort. The closest thing I could find to scaling the element behind another element was this W3 tutorial.

But what about text?

And thus the magnifying glass was born:

Open issues:

Magic numbers - spent a while trying to math it, but still haven't arrived at the formula that works well for different sizes and scales.
linear-gradient of the lens doesn't show above images.

Although this is mostly just for fun, I think this has some real use cases for those who are hard of seeing - there is something to be said for magnification in context (and not just making the entire page bigger).

Maybe a browser extension?

Cheers

Magic Button 🧙‍♂️

eitanwaxman — Wed, 13 Jul 2022 20:22:47 +0000

This button may look like any plain old button but actually, it's magic.

Or at least sort of.

If you refresh the page this button may change.

Why?
This button logs clicks and runs tests based on a predefined sample size for optimization.

In other words, it does automatic A/B testing to provide the button that will convert the most.

It still has a limited range of tests and the integration method is a little quirky but I think this is a viable prototype for a very useful embeddable.

You can see the full documentation on my GitHub.

Looking forward to your feedback!

A More Modern Youtube Interface

eitanwaxman — Mon, 04 Jul 2022 19:42:02 +0000

**The YouTube interface always seemed a bit clunky to me. **So I set out to try and redesign the video widget in a more dynamic way. Also just for fun tried to keep JS to a minimum.

Things I was experimenting with in this pen:

Scaling using em.
Flexbox inside a button.
Video with rounded corners.

Overall I think as a user I would enjoy the immediate response of the UI and the dynamic scaling - the only possible downside I still haven't solved is the other widgets in the row moving aside.

*What do you think?
*
P.S. anyone have a creative solution for one directional transition delays in CSS?

Toggling Without JS - Buttons Reimagined 🤯

eitanwaxman — Wed, 29 Jun 2022 02:37:34 +0000

The story begins with wanting to recreate the "hamburger menu that animates into an X" that is quite popular these days. Oh and only using CSS.

At first I tried to tap into the :focus pseudo class to control the changes. Something like this:

button{
...
}

//top line
button::after{
...
}

//bottom line
button::before{
...
}

button:focus::before{
transform: rotate(45deg);
}

etc...

The problem was that it couldn't be reverted back to the initial state by clicking on the button again. Only clicking outside the button could remove the focus.

Then while watching a tutorial by my fav YouTube developer Web Dev Simplified it hit me. What about using a checkbox input instead of a button to manage the toggle?

An hour or two later I arrived at this:

I made some tweaks to the method such as using absolute and width: 0 to disappear the input but the overall concept is the same.

This CSS magic kinda makes the checkbox type input the king of JS-less state. I decided to take it one step further. Could we implement an effect as well -such as the dropdown of the actual menu?

After much struggle I can say the answer is - sort of.

The checkbox/toggle can affect other elements as long as they are within CSS reach. The elements must be at the same level as the toggle and share a parent.

All this jumping through hoops made me wonder - why isn't there a toggle pseudo class? Are there any other ways to implement toggle in CSS? Is this actually worthwhile and scalable?

lmk ✌

A Unique Approach to Form Validation 🙃

eitanwaxman — Thu, 23 Jun 2022 03:28:07 +0000

There are many common practices for throwing a validation error - red outlines, error messages, disabled buttons, etc. Today I want to explore an (extremely) innovative approach...

But first please fill out the form >

If you didn't, you may have noticed the "submit" button is a slippery little fella.

This idea was originally just going to be a UX parody with an unclickable button. Then the idea struck me to make it a form validation feature giving it a semi-plausible implementation.

At first I thought it would be a 5 minute project, a simple form, some styling and a few event listeners. Then things got a bit complicated - first I had to think of how to randomize the movement in four directions and then on top of that I had to contain the movement within the viewport.

As an afterthought I added a return to original state when the user shows intent of filling out the form (focus or input).

All in all it was fun to code (which is what really counts) and who knows maybe one day this will become the golden standard 🤪.

Disney+ hover UI with CSS

eitanwaxman — Wed, 22 Jun 2022 11:08:19 +0000