62 |
78 |
79 |
63 | }
65 | shape="circle"
66 | className="absolute right-0 top-0 mt-2 me-2"
67 | onClick={onOpenDrawer}
68 | />
69 |
77 |
70 |
75 |
71 | {shouldRenderFileInput ?
73 |
56 | 
57 |
58 | );
59 | }
60 |
61 | return (
62 |
86 |
89 | Click or drag file to this area to start! 90 |
91 |
109 | {EXAMPLE_IMAGES.map(renderExample)}
110 |
111 |
112 | );
113 |
114 | if (status === "START") {
115 | return (
116 |
9 |
10 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/GlassesColorPicker.tsx:
--------------------------------------------------------------------------------
1 | import { ColorPicker } from "antd";
2 | import type { AggregationColor } from "antd/es/color-picker/color";
3 |
4 | import { useBoundStore } from "./store/index.ts";
5 |
6 | interface GlassesColorPickerProps {
7 | disabled: boolean;
8 | glasses: Glasses;
9 | }
10 |
11 | function GlassesColorPicker({ disabled, glasses }: GlassesColorPickerProps) {
12 | const updateStyleColor = useBoundStore((state) => state.updateStyleColor);
13 |
14 | function handleColorChange(_: AggregationColor, css: string) {
15 | updateStyleColor(glasses.id, css);
16 | }
17 |
18 | return (
19 |
20 |
11 | Made with passion by{" "}
12 |
13 | Igor Klimer
14 |
15 | .
16 |
17 |
18 | Source code on
19 |
24 |
29 |
82 |
124 |
83 | 
91 | {glassesList.map(renderGlasses)}
92 |
93 |
94 |
123 |
95 | }
99 | data-field="flipHorizontally"
100 | disabled={isLoading}
101 | onClick={handleImageOptionsChange}
102 | />
103 | }
107 | data-field="flipVertically"
108 | disabled={isLoading}
109 | onClick={handleImageOptionsChange}
110 | />
111 |
112 | }
117 | disabled={isLoading}
118 | onClick={handleRemoveInputImage}
119 | >
120 | Remove image
121 |
122 | -
50 |
- 51 | All operations done fully client-side - no backend, no private data 52 | leaves your browser. 53 | 54 |
- 55 | Uses{" "} 56 | 60 | MediaPipe Face Detector task 61 | {" "} 62 | to automatically scale and position glasses on the detected faces. 63 | 64 |
-
65 | Extensive customization options for glasses:
66 |
-
67 |
- 68 | Placement of glasses anywhere on the input image (including 69 | slightly going outside it). 70 | 71 |
- Change the size of glasses. 72 |
- 73 | Change the color of glasses to any RGBA color (only applies to 74 | Classic style). 75 | 76 |
- No limit on the number of glasses. 77 |
- Flip the glasses vertically or horizontally. 78 |
- 79 | Customize the direction from which the glasses appear on the 80 | image. 81 | 82 |
- Different types of glasses. 83 |
85 | -
86 | GIF output options:
87 |
-
88 |
- Looping mode. 89 |
- Number of frames. 90 |
- Frame delay. 91 |
- Separate delay setting for last frame. 92 |
- Output size. 93 |
95 | - 96 | Anonymous product analytics using{" "} 97 | 98 | PostHog 99 | 100 | , requiring explicit opt-in. 101 | 102 |
- Celebration confetti 🎉 103 |
- Easter eggs. 104 |
70 | Classic
71 | 🎨
72 |
73 | ),
74 | value: glassesImageUrl,
75 | },
76 | {
77 | label: "Small",
78 | value: glassesSmallImageUrl,
79 | },
80 | {
81 | label: "Symmetrical",
82 | value: glassesSymmetricalImageUrl,
83 | },
84 | {
85 | label: "Party",
86 | value: glassesSymmetricalPartyImageUrl,
87 | },
88 | ];
89 |
90 | const directionOptions = [
91 | {
92 | label: "⬇️",
93 | value: "up",
94 | },
95 | {
96 | label: "⬆️",
97 | value: "down",
98 | },
99 | {
100 | label: "➡️",
101 | value: "left",
102 | },
103 | {
104 | label: "⬅️",
105 | value: "right",
106 | },
107 | ];
108 |
109 | const isLoading = status !== "READY";
110 |
111 | return (
112 |
118 |
194 |
119 | }
124 | disabled={isLoading}
125 | {...attributes}
126 | {...listeners}
127 | />
128 |
174 |
129 |
140 |
149 | }
154 | data-id={glasses.id}
155 | data-field="flipHorizontally"
156 | disabled={isLoading}
157 | onClick={handleFlipChange}
158 | />
159 | }
164 | data-id={glasses.id}
165 | data-field="flipVertically"
166 | disabled={isLoading}
167 | onClick={handleFlipChange}
168 | />
169 | {glasses.style === glassesImageUrl && (
170 |
173 |
175 | }
180 | data-id={glasses.id}
181 | disabled={isLoading}
182 | onClick={handleSelectionChange}
183 | />
184 | }
189 | disabled={isLoading}
190 | onClick={handleRemove}
191 | />
192 |
193 | -
67 | {glassesList.map(renderGlassesItem)}
68 | {glassesList.length === 0 && (
69 |
7 |
8 | Deal With It
9 |
10 |
11 | Deal With It
12 |
18 |
19 |