{"id":36328,"date":"2024-11-20T07:00:00","date_gmt":"2024-11-20T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=36328"},"modified":"2025-03-03T15:57:22","modified_gmt":"2025-03-03T23:57:22","slug":"fashion-app-genai-react-node-js","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/fashion-app-genai-react-node-js","title":{"rendered":"Building a Fashion App Using Cloudinary’s GenAI in React and Node.js"},"content":{"rendered":"\n

The FashionistaAI app uses Cloudinary\u2019s GenAI<\/a> technologies to create a personalized outfit. All you need to do is upload a picture and FashionistaAI will generate four elegant, streetwear, sporty, and business casual outfits styles to suit your unique preferences. <\/p>\n\n\n\n

In this blog post we\u2019ll walk you through how we built the app using Cloudinary\u2019s GenAI features, React SDK on the frontend, and Node.js SDK on the backend to handle image uploads. If you\u2019re interested in fashion, cutting-edge AI, or both, this guide is for you!<\/p>\n\n\n\n

\"\"
An example of a FashionistaAIn output. The background of the images changes to match the model\u2019s outfit.<\/figcaption><\/figure>\n\n\n\n

GitHub Repo<\/strong>: Cloudinary-FashionistaAI<\/a><\/p>\n\n\n\n

Part 1: Set Up Cloudinary<\/h2>\n\n\n\n

To begin, log in to your Cloudinary account or create a free account<\/a>. If prompted with the question, \u201cWhat\u2019s your main interest?\u201d, select Coding with APIs and SDKs<\/strong> or Skip<\/strong>.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Cloudinary Cloud<\/h3>\n\n\n\n

In your account, select Settings <\/strong>> Product Environments<\/strong>. Here, you\u2019ll see the cloud that you\u2019ve created. Let\u2019s click the three-dot menu to edit your Cloudinary Cloud Name.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Edit the product environment and name your cloud, then click Save Changes<\/strong>.<\/p>\n\n\n\n

It\u2019s important to keep the same cloud name across different tools to be consistent.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Get Cloudinary API Keys<\/h3>\n\n\n\n

In your account, select Settings <\/strong>> Product Environments Setting<\/strong> > API Keys<\/strong>. Click Generate New API Key <\/strong>and save these credentials in a safe place. We\u2019ll use them later.<\/p>\n\n\n\n

Part 2: <\/strong>Build the React app<\/h2>\n\n\n\n

In this tutorial, I\u2019m using Vite<\/a> to build my React application. I recommend that you do the same. Follow the instructions on Vite\u2019s official website to create a React application.<\/p>\n\n\n\n

Build the FashionistaAI app<\/h3>\n\n\n\n

In your App.tsx<\/strong><\/a> file, replace the existing code with the following:<\/p>\n\n\n

import<\/span> React, { useState, useEffect } from<\/span> 'react'<\/span>;\nimport<\/span> axios from<\/span> 'axios'<\/span>;\nimport<\/span> '.\/App.css'<\/span>;\nimport<\/span> { AdvancedImage } from<\/span> '@cloudinary\/react'<\/span>;\nimport<\/span> { fill } from<\/span> '@cloudinary\/url-gen\/actions\/resize'<\/span>;\nimport<\/span> { Cloudinary, CloudinaryImage } from<\/span> '@cloudinary\/url-gen'<\/span>;\nimport<\/span> {\n  generativeReplace,\n  generativeRecolor,\n  generativeRestore,\n  generativeBackgroundReplace,\n} from<\/span> '@cloudinary\/url-gen\/actions\/effect'<\/span>;\n\nconst<\/span> App: React.FC = ()<\/span> =><\/span> {\n  type StyleKeys = 'top'<\/span> | 'bottom'<\/span> | 'background'<\/span> | 'type'<\/span>;\n  const<\/span> [image, setImage] = useState<any | null<\/span>>(null<\/span>);\n  const<\/span> [images, setImages] = useState<CloudinaryImage[]>([]);\n  const<\/span> [error, setError] = useState<string>(''<\/span>);\n  const<\/span> [loading, setLoading] = useState<boolean>(false<\/span>);\n  const<\/span> [loadingStatus, setLoadingStatus] = useState<boolean[]>([]); \/\/ Track loading status for each image<\/span>\n  const<\/span> [shouldSubmit, setShouldSubmit] = useState<boolean>(false<\/span>);\n  const<\/span> [openModal, setOpenModal] = useState(false<\/span>);\n  const<\/span> [color, setColor] = useState(''<\/span>);\n  const<\/span> [selectedItem, setSelectedItem] = useState<StyleKeys>('top'<\/span>);\n  const<\/span> [selectedImage, setSelectedImage] = useState(0<\/span>);\n  const<\/span> styles = [\n    { top<\/span>: 'suit jacket for upper body'<\/span>, bottom<\/span>: 'suit pants for lower body'<\/span>, background<\/span>: 'office'<\/span>, type<\/span>: 'business casual'<\/span> },\n    { top<\/span>: 'sport tshirt for upper body'<\/span>, bottom<\/span>: 'sport shorts for lower body'<\/span>, background<\/span>: 'gym'<\/span>, type<\/span>: 'sporty'<\/span> },\n    { top<\/span>: 'streetwear shirt for upper body'<\/span>, bottom<\/span>: 'streetwear pants for lower body'<\/span>, background<\/span>: 'street'<\/span>, type<\/span>: 'streetwear'<\/span> },\n    { top<\/span>: 'elegant tuxedo for upper body'<\/span>, bottom<\/span>: 'elegant tuxedo pants for lower body'<\/span>, background<\/span>: 'gala'<\/span>, type<\/span>: 'elegant'<\/span> },\n  ];\n\n  const<\/span> cld = new<\/span> Cloudinary({\n    cloud<\/span>: {\n      cloudName<\/span>: 'YOUR CLOUDINARY CLOUD NAME'<\/span>,\n    },\n  });\n\n  useEffect(()<\/span> =><\/span> {\n    if<\/span> (shouldSubmit && image) {\n      handleSubmit();\n    }\n  }, [shouldSubmit, image]);\n\n  const<\/span> handleImageChange = (e: React.ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n    if<\/span> (e.target.files && e.target.files[0<\/span>]) {\n      setImage(e.target.files[0<\/span>]);\n      setShouldSubmit(true<\/span>);\n    }\n  };\n\n  const<\/span> handleSubmit = async<\/span> () => {\n    setImage(null<\/span>);\n    setImages([]);\n    setLoadingStatus([]);\n    if<\/span> (!image) {\n      alert('Please select an image to upload'<\/span>);\n      setShouldSubmit(false<\/span>);\n      return<\/span>;\n    }\n\n    const<\/span> formData = new<\/span> FormData();\n    formData.append('image'<\/span>, image);\n\n    try<\/span> {\n      setLoading(true<\/span>);\n      const<\/span> response = await<\/span> axios.post('\/api\/generate'<\/span>, formData, {\n        headers<\/span>: {\n          'Content-Type'<\/span>: 'multipart\/form-data'<\/span>,\n        },\n      });\n      const<\/span> image = cld.image(response.data.public_id);\n      image.resize(fill().width(508<\/span>).height(508<\/span>));\n      setImage(image);\n      generateImages(response.data.public_id);\n      setLoading(false<\/span>);\n      setError(''<\/span>); \/\/ Clear any previous error messages<\/span>\n    } catch<\/span> (error) {\n      console<\/span>.error('Error uploading image:'<\/span>, error);\n      setError('Error uploading image: '<\/span> + (error as<\/span> Error<\/span>).message);\n      setLoading(false<\/span>);\n    } finally<\/span> {\n      setShouldSubmit(false<\/span>);\n      setLoading(false<\/span>);\n    }\n  };\n\n  const<\/span> handleImageLoading = (image: CloudinaryImage, index: number, attempts = 0<\/span><\/span>) =><\/span> {\n    const<\/span> url = image.toURL();\n    const<\/span> img = new<\/span> Image();\n    img.src = url;\n\n    img.onload = ()<\/span> =><\/span> {\n      setLoadingStatus((prev<\/span>) =><\/span> {\n        const<\/span> newStatus = [...prev];\n        newStatus[index] = false<\/span>; \/\/ Image has finished loading<\/span>\n        return<\/span> newStatus;\n      });\n    };\n\n    img.onerror = async<\/span> () => {\n      console<\/span>.error(`Error loading image at index ${index}<\/span>, Attempt ${attempts + 1<\/span>}<\/span>`<\/span>);\n\n      \/\/ Check if 423 status was returned (this requires you to use a proxy server or inspect headers)<\/span>\n      const<\/span> response = await<\/span> fetch(url);\n      if<\/span> (response.status === 423<\/span>) {\n        console<\/span>.log(`423 error received. Retrying image load in 5 seconds... (Attempt ${attempts + 1<\/span>}<\/span>)`<\/span>);\n        setTimeout(()<\/span> =><\/span> handleImageLoading(image, index, attempts + 1<\/span>), 5000<\/span>);\n      } else<\/span> {\n        console<\/span>.error('Max retries reached or non-423 error. Image failed to load.'<\/span>);\n        setError('Error loading image. Max retries reached.'<\/span>);\n        setLoadingStatus((prev<\/span>) =><\/span> {\n          const<\/span> newStatus = [...prev];\n          newStatus[index] = false<\/span>; \/\/ Stop spinner even if loading fails<\/span>\n          return<\/span> newStatus;\n        });\n      }\n    };\n  };\n\n  const<\/span> generateImages = (publicId: string<\/span>) =><\/span> {\n    const<\/span> genAIImages: CloudinaryImage[] = [];\n    const<\/span> newLoadingStatus: boolean[] = [];\n\n    styles.forEach((style, index<\/span>) =><\/span> {\n      const<\/span> image = cld.image(publicId);\n      image.effect(generativeReplace().from('shirt'<\/span>).to(style.top));\n      image.effect(generativeReplace().from('pants'<\/span>).to(style.bottom));\n      image.effect(generativeBackgroundReplace());\n      image.effect(generativeRestore());\n      image.resize(fill().width(500<\/span>).height(500<\/span>));\n      genAIImages.push(image);\n      newLoadingStatus.push(true<\/span>); \/\/ Set initial loading status<\/span>\n      handleImageLoading(image, index); \/\/ Start loading image<\/span>\n    });\n\n    setImages(genAIImages);\n    setLoadingStatus(newLoadingStatus);\n  };\n\n  const<\/span> onHandleSelectImage = (index: number<\/span>) =><\/span> {\n    setOpenModal(!openModal);\n    setSelectedImage(index);\n  };\n\n  const<\/span> onHandleChangeItemsColor = ()<\/span> =><\/span> {\n    const<\/span> genAIImagesCopy = [...images];\n    const<\/span> tempImage = genAIImagesCopy[selectedImage];\n\n    \/\/ Show spinner and hide modal<\/span>\n    setLoadingStatus((prev<\/span>) =><\/span> {\n      const<\/span> newStatus = [...prev];\n      newStatus[selectedImage] = true<\/span>; \/\/ Set loading to true for the selected image<\/span>\n      return<\/span> newStatus;\n    });\n    setOpenModal(false<\/span>); \/\/ Close the modal<\/span>\n\n    \/\/ Change color<\/span>\n    tempImage.effect(generativeRecolor(styles[selectedImage][selectedItem], color));\n\n    \/\/ Once done, update state and hide spinner<\/span>\n    setImages(genAIImagesCopy);\n    handleImageLoading(tempImage, selectedImage); \/\/ Trigger reloading of the image<\/span>\n  };\n\n  useEffect(()<\/span> =><\/span> {\n    console<\/span>.log('Updated images array:'<\/span>, images); \/\/ Log after images state is updated<\/span>\n  }, [images]);\n\n  return<\/span> (\n    <div<\/span> className<\/span>=\"app\"<\/span>><\/span>\n      <h1<\/span>><\/span>Fashionista AI<\/h1<\/span>><\/span>\n      <form<\/span> onSubmit<\/span>={(e)<\/span> =><\/span> e.preventDefault()}>\n        <label<\/span> className<\/span>=\"custom-file-upload\"<\/span>><\/span>\n          <input<\/span> type<\/span>=\"file\"<\/span> accept<\/span>=\"image\/*\"<\/span> onChange<\/span>={handleImageChange}<\/span> \/><\/span>\n          Choose File\n        <\/label<\/span>><\/span>\n      <\/form<\/span>><\/span>\n      {loading && <div<\/span> className<\/span>=\"spinner\"<\/span>><\/span><\/div<\/span>><\/span>}\n      {error && <p<\/span> style<\/span>={{<\/span> color:<\/span> 'red<\/span>' }}><\/span>{error}<\/p<\/span>><\/span>}\n      <div<\/span> className<\/span>=\"container\"<\/span>><\/span>\n        {image && !loading && <AdvancedImage<\/span> cldImg<\/span>={image}<\/span> \/><\/span>}\n        <div<\/span> className<\/span>=\"grid-container\"<\/span>><\/span>\n          {images.map((image: CloudinaryImage, index: number) => (\n            <div<\/span> key<\/span>={index}<\/span>><\/span>\n              {loadingStatus[index] ? (\n                <div<\/span> className<\/span>=\"spinner\"<\/span>><\/span><\/div<\/span>><\/span>\n              ) : (\n                <AdvancedImage<\/span> cldImg<\/span>={image}<\/span> onClick<\/span>={()<\/span> =><\/span> onHandleSelectImage(index)} \/>\n              )}\n            <\/div<\/span>><\/span>\n          ))}\n        <\/div<\/span>><\/span>\n      <\/div<\/span>><\/span>\n      {openModal && (\n        <div<\/span> className<\/span>=\"modal-overlay\"<\/span>><\/span>\n          <div<\/span> className<\/span>=\"modal\"<\/span>><\/span>\n            <span<\/span> className<\/span>=\"close-icon\"<\/span> onClick<\/span>={()<\/span> =><\/span> setOpenModal(false)}>\n              &times;<\/span>\n            <\/span<\/span>><\/span>\n            <h2<\/span>><\/span>Pick an Item to Change The Color<\/h2<\/span>><\/span>\n            <label<\/span>><\/span>\n        <input<\/span>\n          type<\/span>=\"radio\"<\/span>\n          value<\/span>=\"top\"<\/span>\n          checked<\/span>={selectedItem<\/span> === 'top'<\/span>}\n          onChange<\/span>={(e)<\/span>=><\/span>setSelectedItem(e.target.value as StyleKeys)}\n        \/>\n        Top\n      <\/label<\/span>><\/span>\n      <label<\/span>><\/span>\n        <input<\/span>\n          type<\/span>=\"radio\"<\/span>\n          value<\/span>=\"bottom\"<\/span>\n          checked<\/span>={selectedItem<\/span> === 'bottom'<\/span>}\n          onChange<\/span>={(e)<\/span>=><\/span>setSelectedItem(e.target.value as StyleKeys)}\n        \/>\n        Bottom\n      <\/label<\/span>><\/span>\n            <input<\/span> type<\/span>=\"color\"<\/span> value<\/span>={color}<\/span> onChange<\/span>={(e)<\/span> =><\/span> setColor(e.target.value)} \/>\n            {color && <button<\/span> onClick<\/span>={onHandleChangeItemsColor}<\/span>><\/span>Change Item Color<\/button<\/span>><\/span>}\n          <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n      )}\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> App;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s explain our frontend code:<\/p>\n\n\n\n
Cloudinary Configuration<\/h4>\n\n\n
const<\/span> cld = new<\/span> Cloudinary({\n    cloud<\/span>: {\n      cloudName<\/span>: 'YOUR CLOUDINARY CLOUD NAME'<\/span>,\n    },\n  });<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
handleImageChange<\/p>\n\n\n
const<\/span> handleImageChange = (e: React.ChangeEvent<HTMLInputElement><\/span>) =><\/span> {\n  if<\/span> (e.target.files && e.target.files[0<\/span>]) {\n    setImage(e.target.files[0<\/span>]);\n    setShouldSubmit(true<\/span>);\n  }\n};\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n