{"id":35505,"date":"2024-09-05T07:00:00","date_gmt":"2024-09-05T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35505"},"modified":"2024-09-05T16:13:34","modified_gmt":"2024-09-05T23:13:34","slug":"generative-recolor-e-commerce-paint-store-next-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/generative-recolor-e-commerce-paint-store-next-js","title":{"rendered":"Add Generative Recolor to Your E-commerce Paint Store in Next.js"},"content":{"rendered":"\n

Creating color variants for products on an e-commerce site can be expensive and time-consuming, especially if it involves reshoots. With Cloudinary’s generative AI tool, Generative Recolor, you can target items based on the given prompts and apply the specified colors to them. This makes it easy to retouch images quickly, removing the manual and tedious approach to updating the colors of your product images.<\/p>\n\n\n\n

In this blog post, you\u2019ll build a simple e-commerce store using Next.js and use Cloudinary\u2019s Generative Recolor feature<\/a>.<\/p>\n\n\n\n

To follow along, you need a basic understanding of TypeScript or JavaScript and a free <\/a>Cloudinary account<\/a>. The completed app is in this GitHub Repository<\/a>.<\/p>\n\n\n\n

Set Up the Next.js App<\/h1>\n\n\n\n

To start building this project, you\u2019ll first need to clone the starter project using the command below:<\/p>\n\n\n

<code<\/span>><\/span>$ git clone https:\/\/github.com\/folucode\/cloudinary-generative-recolor-app-starter.git<\/code<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
This project contains all the building blocks you need so that you can focus on the Generative Recolor feature.<\/p>\n\n\n\n
Next, install the Cloudinary SDK, where you\u2019ll get the components and functions you need to use the Generative Recolor feature in your app:<\/p>\n\n\n
$ npm install @cloudinary\/url-gen<\/code><\/span><\/pre>\n\n\n
\"\"<\/figure>\n\n\n\n
Implement the Generative Recolor Feature<\/h1>\n\n\n\n
Before you proceed, you need to upload an image to your Cloudinary account so you can test the Recolor feature. Check here to learn how to upload an image to Cloudinary<\/a>.<\/p>\n\n\n\n
After that, you want to set up the display for the image and the input field. The input field will take prompts that tell Cloudinary where to apply the color. Paste the following code in the page.tsx<\/code> file in the try-out folder:<\/p>\n\n\n
\n\/\/ src\/app\/try-out\/page.tsx<\/span>\n\n'use client'<\/span>;\n\nimport<\/span> { CSSProperties, FormEvent, useState } from<\/span> 'react'<\/span>;\nimport<\/span> styles from<\/span> '..\/page.module.css'<\/span>;\nimport<\/span> { useSearchParams } from<\/span> 'next\/navigation'<\/span>;\n\nexport<\/span> default<\/span> function<\/span> TryOut<\/span>(<\/span>) <\/span>{\n  const<\/span> searchParams = useSearchParams();\n\n  const<\/span> [imageUrl, setImageUrl] = useState('LINK_TO_IMAGE_ON_CLOUDINARY'<\/span>);\n  const<\/span> [prompts, setPrompts] = useState(''<\/span>);\n\n  const<\/span> imageRelativePath: string = 'IMAGE_RELATIVE_PATH_ON_CLOUDINARY'<\/span>;\n  const<\/span> color: string = searchParams.get('color'<\/span>) || ''<\/span>;\n\n  const<\/span> colorStyle: CSSProperties = {\n    color<\/span>: color || 'initial'<\/span>,\n    textDecoration<\/span>: 'underline'<\/span>,\n  };\n\n  async<\/span> function<\/span> recolor<\/span>(e: FormEvent<\/span>) <\/span>{\n    e.preventDefault();\n  }\n\n  return<\/span> (\n    <main<\/span> className<\/span>={styles.main}<\/span>><\/span>\n      <h1<\/span>><\/span>\n        Try Out{' '}\n        <span<\/span> style<\/span>={colorStyle}<\/span>><\/span>\n          {color?.replace(color.charAt(0), color.charAt(0).toUpperCase())}\n        <\/span<\/span>><\/span>{' '}\n        Paint\n      <\/h1<\/span>><\/span>\n      <div<\/span> className<\/span>={styles[<\/span>'try-out-image<\/span>']}><\/span>\n        <img<\/span> className<\/span>={styles.img}<\/span> src<\/span>={imageUrl}<\/span> alt<\/span>='living area'<\/span> \/><\/span>\n      <\/div<\/span>><\/span>\n      <div<\/span> className<\/span>={styles[<\/span>'try-out-area<\/span>']}><\/span>\n        <span<\/span>><\/span>\n          You can add multiple items, separated by comma (`,`). e.g. 'left wall,\n          right wall, window'\n        <\/span<\/span>><\/span>\n        <div<\/span> className<\/span>={styles[<\/span>'try-out-input<\/span>']}><\/span>\n          <p<\/span>><\/span>Item(s) to paint: <\/p<\/span>><\/span>\n          <input<\/span>\n            type<\/span>='text'<\/span>\n            value<\/span>={prompts}<\/span>\n            onChange<\/span>={(e)<\/span> =><\/span> setPrompts(e.target.value)}\n          \/>\n          <button<\/span> className<\/span>={styles.button}<\/span> onClick<\/span>={recolor}<\/span>><\/span>\n            Try It!\n          <\/button<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n    <\/main<\/span>><\/span><\/span>\n  );\n}<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, you defined a React component named TryOut<\/code>. The use client directive at the top indicates that this component is a client component. Additionally, the useSearchParams<\/code> from Next.js handles the URL query parameters.<\/p>\n\n\n\n
Within the component, the useState<\/code> hook manages the state variables: imageUrl<\/code>, which initially holds a link to an image on Cloudinary, and prompts, which store user input. The searchParams object extracts the ‘color’ parameter from the URL query string; this is the color you\u2019ll use to paint the image.<\/p>\n\n\n\n
Finally, a colorStyle<\/code> object sets the text color to the value of the color<\/code> query parameter, if it exists, or to initial<\/code> otherwise. It also underlines the text. The recolor function handles the functionality to recolor the image.<\/p>\n\n\n\n
You can navigate to this page by clicking any of the paint options on the home page:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Build the Recolor Logic<\/h2>\n\n\n\n
Now that you have finished the setup, to build the Recolor logic, your app will need to call the Cloudinary API to apply your specified color to the individual parts of the image indicated in the prompt. First, import the necessary Cloudinary modules and create a new Cloudinary instance configured with your cloud name. <\/p>\n\n\n\n
Then, navigate to the Cloudinary developer dashboard<\/a> to get your cloud name. You should see it under the Product Environment Credentials <\/strong>section.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Next, paste the code below at the top of the page.tsx file in the try-out folder. This will import the components needed to use the Generative Recolor feature and it also creates an instance of Cloudinary with your cloud name:<\/p>\n\n\n
\n\/\/ src\/app\/try-out\/page.tsx<\/span>\n\n...\n\nimport { generativeRecolor } from<\/span> '@cloudinary\/url-gen\/actions\/effect'<\/span>;\nimport<\/span> { CloudinaryImage, Cloudinary } from<\/span> '@cloudinary\/url-gen'<\/span>;\n\nconst<\/span> cloudinary = new<\/span> Cloudinary({\n  cloud<\/span>: {\n    cloudName<\/span>: '[your-cloudinary-cloud-name]'<\/span>,\n  },\n});\n\nexport<\/span> default<\/span> function<\/span> TryOut<\/span>(<\/span>) <\/span>{\n...<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
After this, in the Recolor function you defined earlier, you\u2019ll send your image to Cloudinary and apply the color to the parts of the image specified in the prompt, using the code snippet below:<\/p>\n\n\n
\n\/\/ src\/app\/try-out\/page.tsx<\/span>\n\n...\n\n async function<\/span> recolor<\/span>(e: FormEvent<\/span>) <\/span>{\n    e.preventDefault();\n\n    if<\/span> (!prompts) return<\/span>;\n\n    const<\/span> img: CloudinaryImage = cloudinary\n      .image(imageRelativePath)\n      .effect(generativeRecolor(prompts.split(','<\/span>), color));\n\n    setImageUrl(img.toURL());\n    setPrompts(''<\/span>)\n  }\n\n...<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
In the code above, when the form is submitted, the function’s first action is to call e.preventDefault()<\/code>. This prevents the form’s default behavior, which will generally cause the page to reload.<\/p>\n\n\n\n
Next, the function checks if the prompts state is empty. If empty, the function returns early, effectively doing nothing further. If the prompts aren\u2019t empty, the function proceeds to generate a new CloudinaryImage<\/code> object using the Cloudinary.image()<\/code> method, which takes the imageRelativePath<\/code> as an argument. The method.effect()<\/code> is then chained to apply the Generative Recoloring effect to the image. The generativeRecolor<\/code> function, which defines this effect, takes two arguments: the prompts split into an array by commas and the color. The image is recolored based on the user’s input and the specified color.<\/p>\n\n\n\n
After the image with the applied effect is generated, the function converts this image to a URL using the img.toURL()<\/code> method. This URL is then set to the imageUrl<\/code> state using the setImageUrl<\/code> function, which updates the image displayed in the component with the newly recolored version.\u00a0<\/p>\n\n\n\n
In the image below, the prompt specifies applying the green paint on the left wall, right wall, and the wall at the back. Cloudinary finds and recognizes these parts of the image and applies the color to them:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
The Final Result<\/h2>\n\n\n\n
This demo used different paint colors in various parts of the living area. It shows how you can specify an item or area to apply the color to and see the result<\/a>.<\/p>\n\n\n\n
Wrapping Up<\/h2>\n\n\n\n
In this blog post, you learned how to use Cloudinary’s Generative Recolor tool to test paint colors on images of a living area or any space. Try extending this app by adding more features, like allowing users to upload their images and utilizing a loader to show the new image is being generated. To learn more about Cloudinary\u2019s suite of AI features, contact us today<\/a>.<\/p>\n\n\n\n
If you found this blog post helpful and want to discuss it more, join the Cloudinary Community forum<\/u><\/a> and its associated Discord<\/u><\/a>.<\/p>\n\n\n\n
Resources<\/h2>\n\n\n\n
The LINK_TO_IMAGE_ON_CLOUDINARY<\/code> is the full path to the image on Cloudinary \u2013 here is an example<\/a>. The IMAGE_RELATIVE_PATH_ON_CLOUDINARY<\/code> is the image location on your Cloudinary account. For the earlier example image, it will be \/docs\/white-sofa.jpg<\/code>.<\/p>\n\n\n\n