Compare PDF text using AI and JavaScript

Nutrient SDK’s AI text comparison feature enhances the standard text comparison feature by leveraging artificial intelligence to analyze and categorize the differences found between two documents. This provides users with a high-level summary of changes and allows them to filter differences based on AI-generated categories, making review processes significantly faster and more efficient.

AI text comparison is possible in Nutrient Web SDK with the corresponding license components (Comparison and AI). Contact Sales if you’re interested in this functionality.

Setting up AI Assistant

To use AI-powered text comparison, you’ll need to set up AI Assistant, which powers the artificial intelligence capabilities in Nutrient SDK.

For a complete guide on setting up AI Assistant, including Docker configuration, refer to our AI Assistant getting started guide.

Once you have AI Assistant running, you’ll need to configure Nutrient Web SDK to connect to it.

Enabling AI comparison

To enable AI capabilities within the text comparison user interface (UI), call the loadTextComparison method (see our standard text comparison guide for details) with a new Boolean property, ai, set to true, and an aiAssistant object with the following properties:

• jwt — A JSON Web Token (JWT) used for authenticating requests to AI Assistant.
• backendUrl — The URL where the AI Assistant service is hosted.

For detailed steps on integrating AI Assistant, refer to this integration guide. To get high-quality results while maintaining cost efficiency, we recommend the GPT4.1-nano model, which can be selected in the AIA service configuration.

Here’s an example configuration:

NutrientViewer.loadTextComparison({
  ...defaultConfiguration,
  // AI Assistant configuration.
  aiAssistant: {
    sessionId: "unique-session-id", // A unique identifier for the session.
    jwt: "a-jwt-token", // JWT token for authentication.
    backendUrl: "http://localhost:4000/", // URL where AI Assistant is running.
  },
  ai: true,
  documentA: "text-comparison/static/documentA.pdf",
  documentB: "text-comparison/static/documentB.pdf",
});

The JWT token should be generated on your server as explained in the AI Assistant getting started guide.

Once configured, AI Assistant will enhance the text comparison UI by providing AI-generated summaries, categories, and filtering options, making it easier to analyze document differences.

By default, text comparison performs a character-level diff, which compares two texts by examining individual characters. This method detects changes at the most granular level, identifying additions, deletions, and modifications of each character, including spaces and punctuation. However, in some cases, you may want to perform a word-level diff, which compares texts by analyzing entire words. This approach highlights changes based on the addition, deletion, or modification of whole words, making it more intuitive for general text comparisons.

To configure text comparison to perform a word-level diff, pass the wordLevel Boolean flag to the loadTextComparison method:

NutrientViewer.loadTextComparison({
  ...defaultConfiguration,
  documentA: "text-comparison/static/documentA.pdf",
  documentB: "text-comparison/static/documentB.pdf",
  wordLevel: true
});

AI-powered UI enhancements

With AI enabled, the text comparison UI includes additional elements, outlined below.

• AI summary panel — Located above the list of changes in the sidebar, this panel displays two things:
  • An AI-generated summary describing the overall nature of the differences found.
  • A list of AI-generated categories (tags) representing the types of changes (e.g. Formatting, Content Addition, Rewording).
• Filters — You can click the AI-generated categories to filter the list of changes, showing only those relevant to the selected categories.
• Enhanced highlighting — Changes not matching the active filters are visually deemphasized (grayed out) in the document view.

Customizing comparison highlights

Highlight colors can be customized similarly to the standard text comparison by setting the comparisonSidebarConfig.diffColors option. AI Text Comparison introduces two new color options — disabledColor and disabledBackgroundColor — for changes not matching the active filters:

NutrientViewer.loadTextComparison({
  ...restOfConfigurations,
  comparisonSidebarConfig: {
    diffColors: {
      deletionColor: new NutrientViewer.Color({ r: 255, g: 218, b: 185 }),
      insertionColor: new NutrientViewer.Color({ r: 200, g: 255, b: 200 }),
      disabledColor: new NutrientViewer.Color({ r: 200, g: 200, b: 200 }),
      disabledBackgroundColor: new NutrientViewer.Color({
        r: 230,
        g: 230,
        b: 230,
      }),
    },
  },
});

The available color properties for the TextComparisonDiffColors object are insertionColor, insertionBackgroundColor, deletionColor, deletionBackgroundColor, disabledColor, and disabledBackgroundColor.

Programmatic AI comparison

You can also execute AI-driven comparison programmatically using the Instance.compareDocuments method. To carry out an AI comparison, configure the NutrientViewer.ComparisonOperation type as NutrientViewer.ComparisonOperationType.AI. Additionally, define the specific AI operation by setting the options.operationType property, utilizing the NutrientViewer.AIComparisonOperationType enumeration. We support two kinds of AI comparison operations:

• NutrientViewer.AIComparisonOperationType.ANALYZE — Returns a summary of the differences between the documents and a list of AI-detected categories based on the changes.
• NutrientViewer.AIComparisonOperationType.TAG — Returns the results of a text comparison, with each change tagged by the AI service based on predefined categories.

This sample code provides a comprehensive description of the entire workflow:

// Create document descriptors.
const originalDocument = new NutrientViewer.DocumentDescriptor({
  filePath: "/path/to/original.pdf",
  pageIndexes: [0],
});

const changedDocument = new NutrientViewer.DocumentDescriptor({
  filePath: "/path/to/modified.pdf",
  pageIndexes: [0],
});

// Configure documents for comparison.
const comparisonDocuments = { originalDocument, changedDocument };

// Create an AI comparison operation for analysis.
const analyzeOperation = new NutrientViewer.ComparisonOperation(
  NutrientViewer.ComparisonOperationType.AI,
  { operationType: NutrientViewer.AIComparisonOperationType.ANALYZE },
);

// Perform AI analysis of document changes.
instance
  .compareDocuments(comparisonDocuments, analyzeOperation)
  .then((result) => {
    if (NutrientViewer.isAIDocumentComparisonResult(result)) {
      console.log("AI Summary:", result.summary);
      console.log("Categories:", result.categories);
      // Process the AI comparison results.
    }
  })
  .catch((error) => {
    console.error("AI comparison failed:", error);
  });

// For tagging changes with specific categories.
const tagOperation = new NutrientViewer.ComparisonOperation(
  NutrientViewer.ComparisonOperationType.AI,
  {
    operationType: NutrientViewer.AIComparisonOperationType.TAG,
    categories: ["Legal", "Financial", "Semantic"],
  },
);

// Tag changes with specified categories.
instance.compareDocuments(comparisonDocuments, tagOperation).then((result) => {
  // Process tagged changes.
  console.log("Tagged references:", result.references);
});

Understanding the AI comparison result

When using ComparisonOperationType.AI, the Instance.compareDocuments method returns an AIDocumentComparisonResult. You can use type guards to determine the specific type of result:

• NutrientViewer.isAIDocumentAnalysisResult(result) — This helper checks if the result comes from an “analyze” operation (AIADocumentChangesAnalysisResponse). It contains:
  • summary — A string summarizing the document changes.
  • categories — An array of strings representing the AI-detected text change categories.
  • changes — The underlying standard DocumentComparisonResult containing the detailed text hunks and operations.
• NutrientViewer.isAIDocumentTaggingResult(result) — Checks if the result is from a “tag” operation (AIADocumentChangesTaggingResponse). It contains:
  • references — An array where each item corresponds to a change and includes a tag array listing the categories assigned to that specific change by the AI.
  • changes — The underlying standard DocumentComparisonResult.

You can use these results to build custom UI elements or integrate the AI analysis into your workflows.