1<html> 2 3<head> 4 5 <title>Ribbet.ai | Colorize black and white photos for free</title> 6 <meta name="keywords" content="Colorize, black and white, greyscale, make photo color"> 7 <meta name="description" content="Simple, free, image colorization online"> 8 9 <meta property="og:title" content="Ribbet.ai | Colorize black and white photos for free"/> 10 <meta property="og:description" content="Simple, free, image colorization online" /> 11 <meta property="og:image" content="https://ribbet.ai/assets/images/visual.jpg" /> 12 <meta property="og:image:width" content="1200" /> 13 <meta property="og:image:height" content="628" /> 14 <meta property="og:type" content="website" /> 15 <meta property="og:url" content="https://ribbet.ai/" /> 16 17 <meta name="twitter:card" content="summary_large_image"> 18 <meta name="twitter:site" content="@ribbet"> 19 <meta name="twitter:image" content="https://ribbet.ai/assets/images/visual.jpg"> 20 21
21<script type="application/ld+json"> 22 { 23 "@context" : "http://schema.org", 24 "@type" : "Organization", 25 "name" : "Ribbet.ai", 26 "description" : "AI photo editing made free and simple.", 27 "url" : "https://ribbet.ai", 28 "founder" : "Ben Meisner", 29 "foundingDate" : "2022-01-31", 30 "foundingLocation": "Sydney, NSW, Australia", 31 "logo": "https://ribbet.ai/assets/images/logo.png", 32 "image": "https://ribbet.ai/assets/images/visual.jpg" 33 } 34 </script>
34 35 36 <meta name="viewport" content="width=device-width, initial-scale=1"> 37 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 38 <meta http-equiv="Content-Security-Policy" content="frame-src https://ribbet.ai;"> 39 40 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> 41
41<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
41 42
42<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
42 43 44 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 45 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 46 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 47 <link rel="manifest" href="/site.webmanifest"> 48 49 <style> 50 /* Image picker */ 51 ul.thumbnails.image_picker_selector{overflow:auto;list-style-image:none;list-style-position:outside;list-style-type:none;padding:0;margin:0}ul.thumbnails.image_picker_selector ul{overflow:auto;list-style-image:none;list-style-position:outside;list-style-type:none;padding:0;margin:0}ul.thumbnails.image_picker_selector li.group_title{float:none}ul.thumbnails.image_picker_selector li{margin:0 12px 12px 0;float:left}ul.thumbnails.image_picker_selector li .thumbnail{padding:6px;border:1px solid #ddd;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}ul.thumbnails.image_picker_selector li .thumbnail img{-webkit-user-drag:none}ul.thumbnails.image_picker_selector li .thumbnail.selected{background:#08c} 52 53 /* Image picker customisations */ 54 .thumbnail img { 55 max-width: 100px; 56 } 57 #imgPicker { 58 display: none; 59 } 60 .image_picker_selector { 61 -webkit-column-count: 5; 62 -moz-column-count: 5; 63 column-count: 5; 64 -webkit-column-gap: 10px; 65 -moz-column-gap: 10px; 66 column-gap: 10px; 67 -webkit-column-fill: balance; 68 -moz-column-fill: balance; 69 column-fill: balance; 70 } 71 .image_picker_selector li { 72 break-inside: avoid-column; 73 cursor: hand; 74 } 75 76 /* Fonts */ 77 @font-face{font-family:Larsseit;font-style:normal;font-weight:400;src:local('âº'),url(/assets/fonts/larsseit-thin.woff2) format('woff2'),url(/assets/fonts/larsseit-thin.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 78 @font-face{font-family:Larsseit;font-style:italic;font-weight:400;src:local('âº'),url(/assets/fonts/larsseit-italic.woff2) format('woff2'),url(/assets/fonts/larsseit-italic.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 79 @font-face{font-family:Larsseit;font-style:normal;font-weight:500;src:local('âº'),url(/assets/fonts/larsseit-regular.woff2) format('woff2'),url(/assets/fonts/larsseit-regular.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 80 @font-face{font-family:Larsseit;font-style:italic;font-weight:300;src:local('âº'),url(/assets/fonts/larsseit-light-italic.woff2) format('woff2'),url(/assets/fonts/larsseit-light-italic.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 81 @font-face{font-family:Larsseit;font-style:normal;font-weight:700;src:local('âº'),url(/assets/fonts/larsseit-bold.woff2) format('woff2'),url(/assets/fonts/larsseit-bold.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 82 @font-face{font-family:Circular-Pro;font-style:normal;font-weight:400;src:local('âº'),url(/assets/fonts/circular-pro-book.woff2) format('woff2'),url(/assets/fonts/circular-pro-book.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 83 @font-face{font-family:Circular-Pro;font-style:normal;font-weight:700;src:local('âº'),url(/assets/fonts/circular-pro-bold.woff2) format('woff2'),url(/assets/fonts/circular-pro-bold.woff) format('woff');unicode-range:U+0000-F8FE,U+F900-FFFF} 84 85 /* Font usage */ 86 body { 87 font-family: 'Circular-Pro', sans-serif; 88 margin: 0; 89 font-size: 14px; 90 background: #f7f7f7; 91 } 92 h1 { 93 font-family:Larsseit, sans-serif; 94 font-weight: 700; 95 font-size: 84px; 96 line-height: 48px; 97 margin-bottom: 23px; 98 } 99 h2 { 100 font-size: 24px; 101 color: #878787; 102 } 103 h3 { 104 font-size: 17px; 105 margin-bottom: 25px; 106 } 107 108 /* Tab colors */ 109 .nav-pills .nav-link.active, .nav-pills .show>.nav-link { 110 background: #6a37b6; 111 cursor: default; 112 } 113 114 .nav-link { 115 color: #6a37b6; 116 cursor: hand !important; 117 } 118 .nav-link:HOVER { 119 color: #3f1b75; 120 } 121 122 /* Div alignment */ 123 .dOuter { 124 max-width: 630px; 125 margin: 0 auto 0; 126 overflow: auto; 127 } 128 #dOuter { 129 margin-top: 50px; 130 } 131 132 /* Pulse loading after image */ 133 @keyframes pulse { 134 0% { opacity: 0.7 } 135 50% { opacity: 0.85; } 136 100% { opacity: 0.7; } 137 } 138 .pulse { 139 -webkit-animation: pulse 3s infinite ease-in-out; 140 -o-animation: pulse 3s infinite ease-in-out; 141 -ms-animation: pulse 3s infinite ease-in-out; 142 -moz-animation: pulse 3s infinite ease-in-out; 143 animation: pulse 3s infinite ease-in-out; 144 } 145 146 /* Loading after image gif */ 147 .pulse .lds-ripple { 148 display: inline-block; 149 position: absolute; 150 width: 80px; 151 height: 80px; 152 left: calc(50% - 40px); 153 top: calc(50% - 40px); 154 } 155 .pulse .lds-ripple div { 156 position: absolute; 157 border: 4px solid #fff; 158 opacity: 1;
159 border-radius: 50%; 160 animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite; 161 box-shadow: 1px 1px 1px #a7a7a7; 162 } 163 .pulse.finishing .lds-ripple div { 164 border-color: #0d6efd; 165 } 166 .pulse .lds-ripple div:nth-child(2) { 167 animation-delay: -0.5s; 168 } 169 @keyframes lds-ripple { 170 0% { 171 top: 36px; 172 left: 36px; 173 width: 0; 174 height: 0; 175 opacity: 1; 176 } 177 100% { 178 top: 0px; 179 left: 0px; 180 width: 72px; 181 height: 72px; 182 opacity: 0; 183 } 184 } 185 186 /* Before and after images */ 187 #dBefore, #dAfter, #dBeforeLabel, #dAfterLabel { 188 width: calc(50% - 10px); 189 float: left; 190 position: relative; 191 } 192 #dAfter { 193 float: right; 194 font-weight: bold; 195 } 196 #dAfterLabel { 197 text-align: center; 198 float: left; 199 } 200 /*#dBefore > img, #dAfter > img { 201 cursor: hand; 202 }*/ 203 #dBeforeLabel, #dBeforeLabel a, #dAfterLabel, #dAfterLabel a { 204 color: #999; 205 line-height: 21px; 206 margin-top: 10px; 207 } 208 209 #dAfterLabel { 210 float: right; 211 } 212 213 @media(max-width: 959px) { 214 #iOR { 215 height: 545px !important; 216 } 217 218 } 219 220 @media(max-width: 630px) { 221 .dOuter { 222 max-width: 93%; 223 } 224 .image_picker_selector { 225 -webkit-column-count: 4; 226 -moz-column-count: 4; 227 column-count: 4; 228 } 229 } 230 @media(max-width: 550px) { 231 h1 { 232 font-size: 61px; 233 line-height: 38px; 234 } 235 } 236 237 #logo { 238 width: 106px; 239 height: 98px; 240 margin: 80px 0 35px; 241 } 242 #pills-tab { 243 max-width: 730px; 244 margin: 50px auto; 245 } 246 #or { 247 margin: 40px auto 56px; 248 width: 280px; 249 height: 10px; 250 border-bottom: 1px solid #6a37b6; 251 text-align: center; 252 } 253 254 @media(max-width: 524px) { 255 #logo { 256 width: 66px; 257 height: 61px; 258 margin: 10px 0 25px; 259 } 260 h1 { 261 font-size: 41px; 262 line-height: 15px; 263 } 264 h2 { 265 font-size: 16px; 266 } 267 #pills-tab { 268 margin: 35px auto; 269 } 270 #dOuter { 271 margin-top: 20px; 272 } 273 #or { 274 margin: 20px auto 33px; 275 } 276 277 .image_picker_selector { 278 -webkit-column-count: 3; 279 -moz-column-count: 3; 280 column-count: 3; 281 } 282 } 283 @media(max-width: 390px) { 284 .image_picker_selector { 285 -webkit-column-count: 2; 286 -moz-column-count: 2; 287 column-count: 2; 288 } 289 } 290 291 /* Carbon style */ 292 #carbonads * { 293 margin: initial; 294 padding: initial; 295 } 296 #carbonads { 297 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 298 Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, 299 sans-serif; 300 } 301 #carbonads { 302 display: flex; 303 max-width: 330px; 304 background-color: hsl(0, 0%, 98%); 305 box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1); 306 z-index: 100; 307 } 308 #carbonads a { 309 color: inherit; 310 text-decoration: none; 311 } 312 #carbonads a:hover { 313 color: inherit; 314 } 315 #carbonads span { 316 position: relative; 317 display: block; 318 overflow: hidden; 319 } 320 #carbonads .carbon-wrap { 321 display: flex; 322 } 323 #carbonads .carbon-img { 324 display: block; 325 margin: 0; 326 line-height: 1; 327 } 328 #carbonads .carbon-img img { 329 display: block; 330 } 331 #carbonads .carbon-text { 332 font-size: 13px; 333 padding: 10px; 334 /*margin-bottom: 16px;*/ 335 line-height: 1.5; 336 text-align: left; 337 } 338 #carbonads .carbon-poweredby { 339 display: block; 340 padding: 6px 8px; 341 background: #f1f1f2; 342 text-align: center; 343 text-transform: uppercase; 344 letter-spacing: 0.5px; 345 font-weight: 600; 346 font-size: 8px; 347 line-height: 1; 348 border-top-left-radius: 3px; 349 position: absolute; 350 bottom: 0; 351 right: 0; 352 } 353 354 </style>
vendor: 68 bytes, lines 354-356
354 355 356 <script async src="https://www.googletagmanager.com/gtag/js?id=
356G-G19YGXXF79
vendor: 14 bytes, lines 356-357
356"></script> 357
357<script> 358
vendor: 141 bytes, lines 358-362
358window.dataLayer = window.dataLayer || []; 359 function gtag(){dataLayer.push(arguments);} 360 gtag('js', new Date()); 361 362 gtag('config', '
362G-G19YGXXF79
vendor: 6 bytes, lines 362-363
362'); 363
363</script>
363 364</head> 365 366<body> 367 <div style="text-align: center"> 368 <img src="/assets/images/logo.png" id="logo"> 369 <h1>Ribbet.ai</h1> 370 <h2>AI photo editing made free and simple</h2> 371 </div> 372 373 <ul class="nav nav-pills purple mb-3 justify-content-center" id="pills-tab" role="tablist"> 374 <li class="nav-item" role="presentation" style="z-index: 999"> 375 <button class="nav-link" id="pills-bg-tab" data-url="/Background-Removal" data-bs-toggle="pill" data-bs-target="#pills-bg" data-api="background" type="button" role="tab" aria-controls="pills-bg" aria-selected="true">Background Removal</button> 376 </li> 377 <li class="nav-item" role="presentation"> 378 <button class="nav-link" id="pills-cartoonize-tab" data-url="/Cartoonize" data-bs-toggle="pill" data-bs-target="#pills-cartoon" data-api="cartoonize" type="button" role="tab" aria-controls="pills-cartoon" aria-selected="false">Cartoonize</button> 379 </li> 380 <li class="nav-item" role="presentation" style="position:relative"> 381 <!-- <div style="position: absolute;top: -6px;right: 8px;color: white;background: #de0202;padding: 0 4px;border-radius: 2px;font-size: 12px">New</div> --> 382 <button class="nav-link" id="pills-remove-tab" data-url="/Remove-Object" data-bs-toggle="pill" data-bs-target="#pills-remove" data-api="remove" type="button" role="tab" aria-controls="pills-remove" aria-selected="false">Remove Objects</button>
383 </li> 384 <li class="nav-item" role="presentation"> 385 <button class="nav-link active" id="pills-color-tab" data-url="/Colorize" data-bs-toggle="pill" data-bs-target="#pills-color" data-api="colorizer" type="button" role="tab" aria-controls="pills-color" aria-selected="false">Colorize</button> 386 </li> 387 <li class="nav-item" role="presentation"> 388 <button class="nav-link" id="pills-dream-tab" data-url="/Deep-Dream" data-bs-toggle="pill" data-bs-target="#pills-dream" data-api="deepdream" type="button" role="tab" aria-controls="pills-dream" aria-selected="false">Deep Dream</button> 389 </li> 390 <!--<li class="nav-item" role="presentation"> 391 <button class="nav-link" id="pills-upscale-tab" data-url="/Upscale" data-bs-toggle="pill" data-bs-target="#pills-upscale" data-api="waifu2x" type="button" role="tab" aria-controls="pills-upscale" aria-selected="false">Upscale</button> 392 </li> 393 <li class="nav-item" role="presentation"> 394 <button class="nav-link" id="pills-image2words-tab" data-url="" data-bs-toggle="pill" data-bs-target="#pills-image2words" data-api="neuraltalk" type="button" role="tab" aria-controls="pills-image2words" aria-selected="false">Image 2 Words</button>
395 </li>--> 396 <li class="nav-item" role="presentation"> 397 <button class="nav-link" id="pills-stylize-tab" data-url="/Stylize" data-bs-toggle="pill" data-bs-target="#pills-stylize" data-api="neural-style" type="button" role="tab" aria-controls="pills-stylize" aria-selected="false">Stylize</button> 398 </li> 399 <li class="nav-item" role="presentation"> 400 <button class="nav-link" id="pills-clarify-tab" data-url="/Clarify-Upscale" data-bs-toggle="pill" data-bs-target="#pills-clarify" data-api="torch-srgan" type="button" role="tab" aria-controls="pills-clarify" aria-selected="false">Clarify+Upscale</button> 401 </li> 402 <li class="nav-item" role="presentation"> 403 <button class="nav-link" id="pills-toonify-tab" data-url="/Toonify" data-bs-toggle="pill" data-bs-target="#pills-toonify" data-api="toonify" type="button" role="tab" aria-controls="pills-toonify" aria-selected="false">Toonify</button> 404 </li> 405 <li class="nav-item" role="presentation"> 406 <button class="nav-link" id="pills-face-tab" data-url="/Face-Detection" data-bs-toggle="pill" data-bs-target="#pills-face" data-api="azure" type="button" role="tab" aria-controls="pills-face" aria-selected="false">Face Detection</button>
407 </li> 408 </ul> 409 410 <div class="dOuter" id="dOuter"> 411 <div id="dStyle" class="d-none" style="text-align: center; margin-bottom: 40px"> 412 <h3>Select a Style</h3> 413 <select class="image-picker show-html" id="imgPickerStyle"> 414 <option value=''></option> 415 <option data-img-src="/assets/images/style_thumb_1.jpg" value="https://ribbet.ai/assets/images/style_1.jpg"> 416 <option data-img-src="/assets/images/style_thumb_2.jpg" value="https://ribbet.ai/assets/images/style_2.jpg"> 417 <option data-img-src="/assets/images/style_thumb_3.jpg" value="https://ribbet.ai/assets/images/style_3.jpg"> 418 <option data-img-src="/assets/images/style_thumb_4.jpg" value="https://ribbet.ai/assets/images/style_4.jpg"> 419 <option data-img-src="/assets/images/style_thumb_5.jpg" value="https://ribbet.ai/assets/images/style_5.jpg"> 420 <option data-img-src="/assets/images/style_thumb_6.jpg" value="https://ribbet.ai/assets/images/style_6.jpg"> 421 <option data-img-src="/assets/images/style_thumb_7.jpg" value="https://ribbet.ai/assets/images/style_7.jpg"> 422 <option data-img-src="/assets/images/style_thumb_8.jpg" value="https://ribbet.ai/assets/images/style_8.jpg"> 423 </select> 424 </div> 425 426 <button id="bBack" onclick="goBack()" class="btn btn btn-outline-secondary d-none" style="margin-bottom: 16px"> 427 < Back 428 </button><br> 429 430 <!--<div class="tab-content" id="pills-tabContent" style="margin: 0 auto"> 431 <div class="tab-pane fade" id="pills-bg" role="tabpanel" aria-labelledby="pills-bg-tab"><h3>Upload or search demo images to remove the background from your image</h3></div> 432 <div class="tab-pane fade" id="pills-cartoon" role="tabpanel" aria-labelledby="pills-cartoon-tab"></div> 433 <div class="tab-pane fade" id="pills-color" role="tabpanel" aria-labelledby="pills-color-tab"></div> 434 <div class="tab-pane fade" id="pills-dream" role="tabpanel" aria-labelledby="pills-dream-tab"></div> 435 </div>--> 436 437 <div id="dNotAvailable" class="text-center d-none"> 438 <br> 439 <b style="font-size: 14pt">Ribbet's AI tools have now moved to <a href="https://ribbet.com/app?go=1">our desktop web editor</a></b> 440 <br> 441 <br> 442 <br> 443 <br> 444 <br> 445 </div> 446 447 <div id="dChooser"> 448 <div style="text-align: center" id="dSelect"> 449 <label class="btn btn btn-outline-secondary"> 450 <form enctype="multipart/form-data" style="margin: 0"><input id="file" name="file" type="file" class="d-none" accept="image/*" onchange="SelectedFile(this, false)"></form> 451 Upload an image 452 </label> 453 </div> 454 455 <div id="or"> 456 <span style="font-size: 13px; background-color: #f7f7f7; padding: 0 10px; color: #6a37b6; font-weight: bold"> 457 OR 458 </span> 459 </div> 460 461 <div class="input-group mb-3" style="max-width: 440px; margin: 0 auto"> 462 <div class="input-group-prepend"> 463 <button class="btn btn-outline-secondary" type="submit" id="bSearch">Search Demo Images</button> 464 </div> 465 <input id="tUnsplash" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="bSearch"> 466 </div> 467 <div id="dImgs" style="margin-top: 30px"> 468 <select class="image-picker show-html" id="imgPicker"></select> 469 </div> 470 </div> 471 </div> 472 <div id="dOR" class="d-none"> 473 <div style="margin: 0 0 7px; font-size: 16px; color: #1976d2"> 474 <center><b>ⓘ</b> Paint the area you want to erase</center> 475 </div> 476 <iframe id="iOR" style="width: 100%; height: 726px" scrolling="no"></iframe> 477 </div> 478 <div class="dOuter"> 479 <div style="margin: 0 auto; padding: 25px 0 35px; max-width: 330px; min-height: 174px"> 480
480<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CESI5K7N&placement=ribbetai" id="_carbonads_js"></script>
480 481 </div> 482 <div style="min-height: 500px" id="dBA"> 483 <div id="dBefore"></div> 484 <div class="pulse" id="dAfter"></div> 485 <div style="clear:both"></div> 486 <div id="dBeforeLabel"></div> 487 <div id="dAfterLabel"></div> 488 </div> 489 <!--<div class="action" id="dAction-pills-bg-tab"></div> 490 <div class="action d-none" id="dAction-pills-cartoon-tab"></div> 491 <div class="action d-none" id="dAction-pills-color-tab"></div> 492 <div class="action d-none" id="dAction-pills-dream-tab"></div>--> 493 <br><br> 494 <div class="tab-content" id="pills-tabContent" style="margin: 0 auto; text-align: center; clear: both"> 495 <a href="https://www.producthunt.com/posts/ribbet-ai?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-ribbet-ai" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=335034&theme=light" alt="Ribbet.ai - AI photo editing made free and simple | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a><br> 496 <br><br> 497 <div class="tab-pane fade" id="pills-bg" role="tabpanel" aria-labelledby="pills-bg-tab">Our <b>background removal tool</b> lets you automatically <b>erase the background</b> from your image using AI, online and for free. Simply upload an image or search our free stock photos and the background will be removed in a few moments. High resolution download and our API will be released soon.</div> 498 <div class="tab-pane fade" id="pills-cartoon" role="tabpanel" aria-labelledby="pills-cartoon-tab"><b>Cartoonize your photo</b> using our free, online AI tool. Simply upload an image or search our free stock photos and your image will be turned into a sophisticated cartoon in a few moments. Our API will be released soon.</div> 499 <div class="tab-pane fade" id="pills-remove" role="tabpanel" aria-labelledby="pills-remove-tab"><b>Remove objects from your photo</b> using our free, online AI tool. Simply upload an image or search our free stock photos, paint the area you want removed and it will be automatically erased from your image in a few moments. Our API will be released soon.</div> 500 <div class="tab-pane fade show active" id="pills-color" role="tabpanel" aria-labelledby="pills-color-tab">Transform your <b>black and white photos</b> into <b>full color images</b> using advanced AI made simple. Our online colorize tool will amaze you as your greyscale images suddenly become colorful. Ideal for restoring of old photos. Our API will be released soon.</div> 501 <div class="tab-pane fade" id="pills-dream" role="tabpanel" aria-labelledby="pills-dream-tab">Deep Dream is the computer vision program created by Google engineer Alexander Mordvintsev. It finds and exaggerates patterns in images, hence creating a dream-like, psychedelic appearance in everyday photos. Our API will be released soon.</div> 502 <div class="tab-pane fade" id="pills-stylize" role="tabpanel" aria-labelledby="pills-stylize-tab">Apply the style of classic paintings to your images in a single click, creating a classic painting from everyday photos. More styles, and our API will be released soon.</div> 503 <div class="tab-pane fade" id="pills-clarify" role="tabpanel" aria-labelledby="pills-clarify-tab"><b>Clarify and upscale your images</b> to enlarge a small picture without quality loss. Using the power of AI, our free and easy tool will revolutionize your small image library. Our API will be released soon.</div> 504 <div class="tab-pane fade" id="pills-toonify" role="tabpanel" aria-labelledby="pills-toonify-tab">Toonify, our alternative to our own <a href="/Cartoonize">Cartoonize</a> tool, will <b>turn your photos into a toon</b> in a single click. Our API will be released soon.</div> 505 <div class="tab-pane fade" id="pills-face" role="tabpanel" aria-labelledby="pills-face-tab">Our free <b>Face Detection</b> AI tool, will identify the coordinates of all major facial features in your photo. This is a tool intended for software developers, and our API will be released soon.</div> 506 507 </div> 508 509 <center> 510 <br> 511 · © 2026 Ribbet.ai · 512 <br> 513 <br>
514 <a href="/Background-Removal">Background Removal</a> | 515 <a href="/Cartoonize">Cartoonize</a> | 516 <a href="/Remove-Object">Remove Object</a><br> 517 <a href="/Colorize">Colorize</a> | 518 <a href="/Deep-Dream">Deep Dream</a> | 519 <a href="/Stylize">Stylize</a> | 520 <a href="/Clarify-Upscale">Clarify+Upscale</a><br> 521 <a href="/Toonify">Toonify</a> | 522 <a href="/Face-Detection">Face Detection</a> | 523 <a href="https://sonichits.com">Song Meanings</a> 524 <br> 525 <br> 526 <a href="https://ribbet.com/terms.rbt">Terms</a> | <a href="https://ribbet.com/privacy.rbt">Privacy</a> | <a href="https://ribbet.com/contactus">Contact Us</a> 527 <br> 528 <br> 529 </center> 530 </div> 531 532 <div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel" aria-hidden="true"> 533 <div class="modal-dialog modal-dialog-centered" role="document"> 534 <div class="modal-content"> 535 <div class="modal-header"> 536 <h5 class="modal-title" id="emailModalLabel">Register to Continue</h5> 537 </div> 538 <form style="margin: 0" onsubmit="return false;"> 539 <div class="modal-body"> 540 <div class="input-group"> 541 <div class="input-group-prepend"> 542 <span class="input-group-text" id="">Email</span> 543 </div> 544 <input type="text" class="form-control" placeholder="[email protected]" id="tbEmail"> 545 </div> 546 <br> 547 A valid email address is required. By signing up you are agreeing to our default <a href="https://www.ribbet.com/notifications.rbt" target="_blank">notification settings</a>. 548 </div> 549 <div class="modal-footer"> 550 <button type="submit" class="btn btn-primary" onclick="validateEmail()">Download</button> 551 </div> 552 </form> 553 </div> 554 </div> 555 </div> 556 557
557<script> 558 var apiName = ''; 559 var selectedImgFullURL = ''; 560 561 function doSearch(startPage) { 562 //$('html, body').scrollTop($("#bSearch").offset().top - 30, 0); 563 564 $("#dImgs").css("min-height", "1100px"); 565 566 selectedImgFullURL = ''; 567 568 //$("#dBefore").html(""); 569 //$("#dAfter").html(""); 570 $("#dBA").css("min-height", "500px"); 571 572 var pgArg = ""; 573 if (startPage == 0) 574 $("#imgPicker").html("<option value=''></option>"); 575 else 576 pgArg = "&p="+startPage; 577 578 579 apiName = $("ul#pills-tab button.active").data("api"); 580 var keywords = $("#tUnsplash").val(); 581 582 $.getJSON( 583 "/demo?q="+keywords+"&a="+apiName+pgArg, 584 function (data) { 585 if (keywords || apiName == "colorizer" || apiName == "cartoonize" || apiName == "toonify") // some APIs have default text such as "face" 586 currentList = data.results; 587 else 588 currentList = data; // top photos 589 590 //totalPages = data.total_pages; //page option 591 $.each(currentList, function (i, val) { 592 var image = val; 593 var imageURL = val.urls.thumb; 594 var imageFullURL = val.urls.regular; 595 var unsplashLink = "<i>Photo by <a target='_blank' href='"+val.user.links.html+"?utm_source=ribbet&utm_medium=referral'>"+val.user.name+"</a> on <a target='_blank' href='https://unsplash.com/?utm_source=ribbet&utm_medium=referral'>Unsplash</a></i>"; 596 var downloadLink = val.links.download_location+"&client_id=175702d946876b09367cde0ace024f055e6f2df44968ae1b1da5e29cefdca89a" 597 //var useHeight = val.height / val.width * 100; /* 100 is the fixed width of the thumbnails */ 598 //imageURL = imageFullURL = 'http://test.sonichits.com/img/3.jpg'; 599 600 $("#imgPicker").append('<option data-img-src="'+imageURL+'" data-img-alt="'+unsplashLink+'" data-img-label="'+downloadLink+'" value="'+imageFullURL+'">'); 601 }); 602 603 //if (startPage < data.total_pages) 604 // $("#imgPicker").append('<br><button class="btn btn-outline-secondary" onclick="doSearch(data.page+1)">Load More</button>'); 605 606 $("#imgPicker").imagepicker({ 607 clicked:function(select, option, event) { 608 selectedImgFullURL = $(this).val(); 609 610 $("#dBeforeLabel").html(select.option.data().imgAlt); 611 if (apiName == "remove" && selectedImgFullURL) { 612 showRemoveWidget(selectedImgFullURL, ''); 613 return; 614 } 615 616 $("#dAfterLabel").html(""); 617 $.ajax({ /* Unsplash require you to call the download end point */ 618 url: select.option.data().imgLabel, 619 type: 'GET', 620 cache: false, 621 }); 622 623 if (selectedImgFullURL) 624 doAIFromURL(selectedImgFullURL, false, false); 625 } 626 }); 627 } 628 ); 629 } 630 631 function populateRemoveWidget(data) { 632 localStorage.setItem("data", data); 633 $("#iOR").attr("src", "https://ribbet.ai/inpaint/dist/index.html"); 634 } 635 636 637 function showRemoveWidget(url, data) { 638 $("#dChooser").slideUp(); 639 $("#bBack").removeClass("d-none"); 640 $("#dOR").removeClass("d-none"); 641 642 refreshCarbon(); 643 $('html, body').animate({ 644 scrollTop: $("#bBack").offset().top + 50 645 }, 200, "linear"); 646 /*$('html, body').animate({ 647 scrollTop: $("#iOR").offset().top 648 }, 0, "linear");*/ 649 650 if (url) { // unsplash 651 toDataURL(selectedImgFullURL, function(dataUrl) { 652 populateRemoveWidget(dataUrl); 653 } ); 654 } else { 655 const maxSize = 5 * 1024 * 1024; // 5MB in bytes 656 const dataSize = new Blob([data]).size; 657 658 if (dataSize > maxSize) { 659 alert("ERROR: Could not upload your file. The final image size is over 5MB!"); 660 goBack(); 661 return; 662 } 663 populateRemoveWidget(data); 664 } 665 666 } 667 668 function clearEverything() { 669 $("#imgPicker").html("<option value=''></option>"); 670 $("#imgPicker").css("min-height", ""); 671 $("#imgPicker").imagepicker(); 672 673 $("#dBefore").html(""); 674 $("#dAfter").html(""); 675 $("#dBeforeLabel").html(""); 676 $("#dAfterLabel").html(""); 677 } 678 679 function goBack() { 680 $("#bBack").addClass("d-none"); 681 $("#dImgs").css("min-height", ""); 682 $("#dChooser").slideDown(); 683 $("#dOR").addClass("d-none"); 684 } 685 686 function prepareUIForDoAI() { 687 $("#dAfter").addClass("pulse"); 688 $("#dChooser").slideUp(); 689 $("#bBack").removeClass("d-none"); 690 $(".action").addClass("d-none"); 691 $("#dAction-"+$("ul#pills-tab button.active").attr("id")).removeClass("d-none"); 692 $("#dBA").css("min-height", "1000px"); 693 694 refreshCarbon(); 695 $('html, body').animate({ 696 scrollTop: $("#bBack").offset().top - 30 697 }, 200, "linear"); 698 699 ///$(".image_picker_selector").animate({ height: 'toggle', opacity: 'toggle' }, 'fast'); 700 } 701 702 function getAIParam() { 703 styleParam = ""; 704 if (apiName == "neural-style") 705 styleParam = "&s="+styleFullURL; 706 707 return "a="+apiName+styleParam; 708 } 709 function doAIFromURL(url, isHighRes, isJustRegistered) { 710 if (!isHighRes) { 711 prepareUIForDoAI(); 712 713 var imgTag = "<img src='"+url+"' style='max-width: 100%; height: auto'"; 714 715 $("#dBefore").html(imgTag+' id="imgBefore">'); 716 $("#dAfter").html(imgTag+' id="iAfter"><div class="lds-ripple"><div></div><div></div></div>'); 717 } 718 719 $.getJSON( 720 "/ai?"+getAIParam()+"&i="+encodeURIComponent(url)+"&h="+isHighRes+"&j="+isJustRegistered, 721 function (data) { 722 doneAI(data, isHighRes); 723 } 724 ) 725 726 /*.done(function() { alert("second success"); }) 727 .fail(function( jqxhr, textStatus, error ) { 728 var err = textStatus + ", " + error; 729 console.log( "Request Failed: " + err ); 730 }) 731 .always(function() { alert("complete"); });*/ 732 } 733 734 function toDataURL(url, callback) { 735 var xhr = new XMLHttpRequest(); 736 xhr.onload = function() { 737 var reader = new FileReader(); 738 reader.onloadend = function() { 739 callback(reader.result); 740 }
741 reader.readAsDataURL(xhr.response); 742 }; 743 xhr.open('GET', url); 744 xhr.responseType = 'blob'; 745 xhr.send(); 746 } 747 748 function unhandledData(data) { 749 var text = JSON.stringify(data, null, 2); 750 if (apiName == "background" || apiName == "cartoonize") { 751 if (data.code == 1001) 752 text = "Request failed"; 753 else if (data.code == 1002) 754 text = "File size must be less than 10M"; 755 else if (data.code == 4001) 756 text = "Internal error - please contact us"; 757 else if (data.code == 4002) 758 text = "Internal error: File not exist"; 759 else if (data.code == 5003 || data.code == 7001) 760 text = "Face analysis failed - please try another image"; 761 else if (data.code == 7002) 762 text = "Multiple people were detected - please try another image"; 763 else 764 text = "Error "+data.code+" - Please try another image"; 765 766 } else if (apiName == "azure" && text == "[]") 767 text = "No single face detected. Try a different image."; 768 769 $("#dAfter").html(text); 770 } 771 772 var lastUploadUrl = ''; 773 function doneAI(data, isHighRes) { 774 if (!isHighRes) 775 $("#dAfter").addClass("finishing"); 776 777 if (apiName == "background" || apiName == "cartoonize") { 778 if (data.hasOwnProperty("data") && data.data != null && data.data.hasOwnProperty("imageBase64")) { 779 if (isHighRes) 780 downloadFile("data:image/png;base64,"+data.data.imageBase64, "png"); 781 else { 782 lastUploadUrl = data.src; 783 $("#iAfter").attr("src", "data:image/png;base64,"+data.data.imageBase64); 784 //$("#dAfterLabel").html('<a download="ribbetai.png" href="javascript:void(0)" onclick="checkEmail(data:image/png;base64,'+data.data.imageBase64+');">Download High Res</a>'); 785 $("#dAfterLabel").html('<button type="button" id="bDownload" class="btn btn-primary" onclick="downloadIfEmail();">Download</button>'); 786 } 787 } else 788 unhandledData(data); 789 790 } else { 791 if (data.hasOwnProperty("output_url")) { 792 $("#iAfter").attr("src", data.output_url); 793 //$("#dAfterLabel").html('<a target="_blank" href="'+data.output_url+'">View full size</a>'); 794 $("#dAfterLabel").html('<button type="button" id="bDownload" class="btn btn-primary" onclick="downloadIfEmail();">Download</button>'); 795 796 } else if (data.hasOwnProperty("output")) { // some text 797 $("#dAfter").html(data.output.charAt(0).toUpperCase() + data.output.slice(1)); 798 799 } else if (data.hasOwnProperty("err")) // some text 800 $("#dAfter").html(translateError(data.err)); 801 else 802 unhandledData(data); 803 804 } 805 806 $("#iAfter").one("load", function() { 807 $("#dAfter").removeClass("pulse").removeClass("finishing"); 808 }) 809 } 810 811 function translateError(text) { 812 if (apiName == "toonify" && text == "An error occurred processing this request. Please check your inputs and try again.") 813 return "No face could be found in the selected image. Please try a different image."; 814 815 return text; 816 } 817 818 function downloadIfEmail() { 819 var cookie = getCookie("e"); 820 if (cookie) 821 doDownload(false); 822 else { 823 $('#emailModal').on('shown.bs.modal', function () { 824 $('#tbEmail').focus(); 825 }) 826 827 $('#emailModal').modal('show'); 828 } 829 } 830 831 function validateEmail() { 832 var email = $("#tbEmail").val(); 833 if (!email.match(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/)) { 834 alert("A valid email address is required"); 835 $("#tbEmail").focus(); 836 } else { 837 $('#emailModal').modal('hide'); 838 setCookie("e", email, 36500); 839 doDownload(true); 840 } 841 } 842 843 function doDownload(isJustRegistered) { 844 //$("#dAfterLabel").html('<a download="ribbetai.png" href="data:image/png;base64,'+data.data.imageBase64+'">Download</a>'); 845 846 $("#bDownload").attr("disabled", "true"); 847 $("#bDownload").html("Processing..."); 848 849 if (apiName == "background" || apiName == "cartoonize") { 850 if (selectedImgFullURL) 851 doAIFromURL(selectedImgFullURL, true, isJustRegistered); 852 else 853 doAIFromURL(lastUploadUrl, true, isJustRegistered); 854 } else 855 downloadFile('/o?u='+encodeURIComponent($("#iAfter").attr("src")), "jpg"); 856 } 857 858 function downloadFile(contents, ext) { 859 var a = document.createElement("a"); //Create <a> 860 a.href = contents; 861 a.download = "Ribbetai."+ext; 862 a.click(); 863 864 $("#bDownload").removeAttr("disabled"); 865 $("#bDownload").html("Download"); 866 } 867 868 function setCookie(name,value,days) { 869 var expires = ""; 870 if (days) { 871 var date = new Date(); 872 date.setTime(date.getTime() + (days*24*60*60*1000)); 873 expires = "; expires=" + date.toUTCString(); 874 } 875 document.cookie = name + "=" + (value || "") + expires + "; path=/"; 876 } 877 function getCookie(name) { 878 var nameEQ = name + "="; 879 var ca = document.cookie.split(';'); 880 for(var i=0;i < ca.length;i++) { 881 var c = ca[i];
882 while (c.charAt(0)==' ') c = c.substring(1,c.length); 883 if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 884 } 885 return null; 886 } 887 function eraseCookie(name) { 888 document.cookie = name +'=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;'; 889 } 890 891 function SelectedFile(input, isHighRes) { 892 if (input.files[0].size > 5000000) { 893 alert("File size exceeds the maximum limit of 5MB."); 894 return; 895 } 896 897 $("#dBeforeLabel").html(""); 898 $("#dAfterLabel").html(""); 899 900 selectedImgFullURL = ''; 901 902 prepareUIForDoAI(); 903 904 apiName = $("ul#pills-tab button.active").data("api"); 905 906 var oFReader = new FileReader(); 907 oFReader.readAsDataURL(input.files[0]); 908 909 oFReader.onload = function (oFREvent) { 910 if (apiName == "remove") { 911 showRemoveWidget('', oFREvent.target.result); 912 return; 913 } 914 915 var h = " class='pending' style='max-width: 100%; height: auto'><div class='lds-ripple'><div></div><div></div></div>"; 916 917 $("#dBefore").addClass("pulse finishing"); 918 $("#dBefore").html('<img'+h+'<div class="progress" style="height: 5px;"><div class="progress-bar bg-warning" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div></div>'); 919 $("#dAfter").html('<img id="iAfter"'+h); 920 $(".pending").attr("src", oFREvent.target.result); 921 }; 922 923 if (apiName == "remove") 924 return; 925 926 $.ajax({ 927 // Your server script to process the upload 928 url: "/ai?"+getAIParam(), 929 type: 'POST', 930 data: new FormData($('form')[0]), 931 cache: false, 932 contentType: false, 933 processData: false, 934 935 success: function (data) { 936 data = JSON.parse(data); 937 doneAI(data, isHighRes); 938 }, 939 940 // Custom XMLHttpRequest 941 xhr: function () { 942 var myXhr = $.ajaxSettings.xhr(); 943 if (myXhr.upload) { 944 myXhr.upload.addEventListener('progress', function (e) { 945 if (e.lengthComputable) { 946 var value = e.loaded / e.total * 100; 947 if (value == 100) { 948 $('.progress-bar').addClass("d-none"); 949 $("#dBefore").removeClass("pulse"); 950 } else 951 $('.progress-bar').css('width', value+'%').attr('aria-valuenow', value); 952 953 } 954 }, false); 955 } 956 return myXhr; 957 } 958 }); 959 }; 960 961 var styleFullURL = ''; 962 function showStylePicker() { 963 $("#imgPickerStyle").imagepicker({ 964 clicked:function() { 965 styleFullURL = $(this).val(); 966 967 if (styleFullURL) { 968 $('html, body').animate({ 969 scrollTop: $("#dSelect").offset().top - 80 970 }, 200, "linear"); 971 } 972 } 973 }); 974 } 975 976 var isMobile = false; //initiate as false 977 // device detection 978 if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 979 || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|
979sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) 980 isMobile = true; 981 982 $(document).ready( 983 function() { 984 //addHistoryItem(); 985 986 $("#bSearch").click(function() { doSearch(0); }); 987 $('#tUnsplash').keypress(function(event){ 988 var keycode = (event.keyCode ? event.keyCode : event.which); 989 if (keycode == '13') 990 doSearch(0); 991 }); 992 993 $('button[data-bs-toggle="pill"]').on('shown.bs.tab', function (e) { 994 addHistoryItem(false); 995 handleTabChange(); 996 }); 997 998 addHistoryItem(true); 999 1000 if (!isMobile) 1001 $("#tUnsplash").focus(); 1002 1003 1004 $("#dChooser").addClass("d-none"); 1005 $("#dNotAvailable").removeClass("d-none"); 1006 1007 } 1008 ) 1009 1010 window.addEventListener('popstate', (event) => { 1011 $(".nav-link").removeClass('active'); 1012 $("#"+event.state.page).addClass('active'); 1013 1014 handleTabChange(); 1015 }); 1016 1017 function addHistoryItem(isReplace) { 1018 tabId = $("ul#pills-tab button.active").attr("id"); 1019 tabUrl = $("ul#pills-tab button.active").data("url"); 1020 1021 if (isReplace) 1022 history.replaceState( {page:tabId}, '', document.location.href ); 1023 else { 1024 history.pushState( {page:tabId}, '', tabUrl ); 1025 refreshCarbon(); 1026 } 1027 } 1028 1029 var canRefresh = false; 1030 function refreshCarbon() { 1031 try { 1032 if (canRefresh) { 1033 _carbonads.refresh(); 1034 canRefresh = false; 1035 1036 setTimeout(function(){canRefresh = true}, 5000); 1037 } 1038 }catch(e){} 1039 } 1040 1041 function handleTabChange() { 1042 apiName = $("ul#pills-tab button.active").data("api"); 1043 1044 if (!$("#bBack").hasClass("d-none")) 1045 goBack(); 1046 else 1047 $("#dImgs").css("min-height", ""); 1048 1049 /*if (selectedImgFullURL) 1050 doAI(); 1051 1052 else */ 1053 1054 // if (apiName == "neural-style") { 1055 // $("#dStyle").removeClass("d-none"); 1056 // showStylePicker(); 1057 1058 // } else { 1059 // $("#dStyle").addClass("d-none"); 1060 1061 // if ($("#imgPicker").html()) 1062 // clearEverything(); 1063 // //doSearch(0); 1064 // } 1065 1066 if (true) { 1067 //if (apiName == "remove" || apiName == "cartoonize" || apiName == "toonify" || apiName == "neural-style" || apiName == "deepdream") { 1068 $("#dNotAvailable").removeClass("d-none"); 1069 $("#dChooser").addClass("d-none"); 1070 } else { 1071 $("#dChooser").removeClass("d-none"); 1072 $("#dNotAvailable").addClass("d-none"); 1073 } 1074 } 1075 1076 // image picker 1077 function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();(function(){var ImagePicker,ImagePickerOption,both_array_are_equal,sanitized_options,indexOf=[].indexOf;jQuery.fn.extend({imagepicker:function(){var opts=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return this.each(function(){var select;if((select=jQuery(this)).data("picker")&&select.data("picker").destroy(),select.data("picker",new ImagePicker(this,sanitized_options(opts))),null!=opts.initialized)return opts.initialized.call(select.data("picker"))})}}),sanitized_options=function(opts){var default_options;return default_options={hide_select:!0,show_label:!1,initialized:void 0,changed:void 0,clicked:void 0,selected:void 0,limit:void 0,limit_reached:void 0,font_awesome:!1},jQuery.extend(default_options,opts)},both_array_are_equal=function(a,b){var i,j,len,x;if(!a||!b||a.length!==b.length)return!1;for(a=a.slice(0),b=b.slice(0),a.sort(),b.sort(),i=j=0,len=a.length;j<len;i=++j)if(x=a[i],b[i]!==x)return!1;return!0},ImagePicker=function(){function ImagePicker(select_element){var opts1=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};_classCallCheck(this,ImagePicker),this.sync_picker_with_select=this.sync_picker_with_select.bind(this),this.opts=opts1,this.select=jQuery(select_element),this.multiple="multiple"===this.select.attr("multiple"),null!=this.select.data("limit")&&(this.opts.limit=parseInt(this.select.data("limit"))),this.build_and_append_picker()}return _createClass(ImagePicker,[{key:"destroy",value:function(){var j,len,ref;for(j=0,len=(ref=this.picker_options).length;j<len;j++)ref[j].destroy();return this.picker.remove(),this.select.off("change",this.sync_picker_with_select),this.select.removeData("picker"),this.select.show()}},{key:"build_and_append_picker",value:function(){return this.opts.hide_select&&this.select.hide(),this.select.on("change",this.sync_picker_with_select),null!=this.picker&&this.picker.remove(),this.create_picker(),this.select.after(this.picker),this.sync_picker_with_select()}},{key:"sync_picker_with_select",value:function(){var j,len,option,ref,results;for(results=[],j=0,len=(ref=this.picker_options).length;j<len;j++)(option=ref[j]).is_selected()?results.push(option.mark_as_selected()):results.push(option.unmark_as_selected());return results}},{key:"create_picker",value:function(){return this.picker=jQuery("<ul class='thumbnails image_picker_selector'></ul>"),this.picker_options=[],this.recursively_parse_option_groups(this.select,this.picker),this.picker}},{key:"recursively_parse_option_groups",value:function(scoped_dom,target_container){var container,j,k,len,len1,option,option_group,ref,ref1,results;for(j=0,len=(ref=scoped_dom.children("optgroup")).length;j<len;j++)option_group=ref[j],option_group=jQuery(option_group),(container=jQuery("<ul></ul>")).append(jQuery("<li class='group_title'>"+option_group.attr("label")+"</li>")),target_container.append(jQuery("<li class='group'>").append(container)),this.recursively_parse_option_groups(option_group,container);for(ref1=function(){var l,len1,ref1,results1;for(results1=[],l=0,len1=(ref1=scoped_dom.children("option")).length;l<len1;l++)option=ref1[l],results1.push(new ImagePickerOption(option,this,this.opts));return results1}.call(this),results=[],k=0,len1=ref1.length;k<len1;
1077k++)option=ref1[k],this.picker_options.push(option),option.has_image()&&results.push(target_container.append(option.node));return results}},{key:"has_implicit_blanks",value:function(){var option;return function(){var j,len,ref,results;for(results=[],j=0,len=(ref=this.picker_options).length;j<len;j++)(option=ref[j]).is_blank()&&!option.has_image()&&results.push(option);return results}.call(this).length>0}},{key:"selected_values",value:function(){return this.multiple?this.select.val()||[]:[this.select.val()]}},{key:"toggle",value:function(imagepicker_option,original_event){var new_values,old_values,selected_value;if(old_values=this.selected_values(),selected_value=imagepicker_option.value().toString(),this.multiple?indexOf.call(this.selected_values(),selected_value)>=0?((new_values=this.selected_values()).splice(jQuery.inArray(selected_value,old_values),1),this.select.val([]),this.select.val(new_values)):null!=this.opts.limit&&this.selected_values().length>=this.opts.limit?null!=this.opts.limit_reached&&this.opts.limit_reached.call(this.select):this.select.val(this.selected_values().concat(selected_value)):this.has_implicit_blanks()&&imagepicker_option.is_selected()?this.select.val(""):this.select.val(selected_value),!both_array_are_equal(old_values,this.selected_values())&&(this.select.change(),null!=this.opts.changed))return this.opts.changed.call(this.select,old_values,this.selected_values(),original_event)}}]),ImagePicker}(),ImagePickerOption=function(){function ImagePickerOption(option_element,picker){var opts1=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};_classCallCheck(this,ImagePickerOption),this.clicked=this.clicked.bind(this),this.picker=picker,this.opts=opts1,this.option=jQuery(option_element),this.create_node()}return _createClass(ImagePickerOption,[{key:"destroy",value:function(){return this.node.find(".thumbnail").off("click",this.clicked)}},{key:"has_image",value:function(){return null!=this.option.data("img-src")}},{key:"is_blank",value:function(){return!(null!=this.value()&&""!==this.value())}},{key:"is_selected",value:function(){var select_value;return select_value=this.picker.select.val(),this.picker.multiple?jQuery.inArray(this.value(),select_value)>=0:this.value()===select_value}},{key:"mark_as_selected",value:function(){return this.node.find(".thumbnail").addClass("selected")}},{key:"unmark_as_selected",value:function(){return this.node.find(".thumbnail").removeClass("selected")}},{key:"value",value:function(){return this.option.val()}},{key:"label",value:function(){return this.option.data("img-label")?this.option.data("img-label"):this.option.text()}},{key:"clicked",value:function(event){if(this.picker.toggle(this,event),null!=this.opts.clicked&&this.opts.clicked.call(this.picker.select,this,event),null!=this.opts.selected&&this.is_selected())return this.opts.selected.call(this.picker.select,this,event)}},{key:"create_node",value:function(){var image,imgAlt,imgClass,thumbnail;return this.node=jQuery("<li/>"),this.option.data("font_awesome")?(image=jQuery("<i>")).attr("class","fa-fw "+this.option.data("img-src")):(image=jQuery("<img class='image_picker_image'/>")).attr("src",this.option.data("img-src")),thumbnail=jQuery("<div class='thumbnail'>"),(imgClass=this.option.data("img-class"))&&(this.node.addClass(imgClass),image.addClass(imgClass),thumbnail.addClass(imgClass)),(imgAlt=this.option.data("img-alt"))&&image.attr("alt",imgAlt),thumbnail.on("click",this.clicked),thumbnail.append(image),this.opts.show_label&&thumbnail.append(jQuery("<p/>").html(this.label())),this.node.append(thumbnail),this.node}}]),ImagePickerOption}()}).call(void 0); 1078 1079 setTimeout(function(){canRefresh = true}, 5000); 1080 </script>
vendor: 2 bytes, line 1080
1080
1081<script>(function(){function c(){var b=a.contentDocument||(a.contentWindow&&a.contentWindow.document);if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'a45c72498c8a96e8',t:'MTc5MTIwMzUxOA=='};var a=document.createElement('script');a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
1081</body> 1082</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.