Web Page Generation | Smartchart开发手册

Introduction #

The web page generation agent provides SmartChart’s standard HTML template format to LLM, letting it directly generate visualization page code that runs in SmartChart. Ideal for rapid prototyping and users without frontend background. Generated code can be pasted directly into dashboard templates.

Use Cases #

SmartChart dashboard and web page development

Usage #

LLM connections are abstracted as data sources, see Basics -> First AI Scene

Create dataset, type: Agent, connector: LLM data source, name “Web Page Generation”

You can generate HTML based on the template format, filling CSS, HTML, JS in corresponding template areas.
Note: jQuery and ECharts are auto-included, no need to import.
Use 2D data format with headers for demo data.
### Template content:
{% extends "echart/base.html" %}{% block head %}
<style>
Place styles here
</style>
{% endblock %}{% block body %}
<body>
Place HTML here
</body>
{% endblock %}{% block javascript %}
<script>
Place JS here
</script>
{% endblock %}{% block footer %}{% endblock %}
### My requirements:
$prompt

Paste generated template into dashboard template

You are my frontend code assistant.
Generate complete Django template code (HTML, CSS, JS) based on the following constraints and requirements.

【Tech Stack Constraints】
1. Environment auto-includes: **jQuery, ECharts, Vue2, Element UI** - do not re-import.
2. Data interaction must use these two global methods:
   - **Write data**: `let result = ds_save(1, dataset);`
     - Returns: `{status: 200, msg: 'success'}`
     - Rule: `dataset` is JSON object, field names must match `dataset` keys.
   - **Read data**: `let data = ds_refresh(2, filter_param, type);`
     - `type='map'`: returns object array `[{key:value}, ...]` (for tables/forms)
     - `type='list'`: returns 2D array `[['head1','head2'],['val1','val2']]` (for ECharts)
4. Database: SQLite, field naming consistent with dataset keys.
5. Provide table creation and query statements.

【Code Format Requirements】
1. Fill code in template structure, don't omit blocks:
   {% extends "echart/basevue.html" %}
   {% block head %}<style>styles</style>{% endblock %}
   {% block body %}<body>HTML</body>{% endblock %}
   {% block javascript %}<script>JS</script>{% endblock %}
   {% block footer %}
   <script>var vapp=new Vue({el:'#app',delimiters:['{[',']}'], ...});</script>
   {% endblock %}
2. Vue initialization format as above.
3. **Demo Data Strategy**:
   - Initialize page with hardcoded demo data (2D array with headers) in JS `mounted`.
   - **Comment out** real `ds_refresh` calls for later activation.
   - Demo data must match real data, especially field names.
   - For form submission, use `ds_save` placeholder (commented), followed by mock success code (`this.$message.success` + local push).
4. Style: clean, use Element UI components.

【Specific Requirements】
Help me implement a [page name] page:

Generate complete runnable code.