Installation

Install using NPM

To use the NPM installation type: npm install(i) webserverai

Install by ZIP

1. Download and take out the WebServerAI folder from the WebServerAI_Master folder.
2. Place the folder in the ROOT directory to allow all folders to be accessed.
3. Go to a project to work with and enter the following instructions to enable it.

Enabling the AI

To enable the AI you must go to the file that you will be using and type: Note: "wsa-exclude" is required for preview reasons and space-saving!

<script src=".../main.js" type="module" wsa-exclude></script>

OR

<script type="module" wsa-exclude>
import WebServerAI from '../assets/AI/js/webserverai.min.js'; // Get WebServerAI from assets
import Events from '../assets/AI/js/components/Events.js'; // Get Events from the components [Optional]

if(window.WebServerAI!==undefined){ // Check if WebServerAI is active
        let wsaEvent = new Events(); // Load the events library
        let wsc = new WebServerAI({ //Create a new WebServerAI object
            enabled: true, // Enable the software
            theme: 'dark', // Change the theme light/dark [Optional]
            codeTheme: 'default', // Change the theme for prismJS [Optional]
            status: 'opened', // Set the UI collapse status [Optional]
            position: 'bottom right', // Sets the position of the UI [Optional]
            history:{
                save: 'session' // Saves history as a sessionStorage [Optional]
            },
            cte: true, // Enables Click-targeting element
            extensions:{} // Load build extensions here
        });
        wsc.load(); // Load the UI
        wsc.submit(($input)=>{
            if($input){
                wsc.addCmd($input);
                wsc.send($input, true);
            }
        }); // Trigger events on submit
        wsc.clearTextbox(); // Clears the textbox after submitting
}
</script>

Configuration

Name	Type	Default	Allowed values	Description
enabled	Boolean	True	True / False	Enables the software
theme	String	"light"	"light" / "dark"	Sets the theme for the UI.
codeTheme	String	"default"	PrismJS available themes	Sets the code blocks to the correct PrismJS themes
status	String	"opened"	"Opened" / "Closed"	Sets the UI collapse status
position	String	"bottom right"	"top left" / "top center" / "top right" / "center left" / "center right" / "bottom left" / "bottom center" / "bottom right"	Sets the position of the UI
history.save	String	"session"	"session" / "local"	Saves the users history
ui.preview	String	null	<Element:IFrame>	Previews your updated page while removing all non-important elements
ui.previewBtn	String	null	<Element:Button>	A button to update the IFrame with the page update
ui.chatbox	Stirng	null	<Element:Textarea> / <Element:Input[type="text"]>	Uses a custom textbox, except for the UI
ui.submit	String	null	<Element:Button>	Uses a custom button for submission of users input
ui.history	String	null	<Element:Div>	Uses a custom container as a history viewer
ui.language	String	Browsers language	Available language support	Sets the UI to a specified language
cte	Boolean	True	True / False	Allows Cursor-Targeting Element
extensions	Object	{}	Allowed extensions	Add build extensions here

Configuring Python

NOTE: you can skip this if you are using XAMPP local server

1. To Configure Python you must be able to find the .../python.exe compiler and copy the file path
2. Go to the settings.json in the data folder and change the pythonConfig->execPath and replace "C:\xampp\htdocs\WebServerAI\.venv\Scripts\python.exe" with the correct format of your execution path.
3. Now go to every Python file and replace "C:\xampp\htdocs\WebServerAI\.venv\Scripts\python.exe" on line 1 with the compiler path.