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