@teachinglab/omd 0.2.10 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/api/configuration-options.md +198 -198
- package/docs/api/eventManager.md +82 -82
- package/docs/api/focusFrameManager.md +144 -144
- package/docs/api/index.md +105 -105
- package/docs/api/main.md +62 -62
- package/docs/api/omdBinaryExpressionNode.md +86 -86
- package/docs/api/omdCanvas.md +83 -83
- package/docs/api/omdConfigManager.md +112 -112
- package/docs/api/omdConstantNode.md +52 -52
- package/docs/api/omdDisplay.md +87 -87
- package/docs/api/omdEquationNode.md +174 -174
- package/docs/api/omdEquationSequenceNode.md +258 -258
- package/docs/api/omdEquationStack.md +156 -156
- package/docs/api/omdFunctionNode.md +82 -82
- package/docs/api/omdGroupNode.md +78 -78
- package/docs/api/omdHelpers.md +87 -87
- package/docs/api/omdLeafNode.md +85 -85
- package/docs/api/omdNode.md +201 -201
- package/docs/api/omdOperationDisplayNode.md +117 -117
- package/docs/api/omdOperatorNode.md +91 -91
- package/docs/api/omdParenthesisNode.md +133 -133
- package/docs/api/omdPopup.md +191 -191
- package/docs/api/omdPowerNode.md +131 -131
- package/docs/api/omdRationalNode.md +144 -144
- package/docs/api/omdSimplification.md +78 -78
- package/docs/api/omdSqrtNode.md +144 -144
- package/docs/api/omdStepVisualizer.md +146 -146
- package/docs/api/omdStepVisualizerHighlighting.md +65 -65
- package/docs/api/omdStepVisualizerInteractiveSteps.md +108 -108
- package/docs/api/omdStepVisualizerLayout.md +70 -70
- package/docs/api/omdStepVisualizerTextBoxes.md +76 -76
- package/docs/api/omdTranscriptionService.md +95 -95
- package/docs/api/omdTreeDiff.md +169 -169
- package/docs/api/omdUnaryExpressionNode.md +137 -137
- package/docs/api/omdUtilities.md +82 -82
- package/docs/api/omdVariableNode.md +123 -123
- package/omd/nodes/omdConstantNode.js +141 -141
- package/omd/nodes/omdGroupNode.js +67 -67
- package/omd/nodes/omdLeafNode.js +76 -76
- package/omd/nodes/omdOperatorNode.js +108 -108
- package/omd/nodes/omdParenthesisNode.js +292 -292
- package/omd/nodes/omdPowerNode.js +235 -235
- package/omd/nodes/omdRationalNode.js +295 -295
- package/omd/nodes/omdVariableNode.js +122 -122
- package/omd/simplification/omdSimplification.js +140 -140
- package/omd/step-visualizer/omdStepVisualizer.js +947 -947
- package/omd/step-visualizer/omdStepVisualizerLayout.js +892 -892
- package/omd/utils/omdStepVisualizerInteractiveSteps.js +5 -3
- package/package.json +1 -1
- package/src/index.js +11 -0
- package/src/omdBalanceHanger.js +2 -1
- package/src/omdEquation.js +1 -1
- package/src/omdNumber.js +1 -1
- package/src/omdNumberLine.js +13 -7
- package/src/omdRatioChart.js +11 -0
- package/src/omdShapes.js +1 -1
- package/src/omdTapeDiagram.js +1 -1
- package/src/omdTerm.js +1 -1
|
@@ -1,96 +1,96 @@
|
|
|
1
|
-
# omdTranscriptionService
|
|
2
|
-
|
|
3
|
-
The `omdTranscriptionService` class provides an interface to an AI-powered transcription service for handwritten content. It sends image data to a server-side endpoint for processing, abstracting away the complexities of AI model interaction and API key management.
|
|
4
|
-
|
|
5
|
-
## Class Definition
|
|
6
|
-
|
|
7
|
-
```javascript
|
|
8
|
-
export class omdTranscriptionService
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## Constructor
|
|
12
|
-
|
|
13
|
-
### `new omdTranscriptionService([options])`
|
|
14
|
-
|
|
15
|
-
Creates a new `omdTranscriptionService` instance.
|
|
16
|
-
|
|
17
|
-
- **`options`** (`object`, optional): Configuration options for the service:
|
|
18
|
-
- `endpoint` (`string`): The server endpoint for the transcription service. Defaults to `'/.netlify/functions/transcribe'`.
|
|
19
|
-
- `defaultProvider` (`string`): The default transcription provider to use. Defaults to `'gemini'`.
|
|
20
|
-
|
|
21
|
-
## Public Properties
|
|
22
|
-
|
|
23
|
-
- **`options`** (`object`): The configuration options for the service, including `endpoint` and `defaultProvider`.
|
|
24
|
-
|
|
25
|
-
## Public Methods
|
|
26
|
-
|
|
27
|
-
### `async transcribe(imageBlob, [options])`
|
|
28
|
-
|
|
29
|
-
Transcribes an image containing handwritten content by sending it to the configured server endpoint. The image is converted to base64 before transmission.
|
|
30
|
-
|
|
31
|
-
- **`imageBlob`** (`Blob`): The image blob to transcribe.
|
|
32
|
-
- **`options`** (`object`, optional): Transcription options:
|
|
33
|
-
- `prompt` (`string`): A custom prompt for the transcription service. If not provided, a default mathematical transcription prompt is used.
|
|
34
|
-
- **Returns**: `Promise<object>` - A promise that resolves with the transcription result, containing the `text`, `provider`, and `confidence`.
|
|
35
|
-
- **Throws**: `Error` if the API call fails.
|
|
36
|
-
|
|
37
|
-
### `async transcribeWithFallback(imageBlob, [options])`
|
|
38
|
-
|
|
39
|
-
Transcribes an image with a fallback mechanism. Currently, this method simply calls `transcribe()`, but it is designed to allow for future implementations of fallback transcription providers or strategies.
|
|
40
|
-
|
|
41
|
-
- **`imageBlob`** (`Blob`): The image blob to transcribe.
|
|
42
|
-
- **`options`** (`object`, optional): Transcription options.
|
|
43
|
-
- **Returns**: `Promise<object>` - A promise that resolves with the transcription result.
|
|
44
|
-
|
|
45
|
-
### `isAvailable()`
|
|
46
|
-
|
|
47
|
-
Checks if the transcription service is available. In the current implementation, this always returns `true` as it relies on a serverless function endpoint.
|
|
48
|
-
|
|
49
|
-
- **Returns**: `boolean` - `true` if the service is available, `false` otherwise.
|
|
50
|
-
|
|
51
|
-
### `getAvailableProviders()`
|
|
52
|
-
|
|
53
|
-
Gets the list of available transcription providers. In the current implementation, this always returns `['gemini']` as the server handles the actual provider selection.
|
|
54
|
-
|
|
55
|
-
- **Returns**: `Array<string>` - An array of available provider names.
|
|
56
|
-
|
|
57
|
-
### `isProviderAvailable(provider)`
|
|
58
|
-
|
|
59
|
-
Checks if a specific transcription provider is available. In the current implementation, this only returns `true` for the `'gemini'` provider.
|
|
60
|
-
|
|
61
|
-
- **`provider`** (`string`): The name of the provider to check.
|
|
62
|
-
- **Returns**: `boolean` - `true` if the provider is available, `false` otherwise.
|
|
63
|
-
|
|
64
|
-
## Internal Methods
|
|
65
|
-
|
|
66
|
-
- **`_getDefaultEndpoint()`**: Returns the default server endpoint URL for the transcription service (`'/.netlify/functions/transcribe'`).
|
|
67
|
-
- **`_blobToBase64(blob)`**: Converts an `imageBlob` into a base64 encoded string, suitable for sending in a JSON payload.
|
|
68
|
-
|
|
69
|
-
## Example Usage
|
|
70
|
-
|
|
71
|
-
```javascript
|
|
72
|
-
import { omdTranscriptionService } from '@teachinglab/omd';
|
|
73
|
-
|
|
74
|
-
// Create a transcription service instance
|
|
75
|
-
const transcriptionService = new omdTranscriptionService();
|
|
76
|
-
|
|
77
|
-
// Assume getMyImageBlob() is a function that returns an image Blob
|
|
78
|
-
async function getMyImageBlob() {
|
|
79
|
-
// Example: Create a dummy canvas and get its blob
|
|
80
|
-
const canvas = document.createElement('canvas');
|
|
81
|
-
canvas.width = 100; canvas.height = 50;
|
|
82
|
-
const ctx = canvas.getContext('2d');
|
|
83
|
-
ctx.fillText('2x + 3', 10, 30);
|
|
84
|
-
return new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
// Get an image blob from a canvas or file input
|
|
88
|
-
const imageBlob = await getMyImageBlob();
|
|
89
|
-
|
|
90
|
-
// Transcribe the image
|
|
91
|
-
const result = await transcriptionService.transcribe(imageBlob, {
|
|
92
|
-
prompt: 'Transcribe the handwritten math equation. Return only the mathematical expression.'
|
|
93
|
-
});
|
|
94
|
-
|
|
95
|
-
console.log(result.text); // The transcribed text (e.g., "2x + 3")
|
|
1
|
+
# omdTranscriptionService
|
|
2
|
+
|
|
3
|
+
The `omdTranscriptionService` class provides an interface to an AI-powered transcription service for handwritten content. It sends image data to a server-side endpoint for processing, abstracting away the complexities of AI model interaction and API key management.
|
|
4
|
+
|
|
5
|
+
## Class Definition
|
|
6
|
+
|
|
7
|
+
```javascript
|
|
8
|
+
export class omdTranscriptionService
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Constructor
|
|
12
|
+
|
|
13
|
+
### `new omdTranscriptionService([options])`
|
|
14
|
+
|
|
15
|
+
Creates a new `omdTranscriptionService` instance.
|
|
16
|
+
|
|
17
|
+
- **`options`** (`object`, optional): Configuration options for the service:
|
|
18
|
+
- `endpoint` (`string`): The server endpoint for the transcription service. Defaults to `'/.netlify/functions/transcribe'`.
|
|
19
|
+
- `defaultProvider` (`string`): The default transcription provider to use. Defaults to `'gemini'`.
|
|
20
|
+
|
|
21
|
+
## Public Properties
|
|
22
|
+
|
|
23
|
+
- **`options`** (`object`): The configuration options for the service, including `endpoint` and `defaultProvider`.
|
|
24
|
+
|
|
25
|
+
## Public Methods
|
|
26
|
+
|
|
27
|
+
### `async transcribe(imageBlob, [options])`
|
|
28
|
+
|
|
29
|
+
Transcribes an image containing handwritten content by sending it to the configured server endpoint. The image is converted to base64 before transmission.
|
|
30
|
+
|
|
31
|
+
- **`imageBlob`** (`Blob`): The image blob to transcribe.
|
|
32
|
+
- **`options`** (`object`, optional): Transcription options:
|
|
33
|
+
- `prompt` (`string`): A custom prompt for the transcription service. If not provided, a default mathematical transcription prompt is used.
|
|
34
|
+
- **Returns**: `Promise<object>` - A promise that resolves with the transcription result, containing the `text`, `provider`, and `confidence`.
|
|
35
|
+
- **Throws**: `Error` if the API call fails.
|
|
36
|
+
|
|
37
|
+
### `async transcribeWithFallback(imageBlob, [options])`
|
|
38
|
+
|
|
39
|
+
Transcribes an image with a fallback mechanism. Currently, this method simply calls `transcribe()`, but it is designed to allow for future implementations of fallback transcription providers or strategies.
|
|
40
|
+
|
|
41
|
+
- **`imageBlob`** (`Blob`): The image blob to transcribe.
|
|
42
|
+
- **`options`** (`object`, optional): Transcription options.
|
|
43
|
+
- **Returns**: `Promise<object>` - A promise that resolves with the transcription result.
|
|
44
|
+
|
|
45
|
+
### `isAvailable()`
|
|
46
|
+
|
|
47
|
+
Checks if the transcription service is available. In the current implementation, this always returns `true` as it relies on a serverless function endpoint.
|
|
48
|
+
|
|
49
|
+
- **Returns**: `boolean` - `true` if the service is available, `false` otherwise.
|
|
50
|
+
|
|
51
|
+
### `getAvailableProviders()`
|
|
52
|
+
|
|
53
|
+
Gets the list of available transcription providers. In the current implementation, this always returns `['gemini']` as the server handles the actual provider selection.
|
|
54
|
+
|
|
55
|
+
- **Returns**: `Array<string>` - An array of available provider names.
|
|
56
|
+
|
|
57
|
+
### `isProviderAvailable(provider)`
|
|
58
|
+
|
|
59
|
+
Checks if a specific transcription provider is available. In the current implementation, this only returns `true` for the `'gemini'` provider.
|
|
60
|
+
|
|
61
|
+
- **`provider`** (`string`): The name of the provider to check.
|
|
62
|
+
- **Returns**: `boolean` - `true` if the provider is available, `false` otherwise.
|
|
63
|
+
|
|
64
|
+
## Internal Methods
|
|
65
|
+
|
|
66
|
+
- **`_getDefaultEndpoint()`**: Returns the default server endpoint URL for the transcription service (`'/.netlify/functions/transcribe'`).
|
|
67
|
+
- **`_blobToBase64(blob)`**: Converts an `imageBlob` into a base64 encoded string, suitable for sending in a JSON payload.
|
|
68
|
+
|
|
69
|
+
## Example Usage
|
|
70
|
+
|
|
71
|
+
```javascript
|
|
72
|
+
import { omdTranscriptionService } from '@teachinglab/omd';
|
|
73
|
+
|
|
74
|
+
// Create a transcription service instance
|
|
75
|
+
const transcriptionService = new omdTranscriptionService();
|
|
76
|
+
|
|
77
|
+
// Assume getMyImageBlob() is a function that returns an image Blob
|
|
78
|
+
async function getMyImageBlob() {
|
|
79
|
+
// Example: Create a dummy canvas and get its blob
|
|
80
|
+
const canvas = document.createElement('canvas');
|
|
81
|
+
canvas.width = 100; canvas.height = 50;
|
|
82
|
+
const ctx = canvas.getContext('2d');
|
|
83
|
+
ctx.fillText('2x + 3', 10, 30);
|
|
84
|
+
return new Promise(resolve => canvas.toBlob(resolve, 'image/png'));
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
// Get an image blob from a canvas or file input
|
|
88
|
+
const imageBlob = await getMyImageBlob();
|
|
89
|
+
|
|
90
|
+
// Transcribe the image
|
|
91
|
+
const result = await transcriptionService.transcribe(imageBlob, {
|
|
92
|
+
prompt: 'Transcribe the handwritten math equation. Return only the mathematical expression.'
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
console.log(result.text); // The transcribed text (e.g., "2x + 3")
|
|
96
96
|
```
|
package/docs/api/omdTreeDiff.md
CHANGED
|
@@ -1,170 +1,170 @@
|
|
|
1
|
-
# omdTreeDiff
|
|
2
|
-
|
|
3
|
-
Implements a robust tree differencing algorithm to identify changes between two `omdNode` expression trees. This module is crucial for `omdStepVisualizerHighlighting`, providing precise visual feedback on how mathematical expressions transform from one step to the next.
|
|
4
|
-
|
|
5
|
-
## Algorithm Overview
|
|
6
|
-
|
|
7
|
-
`omdTreeDiff` uses a multi-stage approach to compare two expression trees (`oldEquation` and `newEquation`):
|
|
8
|
-
|
|
9
|
-
1. **Special Cases**: It first attempts to identify common pedagogical patterns (like adding/subtracting the same value from both sides, or simple identity/double negative simplifications). If found, these specific changes are highlighted directly.
|
|
10
|
-
2. **Optimal Subtree Matching**: If no special cases apply, it proceeds to find the largest, non-overlapping set of matched subtrees between the old and new expressions. A match can be either structurally identical or semantically equivalent (e.g., `2+3` and `5`).
|
|
11
|
-
3. **Identify Changes**: Any parts of the `newEquation` that are *not* part of these optimal matches are considered the actual changes and are returned for highlighting.
|
|
12
|
-
4. **Educational Mode**: When enabled, the algorithm includes additional heuristics to highlight subtle simplifications that might not involve a direct structural change but are important for understanding the transformation (e.g., removing `+ 0`).
|
|
13
|
-
|
|
14
|
-
## Class Definition
|
|
15
|
-
|
|
16
|
-
```javascript
|
|
17
|
-
export class omdTreeDiff
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
This class is not meant to be instantiated. All its methods are static.
|
|
21
|
-
|
|
22
|
-
## Static Methods
|
|
23
|
-
|
|
24
|
-
### `findChangedNodes(oldEquation, newEquation, options)`
|
|
25
|
-
|
|
26
|
-
Main entry point for the tree differencing algorithm. Compares two `omdEquationNode` instances (or any `omdNode` subtrees) and returns a list of nodes in the `newEquation` that have changed or are new.
|
|
27
|
-
|
|
28
|
-
- **`oldEquation`** (`omdNode`): The root node of the previous expression tree.
|
|
29
|
-
- **`newEquation`** (`omdNode`): The root node of the current expression tree.
|
|
30
|
-
- **`options`** (`object`, optional): Configuration options:
|
|
31
|
-
- `educationalMode` (`boolean`): If `true`, the diff algorithm will also highlight mathematically neutral changes that are pedagogically significant (e.g., removing `+ 0`). Default: `false`.
|
|
32
|
-
- **Returns**: `Array<omdNode>` - An array of `omdNode` instances from `newEquation` that should be highlighted.
|
|
33
|
-
|
|
34
|
-
### `findEquationSpecialCases(oldEquation, newEquation)`
|
|
35
|
-
|
|
36
|
-
Identifies specific equation-level transformation patterns, such as adding/subtracting the same operation to both sides of an equation. This allows for more intuitive highlighting in common step-by-step solution scenarios.
|
|
37
|
-
|
|
38
|
-
- **`oldEquation`** (`omdEquationNode`): The previous equation.
|
|
39
|
-
- **`newEquation`** (`omdEquationNode`): The current equation.
|
|
40
|
-
- **Returns**: `Array<omdNode>` - An array of nodes to highlight for these special cases, or an empty array if no such pattern is found.
|
|
41
|
-
|
|
42
|
-
### `diffSubtrees(oldTree, newTree, educationalMode)`
|
|
43
|
-
|
|
44
|
-
Core recursive differencing method. It first checks for various pedagogical highlighting patterns (common prefix, variable preservation, type differences, subtraction patterns). If none apply, it falls back to finding an optimal matching between subtrees of the `oldTree` and `newTree`. Nodes in `newTree` that do not have a match in `oldTree` are considered changed.
|
|
45
|
-
|
|
46
|
-
- **`oldTree`** (`omdNode`): The root of the old subtree.
|
|
47
|
-
- **`newTree`** (`omdNode`): The root of the new subtree.
|
|
48
|
-
- **`educationalMode`** (`boolean`): Same as in `findChangedNodes`.
|
|
49
|
-
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes in `newTree`.
|
|
50
|
-
|
|
51
|
-
### `findEducationalHighlights(oldTree, newTree, optimalMatches)`
|
|
52
|
-
|
|
53
|
-
When `educationalMode` is enabled, this method identifies additional nodes to highlight for pedagogical reasons, even if they don't represent a structural change. This includes cases like the removal of additive/multiplicative identities or double negations.
|
|
54
|
-
|
|
55
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
56
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
57
|
-
- **`optimalMatches`** (`Array`): The list of optimally matched subtrees.
|
|
58
|
-
- **Returns**: `Array<omdNode>` - Additional nodes to highlight.
|
|
59
|
-
|
|
60
|
-
### `findAdditiveIdentityChanges(oldTree, newTree)`
|
|
61
|
-
|
|
62
|
-
Identifies changes related to the removal of additive identities (e.g., `+ 0` or `- 0`).
|
|
63
|
-
|
|
64
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
65
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
66
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for additive identity changes.
|
|
67
|
-
|
|
68
|
-
### `findMultiplicativeIdentityChanges(oldTree, newTree)`
|
|
69
|
-
|
|
70
|
-
Identifies changes related to the removal of multiplicative identities (e.g., `* 1` or `/ 1`).
|
|
71
|
-
|
|
72
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
73
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
74
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for multiplicative identity changes.
|
|
75
|
-
|
|
76
|
-
### `findDoubleNegativeChanges(oldTree, newTree)`
|
|
77
|
-
|
|
78
|
-
Identifies changes related to the simplification of double negatives (e.g., `--x` to `x`).
|
|
79
|
-
|
|
80
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
81
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
82
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for double negative removal.
|
|
83
|
-
|
|
84
|
-
### `findCommonPrefixHighlights(oldTree, newTree)`
|
|
85
|
-
|
|
86
|
-
Identifies highlighting patterns based on common prefixes between the string representations of the old and new trees. For example, if `"2x + 4"` becomes `"2x + 4 - 4"`, it highlights only the `"- 4"` part.
|
|
87
|
-
|
|
88
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
89
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
90
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for common prefix patterns.
|
|
91
|
-
|
|
92
|
-
### `findVariablePreservationHighlights(oldTree, newTree)`
|
|
93
|
-
|
|
94
|
-
Identifies highlighting patterns where a variable term remains the same but associated constants change. For example, `"2x + 4"` becoming `"2x + 2"` should highlight only the changed constant.
|
|
95
|
-
|
|
96
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
97
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
98
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for variable preservation patterns.
|
|
99
|
-
|
|
100
|
-
### `findTypeDifferenceHighlights(oldTree, newTree)`
|
|
101
|
-
|
|
102
|
-
Identifies highlighting patterns where the type of an expression changes significantly (e.g., a constant becoming a binary expression). In such cases, it highlights the new expression.
|
|
103
|
-
|
|
104
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
105
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
106
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for type difference patterns.
|
|
107
|
-
|
|
108
|
-
### `findSubtractionPatternHighlights(oldTree, newTree)`
|
|
109
|
-
|
|
110
|
-
Identifies highlighting patterns specific to subtraction, where the old tree matches the left side of a new subtraction. For example, `"x + 2"` becoming `"x + 2 - 2"` should highlight only the `"- 2"` part.
|
|
111
|
-
|
|
112
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
113
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
114
|
-
- **Returns**: `Array<omdNode>` - Nodes to highlight for subtraction patterns.
|
|
115
|
-
|
|
116
|
-
### `findAllSubtreeMatches(oldTree, newTree)`
|
|
117
|
-
|
|
118
|
-
Generates all possible subtree matches between two expression trees. A match is determined by structural or string equivalence.
|
|
119
|
-
|
|
120
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
121
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
122
|
-
- **Returns**: `Array<object>` - An array of match objects, each containing `oldNode`, `newNode`, `size`, `score`, and `type` of match.
|
|
123
|
-
|
|
124
|
-
### `selectOptimalMatching(matches)`
|
|
125
|
-
|
|
126
|
-
Given a list of all possible subtree matches, this method selects the optimal, non-overlapping set of matches. It uses a greedy approach, prioritizing larger and higher-scoring matches.
|
|
127
|
-
|
|
128
|
-
- **`matches`** (`Array<object>`): The array of potential matches from `findAllSubtreeMatches`.
|
|
129
|
-
- **Returns**: `Array<object>` - The selected optimal matches.
|
|
130
|
-
|
|
131
|
-
### `findUnmatchedLeafNodes(newTree, matches)`
|
|
132
|
-
|
|
133
|
-
Identifies all leaf nodes in the `newTree` that are not covered by any of the `optimalMatches`. These are the nodes that represent the actual changes.
|
|
134
|
-
|
|
135
|
-
- **`newTree`** (`omdNode`): The new expression tree.
|
|
136
|
-
- **`matches`** (`Array<object>`): The array of selected optimal matches.
|
|
137
|
-
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes.
|
|
138
|
-
|
|
139
|
-
### `findUnmatchedOldNodes(oldTree, matches)`
|
|
140
|
-
|
|
141
|
-
Finds leaf nodes in the `oldTree` that are not covered by any match. These represent nodes that were removed or transformed.
|
|
142
|
-
|
|
143
|
-
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
144
|
-
- **`matches`** (`Array<object>`): The array of selected optimal matches.
|
|
145
|
-
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes from the old tree.
|
|
146
|
-
|
|
147
|
-
## Internal Helper Methods
|
|
148
|
-
|
|
149
|
-
- **`_findCommonPrefix(str1, str2)`**: Finds the longest common string prefix between two strings.
|
|
150
|
-
- **`getAllSubtrees(root)`**: Recursively collects all subtrees from a given root node.
|
|
151
|
-
- **`calculateSimilarity(tree1, tree2)`**: Determines the similarity score between two subtrees, considering structural and string equivalence.
|
|
152
|
-
- **`treesStructurallyEqual(tree1, tree2)`**: Checks for exact structural equality between two subtrees.
|
|
153
|
-
- **`getSubtreeSize(root)`**: Calculates the number of nodes in a subtree.
|
|
154
|
-
- **`hasNodeOverlap(node, usedNodes)`**: Checks if a node or any of its descendants overlap with a set of already used nodes.
|
|
155
|
-
- **`markSubtreeAsUsed(root, usedNodes)`**: Marks all nodes in a subtree as used by adding them to a `Set`.
|
|
156
|
-
- **`debugPrintTree(node, depth)`**: A utility function for debugging that prints the structure of an `omdNode` tree to the console.
|
|
157
|
-
|
|
158
|
-
## How it Works
|
|
159
|
-
|
|
160
|
-
See the Algorithm Overview above for a summary of the process. The class is designed for internal use by step visualizer components.
|
|
161
|
-
|
|
162
|
-
### Example
|
|
163
|
-
|
|
164
|
-
This class is typically used internally by `omdStepVisualizerHighlighting`:
|
|
165
|
-
|
|
166
|
-
```javascript
|
|
167
|
-
// Example of internal usage within omdStepVisualizerHighlighting:
|
|
168
|
-
// const changedNodes = omdTreeDiff.findChangedNodes(previousEquation, currentEquation, { educationalMode: true });
|
|
169
|
-
// changedNodes.forEach(node => node.setExplainHighlight(true));
|
|
1
|
+
# omdTreeDiff
|
|
2
|
+
|
|
3
|
+
Implements a robust tree differencing algorithm to identify changes between two `omdNode` expression trees. This module is crucial for `omdStepVisualizerHighlighting`, providing precise visual feedback on how mathematical expressions transform from one step to the next.
|
|
4
|
+
|
|
5
|
+
## Algorithm Overview
|
|
6
|
+
|
|
7
|
+
`omdTreeDiff` uses a multi-stage approach to compare two expression trees (`oldEquation` and `newEquation`):
|
|
8
|
+
|
|
9
|
+
1. **Special Cases**: It first attempts to identify common pedagogical patterns (like adding/subtracting the same value from both sides, or simple identity/double negative simplifications). If found, these specific changes are highlighted directly.
|
|
10
|
+
2. **Optimal Subtree Matching**: If no special cases apply, it proceeds to find the largest, non-overlapping set of matched subtrees between the old and new expressions. A match can be either structurally identical or semantically equivalent (e.g., `2+3` and `5`).
|
|
11
|
+
3. **Identify Changes**: Any parts of the `newEquation` that are *not* part of these optimal matches are considered the actual changes and are returned for highlighting.
|
|
12
|
+
4. **Educational Mode**: When enabled, the algorithm includes additional heuristics to highlight subtle simplifications that might not involve a direct structural change but are important for understanding the transformation (e.g., removing `+ 0`).
|
|
13
|
+
|
|
14
|
+
## Class Definition
|
|
15
|
+
|
|
16
|
+
```javascript
|
|
17
|
+
export class omdTreeDiff
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
This class is not meant to be instantiated. All its methods are static.
|
|
21
|
+
|
|
22
|
+
## Static Methods
|
|
23
|
+
|
|
24
|
+
### `findChangedNodes(oldEquation, newEquation, options)`
|
|
25
|
+
|
|
26
|
+
Main entry point for the tree differencing algorithm. Compares two `omdEquationNode` instances (or any `omdNode` subtrees) and returns a list of nodes in the `newEquation` that have changed or are new.
|
|
27
|
+
|
|
28
|
+
- **`oldEquation`** (`omdNode`): The root node of the previous expression tree.
|
|
29
|
+
- **`newEquation`** (`omdNode`): The root node of the current expression tree.
|
|
30
|
+
- **`options`** (`object`, optional): Configuration options:
|
|
31
|
+
- `educationalMode` (`boolean`): If `true`, the diff algorithm will also highlight mathematically neutral changes that are pedagogically significant (e.g., removing `+ 0`). Default: `false`.
|
|
32
|
+
- **Returns**: `Array<omdNode>` - An array of `omdNode` instances from `newEquation` that should be highlighted.
|
|
33
|
+
|
|
34
|
+
### `findEquationSpecialCases(oldEquation, newEquation)`
|
|
35
|
+
|
|
36
|
+
Identifies specific equation-level transformation patterns, such as adding/subtracting the same operation to both sides of an equation. This allows for more intuitive highlighting in common step-by-step solution scenarios.
|
|
37
|
+
|
|
38
|
+
- **`oldEquation`** (`omdEquationNode`): The previous equation.
|
|
39
|
+
- **`newEquation`** (`omdEquationNode`): The current equation.
|
|
40
|
+
- **Returns**: `Array<omdNode>` - An array of nodes to highlight for these special cases, or an empty array if no such pattern is found.
|
|
41
|
+
|
|
42
|
+
### `diffSubtrees(oldTree, newTree, educationalMode)`
|
|
43
|
+
|
|
44
|
+
Core recursive differencing method. It first checks for various pedagogical highlighting patterns (common prefix, variable preservation, type differences, subtraction patterns). If none apply, it falls back to finding an optimal matching between subtrees of the `oldTree` and `newTree`. Nodes in `newTree` that do not have a match in `oldTree` are considered changed.
|
|
45
|
+
|
|
46
|
+
- **`oldTree`** (`omdNode`): The root of the old subtree.
|
|
47
|
+
- **`newTree`** (`omdNode`): The root of the new subtree.
|
|
48
|
+
- **`educationalMode`** (`boolean`): Same as in `findChangedNodes`.
|
|
49
|
+
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes in `newTree`.
|
|
50
|
+
|
|
51
|
+
### `findEducationalHighlights(oldTree, newTree, optimalMatches)`
|
|
52
|
+
|
|
53
|
+
When `educationalMode` is enabled, this method identifies additional nodes to highlight for pedagogical reasons, even if they don't represent a structural change. This includes cases like the removal of additive/multiplicative identities or double negations.
|
|
54
|
+
|
|
55
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
56
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
57
|
+
- **`optimalMatches`** (`Array`): The list of optimally matched subtrees.
|
|
58
|
+
- **Returns**: `Array<omdNode>` - Additional nodes to highlight.
|
|
59
|
+
|
|
60
|
+
### `findAdditiveIdentityChanges(oldTree, newTree)`
|
|
61
|
+
|
|
62
|
+
Identifies changes related to the removal of additive identities (e.g., `+ 0` or `- 0`).
|
|
63
|
+
|
|
64
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
65
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
66
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for additive identity changes.
|
|
67
|
+
|
|
68
|
+
### `findMultiplicativeIdentityChanges(oldTree, newTree)`
|
|
69
|
+
|
|
70
|
+
Identifies changes related to the removal of multiplicative identities (e.g., `* 1` or `/ 1`).
|
|
71
|
+
|
|
72
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
73
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
74
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for multiplicative identity changes.
|
|
75
|
+
|
|
76
|
+
### `findDoubleNegativeChanges(oldTree, newTree)`
|
|
77
|
+
|
|
78
|
+
Identifies changes related to the simplification of double negatives (e.g., `--x` to `x`).
|
|
79
|
+
|
|
80
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
81
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
82
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for double negative removal.
|
|
83
|
+
|
|
84
|
+
### `findCommonPrefixHighlights(oldTree, newTree)`
|
|
85
|
+
|
|
86
|
+
Identifies highlighting patterns based on common prefixes between the string representations of the old and new trees. For example, if `"2x + 4"` becomes `"2x + 4 - 4"`, it highlights only the `"- 4"` part.
|
|
87
|
+
|
|
88
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
89
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
90
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for common prefix patterns.
|
|
91
|
+
|
|
92
|
+
### `findVariablePreservationHighlights(oldTree, newTree)`
|
|
93
|
+
|
|
94
|
+
Identifies highlighting patterns where a variable term remains the same but associated constants change. For example, `"2x + 4"` becoming `"2x + 2"` should highlight only the changed constant.
|
|
95
|
+
|
|
96
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
97
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
98
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for variable preservation patterns.
|
|
99
|
+
|
|
100
|
+
### `findTypeDifferenceHighlights(oldTree, newTree)`
|
|
101
|
+
|
|
102
|
+
Identifies highlighting patterns where the type of an expression changes significantly (e.g., a constant becoming a binary expression). In such cases, it highlights the new expression.
|
|
103
|
+
|
|
104
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
105
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
106
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for type difference patterns.
|
|
107
|
+
|
|
108
|
+
### `findSubtractionPatternHighlights(oldTree, newTree)`
|
|
109
|
+
|
|
110
|
+
Identifies highlighting patterns specific to subtraction, where the old tree matches the left side of a new subtraction. For example, `"x + 2"` becoming `"x + 2 - 2"` should highlight only the `"- 2"` part.
|
|
111
|
+
|
|
112
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
113
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
114
|
+
- **Returns**: `Array<omdNode>` - Nodes to highlight for subtraction patterns.
|
|
115
|
+
|
|
116
|
+
### `findAllSubtreeMatches(oldTree, newTree)`
|
|
117
|
+
|
|
118
|
+
Generates all possible subtree matches between two expression trees. A match is determined by structural or string equivalence.
|
|
119
|
+
|
|
120
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
121
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
122
|
+
- **Returns**: `Array<object>` - An array of match objects, each containing `oldNode`, `newNode`, `size`, `score`, and `type` of match.
|
|
123
|
+
|
|
124
|
+
### `selectOptimalMatching(matches)`
|
|
125
|
+
|
|
126
|
+
Given a list of all possible subtree matches, this method selects the optimal, non-overlapping set of matches. It uses a greedy approach, prioritizing larger and higher-scoring matches.
|
|
127
|
+
|
|
128
|
+
- **`matches`** (`Array<object>`): The array of potential matches from `findAllSubtreeMatches`.
|
|
129
|
+
- **Returns**: `Array<object>` - The selected optimal matches.
|
|
130
|
+
|
|
131
|
+
### `findUnmatchedLeafNodes(newTree, matches)`
|
|
132
|
+
|
|
133
|
+
Identifies all leaf nodes in the `newTree` that are not covered by any of the `optimalMatches`. These are the nodes that represent the actual changes.
|
|
134
|
+
|
|
135
|
+
- **`newTree`** (`omdNode`): The new expression tree.
|
|
136
|
+
- **`matches`** (`Array<object>`): The array of selected optimal matches.
|
|
137
|
+
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes.
|
|
138
|
+
|
|
139
|
+
### `findUnmatchedOldNodes(oldTree, matches)`
|
|
140
|
+
|
|
141
|
+
Finds leaf nodes in the `oldTree` that are not covered by any match. These represent nodes that were removed or transformed.
|
|
142
|
+
|
|
143
|
+
- **`oldTree`** (`omdNode`): The old expression tree.
|
|
144
|
+
- **`matches`** (`Array<object>`): The array of selected optimal matches.
|
|
145
|
+
- **Returns**: `Array<omdNode>` - An array of unmatched leaf nodes from the old tree.
|
|
146
|
+
|
|
147
|
+
## Internal Helper Methods
|
|
148
|
+
|
|
149
|
+
- **`_findCommonPrefix(str1, str2)`**: Finds the longest common string prefix between two strings.
|
|
150
|
+
- **`getAllSubtrees(root)`**: Recursively collects all subtrees from a given root node.
|
|
151
|
+
- **`calculateSimilarity(tree1, tree2)`**: Determines the similarity score between two subtrees, considering structural and string equivalence.
|
|
152
|
+
- **`treesStructurallyEqual(tree1, tree2)`**: Checks for exact structural equality between two subtrees.
|
|
153
|
+
- **`getSubtreeSize(root)`**: Calculates the number of nodes in a subtree.
|
|
154
|
+
- **`hasNodeOverlap(node, usedNodes)`**: Checks if a node or any of its descendants overlap with a set of already used nodes.
|
|
155
|
+
- **`markSubtreeAsUsed(root, usedNodes)`**: Marks all nodes in a subtree as used by adding them to a `Set`.
|
|
156
|
+
- **`debugPrintTree(node, depth)`**: A utility function for debugging that prints the structure of an `omdNode` tree to the console.
|
|
157
|
+
|
|
158
|
+
## How it Works
|
|
159
|
+
|
|
160
|
+
See the Algorithm Overview above for a summary of the process. The class is designed for internal use by step visualizer components.
|
|
161
|
+
|
|
162
|
+
### Example
|
|
163
|
+
|
|
164
|
+
This class is typically used internally by `omdStepVisualizerHighlighting`:
|
|
165
|
+
|
|
166
|
+
```javascript
|
|
167
|
+
// Example of internal usage within omdStepVisualizerHighlighting:
|
|
168
|
+
// const changedNodes = omdTreeDiff.findChangedNodes(previousEquation, currentEquation, { educationalMode: true });
|
|
169
|
+
// changedNodes.forEach(node => node.setExplainHighlight(true));
|
|
170
170
|
```
|