How to Integrate Lovable with TensorFlow

Before writing any Edge Function code, your TensorFlow.js model files need to be accessible at runtime. A TF.js model exported in the layers format consists of a model.json descriptor file and one or more binary weight shard files (e.g., group1-shard1of1.bin). These files must be stored somewhere the Edge Function can fetch them — Supabase Storage is the right place because it sits within the same project infrastructure and supports both public and private bucket access. To upload model files, open your Lovable project and click the '+' icon next to Preview to open the Cloud panel. Click the 'Storage' section. Click 'New bucket' and name it 'models'. For a private model (one whose weights should not be downloaded by end users), leave 'Public bucket' unchecked — this means only requests with a valid service role key can read the files. For a pre-trained public model that is not proprietary, you can make the bucket public and load it directly from the browser without an Edge Function. Once the bucket is created, create a folder path like 'product-classifier/' inside it. Upload your model.json and all .bin shard files into this folder. The complete storage path will be: models/product-classifier/model.json. Note this exact path — you will use it in your Edge Function code. If you do not yet have a trained TF.js model, you can use a pre-converted model from TensorFlow Hub (https://tfhub.dev) — many models are available in TF.js format. For testing the integration end-to-end, the MobileNet image classification model is a good starting point and is small enough to demonstrate the full flow.

The Edge Function needs to fetch model files from your private Supabase Storage bucket at runtime. Reading from a private bucket requires the Supabase service role key — a credential that bypasses Row Level Security and can read any storage object. This key must never appear in frontend code or be exposed to the browser. To add the secret, click the '+' icon next to Preview to open the Cloud panel, then click the 'Secrets' tab. Click 'Add new secret'. Add the following: - Name: SUPABASE_URL — Value: your Supabase project URL (format: https://xxxxxxxxxxxx.supabase.co) - Name: SUPABASE_SERVICE_ROLE_KEY — Value: your service role key from Supabase dashboard → Project Settings → API → service_role secret Lovable Cloud automatically injects SUPABASE_URL and SUPABASE_SERVICE_ROLE_KEY into Edge Functions for projects using the built-in Lovable Cloud database. If your project uses Lovable Cloud (the default), these may already be available as built-in platform secrets. Verify by checking whether the secrets already exist before adding duplicates. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day, but the safest practice is to never paste service role keys anywhere except the Secrets panel. The service role key gives full database and storage access with no RLS restrictions — treat it with the same care as a database root password.

Now create the Edge Function that loads your model from Supabase Storage and runs inference. The Deno runtime in Supabase Edge Functions supports WebAssembly and the TensorFlow.js Deno-compatible package. The approach is: fetch the model.json file and its weight shards from Supabase Storage using signed URLs or service-role-authenticated requests, use tf.loadLayersModel() or tf.loadGraphModel() to load the model into memory, preprocess the input, run model.predict(), and return the result as JSON. TensorFlow.js in Deno requires importing from the correct CDN. Use the tfjs package from esm.sh which bundles the CPU backend. The model loading uses tf.io.browserHTTPRequest() to fetch from a URL — you generate a short-lived signed URL for the model.json file using the Supabase Storage SDK, which the TF.js loader can then follow to download all associated weight shards. Note that loading a model cold (first invocation after the Edge Function has been idle) can take 2-10 seconds for large models. For production use cases with latency requirements, consider keeping the Edge Function warm with a scheduled ping, or caching the loaded model in a module-level variable (Deno module cache persists for the lifetime of the Edge Function instance). Paste the Lovable prompt below into chat to scaffold the function, then customize the preprocessing logic for your specific model.

1// supabase/functions/tf-predict/index.ts
2import * as tf from 'https://esm.sh/@tensorflow/tfjs@4.20.0';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8};
9
10// Module-level model cache — persists across requests in the same instance
11let cachedModel: tf.LayersModel | null = null;
12
13async function getModel(supabaseUrl: string, serviceRoleKey: string): Promise<tf.LayersModel> {
14  if (cachedModel) return cachedModel;
15
16  const supabase = createClient(supabaseUrl, serviceRoleKey);
17
18  // Generate a signed URL for the model.json (valid for 5 minutes)
19  const { data, error } = await supabase.storage
20    .from('models')
21    .createSignedUrl('product-classifier/model.json', 300);
22
23  if (error || !data?.signedUrl) {
24    throw new Error(`Failed to get model URL: ${error?.message}`);
25  }
26
27  // TF.js loads model.json and automatically fetches weight shards from the same directory
28  cachedModel = await tf.loadLayersModel(data.signedUrl);
29  console.log('Model loaded and cached');
30  return cachedModel;
31}
32
33Deno.serve(async (req) => {
34  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
35
36  try {
37    const { input, inputShape } = await req.json() as {
38      input: number[];
39      inputShape: number[];
40    };
41
42    if (!input || !inputShape) {
43      return new Response(JSON.stringify({ error: 'input and inputShape are required' }), {
44        status: 400,
45        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
46      });
47    }
48
49    const supabaseUrl = Deno.env.get('SUPABASE_URL')!;
50    const serviceRoleKey = Deno.env.get('SUPABASE_SERVICE_ROLE_KEY')!;
51
52    const model = await getModel(supabaseUrl, serviceRoleKey);
53
54    // Create input tensor and run prediction
55    const tensor = tf.tensor(input, inputShape);
56    const prediction = model.predict(tensor) as tf.Tensor;
57    const values = await prediction.data();
58
59    // Cleanup tensors to avoid memory leaks
60    tensor.dispose();
61    prediction.dispose();
62
63    return new Response(JSON.stringify({ predictions: Array.from(values) }), {
64      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65    });
66  } catch (error) {
67    console.error('Inference error:', error);
68    return new Response(JSON.stringify({ error: String(error) }), {
69      status: 500,
70      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
71    });
72  }
73});

With the Edge Function deployed, build the React component that calls it. Use supabase.functions.invoke() to call the tf-predict function, passing the input data as a serialized JSON body. The input preprocessing (converting an image to a flat float32 array, normalizing pixel values to 0-1, etc.) happens client-side in React before the API call — this keeps the preprocessing logic visible and debuggable without touching the model-serving code. For image classification, the frontend flow is: user selects an image → draw it to a canvas element at the model's expected input size (e.g., 224x224 for MobileNet-based models) → extract pixel data as a flat Uint8ClampedArray → normalize values to 0-1 by dividing by 255 → send to the Edge Function → display the returned prediction scores with labels. For tabular models, the preprocessing is simpler: collect form field values, normalize each feature using the same scaling parameters used during training (often min-max or z-score normalization), build the input array, and send it. Ask Lovable to build the complete frontend component with the preprocessing and display logic. Describe the model's inputs (what the user provides), the expected output format (class labels and scores, or a regression value), and the UI design you want. Lovable will wire up the supabase.functions.invoke() call and generate appropriate loading/error states.

Production ML inference endpoints need defensive coding that goes beyond a basic happy path. Add server-side input validation to your Edge Function to catch common problems: verify the input array has the expected number of elements (length must match the product of all inputShape dimensions), check that all values are finite numbers (not NaN or Infinity, which TensorFlow will silently propagate through the model producing nonsense outputs), and enforce a maximum input size to prevent memory exhaustion attacks. For logging, add structured console.log statements at key points — model load time, inference duration, and output summary. Cloud → Logs in the Lovable Cloud panel shows these logs in real-time. Monitoring inference latency is important for TensorFlow models because it can vary significantly based on model size, whether the model is cached, and Deno instance warm-up time. For client-facing error messages, distinguish between input validation errors (return 400 with a descriptive message the UI can display), model loading failures (return 503 with a retry-later message), and inference errors (return 500). Never expose raw TensorFlow error stack traces to the client — they can reveal model architecture details. For complex production ML deployments with high-traffic requirements, custom preprocessing pipelines, or A/B testing between model versions, RapidDev's team can help architect a scalable model serving strategy on top of Lovable Cloud's Edge Function infrastructure.

1// Input validation helper — add to the Edge Function
2function validateInput(input: unknown, inputShape: unknown): string | null {
3  if (!Array.isArray(input)) return 'input must be an array of numbers';
4  if (!Array.isArray(inputShape)) return 'inputShape must be an array of integers';
5
6  const expectedSize = (inputShape as number[]).reduce((a, b) => a * b, 1);
7  if ((input as number[]).length !== expectedSize) {
8    return `input length ${(input as number[]).length} does not match inputShape product ${expectedSize}`;
9  }
10
11  const hasInvalid = (input as number[]).some((v) => !Number.isFinite(v));
12  if (hasInvalid) return 'input contains NaN or Infinity values';
13
14  return null; // valid
15}
16
17// Usage in the handler:
18// const validationError = validateInput(input, inputShape);
19// if (validationError) return new Response(JSON.stringify({ error: validationError }), { status: 400, ... });