Spaces:
Running
Running
| <html> | |
| <head> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-173468417-1"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag(){dataLayer.push(arguments);} | |
| gtag('js', new Date()); | |
| gtag('config', 'UA-173468417-1'); | |
| </script> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="twitter:card" content="summary_large_image"> | |
| <meta name="twitter:site" content="@Niraj_pandkar"> | |
| <meta name="twitter:title" content="Cartoonized your world!"> | |
| <meta name="twitter:description" content="Want to see your cartoonized self? You can try image or video."> | |
| <meta name="twitter:creator" content="@Niraj_pandkar"> | |
| <meta name="twitter:image" content="static/sample_images/twitter_image.png"> | |
| <meta name="twitter:domain" content="https://cartoonize-lkqov62dia-de.a.run.app/cartoonize"> | |
| <title>Cartoonizer</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css"> | |
| <script | |
| src="https://code.jquery.com/jquery-3.1.1.min.js" | |
| integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" | |
| crossorigin="anonymous"> | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script> | |
| <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | |
| <style> | |
| html { | |
| box-sizing: border-box; | |
| } | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| body{ | |
| background-color: whitesmoke; | |
| } | |
| iframe[src*=youtube] { | |
| display: block; | |
| margin: 0 auto; | |
| max-width: 100%; | |
| padding-bottom: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="loader" class="ui disabled dimmer"> | |
| <div class="ui text loader">Preparing your cartoon! May take an extra few seconds for video :)</div> | |
| </div> | |
| <div class='ui padded centered grid'> | |
| <!-- Messaging system --> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| <div style="height:10%; display:flex; align-items: center; justify-content: center"> | |
| {% for category, message in messages %} | |
| {% if category == error%} | |
| <h3 style="color:red">{{ message }}</h3> | |
| {% else %} | |
| <h3 style="color:green">{{ message }}</h3> | |
| {% endif %} | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| </div> | |
| </div> | |
| <!-- Heading of the page --> | |
| <div class="row"> | |
| <div class='center aligned column'> | |
| <h1>Cartoonize your world!</h1> | |
| </div> | |
| </div> | |
| <!-- Submission form --> | |
| <div class="row"> | |
| <div class='center aligned column'> | |
| <form id='formsubmit' method="post" action="cartoonize" enctype = "multipart/form-data"> | |
| <div class="ui buttons"> | |
| <div id='uploadimage' class="ui button" style="align-items: center;"> | |
| <i class="image icon"></i> | |
| Image | |
| </div> | |
| <div class="or"></div> | |
| <div id='uploadvideo' class="ui button" style="align-items: center;"> | |
| <i class="video icon"></i> | |
| Video | |
| <span style="font-size: 10px;">(Max 30MB)</span> | |
| </div> | |
| </div> | |
| <input type='file' id='hiddeninputfile' accept="image/*" name = 'image' style="display: none"/> | |
| <input type="file" id="hiddeninputvideo" accept="video/*" name = 'video' style="display: none"> | |
| <!-- <input id='submitbutton' class='ui button' type='submit'/> --> | |
| </form> | |
| </div> | |
| </div> | |
| {%if cartoonized_image or cartoonized_video%} | |
| <div class="row"> | |
| <div class="column"> | |
| <!-- Nested grid --> | |
| <div class="ui centered grid"> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| {%if cartoonized_image%} | |
| <div class="ui centered card"> | |
| <div class="image"> | |
| <img src="{{ cartoonized_image }}"> | |
| </div> | |
| </div> | |
| {%endif%} | |
| {%if cartoonized_video%} | |
| <video id="player" width="320" height="240" controls> | |
| <source type="video/mp4" src="{{cartoonized_video}}"> | |
| </video> | |
| {%endif%} | |
| </div> | |
| </div> | |
| <div class="row"> | |
| {%if cartoonized_video%} | |
| <a href={{cartoonized_video}} download> | |
| <button class="ui primary button"> | |
| <i class="download icon"></i> | |
| Download | |
| </button> | |
| </a> | |
| {%endif%} | |
| {%if cartoonized_image%} | |
| <a href={{cartoonized_image}} download> | |
| <button class="ui primary button"> | |
| <i class="download icon"></i> | |
| Download | |
| </button><br> | |
| (Valid for 5 minutes only) | |
| </a> | |
| {%endif%} | |
| </div> | |
| <div class="row"> | |
| <div class="ui stackable three column grid"> | |
| <div class="three column row"> | |
| <div class="center aligned column"> | |
| <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-text="Check your cartoonized version using the link below!" data-url="https://bit.ly/2CjaaJs" data-hashtags="cartoon" data-show-count="false" data-size="large">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> | |
| </div> | |
| <div class="center aligned column"> | |
| <a href="https://api.whatsapp.com/send?text=Try%20this%20awesome%20AI%20cartoonizer%20using%20-%20https%3A%2F%2Fbit.ly%2F2CjaaJs" target="_blank"> | |
| <button class="mini ui green button"> | |
| <i class="whatsapp icon"></i>Share | |
| </button> | |
| </a> | |
| </div> | |
| <div class="center aligned column""> | |
| <iframe src="https://www.facebook.com/plugins/share_button.php?href=https%3A%2F%2Fbit.ly%2F2CjaaJs&layout=button&size=large&width=77&height=28&appId" width="77" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| {%endif%} | |
| <div class="ui divider"></div> | |
| <!-- Sample Images --> | |
| <div class="row"> | |
| <!-- <div class="ui stackable grid"> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/emma2.jpg"> | |
| </div> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/emma2_cartoonized.jpg"> | |
| </div> | |
| </div> --> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/emma2.jpg"> | |
| </div> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/emma2_cartoonized.jpg"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/spice.jpeg"> | |
| </div> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/spice_cartoonized.jpeg"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/cake.jpeg"> | |
| </div> | |
| <div class="five wide column"> | |
| <img class="ui medium centered image" src="/static/sample_images/cake_cartoonized.jpeg"> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/omenajmDBm8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/GqduSLcmhto" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/0Y29Z7-urqA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <!-- <div class="row"> | |
| <div class="five wide column"> | |
| <img src="/static/sample_images/tenor.gif"> | |
| </div> | |
| <div class="five wide column"> | |
| <img src="/static/sample_images/tenor.gif"> | |
| </div> | |
| </div> --> | |
| <!-- FAQs --> | |
| <div class="row"> | |
| <div class="column" style="padding-right: 25px; padding-left: 25px;"> | |
| <div class="ui centered styled accordion" style="margin:auto;"> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Which paper is this demo based on? | |
| </div> | |
| <div class="content"> | |
| <p class="transition hidden">Due credits to the incredible paper - <a target="_blank" href="http://openaccess.thecvf.com/content_CVPR_2020/papers/Wang_Learning_to_Cartoonize_Using_White-Box_Cartoon_Representations_CVPR_2020_paper.pdf">Learning to Cartoonize Using White-box Cartoon Representations</a> | |
| <p>Official implementation of the paper by the author - <a target="_blank" href="https://github.com/SystemErrorWang/White-box-Cartoonization">Github Link</a></p> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| What are the restrictions of video processing and image processing? | |
| </div> | |
| <div class="content"> | |
| <ul class="ui list"> | |
| <li>We are currently processing only upto <b>10 second</b> videos, if you happened to upload a video greater than 10 seconds, only <b>first 10 seconds</b> will be considered.</li> | |
| <li>Video File Size Limitation: <b>30MB</b></li> | |
| <li>Image File Formats Supported: <b>jpeg, png</b></li> | |
| <li>Video File Formats Supported: <b>mp4, webm, avi, mkv</b></li> | |
| <li>GIF/TIFF Images are not supported.</li> | |
| </ul> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Is my data stored on your servers? | |
| </div> | |
| <div class="content"> | |
| Your data is deleted in the pipeline as you run the demo. | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Where could be Cartoonizer used? | |
| </div> | |
| <div class="content"> | |
| <p>Some of the areas where we think it could be applied to -</p> | |
| <ul class="ui list"> | |
| <li>Churn out <b>quick prototypes</b> or sprites for animes, cartoons and games</li> | |
| <li>Since it subdues facial features and information in general, it can be used to generate <b>minimal art</b></li> | |
| <li>Games can import short <b>cut scenes</b> very easily <b>without using motion-capture</b></li> | |
| <li>Can be modelled as an assistant to graphic designers or animators.</li> | |
| </ul> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Video and Image attributes? | |
| </div> | |
| <div class="content"> | |
| <p>Cake and food assortment photos are OC (Original Content). Other than that -</p> | |
| <ul class="ui list"> | |
| <li>Emma Watson Image: <a target="_blank" href="https://static.independent.co.uk/s3fs-public/thumbnails/image/2019/12/20/15/emma-watson-little-women.jpg?w968">Independent UK</a></li> | |
| <li>Rick Astley - Never Gonna Give You Up (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">YouTube Link</a></li> | |
| <li>Avengers (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=u7JO1RCE3Zk">YouTube Link</a></li> | |
| <li>Joey (Original Video): <a target="_blank" href="https://www.youtube.com/watch?v=tHuQiUP-kyQ">YouTube Link</a></li> | |
| </ul> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| I want to know more about cartoonization using AI. | |
| </div> | |
| <div class="content"> | |
| <p>The <a href="">author</a> of the above mentioned paper can probably indulge you in some detailed resoursces. Other than that here are some we found - </p> | |
| <ul class="ui list"> | |
| <li>CartoonGAN | |
| <ul> | |
| <li><a target="_blank" href="https://openaccess.thecvf.com/content_cvpr_2018/papers/Chen_CartoonGAN_Generative_Adversarial_CVPR_2018_paper.pdf">Paper</a></li> | |
| <li><a target="_blank" href="https://github.com/mnicnc404/CartoonGan-tensorflow">Github Link</a></li> | |
| </ul> | |
| </li> | |
| <li>AnimeGAN | |
| <ul> | |
| <li><a target="_blank" href="https://link.springer.com/chapter/10.1007/978-981-15-5577-0_18">Paper</a></li> | |
| <li><a target="_blank" href="https://github.com/TachibanaYoshino/AnimeGAN">Github Link</a></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Why did we make this demo? | |
| </div> | |
| <div class="content"> | |
| <p>Honestly we thought this was a cool application of GAN but didn't find any demo available. | |
| Our friends wanted to try it so we made a quick demo for images; which then later got extended to videos.</p> | |
| <p>Also we wanted to learn the deployment architecture which would allow us to serve such power hungry inference in the least money hogging method possible. (Blog post coming soon!)</p> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Help us pay the bills? | |
| </div> | |
| <div class="content"> | |
| If you liked our demo and want to support us, please donate - <a href="https://www.paypal.me/tjdevworks">Paypal Link</a> | |
| </div> | |
| <div class="title"> | |
| <i class="dropdown icon"></i> | |
| Do you want to share your feedback? | |
| </div> | |
| <div class="content"> | |
| <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSevnAJeRc0JvoXAY_wNOu4jKb5tM3PKmwZMzH5tDnxVr1bXzQ/viewform?embedded=true" width="550" height="605" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> | |
| </div> | |
| <!-- <div class="title"> | |
| <i class="dropdown icon"></i> | |
| What is the deployment architecture of this project? | |
| </div> | |
| <div class="content"> | |
| <p>This is a Flask app which resides on a Cloud Run instance with Cloud Storage integration. We've leveraged Algorithmia's community cloud AI layer for our inference.</p> | |
| <!-- <p><a href="https://github.com/nirajpandkar/x-ize/tree/wb_cartoonizer">Github Link</a></p> --> | |
| <!-- </div> --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="center aligned column"> | |
| <h3><i class="copyright outline icon"></i> 2020 Cartoonizer</h3> | |
| <h3>Made with <i class="heart icon"></i> by <a target="_blank" href="https://twitter.com/Niraj_pandkar">Niraj</a> and <a target="_blank" href="https://twitter.com/tjdevWorks">Tejas</a></h3> | |
| </div> | |
| </div> | |
| <!-- <div class="row"> | |
| <h3>Made with <i class="heart icon"></i> by <a href="https://www.linkedin.com/in/nirajpandkar/">Niraj</a> and <a href="https://www.linkedin.com/in/tejas-mahajan-21175a118/">Tejas</a></h3> | |
| </div> --> | |
| </div> | |
| <script> | |
| $('.ui.accordion') | |
| .accordion() | |
| ; | |
| $("#uploadimage").on("click", function() { | |
| $('#hiddeninputfile').click(); | |
| }); | |
| $("#uploadvideo").on("click", function() { | |
| $('#hiddeninputvideo').click(); | |
| }); | |
| document.getElementById("hiddeninputfile").onchange = function() { | |
| $('#loader').removeClass('disabled').addClass('active'); | |
| document.getElementById("formsubmit").submit(); | |
| }; | |
| document.getElementById("hiddeninputvideo").onchange = function() { | |
| const fi = document.getElementById('hiddeninputvideo'); | |
| // Check if any file is selected. | |
| if (fi.files.length > 0) { | |
| for (const i = 0; i <= fi.files.length - 1; i++) { | |
| const fsize = fi.files.item(i).size; | |
| const file = Math.round((fsize / 1024)); | |
| // The size of the file. | |
| //Change the max_file_size as per your need | |
| const max_file_size = 30720; | |
| if (file >= max_file_size) { | |
| alert( | |
| "File too Big, please select a file less than 30mb (10 sec at 1080p or 5 sec at 4k)"); | |
| } else { | |
| $('#loader').removeClass('disabled').addClass('active'); | |
| document.getElementById("formsubmit").submit(); | |
| } | |
| } | |
| } | |
| }; | |
| var recorder = document.getElementById('recorder'); | |
| </script> | |
| </body> | |
| </html> | |