ContentBox.js 5.9.3

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

    readme-sourcecode.txt

    for additional information.

Documentation:

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

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

    https://demo.innovastudio.com/docs/AI-Assistant.pdf (AI Assistant documentation)


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:

       - ContentBox/

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

        > cd ContentBox

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


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

    http://localhost/.../public/example.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 ContentBox({
            // ...
            sendCommandUrl: '/sendcommand',
            // sendCommandUrl: '/openrouter', // Using OpenRouter (https://openrouter.ai/)
        });

        If you're using PHP:

        const builder = new ContentBox({
            // ...
            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.
        Examples in React/Next.js and Laravel are also provided.

        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 more information, please refer to the documentation:

        https://demo.innovastudio.com/docs/AI-Assistant.pdf 

- 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 ContentBox 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 ContentBox({
                // ...

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

            If you're using PHP:

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

                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 ContentBox({
                // ...
                    
                textToImageUrl: '/texttoimage', 
                upscaleImageUrl: '/upscaleimage',
                imageModel: 'flux-schnell',
                imageAutoUpscale: false,
                // viewFileUrl: '/viewfile', // If using S3
            });

            If you're using PHP:

            const builder = new ContentBox({
                // ...
                    
                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

- To register new plugins, update the following files:

    - public/blank-plugins.html
    - public/preview-with-plugins.html

    Example with plugin implementation:

    - public/example-plugins.html


- IMPORTANT: 

    Please add your own security to the API endpoints!



_____________________________________________
SUPPORT:

Email us at: support@innovastudio.com