Squashed 'vendor/ruvector/' content from commit b64c2172
git-subtree-dir: vendor/ruvector git-subtree-split: b64c21726f2bb37286d9ee36a7869fef60cc6900
This commit is contained in:
ruv
4
examples/scipix/web/.gitignore
vendored
Normal file
4
examples/scipix/web/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
pkg/
|
||||
node_modules/
|
||||
*.log
|
||||
.DS_Store
|
||||
178
examples/scipix/web/README.md
Normal file
178
examples/scipix/web/README.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# Scipix WASM - WebAssembly OCR
|
||||
|
||||
High-performance OCR with LaTeX support for the browser, powered by WebAssembly.
|
||||
|
||||
## Features
|
||||
|
||||
- 📸 **Image OCR**: Recognize text from images
|
||||
- 🧮 **LaTeX Support**: Extract mathematical formulas
|
||||
- ⚡ **Web Workers**: Off-main-thread processing
|
||||
- 🎯 **TypeScript**: Full type definitions
|
||||
- 🚀 **Optimized**: <2MB bundle size
|
||||
- 🔧 **Flexible API**: Multiple input formats
|
||||
|
||||
## Quick Start
|
||||
|
||||
### Installation
|
||||
|
||||
```bash
|
||||
npm install ruvector-scipix-wasm
|
||||
```
|
||||
|
||||
### Build from Source
|
||||
|
||||
```bash
|
||||
cd examples/scipix
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Basic Usage
|
||||
|
||||
```javascript
|
||||
import { createScipix } from 'ruvector-scipix-wasm';
|
||||
|
||||
// Initialize
|
||||
const scipix = await createScipix();
|
||||
|
||||
// Recognize from file
|
||||
const result = await scipix.recognize(imageData);
|
||||
console.log(result.text);
|
||||
console.log(result.latex);
|
||||
```
|
||||
|
||||
### Canvas Example
|
||||
|
||||
```javascript
|
||||
import { recognizeCanvas } from 'ruvector-scipix-wasm';
|
||||
|
||||
const canvas = document.getElementById('myCanvas');
|
||||
const result = await recognizeCanvas(canvas);
|
||||
```
|
||||
|
||||
### Web Worker Example
|
||||
|
||||
```javascript
|
||||
import { createWorker } from 'ruvector-scipix-wasm';
|
||||
|
||||
const worker = createWorker();
|
||||
|
||||
// Process in background
|
||||
const result = await worker.recognize(imageData);
|
||||
|
||||
// Batch processing with progress
|
||||
const results = await worker.recognizeBatch(images, {
|
||||
onProgress: ({ processed, total }) => {
|
||||
console.log(`Progress: ${processed}/${total}`);
|
||||
}
|
||||
});
|
||||
|
||||
worker.terminate();
|
||||
```
|
||||
|
||||
## API Reference
|
||||
|
||||
### `createScipix(options?)`
|
||||
|
||||
Create a new Scipix instance.
|
||||
|
||||
```typescript
|
||||
const scipix = await createScipix({
|
||||
format: 'both', // 'text' | 'latex' | 'both'
|
||||
confidenceThreshold: 0.5 // 0.0 - 1.0
|
||||
});
|
||||
```
|
||||
|
||||
### `ScipixWasm`
|
||||
|
||||
Main API class.
|
||||
|
||||
#### Methods
|
||||
|
||||
- `recognize(imageData: Uint8Array): Promise<OcrResult>`
|
||||
- `recognizeFromCanvas(canvas: HTMLCanvasElement): Promise<OcrResult>`
|
||||
- `recognizeBase64(base64: string): Promise<OcrResult>`
|
||||
- `recognizeImageData(imageData: ImageData): Promise<OcrResult>`
|
||||
- `recognizeBatch(images: Uint8Array[]): Promise<OcrResult[]>`
|
||||
- `setFormat(format: RecognitionFormat): void`
|
||||
- `setConfidenceThreshold(threshold: number): void`
|
||||
- `getVersion(): string`
|
||||
|
||||
### Helper Functions
|
||||
|
||||
```javascript
|
||||
import {
|
||||
recognizeFile, // From File/Blob
|
||||
recognizeCanvas, // From HTMLCanvasElement
|
||||
recognizeBase64, // From base64 string
|
||||
recognizeUrl, // From image URL
|
||||
recognizeBatch, // Batch processing
|
||||
imageToCanvas, // Convert image to canvas
|
||||
} from 'ruvector-scipix-wasm';
|
||||
```
|
||||
|
||||
## Types
|
||||
|
||||
### `OcrResult`
|
||||
|
||||
```typescript
|
||||
interface OcrResult {
|
||||
text: string; // Recognized text
|
||||
latex?: string; // LaTeX (if enabled)
|
||||
confidence: number; // 0.0 - 1.0
|
||||
metadata?: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
format?: string;
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
### `RecognitionFormat`
|
||||
|
||||
```typescript
|
||||
type RecognitionFormat = 'text' | 'latex' | 'both';
|
||||
```
|
||||
|
||||
## Demo
|
||||
|
||||
Run the interactive demo:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Open http://localhost:8080/example.html
|
||||
|
||||
## Performance Tips
|
||||
|
||||
1. **Use Web Workers** for large images or batch processing
|
||||
2. **Set confidence threshold** to filter low-quality results
|
||||
3. **Resize images** before processing if possible
|
||||
4. **Reuse instances** instead of creating new ones
|
||||
5. **Use SharedImageBuffer** for large image batches
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Chrome 57+
|
||||
- Firefox 52+
|
||||
- Safari 11+
|
||||
- Edge 16+
|
||||
|
||||
Requires WebAssembly support.
|
||||
|
||||
## Bundle Size
|
||||
|
||||
- WASM module: ~800KB (gzipped)
|
||||
- JavaScript wrapper: ~15KB (gzipped)
|
||||
- **Total: <1MB**
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
||||
## Credits
|
||||
|
||||
Built with:
|
||||
- [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)
|
||||
- [image-rs](https://github.com/image-rs/image)
|
||||
- [ruvector](https://github.com/ruvnet/ruvector)
|
||||
32
examples/scipix/web/build.sh
Executable file
32
examples/scipix/web/build.sh
Executable file
@@ -0,0 +1,32 @@
|
||||
#!/bin/bash
|
||||
set -e
|
||||
|
||||
echo "Building Mathpix WASM module..."
|
||||
|
||||
# Check if wasm-pack is installed
|
||||
if ! command -v wasm-pack &> /dev/null; then
|
||||
echo "wasm-pack not found. Installing..."
|
||||
cargo install wasm-pack
|
||||
fi
|
||||
|
||||
cd "$(dirname "$0")/.."
|
||||
|
||||
# Build for production
|
||||
echo "Building release..."
|
||||
wasm-pack build \
|
||||
--target web \
|
||||
--out-dir web/pkg \
|
||||
--release \
|
||||
-- --features wasm
|
||||
|
||||
echo "✓ Build complete!"
|
||||
echo " Output: web/pkg/"
|
||||
echo " Size: $(du -sh web/pkg/ruvector_scipix_bg.wasm | cut -f1)"
|
||||
|
||||
# Run demo server
|
||||
if [ "$1" = "--serve" ]; then
|
||||
echo ""
|
||||
echo "Starting demo server on http://localhost:8080"
|
||||
cd web
|
||||
python3 -m http.server 8080
|
||||
fi
|
||||
581
examples/scipix/web/example.html
Normal file
581
examples/scipix/web/example.html
Normal file
@@ -0,0 +1,581 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Mathpix WASM Demo</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
opacity: 0.9;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
border: 2px dashed #667eea;
|
||||
border-radius: 8px;
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.upload-section:hover {
|
||||
background: #f8f9ff;
|
||||
border-color: #764ba2;
|
||||
}
|
||||
|
||||
.upload-section.dragover {
|
||||
background: #e8ebff;
|
||||
border-color: #667eea;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.option-group {
|
||||
flex: 1;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
select, input[type="range"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.threshold-value {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.preview-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.preview-box {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
|
||||
.preview-box h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
canvas {
|
||||
max-width: 100%;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.results-section {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #f9f9f9;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 10px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-weight: 600;
|
||||
color: #667eea;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-family: 'Courier New', monospace;
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.confidence-bar {
|
||||
height: 8px;
|
||||
background: #e0e0e0;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.confidence-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||||
transition: width 0.3s;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #fee;
|
||||
border-left: 4px solid #f44;
|
||||
color: #c33;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
min-width: 150px;
|
||||
background: white;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.preview-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<header>
|
||||
<h1>🔬 Mathpix WASM Demo</h1>
|
||||
<p class="subtitle">OCR with LaTeX support powered by WebAssembly</p>
|
||||
</header>
|
||||
|
||||
<div class="content">
|
||||
<!-- Upload Section -->
|
||||
<div class="upload-section" id="dropZone">
|
||||
<div class="upload-icon">📸</div>
|
||||
<h2>Drop an image here or click to upload</h2>
|
||||
<p>Supports PNG, JPEG, and other image formats</p>
|
||||
<input type="file" id="fileInput" accept="image/*">
|
||||
<button class="btn" onclick="document.getElementById('fileInput').click()">
|
||||
Choose File
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Options -->
|
||||
<div class="options">
|
||||
<div class="option-group">
|
||||
<label for="formatSelect">Output Format:</label>
|
||||
<select id="formatSelect">
|
||||
<option value="both">Both (Text + LaTeX)</option>
|
||||
<option value="text">Text Only</option>
|
||||
<option value="latex">LaTeX Only</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<label for="thresholdSlider">
|
||||
Confidence Threshold:
|
||||
<span class="threshold-value" id="thresholdValue">0.50</span>
|
||||
</label>
|
||||
<input type="range" id="thresholdSlider" min="0" max="100" value="50">
|
||||
</div>
|
||||
|
||||
<div class="option-group">
|
||||
<label for="workerCheckbox">
|
||||
<input type="checkbox" id="workerCheckbox" checked>
|
||||
Use Web Worker
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Section -->
|
||||
<div class="preview-section" style="display: none;" id="previewSection">
|
||||
<div class="preview-box">
|
||||
<h3>Original Image</h3>
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="preview-box">
|
||||
<h3>Processing Info</h3>
|
||||
<div id="processingInfo"></div>
|
||||
<button class="btn" id="processBtn" disabled>Process Image</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results Section -->
|
||||
<div class="results-section" style="display: none;" id="resultsSection">
|
||||
<h3>Recognition Results</h3>
|
||||
<div id="results"></div>
|
||||
</div>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats" style="display: none;" id="statsSection">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="imageCount">0</div>
|
||||
<div class="stat-label">Images Processed</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="avgTime">0ms</div>
|
||||
<div class="stat-label">Avg. Processing Time</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="wasmVersion">-</div>
|
||||
<div class="stat-label">WASM Version</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import scipix from './index.js';
|
||||
|
||||
let currentImage = null;
|
||||
let stats = {
|
||||
count: 0,
|
||||
totalTime: 0
|
||||
};
|
||||
|
||||
// Initialize
|
||||
(async () => {
|
||||
try {
|
||||
const version = await scipix.getVersion();
|
||||
document.getElementById('wasmVersion').textContent = version;
|
||||
console.log('Mathpix initialized, version:', version);
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize:', error);
|
||||
showError('Failed to initialize WASM module: ' + error.message);
|
||||
}
|
||||
})();
|
||||
|
||||
// File input handler
|
||||
const fileInput = document.getElementById('fileInput');
|
||||
const dropZone = document.getElementById('dropZone');
|
||||
const canvas = document.getElementById('canvas');
|
||||
const processBtn = document.getElementById('processBtn');
|
||||
const thresholdSlider = document.getElementById('thresholdSlider');
|
||||
const thresholdValue = document.getElementById('thresholdValue');
|
||||
|
||||
fileInput.addEventListener('change', handleFileSelect);
|
||||
processBtn.addEventListener('click', processImage);
|
||||
|
||||
thresholdSlider.addEventListener('input', (e) => {
|
||||
const value = (e.target.value / 100).toFixed(2);
|
||||
thresholdValue.textContent = value;
|
||||
});
|
||||
|
||||
// Drag and drop
|
||||
dropZone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.add('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('dragleave', () => {
|
||||
dropZone.classList.remove('dragover');
|
||||
});
|
||||
|
||||
dropZone.addEventListener('drop', (e) => {
|
||||
e.preventDefault();
|
||||
dropZone.classList.remove('dragover');
|
||||
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
}
|
||||
});
|
||||
|
||||
dropZone.addEventListener('click', () => {
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
function handleFileSelect(e) {
|
||||
const files = e.target.files;
|
||||
if (files.length > 0) {
|
||||
handleFile(files[0]);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleFile(file) {
|
||||
if (!file.type.startsWith('image/')) {
|
||||
showError('Please select an image file');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
currentImage = file;
|
||||
|
||||
// Show preview
|
||||
const img = await createImageBitmap(file);
|
||||
const ctx = canvas.getContext('2d');
|
||||
canvas.width = img.width;
|
||||
canvas.height = img.height;
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
// Show preview section
|
||||
document.getElementById('previewSection').style.display = 'grid';
|
||||
document.getElementById('processingInfo').innerHTML = `
|
||||
<div class="result-item">
|
||||
<div class="result-label">File Name:</div>
|
||||
<div class="result-value">${file.name}</div>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-label">Size:</div>
|
||||
<div class="result-value">${(file.size / 1024).toFixed(2)} KB</div>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-label">Dimensions:</div>
|
||||
<div class="result-value">${img.width} × ${img.height}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
processBtn.disabled = false;
|
||||
} catch (error) {
|
||||
showError('Failed to load image: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
async function processImage() {
|
||||
if (!currentImage) return;
|
||||
|
||||
processBtn.disabled = true;
|
||||
showLoading();
|
||||
|
||||
try {
|
||||
const format = document.getElementById('formatSelect').value;
|
||||
const threshold = parseFloat(thresholdSlider.value) / 100;
|
||||
const useWorker = document.getElementById('workerCheckbox').checked;
|
||||
|
||||
const startTime = performance.now();
|
||||
|
||||
let result;
|
||||
if (useWorker) {
|
||||
const worker = scipix.createWorker();
|
||||
result = await worker.recognize(
|
||||
new Uint8Array(await currentImage.arrayBuffer()),
|
||||
{ format, confidenceThreshold: threshold }
|
||||
);
|
||||
worker.terminate();
|
||||
} else {
|
||||
result = await scipix.recognizeFile(currentImage, {
|
||||
format,
|
||||
confidenceThreshold: threshold
|
||||
});
|
||||
}
|
||||
|
||||
const endTime = performance.now();
|
||||
const processingTime = Math.round(endTime - startTime);
|
||||
|
||||
// Update stats
|
||||
stats.count++;
|
||||
stats.totalTime += processingTime;
|
||||
updateStats(processingTime);
|
||||
|
||||
// Show results
|
||||
showResults(result, processingTime);
|
||||
|
||||
} catch (error) {
|
||||
showError('Processing failed: ' + error.message);
|
||||
} finally {
|
||||
processBtn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
function showLoading() {
|
||||
const resultsSection = document.getElementById('resultsSection');
|
||||
resultsSection.style.display = 'block';
|
||||
resultsSection.innerHTML = `
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Processing image...</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function showResults(result, processingTime) {
|
||||
const resultsSection = document.getElementById('resultsSection');
|
||||
resultsSection.style.display = 'block';
|
||||
|
||||
const confidencePercent = (result.confidence * 100).toFixed(1);
|
||||
|
||||
let html = `
|
||||
<div class="result-item">
|
||||
<div class="result-label">Text:</div>
|
||||
<div class="result-value">${result.text || '(empty)'}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
if (result.latex) {
|
||||
html += `
|
||||
<div class="result-item">
|
||||
<div class="result-label">LaTeX:</div>
|
||||
<div class="result-value">${result.latex}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
html += `
|
||||
<div class="result-item">
|
||||
<div class="result-label">Confidence: ${confidencePercent}%</div>
|
||||
<div class="confidence-bar">
|
||||
<div class="confidence-fill" style="width: ${confidencePercent}%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="result-item">
|
||||
<div class="result-label">Processing Time:</div>
|
||||
<div class="result-value">${processingTime}ms</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
resultsSection.innerHTML = `<h3>Recognition Results</h3>${html}`;
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const resultsSection = document.getElementById('resultsSection');
|
||||
resultsSection.style.display = 'block';
|
||||
resultsSection.innerHTML = `
|
||||
<div class="error">
|
||||
<strong>Error:</strong> ${message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function updateStats(lastTime) {
|
||||
document.getElementById('statsSection').style.display = 'flex';
|
||||
document.getElementById('imageCount').textContent = stats.count;
|
||||
document.getElementById('avgTime').textContent =
|
||||
Math.round(stats.totalTime / stats.count) + 'ms';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
27
examples/scipix/web/package.json
Normal file
27
examples/scipix/web/package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "ruvector-mathpix-wasm",
|
||||
"version": "0.1.0",
|
||||
"description": "Mathpix OCR WebAssembly bindings",
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
"types": "types.ts",
|
||||
"scripts": {
|
||||
"build": "wasm-pack build .. --target web --out-dir web/pkg --release -- --features wasm",
|
||||
"build:dev": "wasm-pack build .. --target web --out-dir web/pkg --dev -- --features wasm",
|
||||
"serve": "python3 -m http.server 8080",
|
||||
"dev": "npm run build:dev && npm run serve",
|
||||
"test": "echo \"No tests yet\""
|
||||
},
|
||||
"keywords": [
|
||||
"wasm",
|
||||
"ocr",
|
||||
"mathpix",
|
||||
"latex",
|
||||
"webassembly"
|
||||
],
|
||||
"author": "Ruvector Team",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"typescript": "^5.0.0"
|
||||
}
|
||||
}
|
||||
16
examples/scipix/web/tsconfig.json
Normal file
16
examples/scipix/web/tsconfig.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "ES2020",
|
||||
"lib": ["ES2020", "DOM"],
|
||||
"moduleResolution": "node",
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"resolveJsonModule": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"forceConsistentCasingInFileNames": true
|
||||
},
|
||||
"include": ["*.ts", "*.js"],
|
||||
"exclude": ["node_modules", "pkg"]
|
||||
}
|
||||
226
examples/scipix/web/types.ts
Normal file
226
examples/scipix/web/types.ts
Normal file
@@ -0,0 +1,226 @@
|
||||
/**
|
||||
* TypeScript definitions for Mathpix WASM module
|
||||
*/
|
||||
|
||||
/**
|
||||
* OCR recognition result
|
||||
*/
|
||||
export interface OcrResult {
|
||||
/** Recognized plain text */
|
||||
text: string;
|
||||
|
||||
/** LaTeX representation (if applicable) */
|
||||
latex?: string;
|
||||
|
||||
/** Confidence score (0.0 - 1.0) */
|
||||
confidence: number;
|
||||
|
||||
/** Additional metadata */
|
||||
metadata?: {
|
||||
width?: number;
|
||||
height?: number;
|
||||
format?: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Recognition output format
|
||||
*/
|
||||
export type RecognitionFormat = 'text' | 'latex' | 'both';
|
||||
|
||||
/**
|
||||
* Processing options
|
||||
*/
|
||||
export interface ProcessingOptions {
|
||||
/** Output format */
|
||||
format?: RecognitionFormat;
|
||||
|
||||
/** Confidence threshold (0.0 - 1.0) */
|
||||
confidenceThreshold?: number;
|
||||
|
||||
/** Enable preprocessing */
|
||||
preprocess?: boolean;
|
||||
|
||||
/** Enable postprocessing */
|
||||
postprocess?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Main Mathpix WASM API
|
||||
*/
|
||||
export class MathpixWasm {
|
||||
/**
|
||||
* Create a new MathpixWasm instance
|
||||
*/
|
||||
constructor();
|
||||
|
||||
/**
|
||||
* Initialize and create a new instance
|
||||
*/
|
||||
static new(): Promise<MathpixWasm>;
|
||||
|
||||
/**
|
||||
* Recognize text from raw image data
|
||||
* @param imageData Raw image bytes (PNG, JPEG, etc.)
|
||||
* @returns OCR result
|
||||
*/
|
||||
recognize(imageData: Uint8Array): Promise<OcrResult>;
|
||||
|
||||
/**
|
||||
* Recognize text from HTML Canvas element
|
||||
* @param canvas HTML Canvas element
|
||||
* @returns OCR result
|
||||
*/
|
||||
recognizeFromCanvas(canvas: HTMLCanvasElement): Promise<OcrResult>;
|
||||
|
||||
/**
|
||||
* Recognize text from base64-encoded image
|
||||
* @param base64 Base64 string (with or without data URL prefix)
|
||||
* @returns OCR result
|
||||
*/
|
||||
recognizeBase64(base64: string): Promise<OcrResult>;
|
||||
|
||||
/**
|
||||
* Recognize text from ImageData object
|
||||
* @param imageData ImageData from canvas
|
||||
* @returns OCR result
|
||||
*/
|
||||
recognizeImageData(imageData: ImageData): Promise<OcrResult>;
|
||||
|
||||
/**
|
||||
* Set the output format
|
||||
* @param format Recognition format ('text', 'latex', or 'both')
|
||||
*/
|
||||
setFormat(format: RecognitionFormat): void;
|
||||
|
||||
/**
|
||||
* Set the confidence threshold
|
||||
* @param threshold Threshold value (0.0 - 1.0)
|
||||
*/
|
||||
setConfidenceThreshold(threshold: number): void;
|
||||
|
||||
/**
|
||||
* Get the current confidence threshold
|
||||
* @returns Current threshold value
|
||||
*/
|
||||
getConfidenceThreshold(): number;
|
||||
|
||||
/**
|
||||
* Get the library version
|
||||
* @returns Version string
|
||||
*/
|
||||
getVersion(): string;
|
||||
|
||||
/**
|
||||
* Get supported output formats
|
||||
* @returns Array of supported format strings
|
||||
*/
|
||||
getSupportedFormats(): string[];
|
||||
|
||||
/**
|
||||
* Batch process multiple images
|
||||
* @param images Array of image data (Uint8Array)
|
||||
* @returns Array of OCR results
|
||||
*/
|
||||
recognizeBatch(images: Uint8Array[]): Promise<OcrResult[]>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Factory function to create MathpixWasm instance
|
||||
*/
|
||||
export function createMathpix(): Promise<MathpixWasm>;
|
||||
|
||||
/**
|
||||
* Get WASM module version
|
||||
*/
|
||||
export function version(): string;
|
||||
|
||||
/**
|
||||
* Check if WASM module is ready
|
||||
*/
|
||||
export function isReady(): boolean;
|
||||
|
||||
/**
|
||||
* Shared image buffer for efficient memory management
|
||||
*/
|
||||
export class SharedImageBuffer {
|
||||
/**
|
||||
* Create a new shared buffer
|
||||
* @param width Image width
|
||||
* @param height Image height
|
||||
*/
|
||||
constructor(width: number, height: number);
|
||||
|
||||
/** Image width */
|
||||
readonly width: number;
|
||||
|
||||
/** Image height */
|
||||
readonly height: number;
|
||||
|
||||
/** Buffer size in bytes */
|
||||
bufferSize(): number;
|
||||
|
||||
/** Get buffer as Uint8Array */
|
||||
getBuffer(): Uint8Array;
|
||||
|
||||
/** Set buffer from Uint8Array */
|
||||
setBuffer(data: Uint8Array): void;
|
||||
|
||||
/** Clear the buffer */
|
||||
clear(): void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert blob URL to ImageData
|
||||
* @param blobUrl Blob URL string
|
||||
* @returns ImageData object
|
||||
*/
|
||||
export function blobUrlToImageData(blobUrl: string): Promise<ImageData>;
|
||||
|
||||
/**
|
||||
* Get memory usage statistics
|
||||
* @returns Memory stats object
|
||||
*/
|
||||
export function getMemoryStats(): any;
|
||||
|
||||
/**
|
||||
* Force garbage collection (hint to runtime)
|
||||
*/
|
||||
export function forceGC(): void;
|
||||
|
||||
/**
|
||||
* Worker message types
|
||||
*/
|
||||
export type WorkerRequestType =
|
||||
| 'Init'
|
||||
| 'Process'
|
||||
| 'ProcessBase64'
|
||||
| 'BatchProcess'
|
||||
| 'Terminate';
|
||||
|
||||
export type WorkerResponseType =
|
||||
| 'Ready'
|
||||
| 'Started'
|
||||
| 'Progress'
|
||||
| 'Success'
|
||||
| 'Error'
|
||||
| 'Terminated';
|
||||
|
||||
export interface WorkerRequest {
|
||||
type: WorkerRequestType;
|
||||
id?: string;
|
||||
imageData?: Uint8Array;
|
||||
base64?: string;
|
||||
images?: Uint8Array[];
|
||||
format?: RecognitionFormat;
|
||||
}
|
||||
|
||||
export interface WorkerResponse {
|
||||
type: WorkerResponseType;
|
||||
id?: string;
|
||||
result?: OcrResult | OcrResult[];
|
||||
error?: string;
|
||||
processed?: number;
|
||||
total?: number;
|
||||
}
|
||||
29
examples/scipix/web/worker.js
Normal file
29
examples/scipix/web/worker.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/**
|
||||
* Web Worker for off-main-thread OCR processing
|
||||
*/
|
||||
|
||||
import init, { setupWorker } from '../pkg/ruvector_mathpix.js';
|
||||
|
||||
let initialized = false;
|
||||
|
||||
// Initialize WASM in worker
|
||||
async function initialize() {
|
||||
if (initialized) return;
|
||||
|
||||
try {
|
||||
await init();
|
||||
setupWorker();
|
||||
initialized = true;
|
||||
|
||||
self.postMessage({ type: 'Ready' });
|
||||
} catch (error) {
|
||||
console.error('Worker initialization failed:', error);
|
||||
self.postMessage({
|
||||
type: 'Error',
|
||||
error: error.message
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-initialize
|
||||
initialize();
|
||||
Reference in New Issue
Block a user