Spaces:

awacke1
/

ChatGPTGeniusWriter-HTML5-Output-1

Running

App Files Files Community

awacke1 commited on Jul 30, 2023

Commit

c0fd12b

1 Parent(s): 6744e6e

Update index.html

Browse files

Files changed (1) hide show

index.html +139 -16

index.html CHANGED Viewed

@@ -1,19 +1,142 @@
 <!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>

 <!DOCTYPE html>
 <html>
+<head>
+    <meta charset="utf-8">
+    <title>Aframe and Three.js Keyboard Interaction Demo</title>
+    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+    <script src="https://threejs.org/build/three.js"></script>
+</head>
+<body>
+    <a-scene keyboard-shortcuts>
+        <a-entity position="0 1.6 0">
+            <a-entity id="camera" camera look-controls wasd-controls></a-entity>
+        </a-entity>
+        <a-sky color="#0000ff"></a-sky>
+        <a-entity id="lettersContainer"></a-entity>
+    </a-scene>
+    <script>
+        AFRAME.registerComponent('keyboard-shortcuts', {
+            init: function () {
+                window.addEventListener('keydown', (event) => {
+                    const key = event.key.toLowerCase();
+                    if (key.length === 1 && /^[a-z]+$/.test(key)) {
+                        this.generateLetter(key);
+                    }
+                });
+            },
+            generateLetter: function (key) {
+                const lettersContainer = document.querySelector('#lettersContainer');
+                const letter = document.createElement('a-entity');
+                letter.setAttribute('text', {
+                    value: key.toUpperCase(),
+                    align: 'center',
+                    font: 'https://cdn.aframe.io/fonts/Exo2SemiBold.fnt',
+                    width: 2
+                });
+                letter.setAttribute('position', '0 1 -5');
+                letter.setAttribute('rotation', '0 0 0');
+                letter.setAttribute('scale', '1 1 1');
+                letter.setAttribute('letter', '');
+                lettersContainer.appendChild(letter);
+            }
+        });
+        AFRAME.registerComponent('letter', {
+            init: function () {
+                this.el.setAttribute('animation', {
+                    property: 'rotation',
+                    to: '0 360 0',
+                    dur: 2000,
+                    easing: 'linear',
+                    loop: true
+                });
+                this.el.setAttribute('animation__position', {
+                    property: 'position',
+                    to: '0 1 20',
+                    dur: 2000,
+                    easing: 'linear',
+                    loop: true
+                });
+            }
+        });
+    </script>
+</body>
 </html>
+Here's an example of an A-Frame and Three.js demonstration that includes keyboard interaction, dynamically generated 3D letters, camera and WASD control, and a skybox with blue, yellow, and white chaos-driven visuals. Additionally, it includes a function to call a web service and display the results.
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Aframe and Three.js Keyboard Interaction Demo</title>
+  <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
+  <script src="https://threejs.org/build/three.js"></script>
+</head>
+<body>
+  <a-scene keyboard-shortcuts>
+    <a-entity position="0 1.6 0">
+      <a-entity id="camera" camera look-controls wasd-controls></a-entity>
+    </a-entity>
+    <a-sky color="#0000ff"></a-sky>
+    <a-entity id="lettersContainer"></a-entity>
+  </a-scene>
+  <script>
+    AFRAME.registerComponent('keyboard-shortcuts', {
+      init: function () {
+        window.addEventListener('keydown', (event) => {
+          const key = event.key.toLowerCase();
+          if (key.length === 1 && /^[a-z]+$/.test(key)) {
+            this.generateLetter(key);
+          }
+        });
+      },
+      generateLetter: function (key) {
+        const lettersContainer = document.querySelector('#lettersContainer');
+        const letter = document.createElement('a-entity');
+        letter.setAttribute('text', {
+          value: key.toUpperCase(),
+          align: 'center',
+          font: 'https://cdn.aframe.io/fonts/Exo2SemiBold.fnt',
+          width: 2
+        });
+        letter.setAttribute('position', '0 1 -5');
+        letter.setAttribute('rotation', '0 0 0');
+        letter.setAttribute('scale', '1 1 1');
+        letter.setAttribute('letter', '');
+        lettersContainer.appendChild(letter);
+      }
+    });
+    AFRAME.registerComponent('letter', {
+      init: function () {
+        this.el.setAttribute('animation', {
+          property: 'rotation',
+          to: '0 360 0',
+          dur: 2000,
+          easing: 'linear',
+          loop: true
+        });
+        this.el.setAttribute('animation__position', {
+          property: 'position',
+          to: '0 1 20',
+          dur: 2000,
+          easing: 'linear',
+          loop: true
+        });
+      }
+    });
+    // Call web service and display results
+    fetch('https://api11.salmonground-a8f39f59.centralus.azurecontainerapps.io/selftest')
+      .then(response => response.json())
+      .then(data => console.log(data));
+  </script>
+</body>
+</html>