forked from cloudinary-devs/recolor_demo
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (98 loc) · 3.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>AI-Powered Object Recolor Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body
class="bg-stone-900 text-white flex flex-col items-center justify-center"
>
<div class="container">
<h1 class="text-5xl mb-4 mt-4">AI Recolor</h1>
<div class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-sm">
<p>
Transform Your Images with the Magic of Recoloring!
Recolor objects detected in your uploaded image for purposes like room
redesign, showcasing products in different colors, or creative
expression.For best results, upload an image with lots of
objects in it!
</p>
</div>
</div>
<!--This form displays the product images and returns user selections to the backend.-->
<div>
<h3></h3>
</div>
<button
id="upload_widget"
class="mt-4 bg-stone-200 rounded-full h-[36px] flex items-center justify-center cursor-pointer text-[16px] gap-[4px] px-[28px] py-[8px] no-underline font-bold transition duration-300 text-black"
>
Upload JPG or PNG
</button>
<!-- placeholder for uploaded image -->
<div id="holdImages" class="cards-container flex justify-center items-center pt-4">
<div id="orig_div" class="card" style="display: none">
<h1 style="margin-left: 15px" id="orig_heading"></h1>
</div>
<div class="card" id="transform_div" style="display: none">
<h1 style="margin-left: 15px" id="transform_heading"></h1>
<div id="spinner" style="display: none; width: 90%; margin-left: 15px">
<img
style="width: 90%; margin-left: 15px"
src="https://res.cloudinary.com/demo/image/upload/v1663277919/docs/collage/loading.jpg"
alt="Loading..."
/>
</div>
<img id="transform_img" style="width: 90%; margin-left: 15px" />
<p
id="transform_url"
style="margin-left: 15px; word-break: break-all; white-space: normal"
></p>
</div>
</div>
<p id="response"></p>
<div id="demo"></div>
<form id="choices" onsubmit="handleSubmit(event)">
<div class="flex flex-col w-full items-center hidden" id="hiddenForm">
<div class="flex justify-center flex-col items-center gap-2">
<h3 for="color">Select the color:</h3>
<input
style="display: inline"
type="color"
id="color"
name="color"
value="#FFFFFF"
/><br /><br />
</div>
<h3
id="obj_instructions"
>
Select the objects to recolor:
</h3>
<div id="object_div"></div>
<div class="w-full flex gap-4 pt-4 justify-center">
<button
class="bg-stone-200 rounded-full h-[36px] flex items-center justify-center cursor-pointer text-[16px] gap-[4px] px-[28px] py-[8px] no-underline font-bold transition duration-300 text-black"
type="submit"
>
Recolor
</button>
<button
class="bg-red-200 rounded-full h-[36px] flex items-center justify-center cursor-pointer text-[16px] gap-[4px] px-[28px] py-[8px] no-underline font-bold transition duration-300 text-black"
onclick="window.location.reload();"
type="button"
>
Upload New
</button>
</div>
</div>
</form>
<script
src="https://widget.cloudinary.com/v2.0/global/all.js"
type="text/javascript"
></script>
<script src="script.js"></script>
</body>
</html>