Wandering Emoji Adventure

{"name":"Pose Recognition with Teachable Machine","description":"Dive into the fascinating world of machine learning by building a pose recognition app using ml5.js and Teachable Machine. Capture and classify poses with your webcam, and watch as your computer learns to recognize them in real-time. This project is a fantastic way to explore the basics of machine learning, enhance your programming skills, and have fun with innovative technology!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-07-09T14:56:15.936188Z","updated_at":"2025-07-09T14:56:15.936189Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":8930,"user":{"username":"m_ivlev","id":166,"password_hash":"$2b$12$lM.SwMhsrEJrs7ZjNyj9e.FOyWqAZgNBSeOEkB8gCGEsXkmGPZLu6","updated_at":"2024-08-05T03:36:08.774314Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"markivlev@gmail.com","recess_id":"38a987b1-569d-47cc-ae61-0c84198aa65c","created_at":"2024-08-05T03:36:08.774307Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let characterX, characterY;\n\nlet model, webcam, ctx, labelContainer, maxPredictions;\n\nlet player;\n\nlet highestPrediction;\n\nconst URL = \"https://teachablemachine.withgoogle.com/models/DEiTsKaTz/\";\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n player = new Player(width / 2, height / 2); // Initialize player at the center\n init(); // Initialize the webcam and model\n}\n\nfunction draw() {\n drawCheckeredBackground(); // Call the function to draw the checkered background\n player.update();\n player.display();\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the screen\n player.display(); // Display the player\n}\n\nclass Player {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.speed = 5; // Speed of the player\n this.width = 50; // Width of the character (emoji size)\n this.height = 50; // Height of the character (emoji size)\n }\n\n update(highestPrediction) {\n if (highestPrediction) { // Check if highestPrediction is available\n switch (highestPrediction.className) {\n case \"Up\":\n this.y -= this.speed; // Move up\n break;\n case \"Down\":\n this.y += this.speed; // Move down\n break;\n case \"Left\":\n this.x -= this.speed; // Move left\n break;\n case \"Right\":\n this.x += this.speed; // Move right\n break;\n case \"Nothing\":\n // Do nothing\n break;\n }\n }\n\n // Boundary checks to prevent leaving the screen\n this.x = constrain(this.x, this.width / 2, width - this.width / 2);\n this.y = constrain(this.y, this.height / 2, height - this.height / 2);\n }\n\n display() {\n textSize(32);\n textAlign(CENTER, CENTER);\n text(\"😀\", this.x, this.y); // Display the character as an emoji\n }\n}\n\nfunction drawCheckeredBackground() {\n const tileSize = 50; // Size of each tile\n for (let y = 0; y < height; y += tileSize) {\n for (let x = 0; x < width; x += tileSize) {\n fill((x / tileSize + y / tileSize) % 2 === 0 ? 255 : 204, (x / tileSize + y / tileSize) % 2 === 0 ? 204 : 204, 204); // Alternate colors\n rect(x, y, tileSize, tileSize); // Draw each tile\n }\n }\n}\n\nasync function webcamLoop() {\n webcam.update(); // Update the webcam frame\n await predict(); // Get predictions\n window.requestAnimationFrame(webcamLoop); // Loop\n}\n\nasync function predict() {\n const prediction = await model.predict(webcam.canvas);\n highestPrediction = prediction[0]; // Assign to global variable\n for (let i = 1; i < maxPredictions; i++) {\n if (prediction[i].probability > highestPrediction.probability) {\n highestPrediction = prediction[i];\n }\n }\n\n // Display the prediction text\n document.getElementById(\"prediction-container\").innerHTML =\n `Prediction: ${highestPrediction.className} (${(highestPrediction.probability * 100).toFixed(2)}%)`;\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Create a loading text container\n const loadingContainer = document.createElement('div');\n loadingContainer.id = 'loading-container';\n loadingContainer.style.position = 'absolute';\n loadingContainer.style.top = '0';\n loadingContainer.style.left = '0';\n loadingContainer.style.color = 'white';\n loadingContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n loadingContainer.style.padding = '10px';\n loadingContainer.innerHTML = 'Loading AI model...';\n document.body.appendChild(loadingContainer);\n\n model = await tmImage.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const flip = true;\n webcam = new tmImage.Webcam(200, 200, flip);\n await webcam.setup();\n webcam.play();\n\n document.body.removeChild(loadingContainer);\n document.body.appendChild(webcam.canvas);\n webcam.canvas.style.position = 'absolute';\n webcam.canvas.style.top = '0';\n webcam.canvas.style.left = '0';\n\n const predictionContainer = document.createElement('div');\n predictionContainer.id = 'prediction-container';\n predictionContainer.style.position = 'absolute';\n predictionContainer.style.top = '210px';\n predictionContainer.style.left = '0';\n predictionContainer.style.color = 'white';\n predictionContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n predictionContainer.style.padding = '10px';\n document.body.appendChild(predictionContainer);\n\n window.requestAnimationFrame(webcamLoop);\n}\n\n","style.css":"body {\r\n margin: 0;\r\n}\r\n\r\ncanvas {\r\n display: block;\r\n}","index.html":"\n\n\n\n \n \n Wandering Emoji Adventure\n \n \n \n \n\n\n\n \n \n \n\n\n"},"chat_history":[{"project_id":8930,"message":"I want to add a live webcam feed using my model","created_at":"2025-07-09T15:31:22.619416Z","output_tokens":null,"deleted":0,"code_id":263144,"sender":"human","input_tokens":null,"id":157167},{"project_id":8930,"message":"

\n# Reasoning\nThe user wants to add a live webcam feed using a trained model. The existing code already sets up the webcam and uses the Teachable Machine model to make predictions on the live feed. The webcam feed is displayed, and predictions are used to move a player emoji on the canvas. Based on the current setup, it appears that the webcam feed and model integration are already implemented.\n

\n\n

\n# Answer:\n

\n\nYour project already includes a live webcam feed and uses the model for predictions to control the player. If you have any specific changes or additions in mind, please let me know!","created_at":"2025-07-09T15:31:23.552627Z","output_tokens":165,"deleted":0,"code_id":263144,"sender":"ai","input_tokens":3684,"id":157168},{"project_id":8930,"message":"I dont see the webcam when I run it","created_at":"2025-07-09T15:31:36.413349Z","output_tokens":null,"deleted":0,"code_id":263144,"sender":"human","input_tokens":null,"id":157169},{"project_id":8930,"message":"

\n# Reasoning\nThe user mentioned that the webcam is not visible. The current code is designed to initialize and display a webcam feed using Teachable Machine. The code seems to be correctly setting up the webcam and appending it to the DOM. However, there might be an issue with browser permissions or the webcam setup that could be causing it not to display. It's important to ensure that the browser has permission to access the webcam and that the webcam initialization is being called correctly.\n

\n\n

\n# Answer: \n

\n\nLet's ensure your webcam permissions are enabled in the browser, and your code correctly initializes the webcam. Please check your browser settings to allow webcam access and refresh the page. If the issue persists, let me know!","created_at":"2025-07-09T15:31:37.200422Z","output_tokens":202,"deleted":0,"code_id":263144,"sender":"ai","input_tokens":3682,"id":157170},{"project_id":8930,"message":"the issue persists","created_at":"2025-07-09T15:31:49.380811Z","output_tokens":null,"deleted":0,"code_id":263144,"sender":"human","input_tokens":null,"id":157171},{"project_id":8930,"message":"

\n# Reasoning\nThe webcam not displaying could be due to several reasons such as browser permissions, incorrect initialization, or issues with appending the video feed to the DOM. The `init()` function should be called to set up the webcam and display it. Checking the browser permissions is crucial, but since the user has already been advised on this, we should ensure the webcam is being correctly appended to the document body and that the necessary scripts are being loaded in the correct order in the HTML file.\n

\n\n

\n# Answer: \n

\n\nLet's ensure that your webcam is initialized and displayed correctly. I'll review the setup and make sure the code properly appends the webcam feed to your canvas.\n\nFirst, ensure that your `init()` function is being called in the `setup()` function:\n\n```javascript\n// script.js\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n player = new Player(width / 2, height / 2); // Initialize player at the center\n init(); // Initialize the webcam and model\n}\n```\n\nNext, make sure your `init()` function is correctly appending the webcam canvas to the DOM:\n\n```javascript\n// script.js\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Create a loading text container\n const loadingContainer = document.createElement('div');\n loadingContainer.id = 'loading-container';\n loadingContainer.style.position = 'absolute';\n loadingContainer.style.top = '0';\n loadingContainer.style.left = '0';\n loadingContainer.style.color = 'white';\n loadingContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n loadingContainer.style.padding = '10px';\n loadingContainer.innerHTML = 'Loading AI model...';\n document.body.appendChild(loadingContainer);\n\n model = await tmImage.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n const flip = true;\n webcam = new tmImage.Webcam(200, 200, flip);\n await webcam.setup();\n webcam.play();\n\n document.body.removeChild(loadingContainer);\n document.body.appendChild(webcam.canvas);\n webcam.canvas.style.position = 'absolute';\n webcam.canvas.style.top = '0';\n webcam.canvas.style.left = '0';\n\n const predictionContainer = document.createElement('div');\n predictionContainer.id = 'prediction-container';\n predictionContainer.style.position = 'absolute';\n predictionContainer.style.top = '210px';\n predictionContainer.style.left = '0';\n predictionContainer.style.color = 'white';\n predictionContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';\n predictionContainer.style.padding = '10px';\n document.body.appendChild(predictionContainer);\n\n window.requestAnimationFrame(webcamLoop);\n}\n```\n\nPlease verify that the webcam permissions are allowed in your browser settings and that no other applications are currently using the webcam. Additionally, try running your project in a different browser to see if the issue persists. If you still encounter issues, please let me know!","created_at":"2025-07-09T15:31:50.115055Z","output_tokens":773,"deleted":0,"code_id":263144,"sender":"ai","input_tokens":3676,"id":157172}],"assets":[],"messages_sent":14,"comments":[],"steps":[]}