| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
| <title>Trellis Image → 3D Generator</title> |
|
|
| <script type="module" |
| src="https://gradio.s3-us-west-2.amazonaws.com/5.34.2/gradio.js"> |
| </script> |
|
|
| <style> |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap'); |
|
|
| *{ |
| margin:0; |
| padding:0; |
| box-sizing:border-box; |
| font-family:Poppins, sans-serif; |
| } |
|
|
| body{ |
|
|
| background: linear-gradient(135deg,#0f172a,#020617); |
|
|
| color:white; |
|
|
| min-height:100vh; |
|
|
| display:flex; |
|
|
| flex-direction:column; |
|
|
| align-items:center; |
|
|
| } |
|
|
| /* Header */ |
|
|
| .header{ |
|
|
| width:100%; |
|
|
| padding:20px; |
|
|
| text-align:center; |
|
|
| background:rgba(255,255,255,0.05); |
|
|
| backdrop-filter: blur(10px); |
|
|
| border-bottom:1px solid rgba(255,255,255,0.1); |
|
|
| } |
|
|
| .header h1{ |
|
|
| font-size:28px; |
|
|
| font-weight:600; |
|
|
| background:linear-gradient(90deg,#38bdf8,#818cf8); |
|
|
| -webkit-background-clip:text; |
|
|
| color:transparent; |
|
|
| } |
|
|
| .header p{ |
|
|
| opacity:.7; |
|
|
| margin-top:8px; |
|
|
| font-size:14px; |
|
|
| } |
|
|
| /* Container */ |
|
|
| .container{ |
|
|
| width:95%; |
|
|
| max-width:1400px; |
|
|
| margin-top:25px; |
|
|
| background:rgba(255,255,255,0.04); |
|
|
| border-radius:15px; |
|
|
| padding:20px; |
|
|
| box-shadow:0 0 40px rgba(0,0,0,0.6); |
|
|
| border:1px solid rgba(255,255,255,0.08); |
|
|
| } |
|
|
| /* iframe styling */ |
|
|
| iframe{ |
|
|
| width:100%; |
|
|
| height:80vh; |
|
|
| border:none; |
|
|
| border-radius:10px; |
|
|
| background:black; |
|
|
| } |
|
|
| /* Footer */ |
|
|
| .footer{ |
|
|
| margin-top:15px; |
|
|
| opacity:.5; |
|
|
| font-size:13px; |
|
|
| } |
|
|
| /* Responsive */ |
|
|
| @media(max-width:900px){ |
|
|
| iframe{ |
|
|
| height:75vh; |
|
|
| } |
|
|
| .header h1{ |
|
|
| font-size:22px; |
|
|
| } |
|
|
| } |
|
|
| </style> |
|
|
| </head> |
|
|
| <body> |
|
|
| <div class="header"> |
|
|
| <h1>Image → 3D Asset Generator</h1> |
|
|
| <p>Generate 3D models from images using TRELLIS diffusion</p> |
|
|
| </div> |
|
|
|
|
| <div class="container"> |
|
|
| <iframe |
| src="https://trellis-community-trellis.hf.space" |
| ></iframe> |
|
|
| </div> |
|
|
| <div class="footer"> |
|
|
| GEN-AI Project • VIIT |
|
|
| </div> |
|
|
| </body> |
|
|
| </html> |
