{"id":28348,"date":"2022-04-06T02:41:14","date_gmt":"2022-04-06T02:41:14","guid":{"rendered":"http:\/\/art-gallery-with-neural-style-transfer-in-nuxt"},"modified":"2022-04-06T02:41:14","modified_gmt":"2022-04-06T02:41:14","slug":"art-gallery-with-neural-style-transfer-in-nuxt","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/","title":{"rendered":"Art Gallery with Neural Style Transfer in NuxtJS"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Ever wished to paint like Michelangelo or Leonardo Da Vinci? &#8211; Now, it is possible using the Neural Style Transfer.\nIn this post, we will be looking at creating a simple art gallery using the Neural style transfer.<\/p>\n<p>The <strong>Neural Style Transfer<\/strong> uses neural networks to transfer and blend the styles from one image (source image) into another image (target image) while still maintaining the content of both images. Primarily, the Neural Style Transfer repaints and transforms the target image in the style of the source image using an intricate network.<\/p>\n<h2>Sandbox<\/h2>\n<p>We completed this project in a <a href=\"https:\/\/codesandbox.io\/s\/neural-style-network-fz2341\">CodeSandbox<\/a>. Fork and run it to quickly get started.<\/p>\n<\/div>\n  \n  <div class=\"wp-block-cloudinary-code-sandbox \">\n    <iframe\n      src=\"https:\/\/codesandbox.io\/embed\/neural-style-network-fz2341?theme=dark&amp;codemirror=1&amp;highlights=&amp;editorsize=50&amp;fontsize=14&amp;expanddevtools=0&amp;hidedevtools=0&amp;eslint=0&amp;forcerefresh=0&amp;hidenavigation=0&amp;initialpath=%2F&amp;module=&amp;moduleview=0&amp;previewwindow=&amp;view=&amp;runonclick=1\"\n      height=\"500\"\n      style=\"width: 100%;\"\n      title=\"Simple art gallery with Neural style transfer in NuxtJS\"\n      loading=\"lazy\"\n      allow=\"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\"\n      sandbox=\"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n    ><\/iframe>\n  <\/div>\n\n  <div class=\"wp-block-cloudinary-markdown \"><h2>Github<\/h2>\n<p>Check out the complete source code <a href=\"https:\/\/github.com\/MoeRayo\/neural-style-transfer\">here<\/a>.<\/p>\n<h2>Prerequisite<\/h2>\n<p>Understanding this article requires the following:<\/p>\n<ul>\n<li>Installation of Node.js.<\/li>\n<li>Basic knowledge of JavaScript.<\/li>\n<li>Familiarity with Nuxt.js<\/li>\n<\/ul>\n<p>Use the <code>npx create-nuxt-app &lt;project-name&gt;<\/code>  to create a new Nuxt project.\nThe process of scaffolding the project should bring a list of options which should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647475183815_ksnip_20220316-130646.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"736\" height=\"285\"\/><\/p>\n<p>After successful project creation, we start our application by running the following command.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">  cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">project<\/span> <span class=\"hljs-attr\">name<\/span>&gt;<\/span>\n  npm run dev\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Nuxt will, in turn, start a hot-reloading development environment which is accessible by default at <a href=\"http:\/\/localhost:4000\">http:\/\/localhost:<\/a><a href=\"http:\/\/localhost:3000\">3000<\/a><\/p>\n<h2>Cloudinary Setup<\/h2>\n<p>We can achieve the Neural Style Transfer in our Nuxt application using <a href=\"https:\/\/cloudinary.com\/\">Cloudinary<\/a>, a cloud-based service that provides solutions for asset management (images, videos).\nTo use Cloudinary, we will need to create an <a href=\"https:\/\/cloudinary.com\/\">account<\/a> and also install the <a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary Nuxt SDK<\/a>, like so: <code>npm install @nuxtjs\/cloudinary<\/code><\/p>\n<p>Cloudinary uses the <strong>Neural Artwork Style Transfer add-on<\/strong> ****to perform the Neural Style Transfer. Click on the <strong>Add-ons<\/strong> tab to access the add-on page.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647528767965_Screenshot+2022-03-17+at+15-50-23+Cloudinary+Management+Console+-+Add-ons.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"830\" height=\"47\"\/><\/p>\n<p>The <strong>Add-ons<\/strong> page has several add-ons from which we can pick our desired add-on, in this case, the Neural Artwork Style Transfer add-on:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647528792966_ksnip_20220317-155210.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"720\" height=\"152\"\/><\/p>\n<h2>Configuring <code>nuxt.config<\/code> for Cloudinary<\/h2>\n<p>We need to configure our Nuxt application in the <code>nuxt.config<\/code> file before we can use Cloudinary.\nTo do this, we will need to do the following:<\/p>\n<ol>\n<li>Create a <code>.env<\/code> file in the root of our project and add our Cloudinary <strong>Cloud name<\/strong>, <strong>API Key<\/strong>, and the <strong>API Secret<\/strong>. We can find these by navigating to the <a href=\"https:\/\/cloudinary.com\/console\/\">Cloudinary dashboard<\/a>.<\/li>\n<li>Register these properties in our <code>.env<\/code> file like so:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    cloudName=<span class=\"hljs-string\">'***'<\/span>\n    apiKey=<span class=\"hljs-string\">'***'<\/span>\n    apiSecret=<span class=\"hljs-string\">'***'<\/span>   \n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"3\">\n<li>Register Cloudinary component for global use in the <code>nuxt.config<\/code> file by adding <code>'@nuxtjs\/cloudinary'<\/code> in the <code>modules<\/code> section.<\/li>\n<li>Add a <code>cloudinary<\/code> section in the <code>nuxt.config<\/code> like so:<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css shcb-wrap-lines\">    <span class=\"hljs-selector-tag\">cloudinary<\/span>: {\n      <span class=\"hljs-attribute\">cloudName<\/span>: process.env.cloudName,\n      apiKey: process.env.apiKey,\n      apiSecret: process.env.apiSecret,\n      useComponent: true,\n    },\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p><strong>NB<\/strong>: <em>Endeavor to replace all occurrences of \u201c<\/em>**<em>\u201c with the correct values.<\/em><\/p>\n<p>Voila! We are ready to start building and using our Cloudinary components in our project.<\/p>\n<h2>Uploading Images to Cloudinary<\/h2>\n<p>With our Nuxt app scaffolding completed, we\u2019ll start by uploading <a href=\"https:\/\/res.cloudinary.com\/moerayo\/raw\/upload\/v1647525741\/neural-style-transfer-images.zip\">sixteen images<\/a> from <a href=\"https:\/\/unsplash.com\/\">Unsplash<\/a> to Cloudinary.<\/p>\n<p>Cloudinary allows us to upload images via the dashboard by clicking the <strong>Media Library<\/strong> tab.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647525997500_Screenshot+2022-03-17+at+15-03-39+Cloudinary+Management+Console+-+Media+Library.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"889\" height=\"46\"\/><\/p>\n<p>After uploading the images, we will need to copy the <code>public Id<\/code> as this is required to pick each uploaded image from Cloudinary.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647526229759_Screenshot+2022-03-17+at+15-08-38+Cloudinary+Management+Console+-+Media+Library.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"791\" height=\"258\"\/><\/p>\n<h2>Setting Up the Image Store<\/h2>\n<p>We will need to call our images from the Nuxt application by creating a <code>utils<\/code> folder at the root of our application. We will create an <code>images.json<\/code>  file within this folder to hold the individual image information for each image occurrence in our application.<\/p>\n<p>A sample snippet of our <code>images.json<\/code>  file should look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"JSON \/ JSON with Comments\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\">    &#91;\n      {\n        <span class=\"hljs-attr\">\"id\"<\/span>: <span class=\"hljs-number\">1<\/span>,\n        <span class=\"hljs-attr\">\"publicId\"<\/span>: <span class=\"hljs-string\">\"rita-burza-unsplash\"<\/span>,\n        <span class=\"hljs-attr\">\"overlay\"<\/span>: <span class=\"hljs-string\">\"micheile-visual-stories-unsplash\"<\/span>\n      },\n    ]\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JSON \/ JSON with Comments<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<h2>Building the Project<\/h2>\n<p>Setting up and configuring Cloudinary for usage in our application means we can now use Cloudinary\u2019s <code>cld-image<\/code> and <code>cld-transformation<\/code> component in our application like we would use the native <code>&lt;img&gt;<\/code> tag in an HTML document.<\/p>\n<p>As a result, we will create a <code>Gallery.vue<\/code> file in our <code>components<\/code> folder. This file will contain all the code needed for the art gallery, which will result from neural style transfer for this tutorial.<\/p>\n<p>To show the result in our browser view, we will need to import the <code>Gallery.vue<\/code> component into our <code>pages\/index.vue<\/code> like so:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"ph3\"<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">Gallery<\/span> \/&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Cloudinary provides for style transfer using different transformation properties attached to the component.\nThe required setup for neural style transfer in Cloudinary is:<\/p>\n<ul>\n<li>\n<strong>The target image:<\/strong> The image we would use as the base for the styles to get transferred to<\/li>\n<li>\n<strong>The source image:<\/strong> The image we intend to transfer its style to the target image.<\/li>\n<li>\n<strong>The input image:<\/strong> The repainted generated image which is a blend of both the target and the source image<\/li>\n<\/ul>\n<p>The <code>public-id<\/code> will represent the <strong>target<\/strong> image, while our <code>overlay<\/code> will be the <strong>source<\/strong> image. We will also need to specify the overlay effect which is denoted as <code>style_transfer<\/code>  in the <code>Gallery.vue<\/code> component.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">v-for<\/span>=<span class=\"hljs-string\">\"image in images\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"image.id\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"fl w-50 w-25-l pa1 overflow-hidden\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-image<\/span> <span class=\"hljs-attr\">:public-id<\/span>=<span class=\"hljs-string\">\"image.publicId\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"grow\"<\/span> <span class=\"hljs-attr\">sign-url<\/span>=<span class=\"hljs-string\">\"true\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">height<\/span>=<span class=\"hljs-string\">\"750\"<\/span> <span class=\"hljs-attr\">width<\/span>=<span class=\"hljs-string\">\"750\"<\/span> <span class=\"hljs-attr\">crop<\/span>=<span class=\"hljs-string\">\"crop\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">:overlay<\/span>=<span class=\"hljs-string\">\"image.overlay\"<\/span> \/&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">cld-transformation<\/span> <span class=\"hljs-attr\">effect<\/span>=<span class=\"hljs-string\">\"style_transfer\"<\/span> <span class=\"hljs-attr\">flags<\/span>=<span class=\"hljs-string\">\"layer_apply\"<\/span> \/&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">cld-image<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n    <span class=\"hljs-keyword\">import<\/span> images <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">\"~\/utils\/images.json\"<\/span>;\n    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      data() {\n        <span class=\"hljs-keyword\">return<\/span> {\n          images\n        }\n      }\n    }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>The snippet above renders the images from the <code>images.json<\/code> by looping through each dataset using <code>v-for<\/code>.\nThe <code>public-id<\/code> is then set to the value of the <code>publicId<\/code> in our <code>json<\/code> file. Consequently, the overlay props in the <code>cld-transformation<\/code> are also set to the value of the <code>overlay<\/code> in our <code>json<\/code> file.<\/p>\n<p>Cloudinary transformations are pretty powerful and may prove costly if others access unaccounted URLs that apply the neural art style or other forms of image transformations. Hence, our URL is needed to be signed by Cloudinary\u2019s authenticated API.<\/p>\n<p>As seen in the code snippet above, we can sign our Cloudinary URL by setting the <code>sign_url<\/code> props to true.<\/p>\n<p>At this point, our result should look like this:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_AE2D8EBC7F7B764250D4FC144A52886FC78E7CD67C7BF49954B830D97C4A12F7_1647530218016_1Screenshot+2022-03-16+at+18-56-08+neural-style-transfer.png\" alt=\"\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1907\" height=\"1113\"\/><\/p>\n<p>From the screenshot above, we can see the images have transformed. The styles from the source image get imprinted on the target image. We have a new painting that combines two paintings whose content is still intact.<\/p>\n<h2>Conclusion<\/h2>\n<p>This post explains how to build an art gallery in Nuxt with the Neural style transfer using Cloudinary transformations.<\/p>\n<h2>References<\/h2>\n<ul>\n<li>\n<a href=\"https:\/\/en.wikipedia.org\/wiki\/Neural_style_transfer\">Wikipedia &#8211; Neural style transfer<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/cloudinary.nuxtjs.org\/\">Cloudinary-nuxt<\/a>\n<\/li>\n<\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":28349,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,372,371],"class_list":["post-28348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-nuxtjs","tag-under-review"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Art Gallery with Neural Style Transfer in NuxtJS<\/title>\n<meta name=\"description\" content=\"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Art Gallery with Neural Style Transfer in NuxtJS\" \/>\n<meta property=\"og:description\" content=\"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-06T02:41:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"886\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Art Gallery with Neural Style Transfer in NuxtJS\",\"datePublished\":\"2022-04-06T02:41:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\"},\"wordCount\":8,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"NuxtJS\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\",\"name\":\"Art Gallery with Neural Style Transfer in NuxtJS\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA\",\"datePublished\":\"2022-04-06T02:41:14+00:00\",\"description\":\"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA\",\"width\":886,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Art Gallery with Neural Style Transfer in NuxtJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Art Gallery with Neural Style Transfer in NuxtJS","description":"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/","og_locale":"en_US","og_type":"article","og_title":"Art Gallery with Neural Style Transfer in NuxtJS","og_description":"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-04-06T02:41:14+00:00","og_image":[{"width":886,"height":550,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","type":"image\/png"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/"},"author":{"name":"","@id":""},"headline":"Art Gallery with Neural Style Transfer in NuxtJS","datePublished":"2022-04-06T02:41:14+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/"},"wordCount":8,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","keywords":["Guest Post","Image","NuxtJS","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/","name":"Art Gallery with Neural Style Transfer in NuxtJS","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","datePublished":"2022-04-06T02:41:14+00:00","description":"Learn how to create art images using neural artwork style transfer and Cloudinary transformations.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","width":886,"height":550},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/art-gallery-with-neural-style-transfer-in-nuxt\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Art Gallery with Neural Style Transfer in NuxtJS"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681924733\/Web_Assets\/blog\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd\/6e9b61a599514e4afe1491a19e1032ac032f002e-886x550-1_28349a9dfd.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28348"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28348\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28349"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}