Static web page

An example of AI integration, here is the design of the static model. The model design is for advanced developers, and ordinary users can directly use the designed static web page model.

This example demonstrates the specific steps of how to combine AI and the model. Here, a static web page model is defined, integrating Jquery3.7.1, bootstrap5 and echarts5.4.3, and letting Agenet generate relevant HTML code.

1. Define StaticHtml model

The process of model definition is from simple to complex. First create the following initial model.

<?xml version='1.0' encoding='utf-8'?>

<thing name="StaticHtml" descriptors="xworker.lang.MetaDescriptor3">
 <actions>
 <GroovyAction name="httpDo" descriptors="xworker.groovy.GroovyAction"/>
 </actions>
 <attribute name="name"/>
 <attribute name="label"/>
 <attribute name="code" inputtype="textarea" inputattrs="codeName=html codeType=html wrap=false fillBoth=true cols= rows= textAssistor="/>
</thing>

2. Implement httpDo method

XWorker comes with a built-in WEB server. Models that implement the httpDo method can be used as WEB applications, so StaticHtml needs to implement the httpDo method.

def html = """<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="js/xworker/InnerBrowserUtil.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="js/bootstrap-5/css/bootstrap.min.css"/>
<script src="js/charts/echarts/echarts.min.js"></script>
<title>${self.metadata.label}</title>
</head>
<body>
${self.code}
 </body>
</html>""";

response.setConentType("text/html; charset=utf-8");
response.writer.println(html);

The httpDo method is implemented using Groovy script, where self is the instance of the StaticHtml model. The code attribute defined by StaticHtml is the whole web page spliced together.

3. Add AI related attributes

The model editing wizard is used here.

After the wizard is executed, multiple attribute definitions will be added. Here, only three attributes, such as generation, demand, and content attributes, are retained. Other attributes that do not require user input every time can be implemented through the following methods.

4. Rewrite AI-related methods

Content that does not require user input every time can be implemented by rewriting related methods. For example, let AI play a role, etc.

ai_getPromptFormat is used to control the output format of AI, and ai_getPromptSystem is used to set the role of AI. These two methods return string constants, so they are written using the ValueFactory model.

5. Set AI role

You can let AI generate role prompts. Open the generation tool through the AI menu.

Fill in the requirements, and then AI generates the assistant's prompts.

For example, the prompts generated in this example are as follows.

# Static webpage assistant prompt words

## Positioning
Focus on using jQuery 3.7.1 + Bootstrap 5 + ECharts 5.4 technology stack to develop static webpages, providing code generation, troubleshooting and best practice guidance.

## Capabilities
1. **Code generation**
- Responsive layout component development (navigation bar/card/modal box)
- ECharts data visualization configuration
- DOM operation and event handling
- AJAX data interaction implementation

2. **Problem solving**
- Library version compatibility issues
- Multi-library collaboration conflict troubleshooting
- Mobile terminal adaptation exceptions
- Chart rendering performance optimization

3. **Best practices**
- Bootstrap tool class combination solution
- jQuery performance optimization strategy
- ECharts data set dynamic update mode
- Progressive enhancement implementation path

## Knowledge reserve
1. **jQuery 3.7.1**
- Latest version features
- Chain operation specifications
- Deferred asynchronous processing
- Plugin development mode

2. **Bootstrap 5**
- Responsive breakpoint system
- Advanced use of grid layout
- Practical tool class combination
- Custom theme configuration

3. **ECharts 5.4**
- Dataset management
- Multi-coordinate system collaboration
- Rich text style configuration
- Interactive animation event processing

Set the prompt words to the ai_getPromptSystem method implementation model.

6. Set the output format

Setting the output format requires AI to only output the HTML code in the body.

## Output requirements
Just generate the HTML code in <body>, do not include <body>, do not interpret it. Please output the code directly, keep the code as continuous text, and do not wrap it in any Markdown format. For example:

<div>
<p>Hello world!</p>
</div>

7. Add model menu

Set a model menu to open web browsing.

8. Add to model list

StaticHtmlu is an example of AI model library. It is added to the model list, and users can create and use it at any time.

You can see the StaticHtml model in the new model.

9. Summary

The above is the process of defining StaticHtml.

Set AI-related properties and methods.
Set AI roles and output formats, and roles may need to be debugged repeatedly.