{"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":9,"fork_count":4,"expires_at":null,"created_at":"2024-12-03T22:36:27.414461Z","updated_at":"2024-12-03T22:36:27.414465Z","user_id":70,"status":"PUBLIC","parent_id":null,"id":4858,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":100,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"// The url of my custom model, hosted on teachable machine (tensorflowjs)\nconst URL = \"https://teachablemachine.withgoogle.com/models/Q0ozGObkC/\";\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":"canvas {\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 min-height: 100vh;\n overflow-y: auto;\n /* Enable vertical 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

🍌Banana Classifier with Teachable Machine🍌

Custom trained model

Upload an image of a banana. This model is trained to classify bananas as:

🍌 Underripe
🍌 Perfectly Ripe
🍌 Overripe

Upload your banana image

\n \n

\n $\"Uploaded$ \n

\n\n \n\n\n"},"chat_history":[{"project_id":4858,"sender":"human","message":"4. Why did you choose to create a new canvas element for drawing the uploaded image instead of\nusing an existing one? What are the advantages of your approach?","deleted":0,"created_at":"2024-12-19T03:12:28.951822Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96729},{"project_id":4858,"sender":"ai","message":"

\n# Reasoning\nCreating a new canvas element for drawing the uploaded image allows for isolating the image processing tasks from other canvas operations. This approach ensures that the original canvas used for other purposes, such as displaying predictions or other visual elements, remains unaffected. It also simplifies the process of resizing the image to a consistent size for the model prediction.\n

\n\n

\n# Answer:\nBy using a separate canvas for image processing, we ensure that the main canvas for other visuals remains unaffected. This approach allows for consistent image sizing and simplifies processing tasks.\n

\n\nAre you looking to modify this functionality, or do you have any ideas on what you'd like to add or change in your project?","deleted":0,"created_at":"2024-12-19T03:12:28.959725Z","output_tokens":201,"code_id":193282,"input_tokens":3854,"id":96730},{"project_id":4858,"sender":"human","message":"I have a question about the existing code","deleted":0,"created_at":"2024-12-19T03:12:42.677652Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96731},{"project_id":4858,"sender":"ai","message":"Of course! What question do you have about the existing code? I'm here to help.","deleted":0,"created_at":"2024-12-19T03:12:42.684955Z","output_tokens":19,"code_id":193282,"input_tokens":3829,"id":96732},{"project_id":4858,"sender":"human","message":"4. Why did you choose to create a new canvas element for drawing the uploaded image instead of\nusing an existing one? What are the advantages of your approach?","deleted":0,"created_at":"2024-12-19T03:12:46.448719Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96733},{"project_id":4858,"sender":"ai","message":"

\n# Reasoning\nUsing a new canvas element for drawing the uploaded image helps keep the image processing separate from other canvas operations, ensuring that any existing canvas elements used for different purposes remain unaffected. This separation simplifies the handling of image size and format, making it easier to process the image specifically for model predictions without interfering with other functionalities.\n

\n\n

\n# Answer:\nCreating a new canvas for the image allows us to keep image processing isolated from other canvas elements, making it easier to manage image size and processing without affecting other parts of the application.\n

\n\nDo you plan to add any additional features or changes to your project? If so, what would you like to focus on next?","deleted":0,"created_at":"2024-12-19T03:12:46.512079Z","output_tokens":207,"code_id":193282,"input_tokens":3854,"id":96734},{"project_id":4858,"sender":"human","message":"I want to chat about the existing code so i understand it","deleted":0,"created_at":"2024-12-19T03:13:03.516910Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96735},{"project_id":4858,"sender":"ai","message":"Absolutely! Let's go over the existing code together. Is there a specific part of the code you'd like to understand better, or would you like a general overview of how it all works?","deleted":0,"created_at":"2024-12-19T03:13:03.530023Z","output_tokens":45,"code_id":193282,"input_tokens":3833,"id":96736},{"project_id":4858,"sender":"human","message":"Why did you choose to create a new canvas element for drawing the uploaded image instead of\nusing an existing one? ","deleted":0,"created_at":"2024-12-19T03:13:11.565776Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96737},{"project_id":4858,"sender":"ai","message":"Creating a new canvas element for drawing the uploaded image instead of using an existing one allows for better organization and separation of concerns in the code. Here are a few reasons for this choice:\n\n1. **Isolation of Tasks**: By using a separate canvas for image processing, you keep the image drawing and prediction logic distinct from other visual elements. This way, you avoid any unintended interference with the main canvas that might be used for other graphics or animations.\n\n2. **Consistent Sizing**: A dedicated canvas can be set to a specific size (e.g., 200x200 pixels), which is important for ensuring that the uploaded image is processed in a format compatible with the model's expectations.\n\n3. **Simplified Processing**: Handling the image on a separate canvas simplifies the logic required for drawing and predicting, making the code easier to maintain and understand.\n\n4. **Flexibility**: If you need to change how images are processed or displayed, having a separate canvas makes it easier to manage those changes without affecting other parts of your application.\n\nDo you have any other questions about this approach, or would you like to discuss something specific in your project?","deleted":0,"created_at":"2024-12-19T03:13:11.573648Z","output_tokens":302,"code_id":193282,"input_tokens":3845,"id":96738},{"project_id":4858,"sender":"human","message":"What are the advantages and disadvantages of this approach? ","deleted":0,"created_at":"2024-12-19T03:13:43.634015Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96739},{"project_id":4858,"sender":"ai","message":"Using a new canvas element for drawing the uploaded image has both advantages and disadvantages:\n\n### Advantages:\n1. **Separation of Concerns**: It isolates image processing from other canvas operations, making the code cleaner and easier to manage.\n2. **Consistent Image Processing**: A dedicated canvas can be sized appropriately for the model, ensuring that the image is processed correctly without altering the main canvas.\n3. **Flexibility**: Changes to image processing can be made without affecting other graphics or logic in the main canvas.\n4. **Easier Debugging**: If issues arise, it's easier to debug image-related problems since they are contained in a specific canvas.\n\n### Disadvantages:\n1. **Additional Memory Usage**: Creating new canvas elements may consume more memory, especially if multiple images are processed in succession.\n2. **Performance Overhead**: If many canvas elements are created, it could impact performance, particularly on devices with limited resources.\n3. **Management Complexity**: Managing multiple canvas elements can become complex if not organized properly, especially if different processing tasks are needed for various images.\n\nOverall, the choice to use a new canvas for image processing can lead to cleaner code and better organization, but it requires careful management to avoid potential downsides.\n\nDo you have any specific concerns about this approach, or would you like to explore other aspects of your project?","deleted":0,"created_at":"2024-12-19T03:13:43.641491Z","output_tokens":366,"code_id":193282,"input_tokens":3832,"id":96740},{"project_id":4858,"sender":"human","message":"Can you explain how the async/await syntax is used in my code, particularly in the init\nand handleImageUpload functions?","deleted":0,"created_at":"2024-12-19T03:14:19.554699Z","output_tokens":null,"code_id":193282,"input_tokens":null,"id":96741},{"project_id":4858,"sender":"ai","message":"Certainly! The `async/await` syntax in JavaScript is used for handling asynchronous operations more easily. Here's how it's applied in your `init` and `handleImageUpload` functions:\n\n### 1. **`init` Function**\n```javascript\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); // Waits for the model to load\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- **`async` Keyword**: Declares that this function is asynchronous, meaning it can use the `await` keyword to pause execution until a promise resolves.\n- **`await` Keyword**: Used before the promise returned by `tmImage.load()`. This pauses the execution of the `init` function until the model is fully loaded. Once loaded, it continues to execute the next lines of code.\n\n### 2. **`handleImageUpload` Function**\n```javascript\nasync function handleImageUpload(event) {\n const file = event.target.files[0]; // Get the uploaded file\n\n // ... (code omitted for brevity)\n\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.\");\n\n // Run the prediction on the uploaded image\n const prediction = await model.predict(canvas); // Waits for the prediction to complete\n console.log(\"Prediction 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);\n }\n };\n };\n\n reader.readAsDataURL(file); // Read the file as a data URL\n}\n```\n- **`async` Keyword**: This function is also declared as asynchronous, allowing the use of `await` within it.\n- **`await` Keyword**: Inside the `img.onload` function, `await` is used before `model.predict(canvas)`, which means the execution pauses until the prediction is completed. This ensures that you get the results of the prediction before trying to update the UI with them.\n\n### Summary\n- **`async/await`** helps to write asynchronous code in a more readable way by avoiding the need for `.then()` chains.\n- It allows you to pause execution until promises are resolved, making it easier to manage asynchronous operations like loading models and making predictions.\n\nDo you have any more questions about this syntax or anything else in your code?","deleted":0,"created_at":"2024-12-19T03:14:19.561376Z","output_tokens":947,"code_id":193282,"input_tokens":3847,"id":96742}],"assets":[{"cloudinary_id":"lam33mlwpt0fvvvptjau","name":"thumbnail","deleted":false,"id":50598,"created_at":"2024-12-03T22:27:32.184570Z","project_id":4858,"resource_type":"image"}],"messages_sent":44,"comments":[],"steps":[]}