Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Transformers.js - Object Detection</title> | |
| </head> | |
| <body> | |
| <h1>Object Detection w/ 🤗 Transformers.js</h1> | |
| <label id="container" for="upload"> | |
| <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="#000" | |
| d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z"> | |
| </path> | |
| </svg> | |
| Click to upload image | |
| <label id="example">(or try example)</label> | |
| </label> | |
| <label id="status">Loading model...</label> | |
| <input id="upload" type="file" accept="image/*" /> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> | |
| <html> | |
| <head> | |
| <title>3D Tic Tac Toe</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <style> | |
| body { margin: 0; } | |
| canvas { width: 100%; height: 100%; } | |
| #buttons { position: absolute; top: 10px; left: 10px; } | |
| button { margin-right: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="buttons"> | |
| <button id="placeX">Place X</button> | |
| <button id="placeO">Place O</button> | |
| </div> | |
| <script> | |
| // Set up the scene, camera, and renderer | |
| const scene = new THREE.Scene(); | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // Create the game board | |
| const boardSize = 3; | |
| const cellSize = 1; | |
| const board = new THREE.Group(); | |
| scene.add(board); | |
| for (let i = 0; i < boardSize; i++) { | |
| for (let j = 0; j < boardSize; j++) { | |
| const geometry = new THREE.BoxGeometry(cellSize, cellSize, cellSize); | |
| const material = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true }); | |
| const cell = new THREE.Mesh(geometry, material); | |
| cell.position.set(i * cellSize, 0, j * cellSize); | |
| board.add(cell); | |
| } | |
| } | |
| // Create the confined cube | |
| const cubeSize = 10; | |
| const cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize); | |
| const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true }); | |
| const cube = new THREE.Mesh(cubeGeometry, cubeMaterial); | |
| scene.add(cube); | |
| // Set up the camera position | |
| camera.position.set(5, 5, 5); | |
| camera.lookAt(board.position); | |
| // Set up the raycaster and mouse events | |
| const raycaster = new THREE.Raycaster(); | |
| const mouse = new THREE.Vector2(); | |
| let selectedObject = null; | |
| document.addEventListener('mousedown', onMouseDown, false); | |
| document.addEventListener('mousemove', onMouseMove, false); | |
| document.addEventListener('mouseup', onMouseUp, false); | |
| function onMouseDown(event) { | |
| mouse.x = (event.clientX / window.innerWidth) * 2 - 1; | |
| mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; | |
| raycaster.setFromCamera(mouse, camera); | |
| const intersects = raycaster.intersectObjects(scene.children, true); | |
| if (intersects.length > 0) { | |
| selectedObject = intersects[0].object; | |
| } | |
| } | |
| function onMouseMove(event) { | |
| if (selectedObject) { | |
| mouse.x = (event.clientX / window.innerWidth) * 2 - 1; | |
| mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; | |
| raycaster.setFromCamera(mouse, camera); | |
| const intersects = raycaster.intersectObject(cube); | |
| if (intersects.length > 0) { | |
| selectedObject.position.copy(intersects[0].point); | |
| } | |
| } | |
| } | |
| function onMouseUp() { | |
| selectedObject = null; | |
| } | |
| // Set up the buttons for placing X and O | |
| const placeXButton = document.getElementById('placeX'); | |
| const placeOButton = document.getElementById('placeO'); | |
| placeXButton.addEventListener('click', placeX, false); | |
| placeOButton.addEventListener('click', placeO, false); | |
| function placeX() { | |
| const geometry = new THREE.BoxGeometry(cellSize * 0.8, cellSize * 0.8, cellSize * 0.8); | |
| const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); | |
| const xMark = new THREE.Mesh(geometry, material); | |
| xMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2); | |
| scene.add(xMark); | |
| } | |
| function placeO() { | |
| const geometry = new THREE.SphereGeometry(cellSize * 0.4); | |
| const material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); | |
| const oMark = new THREE.Mesh(geometry, material); | |
| oMark.position.set(Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2, Math.random() * cubeSize - cubeSize / 2); | |
| scene.add(oMark); | |
| } | |
| // Animation loop | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| // Move and bounce the objects within the confined cube | |
| scene.children.forEach(object => { | |
| if (object !== board && object !== cube) { | |
| object.position.x += (Math.random() - 0.5) * 0.1; | |
| object.position.y += (Math.random() - 0.5) * 0.1; | |
| object.position.z += (Math.random() - 0.5) * 0.1; | |
| if (object.position.x < -cubeSize / 2 || object.position.x > cubeSize / 2) { | |
| object.position.x = THREE.MathUtils.clamp(object.position.x, -cubeSize / 2, cubeSize / 2); | |
| } | |
| if (object.position.y < -cubeSize / 2 || object.position.y > cubeSize / 2) { | |
| object.position.y = THREE.MathUtils.clamp(object.position.y, -cubeSize / 2, cubeSize / 2); | |
| } | |
| if (object.position.z < -cubeSize / 2 || object.position.z > cubeSize / 2) { | |
| object.position.z = THREE.MathUtils.clamp(object.position.z, -cubeSize / 2, cubeSize / 2); | |
| } | |
| } | |
| }); | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |