Spaces:

victor
/

sd-demo-pan

Running

App Files Files Community

victor HF staff commited on Sep 27, 2022

Commit

3f5af45

•

1 Parent(s): 41372f5

init

Browse files

Files changed (5) hide show

.DS_Store +0 -0
app.js +30 -0
index.html +79 -22
multiplayer.js +141 -0
style.css +0 -28

.DS_Store ADDED Viewed

Binary file (6.15 kB). View file

app.js ADDED Viewed

	@@ -0,0 +1,30 @@

+const board = document.getElementById("board");
+const parent = board.parentElement;
+let transforms = { x: 0, y: 0, scale: 1 };
+const panzoom = Panzoom(board, {
+  startScale: transforms.scale,
+  startX: transforms.x,
+  startY: transforms.y,
+  canvas: true,
+});
+parent.addEventListener("wheel", panzoom.zoomWithWheel);
+// No function bind needed
+// This demo binds to shift + wheel
+parent.addEventListener("wheel", function (event) {
+  if (!event.shiftKey) return;
+  panzoom.zoomWithWheel(event);
+});
+board.addEventListener("panzoomchange", (event) => {
+  transforms = event.detail; // => { x: 0, y: 0, scale: 1 }
+});
+setTimeout(() => {
+  html2canvas(board, { useCORS: true }).then((canvas) => {
+    document.body.appendChild(canvas);
+  });
+}, 4000);

index.html CHANGED Viewed

@@ -1,24 +1,81 @@
 <!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 lang="en">
+  <meta charset="UTF-8" />
+  <title>Stable Diffusion Multiplayer</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <script src="https://unpkg.com/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
+  <script src="//unpkg.com/alpinejs" defer></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+  <body>
+    <!-- UI -->
+    <div class="absolute z-10 p-8">
+      <h1 class="text-4xl font-bold">Stable Diffusion together</h1>
+      <p class="text-xl text-gray-500">
+        Infinite multiplayer canvas for Stable Diffusion
+      </p>
+    </div>
+    <div
+      class="fixed bottom-16 inset-x-0 flex items-center justify-center z-50 space-x-2"
+    >
+      <button
+        class="text-2xl bg-black text-white py-2 px-5 rounded-2xl hover:bg-gradient-to-br from-red-700 to-blue-700 shadow-2xl font-bold"
+      >
+        <span class="mr-2">✋</span> Move
+      </button>
+      <button
+        class="text-2xl bg-gray-400 text-gray-200 py-2 px-5 rounded-2xl hover:bg-gradient-to-br from-red-700 to-blue-700 shadow-2xl font-bold"
+      >
+        <span class="mr-2">✏️</span> Paint
+      </button>
+    </div>
+    <!-- BOARD -->
+    <div class="h-screen w-screen overflow-hidden bg-gray-200 relative">
+      <svg
+        class="cursor absolute"
+        id="cursor-template"
+        width="48"
+        height="72"
+        viewBox="0 0 24 36"
+        fill="transparent"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z"
+        />
+      </svg>
+      <div
+        id="cursors-container"
+        class="w-[2560px] h-[2560px] absolute inset-0 z-20"
+      ></div>
+      <div id="text" class="absolute bg-black z-30 text-white"></div>
+      <div
+        id="board"
+        class="w-[2560px] bg-white h-[2560px] bg-whtie relative border-gray-300 border"
+      >
+        <div
+          class="top-[256px] left-[256px] h-[512px] w-[512px] absolute border-2 border-indigo-300 bg-gradient-to-t from-indigo-500/50 z-10 to-transparent text-indigo-600 text-2xl flex flex-col justify-between p-4"
+        >
+          <div class="self-end">User 12</div>
+          <div class="self-center font-semibold">Click to paint</div>
+          <div>a rabbit eating a red carrot aezaze azeaezaza aze azae</div>
+        </div>
+        <div
+          class="bg-[url('http://placekitten.com/300/300')] bg-cover top-[512px] left-[512px] h-[512px] w-[512px] absolute border-2 border-red-600 text-red-700 text-2xl flex flex-col justify-between overflow-hidden"
+        >
+          <!-- <img
+            @click="open = true"
+            src="http://placekitten.com/300/300"
+            class="w-full h-full"
+          /> -->
+        </div>
+      </div>
+    </div>
+    <script src="./app.js"></script>
+    <script src="./multiplayer.js" type="module"></script>
+  </body>
 </html>

multiplayer.js ADDED Viewed

	@@ -0,0 +1,141 @@

+import { createClient } from "https://cdn.skypack.dev/@liveblocks/client";
+let PUBLIC_KEY = "pk_test_L8JkCoBm0bYACwp5oOJQsj2n";
+let roomId = "javascript-live-cursors";
+overrideApiKeyAndRoomId();
+if (!/^pk_(live|test)/.test(PUBLIC_KEY)) {
+  console.warn(
+    `Replace "${PUBLIC_KEY}" by your public key from https://liveblocks.io/dashboard/apikeys.\n` +
+      `Learn more: https://github.com/liveblocks/liveblocks/tree/main/examples/javascript-live-cursors#getting-started.`
+  );
+}
+const client = createClient({
+  publicApiKey: PUBLIC_KEY,
+});
+const room = client.enter(roomId, { initialPresence: { cursor: null } });
+const cursorsContainer = document.getElementById("cursors-container");
+const text = document.getElementById("text");
+room.subscribe("my-presence", (presence) => {
+  const cursor = presence?.cursor ?? null;
+  text.innerHTML = cursor
+    ? `${cursor.x} × ${cursor.y}`
+    : "Move your cursor to broadcast its position to other people in the room.";
+});
+/**
+ * Subscribe to every others presence updates.
+ * The callback will be called if you or someone else enters or leaves the room
+ * or when someone presence is updated
+ */
+room.subscribe("others", (others, event) => {
+  switch (event.type) {
+    case "reset": {
+      // Clear all cursors
+      cursorsContainer.innerHTML = "";
+      for (const user of others.toArray()) {
+        updateCursor(user);
+      }
+      break;
+    }
+    case "leave": {
+      deleteCursor(event.user);
+      break;
+    }
+    case "enter":
+    case "update": {
+      updateCursor(event.user);
+      break;
+    }
+  }
+});
+// get mouse position relative to an element
+function getMousePosition(event, element) {
+  const rect = element.getBoundingClientRect();
+  return {
+    x: event.clientX - rect.left,
+    y: event.clientY - rect.top,
+  };
+}
+// Get mouse position related to a transform and a scale
+// function getMousePosition(event, transform, scale) {
+//   console.log(scale);
+//   const rect = event.target.getBoundingClientRect();
+//   const x = (event.offsetX - transform.x) / scale;
+//   const y = (event.offsetY - transform.y) / scale;
+//   return { x, y };
+// }
+document.addEventListener("pointermove", (e) => {
+  e.preventDefault();
+  //   const { offsetX, offsetY, clientX, clientY } = e;
+  //   console.log(offsetX, offsetY, clientX, clientY);
+  //   console.log(getMousePosition(e, board));
+  room.updatePresence({
+    cursor: getMousePosition(e, board),
+  });
+});
+document.addEventListener("pointerleave", (e) => {
+  room.updatePresence({ cursor: null });
+});
+const COLORS = ["#DC2626", "#D97706", "#059669", "#7C3AED", "#DB2777"];
+// Update cursor position based on user presence
+function updateCursor(user) {
+  const cursor = getCursorOrCreate(user.connectionId);
+  if (user.presence?.cursor) {
+    cursor.style.transform = `translateX(${user.presence.cursor.x}px) translateY(${user.presence.cursor.y}px)`;
+    cursor.style.opacity = "1";
+  } else {
+    cursor.style.opacity = "0";
+  }
+}
+function getCursorOrCreate(connectionId) {
+  let cursor = document.getElementById(`cursor-${connectionId}`);
+  if (cursor == null) {
+    cursor = document.getElementById("cursor-template").cloneNode(true);
+    cursor.id = `cursor-${connectionId}`;
+    cursor.style.fill = COLORS[connectionId % COLORS.length];
+    cursorsContainer.appendChild(cursor);
+  }
+  return cursor;
+}
+function deleteCursor(user) {
+  const cursor = document.getElementById(`cursor-${user.connectionId}`);
+  if (cursor) {
+    cursor.parentNode.removeChild(cursor);
+  }
+}
+/**
+ * This function is used when deploying an example on liveblocks.io.
+ * You can ignore it completely if you run the example locally.
+ */
+function overrideApiKeyAndRoomId() {
+  const query = new URLSearchParams(window?.location?.search);
+  const apiKey = query.get("apiKey");
+  const roomIdSuffix = query.get("roomId");
+  if (apiKey) {
+    PUBLIC_KEY = apiKey;
+  }
+  if (roomIdSuffix) {
+    roomId = `${roomId}-${roomIdSuffix}`;
+  }
+}

style.css DELETED Viewed

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
-}