{"id":32011,"date":"2023-12-07T03:00:00","date_gmt":"2023-12-07T11:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32011"},"modified":"2025-04-16T12:51:00","modified_gmt":"2025-04-16T19:51:00","slug":"how-we-built-generative-ai-playground","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground","title":{"rendered":"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity"},"content":{"rendered":"\n<p>Six weeks, or a little over 1,000 hours (1,008 to be exact). That\u2019s how long we gave ourselves to create a generative AI playground at <a href=\"http:\/\/ai.cloudinary.com\" target=\"_blank\" rel=\"noreferrer noopener\">ai.cloudinary.com<\/a>.<\/p>\n\n\n\n<p>Which begs the question, why the rush?&nbsp;<\/p>\n\n\n\n<p>First, we want to provide those interested with one place to confirm the power of our AI features ASAP. Second, Cloudinary has always been at the forefront of using AI for image classification, editing, and transformation; what better way to demonstrate this fact than to get them out into the wild quickly? And third, we wanted to underscore Cloudinary&#8217;s remarkable ability to expedite content creation.&nbsp;<\/p>\n\n\n\n<p>The result? A user-friendly, on-brand, <a href=\"https:\/\/cloudinary.com\/documentation\/user_generated_content\">user-generated content<\/a> (UGC) demo site that transitioned from a concept to a fully operational platform.&nbsp;<\/p>\n\n\n\n<p>Let&#8217;s delve into how we pulled it off.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">First Things First: Defining Requirements<\/h2>\n\n\n\n<p>Every web development project starts with defining requirements. Although we knew Cloudinary&#8217;s tools and widgets could address some of our needs, we wanted a solid roadmap. Here&#8217;s what we established:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>A single source of truth<\/strong>. We needed a central repository for all media used by the site: user uploads and site files.<\/li>\n\n\n\n<li><strong>Choose\/upload an image<\/strong>. We aimed to offer users the flexibility to use predefined sample images or upload their own.<\/li>\n\n\n\n<li><strong>Moderate\/normalize\/categorize on upload<\/strong>. Uploaded content had to undergo normalization, moderation, and categorization.<\/li>\n\n\n\n<li><strong>Transform images on the fly<\/strong>. We wanted users to be able apply real-time transformations to images using our generative AI features, including fill, replace, remove, and recolor.<\/li>\n\n\n\n<li><strong>Tracking transformations<\/strong>. We needed a custom tracking system to monitor the transformations applied to the images.<\/li>\n<\/ol>\n\n\n\n<p>It&#8217;s important to note that this list doesn&#8217;t encompass design and content requirements, which our Corporate Marketing team skillfully handled.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Deciding on a Framework<\/h2>\n\n\n\n<p>Outside of these requirements, we needed to decide on how to build the actual site. Selecting the proper framework sets the stage for the success of any web development project. We chose Next.js 13.<\/p>\n\n\n\n<p>Here&#8217;s why:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Flexible and powerful<\/strong>.<strong> <\/strong>Next.js is a robust next-generation JavaScript framework built on the sturdy base of React.<\/li>\n\n\n\n<li><strong>Seamless integration<\/strong>.<strong> <\/strong>Cloudinary easily integrates with React and Next.js, streamlining our development process.<\/li>\n\n\n\n<li><strong>Ease of deployment<\/strong>.<strong> <\/strong>Next.js effortlessly deploys to renowned hosting solutions like Netlify and Vercel, ensuring a smooth deployment process.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Using Cloudinary Features to Achieve These Requirements<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">A Single Source of Truth<\/h3>\n\n\n\n<p>Establishing a centralized hub for our media assets was an effortless task, thanks to Cloudinary&#8217;s Programmable Media and Assets. Using these tools we devised a custom taxonomy tailored to our site&#8217;s file organization. Storing sample images was as simple as using <a href=\"https:\/\/cloudinary.com\/products\/digital_asset_management\">Cloudinary Assets<\/a>. We organized dedicated folders for each demo to keep the uploads and sample images separate.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/generative-ai-demos\/image\/upload\/v1701458803\/website_assets\/misc\/Group_64_wkywaa.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Uploading Images<\/h3>\n\n\n\n<p>The uploading of images was streamlined by integrating our upload widget alongside Director of Developer Experience Engineering <a href=\"https:\/\/next.cloudinary.dev\/\">Colby Fayock&#8217;s Next.js\/Cloudinary plugin<\/a>. Colby\u2019s plugin simplified the integration of the robust upload widget with Next.js websites, requiring minimal coding, and offering prebuilt components.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/generative-ai-demos\/image\/upload\/v1701455994\/website_assets\/misc\/screenshot_upload.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Moderate\/Normalize\/Categorize on Upload<\/h3>\n\n\n\n<p>In an environment centered on UGC, Cloudinary provided various tools to streamline content management.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Normalization<\/strong>. Cloudinary offered a straightforward solution for normalizing uploaded content. We used incoming transformations to crop and scale incoming images to ensure a unified experience and faster loading times.<\/li>\n\n\n\n<li><strong>Moderation<\/strong>. We seamlessly implemented AWS Rekognition content moderation to ensure all uploads didn\u2019t violate our terms and conditions and did not include anything inappropriate.<\/li>\n\n\n\n<li><strong>Categorization<\/strong>. Cloudinary&#8217;s tools facilitated the efficient categorization of content, ensuring a well-organized repository. AWS Rekognition auto-tagging came in handy here.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Creating Transformations on the Fly<\/h3>\n\n\n\n<p>All the transformations displayed in our demos were generated through Cloudinary&#8217;s Programmable Media. When users entered their prompts in the user interface, the site&#8217;s logic translated the input into parameters that could be used with Cloudinary. Programmable Media&#8217;s transformation API delivered these images upon request. The resulting URLs were also presented to users, providing a real-time display of the transformations.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/generative-ai-demos\/image\/upload\/v1701457062\/website_assets\/misc\/screenshot-code.png\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Tracking Transformations<\/h3>\n\n\n\n<p>We track web traffic with Google Analytics, but we also wanted to track some custom information, such as daily transformation counts broken out by feature and moderation status. To achieve this, we created a custom integration with Zapier, which writes all the transformation data to a custom datastore in Google Cloud. We also send a record of each to a custom channel on our internal Slack. Zapier is an excellent tool for automating these features, so naturally, <a href=\"https:\/\/cloudinary.com\/blog\/introducing_cloudinary_zapier_integration_optimize_manage_and_deliver_media_assets\" target=\"_blank\" rel=\"noreferrer noopener\">Cloudinary has a Zapier integration<\/a> that\u2019s worth checking out.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>In under six weeks, Cloudinary played a pivotal role in helping us construct this demo site, a timeline encompassing wireframing, design, and rigorous testing. We swiftly brought this site to life by leveraging our great tools, including the Cloudy\/Next plugin and our efficient upload widget. Within a short span, we&#8217;re witnessing hundreds of transformations submitted daily by users. We invite you to explore our Generative AI at <a href=\"http:\/\/ai.cloudinary.com\" target=\"_blank\" rel=\"noreferrer noopener\">ai.cloudinary.com<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Six weeks, or a little over 1,000 hours (1,008 to be exact). That\u2019s how long we gave ourselves to create a generative AI playground at ai.cloudinary.com. Which begs the question, why the rush?&nbsp; First, we want to provide those interested with one place to confirm the power of our AI features ASAP. Second, Cloudinary has [&hellip;]<\/p>\n","protected":false},"author":87,"featured_media":32043,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[409,165],"class_list":["post-32011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-generative-ai","tag-image-transformation"],"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>Building the Generative AI Playground with Cloudinary: A Web Development Journey<\/title>\n<meta name=\"description\" content=\"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary&#039;s AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.\" \/>\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\/how-we-built-generative-ai-playground\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity\" \/>\n<meta property=\"og:description\" content=\"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary&#039;s AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-12-07T11:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-16T19:51:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog-png?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\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\/how-we-built-generative-ai-playground#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity\",\"datePublished\":\"2023-12-07T11:00:00+00:00\",\"dateModified\":\"2025-04-16T19:51:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\"},\"wordCount\":841,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA\",\"keywords\":[\"Generative AI\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\",\"url\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\",\"name\":\"Building the Generative AI Playground with Cloudinary: A Web Development Journey\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA\",\"datePublished\":\"2023-12-07T11:00:00+00:00\",\"dateModified\":\"2025-04-16T19:51:00+00:00\",\"description\":\"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary's AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity\"}]},{\"@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\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building the Generative AI Playground with Cloudinary: A Web Development Journey","description":"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary's AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.","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\/how-we-built-generative-ai-playground","og_locale":"en_US","og_type":"article","og_title":"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity","og_description":"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary's AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.","og_url":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground","og_site_name":"Cloudinary Blog","article_published_time":"2023-12-07T11:00:00+00:00","article_modified_time":"2025-04-16T19:51:00+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog-png?_i=AA","type":"image\/png"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity","datePublished":"2023-12-07T11:00:00+00:00","dateModified":"2025-04-16T19:51:00+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground"},"wordCount":841,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA","keywords":["Generative AI","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground","url":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground","name":"Building the Generative AI Playground with Cloudinary: A Web Development Journey","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA","datePublished":"2023-12-07T11:00:00+00:00","dateModified":"2025-04-16T19:51:00+00:00","description":"Developed in just six weeks, the Generative AI Playground at ai.cloudinary.com is here. This article reviews the web development process where Cloudinary's AI and media management features met requirements, from centralizing assets to real-time image transformations, unleashing the power of Next.js 13.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/how-we-built-generative-ai-playground#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How We Built the Generative AI Playground With Cloudinary: Web Development Meets Content Velocity"}]},{"@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":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1701837512\/AI-Demos_How-we-built-it_Blog\/AI-Demos_How-we-built-it_Blog.png?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32011","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\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=32011"}],"version-history":[{"count":5,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32011\/revisions"}],"predecessor-version":[{"id":37439,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32011\/revisions\/37439"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32043"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}