@optimaxer/web-forms

Welcome to @optimaxer/web-forms, a powerful library designed to simplify and enhance form-filling processes in your web applications. @optimaxer/web-forms utilizes advanced in-browser technology to auto-fill forms based on text data, reducing repetitive tasks and optimizing user workflows. By leveraging a small language model and a dedicated data injection engine, this library ensures seamless integration and improved user experience without the need for a dedicated server.

Overview

@optimaxer/web-forms is built with efficiency in mind, offering the following key features:

• In-Browser Processing: Our library uses a small language model running directly in the user's browser for entity extraction. This eliminates the need for server-side processing and reduces latency, enhancing overall performance.
• Flexible Data Injection: The data injection engine transforms extracted data into the required format for your forms, ensuring compatibility with various UI frameworks and libraries.
• Easy Integration: Integrating @optimaxer/web-forms into your application is straightforward. The library is designed to work seamlessly with any front-end technology, providing a smooth setup and usage experience.
• Improved User Experience: By automating the form-filling process, users save time and reduce manual data entry errors. This leads to a more efficient workflow and a more enjoyable user experience.

Warning: Due to the restrictions of the Firefox browser, these libraries and functionalities may not work well on Firefox. Please note this limitation.

Quickstart

Getting Started with web-forms Library

Getting started with the @optimaxer/web-forms library is straightforward. Follow these steps to integrate and utilize the library in your web application effectively.

Step 1: Install the Library

To begin using @optimaxer/web-forms, you'll first need to install it in your project. You can do this using npm. Open your terminal and run the following command:

npm install @optimaxer/web-forms

This command will add the library to your project's dependencies.

Step 2: Setting Up the Web-Forms

Once the library is installed, you need to set up the FormEngine component. This step involves initializing the form engine with the appropriate configurations, including the Small Language Model and Browser Embedding Engine.

For more detailed information about the setup function, please refer to the setup function documentation available here.

1. Import the FormEngine component:

    // Import FormEngine
   import { FormEngine } from '@optimaxer/web-forms';

2. Configure the FormEngine:

   You need to specify the model and engine for the form. For example, if you are using gemma as your model and mediapipe as your embedding engine, you can set it up like this:

   const formEngine = await formEngine.setup({model:'gemma', inferenceEngine: 'mediapipe', mode: 'local'});

Step 3: Extract the Data for the Web-Form

Prepare a JSON schema representing the form fields you want to auto-fill. Use the extract method to obtain the necessary data:

// Define your form schema here, according to your requirement
const formSchema = {
    firstName: '',
    lastName: '',
    address: '',
};

const extractedData = await formEngine.extract(formSchema);

When providing the form schema for data extraction, ensure that you use a JSON where the keys correspond to the form fields, and the values are empty strings. This setup helps in defining the structure of the form and the fields to be populated. For more detailed information about the extract function, please refer to the extract function documentation.

To improve the accuracy of data extraction, use meaningful names for the keys in your form schema object. Descriptive names help the model understand the context and extract relevant data more precisely.

The text parameter in the extract function (which is the second parameter) is used to specify the content from which data will be extracted according to the defined form schema. This parameter is optional; if omitted, the function will default to using the most recent copied value as input.

Important

Ensure that the last copied value is relevant and properly formatted for your extraction needs. Additionally, if prompted, allow the application to access your clipboard to enable automatic data retrieval.

Step 4: Fill the Form using the Extracted Data

After extracting the data using @optimaxer/web-forms, the next step is to populate your form fields with this data. How you accomplish this will depend on the specific UI framework or library you're using, but the general process is similar across different environments.

If you’re developing an application without using any specific UI framework, you’ll need to manipulate the DOM directly. Here’s how you can achieve this:

1. Identify Form Elements: Ensure each form field has a unique id or name attribute that you can use to target them.
2. Populate Fields: Use JavaScript to select the form elements and set their values based on the extracted data.

Here’s a basic example:

<!-- Example Form -->
<form id="myForm">
  <input id="name" type="text" placeholder="Name" />
  <input id="email" type="email" placeholder="Email" />
  <!-- More fields as needed -->
  <button type="submit">Submit</button>
  <button type="button" id="smartPasteButton">Smart Paste</button>
</form>

<script>
  import { FormEngine } from '@optimaxer/web-forms';

  // Initialize FormEngine
  const formEngine = await formEngine.value.setup({model:'gemma', inferenceEngine: 'mediapipe', mode: 'local'});

  // Function to handle smart paste
  async function handleSmartPaste() {
    // Define your form schema here
    const formSchema = {
      name: '',
      email: '',
      // Other fields as needed
    };
    
    // Extract data using FormEngine
    const extractedData = await formEngine.extract(formSchema);
    // Fill the form with the extracted data
    fillForm(extractedData.result);
  }

  // Function to fill the form
  function fillForm(data) {
    document.getElementById('name').value = data.name || '';
    document.getElementById('email').value = data.email || '';
    // Set values for other fields as needed
  }

  document.getElementById('smartPasteButton').addEventListener('click', handleSmartPaste);
</script>

By following the above steps and integrating @optimaxer/web-forms, you can streamline your form-filling processes and provide a better user experience by leveraging cutting-edge technology right in the browser.

The method to fill the form using extracted data depends on the UI library or framework you are using. You should use the appropriate method for your specific setup to ensure correct form population.