-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
271 lines (255 loc) · 14.7 KB
/
index.html
File metadata and controls
271 lines (255 loc) · 14.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VisionEmoji — Real-Time AI Emoji Overlay for iOS</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<link rel="icon" href="seenoevil Exports/seenoevil-iOS-Default-1024x1024@1x.png" type="image/png">
</head>
<body>
<!-- Interactive Gradient Background -->
<div class="gradient-bg"></div>
<div class="gradient-blob blob-1"></div>
<div class="gradient-blob blob-2"></div>
<div class="gradient-blob blob-3"></div>
<div class="gradient-blob blob-4"></div>
<div class="gradient-blob blob-5"></div>
<div class="blob-mouse"></div>
<div class="noise-overlay"></div>
<!-- Floating 3D Emoji Background -->
<div class="emoji-bg" aria-hidden="true">
<span class="floating-emoji" style="--delay: 0s; --x: 5%; --duration: 18s; --size: 35px;"><img src="3d-emojis/dog-face.png" alt=""></span>
<span class="floating-emoji" style="--delay: 1.2s; --x: 15%; --duration: 22s; --size: 29px;"><img src="3d-emojis/automobile.png" alt=""></span>
<span class="floating-emoji" style="--delay: 2.5s; --x: 25%; --duration: 16s; --size: 40px;"><img src="3d-emojis/see-no-evil-monkey.png" alt=""></span>
<span class="floating-emoji" style="--delay: 0.8s; --x: 35%; --duration: 20s; --size: 32px;"><img src="3d-emojis/pizza.png" alt=""></span>
<span class="floating-emoji" style="--delay: 3.5s; --x: 45%; --duration: 19s; --size: 26px;"><img src="3d-emojis/mobile-phone.png" alt=""></span>
<span class="floating-emoji" style="--delay: 1.8s; --x: 55%; --duration: 24s; --size: 38px;"><img src="3d-emojis/cat-face.png" alt=""></span>
<span class="floating-emoji" style="--delay: 4.2s; --x: 65%; --duration: 17s; --size: 30px;"><img src="3d-emojis/airplane.png" alt=""></span>
<span class="floating-emoji" style="--delay: 0.3s; --x: 75%; --duration: 21s; --size: 34px;"><img src="3d-emojis/guitar.png" alt=""></span>
<span class="floating-emoji" style="--delay: 2.8s; --x: 85%; --duration: 15s; --size: 42px;"><img src="3d-emojis/sunflower.png" alt=""></span>
<span class="floating-emoji" style="--delay: 5s; --x: 92%; --duration: 23s; --size: 27px;"><img src="3d-emojis/basketball.png" alt=""></span>
<span class="floating-emoji" style="--delay: 3s; --x: 10%; --duration: 26s; --size: 32px;"><img src="3d-emojis/artist-palette.png" alt=""></span>
<span class="floating-emoji" style="--delay: 6s; --x: 30%; --duration: 18s; --size: 24px;"><img src="3d-emojis/fox.png" alt=""></span>
<span class="floating-emoji" style="--delay: 4.8s; --x: 50%; --duration: 20s; --size: 37px;"><img src="3d-emojis/red-apple.png" alt=""></span>
<span class="floating-emoji" style="--delay: 1.5s; --x: 70%; --duration: 25s; --size: 29px;"><img src="3d-emojis/fire.png" alt=""></span>
<span class="floating-emoji" style="--delay: 7s; --x: 88%; --duration: 16s; --size: 35px;"><img src="3d-emojis/direct-hit.png" alt=""></span>
<span class="floating-emoji" style="--delay: 5.5s; --x: 40%; --duration: 22s; --size: 32px;"><img src="3d-emojis/robot.png" alt=""></span>
<span class="floating-emoji" style="--delay: 2s; --x: 20%; --duration: 20s; --size: 30px;"><img src="3d-emojis/rocket.png" alt=""></span>
<span class="floating-emoji" style="--delay: 6.5s; --x: 60%; --duration: 24s; --size: 27px;"><img src="3d-emojis/butterfly.png" alt=""></span>
<span class="floating-emoji" style="--delay: 3.8s; --x: 80%; --duration: 19s; --size: 38px;"><img src="3d-emojis/star-struck.png" alt=""></span>
<span class="floating-emoji" style="--delay: 8s; --x: 48%; --duration: 21s; --size: 26px;"><img src="3d-emojis/trophy.png" alt=""></span>
</div>
<!-- Hero Section -->
<header class="hero">
<div class="hero-content">
<img
src="seenoevil Exports/seenoevil-iOS-Default-1024x1024@1x.png"
alt="VisionEmoji App Icon"
class="app-icon"
>
<h1 class="hero-title">
Vision<span class="gradient-text">Emoji</span>
</h1>
<p class="hero-subtitle">
Real-time AI-powered emoji overlay for iOS
<span class="hero-emoji"><img src="3d-emojis/see-no-evil-monkey.png" alt="see no evil monkey"></span>
</p>
<p class="hero-description">
Point your camera at the world and watch objects transform into emojis instantly.
Powered by YOLO26 + CoreML with on-device inference.
</p>
<div class="tech-badges">
<span class="badge">iOS 26</span>
<span class="badge">Swift</span>
<span class="badge">SwiftUI</span>
<span class="badge">CoreML</span>
<span class="badge">YOLO26</span>
<span class="badge">Vision</span>
</div>
<a href="https://apps.apple.com/us/app/vision-emoji/id6759308509" class="app-store-link" target="_blank" rel="noopener">
<img src="https://tools.applemediaservices.com/api/badges/download-on-the-app-store/black/en-us?size=250x83" alt="Download on the App Store">
</a>
</div>
</header>
<!-- Screenshots -->
<section class="section screenshots">
<h2 class="section-title">See It In Action</h2>
<p class="section-subtitle">Real screenshots from VisionEmoji running on iPhone</p>
<div class="slideshow">
<div class="slideshow-track">
<div class="slide active">
<div class="slide-card">
<img src="screenshots/IMG_6377.PNG" alt="Dog detection with emoji overlay">
<div class="slide-caption">Pet Detection — Shih-Tzu classified with emoji overlay</div>
</div>
</div>
<div class="slide">
<div class="slide-card">
<img src="screenshots/IMG_6341.PNG" alt="Living room scene with dog and couch detection">
<div class="slide-caption">Room Scan — Dog, couch, and person detected</div>
</div>
</div>
<div class="slide">
<div class="slide-card">
<img src="screenshots/IMG_6342.PNG" alt="Kitchen objects detection">
<div class="slide-caption">Kitchen — Knives, bottle, and bowl identified</div>
</div>
</div>
<div class="slide">
<div class="slide-card">
<img src="screenshots/IMG_6335.PNG" alt="Desk setup with multiple objects detected">
<div class="slide-caption">Workspace — 9 objects tracked simultaneously</div>
</div>
</div>
<div class="slide">
<div class="slide-card">
<img src="screenshots/IMG_6338.PNG" alt="Debug mode with bounding boxes and confidence scores">
<div class="slide-caption">Debug Mode — Bounding boxes with confidence scores</div>
</div>
</div>
</div>
<div class="slideshow-dots"></div>
</div>
</section>
<script>
(function() {
const slides = document.querySelectorAll('.slide');
const dotsContainer = document.querySelector('.slideshow-dots');
let current = 0;
let interval;
slides.forEach(function(_, i) {
const dot = document.createElement('button');
dot.className = 'dot' + (i === 0 ? ' active' : '');
dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
dot.addEventListener('click', function() { goTo(i); resetTimer(); });
dotsContainer.appendChild(dot);
});
var dots = document.querySelectorAll('.dot');
function goTo(index) {
slides[current].classList.remove('active');
dots[current].classList.remove('active');
current = index;
slides[current].classList.add('active');
dots[current].classList.add('active');
}
function next() {
goTo((current + 1) % slides.length);
}
function resetTimer() {
clearInterval(interval);
interval = setInterval(next, 3500);
}
resetTimer();
})();
</script>
<!-- Features -->
<section class="section features">
<h2 class="section-title">Features</h2>
<p class="section-subtitle">Everything runs on-device with zero cloud dependency</p>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/rocket.png" alt="Rocket"></div>
<h3>Real-Time Detection</h3>
<p>YOLO26m processes frames at up to 60 FPS with Neural Engine acceleration on Apple Silicon.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/direct-hit.png" alt="Direct hit"></div>
<h3>Dual-Model Pipeline</h3>
<p>YOLO26m detection + per-object crop classification blends COCO and ImageNet labels.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/locked-with-key.png" alt="Locked"></div>
<h3>100% On-Device</h3>
<p>All inference runs locally via CoreML. No data ever leaves your iPhone.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/gear.png" alt="Gear"></div>
<h3>Configurable</h3>
<p>Adjust FPS, emoji scale, confidence thresholds, Kalman filter parameters, and label priority.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/triangular-ruler.png" alt="Ruler"></div>
<h3>Kalman Filtering</h3>
<p>Smooth position tracking with configurable process and measurement noise for stable overlays.</p>
</div>
<div class="feature-card">
<div class="feature-icon"><img src="3d-emojis/red-apple.png" alt="Apple"></div>
<h3>Native Apple Emojis</h3>
<p>Uses Apple's built-in emoji set rendered via NSAttributedString with NSCache optimization.</p>
</div>
</div>
</section>
<!-- Tech Stack -->
<section class="section tech-stack">
<h2 class="section-title">Tech Stack</h2>
<div class="tech-pills">
<a href="https://swift.org" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/fire.png" alt=""></span> Swift
</a>
<a href="https://developer.apple.com/xcode/swiftui/" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/mobile-phone.png" alt=""></span> SwiftUI
</a>
<a href="https://developer.apple.com/machine-learning/core-ml/" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/robot.png" alt=""></span> CoreML
</a>
<a href="https://developer.apple.com/documentation/vision" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/eyes.png" alt=""></span> Vision
</a>
<a href="https://developer.apple.com/av-foundation/" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/movie-camera.png" alt=""></span> AVFoundation
</a>
<a href="https://developer.apple.com/documentation/combine" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/puzzle-piece.png" alt=""></span> Combine
</a>
<a href="https://docs.ultralytics.com/" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/robot.png" alt=""></span> YOLO26
</a>
<a href="https://coremltools.readme.io/" class="tech-pill" target="_blank" rel="noopener">
<span class="pill-icon"><img src="3d-emojis/wrench.png" alt=""></span> coremltools
</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<p class="footer-credit">Made with ❤️ by <strong>Aristides Lintzeris</strong> & <strong>YOLO26</strong></p>
<p class="footer-sub">VisionEmoji — Turning the real world into emojis, one frame at a time.</p>
<div class="footer-emojis">
<img src="3d-emojis/see-no-evil-monkey.png" alt="see no evil">
<img src="3d-emojis/dog-face.png" alt="dog">
<img src="3d-emojis/automobile.png" alt="car">
<img src="3d-emojis/pizza.png" alt="pizza">
<img src="3d-emojis/mobile-phone.png" alt="phone">
<img src="3d-emojis/cat-face.png" alt="cat">
<img src="3d-emojis/airplane.png" alt="airplane">
<img src="3d-emojis/sunflower.png" alt="sunflower">
<img src="3d-emojis/guitar.png" alt="guitar">
<img src="3d-emojis/basketball.png" alt="basketball">
</div>
</div>
</footer>
<!-- Mouse-tracking gradient blob -->
<script>
(function() {
var blob = document.querySelector('.blob-mouse');
if (!blob) return;
var mouseX = window.innerWidth / 2;
var mouseY = window.innerHeight / 2;
blob.style.left = mouseX + 'px';
blob.style.top = mouseY + 'px';
document.addEventListener('mousemove', function(e) {
blob.style.left = e.clientX + 'px';
blob.style.top = e.clientY + 'px';
// Shift gradient hue based on mouse position
var hueShift = Math.round((e.clientX / window.innerWidth) * 40);
var satShift = Math.round((e.clientY / window.innerHeight) * 20);
blob.style.background = 'radial-gradient(circle, hsla(' + (140 + hueShift) + ', ' + (50 + satShift) + '%, 50%, 0.25) 0%, hsla(' + (280 + hueShift) + ', 50%, 50%, 0.15) 40%, transparent 70%)';
});
})();
</script>
</body>
</html>