@innovastudio/pagestudioai

PageStudioAI.js 1.2.3 - AI Web Builder

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:

   - PageStudioAI/

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

    > cd PageStudioAI

    > npm install

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

3. Configure:

    1. Obtain the API keys from OpenAI and Getimg (for Image generation):
        
        https://openai.com
        
        https://getimg.ai/tools/api 

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

        OPENAI_API_KEY=YOUR_OPENAI_API_KEY
        GETIMG_API_KEY=YOUR_GETIMG_API_KEY

4. Run the server:

    > node server.js

5. Open from your browser:

    http://localhost:8086/example.html

    or

    http://localhost:8086/example-customform.html (custom form example)

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.

Configuration: update the api/config.php file with your API key:

    $OPENAI_API_KEY = 'YOUR_OPENAI_API_KEY';
    $GETIMG_API_KEY = 'YOUR_GETIMG_API_KEY';

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

    > cd PageStudioAI

    > 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

---

Usage:

1. Include the script and CSS:

2. Initiate:

   const container = document.querySelector('.mycontainer') studio = new PageStudioAI(container, {

    showSettings: true, // show/hide settings on the generate form
   
    enableImageGeneration: false, // if false, randomly selected images will be used.
    // enableDownload: false,
   
    // Endpoints for AI content & images generation
    sendCommandUrl: '/sendcommand', 
    textToImageUrl: '/texttoimage', 
    upscaleImageUrl: '/upscaleimage',
    imageModel: 'flux-schnell', // new image model
   
    // Customize the form page
    imageAlt: 'Generate Your Website',
    imageSrc: 'bike.jpg',
    headline: 'Generate Your Website <span>with AI</span>',
    tagline: 'Get ready for your personalized website in just moments!',
    
    // specialInstructions: 'Write the content in Dutch or translate all text into Dutch.',
   
    /*
   
    demoImages: [
        'gallery/img-w1bPB.jpg',
        'gallery/img-X82Nlj.jpg',
        //...
    ],
   
    // Assets 
    placeholderPath: 'assets/placeholders/', // location of image placeholders used in templates
    contentStylePath: 'assets/styles/', // location of typography styles' css
    snippetsCss: 'assets/minimalist-blocks/content-preview.css', // css used by the builder
    boxCss: 'box/box-flex-preview.css', // css used by the builder
   
    editorUrl: '/edit', // specify ContentBox page for editing here
    reGenerateUrl: '/create' // specify custom generate form/page here 
   
    */
   

   });

Methods:

• generate(userInfo); // generate page with AI

  Example:

    const userInfo = {
        name: 'The Studio',
        type: 'Company/Organization', // or 'Freelancer/Individual'
        fields: 'Interior Designer',
        about: '', // optional
        style: 'Formal' // or 'Friendly'
    }
    studio.generate(userInfo);
  

• view(); // to view the generated page

• viewSettings(); // open Generate settings

• getPage(); // get page data, eg. for saving purpose into a database

• loadPage(data); // load a page

• html(); // get HTML

• clear(); // to clear the generated page

• destroy(); // destroy the library

• showForm(); // to programmatically show the generate form

---

Note:

• The contact form section supports custom actions. It also supports integration with Formspree (https://formspree.io/). Just specify the Form action in the Settings dialog, and your form will be set up.

• PageStudioAI,js is compatible with Files.js Asset Manager (https://innovastudio.com/asset-manager) to manage and select images.

---

A SIMPLIFIED FORM FOR AI GENERATION ONLY

Example:

public/generate.html

This page contains the form for page generation, without the editing panel. This provides faster loading for the initial page generation. After a page is generated, the 'view website' button will redirect to the editing panel.

---

SUPPORT:

Email us at: [e-mail]