{"id":35515,"date":"2024-09-06T07:00:00","date_gmt":"2024-09-06T14:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=35515"},"modified":"2024-09-06T09:52:58","modified_gmt":"2024-09-06T16:52:58","slug":"create-blog-from-image-ai-react","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/create-blog-from-image-ai-react","title":{"rendered":"How to Create a Blog From an Image Using AI in React"},"content":{"rendered":"\n

This blog post focuses on how to leverage Cloudinary AI<\/a> to enhance your content creation workflow by analyzing image content and generating intelligent image captions. These captions will be passed into the ChatGPT API<\/a> to craft compelling marketing blog posts tailored to the specific vertical of the provided image. We\u2019ll also walk through how to use OpenAI’s text-to-speech<\/a> technology to create an audible version of your blog post, ensuring an engaging content experience for your audience.<\/p>\n\n\n\n

By following this guide, developers will be able to transform static images into dynamic marketing assets that captivate and inform their audience. Let’s explore how combining Cloudinary’s GenAI, ChatGPT, and text-to-speech technologies can revolutionize your marketing strategy.<\/p>\n\n\n\n

This is an example of an output of the app in which I provided the image of a red Ferrari and the app created the following marketing blog post, while also providing the user the ability to listen to the blog post with text-to-speech technology:<\/p>\n\n\n\n

GitHub Repo<\/strong>: Cloudinary-React-Image-to-Blog-AI<\/a><\/p>\n\n\n\n

\"\"<\/figure>\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 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

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

Part 2:<\/strong> Set Up OpenAI<\/h2>\n\n\n\n

Create an OpenAI account<\/h3>\n\n\n\n

To begin, log in to your  OpenAI Platform account or create a free account<\/a>. You\u2019ll be redirected to your OpenAI dashboard.

Now, click your avatar in the top right corner, then click Your Profile<\/strong> and you\u2019ll be redirected to your profile page. <\/p>\n\n\n\n

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

Add Credit to Your OpenAI account<\/h3>\n\n\n\n

Deposit money to start using the OpenAI API<\/strong> or SDK<\/strong>. Even an amount as small as $2-$5 is enough for you to start playing with OpenAI.\u00a0<\/p>\n\n\n\n

Inside the profile page, on the left side navigation, click Billing<\/strong>, then <\/strong>click Add payment details, <\/strong>and enter your bank account information to add credit to your account.<\/p>\n\n\n\n

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

With OpenAI you can set charge limits so you won\u2019t be surprised by an unexpected bill.<\/p>\n\n\n\n

Get API keys<\/h3>\n\n\n\n

Now it\u2019s time to generate an API Key to be used on our back-end server to use OpenAI\u2019s services. To do this, on your left navigation bar, click Your<\/strong>Profile<\/strong>, <\/strong>then click Create new secret key.<\/strong><\/p>\n\n\n\n

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

In the pop-up enter the name you want to give to your API key, I entered chatbot<\/strong>, but you can give any name you want. After entering your API key name, click Create a secret key<\/strong>.<\/p>\n\n\n\n

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

Copy and paste the API key generated into a safe place and click Done<\/strong>.<\/p>\n\n\n\n

Part 3:<\/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 you to do the same. Follow the instructions on Vite\u2019s official website to create a React application.<\/p>\n\n\n\n

Build the Image to Blog UI<\/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> { 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 } from<\/span> '@cloudinary\/url-gen'<\/span>;\nimport<\/span> ReactMarkdown from<\/span> 'react-markdown'<\/span>;\nimport<\/span> AudioPlayer from<\/span> '.\/AudioPlayer'<\/span>;\n\n\nconst<\/span> ImageUpload = ()<\/span> =><\/span> {\n const<\/span> [image, setImage] = useState(null<\/span>);\n const<\/span> [caption, setCaption] = useState(''<\/span>);\n const<\/span> [story, setStory] = useState(''<\/span>);\n const<\/span> [error, setError] = useState(''<\/span>);\n const<\/span> [loading, setLoading] = useState(false<\/span>);\n const<\/span> [shouldSubmit, setShouldSubmit] = useState(false<\/span>);\n const<\/span> cld = new<\/span> Cloudinary({\n   cloud<\/span>: {\n     cloudName<\/span>: 'ai-devx-demo'<\/span>\n   }\n });\n\n\n useEffect(()<\/span> =><\/span> {\n   if<\/span> (shouldSubmit && image) {\n     handleSubmit();\n   }\n }, [shouldSubmit, image]);\n\n\n const<\/span> handleImageChange = (e<\/span>) =><\/span> {\n   if<\/span> (e.target.files[0<\/span>] !== null<\/span>) {\n     setImage(e.target.files[0<\/span>]);\n     setShouldSubmit(true<\/span>);\n   }\n };\n\n\n const<\/span> handleSubmit = async<\/span> () => {\n   if<\/span> (!image) {\n     alert('Please select an image to upload'<\/span>);\n     setShouldSubmit(false<\/span>);\n     return<\/span>;\n   }\n\n\n   const<\/span> formData = new<\/span> FormData();\n   formData.append('image'<\/span>, image);\n\n\n   try<\/span> {\n     setLoading(true<\/span>);\n     const<\/span> response = await<\/span> axios.post('\/api\/caption'<\/span>, formData, {\n       headers<\/span>: {\n         'Content-Type'<\/span>: 'multipart\/form-data'<\/span>,\n       },\n     });\n     setCaption(response.data.caption);\n     setStory(response.data.story.content);\n     const<\/span> myImage = cld.image(response.data.public_id);\n\n\n     \/\/ Resize to 250 x 250 pixels using the 'fill' crop mode.<\/span>\n     myImage.resize(fill().width(500<\/span>).height(500<\/span>));\n     setImage(myImage);\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.message);\n   } finally<\/span> {\n     setShouldSubmit(false<\/span>);\n   }\n };\n\n\n return<\/span> (\n   <div<\/span> className<\/span>=\"app\"<\/span>><\/span>\n     <h1<\/span>><\/span>Image to Blog 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     {image && !loading && <AdvancedImage<\/span> cldImg<\/span>={image}<\/span> alt<\/span>={caption}<\/span> \/><\/span>}\n     {story && (\n       <div<\/span>><\/span>\n         <AudioPlayer<\/span> text<\/span>={story}<\/span> setLoading<\/span>={setLoading}\/<\/span>><\/span>\n         {!loading && <ReactMarkdown<\/span>><\/span>{story}<\/ReactMarkdown<\/span>><\/span>}\n       <\/div<\/span>><\/span>\n     )}\n   <\/div<\/span>><\/span><\/span>\n );\n};\n\n\nexport<\/span> default<\/span> ImageUpload;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s explain our front-end code:

handleImageChange Function:<\/code><\/p>\n\n\n
const<\/span> handleImageChange = (e<\/span>) =><\/span> {\n  if<\/span> (e.target.files[0<\/span>] !== null<\/span>) {\n    setImage(e.target.files[0<\/span>]);\n    setShouldSubmit(true<\/span>);\n  }\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
This function handles the change event when a user selects an image file and checks if the first file in the selected files is not null.<\/p>\n\n\n\n
The e<\/code> <\/strong>parameter is the event object from the input file element. If a file is selected, it sets the state image to the selected file and sets shouldSubmit<\/code> to true.<\/p>\n\n\n\n
handleSubmit Function:\u00a0<\/code><\/p>\n\n\n
const<\/span> handleSubmit = async<\/span> () => {\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\/caption'<\/span>, formData, {\n      headers<\/span>: {\n        'Content-Type'<\/span>: 'multipart\/form-data'<\/span>,\n      },\n    });\n    setCaption(response.data.caption);\n    setStory(response.data.story.content);\n    const<\/span> myImage = cld.image(response.data.public_id);\n\n    \/\/ Resize to 500 x 500 pixels using the 'fill' crop mode.<\/span>\n    myImage.resize(fill().width(500<\/span>).height(500<\/span>));\n    setImage(myImage);\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.message);\n  } finally<\/span> {\n    setShouldSubmit(false<\/span>);\n    setLoading(false<\/span>);\n  }\n};<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s now style the app. In your app, replace the code inside the App.css<\/code> with the code inside this file<\/a>.<\/p>\n\n\n\n
Configure Your React Vite App<\/h3>\n\n\n\n
If you want to easily make a call to your NodeJS backend without using CORS, you can configure your Vite app to proxy the backend endpoints. This step only applies if you created the React app using Vite.\u00a0<\/p>\n\n\n\n
Open your vite.config.js<\/code> file and replace the content with the following code.<\/p>\n\n\n
import<\/span> { defineConfig } from<\/span> 'vite'<\/span>\nimport<\/span> react from<\/span> '@vitejs\/plugin-react'<\/span>\n\nexport<\/span> default<\/span> defineConfig({\n  plugins<\/span>: [react()],\n  server<\/span>: {\n    port<\/span>: 3000<\/span>,\n    proxy<\/span>: {\n      \"\/api\"<\/span>: {\n        target<\/span>: \"http:\/\/localhost:6000\"<\/span>,\n        changeOrigin<\/span>: true<\/span>,\n        secure<\/span>: false<\/span>,\n      },\n    },\n  },\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Part 4: Build the NodeJS App<\/h2>\n\n\n\n
Time to work on the back end. In the root of your React app, create a file called server.js<\/code> file.<\/p>\n\n\n\n
Set Up Your NodeJS Server<\/h3>\n\n\n\n
In the root of the project you have the package.json<\/code>, we will use this same file for our backend. Replace everything that you currently have in the package.json<\/code> copy and paste the content of this file<\/a> into your package.json<\/code>. Create an .env<\/code> file, and enter the following:<\/p>\n\n\n
VITE_CLOUD_NAME=YOUR CLOUDINARY CLOUD NAME\nCLOUDINARY_CLOUD_NAME=YOUR CLOUDINARY CLOUD NAME\nCLOUDINARY_API_KEY=YOUR CLOUDINARY API KEY\nCLOUDINARY_API_SECRET=CLOUDINARY SECRET\nOPENAI_API_KEY=YOUR OPEN AI KEY<\/code><\/span><\/pre>\n\n\n
Replace the string with the OpenAI API Key you generated earlier.<\/p>\n\n\n\n
Copy and paste the following code into your server.js<\/code> file.<\/p>\n\n\n
\/* eslint-disable no-undef *\/<\/span>\nimport<\/span> \"dotenv\/config.js\"<\/span>;\nimport<\/span> express from<\/span> \"express\"<\/span>;\nimport<\/span> cors from<\/span> \"cors\"<\/span>;\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> \"cloudinary\"<\/span>;\nimport<\/span> multer from<\/span> \"multer\"<\/span>;\nimport<\/span> streamifier from<\/span> \"streamifier\"<\/span>;\nimport<\/span> OpenAI from<\/span> \"openai\"<\/span>;\nimport<\/span> path from<\/span> \"path\"<\/span>;\nimport<\/span> { fileURLToPath } from<\/span> \"url\"<\/span>;\nimport<\/span> fs from<\/span> \"fs\/promises\"<\/span>;\n\n\nconst<\/span> openai = new<\/span> OpenAI({\n apiKey<\/span>: process.env.OPENAI_API_KEY,\n});\n\n\nconst<\/span> __filename = fileURLToPath(import<\/span>.meta.url);\nconst<\/span> __dirname = path.dirname(__filename);\n\n\nconst<\/span> app = express();\napp.use(express.json());\napp.use(cors());\n\n\n\/\/ Configure Cloudinary with secure URLs and credentials<\/span>\ncloudinary.config({\n secure<\/span>: true<\/span>,\n cloud_name<\/span>: process.env.CLOUDINARY_CLOUD_NAME,\n api_key<\/span>: process.env.CLOUDINARY_API_KEY,\n api_secret<\/span>: process.env.CLOUDINARY_API_SECRET,\n});\n\n\n\/\/ Configure multer for file upload<\/span>\nconst<\/span> storage = multer.memoryStorage();\nconst<\/span> upload = multer({ storage<\/span>: storage });\n\n\n\/\/ Define a POST endpoint to handle image upload<\/span>\napp.post(\"\/api\/caption\"<\/span>, upload.single(\"image\"<\/span>), (req, res) => {\n if<\/span> (!req.file) {\n   return<\/span> res.status(400<\/span>).json({ error<\/span>: \"Image file is required\"<\/span> });\n }\n\n\n const<\/span> uploadStream = cloudinary.uploader.upload_stream(\n   { detection<\/span>: \"captioning\"<\/span> },\n   async<\/span> (error, result) => {\n     if<\/span> (error) {\n       console<\/span>.error(\"Cloudinary error:\"<\/span>, error);\n       return<\/span> res.status(500<\/span>).json({ error<\/span>: error.message });\n     }\n     const<\/span> story = await<\/span> generateBlog(\n       result.info.detection.captioning.data.caption\n     );\n     const<\/span> resObj = {\n       public_id<\/span>: result.public_id,\n       caption<\/span>: result.info.detection.captioning.data.caption,\n       story,\n     };\n     res.json(resObj);\n   }\n );\n\n\n streamifier.createReadStream(req.file.buffer).pipe(uploadStream);\n});\n\n\napp.post(\"\/api\/generate-audio\"<\/span>, async<\/span> (req, res) => {\n try<\/span> {\n   const<\/span> mp3 = await<\/span> openai.audio.speech.create({\n     model<\/span>: \"tts-1\"<\/span>,\n     voice<\/span>: \"alloy\"<\/span>,\n     input<\/span>: req.body.text,\n   });\n   const<\/span> buffer = Buffer.from(await<\/span> mp3.arrayBuffer());\n   const<\/span> filePath = path.resolve(__dirname, \"public\"<\/span>, \"speech.mp3\"<\/span>);\n   await<\/span> fs.writeFile(filePath, buffer);\n   res.json({ audioUrl<\/span>: `\/speech.mp3`<\/span> });\n } catch<\/span> (error) {\n   console<\/span>.error(\"Error generating audio:\"<\/span>, error);\n   res.status(500<\/span>).json({ error<\/span>: \"Error generating audio\"<\/span> });\n }\n});\n\n\nconst<\/span> generateBlog = async<\/span> (caption) => {\n const<\/span> message = {\n   role<\/span>: \"user\"<\/span>,\n   content<\/span>: `create an 300 world blog post to be used as part of a marketing campaign from a business--\n   the blog must focused on the vertical industry of that image based on the following caption of the image: ${caption}<\/span>.\n    This blog is not for the business but for the person interested in the vetical industry of the image`<\/span>,\n };\n\n\n \/**\n  * Call the OpenAI SDK and get a response\n  *\/<\/span>\n try<\/span> {\n   const<\/span> response = await<\/span> openai.chat.completions.create({\n     model<\/span>: \"gpt-3.5-turbo\"<\/span>,\n     messages<\/span>: [message], \/\/ pass the new message and the previous messages<\/span>\n   });\n   console<\/span>.log(\"open ai response\"<\/span>, response.choices[0<\/span>].message);\n   return<\/span> response.choices[0<\/span>].message;\n } catch<\/span> (error) {\n   console<\/span>.error(error);\n   return<\/span> `error: Internal Server Error`<\/span>;\n }\n};\n\n\napp.use(express.static(path.resolve(__dirname, \"public\"<\/span>)));\nconst<\/span> PORT = 9000<\/span>;\napp.listen(PORT, () => {\n console<\/span>.log(`Server is running on port ${PORT}<\/span>`<\/span>);\n});<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let\u2019s explain the code we have on our server.<\/p>\n\n\n\n
This code sets up an Express server that handles image uploads and generates captions and audio from those images using Cloudinary and OpenAI services. Here\u2019s a detailed explanation:<\/p>\n\n\n\n
Importing Dependencies and Configuration<\/h4>\n\n\n
import<\/span> \"dotenv\/config.js\"<\/span>;\nimport<\/span> express from<\/span> \"express\"<\/span>;\nimport<\/span> cors from<\/span> \"cors\"<\/span>;\nimport<\/span> { v2 as<\/span> cloudinary } from<\/span> \"cloudinary\"<\/span>;\nimport<\/span> multer from<\/span> \"multer\"<\/span>;\nimport<\/span> streamifier from<\/span> \"streamifier\"<\/span>;\nimport<\/span> OpenAI from<\/span> \"openai\"<\/span>;\nimport<\/span> path from<\/span> \"path\"<\/span>;\nimport<\/span> { fileURLToPath } from<\/span> \"url\"<\/span>;\nimport<\/span> fs from<\/span> \"fs\/promises\"<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
What we are doing here is proxying the backend with any path that is \/api<\/code> to be forwarded to the target http:\/\/localhost:6000<\/strong><\/a>, which is the address of your backend server.<\/p>\n\n\n\n
This code ensures that when a user selects an image and submits the form, the image is uploaded to the server by sending a POST request to the endpoint api\/caption<\/code>, on success updates the state with the caption and story received from the server, and the resulting image is resized and displayed back to the user. It uses Cloudinary\u2019s React SDK<\/a> to create an image object with the public ID returned by the server. Resize the image to 500×500 pixels using the fill<\/code> crop mode.<\/p>\n\n\n\n