{"name":"Banana Classifier - Teachable Machine Demo","description":"I trained a custom model to classify bananas by ripeness with Teachable Machine. This demo uses that trained model in a web app that lets you test bananas on it!","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/lam33mlwpt0fvvvptjau","view_count":3,"fork_count":0,"expires_at":null,"created_at":"2024-12-07T00:37:04.180313Z","updated_at":"2024-12-07T00:37:04.180315Z","user_id":25,"status":"PRIVATE","parent_id":4858,"id":4912,"user":{"photo":null,"email":"roserasp.rcl@gmail.com","recess_id":"b0325c1e-fa33-e420-3bbd-16e23deec92c","created_at":"2023-12-19T12:40:25.190376Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"unibunny","id":25,"password_hash":"$2b$12$T8DLx5HV8mYkO6ID/7yXxOe2XWdeWxkYEFlZHZ8igj1Ovbd.zs2aO","updated_at":"2023-12-19T12:40:25.190378Z","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/z2FARQIEA/\";\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\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 // Create a canvas to draw the image\n const canvas = document.createElement('canvas');\n canvas.width = 200; // Set canvas size\n canvas.height = 200;\n const ctx = canvas.getContext('2d');\n\n const img = new Image();\n img.src = imgSrc; // Set the image source\n img.onload = async () => {\n ctx.drawImage(img, 0, 0, canvas.width, canvas.height); // Draw the image on canvas\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":"}\n\ncanvas {\n display: block;\n}\n\n.container {\n text-align: center;\n background-color: white;\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 /* Hide the image initially */\n width: 200px;\n height: 200px;\n margin-top: 10px;\n}\n\n.description {\n font-size: 18px;\n /* Increase font size */\n margin-bottom: 10px;\n /* Space below the description */\n color: #333;\n /* Dark gray color for text */\n}\n\n.classification-list {\n list-style-type: none;\n /* Remove bullets */\n padding: 0;\n /* Remove padding */\n}\n\n.classification-list li {\n font-size: 16px;\n /* Font size for list items */\n margin: 5px 0;\n /* Space between list items */\n color: #555;\n /* Medium gray color */\n}\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n background: linear-gradient(45deg, #FFFACD, #FFD700, #FFEFD5);\n background-size: 300% 300%;\n animation: gradientAnimation 10s ease infinite;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n overflow: hidden;\n /* Prevent scrolling */\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 human. This model is trained to classify humans as:

Upload your image

\n \n

\n $\"Uploaded$ \n

\n\n \n\n\n"},"chat_history":[],"assets":[{"cloudinary_id":"lam33mlwpt0fvvvptjau","name":"thumbnail","deleted":false,"id":51650,"created_at":"2024-12-07T00:37:04.243975Z","project_id":4912,"resource_type":"image"}],"messages_sent":0,"comments":[],"steps":[]}