PageSourceSearch

https://ribbet.ai/Colorize

html ribbet.ai collected 2026-10-05 12:31:59 UTC 50,362 bytes, 1,082 lines download raw bytes

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			&lt; 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>&#9432;</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&#0045;ai" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=335034&theme=light" alt="Ribbet&#0046;ai - AI&#0032;photo&#0032;editing&#0032;made&#0032;free&#0032;and&#0032;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			&#183;&nbsp; &copy; 2026 Ribbet.ai &nbsp;&#183;
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.