Implementation:Tensorflow Tfjs Convolutional Layers

Knowledge Sources	Tensorflow_Tfjs TensorFlow.js API
Domains	Deep_Learning, Layers_API
Last Updated	2026-02-10 06:00 GMT

Overview

The convolutional.ts module implements all convolutional layer classes for the TensorFlow.js Layers API. It includes 1D, 2D, and 3D convolutions, transposed convolutions, separable and depthwise convolutions, along with utility layers like Cropping2D and UpSampling2D.

The architecture follows a class hierarchy: an abstract BaseConv class provides shared logic for kernel/bias initialization, activation, regularization, and constraint handling. Concrete classes override call() to perform the specific convolution operation. Helper functions (conv1dWithBias, conv2dWithBiasActivation, conv3dWithBias) handle data format preprocessing, convolution computation, and optional bias addition.

Code Reference

Source Location

tfjs-layers/src/layers/convolutional.ts (View on GitHub)

Key Signatures

// Preprocessing helpers
export function preprocessConv2DInput(x: Tensor, dataFormat: DataFormat): Tensor;
export function preprocessConv3DInput(x: Tensor, dataFormat: DataFormat): Tensor;

// Convolution with bias helpers
export function conv1dWithBias(x: Tensor, kernel: Tensor, bias: Tensor,
    strides?: number, padding?: string, dataFormat?: DataFormat, dilationRate?: number): Tensor;
export function conv2dWithBiasActivation(x: Tensor, kernel: Tensor, bias: Tensor,
    strides?: number[], padding?: string, dataFormat?: DataFormat,
    dilationRate?: [number, number], activation?: fused.Activation): Tensor;
export function conv3dWithBias(x: Tensor, kernel: Tensor, bias: Tensor,
    strides?: number[], padding?: string, dataFormat?: DataFormat, dilationRate?: [number, number, number]): Tensor;

// Layer classes
export class Conv1D extends BaseConv { static className = 'Conv1D'; }
export class Conv2D extends BaseConv { static className = 'Conv2D'; }
export class Conv2DTranspose extends Conv2D { static className = 'Conv2DTranspose'; }
export class Conv3D extends BaseConv { static className = 'Conv3D'; }
export class Conv3DTranspose extends Conv3D { static className = 'Conv3DTranspose'; }
export class SeparableConv2D extends SeparableConv { static className = 'SeparableConv2D'; }
export class DepthwiseConv2D extends BaseConv { static className = 'DepthwiseConv2D'; }
export class Cropping2D extends Layer { static className = 'Cropping2D'; }
export class UpSampling2D extends Layer { static className = 'UpSampling2D'; }

Import

import { Conv1D, Conv2D, Conv2DTranspose, Conv3D, SeparableConv2D,
         DepthwiseConv2D, Cropping2D, UpSampling2D } from './layers/convolutional';

Layer Details

Layer	Input Rank	Key Config	Description
Conv1D	3 (batch, width, channels)	filters, kernelSize, strides, padding, dilationRate	1D convolution
Conv2D	4 (batch, height, width, channels)	filters, kernelSize, strides, padding, dataFormat, dilationRate	2D convolution with optional fused activation
Conv2DTranspose	4	Same as Conv2D	Transposed (deconvolution) 2D
Conv3D	5 (batch, depth, height, width, channels)	filters, kernelSize, strides, padding	3D convolution
Conv3DTranspose	5	Same as Conv3D	Transposed 3D convolution
SeparableConv2D	4	filters, kernelSize, depthMultiplier	Depthwise + pointwise convolution
DepthwiseConv2D	4	kernelSize, depthMultiplier, strides, padding	Depthwise-only convolution
Cropping2D	4	cropping (top, bottom, left, right)	Crops spatial dimensions
UpSampling2D	4	size, interpolation (nearest/bilinear)	Upsamples spatial dimensions

I/O Contract

Input

• Conv1D: Rank-3 tensor [batchSize, width, inChannels] (channelsLast) or [batchSize, inChannels, width] (channelsFirst).
• Conv2D/Conv2DTranspose: Rank-4 tensor [batchSize, height, width, channels] (channelsLast).
• Conv3D: Rank-5 tensor [batchSize, depth, height, width, channels] (channelsLast).
• Cropping2D: Rank-4 tensor. Cropping is specified as [[topCrop, bottomCrop], [leftCrop, rightCrop]].
• UpSampling2D: Rank-4 tensor. Size defaults to [2, 2].

Output

• Convolution layers output tensors with the same rank as input, with the channels dimension equal to filters and spatial dimensions determined by kernel size, strides, padding, and dilation rate.
• Conv2DTranspose outputs a larger spatial size (deconvolution).
• Cropping2D outputs a spatially smaller tensor.
• UpSampling2D outputs a spatially larger tensor by the specified factor.

Data Format Handling

The preprocessConv2DInput and preprocessConv3DInput functions transpose channelsFirst data to channelsLast format before computation, as the underlying TF.js core operations expect NHWC format.

Usage Examples

import * as tf from '@tensorflow/tfjs';

// 2D Convolutional model
const model = tf.sequential();
model.add(tf.layers.conv2d({
  inputShape: [28, 28, 1],
  filters: 32,
  kernelSize: 3,
  strides: 1,
  padding: 'same',
  activation: 'relu'
}));
model.add(tf.layers.conv2d({ filters: 64, kernelSize: 3, activation: 'relu' }));

// Separable convolution (efficient for mobile)
model.add(tf.layers.separableConv2d({
  filters: 128,
  kernelSize: 3,
  depthMultiplier: 1,
  padding: 'same'
}));

// Transposed convolution (upsampling in autoencoders/GANs)
model.add(tf.layers.conv2dTranspose({
  filters: 32,
  kernelSize: 3,
  strides: 2,
  padding: 'same'
}));

// UpSampling with bilinear interpolation
model.add(tf.layers.upSampling2d({ size: [2, 2], interpolation: 'bilinear' }));

Related Pages

• Tensorflow_Tfjs_Backend_Operations - Backend functions K.biasAdd and preprocessing used by convolutions
• Tensorflow_Tfjs_Pooling_Layers - Pooling layers commonly used after convolutional layers
• Tensorflow_Tfjs_ConvLSTM2D_Layer - Convolutional recurrent layer that combines convolution with LSTM
• Tensorflow_Tfjs_Exports_Layers - Public API factory functions for creating convolutional layers
• Tensorflow_Tfjs_Normalization_Layers - BatchNormalization commonly paired with convolutional layers