How to Generate Text with ml5JS?

Last Updated : 28 Aug, 2024

Text generation using machine learning models has become an exciting field, enabling developers to create applications that can produce human-like text based on input prompts. we'll explore how to generate text using ml5.js, a friendly machine-learning library for the web.

Approach: Using a Pre-trained Model (LSTM)

In this approach, we have used the ml5JS library to generate text using a pre-trained Long Short-Term Memory (LSTM) model. The HTML part creates a user interface with an input area for seed text, options to set text length and randomness (temperature), and a "Generate Text" button. When the button is clicked, it triggers the generateText() function, which gathers user input, shows a loading animation, and uses the ml5JS library to generate text based on the input seed. The sketch.js file handles loading the LSTM model and generating text. When the model is loaded, users can input a seed phrase, and the model will produce text of the specified length and randomness. The generated text is displayed on the page once it's ready, and the loading indicator is hidden.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>LSTM Text Generation Example</title>
    <style>
        /* Loader styling */
        #loader {
            display: none;
            /* Hide the loader by default */
            border: 4px solid #f3f3f3;
            /* Light grey */
            border-radius: 50%;
            border-top: 4px solid #3498db;
            /* Blue */
            width: 40px;
            height: 40px;
            animation: spin 2s linear infinite;
            margin: 20px auto;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Center the loader */
        #loader-container {
            display: none;
            /* Hide the loader container by default */
            text-align: center;
            padding: 20px;
        }
    </style>
</head>

<body>
    <h1>Generate Text with ml5.js</h1>

    <!-- Textarea for input seed text -->
    <textarea id="inputText" rows="4" cols="50" 
              placeholder="Enter seed text here..."></textarea><br>

    <!-- Input for specifying text length to generate -->
    <label for="textLength">Length of Text to Generate:</label>
    <input type="number" id="textLength"
           value="100" min="1"><br><br>

    <!-- Input for specifying temperature (randomness) -->
    <label for="temperature">Temperature (Randomness Level):</label>
    <input type="number" id="temperature"
           step="0.1" value="0.5"
           min="0.1" max="1.0"><br><br>

    <!-- Button to trigger text generation -->
    <button onclick="generateText()">Generate Text</button>

    <!-- Loader container shown during text generation -->
    <div id="loader-container">
        <div id="loader"></div>
        <p>Generating text...</p>
    </div>

    <!-- Output area for generated text -->
    <p id="outputText"></p>

    <!-- Include p5.js and ml5.js libraries -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/ml5.min.js"></script>

    <!-- Include the custom script -->
    <script src="sketch.js"></script>
</body>

</html>

JavaScript

let lstm; // Variable to store the LSTM model

// Function to set up the LSTM model
function setup() {
    console.log('Setting up the model...');
    // Load the pre-trained LSTM model from the specified URL
    lstm = ml5.charRNN(
'https://raw.githubusercontent.com/ml5js/ml5-data-and-models/main/models/charRNN/woolf', modelLoaded);
}

// Callback when the model is loaded
function modelLoaded() {
    console.log('Model Loaded!');
}

// Function to generate text based on user input
function generateText() {
    console.log('Generate button clicked.');

    // Show the loader
    document.getElementById('loader-container').style.display = 'block';
    // Clear previous output
    document.getElementById('outputText').innerText = ''; 

    // Get user input values
    const inputText = document.getElementById('inputText').value;
    const textLength = parseInt(document.getElementById('textLength').value);
    const temperature = parseFloat(document.getElementById('temperature').value);

    // Prepare data for text generation
    const data = {
        seed: inputText,
         // Use user input for text length
        length: textLength, 
         // Use user input for temperature
        temperature: temperature 
    };

    console.log('Generating text with data:', data);
    // Generate text using the LSTM model
    lstm.generate(data, gotResult);
}

// Callback function when text generation is complete
function gotResult(err, result) {
    // Hide the loader when the result is received
    document.getElementById('loader-container').style.display = 'none';

    if (err) {
        console.error('Error during text generation:', err);
        return;
    }
    console.log('Text generation result:', result);
    // Display the generated text
    document.getElementById('outputText').innerText = result.sample;
}

// Ensure the setup function is called when the page loads
window.onload = setup;

Output: When you input some seed text and click "Generate Text," the application will produce a continuation of that text in the style of the text it was trained on.