Spaces:

VISHAL18for4
/

forge3d

Sleeping

App Files Files Community

VISHAL18for4 commited on May 12

Commit

2336c29

verified ·

1 Parent(s): 18bc753

Delete static/homepage.html

Browse files

Files changed (1) hide show

static/homepage.html +0 -384

static/homepage.html DELETED Viewed

@@ -1,384 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1.0">
-<title>FORGE3D — AI-Powered 3D Creation</title>
-<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
-<style>
-*{margin:0;padding:0;box-sizing:border-box;}
-:root{--or:#e87d39;--pu:#a855f7;--bg:#070707;--bg2:#0f0f0f;--bg3:#161616;--bd:#1e1e1e;--tx:#e0e0e0;--mu:#555;}
-html{scroll-behavior:smooth;}
-body{background:var(--bg);color:var(--tx);font-family:'Inter',sans-serif;overflow-x:hidden;}
-nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(7,7,7,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--bd);}
-.nlogo{display:flex;align-items:center;gap:10px;text-decoration:none;}
-.nsq{width:30px;height:30px;background:linear-gradient(135deg,var(--or),var(--pu));border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',monospace;font-weight:900;font-size:13px;color:#fff;}
-.nnm{font-family:'Orbitron',monospace;font-weight:700;font-size:17px;letter-spacing:2px;color:#fff;}
-.nnm span{color:var(--or);}
-.nlinks{display:flex;gap:28px;list-style:none;}
-.nlinks a{color:var(--mu);text-decoration:none;font-size:13px;transition:color .2s;}
-.nlinks a:hover{color:#fff;}
-.ncta{padding:8px 22px;background:linear-gradient(135deg,var(--or),var(--pu));border-radius:8px;color:#fff;text-decoration:none;font-size:13px;font-weight:600;}
-.ncta:hover{opacity:.85;}
-/* HERO */
-#hero{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:120px 40px 80px;text-align:center;}
-.hbg{position:absolute;inset:0;}
-.horb{position:absolute;border-radius:50%;filter:blur(110px);animation:flt 9s ease-in-out infinite;}
-.horb.o1{width:700px;height:700px;background:radial-gradient(circle,rgba(232,125,57,.12),transparent 70%);top:-250px;left:-150px;}
-.horb.o2{width:550px;height:550px;background:radial-gradient(circle,rgba(168,85,247,.09),transparent 70%);bottom:-150px;right:-100px;animation-delay:4s;}
-@keyframes flt{0%,100%{transform:translateY(0);}50%{transform:translateY(-35px);}}
-.hgrid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);background-size:55px 55px;}
-.hcontent{position:relative;z-index:2;max-width:940px;margin:0 auto;}
-.hbadge{display:inline-flex;align-items:center;gap:8px;padding:5px 16px;background:rgba(232,125,57,.07);border:1px solid rgba(232,125,57,.22);border-radius:30px;font-size:11px;color:var(--or);margin-bottom:28px;letter-spacing:1px;font-weight:600;}
-.hbadge::before{content:'';width:7px;height:7px;background:var(--or);border-radius:50%;animation:pl 2s infinite;}
-@keyframes pl{0%,100%{opacity:1;}50%{opacity:.2;}}
-h1{font-family:'Orbitron',monospace;font-size:clamp(34px,6vw,80px);font-weight:900;line-height:1.05;letter-spacing:-2px;margin-bottom:20px;background:linear-gradient(135deg,#fff 25%,var(--or) 55%,var(--pu));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
-.hsub{font-size:clamp(14px,1.8vw,19px);color:#777;max-width:560px;margin:0 auto 44px;line-height:1.85;font-weight:300;}
-.hsub b{color:var(--or);font-weight:500;}
-.hbtns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:64px;}
-.bp{padding:14px 36px;background:linear-gradient(135deg,var(--or),var(--pu));border-radius:10px;color:#fff;text-decoration:none;font-size:15px;font-weight:700;transition:transform .2s,box-shadow .2s;box-shadow:0 0 32px rgba(232,125,57,.22);}
-.bp:hover{transform:translateY(-2px);box-shadow:0 10px 38px rgba(232,125,57,.4);}
-.bs{padding:14px 36px;background:transparent;border:1px solid #272727;border-radius:10px;color:#aaa;text-decoration:none;font-size:15px;font-weight:600;transition:all .2s;}
-.bs:hover{background:#141414;border-color:#404040;color:#fff;}
-/* DEMO */
-.hdemo{background:var(--bg3);border:1px solid var(--bd);border-radius:13px;overflow:hidden;max-width:860px;margin:0 auto;box-shadow:0 36px 90px rgba(0,0,0,.88);}
-.dbar{height:32px;background:#080808;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:7px;padding:0 14px;}
-.dd{width:10px;height:10px;border-radius:50%;}
-.durl{flex:1;background:#111;border-radius:3px;height:19px;margin:0 10px;display:flex;align-items:center;padding:0 10px;color:#3a3a3a;font-size:10px;}
-.dcanvas{background:linear-gradient(135deg,#080812 0%,#08101e 100%);height:360px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;}
-.scene3{perspective:540px;width:180px;height:180px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
-.cwrap{width:120px;height:120px;position:absolute;top:50%;left:50%;transform-style:preserve-3d;animation:rc 7s linear infinite;transform:translate(-50%,-50%);}
-@keyframes rc{from{transform:translate(-50%,-50%) rotateY(0) rotateX(18deg);}to{transform:translate(-50%,-50%) rotateY(360deg) rotateX(18deg);}}
-.fc{position:absolute;width:120px;height:120px;border:1.5px solid rgba(232,125,57,.45);background:rgba(232,125,57,.035);}
-.fc.fr{transform:translateZ(60px);}
-.fc.bk{transform:translateZ(-60px) rotateY(180deg);}
-.fc.lf{transform:translateX(-60px) rotateY(-90deg);}
-.fc.rt{transform:translateX(60px) rotateY(90deg);}
-.fc.tp{transform:translateY(-60px) rotateX(90deg);}
-.fc.bt{transform:translateY(60px) rotateX(-90deg);}
-.gfloor{position:absolute;bottom:0;left:0;right:0;height:42%;background:linear-gradient(transparent,rgba(232,125,57,.02));border-top:1px solid rgba(232,125,57,.07);}
-.dlbl{position:absolute;bottom:14px;left:14px;background:rgba(0,0,0,.78);padding:6px 11px;border-radius:6px;font-size:10px;color:#666;border:1px solid #181818;}
-.dlbl span{color:var(--or);font-weight:600;}
-.aibubble{position:absolute;top:16px;right:16px;background:linear-gradient(135deg,var(--or),var(--pu));padding:8px 13px;border-radius:9px 9px 2px 9px;font-size:11px;color:#fff;max-width:185px;line-height:1.5;box-shadow:0 6px 22px rgba(168,85,247,.3);}
-/* SECTIONS */
-.sec{padding:100px 40px;}
-.sec.dark{background:var(--bg2);}
-.stag{text-align:center;color:var(--or);font-size:11px;letter-spacing:3px;font-weight:700;text-transform:uppercase;margin-bottom:12px;}
-.stitle{text-align:center;font-family:'Orbitron',monospace;font-size:clamp(24px,3.2vw,42px);font-weight:900;margin-bottom:14px;color:#fff;}
-.ssub{text-align:center;color:var(--mu);font-size:14px;max-width:460px;margin:0 auto 64px;line-height:1.75;}
-/* FEATURES GRID */
-.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(275px,1fr));gap:1px;max-width:1160px;margin:0 auto;background:var(--bd);}
-.fcard{background:var(--bg2);padding:34px 30px;transition:background .2s;}
-.fcard:hover{background:var(--bg3);}
-.ficon{width:50px;height:50px;background:rgba(232,125,57,.08);border:1px solid rgba(232,125,57,.16);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:18px;}
-.ftitle{font-size:17px;font-weight:700;color:#fff;margin-bottom:9px;}
-.fdesc{color:var(--mu);font-size:13px;line-height:1.8;}
-.ftag{display:inline-block;margin-top:13px;padding:3px 9px;background:rgba(168,85,247,.07);border:1px solid rgba(168,85,247,.16);border-radius:20px;color:var(--pu);font-size:10px;font-weight:600;}
-/* MODELS */
-.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:1060px;margin:0 auto;}
-@media(max-width:750px){.mgrid{grid-template-columns:1fr;}}
-.mcard{background:var(--bg);border:1px solid var(--bd);border-radius:13px;padding:26px;position:relative;overflow:hidden;transition:border-color .2s,transform .2s;}
-.mcard:hover{border-color:#282828;transform:translateY(-3px);}
-.mcard::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;}
-.mc1::after{background:linear-gradient(90deg,#ff6b35,#ff9955);}
-.mc2::after{background:linear-gradient(90deg,#76b900,#a3e635);}
-.mc3::after{background:linear-gradient(90deg,var(--pu),#7c3aed);}
-.micon{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:16px;}
-.mc1 .micon{background:rgba(255,107,53,.11);}
-.mc2 .micon{background:rgba(118,185,0,.11);}
-.mc3 .micon{background:rgba(168,85,247,.11);}
-.mname{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px;}
-.mlbl{font-size:10px;color:var(--mu);letter-spacing:1px;text-transform:uppercase;margin-bottom:13px;}
-.mdesc{color:#5a5a5a;font-size:13px;line-height:1.7;margin-bottom:16px;}
-.mfeats{list-style:none;display:flex;flex-direction:column;gap:6px;}
-.mfeats li{font-size:12px;color:#4a4a4a;display:flex;align-items:flex-start;gap:7px;}
-.mfeats li::before{content:'→';color:var(--or);flex-shrink:0;}
-.mbadge{position:absolute;top:16px;right:16px;padding:3px 8px;border-radius:20px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
-.mc1 .mbadge{background:rgba(255,107,53,.1);color:#ff6b35;border:1px solid rgba(255,107,53,.22);}
-.mc2 .mbadge{background:rgba(118,185,0,.1);color:#76b900;border:1px solid rgba(118,185,0,.22);}
-.mc3 .mbadge{background:rgba(168,85,247,.1);color:var(--pu);border:1px solid rgba(168,85,247,.22);}
-/* HOW */
-.hsteps{display:flex;flex-direction:column;max-width:760px;margin:0 auto;}
-.hstep{display:flex;gap:34px;align-items:flex-start;padding:38px 0;border-bottom:1px solid var(--bd);}
-.hstep:last-child{border-bottom:none;}
-.hnum{width:54px;height:54px;border-radius:12px;background:var(--bg3);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;font-family:'Orbitron',monospace;font-weight:900;font-size:19px;color:var(--or);flex-shrink:0;}
-.htitle{font-size:19px;font-weight:700;color:#fff;margin-bottom:9px;}
-.hdescr{color:var(--mu);font-size:13px;line-height:1.8;}
-.hcode{margin-top:13px;background:var(--bg);border:1px solid var(--bd);border-radius:7px;padding:11px 15px;font-family:'Courier New',monospace;font-size:12px;color:#4ade80;line-height:1.9;}
-.hcode .cm{color:#2d2d2d;}
-/* SKILLS */
-.skgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(175px,1fr));gap:12px;margin-top:52px;}
-.skcard{background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:20px 16px;text-align:center;transition:border-color .2s;}
-.skcard:hover{border-color:rgba(232,125,57,.28);}
-.skicon{font-size:26px;margin-bottom:9px;}
-.skname{font-size:13px;font-weight:600;color:#bbb;margin-bottom:4px;}
-.skdesc{font-size:11px;color:#3f3f3f;line-height:1.5;}
-.skbox{margin-top:36px;background:var(--bg);border:1px solid var(--bd);border-radius:9px;padding:26px 30px;}
-.skbox pre{font-family:'Courier New',monospace;font-size:12px;color:#4ade80;line-height:2.1;white-space:pre-wrap;}
-.skbox .cm{color:#2d2d2d;}
-/* CTA */
-#cta{padding:100px 40px;text-align:center;position:relative;overflow:hidden;}
-#cta::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 65% 45% at 50% 50%,rgba(232,125,57,.05),transparent);}
-.ctainner{position:relative;z-index:2;}
-.ctatitle{font-family:'Orbitron',monospace;font-size:clamp(26px,4vw,50px);font-weight:900;color:#fff;margin-bottom:14px;}
-.ctasub{color:var(--mu);font-size:16px;margin-bottom:42px;}
-.stats{display:flex;gap:52px;justify-content:center;margin-bottom:50px;flex-wrap:wrap;}
-.stat .sn{font-family:'Orbitron',monospace;font-size:32px;font-weight:900;color:var(--or);}
-.stat .sl{color:var(--mu);font-size:12px;margin-top:3px;}
-footer{background:var(--bg);border-top:1px solid var(--bd);padding:28px 40px;text-align:center;color:#2e2e2e;font-size:12px;}
-footer a{color:#383838;text-decoration:none;}footer a:hover{color:#666;}
-@media(max-width:680px){nav{padding:10px 16px;}.nlinks{display:none;}.sec{padding:65px 18px;}.hstep{flex-direction:column;gap:14px;}#hero{padding:88px 18px 55px;}}
-</style>
-</head>
-<body>
-<nav>
-  <a class="nlogo" href="/"><div class="nsq">F</div><div class="nnm">FORGE<span>3D</span></div></a>
-  <ul class="nlinks">
-    <li><a href="#features">Features</a></li>
-    <li><a href="#models">AI Models</a></li>
-    <li><a href="#how">How It Works</a></li>
-    <li><a href="#skills">Skills</a></li>
-  </ul>
-  <a class="ncta" href="/editor">Open Editor →</a>
-</nav>
-<section id="hero">
-  <div class="hbg"><div class="horb o1"></div><div class="horb o2"></div><div class="hgrid"></div></div>
-  <div class="hcontent">
-    <div class="hbadge">✦ AI-Powered 3D Creation Platform v4.0</div>
-    <h1>Build 3D Worlds<br>With Your Words</h1>
-    <p class="hsub">FORGE3D is a browser-based 3D editor powered by <b>three AI engines</b>. Describe anything — missiles, black holes, solar systems — and watch it appear in seconds. Sculpt, animate, texture, render.</p>
-    <div class="hbtns">
-      <a class="bp" href="/editor">🚀 Launch Editor</a>
-      <a class="bs" href="#how">How It Works ↓</a>
-    </div>
-    <div class="hdemo">
-      <div class="dbar">
-        <div class="dd" style="background:#ff5f57;"></div>
-        <div class="dd" style="background:#febc2e;"></div>
-        <div class="dd" style="background:#28c840;"></div>
-        <div class="durl">🔒 forge3d.hf.space/editor</div>
-      </div>
-      <div class="dcanvas">
-        <div class="scene3">
-          <div class="cwrap">
-            <div class="fc fr"></div><div class="fc bk"></div>
-            <div class="fc lf"></div><div class="fc rt"></div>
-            <div class="fc tp"></div><div class="fc bt"></div>
-          </div>
-        </div>
-        <div class="gfloor"></div>
-        <div class="dlbl">Mode: <span>Sculpt</span> · Objects: <span>24</span> · FPS: <span>120</span></div>
-        <div class="aibubble">🔮 "Build a missile with chrome nose and glowing exhaust nozzle"</div>
-      </div>
-    </div>
-  </div>
-</section>
-<section id="features" class="sec">
-  <div class="stag">Core Features</div>
-  <div class="stitle">Everything In One Place</div>
-  <p class="ssub">Professional 3D tools wrapped in an AI-first interface.</p>
-  <div class="fgrid">
-    <div class="fcard">
-      <div class="ficon">🤖</div>
-      <div class="ftitle">Triple AI Engine</div>
-      <div class="fdesc">Groq for fast commands, Nemotron for full scenes, Detail AI (Deepseek-R1) for hyper-complex 50-part models. Each has a specialized system prompt loaded with Three.js expertise.</div>
-      <span class="ftag">Groq · Nemotron · OpenRouter (fixed)</span>
-    </div>
-    <div class="fcard">
-      <div class="ficon">🎨</div>
-      <div class="ftitle">AI Texture Search</div>
-      <div class="fdesc">New /api/texture-search endpoint. Describe the material and the AI fetches a free PBR texture from Poly Haven or AmbientCG and applies it via TextureLoader automatically.</div>
-      <span class="ftag">Poly Haven · AmbientCG · Free CDN</span>
-    </div>
-    <div class="fcard">
-      <div class="ficon">✏️</div>
-      <div class="ftitle">Real Sculpt Mode</div>
-      <div class="fdesc">Draw, Smooth, Grab, Inflate, Flatten, Crease — 6 brushes with adjustable size and strength. Subdivide any mesh for more geometry before sculpting. Touch-ready for tablets.</div>
-      <span class="ftag">6 Brushes · Subdivide · Touch</span>
-    </div>
-    <div class="fcard">
-      <div class="ficon">🎬</div>
-      <div class="ftitle">AI Animation (Fixed)</div>
-      <div class="fdesc">Solar systems now animate with requestAnimationFrame loops — not just static placement. AI writes both timeline keyframes AND continuous motion code. Press Space to play.</div>
-      <span class="ftag">Keyframe · RAF Loop · Easing</span>
-    </div>
-    <div class="fcard">
-      <div class="ficon">📜</div>
-      <div class="ftitle">Script Editor Tab</div>
-      <div class="fdesc">Click the <b style="color:var(--or)">📝 Script</b> tab in the tab bar above the viewport (it's always visible). All AI code lands here. Run, edit, or use built-in templates.</div>
-      <span class="ftag">Three.js · Live Execute · Tab Always Visible</span>
-    </div>
-    <div class="fcard">
-      <div class="ficon">🧠</div>
-      <div class="ftitle">Custom Skills File</div>
-      <div class="fdesc">Upload SKILLS.md to your HuggingFace Space root. app.py reads it automatically and injects it into every AI request. Teach it your style, materials, and patterns.</div>
-      <span class="ftag">Markdown · Auto-loaded by app.py</span>
-    </div>
-  </div>
-</section>
-<section id="models" class="sec dark">
-  <div class="stag">AI Engines</div>
-  <div class="stitle">Three Specialists</div>
-  <p class="ssub">Switch models based on complexity. All pre-loaded with deep 3D knowledge.</p>
-  <div class="mgrid">
-    <div class="mcard mc1">
-      <span class="mbadge">Fast</span>
-      <div class="micon">⚡</div>
-      <div class="mname">Groq</div>
-      <div class="mlbl">Llama-3.3-70B · ~1s response</div>
-      <div class="mdesc">Best for quick commands, single objects, material changes, and real-time assistance.</div>
-      <ul class="mfeats">
-        <li>Quick object creation</li>
-        <li>Material &amp; color edits</li>
-        <li>Texture application</li>
-        <li>Fallback for Nemotron if NVIDIA is offline</li>
-      </ul>
-    </div>
-    <div class="mcard mc2">
-      <span class="mbadge">Scene</span>
-      <div class="micon">🟢</div>
-      <div class="mname">Nemotron</div>
-      <div class="mlbl">NVIDIA 70B · Scene Designer</div>
-      <div class="mdesc">Full environments 15–40 objects. Now generates animated solar systems with real orbital motion via requestAnimationFrame loops.</div>
-      <ul class="mfeats">
-        <li>Complete environment scenes</li>
-        <li>Animated solar system (orbits work now)</li>
-        <li>Colored atmospheric lighting</li>
-        <li>Star fields, asteroid belts via loops</li>
-      </ul>
-    </div>
-    <div class="mcard mc3">
-      <span class="mbadge">Detail</span>
-      <div class="micon">🔮</div>
-      <div class="mname">Detail AI</div>
-      <div class="mlbl">Deepseek-R1 · 20–60 parts</div>
-      <div class="mdesc">OpenRouter is now fixed. Builds CAD-quality models: missiles, black holes with accretion disks, spaceships with full surface detail.</div>
-      <ul class="mfeats">
-        <li>Missile: LatheGeometry + fins + glow nozzle</li>
-        <li>Black hole: 5 ring disks + 200 particles</li>
-        <li>Spaceship: hull + cockpit + engines + panels</li>
-        <li>Falls back to Groq if OpenRouter fails</li>
-      </ul>
-    </div>
-  </div>
-</section>
-<section id="how" class="sec">
-  <div class="stag">Workflow</div>
-  <div class="stitle">How It Works</div>
-  <p class="ssub">From idea to 3D scene in under 10 seconds.</p>
-  <div class="hsteps">
-    <div class="hstep">
-      <div class="hnum">01</div>
-      <div>
-        <div class="htitle">Open the Editor</div>
-        <div class="hdescr">Click Launch Editor. The 3D workspace opens instantly — no install. You'll see the viewport, left toolbar, right properties panel, and timeline. The <b style="color:var(--or)">📝 Script</b> tab is always visible in the tab bar above the viewport — click it to open the code editor.</div>
-      </div>
-    </div>
-    <div class="hstep">
-      <div class="hnum">02</div>
-      <div>
-        <div class="htitle">Open AI &amp; Describe</div>
-        <div class="hdescr">Click 🤖 (bottom-right FAB or left toolbar). Pick Groq, Nemotron, or Detail AI. Be specific — include materials, size, and style for much better results.</div>
-        <div class="hcode">
-          <span class="cm">// Great prompts produce great results:</span><br>
-          "Build a missile: dark steel body, chrome nose, 4 delta fins,<br>
-          &nbsp;glowing orange nozzle, fuel line tubes, rivets"<br><br>
-          "Animated solar system: Sun + 8 planets correct sizes,<br>
-          &nbsp;all orbiting, asteroid belt, planet rotation too"<br><br>
-          "Black hole: dark sphere, 5 glowing accretion disk rings,<br>
-          &nbsp;200 swirling particles, blue polar jets"
-        </div>
-      </div>
-    </div>
-    <div class="hstep">
-      <div class="hnum">03</div>
-      <div>
-        <div class="htitle">Apply AI Textures</div>
-        <div class="hdescr">Select a mesh → click the 🎨 Texture button in the AI panel. Describe the material — the AI fetches a free PBR texture and applies it via TextureLoader. Or load your own image from the Material tab.</div>
-        <div class="hcode">
-          <span class="cm">// Ask AI to texture it:</span><br>
-          "Apply weathered concrete to the ground plane"<br>
-          "Give the hull brushed titanium texture"<br>
-          "Add oak wood planks to the floor"
-        </div>
-      </div>
-    </div>
-    <div class="hstep">
-      <div class="hnum">04</div>
-      <div>
-        <div class="htitle">Sculpt Your Mesh</div>
-        <div class="hdescr">Select a mesh → click <b style="color:var(--or)">Sculpt Mode</b> in the modebar. The right panel shows sculpt tools. Subdivide first for detail, then use Draw/Smooth/Grab/Inflate/Flatten/Crease brushes. Adjust size and strength sliders.</div>
-      </div>
-    </div>
-    <div class="hstep">
-      <div class="hnum">05</div>
-      <div>
-        <div class="htitle">Animate with AI</div>
-        <div class="hdescr">Click the 🎬 Animate button in the AI panel. Describe motion, pick duration/FPS/easing. The AI writes keyframes to the timeline AND requestAnimationFrame loops for continuous motion like orbits. Press Space to preview.</div>
-      </div>
-    </div>
-    <div class="hstep">
-      <div class="hnum">06</div>
-      <div>
-        <div class="htitle">Script Editor &amp; Render</div>
-        <div class="hdescr">Click <b style="color:var(--or)">📝 Script</b> tab above the viewport. All AI code is saved there. Edit and re-run. Press F12 to render a high-res PNG from the current camera angle.</div>
-      </div>
-    </div>
-  </div>
-</section>
-<section id="skills" class="sec dark">
-  <div class="stag">Skills System</div>
-  <div class="stitle">Teach the AI Your Style</div>
-  <p class="ssub">Upload SKILLS.md to HuggingFace and app.py reads it before every AI request.</p>
-  <div class="skgrid">
-    <div class="skcard"><div class="skicon">📐</div><div class="skname">Custom Geometry</div><div class="skdesc">Define shape patterns the AI reuses every time.</div></div>
-    <div class="skcard"><div class="skicon">🎨</div><div class="skname">Brand Materials</div><div class="skdesc">Set your color palette, applied consistently.</div></div>
-    <div class="skcard"><div class="skicon">⚙️</div><div class="skname">Custom Helpers</div><div class="skdesc">Add Three.js utils the AI will call automatically.</div></div>
-    <div class="skcard"><div class="skicon">🌐</div><div class="skname">Texture Sources</div><div class="skdesc">Point AI to your own texture CDN URLs.</div></div>
-    <div class="skcard"><div class="skicon">🔬</div><div class="skname">Physics Rules</div><div class="skdesc">Define constraints for realistic behavior.</div></div>
-    <div class="skcard"><div class="skicon">🗂️</div><div class="skname">Scene Templates</div><div class="skdesc">Pre-built setups the AI builds on top of.</div></div>
-  </div>
-  <div class="skbox">
-    <div style="color:#3a3a3a;font-size:11px;margin-bottom:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;">How to add — app.py loads SKILLS.md automatically</div>
-    <pre><span class="cm"># 1. Create SKILLS.md in your project root (same folder as app.py)</span>
-<span class="cm"># 2. Upload it to HuggingFace Space files (Files tab in your Space)</span>
-<span class="cm"># 3. app.py already reads it — no code change needed:</span>
-with open("SKILLS.md") as f:
-    CUSTOM_SKILLS = f.read()  <span class="cm"># injected into every AI request</span>
-<span class="cm"># Example SKILLS.md content:</span>
-── MY PREFERRED STYLE ──
-Default hull color: dark steel #1a1a2e, metalness 0.8, roughness 0.3
-Always add a warm point light #ff6600 at position (5, 8, 4)
-Preferred texture base: Poly Haven CDN thumbs
-For sci-fi objects: always add running light spheres (tiny, emissive)</pre>
-  </div>
-</section>
-<section id="cta">
-  <div class="ctainner">
-    <div class="stag">Get Started</div>
-    <div class="ctatitle">Start Building Now</div>
-    <p class="ctasub">No account. No install. Runs entirely in your browser.</p>
-    <div class="stats">
-      <div class="stat"><div class="sn">3</div><div class="sl">AI Engines</div></div>
-      <div class="stat"><div class="sn">60+</div><div class="sl">Geometry Types</div></div>
-      <div class="stat"><div class="sn">100%</div><div class="sl">Free &amp; Open</div></div>
-      <div class="stat"><div class="sn">0ms</div><div class="sl">Install Time</div></div>
-    </div>
-    <div class="hbtns"><a class="bp" href="/editor">🚀 Launch FORGE3D Editor</a></div>
-  </div>
-</section>
-<footer>
-  FORGE3D v4.0 AI Edition &nbsp;·&nbsp; Three.js + Groq + NVIDIA Nemotron + OpenRouter &nbsp;·&nbsp;
-  <a href="https://huggingface.co/spaces" target="_blank">Hosted on HuggingFace ↗</a>
-</footer>
-</body>
-</html>