Spaces:
Sleeping
Sleeping
File size: 3,286 Bytes
9f68111 c96728f 9f68111 c96728f 9f68111 c96728f 9f68111 c96728f 9f68111 c96728f 9f68111 c96728f 9f68111 | 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 | {% extends "base.html" %}
{% block title %}Predict — Constellar{% endblock %}
{% block content %}
<section class="section" style="max-width:820px; padding-top:5rem; text-align:center;">
<div class="tag" style="margin-bottom:1.25rem;">Choose a Method</div>
<h1 style="font-family:'Orbitron',monospace; font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:900; margin:0 0 1rem; letter-spacing:-.01em;">
Predict Constellations
</h1>
<p style="font-size:.9375rem; color:var(--muted); line-height:1.7; max-width:480px; margin:0 auto 3rem;">
Two ways to explore the stars — analyze a photo you already have, or scan the sky live with your camera.
</p>
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.25rem; text-align:left;">
<!-- Upload option -->
<a href="{% url 'upload' %}" class="glass-card" style="display:block; padding:2rem; text-decoration:none; color:inherit;">
<div style="width:48px; height:48px; border-radius:12px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;">
<svg width="22" height="22" fill="none" stroke="#a5b4fc" stroke-width="1.8" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
</svg>
</div>
<h3 style="font-size:1.0625rem; font-weight:600; margin:0 0 .625rem; color:#fff;">Upload an Image</h3>
<p style="font-size:.8125rem; color:var(--muted); line-height:1.65; margin:0 0 1.25rem;">
Select a night sky photo from your device. The model detects and labels every constellation it finds, with detailed information about each.
</p>
<span style="font-size:.8125rem; font-weight:600; color:#a5b4fc;">Upload a photo →</span>
</a>
<!-- Live option -->
<a href="{% url 'detect' %}" class="glass-card" style="display:block; padding:2rem; text-decoration:none; color:inherit;">
<div style="width:48px; height:48px; border-radius:12px; background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem;">
<svg width="22" height="22" fill="none" stroke="#a5b4fc" stroke-width="1.8" viewBox="0 0 24 24">
<path stroke-linecap="round" d="M15 10l4.553-2.276A1 1 0 0 1 21 8.618v6.764a1 1 0 0 1-1.447.894L15 14M5 18h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"/>
</svg>
</div>
<h3 style="font-size:1.0625rem; font-weight:600; margin:0 0 .625rem; color:#fff;">Live Detection</h3>
<p style="font-size:.8125rem; color:var(--muted); line-height:1.65; margin:0 0 1.25rem;">
Point your camera at the night sky and watch constellations get outlined and named on the feed in real time.
</p>
<span style="font-size:.8125rem; font-weight:600; color:#a5b4fc;">Open camera →</span>
</a>
</div>
</section>
{% endblock %}
|