Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | |
| <title>FORGE3D — AI 3D Creation</title> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box;} | |
| body{background:#080808;color:#e0e0e0;font-family:'Segoe UI',sans-serif;overflow-x:hidden;} | |
| nav{position:fixed;top:0;left:0;right:0;height:52px;background:rgba(8,8,8,.95);border-bottom:1px solid #1a1a1a;display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:100;} | |
| .nlogo{display:flex;align-items:center;gap:8px;text-decoration:none;} | |
| .nsq{width:28px;height:28px;background:linear-gradient(135deg,#e87d39,#a855f7);border-radius:6px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:13px;color:#fff;} | |
| .nnm{font-weight:700;font-size:16px;letter-spacing:2px;color:#fff;} | |
| .nnm span{color:#e87d39;} | |
| .ncta{padding:8px 20px;background:linear-gradient(135deg,#e87d39,#a855f7);border-radius:8px;color:#fff;text-decoration:none;font-size:13px;font-weight:700;} | |
| #hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px 20px 40px;background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(232,125,57,.08),transparent);} | |
| h1{font-size:clamp(36px,7vw,80px);font-weight:900;line-height:1.05;letter-spacing:-2px;margin-bottom:20px;background:linear-gradient(135deg,#fff 30%,#e87d39 60%,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} | |
| .sub{font-size:clamp(15px,2vw,19px);color:#666;max-width:560px;margin:0 auto 40px;line-height:1.8;} | |
| .sub b{color:#e87d39;font-weight:500;} | |
| .btn{padding:14px 36px;background:linear-gradient(135deg,#e87d39,#a855f7);border-radius:10px;color:#fff;text-decoration:none;font-size:15px;font-weight:700;display:inline-block;margin:6px;} | |
| .btn2{padding:14px 36px;border:1px solid #2a2a2a;border-radius:10px;color:#aaa;text-decoration:none;font-size:15px;display:inline-block;margin:6px;} | |
| .btn2:hover{background:#141414;color:#fff;} | |
| .sec{padding:80px 20px;max-width:1100px;margin:0 auto;} | |
| .stag{color:#e87d39;font-size:11px;letter-spacing:3px;font-weight:700;text-transform:uppercase;margin-bottom:10px;text-align:center;} | |
| .stitle{font-size:clamp(24px,3.5vw,40px);font-weight:900;text-align:center;margin-bottom:12px;color:#fff;} | |
| .ssub{color:#555;font-size:14px;text-align:center;max-width:440px;margin:0 auto 60px;line-height:1.7;} | |
| .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:#111;} | |
| .card{background:#0d0d0d;padding:30px;transition:background .2s;} | |
| .card:hover{background:#111;} | |
| .cico{font-size:24px;margin-bottom:14px;} | |
| .ctitle{font-size:16px;font-weight:700;color:#fff;margin-bottom:8px;} | |
| .cdesc{color:#555;font-size:13px;line-height:1.7;} | |
| .models{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} | |
| @media(max-width:700px){.models{grid-template-columns:1fr;}} | |
| .mcard{background:#0d0d0d;border:1px solid #1a1a1a;border-radius:12px;padding:24px;position:relative;} | |
| .mcard::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:12px 12px 0 0;} | |
| .mcard.m1::before{background:linear-gradient(90deg,#ff6b35,#ff9955);} | |
| .mcard.m2::before{background:linear-gradient(90deg,#76b900,#a3e635);} | |
| .mcard.m3::before{background:linear-gradient(90deg,#a855f7,#7c3aed);} | |
| .mname{font-size:17px;font-weight:700;color:#fff;margin-bottom:4px;} | |
| .mlbl{font-size:10px;color:#444;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;} | |
| .mdesc{color:#555;font-size:13px;line-height:1.6;} | |
| footer{border-top:1px solid #111;padding:24px;text-align:center;color:#333;font-size:12px;} | |
| </style> | |
| </head> | |
| <body> | |
| <nav> | |
| <a class="nlogo" href="/"><div class="nsq">F</div><div class="nnm">FORGE<span>3D</span></div></a> | |
| <a class="ncta" href="/editor">Launch Editor →</a> | |
| </nav> | |
| <section id="hero"> | |
| <h1>Build 3D Worlds<br>With AI</h1> | |
| <p class="sub">Describe anything — <b>missiles, black holes, solar systems</b> — and watch AI build it in seconds. Sculpt, animate, texture, render. All in your browser.</p> | |
| <div><a class="btn" href="/editor">🚀 Launch Editor</a><a class="btn2" href="#features">How It Works ↓</a></div> | |
| </section> | |
| <div id="features"> | |
| <div class="sec"> | |
| <div class="stag">Features</div><div class="stitle">Everything You Need</div><p class="ssub">Pro 3D tools + triple AI engine.</p> | |
| <div class="grid"> | |
| <div class="card"><div class="cico">🤖</div><div class="ctitle">Triple AI Engine</div><div class="cdesc">Groq (fast), Nemotron (scenes), Detail AI (complex). Each pre-loaded with Three.js expertise and detailed model recipes.</div></div> | |
| <div class="card"><div class="cico">🚀</div><div class="ctitle">Complex Models</div><div class="cdesc">Missiles with 15+ parts, black holes with glowing accretion disks and jets, animated solar systems with real orbital physics.</div></div> | |
| <div class="card"><div class="cico">✏️</div><div class="ctitle">Sculpt Mode</div><div class="cdesc">6 sculpt brushes: Draw, Smooth, Grab, Inflate, Flatten, Crease. Subdivide meshes for higher resolution sculpting.</div></div> | |
| <div class="card"><div class="cico">🎬</div><div class="ctitle">AI Animation</div><div class="cdesc">Describe motion and AI writes requestAnimationFrame loops. Real orbital motion, not static placement.</div></div> | |
| <div class="card"><div class="cico">📝</div><div class="ctitle">Script Tab</div><div class="cdesc">Full JS editor always visible. AI code saves here automatically. Run, edit, template-insert anytime.</div></div> | |
| <div class="card"><div class="cico">🧠</div><div class="ctitle">SKILLS.md</div><div class="cdesc">Upload SKILLS.md to HuggingFace. AI reads it before every request. Teach it your style and custom helpers.</div></div> | |
| </div> | |
| </div> | |
| <div class="sec"> | |
| <div class="stag">AI Models</div><div class="stitle">Three Specialists</div><p class="ssub">Switch based on complexity.</p> | |
| <div class="models"> | |
| <div class="mcard m1"><div class="mname">⚡ Groq</div><div class="mlbl">Llama-3.3-70B · Fast</div><div class="mdesc">Quick commands, single objects, material changes. Responds in ~1 second. Also the fallback when others fail.</div></div> | |
| <div class="mcard m2"><div class="mname">🟢 Nemotron</div><div class="mlbl">NVIDIA · Scene Designer</div><div class="mdesc">Full environments 15-40 objects. Animated solar systems with requestAnimationFrame. Atmospheric colored lighting.</div></div> | |
| <div class="mcard m3"><div class="mname">🔮 Detail AI</div><div class="mlbl">OpenRouter · Complex</div><div class="mdesc">15-50 part models. Missiles, black holes, spaceships. Uses LatheGeometry, ExtrudeGeometry, TubeGeometry. Falls back to Groq if OpenRouter rate-limits.</div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer>FORGE3D v4.0 — Three.js + Groq + NVIDIA + OpenRouter — Hosted on HuggingFace</footer> | |
| </body> | |
| </html> |