neural-os

Runtime error

App Files Files Community

yuntian-deng commited on Oct 10, 2024

Commit

19b663b

1 Parent(s): 3863641

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +44 -33

static/index.html CHANGED Viewed

@@ -1,36 +1,47 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Fast API 🤗 Space served with Uvicorn</title>
-    <link rel="stylesheet" href="style.css" />
-    <script type="module" src="script.js"></script>
-  </head>
-  <body>
-    <main>
-      <section id="text-gen">
-        <h1>Text generation using Flan T5</h1>
-        <p>
-          Model:
-          <a
-              href="https://huggingface.co/google/flan-t5-small"
-              rel="noreferrer"
-              target="_blank"
-            >google/flan-t5-small</a
-          >
-        </p>
-        <form class="text-gen-form">
-          <label for="text-gen-input">Text prompt</label>
-          <input
-            id="text-gen-input"
-            type="text"
-            value="English: Translate There are many ducks. German:"
-          />
-          <button id="text-gen-submit">Submit</button>
-          <p class="text-gen-output"></p>
-        </form>
-      </section>
-    </main>
-  </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Simulator</title>
+</head>
+<body>
+    <canvas id="displayCanvas" width="800" height="600"></canvas>
+    <script>
+        const canvas = document.getElementById('displayCanvas');
+        const ctx = canvas.getContext('2d');
+        let socket = new WebSocket("ws://localhost:8000/ws");
+        // Capture mouse movements and clicks
+        canvas.addEventListener("mousemove", function (event) {
+            let rect = canvas.getBoundingClientRect();
+            let x = event.clientX - rect.left;
+            let y = event.clientY - rect.top;
+            socket.send(JSON.stringify({
+                "action_type": "move",
+                "mouse_position": [x, y]
+            }));
+        });
+        canvas.addEventListener("click", function (event) {
+            let rect = canvas.getBoundingClientRect();
+            let x = event.clientX - rect.left;
+            let y = event.clientY - rect.top;
+            socket.send(JSON.stringify({
+                "action_type": "left_click",
+                "mouse_position": [x, y]
+            }));
+        });
+        // Receive predicted frames and render them on the canvas
+        socket.onmessage = function (event) {
+            ctx.fillStyle = "black";  // Placeholder rendering
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+        };
+    </script>
+</body>
 </html>