Academic Assistant with Teachable Machine

{"name":"Academic Assistant with Teachable Machine","description":"","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/wp34vi2f3bhqwndqcoco","view_count":18,"fork_count":5,"expires_at":null,"created_at":"2025-11-20T06:07:33.381071Z","updated_at":"2025-11-20T06:07:33.381072Z","user_id":166,"status":"PRIVATE","parent_id":null,"id":10668,"user":{"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,"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},"code":{"script.js":"const URL = \"https://teachablemachine.withgoogle.com/models/YYBlWHJWc/\";\n\nlet model, labelContainer, maxPredictions;\n\nfunction setup() {\n createCanvas(280, 280);\n background(255);\n\n eraser = select(\"#eraser\");\n\n init(); // Automatically initialize the model when the project runs\n}\n\nfunction draw() {\n strokeWeight(12);\n if (eraser.checked())\n stroke(255)\n else\n stroke(0);\n if (mouseIsPressed) {\n line(pmouseX, pmouseY, mouseX, mouseY);\n }\n}\n\nasync function init() {\n const modelURL = URL + \"model.json\";\n const metadataURL = URL + \"metadata.json\";\n\n // Load the model and metadata\n model = await tmImage.load(modelURL, metadataURL);\n maxPredictions = model.getTotalClasses();\n\n // Setup the label container for predictions\n labelContainer = document.getElementById(\"label-container\");\n for (let i = 0; i < maxPredictions; i++) { // and class labels\n labelContainer.appendChild(document.createElement(\"div\"));\n }\n}\n\nasync function predictDrawing() {\n // Create a canvas element for the drawing\n const drawingCanvas = document.createElement('canvas');\n drawingCanvas.width = width;\n drawingCanvas.height = height;\n const ctx = drawingCanvas.getContext('2d');\n\n // Set the background to white\n ctx.fillStyle = '#FFF';\n ctx.fillRect(0, 0, drawingCanvas.width, drawingCanvas.height);\n\n // Draw the current drawing onto the canvas (using the p5.js canvas)\n ctx.drawImage(canvas, 0, 0); // Capture the current canvas\n\n // Use the Teachable Machine model to predict based on the drawn image\n const prediction = await model.predict(drawingCanvas);\n for (let i = 0; i < maxPredictions; i++) {\n const classPrediction = prediction[i].className + \": \" + prediction[i].probability.toFixed(2);\n labelContainer.childNodes[i].innerHTML = classPrediction; // Update labels with predictions\n }\n}\n\n","style.css":"html,\r\nbody {\r\n margin: 20px;\r\n padding: 0;\r\n font-family: Arial, Helvetica, sans-serif;\r\n background-color: #EEE;\r\n}\r\n\r\ncanvas {\r\n display: block;\r\n margin-bottom: 20px;\r\n}\r\n\r\n#image-container {\r\n position: absolute;\r\n right: 400px;\r\n top: 80px;\r\n}\r\n\r\n#image-container img {\r\n width: 400px;\r\n height: auto;\r\n}","index.html":"\n\n\n\n \n \n Academic Assistant with Teachable Machine\n \n \n \n \n \n\n\n\n

Teachable Machine Image Model

\n\n

\n \n Eraser\n\n \n

\n $\"P1$ \n

\n\n \n\n\n"},"chat_history":[],"assets":[{"name":"thumbnail","created_at":"2025-11-20T06:07:28.776617Z","resource_type":"image","deleted":false,"id":88557,"creator":"","project_id":10668,"cloudinary_id":"wp34vi2f3bhqwndqcoco","tags":[]},{"name":"P1","created_at":"2025-11-20T03:46:55.168995Z","resource_type":"image","deleted":false,"id":88556,"creator":"","project_id":10668,"cloudinary_id":"kyoxsao5cawlvrxkx1xw","tags":[]}],"messages_sent":1,"comments":[],"steps":[]}