@innovastudio/pagestudioai

PageStudioAI.js 1.2.5 - 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 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

3. Obtain the API key from Getimg (for Image generation):

https://getimg.ai/tools/api

4. Update the .env file with your 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 keys:

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

You can use API key from OpenAI or OpenRouter.
Use OpenRouter if you want to use various models.

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:

<link href="assets/minimalist-blocks/content.css" rel="stylesheet">
<link href="box/box-flex.css" rel="stylesheet">
<link href="pagestudioai/pagestudioai.css" rel="stylesheet">

<script src="pagestudioai/pagestudioai.min.js"></script>

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',
// sendCommandUrl: '/openrouter', // Using OpenRouter (https://openrouter.ai/)
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]