Explore the GCP Vision API in a Svelte Web Application

A proof of concept showcasing the integration of the GCP Vision API into a Svelte single page web application.

Getting started

Install and Configure Cloud Vision API

• Follow the Vision API getting started instructions to set up your GCP environment

  • Ensure that you have successfully completed the following:
    • Have a new or existing GCP project with billing enabled
    • Have enabled the GCP Vision API
    • Installed and initialized the Google Cloud CLI
    • You do not need to grant and additional roles to your Google Account.

• Note: For this demo project you will be using your GCP user account for authentication, and we will not be using any of the Vision API client libraries.

• To validate you have everything setup correctly, from your Terminal issue the following curl command which sends a request to the Vision API to annotate the following image:

  

curl -X POST \
    -H "Authorization: Bearer "$(gcloud auth print-access-token) \
    -H "X-Goog-User-Project: $(gcloud config get project)" \
    -H "Content-Type: application/json; charset=utf-8" \
    https://vision.googleapis.com/v1/images:annotate \
    -d \
    '{
      "requests": [
        {
          "image": {
            "source": {
              "imageUri": "gs://cloud-samples-data/vision/eiffel_tower.jpg"
            }
          },
          "features": [
            {
              "type": "LABEL_DETECTION",
              "maxResults": 3
            },
            {
              "type": "OBJECT_LOCALIZATION",
              "maxResults": 1
            },
            {
              "type": "TEXT_DETECTION",
              "maxResults": 1,
              "model": "builtin/latest"
            }
          ]
        }
      ]
    }'

• The response back from this curl request is expected to be a JSON object containing the annotation results from the Vision API. If you receive any error messages, review the error response and revisit the setup instructions.

Download and configure the Svelte GCP Vision web application

• Clone this repository to your local workstation
  • From your Terminal: git clone git@github.com:Ben-Chapman/Svelte-GCP-Vision-API.git
• Ensure that you have the Node.js and the Node Package Manager (npm) packages installed:
  • macOS using Homebrew: brew install npm
  • Linux:
    • Debian/Ubuntu: sudo apt install npm
    • Arch Linux: sudo pacman -S npm
    • Fedora: sudo dnf install npm
  • To verify a successful Node.js and npm installation, the following commands should return a version number for both Node and npm:
    • echo -e "Node.js Version: $(node -v)\tnpm Version: $(npm -v)"
      • Any version number is expected to work for this project.
• Once Node and npm have been installed, install the Node.js packages needed to run this application:
  • cd Svelte-GCP-Vision-API/visionapp/
  • npm install

Run the Svelte GCP Vision app

• To run the application, ensure you're in the Svelte-GCP-Vision-API/visionapp directory and issue the following command:
  • npm run dev
• This process should complete in a few seconds, and when it has, visit http://localhost:5173 to see this application running on your local workstation.
• From the Svelte documentation:

  Running the dev script starts a program called Vite. Vite's job is to take your application's source files, pass them to other programs (including Svelte, in our case) and convert them into the code that will actually run when you open the application in a browser.

  Speaking of which, open a browser and navigate to http://localhost:5173. This is your application running on a local web server (hence 'localhost') on port 5173.

  Try changing src/App.svelte and saving it. The application will update with your changes.

That's it! You now have a copy of the Svelte GCP Vision app running. Try dragging and dropping an image onto the web page, and if everything is setup correctly, you'll receive the GCP Vision API results right in your browser.

Tips:

• If you're using Visual Studio Code, install the Svelte VS Code plugin, otherwise explore the other Svelte IDE integrations