Ali Mrani Alaoui·Portfolio

AI Canvas Studio — Draw, Annotate, Get AI Feedback

An interactive practice studio where teachers watch a real lesson, draw on an embedded canvas, and get real-time AI coaching tied to a worked example.

AI TutorInteractive CourseWorked Examples
Industry
Teacher Professional Development
Timeline
8 weeks
Tools
Articulate Rise 360, H5P, ElevenLabs, Custom code
Learners step into a guided practice studio for charting key content.
A tightly edited demo video drops them into a real co-taught classroom.
Interactive teaching cards walk them through the three chart types.
They draw and annotate on an embedded canvas, guided by AI feedback.
They explain their thinking, and the AI coaches them with worked examples.

Project Overview

A teacher professional development program serving two school districts. The lead coach had a 90-minute video PD that teachers were watching once and forgetting. She wanted a tool where teachers actually practiced charting a real lesson, not just watched someone else do it.

The brief was a deliverable that fits a single 30-minute PD block, runs on the district's existing browser, and gives every teacher a concrete chart they can bring to their next peer review. The studio had to teach the technique, let the learner practice it on a real lesson clip, and ship them out with a worked example to compare against.

Learners watch a tightly edited demo of two real teachers running a co-taught lesson. Interactive cards walk them through the three chart types: key steps, vocabulary, and concepts. They then draw on an embedded canvas while an AI coach reads their work and gives feedback in real time on what is missing, what is unclear, and what to keep.

The AI coach reads the canvas against a six-chart-type rubric the lead coach authored. The rubric is stable across all six chart types, so future modules can drop in without rebuilding the coaching layer. The canvas itself is serialized into a node graph the LLM can reason about, not raw pixels.

What's Inside

6 chart-type practices

Key steps, vocabulary, concepts, sequence, compare-contrast, cause-effect.

Demo video per chart type

Edited from real classroom footage with two teachers running a co-taught lesson.

Embedded canvas with AI feedback

Draw, annotate, connect; the AI reads the canvas live and coaches on what is missing.

Interactive teaching cards

Three cards per practice that walk the technique before the canvas opens.

Worked example to compare against

Rich annotations layered slowly so the learner can see the chart take shape.

Short reflection prompt

At the end of each practice, with a one-click share into the coach's review queue.

What the Client Provided

  • The original 90-minute PD video the program was retiring
  • Google Doc rubric the lead coach uses for chart types in peer review
  • Raw classroom footage of two veteran teachers running a co-taught lesson
  • Anonymized peer-review feedback cataloguing common chart mistakes
  • Brand guidelines (PDF) for the PD program

Design and Build Process

01

Shadowing Co-Taught Lessons

Observed live lessons across three districts. Catalogued what support teachers actually chart, where they hesitate, and what veterans wish they had practiced.

02

Demo Video Production

Wrote and edited the demo with two teachers in one live session. Every camera move and cut tied to a specific moment in the chart.

03

Canvas + Serializer

Built the embedded canvas on Konva.js with a custom serializer that turns drawings into a node graph the AI can read against a rubric.

04

AI Coach Rubric

Designed the rubric the AI uses: which terms appear, where they sit, what is connected to what. Stable across all six chart types so future modules drop in clean.

05

Pilot and Iteration

Ran a pilot with 40 teachers across two cohorts. Cut the cards from five to three after observing where teachers stalled, and added a worked-example replay step.

Tools and Stack

AI Engine
OpenAI and Anthropic Claude for canvas reading and coaching feedback.
AI Voice
ElevenLabs for narration on the demo videos.
Video
Adobe Premiere Pro for the demo lesson edit, Loom for behind-the-scenes coaching commentary.
Authoring
Articulate Rise 360 for the lesson wrapper, H5P for the supporting knowledge checks.
Custom code
Custom embedded drawing canvas with real-time AI feedback and a worked-example viewer.
Delivery
Embedded directly into the PD program's website, with SCORM 2004 packages for Canvas LMS, Schoology, LearnDash, Kajabi, and Thinkific.

Deliverables

  • Live studio (web app)
  • 6 chart-type practice modules with demo video, cards, canvas, and AI coach
  • AI coaching rubric (Google Doc, agreed with lead coach)
  • Authoring template for adding new chart types
  • Coach-facing reporting (teacher attempts, common gaps)
  • Embedded directly into the PD program's website, with SCORM 2004 packages for Canvas LMS, Schoology, LearnDash, Kajabi, and Thinkific
  • 1-hour PD session deck for facilitators introducing the studio