@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

$3

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

$3

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:

``

bash

npm install @optimaxer/web-forms





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



$3



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:

javascript

     // 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:

javascript

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





$3



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

javascript

// 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.



$3

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:

html

``

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.