Mastering Low-Code Image Workflows with Pipedream: A Step-by-Step Guide

Introduction

Pipedream is a dynamic integration and automation platform tailored for developers aiming to connect various web applications without delving deeply into complex coding. The platform excels in "low-code" operations, enabling users to deploy pre-built components for routine tasks while offering the flexibility to insert custom scripts for more specialized needs. This guide will walk you through automating intricate workflows, such as document handling, online file storage management, and advanced image analysis using artificial intelligence—all with Pipedream.

In today's fast-paced digital world, automating routine tasks can significantly enhance efficiency and reduce human error. This guide focuses on automating the creation of draft commercial offers for moving companies—a process that typically demands substantial manual effort and time. By leveraging AI-powered image recognition and the capabilities of low-code automation through Pipedream, moving companies can instantly generate preliminary cost estimates based on client-submitted photographs. This functionality not only improves customer service but also streamlines internal processes, potentially providing businesses with a competitive advantage.

Sample Workflow: Automating Commercial Offer Drafts

Motivation

Estimating costs for services, especially those involving variable factors like household moving, can be cumbersome. Traditionally, moving companies require extensive item lists from customers to provide even a rough estimate, which can hinder customer engagement. This workflow automates the estimation process using photos provided by clients, leveraging AI to quickly identify and list items. This rapid response can prevent customers from turning to competitors and enhance operational efficiency by reducing the workload on staff.

Description

We will create a workflow that performs the following steps:

Monitor a Google Drive Folder: Automatically detect new photos uploaded to a designated folder. These photos should contain images of furniture and household items to be moved.
Process Images with AI: Use an AI-powered recognition API to analyze the photos and list identifiable items along with their quantities.
Generate Preliminary Offers: Create a new Google Spreadsheet document and populate it with the data obtained from the AI analysis to draft a preliminary commercial offer.

Step-by-Step Guide to Implementing the Workflow

In this tutorial, we will guide you through setting up a sample workflow using Pipedream's low-code platform. This workflow leverages the following applications and actions to automate the process seamlessly:

Google Drive: Used for file management, specifically for storing and monitoring new photo uploads that will trigger the workflow.
API4AI: Utilized for its advanced capabilities in recognizing and quantifying furniture and household items within photos.
Google Spreadsheets: Employed for generating new documents that will house the preliminary data extracted and computed from the images.
Custom Code Blocks: These will integrate and automate specific actions within the workflow for enhanced functionality.

Please ensure you have an active Pipedream account to implement this workflow. If you haven't registered yet, sign up at Pipedream to get started. This account will allow you to access all necessary resources and deploy the workflow smoothly.

Step 1: Set Up a Google Drive Folder

To start with the Pipedream workflow, your first task is to create a designated folder in Google Drive named "Incoming Photos." This folder will be monitored by the workflow to detect new uploads. Here’s how to set it up:

Personal Google Drive Users: Create a new folder in your existing Google Drive account and name it "Incoming Photos."
Google Workspace Users: For those with a corporate account, you can either create a standard folder in your Drive or set up a Shared Drive for enhanced access and collaboration across your team.

This folder will serve as the entry point for the photos that will trigger the automated workflow. Ensure it is easily accessible and properly configured to accept file uploads.

Step 2: Create a Pipedream Workflow

To start your automated workflow:

Navigate to the Resources Tab: In the Pipedream dashboard, locate and click the "New" button within the "Resources" tab.
Name Your Workflow: Assign a meaningful name to your workflow that reflects its purpose.
Configure Workflow Parameters: Optionally, customize various parameters to optimize the workflow. These adjustments can include setting the memory limit, enabling automatic retries on errors, and managing cold start behaviors. While many options are available under the free plan, some features might require a paid subscription. For simplicity, we will proceed with the default settings in this tutorial.

Step 3: Configure the "New Files" Trigger

To enable our workflow to automatically respond to new file uploads, we will integrate a trigger using the Google Drive app within Pipedream.

Add the Google Drive Action:

Click the "+" symbol in your Pipedream workflow editor.
Search for and select the "Google Drive" app.
From the list of actions, choose "New Files (Instant)" to monitor new file uploads in real time.

Authenticate Your Google Drive Account:

After adding the Google Drive action, you will be prompted to authenticate with your Google account.This step ensures that Pipedream can access the Google Drive where the workflow will operate.
Follow the authentication instructions in the popup window. Make sure to grant all necessary permissions by checking the "Select all" option.

Configure Trigger Properties:

The "New Files" trigger requires you to specify which "Drive" and "Folders" it should monitor. It's essential to select the correct values to ensure the workflow functions as intended.

For this tutorial, choose "My Drive" and the "Incoming Photos" folder.
While "My Drive" is typically the default option, explicitly setting it helps avoid any potential confusion.

By properly configuring this trigger, your workflow will be ready to detect any new photos uploaded to the specified folder instantly, setting the stage for subsequent automation steps.

Step 4: Validate the Trigger

To ensure your trigger is set up correctly and operational, it's important to perform a test:

Upload Test Files: Drag and drop a few photos into the "Incoming Photos" folder on your Google Drive, which is being monitored by your Pipedream trigger.
Verify the Trigger Response: Observe the behavior of the trigger in Pipedream. If everything is configured correctly, the trigger should detect the new file event and activate the associated actions within your workflow.

This testing step is crucial to confirm that the workflow will function as expected when new files are uploaded, preventing any disruptions in your automated processes.

Step 5: Filter for Image Files

Our workflow is intended to process image files exclusively. To prevent other file types from disrupting the workflow, it's advisable to add a safeguard that stops the process if a non-image file is uploaded. While this step is optional, it is highly recommended to maintain the workflow's integrity.

Here's how to add a filter to verify the file type:

Identify the MIME Type:

After successfully testing the "New Files" trigger, navigate to the "Exports" tab of the trigger's output.
Expand the output details to find the "mimeType" property of the uploaded file. This property will be used to verify the file type.

Add Custom Code Action:

Below the "New Files" trigger in your workflow, add a "Run Custom Code" action.
Pipedream supports several programming languages for custom code; we'll use Node.js for this example. The following script checks the MIME type of the file against accepted image formats (JPEG and PNG) and terminates the workflow if the file is not an image:

export default defineComponent({
 async run({ steps, $ }) {
   // Get mime type of the uploaded file using previous step data.
   // Abort workflow execution if uploaded file is not a PNG or JPEG file.
   const mimeType = steps.trigger.event.mimeType;
   if (mimeType.match(/image\/(jpeg|png)$/) === null) {
     $.flow.exit(`${mimeType} is not acceptable. Abort workflow execution.`);
   }
 }
})

Step 6: Download the Image File

To proceed with image analysis, the image file needs to be downloaded to a local storage area within the Pipedream execution environment. Pipedream provides a certain amount of storage for this purpose, with the extent varying based on your subscription plan.

Setting Up the File Download:

Add the Download Action:

In your workflow, add a new step by selecting the "Google Drive" app, then choose the "Download File" action.
Like the "New File" trigger, this action requires authentication with your Google account. Ensure you authenticate it to access the necessary files.
Use the same Google Drive as configured in the "New File" trigger for consistency.

Configure the File and Destination Path:

You need to specify which file to download and where to save it. For an automated workflow, these values should be dynamically set based on the files triggering the workflow.
Set the "File" property to {{steps.trigger.event.id}} to dynamically fetch the file ID from the previously triggered event.
Specify the output path for the downloaded file in a temporary directory. Use the path /tmp/{{steps.trigger.event.name}} to maintain the original file name for simplicity and clarity.

Test the Configuration:

Once you have configured the download parameters, conduct a test by uploading a new photo to the designated Google Drive folder. Verify that the file is correctly downloaded to the specified path in your Pipedream workspace.

Step 7: Acquire an API Key for Image Recognition

For this workflow, we will use the "Furniture & Household Items Recognition" API provided by API4AI, a prominent provider of AI-driven cloud-based solutions. This API will analyze images to identify and quantify items, facilitating automatic estimation processes.

Accessing the API:

Explore the API: Before integrating the API into your workflow, you can explore its capabilities without registration here.
Register and Obtain an API Key:

Visit RapidAPI and register for an account at RapidAPI if you haven’t already. RapidAPI is a comprehensive API marketplace hosting various APIs for different purposes.
Subscribe to the Furniture & Household Items Recognition API provided by API4AI.
Navigate to the API’s endpoint list.
Your API Key will be displayed under the "Header Parameters" section as X-RapidAPI-Key.
For more information on how API keys function and why they are necessary, refer to RapidAPI's blog article: What is an API Key?.

Subscription Plans:
API4AI offers both free and paid subscription plans. For trial purposes and basic implementation within Pipedream, the free plan is usually sufficient. It provides a reasonable number of credits that allow you to test and deploy your workflow without immediate investment.

Step 8: Analyze the Image

With our workflow set up to automatically detect and download new photos from Google Drive into the Pipedream execution environment, we are now ready to add image analysis functionality using the "Furniture & Household Items Recognition" API from API4AI. Ensure you have subscribed to this API on RapidAPI and obtained your API key.

Adding the Image Recognition Action:

Insert the API Action: Add a new step to your workflow as done previously. In the app search dialog within Pipedream, type "api4ai" and select the "Furniture & Household Item Recognition" action.
Configure the API Key: Input your API key in the "Api4ai Account" section to authenticate the action. This key is the one you obtained from RapidAPI.
Set the Image Path: Specify the path where the downloaded image is stored. Use the dynamic path constructed from the previous "Download file" action: /tmp/{{steps.download_file.$return_value.name}}.

Test the Image Recognition: Click the "Test" button to run the image recognition. This step is crucial as it verifies that the API correctly analyzes the image and returns the expected data.

By integrating and setting up this API, your workflow will be able to analyze uploaded images for furniture and household items, making it a vital component of our automated process. This function enhances efficiency and ensures the data needed for subsequent steps is accurate and reliable.

Step 9: Prepare a Spreadsheet Template

Creating a visually appealing and informative offer document is crucial for making a professional impression. We'll use a Google Spreadsheet as a template that can include elements like your company logo, contents, and other branding essentials.

Setting Up the Document Template:

Access the Template: Use our sample template available on Google Drive. Click the link to view and make a copy of it to your Google Drive. Alternatively, create your own custom template that better fits your company’s branding and reporting style.
Template Location: While you can store this document in any Google Drive folder, we recommend keeping it in the same drive as the input photos for simplicity. This reduces the complexity of managing multiple storage locations and streamlines the workflow.

Step 10: Duplicate the Template for Each Client

To manage each new incoming photo, we'll automate the creation of individual spreadsheet documents based on the template prepared in the previous step. This involves setting up an action to duplicate the template for each photo processed, ensuring that each new photo upload triggers the creation of a new, pre-formatted document.

Configuring the Copy File Action:

Add the Copy File Action: In your Pipedream workflow, add a "Copy file" action from the "Google Drive" app. This action will duplicate the template spreadsheet.
Set the File Property: Specify the template spreadsheet you prepared. Instead of needing the exact file ID, you can select the template from a dropdown list in the user interface. This visual selection process simplifies the configuration.

By automating the duplication of the spreadsheet template, each new photo upload will result in the creation of a new document, ready for further processing and client use.

Step 11: Prepare Rows to Add to the Spreadsheet

To populate our spreadsheet with data, we need to format the output from the image recognition step appropriately. This involves custom coding to transform the raw data into a structured format that can be easily inserted into the spreadsheet.

Setting Up the Custom Code Action:

Add the Custom Code Action: Insert a "Run Custom Code" action in your workflow and name it "prepare_rows". This step will handle the data preparation for spreadsheet entry.
Code Implementation: Use the following Node.js script to structure the data into rows that the spreadsheet can accept. Each row will contain the item name, quantity, calculated price, and subtotal:

export default defineComponent({
 async run({ steps, $ }) {
   // Init array of rows to return.
   const rows = [];
   // Populate rows.
   const items = steps.furniture_and_household_item_recognition.items;  // alias
   for (const [item, qty] of Object.entries(items)) {
     const price = item.length * 2;  // for simplicity we set "price" as twice number of chars in item name
     const subtotal = qty * price;
     rows.push([item, qty, price, subtotal])
   }
   return rows;
 },
})

Explanation of the Code:

The script begins by initializing an array named rows that will store each entry for the spreadsheet.
It retrieves the items identified by the furniture_and_household_item_recognition step.
For each item, the script calculates the price as twice the length of the item's name (a simplified pricing model), computes the subtotal, appends the data as a new row in the rows array. In a real-world application, prices would typically be retrieved from a database reflecting current rates and inventory. However, for the sake of simplicity and to keep this tutorial focused on the automation aspect, we're using a basic calculation for pricing.

Ensure to test this action to verify that the data formatting aligns with the needs of your spreadsheet. This ensures that when the data reaches the spreadsheet, it populates accurately and consistently.
By understanding this code, you can ensure that the data preparation step is correctly implemented and ready for seamless integration into your automated workflow.

Step 12: Insert Data into the Spreadsheet

With the data rows prepared from the image analysis, the final step in our workflow involves populating these rows into the newly created spreadsheet copy.

Configuring the Action:

Add the 'Add Multiple Rows' Action:In your Pipedream workflow, incorporate an "Add Multiple Rows" action from the Google Spreadsheet app. This action is designed to batch insert data rows into a spreadsheet, making it efficient for our needs.
Specify the Spreadsheet ID: Set the "Spreadsheet" parameter to use the ID of the spreadsheet that was duplicated earlier. This is dynamically sourced from the output of the "Copy file" action using the placeholder {{steps.copy_file.$return_value.id}}.
Define the Sheet Name: Explicitly specify the sheet name where the rows will be added. For this tutorial, we are using "Sheet1" as the target sheet.
Set the Rows to Insert: For the rows to be inserted, use the result from the "prepare_rows" action. Place the placeholder {{steps.prepare_rows.$return_value}} in the configuration to dynamically insert the processed rows.

By completing this step, you finalize the setup of your automated image workflow using Pipedream. This automation reduces manual data handling errors and increases efficiency, allowing for real-time updates and management.

Step 13: Deploy and Test the Workflow

With all components in place, your workflow is now fully assembled and ready for deployment. This final step ensures that everything functions as intended and that the automation provides the expected results.

Click the "Deploy" button to finalize your workflow settings. This action makes your workflow active and ready to monitor your Google Drive for new photo uploads.

Testing the Workflow

Upload a Test Image: To test the workflow, upload a new photo to the "Incoming Photos" folder in your Google Drive. This simulates real-world usage when a client submits a photo.
Monitor Workflow Activation: Once the photo is uploaded, Pipedream will automatically trigger the workflow. The processing time is generally brief, taking just a few seconds.
Verify the Outcome: Upon completion of the workflow, check the status in Pipedream. A successful execution will be indicated by the status "Success".

By performing these steps, you ensure that your workflow is functioning correctly and ready for real-world use.

Navigate to your Google Drive and locate the newly created or updated spreadsheet. Open the spreadsheet to verify that it contains all the expected information, correctly formatted based on the data derived from the uploaded image.

Conclusion

Congratulations! You’ve successfully set up a comprehensive low-code automated image workflow using Pipedream. This workflow automates the estimation process for moving services based on client-submitted photos, streamlining data management and significantly reducing manual input, thereby increasing efficiency.

Integrating AI with routine workflows can greatly enhance efficiency, reduce operational costs, and improve customer satisfaction. As digital transformation progresses, tools like Pipedream will become essential for innovation and business agility. Continue exploring Pipedream’s capabilities to discover additional workflows that can benefit your business.

Blog