ContentBuilder.js 5.5.17

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

    readme-sourcecode.txt

    for additional information.

Documentation:

    https://demo.innovastudio.com/docs/ContentBuilder.pdf


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

    3. 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 OpenAI API key from https://openai.com.
    2. Update the .env file with your API key.

            OPENAI_API_KEY=YOUR_API_KEY

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

            $OPENAI_API_KEY = 'YOUR_API_KEY';

- 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:
    1. Obtain the API key from 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';

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


- IMPORTANT: 

    Please add your own security to the API endpoints (public/api/)!



_____________________________________________
SUPPORT:

Email us at: support@innovastudio.com