{"name":"Cat or Dog? - Teachable Machine Demo","description":"I trained a custom model to identify an image as either a CAT or a DOG in Teachable Machine. This demo uses that trained model in a web app that lets you test your cat/dog images on it!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/yqbydkfpaylsqzfmzubb","view_count":1,"fork_count":0,"expires_at":null,"created_at":"2025-03-06T19:26:35.776581Z","updated_at":"2025-03-06T19:26:35.776583Z","user_id":246,"status":"PRIVATE","parent_id":5831,"id":6043,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// The url of my custom model, hosted on teachable machine (tensorflowjs)\nconst URL = \"https://teachablemachine.withgoogle.com/models/echvwRA3Y/\";\n\nlet model, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n}\n\nfunction draw() {\n // Game logic will go here\n}\n\nasync function init() {\n console.log(\"Initializing...\");\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n try {\n console.log(\"Loading model...\");\n model = await tmImage.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n console.log(\"Model loaded. Total classes: \" + maxPredictions);\n\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) {\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n } catch (error) {\n console.error(\"Error during initialization:\", error);\n }\n}\n\n// Call init when the script loads\ninit();\n\nasync function handleImageUpload(event) {\n const file = event.target.files[0]; // Get the uploaded file\n\n const uploadedImageElement = document.getElementById(\"uploaded-image\");\n\n if (!file) {\n console.error(\"No file uploaded.\"); // Log if no file is uploaded\n uploadedImageElement.style.display = \"none\"; // Hide the image\n return;\n }\n\n if (!file.type.startsWith('image/')) {\n console.error(\"Uploaded file is not an image.\"); // Log if the file is not an image\n uploadedImageElement.style.display = \"none\"; // Hide the image\n return;\n }\n\n console.log(\"File uploaded:\", file.name); // Log the name of the uploaded file\n\n const reader = new FileReader(); // Create a FileReader object\n reader.onload = async function (e) {\n const imgSrc = e.target.result; // Get the image source from the FileReader\n uploadedImageElement.src = imgSrc; // Set the source of the img element\n uploadedImageElement.style.display = \"block\"; // Show the image\n\n const img = new Image();\n img.src = imgSrc; // Set the image source\n img.onload = async () => {\n // Use the image's natural width and height to preserve aspect ratio\n const canvas = document.createElement('canvas');\n canvas.width = img.width;\n canvas.height = img.height;\n const ctx = canvas.getContext('2d');\n\n ctx.drawImage(img, 0, 0); // Draw the image on the canvas at natural size\n console.log(\"Image drawn on canvas.\"); // Log after drawing the image\n\n // Run the prediction on the uploaded image\n const prediction = await model.predict(canvas);\n console.log(\"Prediction made.\"); // Log when prediction is made\n console.log(prediction); // Log the raw prediction results\n\n // Update labels with predictions\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction =\n `${prediction[i].className}: ${prediction[i].probability.toFixed(2)}`; // Format prediction\n labelContainer.childNodes[i].innerHTML = classPrediction; // Update labels\n console.log(classPrediction); // Log the prediction result\n }\n };\n };\n\n reader.readAsDataURL(file); // Read the file as a data URL\n}\n\n","style.css":"canvas {\n display: block;\n}\n\n.container {\n text-align: center;\n background-color: #f0f8ff;\n /* AliceBlue */\n padding: 20px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n}\n\n.upload-section {\n margin-top: 10px;\n}\n\n.hidden {\n display: none;\n}\n\n#uploaded-image {\n display: none;\n max-width: 100%;\n /* Allow the image to resize within its container */\n height: auto;\n /* Maintain the aspect ratio */\n margin-top: 10px;\n}\n\n.description {\n font-size: 18px;\n margin-bottom: 10px;\n color: #333;\n}\n\n.classification-list {\n list-style-type: none;\n padding: 0;\n}\n\n.classification-list li {\n font-size: 16px;\n margin: 5px 0;\n color: #555;\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background: linear-gradient(45deg, #FFDEE9, #B5FFFC);\n background-size: 300% 300%;\n animation: gradientAnimation 10s ease infinite;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n overflow-y: auto;\n}\n\n@keyframes gradientAnimation {\n 0% {\n background-position: 0% 50%;\n }\n\n 50% {\n background-position: 100% 50%;\n }\n\n 100% {\n background-position: 0% 50%;\n }\n}","index.html":"\n\n\n\n \n \n Teachable Machine Image Model\n \n \n \n\n\n\n

🐱🐶 Cat and Dog Classifier with Teachable Machine 🐶🐱

Custom trained model

Upload an image of a cat or a dog. This model is trained to classify images as:

🐱 Cat
🐶 Dog
Horse

Upload your cat or dog image

\n \n

\n $\"Uploaded$ \n

\n\n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":6043,"created_at":"2025-03-06T19:46:49.886307Z","output_tokens":null,"code_id":215411,"sender":"client_script","deleted":0,"input_tokens":null,"id":115081},{"message":"Great! I see you have a project that involves classifying images of cats and dogs using a Teachable Machine model. Could you tell me more about what kind of project you want to build? Is it a game, a website, an animation, or something else? Also, do you have any specific features or enhancements you'd like to add to it?","project_id":6043,"created_at":"2025-03-06T19:46:49.893621Z","output_tokens":80,"code_id":215411,"sender":"ai","deleted":0,"input_tokens":3962,"id":115082},{"message":"Let's get started!\n Errors:\n","project_id":6043,"created_at":"2025-04-13T16:17:14.425355Z","output_tokens":null,"code_id":215441,"sender":"client_script","deleted":0,"input_tokens":null,"id":136035},{"message":"Awesome! Since you have a functioning image classifier using a Teachable Machine model, what would you like to add or enhance in your project? Are you thinking of any particular features or visuals? Let me know so we can make it even more exciting!","project_id":6043,"created_at":"2025-04-13T16:17:14.695989Z","output_tokens":62,"code_id":215441,"sender":"ai","deleted":0,"input_tokens":4065,"id":136036}],"assets":[{"creator":null,"project_id":6043,"cloudinary_id":"lam33mlwpt0fvvvptjau","deleted":false,"id":60732,"name":"thumbnail","created_at":"2025-03-06T19:26:35.783760Z","resource_type":"image","tags":null},{"creator":null,"project_id":6043,"cloudinary_id":"yqbydkfpaylsqzfmzubb","deleted":false,"id":60731,"name":"catdogcover","created_at":"2025-03-06T19:26:35.782109Z","resource_type":"image","tags":null}],"messages_sent":0,"comments":[],"steps":[]}