
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@innovastudio/pagestudioai
Advanced tools
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:
Include the script and CSS:
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: support@innovastudio.com
FAQs
Unknown package
The npm package @innovastudio/pagestudioai receives a total of 71 weekly downloads. As such, @innovastudio/pagestudioai popularity was classified as not popular.
We found that @innovastudio/pagestudioai demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.