Forem: Florian

How to Automate PDF Document Creation with an HTML Renderer

Florian — Fri, 18 Oct 2024 09:50:04 +0000

Automating document creation is a crucial feature for many SaaS products, whether to generate invoices, reports, or certificates. Using an HTML renderer, developers can convert dynamic HTML content into high-quality PDF documents or PNG images with just a few lines of code. In this guide, we will show you how to integrate ExoAPI's document creation capabilities into your SaaS product, saving time and effort.

Why Automate Document Generation?

Automating document creation allows businesses to:

Generate consistent, professional-looking documents at scale.
Save time by automating repetitive tasks like invoicing or report generation.
Improve accuracy by removing manual document creation, reducing the risk of errors.
Offer customers customized documents based on dynamic data (e.g., personalized reports).

Use Cases for Automated Document Generation

Here are a few practical examples where document automation capabilities can simplify your SaaS product workflows:

Invoicing Systems: Automatically generate PDFs of customer invoices based on order details. Example: After a customer places an order, dynamically generate a branded invoice PDF and email it to them.
Reporting Dashboards: Allow users to download reports as PDFs. Example: A SaaS product offering analytics can let users export their data as professional-looking PDF reports.
Certificates and Badges: Create downloadable PNG certificates or badges for course completions, events, or achievements. Example: An e-learning platform could automatically generate customized certificates for students upon completing a course.
Order Summaries for E-commerce: Automatically generate order confirmations or shipping labels in PDF or PNG formats. Example: After an order is placed, generate a shipping label as a PDF, ready for print.

Let's walk through how to set up automatic document generation using ExoAPI's HTML Renderer.

Prerequisite: Sign Up for ExoAPI

Visit ExoAPI and sign up for an account to obtain your API key.

1. Install the SDK:

npm install @flower-digital/exoapi-sdk

2. Create an Instance of ExoAPI:

In your JavaScript or Node.js application, initialize the ExoAPI with your API key:

import { ExoAPI } from "@flower-digital/exoapi-sdk";
const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

Basic PDF Generation Example

Now, let's look at a simple example of generating a PDF from HTML content. The following code snippet shows how to create a PDF document with basic styling:

import { ExoAPI } from "@flower-digital/exoapi-sdk";
import fs from "fs";

const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

async function htmlRenderer() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "pdf",
    });
    fs.writeFileSync("document.pdf", Buffer.from(await res.arrayBuffer()));
    console.log("PDF document generated successfully!");
  } catch (err) {
    console.error("Error generating PDF:", err);
  }
}

htmlRenderer();

How It Works:

The htmlRenderer() function sends an HTML string to ExoAPI, which processes it and returns a PDF document.
We save the PDF locally using Node.js's fs module, writing the file as document.pdf.
You can replace the HTML string with dynamic content or templates based on your application's requirements (e.g., customer details, order summaries).

Advanced PDF Customization

ExoAPI offers a variety of options to customize your PDFs. You can control the page size, margins, orientation, headers, footers, and even inject custom CSS for precise styling.

Here's an advanced example showing how to customize the PDF output:

async function generateAdvancedPDF() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="font-size:36px">Hello <b>world!</b></p>',
      format: "pdf",
      title: "Sample Document",
      pageSize: "a4",
      margin: "10mm",
      landscape: true,
      css: `
        body {
          font-family: Arial, sans-serif;
          font-size: 14px;
        }
        b {
          color: blue;
        }
      `,
      header: '<div style="background:grey; width:100%; height:30px; font-size:20px">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
      footer: '<div style="background:grey; width:100%; height:30px; font-size:20px">Page <span class="pageNumber"></span> of <span class="totalPages"></span></div>',
    });
    fs.writeFileSync("advanced-document.pdf", Buffer.from(await res.arrayBuffer()));
    console.log("Custom PDF document generated successfully!");
  } catch (err) {
    console.error("Error generating custom PDF:", err);
  }
}

generateAdvancedPDF();

Key Parameters:

title: The title of the PDF document, which will appear in the metadata.
pageSize: Defines the size of the PDF (e.g., A4, Letter, etc.). You can also set explicit dimensions using pageWidth and pageHeight.
margin: Sets uniform margins for the document, or use marginTop, marginLeft, etc., for more granular control.
landscape: Set to true for landscape orientation or false for portrait.
css: Custom CSS can be added to style the document's content.
header & footer: You can add headers and footers with placeholders for pageNumber, totalPages, and date.

Generating PNG Images

ExoAPI also supports generating PNG images from HTML content. This is useful when you need visual output, such as badges, certificates, or visual reports. Here's an example of how to generate a PNG image:

async function generatePNG() {
  try {
    const res = await exoapi.htmlRenderer({
      html: '<p style="padding:8px;font-size:36px">Hello <b style="color: green">world!</b></p>',
      format: "png",
      imageWidth: 120,
      imageHeight: 120,
    });
    fs.writeFileSync("image.png", Buffer.from(await res.arrayBuffer()));
    console.log("PNG image generated successfully!");
  } catch (err) {
    console.error("Error generating PNG:", err);
  }
}

generatePNG();

Customizing Image Dimensions:

The imageWidth and imageHeight parameters allow you to specify the size of the PNG image in pixels.
If imageHeight is not provided, it will automatically adapt to fit the content.

Get Started

ExoAPI's HTML Renderer makes document creation in SaaS products incredibly easy and customizable. With just a few lines of code, you can automate PDF and image generation, streamlining processes such as invoicing, reporting, and creating visually appealing documents. By integrating ExoAPI into your workflow, you can enhance your application's functionality while saving time on manual document creation tasks.

Try out ExoAPI today to see how it can simplify document creation and boost productivity in your SaaS applications. Check out the official ExoAPI documentation to explore more features and customization options.

AI-Powered Content Moderation in React Using Large Language Models (LLMs)

Florian — Fri, 11 Oct 2024 09:03:50 +0000

Content moderation is a critical requirement for any platform that allows user-generated content. The need to ensure that text such as comments and posts adhere to community standards and legal regulations is not only challenging but also time-consuming when done manually. AI-powered solutions, particularly those based on large language models (LLMs), can help automate and scale content moderation, making it more efficient and effective.

In this article, we will explore how to use AI-based content moderation with ExoAPI's SDK. We'll focus on how LLMs enhance content moderation and guide you through integrating ExoAPI into your project, using both backend and frontend components.

Why Use AI and LLMs for Content Moderation?

Traditional content moderation often relies on simple keyword filtering or human reviewers, both of which have significant limitations. AI-driven moderation, powered by large language models like ChatGPT, brings several advantages:

Contextual Understanding: Unlike keyword-based filtering, LLMs can understand the context of the content. For example, they can differentiate between phrases used in harmless contexts (e.g., “kill the game”) and genuinely harmful content.
Scalability: AI moderation tools can analyze large amounts of data in real time, making it possible to manage high-traffic platforms without overwhelming human moderators.
Multi-Language Support: LLMs can moderate content across multiple languages, helping platforms support a global user base.
Flexibility: AI models can be fine-tuned and adapted over time, becoming more accurate as they process more data and learn new trends in harmful content.

How Large Language Models (LLMs) Power Content Moderation

LLMs excel at understanding human language nuances, including detecting sentiment, context, and potential harm in text. Instead of flagging content solely based on keywords, these models can assign safety scores to content based on its overall meaning and intent. A low safety score means the content is likely harmful or inappropriate, while a high score means it's safe.

ExoAPI uses this LLM-driven approach to evaluate content, providing a safety score for text. You can set thresholds (e.g., 0.5) to decide whether to approve or reject content.

Integrating AI-Powered Content Moderation with ExoAPI

The integration involves two key steps:

Setting up the backend to handle the content moderation request securely using ExoAPI.
Building the frontend React components to call the backend and display moderation results.

Prerequisite: Sign Up for ExoAPI

Visit ExoAPI and sign up for an account to obtain your API key.

1. Backend: Setting Up a Moderation API

Since the API key should be kept secure and not exposed in client-side code, the content moderation logic should reside on the server. We'll create a backend endpoint that accepts content from the client, passes it to ExoAPI, and returns the moderation result.

Here's how to set up a simple backend using Express.js and ExoAPI for text moderation.

Backend Code (Node.js + Express)

First, install the necessary dependencies:

npm install express @flower-digital/exoapi-sdk body-parser

Next, create an index.js file for your Express server:

const express = require("express");
const { ExoAPI } = require("@flower-digital/exoapi-sdk");
const bodyParser = require("body-parser");

const app = express();
const exoapi = new ExoAPI({ apiKey: process.env.EXOAPI_KEY }); // Load API key from environment variable

app.use(bodyParser.json());

// POST endpoint for submitting a comment
app.post("/comment", async (req, res) => {
  const { text } = req.body;

  try {
    const result = await exoapi.contentModeration({ text });
    // Check if the content's safety score is below the threshold (e.g., 0.5)
    const isApproved = result.safetyScore >= 0.5;
    if (isApproved) {
      // TODO: save comment in database
    }
    res.json({ approved: isApproved, safetyScore: result.safetyScore });
  } catch (err) {
    console.error("Error moderating text:", err);
    res.status(500).json({ error: "Error during moderation" });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

This Express app has a single route (/comment) where the client sends text to be moderated.
The safetyScore from ExoAPI determines whether the content is approved. If the score is above a threshold (e.g., 0.5), the content is deemed safe.
API key security is ensured by using environment variables (process.env.EXOAPI_KEY).

Running the Server

Before running the server, ensure you have set the EXOAPI_KEY in your environment:

EXOAPI_KEY=your_exoapi_key node index.js

Your backend is now ready to handle content moderation requests from your frontend.

2. Frontend: React Integration

On the frontend, we'll create a simple React form that submits text to the backend endpoint for moderation.

Frontend Code (React)

import React, { useState } from "react";

function CommentForm() {
  const [comment, setComment] = useState("");
  const [feedback, setFeedback] = useState("");
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await fetch("/comment", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ text: comment }),
      });

      const data = await response.json();
      setLoading(false);

      if (data.approved) {
        setFeedback("Comment approved and submitted!");
        // Perform further actions (e.g., display on UI)
      } else {
        setFeedback(`Comment rejected (Safety Score: ${data.safetyScore}).`);
      }
    } catch (error) {
      console.error("Error submitting comment:", error);
      setLoading(false);
      setFeedback("An error occurred while moderating the comment.");
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea value={comment} onChange={(e) => setComment(e.target.value)} placeholder="Enter your comment" />
        <button type="submit" disabled={loading}>
          {loading ? "Moderating..." : "Submit"}
        </button>
      </form>
      <p>{feedback}</p>
    </div>
  );
}

export default CommentForm;

In this example:

The React form allows users to enter text and submit it for moderation.
The form sends the comment to the backend /comment endpoint via a POST request.
The backend evaluates the content using ExoAPI, and the frontend displays feedback based on whether the comment is approved or rejected.

Running Frontend with Proxy

To ensure the frontend can talk to the backend during development, you can configure a proxy in your package.json (React):

{
  "proxy": "http://localhost:3000"
}

This allows you to call the backend at /comment without needing to hardcode the backend URL in development.

Multi-Framework Integration

While this article focuses on React, the same principles can be applied across other popular frameworks. Here are examples for Vue.js and Next.js.

Vue.js

In Vue, you can create a form similar to React and call the backend using Axios or the Fetch API:

<template>
  <div>
    <textarea v-model="comment"></textarea>
    <button @click="submitComment">Submit</button>
    <p>{{ feedback }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        comment: "",
        feedback: "",
      };
    },
    methods: {
      async submitComment() {
        try {
          const response = await fetch("/comment", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ text: this.comment }),
          });

          const data = await response.json();
          this.feedback = data.approved ? "Comment approved and submitted!" : `Comment rejected (Safety Score: ${data.safetyScore}).`;
        } catch (error) {
          console.error("Error submitting comment:", error);
          this.feedback = "An error occurred while moderating the comment.";
        }
      },
    },
  };
</script>

Next.js

In Next.js, you can create an API route for moderation and interact with it from the frontend.

API Route (pages/api/moderate.js):

import { ExoAPI } from "@flower-digital/exoapi-sdk";

const exoapi = new ExoAPI({ apiKey: process.env.EXOAPI_KEY });

export default async (req, res) => {
  if (req.method === "POST") {
    const { text } = req.body;

    try {
      const result = await exoapi.contentModeration({ text });
      const isApproved = result.safetyScore >= 0.5;
      if (isApproved) {
        // TODO: save comment in database
      }
      res.status(200).json({ approved: isApproved, safetyScore: result.safetyScore });
    } catch (error) {
      console.error("Error moderating text:", error);
      res.status(500).json({ error: "Error during moderation" });
    }
  } else {
    res.status(405).json({ error: "Method not allowed" });
  }
};

Conclusion

AI-powered content moderation, driven by large language models (LLMs), provides an efficient and scalable solution to moderate user-generated content. By leveraging ExoAPI, developers can quickly integrate advanced content moderation capabilities into their applications while keeping sensitive API keys secure by using a backend server.

This approach allows developers to:

Prevent harmful or inappropriate content from being published.
Improve user experience by ensuring a safe community environment.
Easily scale moderation as the platform grows.

By following the steps in this article, you can implement secure AI content moderation in your React app (or other frameworks like Vue and Next.js) using ExoAPI.

Protect Users with AI-powered Content Moderation 🛡️✨

Florian — Thu, 16 May 2024 07:00:00 +0000

Ensuring that your online community is a safe and welcoming space is crucial for maintaining a positive user experience. One way to achieve this is by implementing content moderation to filter out harmful and inappropriate text content. With the latest developments in AI and large-language models we'll explore how to implement an automated text content moderation system using JavaScript.

Solution 1: Basic moderation without AI

Step 1: Define a list of banned words and phrases

Start by defining a list of words and phrases that you want to filter out from user-generated content. These can include profanity, hate speech, or any other content that is not appropriate for your platform.

const bannedWords = [
  "loser",
  "idiot",
  "hate",
  "kill",
  // Add more words/phrases as needed
];

Step 2: Implement the content moderation function

Create a function that checks user-generated content against the list of banned words and phrases.

function moderateContent(text) {
  for (let word of bannedWords) {
    if (text.toLowerCase().includes(word)) {
      return true; // Content is not safe
    }
  }
  return false; // Content is safe
}

Step 3: Moderating text content

Use the moderateContent function to check user-generated content before displaying it.

const textToModerate = "Hey, you're such a loser!";
if (moderateContent(textToModerate)) {
  console.log("This text is not safe.");
} else {
  console.log("Text is safe.");
}

Solution 2: Use an AI-powered API ✨

While implementing a basic content moderation system within your application is possible, an AI-powered solution offers several advantages. AI-powered solutions leverage machine learning algorithms to provide superior accuracy, scalability, efficiency, and comprehensive coverage in detecting harmful content. Unlike simple word matching, AI algorithms can understand context and detect subtle nuances, making them more effective at identifying inappropriate content. Additionally, AI-powered solutions can scale seamlessly to handle large volumes of user-generated content, saving you time and effort in the long run.

Prerequisite: Sign Up for ExoAPI (free)

Visit ExoAPI and sign up for an account to obtain your API key.

1. Install the SDK

npm install @flower-digital/exoapi-sdk

2. Import and initialize the SDK with your API key

import { ExoAPI } from "@flower-digital/exoapi-sdk";

const exoapi = new ExoAPI({ apiKey: YOUR_API_KEY });

3. Moderate text content

You can now use the contentModeration method to moderate text content:

const textToModerate = "Hey, you're such a loser!";
exoapi
  .contentModeration({ text: textToModerate })
  .then((result) => {
    if (result.safetyScore < 0.3) {
      console.log("This text is not safe.");
    } else {
      console.log("Text is safe.");
    }
  })
  .catch((err) => console.error("An error occurred:", err));

Handling the response

The contentModeration method returns a JSON object containing the following fields:

safetyScore: A score between 0 and 1 expressing how safe the content is.
reason: A short explanation of the text moderation analysis.
hateSpeechScore: Probability between 0 and 1 of the text containing hate speech.
dangerousContentScore: Probability between 0 and 1 of the text containing dangerous elements.
harassmentScore: Probability between 0 and 1 of the text containing harassment.
sexuallyExplicitScore: Probability between 0 and 1 of the text containing sexually explicit language.

For example with the text above you would get:

{
  "safetyScore": 0.2,
  "reason": "The text contains an insult and is therefore considered offensive.",
  "hateSpeechScore": 0.29,
  "dangerousContentScore": 0.15,
  "harassmentScore": 0.64,
  "sexuallyExplicitScore": 0.09
}

You can use this information to decide what is acceptable within your community and avoid false positives.

Conclusion

While it is possible to create a basic content moderation system within your application, using an AI-powered solution like ExoAPI provides the best and safest results. AI-powered solutions offer superior accuracy, scalability, efficiency, and comprehensive coverage in detecting harmful content. Prioritizing the safety and well-being of your online community is essential, and an AI-powered content moderation solution ensures that your platform remains a safe and welcoming space for all users.

Building an Autocomplete Address Form in React 🗺️📍

Florian — Thu, 04 Jan 2024 15:36:47 +0000

As developers, creating a seamless user experience is crucial, especially when it comes to forms. Autocompleting address fields can significantly enhance the user interaction by reducing input errors and speeding up the form-filling process. In this article, we'll walk through the steps to create a React address form component that leverages a reverse geocoding API. We'll use the Google Maps API as an example, and then explore an affordable alternative using ExoAPI.

Prerequisites

Before we dive into coding, make sure you have Node.js and npm installed on your machine. You'll also need a basic understanding of React.

Setting up the React App

Start by creating a new React app using Create React App:

npx create-react-app address-form-app
cd address-form-app

Now, let's install additional dependencies to use Google Maps API:

npm install react-geocode

Reverse Geocoding

When requesting the current location from devices like computers or smartphones, we only get geographic coordinates in the form of latitude and longitude numbers. To get the actual address in a human-readable form with street name, city, postcode and country, we need to use a process called reverse geocoding.

Reverse geocoding is the transformation of coordinates (latitude and longitude) into a human-readable address. It works by looking up the address in a giant database of coordinates, which is why we need to use an API to query that information.

Option A - Using Google Maps API

⚠️ If using Google APIs is not an option for you, we'll offer an simpler and cheaper alternative below using ExoAPI.

1. Get an API Key

Go to the Google Cloud Console, create a new project, and enable the "Geocoding API" for your project. Generate an API key.

2. Create the AddressForm Component

Create a new file AddressForm.js in the src folder:

// src/AddressForm.js
import { useState } from "react";
import { setDefaults, fromLatLng } from "react-geocode";

setDefaults({
  // Put your Google Maps API key here:
  key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
});

const AddressForm = () => {
  const [addressComponents, setAddress] = useState({
    street: "",
    city: "",
    postcode: "",
    country: "",
    // Add more fields as needed
  });

  const useCurrentLocation = async () => {
    if (!navigator.geolocation) {
      console.error("Geolocation is not supported by this browser.");
      return;
    }

    try {
      // 1. Request current position from device
      const position = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject));
      const { latitude, longitude } = position.coords;

      // 2. Query the reverse geocoding API
      const address = await fromLatLng(latitude, longitude);
      console.log("[useCurrentLocation]", { latitude, longitude, address });

      // 3. Extract address components from Google Maps API response
      const components = address.results[0]?.address_components.reduce((acc, component) => {
        acc[component.types[0]] = component.long_name;
        return acc;
      }, {});

      // 4. Autocomplete form
      setAddress({
        street: [components.route, components.street_number].filter((x) => x).join(" "),
        city: components.locality || components.administrative_area_level_1 || "",
        postcode: components.postal_code || "",
        country: components.country || "",
      });
    } catch (error) {
      console.error("Error:", error);
    }
  };

  return (
    <div>
      <h2>Address Form</h2>
      <form>
        <label>
          Street:
          <input type="text" value={addressComponents.street} onChange={(e) => setAddress({ ...addressComponents, street: e.target.value })} />
        </label>
        <br />
        <label>
          City:
          <input type="text" value={addressComponents.city} onChange={(e) => setAddress({ ...addressComponents, city: e.target.value })} />
        </label>
        <br />
        <label>
          Postcode:
          <input type="text" value={addressComponents.postcode} onChange={(e) => setAddress({ ...addressComponents, postcode: e.target.value })} />
        </label>
        <br />
        <label>
          Country:
          <input type="text" value={addressComponents.country} onChange={(e) => setAddress({ ...addressComponents, country: e.target.value })} />
        </label>
        <br />
        <button type="button" onClick={useCurrentLocation}>
          Use current location
        </button>
      </form>
    </div>
  );
};

export default AddressForm;

⚠️ Don't forget to add your Google Maps API key to this file before continuing.

3. Use the AddressForm Component

Now, you can use the AddressForm component in your src/App.js:

// src/App.js
import AddressForm from "./AddressForm";

function App() {
  return (
    <div className="App">
      <AddressForm />
    </div>
  );
}

export default App;

Run your app:

npm start

Visit http://localhost:3000 in your browser, you should see the Address Form with autocomplete.

Option B - Using ExoAPI

ExoAPI offers an affordable and easy-to-use alternative to Google Maps API (and it's 96% cheaper! 🤑):

1. Sign Up for ExoAPI

Visit ExoAPI and sign up for an account to obtain your API key.

2. Update the AddressForm Component

In AddressForm.js, replace the useCurrentLocation function to use ExoAPI:

const useCurrentLocation = async () => {
  if (!navigator.geolocation) {
    console.error("Geolocation is not supported by this browser.");
    return;
  }

  try {
    // 1. Request current position from device
    const position = await new Promise((resolve, reject) => navigator.geolocation.getCurrentPosition(resolve, reject));
    const { latitude, longitude } = position.coords;

    // 2. Query the reverse geocoding API
    const address = await (
      await fetch("https://api.exoapi.dev/reverse-geocoding", {
        method: "POST",
        headers: {
          Authorization: "Bearer <your-api-key>",
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ lat: latitude, lon: longitude, locale: "en-GB" }),
      })
    ).json();
    console.log("[useCurrentLocation]", { latitude, longitude, address });

    // 3. Autocomplete form
    setAddress({
      street: [address.street, address.houseNumber].filter((x) => x).join(" "),
      city: address.city || "",
      postcode: address.postalCode || "",
      country: address.country || "",
    });
  } catch (error) {
    console.error("Error:", error);
  }
};

⚠️ Don't forget to replace <your-api-key> with the API key you obtained from ExoAPI.

3. Remove Google Maps dependencies

ExoAPI works without any external dependencies, so you can uninstall the Google Maps module:

npm uninstall react-geocode

And remove the following lines:

// These lines are not needed anymore when using ExoAPI
import { setDefaults, fromLatLng } from "react-geocode";

setDefaults({
  key: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
});

Conclusion

Congratulations! 🎉 You now have a flexible React Address Form component that can work with either the Google Maps API or ExoAPI for reverse geocoding. Choose the option that best fits your project requirements and preferences.