{"id":32632,"date":"2024-01-16T07:00:00","date_gmt":"2024-01-16T15:00:00","guid":{"rendered":"https:\/\/cloudinary.com\/blog\/?p=32632"},"modified":"2026-03-11T00:12:56","modified_gmt":"2026-03-11T07:12:56","slug":"leveraging-cloudinary-flask-creating-interactive-image-platform","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform","title":{"rendered":"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Manipulating images dynamically within web applications unlocks the potential for creative possibilities. By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications. Let\u2019s take a closer look at how this sample application brings together various elements and implements a dynamic image handling system using Flask and Cloudinary.<\/p>\n<p>In this blog post, we\u2019ll walk through:<\/p>\n<ul>\n<li>Uploading an image from your computer to your Cloudinary account.<\/li>\n<li>Applying an upload preset with auto tagging and <a href=\"https:\/\/cloudinary.com\/documentation\/transformations_on_upload\">eager transformation<\/a> to the uploaded image.<\/li>\n<li>Changing the color of an item within a displayed image.<\/li>\n<li>Deleting the image from your Cloudinary account.<\/li>\n<\/ul>\n<h2>Getting Started<\/h2>\n<ol>\n<li>\n<p>If you haven\u2019t yet done so, sign up for Cloudinary <a href=\"https:\/\/cloudinary.com\/users\/register_free\">here<\/a>.<\/p>\n<\/li>\n<li>\n<p>Install Cloudinary and other packages:<\/p>\n<\/li>\n<\/ol>\n<pre class=\"js-syntax-highlighted\"><span><code class=\"hljs shcb-wrap-lines\">pip install flask\npip install dotenv\npip install cloudinary\n<\/code><\/span><\/pre>\n<ol start=\"3\">\n<li>Configure Cloudinary<\/li>\n<\/ol>\n<ul>\n<li>In your project, create a file called <code>.env<\/code> containing your <strong>API environment variable<\/strong> from your <a href=\"https:\/\/console.cloudinary.com\/console\/c-9065aad26e24cc486a496686fa6454\/\">product environment credentials<\/a>:<\/li>\n<\/ul>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\"><span class=\"hljs-comment\"># Copy and paste your API environment variable<\/span>\n<span class=\"hljs-comment\"># =============================================<\/span>\nCLOUDINARY_URL=cloudinary:<span class=\"hljs-comment\">\/\/&lt;api_key&gt;:&lt;api_secret&gt;@&lt;cloud_name&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<ol start=\"4\">\n<li>In your project, create a new file called <code>app.py<\/code>, then copy and paste the following into this file to configure Cloudinary for the project:<\/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\"><span class=\"hljs-keyword\">from<\/span> flask <span class=\"hljs-keyword\">import<\/span> Flask, render_template, request\n<span class=\"hljs-keyword\">from<\/span> dotenv <span class=\"hljs-keyword\">import<\/span> load_dotenv\n\n<span class=\"hljs-keyword\">import<\/span> cloudinary\n<span class=\"hljs-keyword\">import<\/span> cloudinary.uploader\n<span class=\"hljs-keyword\">import<\/span> cloudinary.api\n\nload_dotenv()\napp = Flask(__name__)\nconfig = cloudinary.config(secure=True)\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=\"5\">\n<li>To get tags for the uploaded image in this example, we\u2019ll use Amazon Rekognition Auto Tagging. You can subscribe to it in your <a href=\"https:\/\/console.cloudinary.com\/settings\/c-9065aad26e24cc486a496686fa6454\/addons\">Add-ons menu<\/a>.<\/li>\n<li>Create a folder in your Media Library <a href=\"https:\/\/console.cloudinary.com\/settings\/c-9065aad26e24cc486a496686fa6454\/addons\">here<\/a> and <a href=\"https:\/\/console.cloudinary.com\/console\/c-9065aad26e24cc486a496686fa6454\/media_library\/folders\/home?view_mode=mosaic\">here<\/a>, where you\u2019ll upload your images. For this example, we\u2019ll call this folder \u201cpython_examples\u201d.<\/li>\n<li>\n<a href=\"https:\/\/console.cloudinary.com\/settings\/c-9065aad26e24cc486a496686fa6454\/upload_presets\/new\">Create an upload preset<\/a> with the following settings:<\/li>\n<\/ol>\n<ul>\n<li>Choose any name you prefer for the preset (in this example, it\u2019s called \u201cpython\u201d).<\/li>\n<li>Add the name of the folder you just created in Step 6, under <strong>Folder<\/strong>.<\/li>\n<li>Turn <strong>Use filename or externally defined Public ID<\/strong> to <strong>ON<\/strong>.<\/li>\n<li>Navigate to <strong>Media analysis and AI<\/strong> and under <strong>Categorization<\/strong>, check the box for <strong>Amazon Rekognition Auto Tagging<\/strong>.<\/li>\n<li>Save the upload preset.<\/li>\n<\/ul>\n<h2>Reviewing the Code<\/h2>\n<p>In the upcoming sections, we\u2019ll review the code snippets and explore their respective functions.<\/p>\n<h3>Uploading the Image<\/h3>\n<p>In the following code, we\u2019ll upload an image from our computer to our Cloudinary account.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">@app.route(<span class=\"hljs-string\">'\/'<\/span>, methods=&#91;<span class=\"hljs-string\">'GET'<\/span>, <span class=\"hljs-string\">'POST'<\/span>])\ndef upload_file():\n    <span class=\"hljs-keyword\">if<\/span> request.method == <span class=\"hljs-string\">'POST'<\/span>:\n        file = request.files&#91;<span class=\"hljs-string\">'file'<\/span>]\n        \n        <span class=\"hljs-keyword\">if<\/span> file:\n            response=cloudinary.uploader.upload(file, \n                                 upload_preset = <span class=\"hljs-string\">\"python\"<\/span>,\n                                 unique_filename = <span class=\"hljs-keyword\">True<\/span>, \n                                 overwrite=<span class=\"hljs-keyword\">True<\/span>,\n                                 eager=&#91;{<span class=\"hljs-string\">\"width\"<\/span>: <span class=\"hljs-number\">500<\/span>, <span class=\"hljs-string\">\"crop\"<\/span>: <span class=\"hljs-string\">\"fill\"<\/span>}])\n\n            image_url = response&#91;<span class=\"hljs-string\">'eager'<\/span>]&#91;<span class=\"hljs-number\">0<\/span>]&#91;<span class=\"hljs-string\">'secure_url'<\/span>]\n            tags = response&#91;<span class=\"hljs-string\">'info'<\/span>]&#91;<span class=\"hljs-string\">'categorization'<\/span>]&#91;<span class=\"hljs-string\">'aws_rek_tagging'<\/span>]&#91;<span class=\"hljs-string\">'data'<\/span>]&#91;:<span class=\"hljs-number\">3<\/span>]\n\n            <span class=\"hljs-keyword\">return<\/span> render_template(<span class=\"hljs-string\">'index.html'<\/span>, image_url=image_url, tags=tags)\n\n    <span class=\"hljs-keyword\">return<\/span> render_template(<span class=\"hljs-string\">'index.html'<\/span>)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Using Cloudinary\u2019s upload method, we can define some settings for uploading files. In this example, we\u2019ll use the upload preset that we created in the previous step, in order to apply Rekognition Auto Tagging and to upload to the defined folder.<\/p>\n<p>We\u2019ll also apply an eager transformation to the uploaded image that defines that the image has to be cropped to fill a 500 pixels wide square.<\/p>\n<p>In the <code>image_url<\/code> variable, we\u2019ll get the URL of the uploaded image, and in the <code>tags<\/code> variable it  will list the top three tags for us that we can display on the site.<\/p>\n<h3>Recoloring the Image With AI<\/h3>\n<p>The next section of the code, we can leverage the Generative Recolor feature.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">@app.route(<span class=\"hljs-string\">'\/recolor'<\/span>, methods=&#91;<span class=\"hljs-string\">'POST'<\/span>])\ndef recolor():\n    <span class=\"hljs-keyword\">if<\/span> request.method == <span class=\"hljs-string\">'POST'<\/span>:\n        image_url = request.form.get(<span class=\"hljs-string\">'image_url'<\/span>)\n        public_id = <span class=\"hljs-string\">\"\/\"<\/span>.join(image_url.split(<span class=\"hljs-string\">'\/'<\/span>)&#91;<span class=\"hljs-number\">-2<\/span>:])&#91;:<span class=\"hljs-number\">-4<\/span>]\n        color = request.form&#91;<span class=\"hljs-string\">'color'<\/span>]\n        color_for_url = color&#91;<span class=\"hljs-number\">1<\/span>:]\n        chosen_object = request.form&#91;<span class=\"hljs-string\">'object'<\/span>]\n        transformation = f<span class=\"hljs-string\">\"gen_recolor:prompt_{chosen_object};to-color_{color_for_url}\/c_fill,w_500\"<\/span>\n        \n        recolor_url = cloudinary.utils.cloudinary_url(public_id, effect=transformation)&#91;<span class=\"hljs-number\">0<\/span>]\n        \n        response = cloudinary.api.resource(public_id, tags=<span class=\"hljs-keyword\">True<\/span>)\n        tags = response&#91;<span class=\"hljs-string\">'info'<\/span>]&#91;<span class=\"hljs-string\">'categorization'<\/span>]&#91;<span class=\"hljs-string\">'aws_rek_tagging'<\/span>]&#91;<span class=\"hljs-string\">'data'<\/span>]&#91;:<span class=\"hljs-number\">3<\/span>]\n\n        <span class=\"hljs-keyword\">return<\/span> render_template (<span class=\"hljs-string\">'index.html'<\/span>, recolor_url=recolor_url, image_url=image_url, tags=tags)\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To generate an image URL that has the recolor capabilities, we first have to define what we want to recolor on our image. We\u2019ll grab that information from the user via the <code>chosen_object<\/code> variable. We\u2019ll also need the color that we plan to apply to the image. This is provided via a <a href=\"https:\/\/cloudinary.com\/tools\/color-picker\">color picker<\/a> input field from the user, and the <code>color_for_url<\/code> is trimming the # symbol from the color hex code to make it work in the URL forming.<\/p>\n<p>After identifying both the object and color, we\u2019ll have to reconstruct the URL with the given syntax in the <code>transformation<\/code> variable.<\/p>\n<h3>Deleting the Image<\/h3>\n<p>The uploaded image could be removed from your Cloudinary account with the following code:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">@app.route(<span class=\"hljs-string\">'\/delete'<\/span>, methods=&#91;<span class=\"hljs-string\">'POST'<\/span>])\ndef delete_image():\n    <span class=\"hljs-keyword\">if<\/span> request.method == <span class=\"hljs-string\">'POST'<\/span>:\n        image_url = request.form.get(<span class=\"hljs-string\">'image_url'<\/span>)\n        public_id = <span class=\"hljs-string\">\"\/\"<\/span>.join(image_url.split(<span class=\"hljs-string\">'\/'<\/span>)&#91;<span class=\"hljs-number\">-2<\/span>:])&#91;:<span class=\"hljs-number\">-4<\/span>]\n        result = cloudinary.uploader.destroy(public_id)\n        <span class=\"hljs-keyword\">return<\/span> render_template (<span class=\"hljs-string\">'index.html'<\/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\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>To delete an image, we\u2019ll need the public ID of the image, and the folder as well, where the image is stored. The code above grabs the URL and extracts the folder and image ID from the end of the URL.<\/p>\n<p>Running this code simply removes the uploaded file from our Media Library.<\/p>\n<h2>Conclusion<\/h2>\n<p>This example app showcases several of Cloudinary\u2019s image management capabilities. The upload was done purely with Python; however, you can also use <a href=\"https:\/\/cloudinary.com\/documentation\/upload_widget\">Cloudinary\u2019s Upload Widget<\/a> to customize and expand the uploading possibilities. While we use the <strong>Rekognition Auto Tagging<\/strong> feature here, there are other <a href=\"https:\/\/cloudinary.com\/addons\">add-ons<\/a> and <a href=\"https:\/\/ai.cloudinary.com\">AI features<\/a> to boost your productivity and engagement with images and videos.<\/p>\n<p>You can find the full app in <a href=\"https:\/\/github.com\/kemeb\/cloudinary-flask-image\">this<\/a> GitHub repo. Fork it and apply more of your own transformation to unleash the full potential of your media.<\/p>\n<p>If you found this article helpful and want to discuss it in more detail, head over to <a href=\"https:\/\/community.cloudinary.com\/\">Cloudinary Community forum<\/a> and its associated <a href=\"https:\/\/discord.com\/invite\/cloudinary\">Discord<\/a>.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":32652,"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,373],"class_list":["post-32632","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-generative-ai","tag-image-transformation","tag-upload"],"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>How-to: Interactive Image Platform Using Flask and Cloudinary<\/title>\n<meta name=\"description\" content=\"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.\" \/>\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\/leveraging-cloudinary-flask-creating-interactive-image-platform\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform\" \/>\n<meta property=\"og:description\" content=\"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-16T15:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-11T07:12:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_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\/jpeg\" \/>\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\/leveraging-cloudinary-flask-creating-interactive-image-platform#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform\",\"datePublished\":\"2024-01-16T15:00:00+00:00\",\"dateModified\":\"2026-03-11T07:12:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA\",\"keywords\":[\"Generative AI\",\"Image Transformation\",\"Upload\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\",\"url\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\",\"name\":\"How-to: Interactive Image Platform Using Flask and Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA\",\"datePublished\":\"2024-01-16T15:00:00+00:00\",\"dateModified\":\"2026-03-11T07:12:56+00:00\",\"description\":\"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA\",\"width\":2000,\"height\":1100},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform\"}]},{\"@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":"How-to: Interactive Image Platform Using Flask and Cloudinary","description":"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.","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\/leveraging-cloudinary-flask-creating-interactive-image-platform","og_locale":"en_US","og_type":"article","og_title":"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform","og_description":"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.","og_url":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform","og_site_name":"Cloudinary Blog","article_published_time":"2024-01-16T15:00:00+00:00","article_modified_time":"2026-03-11T07:12:56+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform","datePublished":"2024-01-16T15:00:00+00:00","dateModified":"2026-03-11T07:12:56+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","keywords":["Generative AI","Image Transformation","Upload"],"inLanguage":"en-US","copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform","url":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform","name":"How-to: Interactive Image Platform Using Flask and Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","datePublished":"2024-01-16T15:00:00+00:00","dateModified":"2026-03-11T07:12:56+00:00","description":"By combining Flask with Cloudinary\u2019s robust image management capabilities, developers can craft interactive and visually engaging applications.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","width":2000,"height":1100},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/leveraging-cloudinary-flask-creating-interactive-image-platform#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Leveraging Cloudinary and Flask: Creating an Interactive Image Platform"}]},{"@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\/v1705101475\/image_manipulation_with_Flask-blog\/image_manipulation_with_Flask-blog.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32632","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=32632"}],"version-history":[{"count":10,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32632\/revisions"}],"predecessor-version":[{"id":39859,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/32632\/revisions\/39859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/32652"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=32632"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=32632"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=32632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}