[AirClass Dev Log 8] Choosing Whiteboard over Screen Sharing: AirClassTab and an LLM Learning Flow

What this post covers

Why I stopped working on AirClassDisplay and changed direction to AirClassTab
The whiteboard-centered lesson flow implemented in AirClassTab
The flow from whiteboard sharing to replay, LLM summary, saved learning material, and question generation
How this approach differs from the previous Display approach

When I began AirClass, the first thing I tried was Display. The goal was clear: send the class screen smoothly to students and let them revisit it when necessary. But in real lessons, the workflow kept getting in the way. Eventually I stopped pursuing AirClassDisplay and chose a completely different direction: AirClassTab.

Why I stopped using the Display approach

Technically, AirClassDisplay was possible. A WebRTC-based structure could send the screen to a server and let students receive it in the browser almost in real time. Latency was manageable, and smooth rendering was possible.

But once it entered the classroom, the problem was not the technology. It was the workflow.

First, the number of required devices increased. A lesson that used to require only a tablet now needed a laptop too. Opening a browser, managing a media server, and checking the stream became part of pre-class preparation.

Second, the structure of separately sending the tablet screen to the server did not fit my actual tablet-centered flow. When I connected the tablet to the classroom display with Miracast, capturing and streaming it again through WebRTC was not smooth.

Third, I had to ask a more essential question. Did students really need the entire screen? In class, what students often miss is not the whole display. It is the part the teacher emphasized or wrote at a specific moment. Replaying what the teacher directly wrote and drew seemed more useful than replaying the entire screen.

So AirClassDisplay stopped there. It was technically possible, but not a tool I could repeatedly use in class.

The alternative was whiteboard writing

Stopping Display led to a new question.

What students really need may not be the teacher's whole screen, but the writing and emphasis created during class.

That question became the starting point of AirClassTab. It is not a tool for sharing the whole screen. It is a tool for designing the class around what the teacher writes on a tablet.

Whiteboard writing is not just drawing. The notes, emphasis, and explanation order created during class become the core record of the lesson. Students often want to revisit exactly that.

The starting goals were:

The teacher writes directly on a PDF with a tablet.
The writing is shared with students.
Selected parts can be replayed.
The writing can be analyzed by an LLM to create summaries and learning materials.
The same content can later generate questions.

The structure of AirClassTab

AirClassTab was implemented with Flutter because direct touch and pen interaction on a tablet were important.

Writing on a PDF

The basic screen renders a PDF and places a writing layer over it. The teacher loads class material as a PDF and writes directly on it.

class ClassroomScreen extends ConsumerStatefulWidget {
  const ClassroomScreen({super.key});
  // ...
}

A PdfAnnotator widget renders the PDF, and a CustomPainter-based layer handles pen strokes. The student side follows the same structure so the teacher's writing can be synchronized.

Pen tools and eraser

The pen tool provides color and thickness presets: black, red, orange, yellow highlight, green, blue, purple, gray, and so on.

static const List<_PenPreset> _penPresets = [
  _PenPreset(label: 'thin black', color: Colors.black, width: 2.4),
  _PenPreset(label: 'basic black', color: Colors.black, width: 3.6),
  _PenPreset(label: 'red', color: Color(0xFFE53935), width: 3.4),
  _PenPreset(label: 'orange', color: Color(0xFFF57C00), width: 3.8),
  _PenPreset(label: 'yellow highlight', color: Color(0xFFFFC107), width: 8.0),
];

The eraser supports both partial deletion and stroke deletion. In class, deleting a whole mistaken stroke is often faster, so both modes are useful.

Area selection and capture

One of the most important functions is area selection. The teacher can drag to select a specific area, capture only that area, and send it to the LLM.

Future<void> _captureAndSend() async {
  final selection = ref.read(annotationProvider).selection;
  if (selection == null) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('Select an area first'))
    );
    return;
  }
  // ... capture and LLM analysis
}

The philosophy is "not the whole screen, only the needed part." The teacher can select the part just explained, the part a student asked about, or the part that needs emphasis.

Replay: playing the writing again

One especially useful feature is replay. A whiteboard is not just a final image. It is a sequence of strokes drawn over time. If the strokes are recorded, the explanation order can be played again.

Creating a replay clip

When the teacher selects an area, the strokes inside it are gathered into a replay clip.

void _createReplayClip() {
  final annotation = ref.read(annotationProvider);
  final clip = _replayClipFactory.createFromSelection(
    selection: annotation.selection,
    strokes: annotation.strokes,
    previousVersion: _latestReplayClip,
  );
  // ...
}

Replay clips can also be versioned. If the same area is explained multiple times, students can choose the version they need.

Playback on the student web board

The replay clip can be uploaded and played on student devices. This is very different from showing a static image. Students see the order and emphasis of the teacher's explanation.

LLM integration: from writing to learning materials and questions

The biggest change in AirClassTab is LLM integration. The whiteboard is not only shown to students. It becomes input for later learning materials.

Writing analysis and summary

When the teacher selects an area and sends it to the LLM, the selected image is uploaded to the server. The LlmService analyzes the image and summarizes the content.

final result = await _llmService.analyzeImage(bytes);

This is not just OCR. The model should interpret context, emphasis, formulas, and diagrams so that the result becomes useful for students.

Learning material generation

Based on the summary, the system creates learning materials. It reorganizes the key concepts from the teacher's writing, adds examples, and turns the selected board area into a study resource.

The LLM can also consider the visual structure: underlines, circles, emphasized parts, and spatial arrangement.

Question generation

The next step is question generation. The system can create questions from the concepts discussed in the writing.

Future<void> _distributeQuiz() async {
  if (_llmResult.isEmpty) return;
  final result = await _llmService.sendQuizToStudents(
    _llmResult,
    ['student_001', 'student_002', 'student_003']
  );
  // ...
}

At this stage, question generation is implemented as an LLM flow. Distributing those questions to students will be connected with AirClassQuiz.

The full flow

The complete lesson flow can be summarized as follows.

The key is that one piece of writing can be reused in many ways: real-time sharing, replay, summary, learning material, and questions.

How it differs from Display

Category	AirClassDisplay	AirClassTab
Shared target	Whole screen	Whiteboard area
Input method	Screen capture	Direct writing
Student experience	Passive viewing	Active review
Later use	Recorded screen	LLM analysis and materials
Teacher burden	Requires extra laptop	Tablet-centered
Core philosophy	"show"	"create together"

The biggest difference is direction. Display was a structure where the teacher shows something to students. AirClassTab is a structure where teacher and students interact around the same writing, and that writing grows into learning materials.

Remaining tasks

AirClassTab is still early.

First, real-time synchronization must be tested in actual classrooms.

Second, LLM analysis quality must improve, especially for math writing with symbols, diagrams, and formulas.

Third, integration with AirClassQuiz is needed so generated questions can be distributed, answered, and reviewed.

Fourth, integration with AirClassSlide is also important. Slides and whiteboard writing need to become one natural lesson flow.

Closing

AirClassDisplay, the first direction of AirClass, ends here. Sharing the whole screen was technically possible, but it did not fit the repeated workflow of real lessons.

AirClassTab changes the direction. What the teacher writes on the tablet is shared, replayed, analyzed by an LLM, and turned into learning materials and questions.

Now AirClass is moving from the question "what should I show students?" to "what can we create together during class?" Whiteboard writing is no longer a one-time explanation. It becomes the core record and starting point of learning.