ContentBuilder.js 5.6.5

Note: If you have Source Code package (Super license), please refer to:

    readme-sourcecode.txt

    for additional information.

Documentation:

    https://github.com/innovastudio-dev/contentbuilder

    https://demo.innovastudio.com/docs/ContentBuilder.pdf (old version)


Getting started

You can choose to run the HTML, PHP or JavaScript project examples:

A. To try the HTML example:

    1. Unzip the project files:

       - ContentBuilder/

    2. Open terminal, go to the project directory and install the required server dependencies.
       The example is using Node.js server.

        > cd ContentBuilder

        > npm install

            Note: To run this command, you need to have NPM installed.
            Download & install NPM from https://nodejs.org/en/download/.

    3. Run the server:

        > node server.js

    4. Open from your browser:

        http://localhost:8081/example1.html (Default example)

        or

        http://localhost:8081/example-canvas.html (New Canvas Mode example)


B. To try the PHP Example, open from your browser:

    http://localhost/.../public/example2.php
 
    If you're using Visual Studio Code, you can use the PHP Server extension.


C. To try the JavaScript project, install the dependencies and start the project:

        > npm install

        > npm start

    A browser window will be opened with the example running.

    Note:
        The code for this project is:
            
            src/index.js

        The project is using Node.js server:

            server.js


NOTE:

- To use the AI Assistant:

    1. Obtain the API key from OpenAI or OpenRouter
        
        https://openai.com

        or

        https://openrouter.ai 

        Use OpenRouter if you want to use various models.

    2. Update the .env file with your API key.

        OPENAI_API_KEY=YOUR_OPENAI_API_KEY

        or

        OPENROUTER_API_KEY=YOUR_API_KEY

    Or if you're using PHP, update the api/config.php file with your API key:

        $OPENAI_API_KEY = 'YOUR_API_KEY';

        or

        $OPENROUTER_API_KEY = 'YOUR_API_KEY';
        
    3. Ensure that the sendCommandUrl parameter is set with the API endpoint:

        const builder = new ContentBuilder({
            // ...
            sendCommandUrl: '/sendcommand',
            // sendCommandUrl: '/openrouter', // Using OpenRouter (https://openrouter.ai/)
        });

        If you're using PHP:

        const builder = new ContentBuilder({
            // ...
            sendCommandUrl: 'api/sendcommand.php',
            // sendCommandUrl: '/api/openrouter.php', // Using OpenRouter (https://openrouter.ai/)
        });

        Most examples in the package have this parameter configured, so you can run and test them.

        The JavaScript project example in this package uses Node.js for the API endpoint /sendcommand.
        Please refer to the Node.js file:

            server.js
            
- For speech recognition (if dictation is enabled), the browser's built-in
    speech recognition is used. However, certain browsers may not support this feature.
    We recommend using Deepgram for browser compatibility and accuracy.
    Obtain the Deepgram API key from https://deepgram.com and update the .env file with your API key.
    Then enable the 'speechTranscribeUrl' parameter in the ContentBuilder initialization (src/index.js).

- To use the AI image generation:

    - New version:

        1. Obtain the API key from Fal.ai:

            https://fal.ai 
            
        2. Update the .env file with your API key.

            FAL_API_KEY=YOUR_API_KEY

        Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:

            $FAL_API_KEY = 'YOUR_API_KEY';

        3. Obtain the API key from OpenAI
            
            https://openai.com

        4. Update the .env file with your API key.

            OPENAI_API_KEY=YOUR_OPENAI_API_KEY

        Or if you're using PHP, update the api/config.php file with your API key:

            $OPENAI_API_KEY = 'YOUR_API_KEY';

        5. Ensure that the following parameters are set:

            const builder = new ContentBuilder({
                // ...

                defaultImageGenerationProvider: 'fal',
                generateMediaUrl_Fal: '/request-fal',
                checkRequestStatusUrl_Fal: '/status-fal',
                getResultUrl_Fal: '/result-fal',
            });    

            If you're using PHP:

            const builder = new ContentBuilder({
                // ...

                defaultImageGenerationProvider: 'fal',
                generateMediaUrl_Fal: 'api/request-fal.php',
                checkRequestStatusUrl_Fal: 'api/status-fal.php',
                getResultUrl_Fal: 'api/result-fal.php',
            });   


    - Legacy version:

        1. Obtain the API key from Getimg:
        
            https://getimg.ai/tools/api 

        2. Update the .env file with your API key.

            GETIMG_API_KEY=YOUR_API_KEY

        Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:

            $GETIMG_API_KEY = 'YOUR_API_KEY';

        3. Ensure that the following parameters are set:

            const builder = new ContentBuilder({
                // ...
                    
                textToImageUrl: '/texttoimage', 
                upscaleImageUrl: '/upscaleimage',
                imageModel: 'flux-schnell',
                imageAutoUpscale: false,
                // viewFileUrl: '/viewfile', // If using S3
            });

            If you're using PHP:

            const builder = new ContentBuilder({
                // ...
                    
                textToImageUrl: 'api/texttoimage.php', 
                upscaleImageUrl: 'api/upscaleimage.php',
                imageModel: 'flux-schnell',
                imageAutoUpscale: false,
            });


    Most examples in the package have this parameter configured, so you can run and test them.

    The JavaScript project example in this package uses Node.js for the API endpoints.
    Please refer to the Node.js file:

        server.js
             
             
- IMPORTANT: 

    Please add your own security to the API endpoints!

    
- New Canvas Mode

Canvas mode is a new option for seamless (gridless) block positioning. Simply activate with:

    const builder = new ContentBuilder({
        container: '.container',
        canvas: true,
        previewURL:'preview-canvas.html'
    });

And include additional JavaScript and CSS:

    <link href="block/block.css" rel="stylesheet">
    <script src="block/block.js">

You can try 'example-canvas.html' in the package.





_____________________________________________
SUPPORT:

Email us at: support@innovastudio.com