DEV Community: AlixWang

Building an Enhanced Squoosh: High-Performance Local Image Compression with libimagequant-wasm

AlixWang — Mon, 27 Oct 2025 06:53:03 +0000

When Google announced the shutdown of Squoosh in early 2023, the web development community lost a valuable tool for client-side image compression. At OneImage, we saw an opportunity not just to preserve this functionality, but to enhance it. This article details the technical approach we took to build a production-ready, enhanced version of Squoosh that prioritizes privacy, performance, and developer experience.

Understanding Google Squoosh's Architecture

Google Squoosh pioneered the concept of running image encoders entirely in the browser using WebAssembly (WASM). The original architecture consisted of:

Client-side processing: All compression happens locally, ensuring privacy
WebAssembly codecs: Native-speed encoders compiled to WASM (MozJPEG, OxiPNG, WebP, AVIF)
Web Workers: Offloading heavy computation to prevent UI blocking
Canvas API: Image manipulation and preview generation

While groundbreaking, Squoosh had limitations:

PNG compression relied on OxiPNG alone, which prioritized compression ratio over speed
No built-in batch processing capabilities
Limited preset configurations for common use cases
Tightly coupled UI and compression logic

Our Enhancement Strategy

1. Integrating libimagequant-wasm for Superior PNG Compression

The cornerstone of our enhancement is libimagequant-wasm, a WebAssembly port of the industry-standard pngquant library. This library uses a sophisticated color quantization algorithm that produces visually superior results compared to simple palette reduction.

Why libimagequant?

Perceptual quality: Uses a modified median cut algorithm optimized for human perception
Adaptive palettes: Generates optimal palettes of 2-256 colors based on image content
Transparency handling: Preserves alpha channels while compressing
Performance: Runs at near-native speed thanks to WASM

Implementation Details

Here's how we integrated libimagequant into our compression pipeline:

import LibImageQuant from '@fe-daily/libimagequant-wasm'; 
import * as wasmModule from '@fe-daily/libimagequant-wasm/wasm/libimagequant_wasm.js';

async function compressPNG(imageData: ImageData, level: number): Promise<Uint8Array> {
  const quantizer = new LibImageQuant({ wasmModule });

  // Map compression level (0-10) to color count (256-2)
  const maxColors = Math.max(2, 256 - (25.6 * level));

  const quantized = await quantizer.quantizeImageData(imageData, {
    maxColors: Math.floor(maxColors),
    speed: 1,          // Balance between quality and speed
    quality: {
      min: 0,
      target: 100      // Aim for highest quality within color limit
    }
  });

  return new Uint8Array(quantized.pngBytes);
}

Key parameters explained:

maxColors: Controls the palette size. Fewer colors = smaller file, but potentially worse quality
speed: Range 1-10, where 1 is slowest but highest quality
quality.target: Sets the target quality threshold (0-100)

Our Squoosh tool uses this implementation to deliver compression ratios of 60-80% with minimal perceptual loss.

2. Architecting a Robust Web Worker System

To prevent the browser from freezing during compression (especially for large images or batch operations), we built a dedicated Web Worker architecture:

// compression-worker.ts
import { EncoderOptions, CompressResult } from './squoosh-types';
import LibImageQuant from '@fe-daily/libimagequant-wasm'; 
import * as wasmModule from '@fe-daily/libimagequant-wasm/wasm/libimagequant_wasm.js';

interface CompressMessage {
  type: 'compress';
  imageData: ImageData;
  options: EncoderOptions;
}

self.onmessage = async (e: MessageEvent<CompressMessage>) => {
  const { type, imageData, options } = e.data;

  if (type === 'compress') {
    try {
      const result = await compress(imageData, options);
      self.postMessage({ success: true, result });
    } catch (error) {
      self.postMessage({
        success: false,
        error: error instanceof Error ? error.message : 'Unknown error',
      });
    }
  }
};

async function compress(
  imageData: ImageData,
  options: EncoderOptions
): Promise<CompressResult> {
  switch (options.type) {
    case 'png':
      return await compressPNGWithQuantization(imageData, options);
    case 'jpeg':
      return await compressJPEG(imageData, options);
    case 'webp':
      return await compressWebP(imageData, options);
    case 'avif':
      return await compressAVIF(imageData, options);
  }
}

Worker benefits:

Non-blocking UI during compression
Ability to cancel long-running operations
Parallel processing for batch operations (multiple workers)
Memory isolation preventing main thread memory leaks

3. Building Smart Compression Presets

Rather than exposing raw encoder parameters, we created three presets optimized for common use cases:

const PRESET_CONFIGS = {
  highQuality: {
    png: { level: 3 },     // ~200 colors
    jpeg: { quality: 90 },
    webp: { quality: 90 },
    avif: { quality: 85 }
  },
  balanced: {
    png: { level: 5 },     // ~128 colors
    jpeg: { quality: 80 },
    webp: { quality: 80 },
    avif: { quality: 70 }
  },
  minSize: {
    png: { level: 8 },     // ~50 colors
    jpeg: { quality: 60 },
    webp: { quality: 60 },
    avif: { quality: 50 }
  }
};

These presets were calibrated through extensive testing on diverse image types (photos, illustrations, screenshots, UI elements) to find optimal quality-size trade-offs.

4. Implementing Efficient Batch Processing

For users compressing multiple images, we built a queue system with progress tracking:

class BatchCompressor {
  private queue: BatchItem[] = [];
  private activeWorkers: Set<Worker> = new Set();
  private maxConcurrency = navigator.hardwareConcurrency || 4;

  async processBatch(files: File[], options: ProcessorOptions) {
    const batchId = Date.now();

    for (const file of files) {
      this.queue.push({
        id: `${batchId}-${file.name}`,
        file,
        status: 'pending',
        options
      });
    }

    await this.processQueue();
  }

  private async processQueue() {
    while (this.queue.some(item => item.status === 'pending')) {
      if (this.activeWorkers.size < this.maxConcurrency) {
        const item = this.queue.find(i => i.status === 'pending');
        if (item) {
          item.status = 'processing';
          await this.processItem(item);
        }
      } else {
        await new Promise(resolve => setTimeout(resolve, 100));
      }
    }
  }
}

This approach:

Maximizes CPU utilization by running parallel workers
Prevents browser crashes by limiting concurrency
Provides real-time progress updates to users

Try our batch processing in action at OneImage Squoosh.

Performance Optimizations

Memory Management

Large images can quickly exhaust browser memory. We implemented several mitigation strategies:

async function processLargeImage(file: File): Promise<CompressResult> {
  const MAX_DIMENSION = 4096;
  const img = await loadImage(file);

  // Downscale if necessary
  let { width, height } = img;
  if (width > MAX_DIMENSION || height > MAX_DIMENSION) {
    const scale = Math.min(MAX_DIMENSION / width, MAX_DIMENSION / height);
    width = Math.floor(width * scale);
    height = Math.floor(height * scale);
  }

  // Use OffscreenCanvas when available for better memory handling
  const canvas = typeof OffscreenCanvas !== 'undefined'
    ? new OffscreenCanvas(width, height)
    : document.createElement('canvas');

  canvas.width = width;
  canvas.height = height;

  const ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0, width, height);

  const imageData = ctx.getImageData(0, 0, width, height);

  // Immediately release canvas and image resources
  URL.revokeObjectURL(img.src);

  return await compress(imageData, options);
}

WASM Module Caching

WebAssembly modules benefit from aggressive caching:

let cachedWasmModule: typeof wasmModule | null = null;

async function getWasmModule() {
  if (!cachedWasmModule) {
    cachedWasmModule = await import(
      '@fe-daily/libimagequant-wasm/wasm/libimagequant_wasm.js'
    );
  }
  return cachedWasmModule;
}

This reduces initialization time from ~500ms to near-instant on subsequent compressions.

Expanding the Toolkit

While Squoosh focuses on compression, we built a full suite of complementary tools:

Image Resize: Smart scaling with multiple algorithms
EXIF Remover: Strip metadata for privacy
Image Overlay: Watermarking and branding
Image Blur: Redaction for sensitive content
Crop Tool: Precise aspect ratio cropping

All tools share the same architectural principles: privacy-first, WASM-powered, and fully client-side.

Browser Extension Integration

We extended the web app architecture into a browser extension, enabling:

Instant access via toolbar popup
Context menu integration for right-click compression
Tab-based state management
Local storage for preset preferences

The extension reuses the same Web Worker and WASM infrastructure, ensuring consistent behavior across platforms.

Deployment and Infrastructure

Edge Computing with Cloudflare

We deploy OneImage Squoosh to Cloudflare Pages, leveraging:

Global CDN for <50ms initial load times worldwide
HTTP/3 and Brotli compression for assets
Smart caching headers for WASM modules
Zero cold starts (static assets only)

Build Optimization

Our Next.js configuration includes:

// next.config.ts
module.exports = {
  webpack: (config, { isServer }) => {
    // Support for .wasm files
    config.experiments = {
      asyncWebAssembly: true,
      layers: true,
    };

    // Optimize worker imports
    config.module.rules.push({
      test: /\.worker\.(ts|js)$/,
      use: { loader: 'worker-loader' }
    });

    return config;
  },

  // Aggressive code splitting
  experimental: {
    optimizePackageImports: [
      '@jsquash/jpeg',
      '@jsquash/png',
      '@jsquash/webp',
      '@jsquash/avif'
    ]
  }
};

This ensures encoders are loaded on-demand, keeping the initial bundle under 100KB (gzipped).

Testing and Quality Assurance

We maintain comprehensive test coverage for compression logic:

// __tests__/advanced-compressor.test.ts
describe('AdvancedImageCompressor', () => {
  it('should compress PNG with libimagequant', async () => {
    const compressor = new AdvancedImageCompressor();
    const mockFile = createMockImageFile('test.png', 1000, 1000);

    const result = await compressor.compress(mockFile, {
      encode: { type: 'png', options: { level: 5 } }
    });

    expect(result.format).toBe('png');
    expect(result.size).toBeLessThan(mockFile.size);
    expect(result.data).toBeInstanceOf(Uint8Array);
  });

  it('should handle batch processing with concurrency', async () => {
    const files = Array(10).fill(null).map((_, i) => 
      createMockImageFile(`test-${i}.png`, 500, 500)
    );

    const startTime = Date.now();
    await batchCompress(files, { preset: 'balanced' });
    const duration = Date.now() - startTime;

    // Should be faster than sequential processing
    expect(duration).toBeLessThan(10 * 1000); // <1s per image
  });
});

Lessons Learned

WASM is production-ready: With proper module loading and caching, WASM performance rivals native applications
Web Workers are essential: For any CPU-intensive task, offloading to workers is non-negotiable
User presets > raw controls: Most users prefer "good defaults" over granular tuning
Memory matters: Always profile memory usage on large images and implement safeguards
Privacy sells: Emphasizing "no server uploads" resonates strongly with users

Open Source and Community

While OneImage Squoosh is a commercial product, we contribute to the ecosystem:

Bug reports and PRs to @jsquash maintainers
Documentation improvements for libimagequant-wasm
Sharing performance benchmarks and best practices

Conclusion

Building an enhanced Squoosh required more than just integrating libimagequant-wasm. It demanded careful architectural decisions around Web Workers, memory management, user experience, and deployment infrastructure. The result is a tool that respects user privacy while delivering professional-grade compression performance.

Try OneImage Squoosh today, or explore our browser extension for even faster access. For developers building similar tools, we hope this technical deep-dive provides a useful blueprint.

References and Further Reading

Google Squoosh (archived) - Original project repository
libimagequant-wasm - WebAssembly port of pngquant
pngquant - Original libimagequant library
@jsquash - WebAssembly image codec collection
WebAssembly Documentation - Mozilla Developer Network
Web Workers API - MDN guide
Canvas API - Image manipulation reference
Image Compression Best Practices - web.dev guide
OneImage Squoosh - Try the tool
OneImage Browser Extension - Browser extension version
Image Format Guide - Comprehensive format comparison

How I Used Edge-TTS to Build a Free Online Text-to-Speech Site

AlixWang — Fri, 23 May 2025 13:11:26 +0000

Building a high-quality text-to-speech service that's completely free seemed impossible until I discovered Microsoft's Edge-TTS. Here's how I architected TTS-Free.Online using modern web technologies and why the technical decisions matter.

The Problem with Existing TTS Solutions

Most TTS APIs are expensive or have quality limitations:

Google Cloud TTS: $4-16 per million characters
Amazon Polly: $4 per million characters
Azure Cognitive Services: $15 per million characters
Free alternatives often have robotic voices

Discovering Edge-TTS

Edge-TTS is the engine behind Microsoft Edge's "Read Aloud" feature. Key advantages:

Neural voices with natural prosody
40+ languages with regional variants
SSML support for advanced control
Completely free (though not officially documented for external use)

The challenge was making it accessible through a web interface.

Technical Architecture

Frontend: Next.js 14 with App Router

I chose Next.js for its full-stack capabilities and excellent developer experience:

// app/page.tsx - Main TTS interface
'use client'

import { useState } from 'react'
import { Voice, TTSOptions } from '@/types/tts'

export default function TTSGenerator() {
  const [text, setText] = useState('')
  const [selectedVoice, setSelectedVoice] = useState<Voice>()
  const [isGenerating, setIsGenerating] = useState(false)
  const [audioUrl, setAudioUrl] = useState<string>()

  const handleGenerate = async () => {
    setIsGenerating(true)
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          text,
          voice: selectedVoice?.value,
          options: {
            rate: '0%',
            pitch: '0%'
          }
        })
      })

      if (response.ok) {
        const blob = await response.blob()
        setAudioUrl(URL.createObjectURL(blob))
      }
    } finally {
      setIsGenerating(false)
    }
  }

  return (
    <div className="max-w-4xl mx-auto p-6">
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter your text here..."
        className="w-full h-40 p-4 border rounded-lg"
      />

      <VoiceSelector 
        onVoiceSelect={setSelectedVoice}
        selectedVoice={selectedVoice}
      />

      <button
        onClick={handleGenerate}
        disabled={!text || !selectedVoice || isGenerating}
        className="bg-blue-500 text-white px-6 py-2 rounded-lg disabled:opacity-50"
      >
        {isGenerating ? 'Generating...' : 'Generate Speech'}
      </button>

      {audioUrl && (
        <audio controls className="w-full mt-4">
          <source src={audioUrl} type="audio/mpeg" />
        </audio>
      )}
    </div>
  )
}

Backend API: Edge Runtime with Streaming

The core TTS generation happens in a Cloudflare Pages function:

// app/api/generate/route.ts
import { NextRequest } from 'next/server'

export const runtime = 'edge'

interface TTSRequest {
  text: string
  voice: string
  options?: {
    rate?: string
    pitch?: string
    volume?: string
  }
}

export async function POST(request: NextRequest) {
  try {
    const { text, voice, options }: TTSRequest = await request.json()

    // Validate input
    if (!text || text.length > 10000) {
      return new Response('Invalid text length', { status: 400 })
    }

    if (!voice) {
      return new Response('Voice selection required', { status: 400 })
    }

    // Generate TTS using Edge-TTS
    const audioBuffer = await generateTTS(text, voice, options)

    return new Response(audioBuffer, {
      headers: {
        'Content-Type': 'audio/mpeg',
        'Content-Disposition': 'attachment; filename="speech.mp3"',
        'Cache-Control': 'public, max-age=3600'
      }
    })

  } catch (error) {
    console.error('TTS generation failed:', error)
    return new Response('Generation failed', { status: 500 })
  }
}

async function generateTTS(
  text: string, 
  voice: string, 
  options: TTSRequest['options'] = {}
): Promise<ArrayBuffer> {
  // Edge-TTS implementation
  const { Readable } = await import('stream')
  const EdgeTTS = await import('edge-tts')

  const tts = new EdgeTTS.default()

  // Configure voice settings
  await tts.setMetadata(voice, EdgeTTS.OUTPUT_FORMAT.AUDIO_24KHZ_48KBITRATE_MONO_MP3)

  // Apply SSML if options provided
  let ssmlText = text
  if (options.rate || options.pitch || options.volume) {
    ssmlText = `<speak><prosody${
      options.rate ? ` rate="${options.rate}"` : ''
    }${
      options.pitch ? ` pitch="${options.pitch}"` : ''
    }${
      options.volume ? ` volume="${options.volume}"` : ''
    }>${text}</prosody></speak>`
  }

  const stream = tts.generateSpeech(ssmlText)

  // Convert stream to ArrayBuffer
  const chunks: Uint8Array[] = []
  for await (const chunk of stream) {
    chunks.push(chunk)
  }

  const totalLength = chunks.reduce((sum, chunk) => sum + chunk.length, 0)
  const result = new Uint8Array(totalLength)
  let offset = 0

  for (const chunk of chunks) {
    result.set(chunk, offset)
    offset += chunk.length
  }

  return result.buffer
}

Voice Management System

Dynamic voice loading with language categorization:

// lib/voices.ts
export interface Voice {
  value: string
  label: string
  language: string
  gender: 'Male' | 'Female'
  locale: string
}

export const VOICE_CATEGORIES = {
  'English': ['en-US', 'en-GB', 'en-AU', 'en-CA', 'en-IN'],
  'Spanish': ['es-ES', 'es-MX', 'es-AR', 'es-CO'],
  'French': ['fr-FR', 'fr-CA'],
  'German': ['de-DE', 'de-AT', 'de-CH'],
  'Chinese': ['zh-CN', 'zh-HK', 'zh-TW'],
  'Japanese': ['ja-JP'],
  'Korean': ['ko-KR']
  // ... more languages
}

export async function getAvailableVoices(): Promise<Voice[]> {
  // In production, this would call Edge-TTS voice discovery
  // For now, return static list of known high-quality voices
  return [
    {
      value: 'en-US-AriaNeural',
      label: 'Aria (US English, Female)',
      language: 'English',
      gender: 'Female',
      locale: 'en-US'
    },
    {
      value: 'en-US-GuyNeural', 
      label: 'Guy (US English, Male)',
      language: 'English',
      gender: 'Male',
      locale: 'en-US'
    }
    // ... more voices
  ]
}

// components/VoiceSelector.tsx
import { useState, useEffect } from 'react'
import { Voice, VOICE_CATEGORIES, getAvailableVoices } from '@/lib/voices'

interface VoiceSelectorProps {
  onVoiceSelect: (voice: Voice) => void
  selectedVoice?: Voice
}

export default function VoiceSelector({ onVoiceSelect, selectedVoice }: VoiceSelectorProps) {
  const [voices, setVoices] = useState<Voice[]>([])
  const [selectedLanguage, setSelectedLanguage] = useState('English')

  useEffect(() => {
    getAvailableVoices().then(setVoices)
  }, [])

  const filteredVoices = voices.filter(voice => 
    VOICE_CATEGORIES[selectedLanguage]?.includes(voice.locale)
  )

  return (
    <div className="space-y-4">
      <div>
        <label className="block text-sm font-medium mb-2">Language</label>
        <select 
          value={selectedLanguage}
          onChange={(e) => setSelectedLanguage(e.target.value)}
          className="w-full p-2 border rounded-lg"
        >
          {Object.keys(VOICE_CATEGORIES).map(lang => (
            <option key={lang} value={lang}>{lang}</option>
          ))}
        </select>
      </div>

      <div>
        <label className="block text-sm font-medium mb-2">Voice</label>
        <select
          value={selectedVoice?.value || ''}
          onChange={(e) => {
            const voice = voices.find(v => v.value === e.target.value)
            if (voice) onVoiceSelect(voice)
          }}
          className="w-full p-2 border rounded-lg"
        >
          <option value="">Select a voice...</option>
          {filteredVoices.map(voice => (
            <option key={voice.value} value={voice.value}>
              {voice.label}
            </option>
          ))}
        </select>
      </div>
    </div>
  )
}

Deployment: Cloudflare Pages

The entire application runs on Cloudflare's edge network:

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'edge'
  },
  images: {
    unoptimized: true
  }
}

module.exports = nextConfig

// package.json scripts
{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "pages:build": "@cloudflare/next-on-pages",
    "preview": "wrangler pages dev .vercel/output/static",
    "deploy": "wrangler pages deploy .vercel/output/static"
  }
}

Advanced Features Implementation

1. SSML Support for Voice Control

// lib/ssml.ts
export function generateSSML(text: string, options: {
  rate?: string
  pitch?: string
  volume?: string
  emphasis?: 'strong' | 'moderate' | 'reduced'
  pauseAfter?: string
}): string {
  let ssml = text

  // Wrap in prosody for voice modifications
  if (options.rate || options.pitch || options.volume) {
    const prosodyAttrs = [
      options.rate && `rate="${options.rate}"`,
      options.pitch && `pitch="${options.pitch}"`,
      options.volume && `volume="${options.volume}"`
    ].filter(Boolean).join(' ')

    ssml = `<prosody ${prosodyAttrs}>${ssml}</prosody>`
  }

  // Add emphasis
  if (options.emphasis) {
    ssml = `<emphasis level="${options.emphasis}">${ssml}</emphasis>`
  }

  // Add pause
  if (options.pauseAfter) {
    ssml += `<break time="${options.pauseAfter}"/>`
  }

  return `<speak>${ssml}</speak>`
}

2. Batch Processing for Long Texts

// lib/textProcessor.ts
export function chunkText(text: string, maxLength: number = 3000): string[] {
  if (text.length <= maxLength) return [text]

  const chunks: string[] = []
  const sentences = text.split(/[.!?]+/)
  let currentChunk = ''

  for (const sentence of sentences) {
    if ((currentChunk + sentence).length > maxLength && currentChunk) {
      chunks.push(currentChunk.trim())
      currentChunk = sentence
    } else {
      currentChunk += sentence + '. '
    }
  }

  if (currentChunk.trim()) {
    chunks.push(currentChunk.trim())
  }

  return chunks
}

// app/api/generate-long/route.ts
export async function POST(request: NextRequest) {
  const { text, voice, options } = await request.json()

  // Split long text into chunks
  const chunks = chunkText(text, 3000)
  const audioChunks: ArrayBuffer[] = []

  for (const chunk of chunks) {
    const audio = await generateTTS(chunk, voice, options)
    audioChunks.push(audio)
  }

  // Combine audio chunks (simplified - would need proper audio concatenation)
  const totalLength = audioChunks.reduce((sum, chunk) => sum + chunk.byteLength, 0)
  const combined = new Uint8Array(totalLength)
  let offset = 0

  for (const chunk of audioChunks) {
    combined.set(new Uint8Array(chunk), offset)
    offset += chunk.byteLength
  }

  return new Response(combined.buffer, {
    headers: {
      'Content-Type': 'audio/mpeg',
      'Content-Disposition': 'attachment; filename="long-speech.mp3"'
    }
  })
}

3. Real-time Audio Controls

// components/AudioControls.tsx
import { useState, useRef, useEffect } from 'react'

interface AudioControlsProps {
  audioUrl: string
}

export default function AudioControls({ audioUrl }: AudioControlsProps) {
  const audioRef = useRef<HTMLAudioElement>(null)
  const [isPlaying, setIsPlaying] = useState(false)
  const [currentTime, setCurrentTime] = useState(0)
  const [duration, setDuration] = useState(0)
  const [volume, setVolume] = useState(1)
  const [playbackRate, setPlaybackRate] = useState(1)

  useEffect(() => {
    const audio = audioRef.current
    if (!audio) return

    const updateTime = () => setCurrentTime(audio.currentTime)
    const updateDuration = () => setDuration(audio.duration)
    const handleEnd = () => setIsPlaying(false)

    audio.addEventListener('timeupdate', updateTime)
    audio.addEventListener('loadedmetadata', updateDuration)
    audio.addEventListener('ended', handleEnd)

    return () => {
      audio.removeEventListener('timeupdate', updateTime)
      audio.removeEventListener('loadedmetadata', updateDuration)
      audio.removeEventListener('ended', handleEnd)
    }
  }, [audioUrl])

  const togglePlay = () => {
    const audio = audioRef.current
    if (!audio) return

    if (isPlaying) {
      audio.pause()
    } else {
      audio.play()
    }
    setIsPlaying(!isPlaying)
  }

  const handleSeek = (e: React.ChangeEvent<HTMLInputElement>) => {
    const audio = audioRef.current
    if (!audio) return

    const newTime = parseFloat(e.target.value)
    audio.currentTime = newTime
    setCurrentTime(newTime)
  }

  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newVolume = parseFloat(e.target.value)
    setVolume(newVolume)
    if (audioRef.current) {
      audioRef.current.volume = newVolume
    }
  }

  const handleRateChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const newRate = parseFloat(e.target.value)
    setPlaybackRate(newRate)
    if (audioRef.current) {
      audioRef.current.playbackRate = newRate
    }
  }

  return (
    <div className="bg-gray-100 p-4 rounded-lg space-y-4">
      <audio ref={audioRef} src={audioUrl} preload="metadata" />

      <div className="flex items-center space-x-4">
        <button
          onClick={togglePlay}
          className="bg-blue-500 text-white p-2 rounded-full"
        >
          {isPlaying ? '⏸️' : '▶️'}
        </button>

        <div className="flex-1">
          <input
            type="range"
            min="0"
            max={duration || 0}
            value={currentTime}
            onChange={handleSeek}
            className="w-full"
          />
          <div className="flex justify-between text-sm text-gray-600">
            <span>{formatTime(currentTime)}</span>
            <span>{formatTime(duration)}</span>
          </div>
        </div>
      </div>

      <div className="flex items-center space-x-4">
        <label className="flex items-center space-x-2">
          <span>Volume:</span>
          <input
            type="range"
            min="0"
            max="1"
            step="0.1"
            value={volume}
            onChange={handleVolumeChange}
            className="w-20"
          />
        </label>

        <label className="flex items-center space-x-2">
          <span>Speed:</span>
          <select value={playbackRate} onChange={handleRateChange}>
            <option value="0.5">0.5x</option>
            <option value="0.75">0.75x</option>
            <option value="1">1x</option>
            <option value="1.25">1.25x</option>
            <option value="1.5">1.5x</option>
            <option value="2">2x</option>
          </select>
        </label>
      </div>
    </div>
  )
}

function formatTime(seconds: number): string {
  const mins = Math.floor(seconds / 60)
  const secs = Math.floor(seconds % 60)
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

Content Strategy with MDX

The site includes comprehensive educational content using MDX:

// mdx-components.tsx
export function useMDXComponents(components: any) {
  return {
    h1: ({ children }: any) => (
      <h1 className="text-4xl font-bold mb-6 text-gray-900">{children}</h1>
    ),
    h2: ({ children }: any) => (
      <h2 className="text-3xl font-semibold mb-4 mt-8 text-gray-800">{children}</h2>
    ),
    p: ({ children }: any) => (
      <p className="mb-4 leading-relaxed text-gray-700">{children}</p>
    ),
    code: ({ children }: any) => (
      <code className="bg-gray-100 px-2 py-1 rounded text-sm font-mono">{children}</code>
    ),
    ...components,
  }
}

Performance Optimizations

1. Edge Caching Strategy

// middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const response = NextResponse.next()

  // Cache static assets
  if (request.nextUrl.pathname.startsWith('/api/voices')) {
    response.headers.set('Cache-Control', 'public, max-age=86400') // 24 hours
  }

  // Cache generated audio for 1 hour
  if (request.nextUrl.pathname.startsWith('/api/generate')) {
    response.headers.set('Cache-Control', 'public, max-age=3600')
  }

  return response
}

2. Client-Side Optimization

// hooks/useTTSCache.ts
import { useState, useCallback } from 'react'

interface CacheEntry {
  audioUrl: string
  timestamp: number
}

const CACHE_DURATION = 1000 * 60 * 30 // 30 minutes

export function useTTSCache() {
  const [cache, setCache] = useState<Map<string, CacheEntry>>(new Map())

  const getCacheKey = (text: string, voice: string, options: any) => {
    return `${text}-${voice}-${JSON.stringify(options)}`
  }

  const getCachedAudio = useCallback((text: string, voice: string, options: any) => {
    const key = getCacheKey(text, voice, options)
    const entry = cache.get(key)

    if (entry && Date.now() - entry.timestamp < CACHE_DURATION) {
      return entry.audioUrl
    }

    return null
  }, [cache])

  const setCachedAudio = useCallback((text: string, voice: string, options: any, audioUrl: string) => {
    const key = getCacheKey(text, voice, options)
    setCache(prev => new Map(prev).set(key, {
      audioUrl,
      timestamp: Date.now()
    }))
  }, [])

  return { getCachedAudio, setCachedAudio }
}

Monitoring and Analytics

// lib/analytics.ts
export function trackTTSGeneration(voice: string, textLength: number, success: boolean) {
  // Analytics implementation
  if (typeof window !== 'undefined' && window.gtag) {
    window.gtag('event', 'tts_generation', {
      voice_used: voice,
      text_length_category: getTextLengthCategory(textLength),
      success: success
    })
  }
}

function getTextLengthCategory(length: number): string {
  if (length < 100) return 'short'
  if (length < 500) return 'medium'
  if (length < 2000) return 'long'
  return 'very_long'
}

Key Technical Learnings

Edge Runtime Limitations: Not all Node.js APIs are available in Cloudflare's edge runtime
Audio Streaming: Implementing proper audio streaming for large files requires careful buffer management
Voice Quality: Different voices perform better with different content types
Caching Strategy: Balancing cache duration with storage costs and user experience
Error Handling: Graceful fallbacks when Edge-TTS services are unavailable

Deployment Configuration

# .github/workflows/deploy.yml
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build application
        run: npm run pages:build

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: tts-free-online
          directory: .vercel/output/static

Results and Impact

After 6 months of operation:

Zero infrastructure costs (Cloudflare Pages free tier)
Global edge deployment with <100ms response times
50,000+ monthly active users
500,000+ audio generations
99.5% uptime

Future Technical Improvements

WebAssembly Integration: Moving Edge-TTS processing to client-side WASM
Real-time Streaming: Implementing Server-Sent Events for progressive audio generation
Voice Cloning: Adding custom voice training capabilities
API Access: Public API with rate limiting and authentication

The combination of Edge-TTS, Next.js 14, and Cloudflare Pages created a powerful, scalable, and cost-effective solution that democratizes access to high-quality text-to-speech technology.

Try the Implementation

The complete source code demonstrates how modern web technologies can create powerful, free alternatives to expensive commercial services. Visit TTS-Free.Online to experience the result, or check out the implementation patterns for your own projects.

Building useful, accessible technology doesn't require massive infrastructure investments—sometimes the best solutions come from creative combinations of existing tools.

Building an AI Cron Builder with Cloudflare Pages and Next.js

AlixWang — Wed, 06 Nov 2024 16:23:09 +0000

This technical document outlines how to build an AI-powered cron expression builder using Cloudflare Pages, Next.js, and Cloudflare's AI capabilities. The result site is cronbuilder.online

Project Overview
Technical Stack
Setup and Configuration
Key Components
AI Integration
Deployment

1. Project Overview

The AI Cron Builder is a web application that helps users create cron expressions through:

Natural language input processing using AI
Visual cron expression builder
Real-time validation

2. Technical Stack

Frontend Framework: Next.js 14
Hosting: Cloudflare Pages
AI Model: Cloudflare Workers AI (Llama 3)
UI Components: Ant Design
Styling: Tailwind CSS

3. Setup and Configuration

3.1 Project Structure

app/
├── api/
│   └── cron/         # AI endpoint
├── components/       # React components
├── layout.tsx       # Root layout
└── page.tsx         # Main page

3.2 Edge Runtime Configuration

Enable edge runtime in your API routes by adding:

export const runtime = 'edge'

3.3 Cloudflare Configuration

Create a Cloudflare Pages project
Enable Cloudflare AI in your project settings
Configure environment variables for AI access

4. Key Components

4.1 Main Page Layout

The main page layout (referenced from app/page.tsx) includes:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center px-12 bg-[#FAFDFF]">
      <header className="w-full h-16">
        <nav className="w-full h-full">
          <ul className="flex list-none h-full items-center justify-between">
            <li className="flex self-center items-center">
              <Image alt="logo" className="w-10 h-10 mr-2" width={100} height={100} src={"/logo.png"} />
              <h1 className="text-lg font-bold text-[#44779C]">Cron Builder</h1>
            </li>
            <li>
              <a role="button" tabIndex={0} href="mailto:service@cronbuilder.online" className="px-2.5 py-1 bg-blue-400 font-bold text-base text-white rounded-md">
                Contact
              </a>
            </li>
          </ul>
        </nav>
      </header>
      <h1 className="text-clip bg-clip-text text-transparent bg-[length:200%_100%] bg-ai animate-ai-animate-btn font-bold text-5xl text-center mt-10 ">
          Build Your Perfect
          <br/>
          Cron Expression Effortlessly
      </h1>
      <section className="w-full mt-8 flex justify-center">
        {/* <h2>Generate your cron expression</h2> */}
        <CronComp />
      </section>
      <section>

      </section>
    </main>
  );
}

4.2 Cron Component

The core cron builder component (referenced from app/components/cron/index.tsx) provides:

Visual cron expression builder
Expression validation
AI integration

const CronComp = () => {
    const [value, setValue] = useState('* * * * *');
    const [error, setError] = useState<boolean>(false);
    const handleCatchError = (error: CronError) => {
        if(error) {
            setError(true)
        } else {
            setError(false)
        }
    }

    return <ConfigProvider
        theme={
            {
                token: {
                    borderRadius: 0
                }
            }
        }
    >
        <div className='flex flex-col min-w-full'>
            <div>
                <AiGen onGenerate={(string) => {
                    if(string) {
                        setValue(string)
                    }
                }} />
            </div>
            <div>
                <Cron onError={handleCatchError} locale={NO_PREFIX_SUFFIX_LOCALE} value={value} setValue={setValue} />
            </div>
            <div>
                <Input status={error ? 'error' : ''} onChange={(e) => setValue(e.target.value)} value={value} />
            </div>
        </div>
    </ConfigProvider>
}

4.3 AI Generation Component

The AI generation component (referenced from app/components/AiGen/index.tsx) handles:

User prompt input
AI request handling
Response processing

const AiGen:FC<AiGenProps> = ({onGenerate}) => {

    const [prompt, setPrompt] = useState<string>();
    const [loading, setLoading] = useState<boolean>(false);

    const btnClick = () => {
        if(loading) {
            return
        }
        setLoading(true);
        fetch('/api/cron', {
            method: 'POST',
            headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt}),
        }).then(res => res.json()).then((res: any) => {
            onGenerate(res.response);
        }).finally(() => {
            setLoading(false);
        })
    }

    return <div className="flex flex-col">
        <Input.TextArea style={{resize: 'none'}} className='resize-none' placeholder="please input your prompt to generate the cron expression" onChange={(e) => setPrompt(e.target.value)} value={prompt} rows={4} />
        <button className={`${loading ? "cursor-wait" : ""} bg-[length:200%_100%] hover:animate-ai-animate-btn px-4 py-1 flex justify-center items-center mt-4 mb-4 self-end bg-ai text-white rounded-md`  }onClick={btnClick}>
            <span className='mr-2'>Run</span>
            <Image alt='image' width={10} height={10} src={"/magic.svg"} />
        </button>
    </div>
}

5. AI Integration

5.1 API Route Setup

The cron API route (referenced from app/api/cron/route.ts) handles:

export async function POST(request: NextRequest) {
  // let responseText = 'Hello World'

  const { prompt } = await request.json<any>();
  const input = { prompt: `
      role: you are a cron expression master;
      capability: you can give valid cron expression by user nature language input;
      examples:
      Q: every minute invoke cron expression
      A: * * * * *

      Q: every hour at 30 minutes cron expression
      A: 30 * * * *

      Q: once a day cron expression
      A: 0 0 * * *

      Q: once a month
      A: 0 0 1 * *

      limit:
      1. no "?" or "#"  non-standard character.
      2. all cron expression only have 5 part(eg * * * * *).

      rule: 
      1. don't give me expression detail just give me result.
      2. the result must be a valid cron expression. 
      3. no extra useless string, just a cron expression (very important).

      now please generate cron by user input "${prompt}", if you can't give valid cron expression just told me "please try again"
    `};

  //@ts-ignore
  const answer = await getRequestContext().env.AI.run(
    "@cf/meta/llama-3-8b-instruct",
    input,
  );

  return new Response(JSON.stringify(answer))
}

5.2 AI Prompt Template

The AI system uses a structured prompt template that includes:

Role definition
Capabilities
Examples
Rules and limitations

Example prompt structure:

const input = {
  prompt: `
    role: you are a cron expression master;
    capability: you can give valid cron expression by user nature language input;
    examples: [...]
    limit: [...]
    rule: [...]
  `
}

5.3 Error Handling

Implement error handling for:

Invalid AI responses
Network failures
Invalid cron expressions

6. Deployment

6.1 Deployment Steps

Push code to GitHub repository
Connect repository to Cloudflare Pages
Configure build settings:

   Build command: npm run build
   Build output directory: .next

6.2 Environment Variables

Required environment variables:

AI: Cloudflare AI binding
NODE_VERSION: 18.x or higher

Best Practices

Use edge runtime for optimal performance
Implement proper error handling
Add input validation
Use TypeScript for type safety
Follow responsive design principles
Implement proper loading states

Limitations

AI response time may vary
Limited to standard cron expressions (5 parts)
No support for special characters (?, #)
Edge runtime restrictions

Conclusion

This project demonstrates how to build a modern AI-powered web application using Cloudflare's ecosystem and Next.js. The combination provides a scalable, performant solution for generating cron expressions through both visual interface and AI assistance.

For more information, refer to:

DEV Community: AlixWang

Building an Enhanced Squoosh: High-Performance Local Image Compression with libimagequant-wasm

Understanding Google Squoosh's Architecture

Our Enhancement Strategy

1. Integrating libimagequant-wasm for Superior PNG Compression

Why libimagequant?

Implementation Details

2. Architecting a Robust Web Worker System

3. Building Smart Compression Presets

4. Implementing Efficient Batch Processing

Performance Optimizations

Memory Management

WASM Module Caching

Expanding the Toolkit

Browser Extension Integration

Deployment and Infrastructure

Edge Computing with Cloudflare

Build Optimization

Testing and Quality Assurance

Lessons Learned

Open Source and Community

Conclusion

References and Further Reading

How I Used Edge-TTS to Build a Free Online Text-to-Speech Site

The Problem with Existing TTS Solutions

Discovering Edge-TTS

Technical Architecture

Frontend: Next.js 14 with App Router

Backend API: Edge Runtime with Streaming

Voice Management System

Deployment: Cloudflare Pages

Advanced Features Implementation

1. SSML Support for Voice Control

2. Batch Processing for Long Texts

3. Real-time Audio Controls

Content Strategy with MDX

Performance Optimizations

1. Edge Caching Strategy

2. Client-Side Optimization

Monitoring and Analytics

Key Technical Learnings

Deployment Configuration

Results and Impact

Future Technical Improvements

Try the Implementation

Building an AI Cron Builder with Cloudflare Pages and Next.js

Table of Contents

1. Project Overview

2. Technical Stack

3. Setup and Configuration

3.1 Project Structure

3.2 Edge Runtime Configuration

3.3 Cloudflare Configuration

4. Key Components

4.1 Main Page Layout

4.2 Cron Component

4.3 AI Generation Component

5. AI Integration

5.1 API Route Setup

5.2 AI Prompt Template

5.3 Error Handling

6. Deployment

6.1 Deployment Steps

6.2 Environment Variables

Best Practices

Limitations

Conclusion