Add 2 files

index.html

@@ -1,19 +1 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<html><head><link href="https://cdn.jsdelivr.net/npm/daisyui@3.1.6/dist/full.css" rel="stylesheet" type="text/css" /><script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script><script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script><script defer src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.156.1/three.min.js"></script><script type="module" src="main.js"></script><title>Image Generator</title></head><body><nav><ul class="container"><li><a href="/">Image Generator</a></li><li><a href="/about">About</a></li></ul></nav><main class="container"><h1>Image Generator</h1><p>Generate your own images!</p><form><label for="name">Name:</label><input type="text" id="name" required><label for="age">Age:</label><input type="number" id="age" required><label for="email">Email:</label><input type="email" id="email" required></form><button id="generate">Generate</button><img id="output" src="#"></main></body></html>

main.js

@@ -0,0 +1,80 @@
+// Generate button click event listener
+document.getElementById("generate").addEventListener("click", generate);
+
+// Generate button disabled until all fields are filled
+document.querySelectorAll("input").forEach((input) => {
+ input.addEventListener("input", () => {
+    document.getElementById("generate").disabled = false;
+ });
+});
+
+// Generate image
+async function generate() {
+ const name = document.getElementById("name").value;
+ const age = document.getElementById("age").value;
+ const email = document.getElementById("email").value;
+ const canvas = document.getElementById("output");
+
+ if (!name || !age || !email) {
+    return;
+ }
+
+ const renderer = new THREE.WebGLRenderer({
+    canvas,
+ });
+
+ const camera = new THREE.PerspectiveCamera(
+    75,
+    window.innerWidth / window.innerHeight,
+    0.1,
+    1000
+ );
+
+ const scene = new THREE.Scene();
+
+ const geometry = new THREE.TextBufferGeometry(name, {
+    font: font,
+    size: 0.3,
+    height: 0.1,
+    curveSegments: 10,
+ });
+
+ const material = new THREE.MeshBasicMaterial({});
+
+ const text = new THREE.Mesh(geometry, material);
+ text.position.z = 2;
+ text.position.x = -1.5;
+ text.position.y = -1.5;
+
+ const geometry2 = new THREE.TextBufferGeometry(age, {
+    font: font,
+    size: 0.3,
+    height: 0.1,
+    curveSegments: 10,
+ });
+
+ const material2 = new THREE.MeshBasicMaterial({});
+
+ const text2 = new THREE.Mesh(geometry2, material2);
+ text2.position.z = 2;
+ text2.position.x = 1.5;
+ text2.position.y = -1.5;
+
+ scene.add(text);
+ scene.add(text2);
+
+ renderer.render(scene, camera);
+
+ const imgUri = await renderer.domElement.toDataURL("image/jpeg");
+ const link = document.createElement("a");
+ link.href = imgUri;
+ link.setAttribute("download", "image.jpg");
+ document.body.appendChild(link);
+ link.click();
+}
+
+// Get font
+const loader = new THREE.FontLoader();
+loader.load("https://unpkg.com/three@0.156.1/examples/fonts/helvetiker_regular.typeface.json", (font) => {
+ generate(font);
+});