DEV Community: Ismaili Simba

Deploying an LLM on Serverless (Ollama + GCloud) for Free(ish)

Ismaili Simba — Wed, 16 Apr 2025 08:38:47 +0000

AI programs/LLMs (Large Language Models like Illama, Chatgpt, Gemini, Claude, etc.) have become useful for everyday work, especially if you use digital tools daily. In this article, we'll learn how to deploy an LLM to a Google Cloud Run endpoint and why that can be useful.

Why Deploy an LLM endpoint

Deploying an LLM to an endpoint you can manage is useful in the following ways:

It can help in complying with various regulation by ensuring all your data never leaves the required jurisdictions
It can help reduce costs as it is cheaper than subscribing to a chat service provider
You can further control and limit the LLM's behaviour to comply with your policies
It is cheaper to develop in-house, AI powered products and services

In the context of this article, we'll learn to deploy transformer-based LLMs served on Ollama to Cloud Run, a Google serverless product powered by Kubernettes. We are using Cloud Run because serverless deployments only incur costs when a user is performing a request. This makes them very suitable for testing and deploying web-based solutions affordably.

Pre-requisites

I'm running this on Windows 11, so all CLI commands you see are run on Git Bash. Other requirements are:

A free Google account with billing enabled on Cloud Console. You can do that on this link
You'll need to install gcloud CLI and run it via Git Bash (or the appropriate shell tool in your system). Once installed, authenticate it with your account (gcloud auth login) and configure it to use your project (gcloud config set project YOUR_PROJECT_ID).
Next, enable these APIs on your Google account by running the command below. APIs - Cloud Run API, Artifact Registry API, Cloud Build API, IAM API, and Compute Engine API. You can also enable them via the Cloud Console UI (under APIs & Services > Library).

gcloud services enable run.googleapis.com artifactregistry.googleapis.com cloudbuild.googleapis.com iam.googleapis.com compute.googleapis.com --project=YOUR_PROJECT_ID

Next, request a quota for NVIDIA L4 GPUs under the Cloud Run API in your desired region (e.g., us-central1). Check your quotas in the Google Cloud Console (IAM & Admin > Quotas & System Limits). In the table, filter by name and enter "Total Nvidia L4 GPU allocation with zonal redundancy, per project per region" or "Total Nvidia L4 GPU allocation without zonal redundancy, per project per region". Then, click the arrow beside the "Value" header to change the sorting order. If in both sorting orders, the value is still 0, it means you need to submit an increase request. The option for submitting an increase request should be on a second tab near the top. Please complete this process before continuing. This can take some time (up to 5 working days) to be approved.
Finally, pick an LLM from Ollama. For this example, we are using Gemma:2b, and we have also tested Gemma3:4b. We recommend any LLM that is less than 8GB and requires no more than 16GB of memory. From my understanding, at the moment, the L4 GPUs available on Cloud Run have a limit of 16GB RAM.

That's it; now, let's build and deploy!

Deployment process

First, run the following commands on Git Bash. These are values that we'll be reusing; hence it's better to save them for easy reference.

# Replace with your actual project ID
export PROJECT_ID="YOUR_PROJECT_ID"

# Choose a region that supports Cloud Run GPUs (e.g., us-central1)
export REGION="us-central1"

# Choose a name for your Artifact Registry repository
export REPO_NAME="gemma-models"

# Choose a name for your Cloud Run service
export SERVICE_NAME="gemma-ollama-service"

# Choose the Gemma model tag from Ollama Hub (e.g., gemma:2b, gemma:7b)
# Smaller models load faster and use fewer resources.
export OLLAMA_MODEL="gemma:2b"

# Set the gcloud project and region
gcloud config set project $PROJECT_ID
gcloud config set run/region $REGION
gcloud config set artifacts/location $REGION

Then, run this command to create an artifact registry Docker repository. This repository will store your container image.

gcloud artifacts repositories create $REPO_NAME \
  --repository-format=docker \
  --location=$REGION \
  --description="Repository for Gemma Ollama containers"

Now, create a new directory for your project, navigate into it, and create a file named Dockerfile (no extension) with the following content:

# Use an official Ollama image as the base
FROM ollama/ollama

# Set environment variables for Ollama
ENV OLLAMA_HOST=0.0.0.0:8080
ENV OLLAMA_KEEP_ALIVE=-1
ENV OLLAMA_DEBUG=false

# Define the model to pull (using the ARG passed during build)
ARG OLLAMA_MODEL

# Pre-pull the Gemma model:
# 1. Start ollama serve in the background (&)
# 2. Wait a few seconds for the server to start (sleep 5)
# 3. Run ollama pull
# 4. (Optional but good practice) Kill the background server process
#    We use 'ps | grep ollama | grep -v grep | awk '{print $1}' | xargs kill' to find and kill the server process
#    Note: Error during kill is ignored (|| true) in case the server exited quickly.
RUN ollama serve & \
    sleep 5 && \
    ollama pull ${OLLAMA_MODEL} && \
    (ps | grep ollama | grep -v grep | awk '{print $1}' | xargs kill || true)

# Set the entrypoint to start the Ollama server when the final container runs
ENTRYPOINT ["ollama", "serve"]

Then, in the same directory as your Dockerfile, create a file named cloudbuild.yaml with the following content:

steps:
- name: 'gcr.io/cloud-builders/docker'
  args: [
    'build',
    '--tag', '${_IMAGE_NAME}',
    '--build-arg', 'OLLAMA_MODEL=${_OLLAMA_MODEL}',
    '.'
  ]
images:
- '${_IMAGE_NAME}'
substitutions:
  _OLLAMA_MODEL: 'gemma:2b' # Default value, can be overridden
  _IMAGE_NAME: 'gcr.io/cloud-builders/docker' # Default value, MUST be overridden

Finally, you run the build command below.

export IMAGE_NAME="${REGION}-docker.pkg.dev/${PROJECT_ID}/${REPO_NAME}/${SERVICE_NAME}:latest"


gcloud builds submit . \
  --config cloudbuild.yaml \
  --substitutions=_IMAGE_NAME="$IMAGE_NAME",_OLLAMA_MODEL="$OLLAMA_MODEL"

This will build the image that will be containerised and deployed on Cloud Run. It will take some time, about 30 minutes.

Once your build process completes successfully, run the command below to deploy it. If you already had gcloud CLI installed, please update it, some of the flags used below were added as recently as early April 2025, so if you have not updated it lately, the command might fail.

Also, note what kind of L4 GPU Quota is approved for your account. If the approved quota option is the one with zonal redundancy, then remove the last flag from the command "--no-gpu-zonal-redundancy".

gcloud run deploy $SERVICE_NAME \
  --image=$IMAGE_NAME \
  --platform=managed \
  --region=$REGION \
  --execution-environment=gen2 \
  --cpu=4 \
  --memory=16Gi \
  --gpu=1 \
  --gpu-type=nvidia-l4 \
  --max-instances=3 \
  --min-instances=0 \
  --concurrency=1 \
  --timeout=600 \
  --port=8080 \
  --no-allow-unauthenticated \
  --no-gpu-zonal-redundancy

When the deployment finishes successfully, run the command below to save your service URL. This is the URL you'll serve you'll use to interact with the LLM.

export SERVICE_URL=$(gcloud run services describe $SERVICE_NAME --platform=managed --region=$REGION --format='value(status.url)')
echo "Service URL: $SERVICE_URL"

Then run this command to get your authentication token, since we deployed with "--no-allow-unauthenticated", we need to authenticate your request.

export AUTH_TOKEN=$(gcloud auth print-identity-token)

Finally, finally, finally. You can talk to your LLM by running the command below.

curl -X POST $SERVICE_URL/api/generate \
  -H "Authorization: Bearer $AUTH_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "model": "'"$OLLAMA_MODEL"'",
    "prompt": "Why is the sky blue?",
    "stream": false
  }'

From here, your LLM endpoint is live but only incurring cost when a user sends a prompt for generation.

I don't recommend making this endpoint publicly accessible. Instead, make another serveless instance and build a web app on it to interact with your LLM deployemnt. You can see an example of this here, although this app contains other stuff beyond this. I'm pasting an example function below.

The example below shows a function calling the LLM point while including chat history so the LLM can produce a better response to fit the chat context.

/**
 * Calls the deployed Gemma/Ollama Cloud Run service's CHAT endpoint.
 * @param {string} serviceUrl The base URL of the Cloud Run service.
 * @param {string} bearerToken The OIDC Identity Token (without "Bearer ").
 * @param {string} prompt The *current* text prompt.
 * @param {string} modelName The name/tag of the Ollama model.
 * @param {Array<object>} [chatHistory=[]] Optional: The conversation history.
 * @param {number} [timeout=60000] Optional: Request timeout.
 * @returns {Promise<object>} A Promise resolving with the Ollama API response (contains `message` object).
 * @throws {Error} If the API call fails.
 */
export async function callGemmaChatService( // Renamed for clarity
    serviceUrl,
    bearerToken,
    prompt,
    modelName,
    chatHistory = [], // <<< ADD chatHistory parameter
    timeout = 60000
) {
    if (!serviceUrl || !bearerToken || !prompt || !modelName) {
        throw new Error(
            'Service URL, Token, Prompt, and Model Name are required.'
        );
    }

    const apiUrl = `${serviceUrl.replace(/\/$/, '')}/api/chat`; // <<< CHANGE Endpoint
    console.log(`Calling Gemma CHAT service: ${apiUrl} with model: ${modelName}`);

    // <<< TRANSFORM HISTORY and create messages payload >>>
    const messages = transformHistoryToMessages(chatHistory, prompt);

    const requestData = {
        model: modelName,
        messages: messages, // <<< Use messages array
        stream: false,
    };

    const config = {
        method: 'post', url: apiUrl,
        headers: {
            Authorization: `Bearer ${bearerToken}`,
            'Content-Type': 'application/json',
        },
        data: requestData,
        timeout: timeout,
    };

    try {
        const response = await axios(config);
        if (response.status >= 200 && response.status < 300) {
            // console.log('Successful response from Gemma CHAT service.');
            // The response structure for /api/chat (non-stream) includes the assistant's message
            // e.g., { model: '...', created_at: '...', message: { role: 'assistant', content: '...' }, done: true, ...stats }
            return response.data; // <<< Return the full response object
        } else {
            throw new Error(`Request failed with status code: ${response.status}`);
        }
    } catch (error) {
        // Error handling remains similar
        console.error('Error calling Gemma CHAT service:', error.message);
        if (axios.isAxiosError(error)) {
            const axiosError = error;
            let detail = axiosError.message;
            if (axiosError.response) {
                detail = `Status ${axiosError.response.status}: ${JSON.stringify(
                    axiosError.response.data
                )}`;
            } else if (axiosError.request) {
                detail = 'No response received from service.';
            }
            throw new Error(`Gemma CHAT service call failed: ${detail}`);
        }
        throw error;
    }
}

You can also try this app out for yourself here. If you're feeling lucky and are in Tanzania, send us some coffee money for our good work!

Feel free to comment below if you face any issues.

PopUpAnywhere - A JavaScript Module For Creating Pop Up Menus That Can Appear Anywhere, Fast.

Ismaili Simba — Tue, 28 Sep 2021 13:15:15 +0000

What are JavaScript Modules?

JavaScript Modules are the simplest way for JavaScript programmers to collaborate, share and write complex programs. Say you have a problem, and you write a bunch of functions to solve them. But then you wanted to share these functions with your developer friends. This way, they can use the solution in their projects. You write your functions in a certain way - usually organized as class objects with various methods and properties. This creation is the module. You export it, and other people can import it. Examples of useful JavaScript Modules include PDF JS - for making pdfs, JSRSASIGN - for decoding and encoding keys and data - passwords and other sensitive stuff, and Quill JS - open-source text editor. We are going to make a Javascript module for creating pop-ups.

What are Pop-Ups?

We're not talking about pop up ads here. We are talking about the simple but useful context menus like those that appear in Windows or Mac when you right-click in File Explorer or Finder. Recently I had to implement something similar for a client - hover over Programs or Destination to see. The amount of thought I had to put into it made me wish a little bit that there was a module to help. I live to fulfil my wishes. Let's define what our pop up module will actually be able to do, after all the devil is in the details.

The Pop Up Anywhere Module Features

can automatically check the position of the parent element and determine where to position the pop-up
accepts custom styles
accepts custom functions for pop up items

You can try out the pop-up here or view the full set of features and instructions here.

How To Design The Module

Modules are organized in class structures, making them a bit confusing to design. To simplify things, approach this like any simple JavaScript program. Create a simple environment where you can write and test functions in a straightforward manner. Once you have all your functions working, then you can refractor the format.

For example the function below helps get the distance between the borders of the parent element and the edge of the body.

function getOffsetObj (){
    //var bodyRect = document.querySelectorAll(".canvas")[0].getBoundingClientRect();
    var bodyRect = document.body.getBoundingClientRect();
    var elemRect = document.getElementById("canvasinside").getBoundingClientRect();
    const offSetObj = {};
    offSetObj["top"]  = elemRect.top - bodyRect.top;
    offSetObj["left"]  = elemRect.left - bodyRect.left;
    offSetObj["right"]  = Math.abs(elemRect.right - bodyRect.right);
    offSetObj["bottom"]  = Math.abs(elemRect.bottom - bodyRect.bottom);
    offSetObj["parHeight"] = bodyRect.height;
    offSetObj["parWidth"] = bodyRect.width;
    offSetObj["chiWidth"] = elemRect.width;
    offSetObj["chiHeight"] = elemRect.height;


   return offSetObj;
  }

When I move this function to my class object, I'll do the following.

inside my class object, there's a method called constructor, I'll list my function and bind it to this class here.
then, as I paste my function in the object I remove the function keyword
from there, I can call this function anywhere in the class object


constructor(){
 this.getOffsetObj = this.getOffsetObj; 
}


 getOffsetObj (mom){
        //var bodyRect = document.querySelectorAll(".canvas")[0].getBoundingClientRect();
        var bodyRect = document.body.getBoundingClientRect();
        var elemRect = mom.getBoundingClientRect();
        const offSetObj = {};
        offSetObj["top"]  = elemRect.top - bodyRect.top;
        offSetObj["left"]  = elemRect.left - bodyRect.left;
        offSetObj["right"]  = Math.abs(elemRect.right - bodyRect.right);
        offSetObj["bottom"]  = Math.abs(elemRect.bottom - bodyRect.bottom);
        offSetObj["parHeight"] = bodyRect.height;
        offSetObj["parWidth"] = bodyRect.width;
        offSetObj["chiWidth"] = elemRect.width;
        offSetObj["chiHeight"] = elemRect.height;


       return offSetObj;
      }

  settings_28092021utc3ismizo.obj.side = this.findAvailPosition(this.getOffsetObj(obj.parent),obj.parent);

See if you can find where these lines are taken from!

How Does This One Work?

user runs Object.makeAPop with the appropriate object argument
fillObj method starts running, it creates a sample object and checks some values in the submitted object star
It then attempts to create a pop up by running other methods

Let me know what you think in the comments.

How To Read and Use A RESTful Web API With JavaScript: A Studio Ghibli Example

Ismaili Simba — Sat, 14 Aug 2021 11:19:18 +0000

What is A Web API?

An API - Application Programming Interface - is simply a way for other people to use apps you make without actually having access as you do. For example, if you developed an app that could immediately tell where anyone in the world is. You probably wouldn't want people to know how it works, but you'd still want to be able to allow them to use it, say for a fee. The set of instructions and codes given out so people can access your app, that is an API.
A Web API is simply an API setup to work over the web.

What is A RESTful Web API?

Simply put, A RESTful Web API follows RESTful Web standards. These are meant to make information sharing across the web a uniform activity. Some of the RESTful standards are:

A client-server architecture that is made up of clients, servers, and resources, with requests managed through HTTP.
Stateless client-server communication, meaning no client information is stored between GET requests, and each request is separate and unconnected. You can read the rest here at Redhat. But we are going to focus on these for now.

The Studio Ghibli Web API

The Studio Ghibli Web API contains a database of characters (species), places, and vehicles for all films produced by Studio Ghibli. Through its endpoints - links where you access the API functionality - you can get data from the API in stringified JSON format. The huge advantage of this format is, you can parse the data and manipulate it with code.

HTML Code

    <div class="titlebox">
        <h1>日本語タイトル</h1> 
        <select name="movietit" id="movietit" class="movietit">
            <option value="load">Loading ...</option>
            <option value="movie1">I am a Movie Title...</option>
        </select>
    </div>

    <div class="detailscontainer">
        <div class="descriptioncontainer" id="deets"></div>
    </div>

CSS Code

html {
    font-family: "Roboto Condensed" !important;
}

.titlebox{
    padding-top: 18px;
    padding-bottom: 28px;
    box-sizing: border-box;
    height: 120px;
    max-width: 669px;
    width: 55%;
    min-width: 128px;
    background-color: gray;
    margin: 0 auto;
    margin-top: 24px;

    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: space-evenly;
}

.titlebox h1 {
    font-size: 18px;
    letter-spacing: 1.69px;
    color: white;
    font-family: "Kiwi Maru" !important;
    font-weight: 400 !important;
    margin-block-start: 0px !important;
}

.titlebox select {
    cursor: pointer;
    font: 400 14px "Roboto Condensed";
    letter-spacing: 1.69px;
    width: 85%;
    height: 36px;
}


.detailscontainer{
    padding-top: 18px;
    padding-bottom: 28px;
    box-sizing: border-box;
    height: 469px;
    max-width: 669px;
    width: 55%;
    min-width: 128px;
    background-color: gray;
    margin: 0 auto;
    margin-top: 24px;

    overflow-y: scroll;
    overflow-x: hidden;

}

.descriptioncontainer{
    min-height: 669px;
    background-color: transparent !important;
    color:  white !important;
    height: auto;
    width: 96%;
    margin: 0 auto;

    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: space-evenly;

    position: relative;
}

.descriptioncontainer .items{
        width: 100%;
        font-size: 12px;
        min-height: 36px;
        letter-spacing: 1.69px;
}

JavaScript Code - Client Side

const localVar = {}
const detailsContainer = document.getElementById("deets");

window.onload = () => {
    fetchInfoWithFilter().then((ghibliApiObject)=>{
        //console.log(ghibliApiObject);
        localVar["cloudObj"] = ghibliApiObject;
        readStudioGhibliObject(ghibliApiObject);
    });

}




async function fetchInfoWithFilter () {

    var myRequest = new Request("https://ghibliapi.herokuapp.com/films?limit=250");

    const returnVal = await fetch(myRequest, {
      method: 'GET', 
      mode: 'cors', 
      cache: 'default',
      credentials: 'omit', 
      redirect: 'follow', 
      referrerPolicy: 'no-referrer'
    })
          .then(function(response) {
            if (!response.ok) {

              throw new Error("HTTP error, status = " + response.status);

            }

            return response.text();
          })
          .then(function(myBlob) {

            var cloudObject = JSON.parse(myBlob);


            return cloudObject;

          })
          .catch(function(error) {
            var p = document.createElement('p');
            p.appendChild(
              document.createTextNode('Error: ' + error.message)
            );
            document.querySelectorAll(".descriptioncontainer")[0].innerHTML = "";
            document.querySelectorAll(".descriptioncontainer")[0].appendChild(p);
          });
          return returnVal; 
  };


  function readStudioGhibliObject(ghibliApiObject) {
      const ghibliFilms = Object.entries(ghibliApiObject)
      const objectSize =  ghibliFilms.length;
      const itemsContainer = document.getElementById("movietit");
      itemsContainer.innerHTML = "";

     // console.log(ghibliFilms);
      //console.log(objectSize);

      for(i=0;i<objectSize;i++){
          let optionEle = document.createElement("option");
          optionEle.value = ghibliFilms[i][1].title;
          optionEle.innerText = ghibliFilms[i][1].title;
          itemsContainer.appendChild(optionEle);
      }

          upDateDescription("first");

      itemsContainer.addEventListener("input",()=>{
          upDateDescription("update");
      })


  };


  function upDateDescription(context) {
      detailsContainer.innerHTML="";
      if(context==="first"){
          let myKey = document.createElement("p");
          myKey.className = "items";
          let objectEntries =  Object.entries(localVar.cloudObj[0]);
          let objectKeys = Object.keys(localVar.cloudObj[0]);
          document.querySelectorAll("h1")[0].innerHTML = localVar.cloudObj[0].original_title;


          for(i=0;i<objectEntries.length;i++){
              let copyKey = myKey.cloneNode(true);
              copyKey.innerHTML = objectKeys[i].toUpperCase()+" : "+objectEntries[i][1];
              detailsContainer.appendChild(copyKey);
          }
      }else{
          let thisFilmObject = searchForFilm(document.getElementById("movietit").value);
          let myKey = document.createElement("p");
          myKey.className = "items";
          let objectEntries =  Object.entries(thisFilmObject);
          let objectKeys = Object.keys(thisFilmObject);
          document.querySelectorAll("h1")[0].innerHTML = thisFilmObject.original_title;


          for(i=0;i<objectEntries.length;i++){
              let copyKey = myKey.cloneNode(true);
              copyKey.innerHTML = objectKeys[i].toUpperCase()+" : "+objectEntries[i][1];
              detailsContainer.appendChild(copyKey);
          }

      }

  }


  function searchForFilm(searchQuery){
      let obj = {"Not":"Found"};

      for(i=0;i<localVar.cloudObj.length;i++){
          if(searchQuery===localVar.cloudObj[i].title){
              obj = localVar.cloudObj[i];
          }
      }

      return obj;
  };

How Does It Work?

You can preview the setup here.
In our HTML, we have two containers, one for the film title in Japanese and the dropdown you can pick names from to view details. And the other is where we'll display film details.

Next, we have to find out how the Studio Ghibli API works. You can view full documentation here but in summary:

There are five main endpoints - access links - one each for films, people, locations, species, and vehicles.
Through the endpoints, you can search things by id, set response limits - how big the JSON you get should be - and more. But for our purposes, we are simply accessing the film endpoint and setting a limit of 250 so we can get all films - they have 21 films in the database.

In our JavaScript, we have one important constant called localVar. We create this as a global variable so later we can update it with data from the Studio Ghibli JSON we'll receive from the endpoint. The rest of the functionality is spread out over the functions as follows:

window.onload delays our JavaScript from running until all HTML files and CSS files have been loaded, this is especially important as we have to provide support for Japanese characters via special fonts.
fetchInfoWithFilter is based on JavaScript's fetch. It allows us to send and receive HTTP requests, the primary method of communications for Web APIS.
readStudioGhibliObject fills our dropdown with the names of all the films and it adds an input event listener to the dropdown so every time you change the movie name, the details will be updated.
updateDescription is run in two contexts. First, when the data is received for the first time. It'll set the first entry of data as the default film on our dropdown, and it'll update the description. Secondly, every time you change the name in the dropdown, it'll run to update the description and the title of the film in Japanese. Enjoy playing around!

ismailisimba / studioghibli

An example of how to use a RESTful WEB API using the Studio Ghibli API

Photo credit: BrickinNickon Visualhunt.com

Making Horizontal Mouse Scrolling With HTML, CSS, and JavaScript

Ismaili Simba — Tue, 10 Aug 2021 07:50:12 +0000

I recently came across a beautiful html5 template featuring horizontal mouse scrolling here. I'm not sure how they do it, so instead of trying to find that out, like any self-respecting coder I decided to come up with my own "better way".

You can judge the results for yourself here!.

Now with the inspirational story out of the way, here's how I did it. View the sample here.

First, the HTML. You'll need an outer container element, an inner container element and then your items will go in this inner container.

HTML Code

  <div class="outercontainer" id=""scrl1>
      <div class="innercontainer">
           <div class="item">I</div>
        <div class="item">Used</div>
        <div class="item">To</div>
        <div class="item">Rule</div>
        <div class="item">The</div>
        <div class="item">World</div>
        <div class="item">Seas</div>
        <div class="item">Would</div>
        <div class="item">Rise</div>
        <div class="item">When</div>
        <div class="item">I</div>
      </div>
    </div>

Second, the CSS. The important thing to note here is if the viewport is scrollable, then by default whenever the wheel is scrolled, the page will scroll vertically. To prevent this, just make sure all content fits within the viewport vertically. Then, we make the outer container scrollable and the inner container non scrollable. We also hide the scrollbar so you can't scroll manually unless its a touch device.

CSS Code

  .outercontainer{
      width: 96%;
      background-color: black;
      min-height: 96vh;
      margin: 0 auto;
      overflow-x: scroll;
      position: relative;
      scrollbar-width: none; 
      -ms-overflow-style: none;
    }
    .outercontainer::-webkit-scrollbar { display: none;}

    .innercontainer {
      width: fit-content;
      box-sizing: border-box;
      padding: 24px 48px;
      height: 85vh;
      background-color:  black;

      display: flex;
      flex-flow: row;
      justify-content: flex-start;
      align-items: center;
    }

    .item {
      width: 269px;
      height: 96%;
      background-color: white;
      box-sizing: border-box;
      padding-top: 6.69%;
      margin-right: 24px;
      text-align: center;
      font-size: large;
      font-weight: bold;
    }

    .item:last-child{
      margin-right: 0px;
    }

Finally, the Javascript. We bundle all our functions inside window.onload to ensure our HTML is loaded before the script starts. We then assign the document's onwheel event to our customScrollFunction. Every time the event happens (a wheel scroll), our function is called. Then we read the event's deltaY value. If this value is negative the wheel is going down and if its positive then the wheel is going up. We use a simple if to scroll our container left or right accordingly.

JavaScript Code - Client Side

  window.onload = () => {
        document.onwheel = customScrollFunction;

        function customScrollFunction(event){

    let deltaY = event.deltaY;
    let deltaYSign = Math.sign(deltaY);

    if(deltaYSign==-1){
        document.getElementById("scrl1").scrollBy({
            top: 0,
            left: -169,
            behavior: 'auto'
          });

    }else{ 
        document.getElementById("scrl1").scrollBy({
            top: 0,
            left: 169,
            behavior: 'auto'
        });
    }

}
      }

Deploying Pure JavaScript Full-stack Web Apps for Free Using Google Console(Optional) and Apps Script

Ismaili Simba — Wed, 02 Jun 2021 06:40:32 +0000

A few months ago I had just completed Codecademy's Full Stack Developer course and was looking around for ways to deploy JavaScript apps on the web. The first solution I found was NodeJS. But at the time I could not find a service that offered NodeJS deployment for free. I know that at the moment, at least Google Cloud provides NodeJS deployment on their free tier. And there may be other services too.

Another reason I prefer vanilla JS to NodeJS or any framework is its simplicity, flexibility, and reliability. I didn't want to worry about updated node modules and framework documentation. MDN is enough for me, you can keep your frameworks for thee!

Anyway, at the time, my search continued. I found out that the majority of services offering free hosting or free servers only provided full or most features for free on PHP based servers. I had not yet learned PHP. I needed a service that allowed the features listed below for free, or for free up to a certain amount of traffic on servers running JavaScript. I reasoned that the best way to practice is to do things yourself in the real world. So if I could get these features to start with, I would have a much better chance of improving and competing in the market later.

The features I needed were:

A VM or actual computer so I can execute JavaScript code on the server-side.
A permanent database I can write to and read data from in JSON format.
Support of HTTP methods PUT, POST, GET and DELETE.
Support of URL parameters
File storage - but at the time this wasn't necessary, I had other options.
Access to external services, especially CDN JavaScript libraries - my preferred alternative to Node modules.

My search brought me to Google Apps Script.

What Makes Apps Script Work For Free Vanilla JavaScript Deployment?

Apps Script is a scripting platform developed by Google for lightweight application development in the Google Workspace platform. Scripts are created as part of an Apps Script project. See the figure below for how a basic HTTP GET request would work in an Apps Script setup.

An Apps Script project is basically a collection of JavaScript and HTML files. When deployed as a web app, every time a user visits or makes an HTTP request to the app, these files will be executed. In Apps Script, script files have an extension of gs instead of js. And the Code.gs file is the first file executed by the V8 JavaScript engine every time the web app is run.

When a GET request is initiated on the web app, the inbuilt function doGet is run. The doGet function has to be defined in the Code.gs file. doGet is passed the request event whose properties are defined here. doGet along with another inbuilt function, doPost are the only functions that will be called when an HTTP request is sent to your web app. doGet responds to HTTP GET and doPost responds to HTTP POST.

Inside the doGet, you can read the event object and based on parameters and other properties, perform a specific set of JavaScript functions server side. In your custom functions, you can import JavaScript libraries or other data from external services using Apps Script's URLFetchApp. Alternatively, you can just copy the JS files you want to include in your project and add them as .gs files in your Apps Script project.

Google allows you up to 6 hours of script runtime per day on a free account. In my opinion, that is plenty to get a project in the real world off the ground. That is, off the ground to earn enough to pay for services.

To get a clearer picture, let's take a walk through my first real-world project. Below are screenshots of a full-stack website I made for a local swimming club. The site allows log in via Google, uploading pictures, posting stories with full HTML support, and updating some front-end site details - addresses, locations, contacts e.t.c. You can go through the code here.

So, let's see how I'm implementing each of the features I listed above.

A VM or actual computer so I can execute JavaScript code on the server-side.

Apps Script is basically just a V8 engine hooked to an endpoint. I'm able to write pure JavaScript server-side, albeit with some limitations. I do have the added advantage of being able to access Google services directly from Apps Script.

A permanent database I can write to and read data from in JSON format.

Right now, I'm using Google Sheets as my database, and it's doing pretty good! See waterfall test results below (takes about 4 seconds to finish). But, from Apps Script you can hook up to Big Query and other various database solutions available in Google Cloud. Apps Script itself serves the responses a stringified JSONs.

Support of HTTP methods PUT, POST, GET and DELETE, and URL Parameters.

Apps Script does support URL parameters, but it only supports HTTP GET and HTTP POST. Depending on the database solution you end up using, you'll have to write your own custom PUT and DELETE server-side based in url parameters.

File Storage

Apps Script allow you to connect to external services through an inbuilt function that functions very similarly to JavaScript's fetch. This allows you to theoretically connect to services like OneDrive and other storage solutions as well. One limitation is, Apps Script is designed to deal with text data mostly. So everything you pass through it has to be converted to text first. Right now my implementation is; I just have it hooked to Google drive. On uploading, they are parsed as a base64 string, only being reconverted when they are being saved to Google Drive. The same thing happens on download, they're read as base64 string from Google Drive, then reconverted to their appropriate format client-side.

Conclusion

Apps Script is a pretty good alternative for server-side JavaScript deployment. I would recommend it to anyone who loves coding in pure JavaScript, but I'd recommend it more for learning or making/testing small-scale apps. There's certainly a lot of limitations compared to something like NodeJs + Docker or even NodeJS + Google Console. But in my opinion, being able to set up web apps quickly and reliably in pure JavaScript is a pretty compelling advantage.

Anyway, let me know what you think of all this in the comments.

How To Make A Simple Captcha Engine Using Google Sheets/Apps Script

Ismaili Simba — Thu, 25 Feb 2021 17:12:48 +0000

As I was finishing up a recent website project I realized that the "message us" form I had set up did not have a captcha. Being that it was also tied directly to a cloud function that immediately sends an email, I just did not feel comfortable leaving it that way.

So, I came up with a simple captcha engine. The captcha works by asking you to provide a simple answer to an additional question. To fool the bots and computers, the numbers are replaced by images of the numbers with some random lines scribbled in the background. You can view the images I'm using here. The captcha box, simplecaptchamom, is the main container. It contains five boxes; Box 1 displays number 1, Box 2 the add symbol, Box 3 number 2, Box 4 the equal symbol, and Box 5 is the textarea where the user inputs their answer.

HTML Code

<div class="simplecaptchamom">
  <div class="captchaitems">
    <img>
  </div>
  <div class="captchaitems"> 
  </div>
  <div class="captchaitems">
    <img>
  </div>
  <div class="captchaitems">  
  </div>
  <textarea class="captchaitems" maxlength="2">
  </textarea>
</div>

CSS Code

body{
font-family: "Quicksand";
display: flex;
flex-flow: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
min-height: 1000px;
}

.simplecaptchamom{
display: flex;
position: relative;
width: 169px;
height: 69px;
background-color: white;
color: white;
flex-flow: row;
flex-wrap: nowrap;
justify-content: center;
margin-top: 20%;
align-items: center;
}

.captchaitems {
position: relative;
background-color: white;
color: black;
text-align: center;
font-weight: bold;
font-size: 18px;
width: 33px;
height: 33px;
margin: 3px 3px;
box-sizing: border-box;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.simplecaptchamom textarea{
width: 33px !important;
min-width: 33px !important;
}

.captchaitems img {
display: block;
position: absolute;
width: 100%;
height: 100%;
}

.captchaitems:nth-child(5){
overflow: hidden;
resize: none;
padding: 3px 3px 3px 3px;
box-sizing: border-box;
font-family: inherit;
font-weight: bold;
letter-spacing: .69px;
font-size: 16px !important;
scrollbar-width: none; 
-ms-overflow-style: none;
overflow-y: scroll;
}

textarea::-webkit-scrollbar { display: none;}

JavaScript Code - Client Side

let cloudObj = {};
let lelink = "https://script.google.com/macros/s/AKfycbyAl44CwyGcvrxb_YWYx0Fd2QKLjThO3WUNNo8Yg3W4P_YJDDEXSr9kOA/exec";
window.onload = () => {
    fetcher({},"first",firstDisp);
};


async function fetcher(data,action,funcAft){
    let temp = await getCaptchaObj(action,data).then(resObj=>{
      funcAft(resObj);
    })
}

async function getCaptchaObj(action,data){ 
    var myRequest = new Request(lelink+"?paraOne="+action);
    data = JSON.stringify(data);

    const returnVal = await fetch(myRequest, {
        method: 'POST', // *GET, POST, PUT, DELETE, etc.
        mode: 'cors', // no-cors, *cors, same-origin
        cache: 'default', // *default, no-cache, reload, force-cache, only-if-cached
        credentials: 'omit', // include, *same-origin, omit
        headers: {
            //'Content-Type': 'text/txt'
            // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        redirect: 'follow', // manual, *follow, error
        referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
        body:data // body data type must match "Content-Type" header
     }).then(function(response) {
                if (!response.ok) {  
                    throw new Error("HTTP error, status = " + response.status); 
                 }        
                return response.text();
             }) .then(function(myBlob) {        
                                let cloudObject = JSON.parse(myBlob);        
                                return cloudObject;  
                            }) .catch(function(error) {
                                                 let p = document.createElement('p');
                                                p.appendChild(
                                                    document.createTextNode('Error: ' + error.message)
                                                );
                                                document.querySelectorAll(".simplecaptchamom")[0].innerHTML = p.innerHTML;
                                            });
    return returnVal; 
};

function firstDisp(resObj){
    let captchaItemsCont = document.querySelectorAll(".captchaitems");
    let img1 = captchaItemsCont[0].querySelectorAll("img")[0];
    img1.src = `data:image/jpeg;base64,${resObj.ghh.l11}`;
    let img2 = captchaItemsCont[2].querySelectorAll("img")[0];
    img2.src = `data:image/jpeg;base64,${resObj.ghh.l12}`;

    captchaItemsCont[4].value = "?";
    captchaItemsCont[4].addEventListener("input",checkAnswer);

    captchaItemsCont[1].innerHTML = "+";
    captchaItemsCont[3].innerHTML = "=";
    cloudObj = resObj;
}


function checkAnswer(){
    let val = this;
    val.removeEventListener("input",checkAnswer);

    let myTimeOut = window.setTimeout(function(){  
        val = val.value;
        let obj = {};
        obj["one"] = val;
        obj["two"] = cloudObj.ghh.eqid;

        if(val.length>=1){
          fetcher(obj,"second",funcToHook);
        }

        window.clearTimeout(myTimeOut);
     },1000);
}

function funcToHook(resObj){
    let mom = document.querySelectorAll(".simplecaptchamom")[0];

    if(resObj.status==="pass"){
        mom.innerHTML = "";
        mom.style.backgroundColor = "green";
        mom.style.color = "white";
        mom.innerHTML = "Success!"

        let tempyTimy = window.setTimeout(function(){
        window.location.reload();
        window.clearTimeout(tempyTimy);
      },1690);
    }else{
        mom.innerHTML = "";
        mom.style.backgroundColor = "red";
        mom.style.color = "white";
        mom.innerHTML = "Failed!"

       let tempyTimy = window.setTimeout(function(){
       window.location.reload();
       window.clearTimeout(tempyTimy);
     },1690);
    }
}

When the page finishes loading, the function fetcher is called. This function accepts three parameters; parameter one is an object, parameter two is context, and parameter three is a function. Fetcher accepts two contexts, first and second. First for when the page has finished loading and you need a new equation - new images - to complete the captcha. Server-side, when we see first we will return images, when we see second, we'll check the answer and return a text response that says pass or fail based on the user's answer.

JavaScript Code - Server Side - Apps Script/Google Sheets

var ss = SpreadsheetApp.getActive();
var timeZone = ss.getSpreadsheetTimeZone();
var timestamp4id = Utilities.formatDate(new Date(), timeZone, "dd-MM-yyyy-HH-mm-ss");
let sheet = ss.getSheetByName("sessions");

function doPost(e){
  let paraOneVal = false;
  let basicGetResponse = false;
  paraOneVal =  e.parameters.paraOne;
  paraOneVal = paraOneVal.toString();

  if(paraOneVal==="first"){
    basicGetResponse = makeCaptchaObj();
  }else if(paraOneVal==="second"){
    basicGetResponse = JSON.parse(e.postData.contents);
    basicGetResponse = checkAnswer(basicGetResponse);       
  }

 basicGetResponse = JSON.stringify(basicGetResponse);
 basicGetResponse = ContentService.createTextOutput(basicGetResponse).setMimeType(ContentService.MimeType.JAVASCRIPT);
 return  basicGetResponse;
}

function makeCaptchaObj(){
  let captchaObj = {};
  captchaObj["num1"] = Math.floor(Math.random() * (5 - 1) + 1);
  captchaObj["num2"] = Math.floor(Math.random() * (5 - 1) + 1);
  captchaObj["symbol"] = Math.floor(Math.random() * (1 - 0) + 0);
  captchaObj["ans"] = "0";
  captchaObj["ghh"] = 
  startSession(captchaObj.num1,captchaObj.num2,timestamp4id);
  captchaObj.num1 ="what";
  captchaObj.num2 ="whaty";
  return captchaObj
}

function startSession(num1,num2,timestamp4id){
  let obj ={k:"dd"};
  obj["eqid"] = filldeEq(num1,num2,timestamp4id);
  num1=num1+".jpg";
  num2=num2+".jpg";

  var folders = DriveApp.getFoldersByName("captchav1");
  while(folders.hasNext()){
       let folder = folders.next();
       let files1 = folder.getFilesByName(num1);
       let files2 = folder.getFilesByName(num2);

            while (files1.hasNext()) {
               var file = files1.next();
               var blob = file.getBlob();
               obj["l11"] = Utilities.base64Encode(blob.getBytes());
              }

            while (files2.hasNext()) {
               var file = files2.next();
               var blob = file.getBlob();
               obj["l12"] = Utilities.base64Encode(blob.getBytes());          
            }      
     }
      return obj;
};

function filldeEq(num1,num2,timestamp4id){  
  let row = sheet.getLastRow();
  row = row+1;
  sheet.appendRow([timestamp4id+row, num1, num2,"plus",(num1+num2),]);

  return timestamp4id+row;
}

function checkAnswer(basicGetResponse){
let id = basicGetResponse.two;
let answer = basicGetResponse.one;
let objy = {};

let rangeFound = sheet.createTextFinder(id).matchCase(false).findNext();
let rowIndex = 0;

if(rangeFound!=null){
     rowIndex = rangeFound.getRowIndex();
     let cloudansw = sheet.getRange(rowIndex,5).getValue();
         cloudansw = parseInt(cloudansw,10);
         answer = parseInt(answer,10);

         if(cloudansw===answer){
             objy["status"] = "pass";
           }else{
             objy["status"] = "fail";
             }
          }else{
             rowIndex = "Not Found Error!";
             objy["notf"]="ntf";
          }
return objy;
};

One thing to note here is, Apps Script can be used independently for this without Google Sheets. I prefer to use them in tandem because Sheets provide an easy way for me to view the data I'm working with and it's not too slow for my use-case.

To set up the server, create a Google Sheet Spreadsheet then click Tools>Script Editor. To set up sing Apps Script directly, go to this link and create a new project.

Another advantage of creating the script via sheets is when you need to access Google Services (Gmail, Forms, Docs, Drive e.t.c), you can easily turn them on in the script editor itself. If you create the script separately, you might have to transfer it to Google Console and turn on the services there.

The script itself contains an inbuilt doPost(e) function that acts as the main function. When this function is included and the script is published as a web app, an HTTP POST request sent to the script will run this function. So every time fetcher is run, this function is called.

When it is called, it will read our context - first or second - which is passed as a parameter - paraOne - in the POST request. If the context is first it will run the function makeCaptchaObj which generates two random numbers between 1 and 5. This function then searches our Google Drive for the folder that contains our captcha images. It then checks inside the folder for images corresponding to the generated numbers. It reads these images as blobs and converts them to a base 64 string.

On our spreadsheet, in the sheet "sessions", the makeCaptchaObj function will create a new row adding the generated numbers and their answer. It will then create a unique id for this session.
The unique ID and the base 64 string of the images are then sent back to the client-side.

When the paraOne reads second, doPost(e) will read the object passed as data in the body of the POST request. This object contains the answer and unique ID sent back from the client side.

Finally, the function checkAnswer will read the unique ID and compare the submitted answer to the answer on the sheet. Then it'll send a pass or fail back to the client-side.

You can test the captcha here.

How To Rename A Bunch Of Files In Google Drive Using Google Sheets And Apps Script

Ismaili Simba — Tue, 15 Dec 2020 18:48:25 +0000

Recently, I had to convert about 1000 files worth 20GB into smaller jpegs totalling about 40MB. I then had to rename all these files to specific indexes tied to the individuals in those photos. Here is my frankeisteinish way of how to do something like that!

First, we convert the photos. I did this using Photoshop's feature; Actions! It allows you to record a set of actions performed on a single photo, then replicates those actions across a whole folder of photos. I found this sweet article that explains that in detail.

Now, with 40MB, 1000ish files in hand, it's time for some JavaScript magic. See, the problem I had was, the photos, while having unique names, thankfully! they were mixed up. Let's say, photos of the pcmasterrace were mixed with consolepeasants, but I only had to pull out and rename the consolepeasants photos. But when given to me, they were all mixed up.

Here, Google Sheets enters the chat. With it's multitude of formulas I was able to filter the sheets accompanying these photos to obtain a list with just; The names, their respective indexes, and their respective current photo name, something that looks like this:

First Name   Last Name   Index    CurrentPhotoName
Adam         Somebody    0A1      Photo0001.jpg
Catherine    LeGreat     0A2      Photo0002.jpg
Angels       R'Dust      0A3      Photo0003.jpg
...

In case you don't already have an assorted list of the files, don't worry, all is not lost. With the files total size so small, we can just dump them all in a Google Drive folder and deal with them there using JavaScript and some Apps Script functions.

Once you have created a Google folder and dumped all your photos in it, create a new Google Sheet Doc. Once it's finished loading, click tools then script editor. Rename and save the resulting Apps Script file.

For this demo, we've named our Google Sheet spreadsheet, the Google Drive folder and the Apps Script file all the same name, renameSumFilesSheet.

Now, we're ready to code. First, let's add a way to control the script, we'll use the inbuilt onOpen method to create a custom menu on our sheet.

The code below creates a custom menu with two buttons, one will fetch file names form our Google Drive folder when clicked. The other will use values from the CurrentPhotoName column, search through the folder, then rename the files it finds with values from the column Index. For this example, we are going to paste the name we fetch in a separate sheet because the expectation is, you will clean your data using whatever Google Sheet functions suit you.

function onOpen() {
  var ui = SpreadsheetApp.getUi();
  // Or DocumentApp or FormApp.
  ui.createMenu('Custom Menu')
  .addItem('Fetch File Names', 'fetchFileNamesFunction')
  .addSeparator()
  .addItem('Rename Files', 'renameFilesFunction')
  .addToUi();
}

Result:

Before we create our functions, there are some variables we must define. The name of our folder and the instance of our sheets (we've created two, data and roughsheet).

let ourSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
let roughSheet = ourSpreadsheet.getSheetByName("roughsheet");
let dataSheet = ourSpreadsheet.getSheetByName("data");
let folderName = "renameSumFilesSheet";

See, the beauty of Apps Script is, if you put your variables at the beginning of the Code.gs file, they will be available to every function, in every file, same goes for functions created in other files. So, throughout the demo, any new important variable we create, we'll just add to that list.

Now, let's make take a look at our fetch names function.

function fetchFileNamesFunction() {

  var folders = DriveApp.getFoldersByName(folderName);
  var folder = folders.next();
  var myFileIterator = folder.getFiles();
  var fileNumber = 1;

  while(myFileIterator.hasNext()){
    var currentFile = myFileIterator.next();
    var currentFileName = currentFile.getName();
    roughSheet.appendRow([
      fileNumber,
      currentFileName]);
    fileNumber++
  }

}

JavaScript
This functions simply access our Google Drive, searches for the folder name we've given it, it then goes through all the files in the folder, gets their names, then along with a unique temporary index are appended as new rows in our roughsheet.

Depending on your use case, cleaning the data here is up to you. But as I've said, there's a lot of Google Sheets functions to help you.

So, we'll skip to the part where you have your data cleaned and arranged in the data sheet like this:

Now, for the pièce de résistance, the function that renames the files.

function renameFilesFunction() {

  var folders = DriveApp.getFoldersByName(folderName);
  var folder = folders.next();
  var lastRow = dataSheet.getLastRow();
  var oldNamesArr = [];
  var newNamesArr = [];

  //you will have to edit these variables
  var columnOfOldNames = 4;
  var columnOfNewNames = 3;
  //you will have to edit these variables

  oldNamesArr = dataSheet.getRange(2, columnOfOldNames, lastRow-1).getValues();
  newNamesArr = dataSheet.getRange(2, columnOfNewNames, lastRow-1).getValues();

  for(let i = 0; i < oldNamesArr.length ; i++){

    var myFileIterator = folder.getFilesByName(oldNamesArr[i]);

    while(myFileIterator.hasNext()){
        var currentFile = myFileIterator.next();
        currentFile.setName(newNamesArr[i]);  
    }

      } 

}

The only part of this function you'll have to edit before using is commented. columnOfOldNames is the index of the column were we have our current photo names in the data sheet. columnOfNewNames is the index of the column with the new names. For sheets, row and column index are counted from one. So, index of row 1 is 1, 2 is 2, 3 is 3 and so forth. And column A is 1, B is 2 and so on.

You can make a copy of the final sheet for your use here

Happy renaming a bunch of files!