Ai Pictionary

\n \n
\n \n
\n
\n

Ai Pictionary

\n \n \n

Ai Pictionary

\n Word List: \n \n

\n \n

\n
\n \n \n

\n",[],[173],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":138,"_156":184,"_158":159,"_105":185,"_100":176,"_162":186,"_164":187,"_166":22,"_167":96,"_168":188,"_98":189},"7d288390-bca1-11f0-875f-42dde27851f2","main.ts","c24ab16a-bca0-11f0-b4a3-42dde27851f2",25,["D",1762606222395],"http","import ValTown from \"npm:@valtown/sdk\";\nconst vt = new ValTown();\nconst val_id = \"c248d9ee-bca0-11f0-b4a3-42dde27851f2\";\n\nconst mimes = {\n \"html\": \"text/html\",\n \"js\": \"application/javascript\",\n \"css\": \"text/css\",\n};\n\nexport default async function (req: Request): Promise {\n const path = new URL(req.url).pathname.substring(1) || \"index.html\";\n const content = await vt.vals.files.getContent(val_id, { path }).then((r) =>\n r.text()\n );\n const ext = path.substring(path.lastIndexOf(\".\") + 1);\n\n return new Response(content, {\n headers: {\n \"content-type\": mimes[ext] || \"text/plain\",\n },\n });\n}",[],[182],{"_103":191,"_95":192,"_152":193,"_154":-5,"_155":138,"_156":194,"_158":159,"_105":195,"_100":196,"_162":197,"_164":198,"_166":22,"_167":-5,"_168":199,"_98":200},"dd48f896-bca0-11f0-a5e4-42dde27851f2","script.js","d8638da0-bca0-11f0-a0e8-42dde27851f2",8,["D",1762605954172],2,"script","import { Peer } from \"https://esm.sh/peerjs@1.5.5\";\nimport { Client, handle_file } from \"https://esm.sh/@gradio/client@1.19.1\";\n\nconst startMenuDiv = document.getElementById(\"startMenu\");\nconst joinMenuDiv = document.getElementById(\"joinMenu\");\nconst setupMenuDiv = document.getElementById(\"setupMenu\");\nconst startGameBtn = document.getElementById(\"startGameBtn\");\nconst playerListDiv = document.getElementById(\"playerList\");\nconst roomIdH2 = document.getElementById(\"roomIdDisplay\");\nconst ingameDiv = document.getElementById(\"ingame\");\nconst drawingCanvas = document.getElementById(\"drawing\");\nconst ctx = drawingCanvas.getContext(\"2d\");\nconst promptP = document.getElementById(\"prompt\");\nconst timerP = document.getElementById(\"timer\");\nconst drawingArea = document.getElementById(\"drawingArea\");\nconst resultArea = document.getElementById(\"resultArea\");\nconst wordList = document.getElementById(\"wordList\");\n\nconst peerGameId = \"clip-pictionary-3a734-\";\n\nwindow.createRoom = () => {\n startMenuDiv.style.display = \"none\";\n launchServer().then((roomId) => connectTo(roomId));\n};\n\nwindow.joinRoom = () => {\n startMenuDiv.style.display = \"none\";\n joinMenuDiv.style.display = \"block\";\n};\n\nwindow.connectRoom = () => {\n joinMenuDiv.style.display = \"none\";\n connectTo(document.getElementById(\"roomId\").value);\n};\n\nasync function launchServer() {\n startGameBtn.style.display = \"\";\n wordList.style.display = \"\";\n document.getElementById(\"wordListLabel\").style.display = \"\";\n\n let roomId = Math.floor(Math.random() * 1000000).toString();\n while (roomId.length < 6) {\n roomId = \"0\" + roomId;\n }\n\n let serverPeer = new Peer(peerGameId + roomId);\n\n let playerConns = [];\n\n function bc(data) {\n for (let conn of playerConns) {\n conn.send(data);\n }\n }\n\n let resolver;\n\n serverPeer.on(\"connection\", (conn) => {\n playerConns.push(conn);\n conn.info = {\n name: \"Player #\" + playerConns.length,\n id: conn.peer,\n };\n conn.on(\"open\", () => {\n bc({\n type: \"players\",\n data: playerConns.map((p) => p.info),\n });\n });\n conn.on(\"data\", (info) => {\n if (info.type == \"name\") {\n conn.info.name = info.data;\n bc({\n type: \"name\",\n data: { id: conn.peer, name: info.data },\n });\n }\n\n if (resolver) {\n resolver({ conn, info });\n resolver = undefined;\n }\n });\n });\n\n startGameBtn.addEventListener(\"click\", async () => {\n let started = false;\n\n let prompts;\n try {\n prompts = await fetch(\"https://corsproxy.io/\" + wordList.value);\n prompts = await prompts.text();\n prompts = prompts.split(\"\\n\");\n } catch (err) {\n alert(\"Error loading word list!\");\n return;\n }\n\n if (prompts.length < 10) {\n alert(\"Not enough words! (at least 10 needed)!\");\n return;\n }\n\n while (true) {\n let prompt = prompts[Math.floor(Math.random() * prompts.length)];\n\n bc({\n type: \"prompt\",\n data: prompt,\n });\n bc({\n type: \"timer\",\n data: \"60s left\",\n });\n\n if (!started) {\n started = true;\n bc({\n type: \"startGame\",\n });\n }\n\n let timer = 60;\n while (timer > 0) {\n await new Promise((r) => setTimeout(r, 1000));\n timer--;\n bc({\n type: \"timer\",\n data: timer + \"s left\",\n });\n }\n\n bc({\n type: \"showResult\",\n });\n\n let images = [];\n for (let conn of playerConns) {\n conn.send({\n type: \"updateImage\",\n });\n\n while (true) {\n let incoming = await new Promise((r) => (resolver = r));\n if (incoming.info.type == \"image\" && incoming.conn == conn) {\n images.push(incoming.info.data);\n break;\n }\n }\n }\n\n bc({\n type: \"images\",\n data: playerConns.map((p, i) => ({\n image: images[i],\n name: p.info.name,\n rating: \"Processing...\",\n })),\n });\n\n let ratings = [];\n\n const clip = await Client.connect(\"taesiri/CLIPScore\");\n\n let i = 0;\n for (let image of images) {\n const blob = await fetch(image).then((r) => r.blob());\n const result = await clip.predict(\"/infer\", {\n img: handle_file(blob),\n txt: prompt,\n mdl: \"CLIP ViT-B/32\",\n });\n console.log(result);\n\n ratings[i] =\n Math.floor(result.data[0].confidences[0].confidence * 100) + \"%\";\n i++;\n }\n\n bc({\n type: \"images\",\n data: playerConns.map((p, i) => ({\n image: images[i],\n name: p.info.name,\n rating: ratings[i],\n })),\n });\n\n await new Promise((r) => setTimeout(r, 3000));\n\n let btn = document.createElement(\"button\");\n btn.textContent = \"Next Round\";\n resultArea.appendChild(document.createElement(\"br\"));\n resultArea.appendChild(btn);\n\n await new Promise((r) => btn.addEventListener(\"click\", r));\n }\n });\n\n return roomId;\n}\n\nfunction connectTo(roomId) {\n roomIdH2.textContent = \"Room: \" + roomId;\n setupMenuDiv.style.display = \"block\";\n\n let peer = new Peer();\n\n peer.on(\"open\", () => {\n let conn = peer.connect(peerGameId + roomId);\n\n function project(e) {\n let bb = drawingCanvas.getBoundingClientRect();\n return {\n x: ((e.clientX - bb.left) * 256) / bb.width,\n y: ((e.clientY - bb.top) * 256) / bb.height,\n };\n }\n\n let prev = { x: 0, y: 0 };\n drawingCanvas.addEventListener(\"touchstart\", (e) => {\n if (window.getComputedStyle(drawingCanvas).display == \"none\") return;\n\n let curr = project(e.changedTouches[0]);\n ctx.fillStyle = document.getElementById(\"color\").value;\n ctx.beginPath();\n ctx.arc(\n curr.x,\n curr.y,\n parseFloat(document.getElementById(\"linewidth\").value) / 2,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n prev = curr;\n });\n drawingCanvas.addEventListener(\"touchmove\", (e) => {\n if (window.getComputedStyle(drawingCanvas).display == \"none\") return;\n\n let curr = project(e.changedTouches[0]);\n ctx.strokeStyle = document.getElementById(\"color\").value;\n ctx.lineWidth = parseFloat(document.getElementById(\"linewidth\").value);\n ctx.lineCap = \"round\";\n ctx.beginPath();\n ctx.moveTo(prev.x, prev.y);\n ctx.lineTo(curr.x, curr.y);\n ctx.stroke();\n prev = curr;\n });\n drawingCanvas.addEventListener(\"mousedown\", (e) => {\n if (window.getComputedStyle(drawingCanvas).display == \"none\") return;\n\n let curr = project(e);\n ctx.fillStyle = document.getElementById(\"color\").value;\n ctx.beginPath();\n ctx.arc(\n curr.x,\n curr.y,\n parseFloat(document.getElementById(\"linewidth\").value) / 2,\n 0,\n Math.PI * 2,\n );\n ctx.fill();\n prev = curr;\n });\n drawingCanvas.addEventListener(\"mousemove\", (e) => {\n if (window.getComputedStyle(drawingCanvas).display == \"none\") return;\n\n if (e.buttons == 0) return;\n let curr = project(e);\n ctx.strokeStyle = document.getElementById(\"color\").value;\n ctx.lineWidth = parseFloat(document.getElementById(\"linewidth\").value);\n ctx.lineCap = \"round\";\n ctx.beginPath();\n ctx.moveTo(prev.x, prev.y);\n ctx.lineTo(curr.x, curr.y);\n ctx.stroke();\n prev = curr;\n });\n\n conn.on(\"data\", (info) => {\n if (info.type == \"players\") {\n playerListDiv.innerHTML = \"\";\n\n for (let { name, id } of info.data) {\n let p = document.createElement(\"p\");\n p.textContent = name;\n p.id = id;\n playerListDiv.appendChild(p);\n\n if (id == peer.id) {\n p.contentEditable = true;\n p.addEventListener(\"focusout\", () => {\n conn.send({\n type: \"name\",\n data: p.textContent,\n });\n });\n }\n }\n }\n\n if (info.type == \"startGame\") {\n setupMenuDiv.style.display = \"none\";\n ingameDiv.style.display = \"block\";\n }\n\n if (info.type == \"prompt\") {\n promptP.textContent = info.data;\n ctx.fillStyle = \"white\";\n ctx.fillRect(0, 0, 256, 256);\n drawingArea.style.display = \"\";\n resultArea.style.display = \"none\";\n }\n\n if (info.type == \"timer\") {\n timerP.textContent = info.data;\n }\n\n if (info.type == \"showResult\") {\n resultArea.innerHTML = \"\";\n resultArea.style.display = \"\";\n drawingArea.style.display = \"none\";\n }\n\n if (info.type == \"images\") {\n resultArea.innerHTML = \"\";\n for (let { image, name, rating } of info.data) {\n let div = document.createElement(\"div\");\n\n let player = document.createElement(\"p\");\n player.textContent = name;\n div.appendChild(player);\n\n let img = new Image();\n img.src = image;\n img.style.width = \"100%\";\n div.appendChild(img);\n\n let ai = document.createElement(\"pre\");\n ai.textContent = rating;\n div.appendChild(ai);\n\n div.style.width = \"40%\";\n div.style.display = \"inline-block\";\n div.style.margin = \"5%\";\n resultArea.appendChild(div);\n }\n }\n\n if (info.type == \"updateImage\") {\n conn.send({\n type: \"image\",\n data: drawingCanvas.toDataURL(\"image/jpeg\", 0.5),\n });\n }\n\n if (info.type == \"name\") {\n document.getElementById(info.data.id).textContent = info.data.name;\n }\n });\n });\n}",[],[192],{"_103":202,"_95":203,"_152":204,"_154":-5,"_155":138,"_156":205,"_158":159,"_105":206,"_100":161,"_162":163,"_164":207,"_166":22,"_167":-5,"_168":208,"_98":209},"e6acba76-bca0-11f0-ad74-42dde27851f2","style.css","e29b786e-bca0-11f0-8d46-42dde27851f2",12,["D",1762605969928],"body {\n text-align: center;\n font-family: sans-serif;\n}\n\ncanvas {\n width: min(70vh, 90vw);\n border: solid black;\n touch-action: none;\n}\n\nbutton,\ninput {\n margin: 0.2rem;\n border: solid black 0.1rem;\n border-radius: 0.5rem;\n outline: none;\n font-size: 1.2rem;\n}\n\n#controls > button {\n width: 2.5rem;\n height: 2.5rem;\n image-rendering: pixelated;\n background-position: center;\n background-size: contain;\n}\n\npre {\n font-family: sans-serif;\n}\n\np {\n outline: none;\n}\n\np:focus {\n text-decoration: underline;\n}",[],[203],"files",[150,171,180,190,201],"counts",{"_214":32,"_215":216,"_217":32,"_218":219},"pulls","branches",1,"forks","envVars",{"_220":32,"_221":32},"count","emptyCount","contents",[],{"_103":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_105":225,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_98":226},["D",1762605988727],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.code.$",{"_93":94,"_95":96,"_97":43,"_100":-7,"_98":99,"_101":235,"_148":240,"_210":256,"_163":257,"_222":260,"_261":-5,"_262":-5,"_263":-5,"_264":-5,"_265":266},{"_103":104,"_95":96,"_105":236,"_107":-5,"_108":22,"_109":110,"_111":112,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":237,"_132":238,"_135":239,"_147":22},["D",1762605908880],{"_93":94,"_130":131},{"_93":94,"_134":131,"_14":114},{"_100":137,"_95":43,"_103":138,"_139":104,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[241,244,247,250,253],{"_103":151,"_95":99,"_152":153,"_154":-5,"_155":138,"_156":157,"_158":159,"_105":160,"_100":161,"_162":163,"_164":165,"_166":22,"_167":-5,"_168":242,"_98":243},[],[99],{"_103":172,"_95":173,"_152":174,"_154":-5,"_155":138,"_156":137,"_158":159,"_105":175,"_100":176,"_162":163,"_164":177,"_166":22,"_167":-5,"_168":245,"_98":246},[],[173],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":138,"_156":184,"_158":159,"_105":185,"_100":176,"_162":186,"_164":187,"_166":22,"_167":96,"_168":248,"_98":249},[],[182],{"_103":191,"_95":192,"_152":193,"_154":-5,"_155":138,"_156":194,"_158":159,"_105":195,"_100":196,"_162":197,"_164":198,"_166":22,"_167":-5,"_168":251,"_98":252},[],[192],{"_103":202,"_95":203,"_152":204,"_154":-5,"_155":138,"_156":205,"_158":159,"_105":206,"_100":161,"_162":163,"_164":207,"_166":22,"_167":-5,"_168":254,"_98":255},[],[203],[241,244,247,250,253],{"_103":151,"_155":138,"_152":153,"_95":99,"_164":165,"_162":163,"_100":161,"_154":-5,"_105":258,"_156":157,"_167":-5,"_98":259},["D",1762605988727],[99],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

blazemcworld

ai-pictionary