File size: 4,256 Bytes
b1489f9 e77e8d8 b1489f9 e77e8d8 b1489f9 e77e8d8 b1489f9 e77e8d8 b1489f9 e77e8d8 | 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 | """Generate 3 Awwwards-quality website examples with Cipher SFT (via Unsloth)."""
import torch, re, os
from unsloth import FastLanguageModel
print("[1/4] Loading model with Unsloth (60GB - takes ~2min)...", flush=True)
model, tok = FastLanguageModel.from_pretrained(
model_name="/content/cipher-sft-merged",
max_seq_length=8192,
load_in_4bit=True,
dtype=None,
)
FastLanguageModel.for_inference(model)
print("[2/4] Model ready.", flush=True)
PROMPTS = {
"01-hero-particles": "Build a complete single-file HTML page with a stunning hero section featuring a Three.js particle system that responds to mouse movement. Include CDN imports for Three.js (use https://unpkg.com/three@0.160.0/build/three.module.js with importmap). Use GSAP from CDN for the headline entrance animation. Style with custom CSS - dark theme with bioluminescent blue/purple accents (#9bf, #a4f). Include a headline 'Cipher.ai' and subheadline 'The Code Kraken sees what others miss.' Make it Awwwards-quality. Output ONLY the complete HTML, nothing else.",
"02-portfolio-scroll": "Build a complete single-file HTML page that's a portfolio with smooth scrolling using Lenis from CDN. Include 3 project sections with parallax images and GSAP scroll-triggered text reveals. Dark elegant theme with custom serif typography. Use placeholder images from picsum.photos. Include CDN scripts inline. Output ONLY complete HTML.",
"03-3d-card": "Build a complete single-file HTML page with an interactive 3D card that flips and rotates on mouse hover. Use vanilla JS with CSS 3D transforms. Glassmorphism style with backdrop-filter. Include subtle GSAP animations for entry. Make the card show a Cipher product preview. Output ONLY complete HTML.",
}
os.makedirs("/content/cipher-sites", exist_ok=True)
print("[3/4] Generating sites...", flush=True)
for name, prompt in PROMPTS.items():
print(f" -> {name}", flush=True)
msgs = [
{"role": "system", "content": "You are Cipher, the Code Kraken. Award-winning frontend AI. Output only complete HTML files starting with <!DOCTYPE html>, no markdown fences, no preamble."},
{"role": "user", "content": prompt},
]
inputs = tok.apply_chat_template(
msgs, tokenize=True, add_generation_prompt=True, return_tensors="pt"
).to("cuda")
with torch.no_grad():
out = model.generate(
inputs, max_new_tokens=4096, do_sample=True,
temperature=0.7, top_p=0.9, repetition_penalty=1.05,
pad_token_id=tok.eos_token_id,
)
text = tok.decode(out[0][inputs.shape[1]:], skip_special_tokens=True)
if "```" in text:
m2 = re.search(r"```(?:html)?\s*\n?(.*?)```", text, re.DOTALL)
if m2:
text = m2.group(1)
if "<!DOCTYPE" not in text and "<html" not in text:
text = "<!DOCTYPE html><html><body><pre>" + text + "</pre></body></html>"
with open(f"/content/cipher-sites/{name}.html", "w") as f:
f.write(text)
print(f" saved ({len(text)} chars)", flush=True)
# Index page
with open("/content/cipher-sites/index.html", "w") as f:
f.write("""<!DOCTYPE html><html><head><title>Cipher Generated Sites</title>
<style>body{font-family:system-ui;max-width:700px;margin:60px auto;padding:24px;background:#0a0a0f;color:#e8e8ff}
a{display:block;padding:24px;margin:14px 0;background:#1a1a2e;color:#9bf;text-decoration:none;border-radius:12px;border:1px solid #333;transition:all .2s}
a:hover{background:#252550;border-color:#9bf;transform:translateY(-2px)}
h1{color:#a4f;font-weight:300;letter-spacing:-1px}
.tag{font-size:11px;background:#252540;padding:4px 10px;border-radius:20px;display:inline-block;margin-left:8px;color:#9bf}</style></head><body>
<h1>Cipher - Generated Sites</h1>
<p style="color:#8888aa;margin-bottom:32px">Trained on Awwwards-quality code. Three.js, GSAP, Lenis.</p>
<a href="01-hero-particles.html">01. Hero with Three.js Particles<span class="tag">Three.js + GSAP</span></a>
<a href="02-portfolio-scroll.html">02. Smooth Scroll Portfolio<span class="tag">Lenis + GSAP</span></a>
<a href="03-3d-card.html">03. Interactive 3D Card<span class="tag">CSS 3D + GSAP</span></a>
</body></html>""")
print("[4/4] DONE - 3 sites in /content/cipher-sites/", flush=True)
|