We are going to create a single-page web app in one file: index.html.
 The app will run a Gray-Scott reaction-diffusion simulation.
 We will use a <canvas> for rendering and write the simulation in JavaScript using Web Workers for offloading the heavy computation (to avoid blocking the main thread).
 However, note: the problem says to write one self-contained file. We cannot create separate worker scripts, so we will use an inline worker by converting the worker code to a blob.

 Steps:
 1. We'll set up a <canvas> element and get its 2D context.
 2. We'll write the Gray-Scott simulation in a Web Worker to run in the background.
 3. We'll use double buffering (two arrays) to represent the current and next state of the simulation.
 4. The simulation parameters (f, k, etc.) can be adjusted, but we'll set some defaults that produce interesting patterns.
 5. The mouse interaction will allow the user to "seed" the simulation by adding a blob of chemicals at the mouse position.

 Important: Since we cannot have external files, we put the worker code as a string and create a blob URL for the worker.

 We'll structure the index.html file with:
   - HTML: a canvas and maybe some controls (if we have time, but the problem says minimal, so we skip for now and focus on core).
   - CSS: minimal, just to make the canvas fullscreen or fixed size.
   - JS: including the main script and the worker code as a string.

 However, note: the worker code must be in a separate script, but we can use a technique to inline the worker.

 Implementation of the Gray-Scott model:
   - We have two chemicals: U and V.
   - The equations:
        dU/dt = Du * Laplacian(U) - U * V^2 + F * (1 - U)
        dV/dt = Dv * Laplacian(V) + U * V^2 - (F + k) * V

   Typically, we set Du = 0.16, Dv = 0.08, and vary F and k.

   We'll use a grid (array) for U and another for V. We'll compute the next state using finite differences.

   For efficiency, we use a Web Worker to update the grid.

 Steps in the worker:
   - Receive the current state (two arrays: U and V) and parameters (F, k) as well as the mouse input.
   - Update the grid for the next step and send the updated arrays back.

 But note: transferring large arrays between the worker and the main thread can be slow. Instead, we use an offscreen canvas and transfer its control to the worker? 
   However, the problem says the app must run in one file and the artifact must be self-contained.

 Alternative without offscreen canvas (which might not be supported in all browsers and requires OffscreenCanvas):

   We'll do:
     Main thread:
        - Draws the current state to the canvas (using the V channel for example, which represents the activator).
        - Sends the state (U and V arrays) to worker to compute next state.

     Worker:
        - Computes next state and sends back the new arrays.

   But note: the arrays are large and transfer is expensive. We can avoid transferring the arrays every time by using transferable objects? 
     We use Float32Array for the grid. We can transfer them without copy by using transferList.

   However, we need two sets of arrays for double buffering. We'll have arrays for U and V at two time steps (current and next) in the worker. 
     The worker will send back the current state after updating, then the main thread will use that to draw.

   But we must note: the main thread doesn't need the full arrays every frame? It only needs the one for drawing (maybe we send every frame?).

   We can try to have the worker do:
        currentU, currentV -> compute nextU, nextV, then send back nextU and nextV (but then we are transferring the entire grid every frame).

   Alternatively, we can have the worker update the grid and also generate an image data for the canvas? That would be even more work for the worker, and the main thread would just putImageData.

   Let's reconsider: the problem requires real-time and the grid must be updated at a certain rate. We are going to have a grid of about 256x256? or 512x512? Let's start with 256x256.

   We'll have the worker compute the next state and then send the V channel as a Uint8ClampedArray for the image.

   Steps for the worker:
        - Maintain U1, U2, V1, V2 (double buffering). 
        - The main thread sends a message to the worker to compute one step, then the worker sends a message back with the image data.

   We can also have the worker run without waiting? But the main thread needs to control when to draw.

   We'll set up an animation loop on the main thread. Each frame, it will:
        - Draw the current image (if available) to the canvas.
        - Then send the current state to the worker to compute the next state? Actually, we are maintaining the state in the worker? 

   Alternatively, the state will be maintained in the worker. We start the worker and let it run a loop, and every time it computes a step, it sends the image data to the main thread.

   We'll design the worker to run an infinite loop until it is killed. It uses setInterval or requestAnimationFrame in the worker? Let's use setInterval.

   The worker runs at a fixed time step (say 10 fps for simulation), and the main thread draws whenever it receives new data.

   How to handle mouse events? The main thread will send a message to the worker when the mouse is down: "add a blob of V at (x,y)".

   We'll design:

   Main thread:
        let worker = new Worker(workerBlobUrl);
        worker.onmessage = function(e) {
            if (e.data.type === 'image') {
                // we have image data, draw it to canvas
            }
        }
        // Start the worker
        worker.postMessage({ type: 'init', params });

        // Mouse event: when mouse down or move with mouse down, we send an event to the worker with the position.
        canvas.addEventListener('mousedown', ...);
        canvas.addEventListener('mousemove', ...);

   Worker code (inside the blob):

        let U, V; // arrays for the current state (we'll use two for double buffering: current and next)
        let params = { F: ???, k: ??? };

        onmessage = function(e) {
            if (e.data.type === 'init') {
                initialize(); // set up the grid
                // Start the simulation loop
                setInterval(step, 10); // step every 10 ms? adjust to rate
            }
            else if (e.data.type === 'seed') {
                // add a blob at (x, y)
                addBlob(e.data.x, e.data.y);
            }
        }

        function step() {
            // compute next state
            // then generate image from V (for example)
            let imageData = ...;
            postMessage({ type: 'image', image: imageData });   // But note: imageData is large. We can use transferable?
            // Alternatively, we can create an ImageData object in the worker? But we cannot transfer it? Actually, we can transfer the Uint8ClampedArray.

            // Another idea: have the worker send the entire V array as Float32Array? Then the main thread does the drawing? 
            // But that would be heavy for the main thread? We do the conversion in the worker.

            // We can create an array of 4 bytes per pixel (RGBA) that represents the state of V? For each pixel, we take the value of V and map it to a color.

            // Alternatively, we send the entire array of V as a Float32Array? then the main thread converts to image? That would be heavy on main thread.

            // Since we are in the worker, we do the conversion to an array of RGBA. Then send the Uint8ClampedArray, and we can create an ImageData in the main thread.

            let width = ... , height = ...;
            let rgba = new Uint8ClampedArray(width * height * 4);
            // fill the rgba array: set r,g,b to 255 * V value? or some color map? We can use a heatmap? for now we just use red for V.
            // For now: set r = 255 * V, and g and b to 0? But note that V might be above 1? We clamp and normalize.

            // We'll find min and max of V? Or we can use fixed: assume V in [0,1]. Actually, in Gray-Scott it should be around [0, 1.0] but we are starting from 1 for V? not necessarily.

            // Alternatively, we can do: V is displayed as V * 50? and clamp to [0,1] for color? That might not be flexible.

            // We can set: 
            // r = Math.min(255, Math.max(0, Math.floor(255 * V[i])));
            // g = ... ? Let's set (V, V, V) -> grayscale.

            for (let i = 0, j = 0; i < width*height; i++, j+=4) {
                let v = V[i];
                // Scale v: let c = Math.floor(255 * Math.min(1.0, Math.max(0, v*10))); // adjust scale factor as needed
                let c = Math.floor(255 * v * 2); // try this and see? but we don't know the range. We'll adjust later.
                rgba[j] = c;   // R
                rgba[j+1] = c; // G
                rgba[j+2] = c; // B
                rgba[j+3] = 255; // A
            }

            // Now we can post the buffer of rgba but it's transferable? We can send without copying? The rgba array is transferable? Yes, but note that after transfer we cannot use it again? In the worker we can create a new one every frame? That's expensive.

            // We can create it every frame? For 256x256, that's 256*256*4 = 256 KB per frame? At 10fps, that's 2.5 MB/s? acceptable? 

            // Alternatively, we keep one buffer and reuse? But then we cannot post because it would be transferred and become unusable in the next step? So we create a new array every time? 

            // We do create a new array every time? 

            // Then we do:
            postMessage({ type: 'image', data: rgba, width: width, height: height }, [rgba.buffer]);
        }

   Main thread:
        worker.onmessage = function(e) {
            if (e.data.type === 'image') {
                let data = e.data.data; // Uint8ClampedArray
                let img = new ImageData(data, e.data.width, e.data.height);
                ctx.putImageData(img, 0, 0);
            }
        }

   But note: when the worker posts the message with the transferable, the array is detached from the worker. So every step we have to create a new array? That's acceptable.

   However, the step in the worker is heavy and we want it to be efficient? So we might not want to allocate memory every step? 
     We can have two rgba buffers and alternate? Then we don't need to allocate every time? But then we can't transfer both? We transfer one and then create a new one? 

   Alternatively, we can not use transfer? What is the cost? The array is copied from worker to main thread? This might be acceptable for small resolutions? but 256x256 is 256KB per frame? 100fps would be 25MB/s? which is acceptable? But we are at 10fps? -> 2.5 MB/s? acceptable.

   But let me check: using transferables is good because the array is moved without copy. But then the worker loses the buffer and must allocate a new one? It's the same allocation cost? 

   So we do: create a new Uint8ClampedArray every step? and transfer it? 

   However, we are already doing a lot of computation in the worker? We don't want to add GC pressure? 

   We can also do without transfer? But the copying might be heavy? We let the browser decide? We avoid transferables and just send the array without transfer? Then the worker keeps the buffer and we avoid allocation? But then the buffer is copied? 

   We'll try without transfer first? Because transferring requires detaching and reallocating.

   How about: 
        postMessage({ type: 'image', data: rgba }); // without transfer? but if we do that, the array is structured cloned? which is a copy? 

   For large arrays, transferring is better? 256KB? That is considered small? 

   We'll go with transferring to avoid the copy? and accept reallocating? 

   Now, let's write the Gray-Scott update.

   We'll have to represent the grid as two 2D arrays? We do 1D arrays: for (let i=0; i<height; i++) for (let j=0; j<width; j++). 

   We'll do:

        let index = i * width + j;
        let u = U[index];
        let v = V[index];
        let laplacianU = 0;
        let laplacianV = 0;
        // Use a kernel for laplacian: such as the 3x3 stencil?
        // kernel: [[0.05, 0.2, 0.05], [0.2, -1.0, 0.2], [0.05, 0.2, 0.05]]? (this is a common one) or the 5-point stencil?
        // Let's use 5-point stencil for simplicity? But the 9-point is more circular? We use 5-point for now for speed.

        In 5-point: 
            laplacianU = (u_left + u_right + u_up + u_down - 4*u) * some factor? 
            Actually, the formula I remember: dU/dt = Du * (d^2U/dx^2 + d^2U/dy^2) = Du * ( (u[i-1][j] - 2*u[i][j] + u[i+1][j]) + (u[i][j-1] - 2*u[i][j] + u[i][j+1]) ) 
            = Du * ( u[i-1][j] + u[i+1][j] + u[i][j-1] + u[i][j+1] - 4*u[i][j] )
        So we use:

        laplacianU = 
            U[index - width] + 
            U[index + width] + 
            U[index - 1] + 
            U[index + 1] - 
            4*U[index];

        Similarly for V.

        Then update:
            du = Du * laplacianU - u * v * v + F * (1 - u);
            dv = Dv * laplacianV + u * v * v - (F + k) * v;

        And then update the next state:
            nextU[i] = u + du * dt;
            nextV[i] = v + dv * dt;

        But note: we must handle boundaries? We can use periodic? or clamped? Let's do wrapped? 

        Actually, for the edges: 
          if i==0, index - width is out of bounds -> for i=0, we use the bottom row? or we clamp? 
          We'll do: use the grid as toroid? wrapped.

        We can compute the neighbors with modulo:

          up = (i-1+height) % height
          down = (i+1) % height
          left = (j-1+width) % width
          right = (j+1) % width

        Then index_up = up * width + j
        index_down = down * width + j
        index_left = i * width + left
        index_right = i * width + right

        That's 4 indices per pixel? And we do this for every pixel? 256x256 pixels * 2 (for U and V) = 130K pixels? then 4 neighbor accesses per pixel = 500K reads? and then the math? It's acceptable? 

   We'll implement the worker step accordingly.

   Parameters: we'll set
        Du = 0.16
        Dv = 0.08
        F = 0.0545
        k = 0.062

   These values are known to produce spots? 

   Also, we set dt (time step) to 1.0? It should be as small as possible? 

   We'll set dt = 1.0? Then we might get instabilities? We might need to reduce? The paper says about dt=0.5? We'll try 1.0 and see? 

   We'll adjust as needed.

   Now, let's write the code in one index.html file.

 Structure:

   <!DOCTYPE html>
   <html>
   <head>
     <title>Gray-Scott Reaction-Diffusion</title>
     <style>
       body { margin: 0; }
       canvas { display: block; }
     </style>
   </head>
   <body>
     <canvas id="canvas"></canvas>
     <script>
       // Main script
       // We'll create a canvas and set up the worker.

       const canvas = document.getElementById('canvas');
       const ctx = canvas.getContext('2d');

       // Set canvas size to match the grid? 
       const WIDTH = 256;
       const HEIGHT = 256;

       canvas.width = WIDTH;
       canvas.height = HEIGHT;

       // Worker: we create a blob with the worker code and then use it.

       const workerCode = ` 
         // We are inside the worker, so we use self.onmessage...

         let U;      // current U array (Float32Array)
         let V;      // current V array (Float32Array)
         let nextU;  // next U array
         let nextV;  // next V array
         let width, height;

         // We'll use a toroidal grid: indices wrap around.

         // Parameters
         let Du = 0.16;
         let Dv = 0.08;
         let F = 0.0545;
         let k = 0.062;
         let dt = 1.0;

         self.onmessage = function(e) {
           if (e.data.type === 'init') {
             width = e.data.width;
             height = e.data.height;
             // Initialize arrays
             U = new Float32Array(width * height);
             V = new Float32Array(width * height);
             nextU = new Float32Array(width * height);
             nextV = new Float32Array(width * height);

             // Set initial conditions: 
             //   U: all 1.0, V: 0 except at some spots? 
             for (let i = 0; i < width * height; i++) {
                 U[i] = 1.0;
                 V[i] = 0.0;
             }

             // Add some random seed? 
             // But we might not need? because user will seed with mouse? 
             // Or we can start with some patterns? 
             for (let i = 0; i < 10; i++) {
                 let x = Math.floor(Math.random() * width);
                 let y = Math.floor(Math.random() * height);
                 addBlob(x, y);
             }

           } else if (e.data.type === 'seed') {
             // e.data.x and e.data.y are in the coordinate of the canvas?
             // We'll get the fractional position? 
             let x = e.data.x;
             let y = e.data.y;
             // We need to convert to grid coordinates? 
             // Our grid is width x height? and canvas is same? 
             addBlob(Math.floor(x), Math.floor(y));
           }
         };

         function addBlob(x, y) {
             // Set a 3x3 blob of V at (x,y) to 1.0? and reduce U to 0.5?
             let radius = 3;
             for (let dx = -radius; dx <= radius; dx++) {
                 for (let dy = -radius; dy <= radius; dy++) {
                     let nx = (x + dx + width) % width;
                     let ny = (y + dy + height) % height;
                     let index = ny * width + nx;
                     V[index] = 0.5;
                     U[index] = 0.5;
                 }
             }
         }

         // The step function to compute next state
         function step() {
           // Loop over every pixel
           for (let y = 0; y < height; y++) {
             for (let x = 0; x < width; x++) {
               let index = y * width + x;

               // Compute indices of neighbors (using toroidal bounds)
               let up = (y - 1 + height) % height;
               let down = (y + 1) % height;
               let left = (x - 1 + width) % width;
               let right = (x + 1) % width;

               // Neighbor indices
               let idx_up = up * width + x;
               let idx_down = down * width + x;
               let idx_left = y * width + left;
               let idx_right = y * width + right;

               // Laplacians for U and V at (x,y)
               let laplacianU = 
                   U[idx_up] + 
                   U[idx_down] + 
                   U[idx_left] + 
                   U[idx_right] - 
                   4 * U[index];

               let laplacianV = 
                   V[idx_up] + 
                   V[idx_down] + 
                   V[idx_left] + 
                   V[idx_right] - 
                   4 * V[index];

               // Reaction terms
               let du = Du * laplacianU - U[index] * V[index] * V[index] + F * (1.0 - U[index]);
               let dv = Dv * laplacianV + U[index] * V[index] * V[index] - (F + k) * V[index];

               // Update next state
               nextU[index] = U[index] + du * dt;
               nextV[index] = V[index] + dv * dt;

               // Clamp to avoid negative? 
               if (nextU[index] < 0) nextU[index] = 0;
               if (nextV[index] < 0) nextV[index] = 0;
               // Also clamp above 1? Gray-Scott is typically bounded? 
               if (nextU[index] > 1) nextU[index] = 1;
               if (nextV[index] > 1) nextV[index] = 1;
             }
           }

           // Swap buffers: the next becomes current
           [U, nextU] = [nextU, U];
           [V, nextV] = [nextV, V];

           // Generate image from V: we create a Uint8ClampedArray for the image
           let data = new Uint8ClampedArray(width * height * 4);
           for (let y = 0; y < height; y++) {
             for (let x = 0; x < width; x++) {
               let v = V[y * width + x];
               // Map v to a color: for now grayscale. We can adjust the contrast by scaling?
               // v might be in [0,1]? We scale by 2? so that 0.5 becomes 255? 
               // let c = Math.floor(255 * Math.min(1, v * 2));
               let c = Math.floor(255 * v * 2);
               if (c > 255) c = 255;
               let idx = (y * width + x) * 4;
               data[idx] = c;         // R
               data[idx+1] = c;       // G
               data[idx+2] = c;       // B
               data[idx+3] = 255;     // A
             }
           }

           // Post the image data back to main thread as a transferable
           self.postMessage({ 
             type: 'image', 
             data: data, 
             width: width, 
             height: height 
           }, [data.buffer]);

         }

         // Start simulation? We wait for the init message to start the setInterval?
         // But note: the step() function is called only after init? We can set up the interval when we get init?
         // We'll do: after init we start stepping after a delay? Actually, we start the interval.

         // We are going to run step every 100ms? 10fps? 
         // But note: the computation might take longer? We should use requestAnimationFrame in the worker? 
         // Actually, we can use setInterval with a time of 0? but then we'll step as fast as possible? which might be too heavy.

         // We'll use a fixed step in time? 

         let interval = setInterval(step, 100); // 10 fps? 
       `; // End of workerCode string

       const blob = new Blob([workerCode], {type: 'application/javascript'});
       const worker = new Worker(URL.createObjectURL(blob));

       // Initialize the worker
       worker.postMessage({
         type: 'init',
         width: WIDTH,
         height: HEIGHT
       });

       worker.onmessage = function(e) {
         if (e.data.type === 'image') {
           let imgData = new ImageData(e.data.data, e.data.width, e.data.height);
           ctx.putImageData(imgData, 0, 0);
         }
       };

       // Mouse interaction: when mouse is down, we seed at the mouse position
       canvas.addEventListener('mousedown', function(event) {
         seed(event.offsetX, event.offsetY);
         canvas.addEventListener('mousemove', mouseMoveHandler);
       });

       function mouseMoveHandler(event) {
         if (event.buttons === 1) { // left button down?
           seed(event.offsetX, event.offsetY);
         }
       }

       canvas.addEventListener('mouseup', function() {
         canvas.removeEventListener('mousemove', mouseMoveHandler);
       });

       function seed(x, y) {
         // We need to scale? because the canvas might be displayed at a different size? 
         // But we set the canvas to WIDTH x HEIGHT, and if the CSS scales it? we use the offsetX which is in CSS pixels? not the same as our internal grid?
         // How to get the coordinate in the grid? 

         // Our canvas has the same resolution as our grid? So the grid coordinates are exactly the same as the offset? 
         // But if the canvas is scaled by CSS, then we need to adjust? 

         // We'll get the bounding box and adjust?
         let rect = canvas.getBoundingClientRect();
         // Actually, we are using event.offsetX which is relative to the canvas? 
         // But if the canvas element is scaled? then the grid coordinate? 
         // We set canvas.width = WIDTH, canvas.height = HEIGHT, so the internal resolution is fixed.

         // The offsetX is in the coordinate system of the canvas? It's in the same units as the internal width? 
         // Not necessarily: the canvas has two sizes: the size of the element (set by CSS) and the internal resolution (set by width/height attributes).
         // The event.offsetX is in the element's coordinate? So we need to convert:

         let px = (x / rect.width) * WIDTH;
         let py = (y / rect.height) * HEIGHT;

         // Now px, py are in the grid coordinate? But they might be fractional? so we floor?
         worker.postMessage({
           type: 'seed',
           x: Math.floor(px),
           y: Math.floor(py)
         });
       }
     </script>
   </body>
   </html>

   But note: the canvas internal resolution is WIDTH x HEIGHT, and it's displayed at rect.width? which might be different? The above conversion is from event coordinates to grid coordinates? 

   Alternatively, we can set the canvas element size with CSS to the desired display size? and then we don't change the internal resolution? We are currently setting the internal resolution to 256x256? but then the display might be stretched? We want the internal resolution and display size to be the same? Let's set:

      canvas.width = WIDTH;
      canvas.height = HEIGHT;
      canvas.style.width = WIDTH + 'px';
      canvas.style.height = HEIGHT + 'px';

   Then the offsetX and offsetY would be the same as the grid coordinates? 

   Alternatively, we can remove the style setting? because without CSS the canvas will be WIDTHxHEIGHT in the page? Then event.offsetX is the same as grid coordinate? 

   But if we want the canvas to be fullscreen? That would not work? 

   The problem says: a canvas that grows organic patterns in real time, with the mouse seeding new growth.

   We'll set:

        canvas.style.width = '100%';
        canvas.style.height = '100%';

   Then we set the internal resolution to the actual pixel grid? But we are setting it to 256? which is low resolution? 

   We are limited by performance? 256x256 is about the maximum? 

   Alternatively, we make the grid larger? 512x512? but then the step function in the worker would be 4x slower? 

   Since the problem says real-time, we stick to 256.

   And for the conversion? We want the mouse to seed the corresponding grid cell? So we must convert the event.offsetX (which is relative to the client area of the canvas) to the grid coordinate? 

        gridX = Math.floor( (event.offsetX / canvas.clientWidth) * WIDTH );
        gridY = Math.floor( (event.offsetY / canvas.clientHeight) * HEIGHT );

   But we set the canvas internal size to WIDTH and HEIGHT? and the clientWidth and clientHeight are the display size? 

   We'll do:

        const WIDTH = 256;
        const HEIGHT = 256;
        canvas.width = WIDTH;
        canvas.height = HEIGHT;

        canvas.style.width = '100vw';
        canvas.style.height = '100vh';

   Then the conversion is:

        let gridX = Math.floor( (event.offsetX / event.target.clientWidth) * WIDTH );
        let gridY = Math.floor( (event.offsetY / event.target.clientHeight) * HEIGHT );

   But note: the offsetX is in the coordinate system of the canvas, which is the same as the client area? 

   Let's change the CSS to:

        canvas { display: block; width: 100vw; height: 100vh; }

   Then we set the canvas element's width and height attributes to 256 and 256? 

   Now, the canvas will stretch to the window? and the internal grid is 256 fixed? 

   But the drawing will be upscaled? It will be blurry? 

   We can set the canvas internal width to the window.devicePixelRatio? but then the grid becomes too large? 

   Alternatively, we set the grid to match the canvas display size? but then the grid can be large? and the simulation slows? 

   We are constrained by performance? So we keep the grid 256x256? and let it stretch to the window? 

   We'll do:

        canvas.style.width = '100%';
        canvas.style.height = '100%';
        canvas.width = WIDTH;
        canvas.height = HEIGHT;

   And in the event handler:

        const rect = canvas.getBoundingClientRect();
        // But note: offsetX is relative to the canvas element? It already gives the offset within the element? 
        // And the canvas element has a certain display size? 
        // We can also use: 
        //   let x = (event.clientX - rect.left) * (canvas.width / rect.width);
        //   let y = (event.clientY - rect.top) * (canvas.height / rect.height);

        // According to MDN: 
        //   To get the coordinates relative to the canvas itself (the content) when the canvas is styled with CSS, we can do:

        let x = (event.offsetX * (canvas.width / rect.width));
        let y = (event.offsetY * (canvas.height / rect.height));

        // Then we send x and y (as integers? we need to floor? but the grid indices are integers) 
        worker.postMessage({ type: 'seed', x: Math.floor(x), y: Math.floor(y) });

   We'll do that? 

   Since we set the internal width to 256, and the display size to 100%, we compute:

        grid_x = offsetX * (256 / rect.width)

   So we change the seed function:

        function seed(x, y) {
           // x,y are event.offsetX, offsetY? 
           // Convert to grid coordinates: 
           let rect = canvas.getBoundingClientRect();
           let gridX = Math.floor(x * (WIDTH / rect.width));
           let gridY = Math.floor(y * (HEIGHT / rect.height));
           worker.postMessage({
               type: 'seed',
               x: gridX,
               y: gridY
           });
        }

   And we call seed in the events with event.offsetX and event.offsetY?

   But note: in mouse events, the event has offsetX and offsetY? which are the coordinates within the element? 

   So we do:

        canvas.addEventListener('mousedown', function(event) {
            seed(event.offsetX, event.offsetY);
            // and set up move handler
            ...
        });

   Similarly for mousemove.

   Now, write the index.html with the above.

   Let me note: this simulation may be slow? especially on large grids. We are using 256x256 and a step every 100ms? We'll see.

   We'll write the entire file now.

   We'll also modify the color: currently it's grayscale? We can make it more interesting? But the problem does not specify.

   We can change the mapping to use a color gradient? but for now, we keep it simple.

   If we have time? we can add multiple patterns? by changing F and k? but we skip for now.

   Let me know if you want to change something? 

   We are going to write the file.

   One more thing: the worker code is a string? we must escape any backticks? or single quotes? 
        In the workerCode string, we are using template literals? and the workerCode contains backticks? 
        We will write the workerCode with backticks? and then use a template string? but the workerCode itself uses backticks? 
        We must escape: we cannot. Instead, we change the workerCode to be written as a string without template? we use function body with standard quotes? 

        Actually, we write the workerCode with double quotes? and escape any double quotes inside? 

        But looking: the code we put in the worker has no ` and no \'? so we are safe? 

        Alternatively, we write the worker code as an immediate function? and use string concatenation? 

        I notice that we have `self.onmessage`? and we use ` in the worker code? 

        When we create the blob, we are using a string that is delimited by backticks? and inside we have backticks? we must escape? 

        We are inside a template string? and we have a string that contains backticks? So we must escape those with \`? 

        Where? we see the workerCode string? 

        Alternatively, we use:

        const workerCode = `
          // Inside we use backticks? no, only in the outer? 
          // We don't have backticks in the code? 
          // Let me see: in the function step, we have: 
          //   ... 'image' ... 
          //   ... 'seed' ... 
          //   ... without backticks? 

          // The only potential issue is the ${}? we might have some in the worker code? 
          // Actually, no? we are using plain code? 

        `;

        But we are using ` to end the workerCode? and the workerCode contains ` ? we escape the inner ` by \`? 

        Actually, in the worker code, we are not using any `? but we are using template strings? 
          In the step function: 
          let data = new Uint8ClampedArray(width * height * 4); -> no template strings?
          We don't have any backtick in the worker code? we always use single quotes? 

        So we are safe? 

        We write the workerCode with single quotes? 

        But we changed: inside the workerCode, we used single quotes? for the addBlob? etc? 

        Yes, we did: 

          for (let i=0; i<10; i++) { ... }

          and we did: self.postMessage(...)

        So we are safe.

   Let's write the file.

   We'll put the entire thing in one string? and write to 'index.html'? 

   We are going to use the write tool to create the file.

   File path: `/tmp/ws/index.html`

   Note: the current working directory is /tmp/ws.

We are creating a single-page web app that runs a Gray-Scott reaction-diffusion simulation in real time.
 The simulation will be rendered on a canvas. The mouse can be used to seed new growth.

 Requirements:
 - Use WebGL for performance.
 - Implement the Gray-Scott model: two chemicals U and V.
 - The canvas should be full screen.
 - Mouse interaction: when the mouse is moved while pressed, it should seed the simulation at the mouse position.

 Implementation plan:
 1. Set up the canvas and WebGL context.
 2. Create two textures for double buffering (we will simulate one step and then swap).
 3. Use fragment shaders to compute the reaction-diffusion steps.
 4. Render the result to the screen (using a texture that holds the V values for visualization).
 5. Add mouse interaction to inject chemicals at the mouse position.

 Note: We are writing everything in one HTML file.

 We'll structure the file as:
   <html>
   <head> ... </head>
   <body>
     <canvas> ... </canvas>
     <script> ... </script>
   </body>
   </html>

 The script will:
   - Initialize WebGL.
   - Set up the simulation textures and framebuffers.
   - Create shaders for simulation and rendering.
   - Set up mouse interaction.

 Important: The Gray-Scott model is defined by:
   du/dt = Du * laplacian(u) - u*v*v + F*(1 - u)
   dv/dt = Dv * laplacian(v) + u*v*v - (F + k)*v

 We'll use a floating-point texture to store (u, v) in two channels.

 Steps in the simulation shader:
   - Sample the current state (u, v) and neighbors to compute the Laplacian.
   - Update u and v.

 We'll run the simulation in a fragment shader by rendering to a texture.

 Due to the need for double buffering, we'll use two textures and two framebuffers.

 We'll also create a shader to visualize the result, mapping the V value to a color.

 Mouse seeding: when the mouse moves while pressed, we'll update the simulation texture by adding a spot of (U, V) at the mouse position.

 We'll start with some initial seeds.

 Let's code accordingly.