Module 9 — Deploying AI Projects
(JavaScript)
9.1 Deploying to Vercel
Deploying your AI projects is the final step in making them accessible online. Vercel is
a popular platform for frontend and full-stack JavaScript apps, providing fast
deployment, serverless functions, and CDN support.
1. Static Deployment
Use case:
● Projects that are purely frontend (HTML, CSS, JS)
● Examples: AI Quiz Generator, AI Background Remover (without backend API)
Steps:
1. Sign up / log in to Vercel
○ Use GitHub/GitLab/Bitbucket for integration
Push your project to GitHub
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin <your-repo-url>
git push -u origin main
2.
3. Connect repository to Vercel
○ Vercel automatically detects framework / static site
○ Configure project settings (root folder, build commands if any)
4. Deploy
○ Click Deploy → Your site will be live with a Vercel URL
Advantages:
● Fast, no backend needed
● HTTPS automatically enabled
● Free tier available
2. Node Server Deployment (Full-Stack Projects)
Use case:
● Projects that require backend logic or API calls
● Examples: AI Chatbot (with API), AI Quiz Generator (OpenAI API)
Steps:
Add [Link] if not present
npm init -y
npm install express openai
1.
Ensure proper server structure
/api
[Link]
[Link]
[Link]
[Link]
2.
Create server entry point ([Link])
import express from 'express';
import quizHandler from './api/[Link]';
const app = express();
[Link]([Link]());
[Link]('/api/quiz-generator', quizHandler);
const port = [Link] || 3000;
[Link](port, () => [Link](`Server running on port ${port}`));
3.
4. Push to GitHub
5. Connect to Vercel
○ Choose “[Link]” / serverless functions deployment
○ Vercel detects /api folder → deploys as serverless functions
6. Environment Variables
○ Set API keys (OpenAI, HuggingFace, etc.) in Vercel Dashboard →
Project Settings → Environment Variables
7. Deploy
○ Frontend + backend functions are live
○ Test endpoints via <your-vercel-url>/api/quiz-generator
3. Tips for AI Project Deployment
Tip Explanation
Keep models small Browser-based ML models should be optimized for
performance
Use serverless functions for Avoid exposing API keys in frontend code
API calls
Environment variables Never hardcode sensitive keys in JS
Test locally before deploying Ensure all APIs, models, and frontend interactions
work
Monitor usage Free tier has request limits for AI APIs (OpenAI,
HuggingFace)
4. Summary
Deployment Use Case Tools Notes
Type
Static Frontend-only HTML/CSS/JS Fast, no backend, free SSL
projects
Node Server Full-stack with Express, Vercel Use env variables for sensitive
backend/API serverless keys, serverless functions
handle APIs
Outcome:
By the end of this module, developers can:
● Deploy AI projects online for real users
● Understand the difference between static vs full-stack deployment
● Integrate environment variables and APIs safely
● Ensure real-time AI apps work seamlessly in production
9.2 Optimizing Model Size
Deploying AI projects online requires fast loading times and efficient resource
usage, especially for browser-based ML models. Large models can slow down page
load, increase memory usage, and make apps unusable on low-end devices. Optimizing
model size is crucial for real-world deployment.
1. Quantization
Definition:
Quantization reduces the precision of model weights from 32-bit floats to 16-bit or
8-bit integers, making the model smaller and faster without major loss in accuracy.
Benefits:
● Reduced file size (up to 4x smaller)
● Faster inference in browser
● Less memory usage
[Link] Example:
// Save model with quantization
await [Link]('downloads://my-model', {
quantizationBytes: 2 // 1, 2, or 4 bytes per weight
});
2. Model Pruning
Definition:
Pruning removes unnecessary or low-importance weights from the neural network,
reducing model complexity.
Benefits:
● Smaller model size
● Faster predictions
● Maintains accuracy if done carefully
Tip:
● Combine pruning with retraining to recover any accuracy loss
3. Lazy Loading
Definition:
Lazy loading loads the model only when needed, instead of at page start.
Benefits:
● Faster initial page load
● Saves bandwidth
● Improves user experience
Implementation:
let model;
async function getModel() {
if (!model) {
model = await [Link]('/models/my-model/[Link]');
}
return model;
● Model loads on first user interaction, e.g., when AI assistant starts listening
4. CDN Delivery
Definition:
Host your ML models on a Content Delivery Network (CDN) to deliver them faster to
users worldwide.
Benefits:
● Low latency
● High availability
● Scalable for large numbers of users
Implementation:
● Upload [Link] + weight files to a CDN
● Load in JS:
const model = await
[Link]('[Link]
5. Summary
Optimization Purpose Benefits
Technique
Quantization Reduce weight precision Smaller model, faster inference
Pruning Remove unimportant Smaller, efficient, faster
weights
Lazy Loading Load model on-demand Faster page load, bandwidth
saving
CDN Delivery Host model globally Low latency, scalable, reliable
Outcome:
After applying these optimizations, your AI web projects will:
● Load faster and work on low-end devices
● Reduce bandwidth usage
● Offer better user experience without sacrificing accuracy
9.3 Using ONNX Runtime Web
ONNX Runtime Web allows developers to run pre-trained AI models efficiently in the
browser with GPU acceleration, improving performance and speed for AI
applications. It’s especially useful for large models and real-time AI tasks.
1. What is ONNX Runtime Web?
● ONNX (Open Neural Network Exchange): Standard format to represent AI
models trained in TensorFlow, PyTorch, or other frameworks.
● ONNX Runtime Web: JavaScript library that allows running ONNX models in
the browser using WebAssembly (WASM) or WebGPU.
Benefits:
● Run models entirely client-side
● Compatible with browser GPU acceleration
● Supports fast inference for large models
● Reduces server load
2. Faster Inference with WebAssembly (WASM)
● ONNX Runtime Web uses WASM to execute models efficiently in browsers.
● Provides near-native performance without plugins.
● Good for CPU-based devices or when GPU is not available.
Example:
import * as ort from 'onnxruntime-web';
const session = await [Link]('[Link]');
const feeds = { input: new Float32Array([0.5, 0.2, 0.1]) };
const results = await [Link](feeds);
[Link]([Link]);
3. GPU Acceleration with WebGPU
● Modern browsers support WebGPU, allowing GPU acceleration for AI inference.
● Significantly speeds up model predictions, especially for deep learning
models.
● ONNX Runtime Web can automatically choose GPU backend if available.
Example:
const session = await [Link]('[Link]', {
executionProviders: ['webgpu'] // Use GPU if available
});
4. Advantages for Browser-Based AI
Feature Benefit
Client-Side Execution Reduces server dependency, no API calls needed
GPU Acceleration Faster predictions for large AI models
Cross-Framework Run TensorFlow, PyTorch, or other models exported
Compatibility to ONNX
Lightweight Integration Simple JS API, works with existing web apps
5. Use Cases
● Real-time image recognition in browser
● AI chatbots with large LLMs
● Web-based computer vision tools
● Generative AI apps like text-to-image
6. Summary
ONNX Runtime Web allows developers to:
● Run AI models in the browser efficiently
● Leverage GPU for faster inference
● Maintain offline or client-side AI apps
● Optimize user experience for real-time applications
Outcome:
By integrating ONNX Runtime Web, AI web apps become fast, scalable, and more
interactive, even for resource-heavy models.
