Spaces:
Running
Running
File size: 20,631 Bytes
be6c755 d7fa89a be6c755 aeb1adf be6c755 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 |
<!DOCTYPE html>
<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> 2024 Cartoonize</h3>
<h3>Made with <i class="heart icon"></i> by <a target="_blank" href="https://twitter.com/ims_eldrith">Ashiq Hussain Mir</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>
|