From Browser to Serverless: How We Protected Our AI Font Generation IP (And You Should Too)
When we built GLIPH—an AI-powered tool that converts sketches into production fonts—we faced every web app founder's nightmare: our most valuable code was completely exposed in the browser.
Anyone could open DevTools, dig through our JavaScript, and reverse-engineer 6 months of custom AI algorithms. 😱
Here's how we moved our core IP to serverless functions and why you should consider the same approach for your proprietary logic.
🔍 The Problem: Client-Side = Exposed Code
Our original architecture looked like this:
// All of this was visible in the browser 🤦♂️
class SmartFontGenerator {
async processGlyphSheet(glyphs) {
// Custom AI glyph detection algorithms
const enhancedGlyphs = await this.analyzeGlyphs(glyphs);
// Proprietary vectorization logic
const vectorizedGlyphs = this.vectorizeWithAI(enhancedGlyphs);
// Advanced font generation with smart kerning
return this.generateFont(vectorizedGlyphs);
}
}
Even with obfuscation, a determined developer could:
- Extract our AI models
- Reverse-engineer our vectorization algorithms
- Copy our font generation logic
- Build a competing product in weeks
🛡️ The Solution: Serverless IP Protection
We moved our crown jewels to Netlify Functions:
// netlify/functions/font-generator.js
exports.handler = async (event, context) => {
// API key protection
if (event.headers['x-api-key'] !== process.env.GLIPH_FONT_SECRET) {
return { statusCode: 401, body: 'Unauthorized' };
}
try {
const { glyphs, metrics } = JSON.parse(event.body);
// 🔒 All proprietary logic now runs server-side
const fontBuffer = await generateSmartFont(glyphs, metrics);
return {
statusCode: 200,
body: JSON.stringify({
fontData: Buffer.from(fontBuffer).toString('base64')
})
};
} catch (error) {
return { statusCode: 500, body: 'Font generation failed' };
}
};
// 🔒 Secret sauce hidden on server
async function generateSmartFont(glyphs, metrics) {
// Custom AI algorithms safely tucked away
// Complex vectorization logic protected
// Advanced font generation secured
}
🔄 The Migration Challenges
1. Browser APIs Don't Exist in Node.js
Our client-side code used Image, Canvas, and document:
// ❌ This breaks in serverless functions
const canvas = document.createElement('canvas');
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, width, height);
};
Solution: Pre-process image data on client, send pixel arrays:
// ✅ Client-side preprocessing
const pixels = await dataUrlToPixels(glyph.dataUrl);
const glyphData = {
...glyph,
pixels: Array.from(pixels) // Send raw pixel data
};
// Send to serverless function
fetch('/.netlify/functions/font-generator', {
method: 'POST',
headers: { 'x-api-key': process.env.REACT_APP_GLIPH_FONT_SECRET },
body: JSON.stringify({ glyphs: [glyphData] })
});
2. TypeScript → JavaScript Conversion
Our codebase was TypeScript. Serverless functions needed vanilla JS:
// Before: TypeScript with full type safety
interface GlyphImage {
id: string;
dataUrl: string;
vectorized: boolean;
svgPathData?: string;
}
class SmartFontGenerator {
private fontMetrics: FontMetrics;
async processGlyphSheet(glyphs: GlyphImage[]): Promise<EnhancedGlyph[]> {
// Complex typed logic
}
}
// After: Plain JavaScript for serverless
class SmartFontGenerator {
constructor() {
this.fontMetrics = {};
}
async processGlyphSheet(glyphs) {
// Same logic, no types
}
}
3. Dependencies Management
Created netlify/functions/package.json:
{
"dependencies": {
"opentype.js": "^1.3.3",
"buffer": "^6.0.3"
}
}
📊 The Results
Before (Client-Side):
- ❌ IP completely exposed
- ❌ Large bundle sizes (AI models + logic)
- ❌ Performance varies by device
After (Serverless):
- ✅ IP protected behind API keys
- ✅ Lighter client bundles
- ✅ Consistent server performance
- ✅ Easier to update algorithms
- ✅ Built-in scaling
💰 The Business Impact
GLIPH processes font generation requests at $5/month per user. Our core IP is now:
- Protected from reverse engineering
- Centrally maintained and updatable
- Scalable without client-side limitations
🛠️ When Should You Consider This?
Move logic to serverless when:
- Your algorithms are your competitive advantage
- You have complex AI/ML models
- Processing is computationally intensive
- You need consistent performance across devices
- IP protection is business-critical
🔗 Want to See It In Action?
Check out GLIPH at [Gliph.us] - transform sketches into fonts using our protected AI pipeline.
Questions about serverless IP protection? Drop them below! 👇
Tags: #serverless #netlify #typescript #javascript #ip #startup #ai