第62章　WebRenderer

1. Web 表现

WebRenderer 是 SATE 中专门面向 Web 环境的 Renderer。

上一章已经确定：

Expression
    ↓
Template
    ↓
Renderer
    ↓
Rendered Result
    ↓
Adapter
    ↓
Output

其中 WebRenderer 的职责是：

将 Expression 中已经确定的结构化表现数据，按照 Web Template 转换为 Web 表现结果。

WebRenderer 本身不负责：

感知
认知
理解
推理
决策
学习
记忆
业务知识产生

它只负责 Web 表现。

WebRenderer 的基本输出可以是：

HTML
CSS
JavaScript

但三者职责不同：

HTML
↓
定义页面结构

CSS
↓
定义页面表现

JavaScript
↓
定义页面交互

因此：

WebRenderer
    ├── HTML
    ├── CSS
    └── JavaScript

这些内容最终共同构成 Web 页面。

2. HTML

HTML 是 WebRenderer 最主要的结构表现形式。

HTML 负责描述：

页面
 ├── Header
 ├── Navigation
 ├── Main
 ├── Section
 ├── Article
 ├── Form
 ├── Table
 └── Footer

例如：

<div class="product">
    <h1>{{name}}</h1>
    <p>{{description}}</p>
    <span>{{state}}</span>
</div>

这里的 HTML 本身只是结构。

经过 SATE Template 处理：

Template
    ↓
Variable Mapping
    ↓
HTML

例如数据：

Product
{
    name: "Product A",
    description: "Product description",
    state: "available"
}

最终：

<div class="product">
    <h1>Product A</h1>
    <p>Product description</p>
    <span>available</span>
</div>

因此 WebRenderer 可以把结构化 Expression 转换为 HTML。

3. CSS

CSS 负责 Web 表现的视觉结构。

例如：

.product {
    padding: 20px;
    border: 1px solid #ddd;
}

.product-title {
    font-size: 24px;
}

.product-state {
    font-weight: bold;
}

HTML：

<div class="product">
    <h1 class="product-title">
        Product A
    </h1>

    <span class="product-state">
        Available
    </span>
</div>

HTML 与 CSS 的关系：

HTML
 ↓
结构

CSS
 ↓
样式

Browser
 ↓
Web表现

WebRenderer 可以将 Template 中定义的 HTML 与 CSS 组合成完整 Web 表现。

例如：

WebTemplate
{
    html: "...",
    css: "..."
}

经过：

WebRenderer

形成：

Rendered Web Result
{
    html: "...",
    css: "..."
}

CSS 不负责改变 ICAI 的认知结果。

例如：

.state-warning {
    font-weight: bold;
}

它只是表现：

state = warning

而不是产生：

state = warning

状态本身应该由前面的认知、规则、推理或行动系统产生。

4. JavaScript

JavaScript 在 WebRenderer 中主要用于 Web 页面交互。

例如：

document.getElementById('saveButton')
    .addEventListener('click', function () {
        console.log('save');
    });

它可以负责：

点击事件
页面交互
表单操作
页面状态变化
请求接口
数据提交
页面局部更新

但需要明确 WebRenderer 的边界。

例如：

User Click
    ↓
JavaScript
    ↓
API Request
    ↓
External/System Handler

JavaScript 本身不应该被定义为 ICAI 的认知引擎。

特别是：

JavaScript
≠ Cognition

JavaScript
≠ Reasoning

JavaScript
≠ Decision

它只是 Web 环境中的表现和交互机制。

例如按钮：

<button id="saveButton">
    Save
</button>

JavaScript：

document.getElementById('saveButton')
    .addEventListener('click', function () {
        // 发起保存请求
    });

按钮的点击行为属于 Web 交互。

真正的业务处理仍然可以进入系统：

Web
 ↓
Request
 ↓
Controller
 ↓
System
 ↓
Result
 ↓
Expression
 ↓
WebRenderer
 ↓
HTML Response

5. Template → HTML

SATE Template 是 WebRenderer 产生 HTML 的重要输入。

基本流程：

Template
    ↓
TemplateEngine
    ↓
TemplateContext
    ↓
Variable / Property / Condition / Loop
    ↓
WebRenderer
    ↓
HTML

例如 Template：

<div class="product">

    <h1>{{Product.name}}</h1>

    <p>
        Price: {{Product.price}}
    </p>

    {{if Product.state == "available"}}

        <span>Available</span>

    {{else}}

        <span>Unavailable</span>

    {{/if}}

</div>

Context：

Product
{
    name: "Electric Toothbrush",
    price: 29.90,
    state: "available"
}

TemplateEngine 首先解析：

{{Product.name}}
{{Product.price}}
{{if ...}}

然后建立结构：

Product
 ├── name
 ├── price
 └── state

条件：

Product.state == "available"

计算：

TRUE

最终 WebRenderer 得到：

<div class="product">

    <h1>Electric Toothbrush</h1>

    <p>
        Price: 29.90
    </p>

    <span>Available</span>

</div>

这里有一个重要区别：

Template
↓
规定表现结构

TemplateEngine
↓
处理模板结构

WebRenderer
↓
形成 Web 表现结果

所以不能把 Template 和 Renderer 混为一个组件。

6. Expression → Web

Expression 是 WebRenderer 的另一个核心输入。

例如 ICAI 已经完成一次行动：

Decision
 ↓
Behavior
 ↓
Action
 ↓
ActionResult

得到：

ActionResult
{
    action_id: 1001,
    state: "SUCCESS",
    output: {
        order_id: 5001,
        product: "Product A",
        quantity: 100
    }
}

形成 Expression：

Expression
{
    type: "RESULT",
    target: "WEB",
    data: {
        order_id: 5001,
        product: "Product A",
        quantity: 100
    }
}

WebRenderer 接收：

Expression
+
WebTemplate

然后：

Expression
    ↓
Template Context
    ↓
Template Processing
    ↓
WebRenderer
    ↓
HTML

Template：

<div class="result">

    <h2>Order Result</h2>

    <p>Order ID: {{order_id}}</p>

    <p>Product: {{product}}</p>

    <p>Quantity: {{quantity}}</p>

</div>

最终：

<div class="result">

    <h2>Order Result</h2>

    <p>Order ID: 5001</p>

    <p>Product: Product A</p>

    <p>Quantity: 100</p>

</div>

所以：

Expression
    ↓
WebRenderer
    ↓
Web Representation

WebRenderer 不创造订单。

订单已经存在于 ActionResult / Expression 中。

7. Response

WebRenderer 完成 HTML 表现之后，还需要形成 Web Response。

完整过程：

Expression
    ↓
WebTemplate
    ↓
TemplateEngine
    ↓
WebRenderer
    ↓
HTML
    ↓
Response

Response 可以包含：

Response
{
    status
    headers
    content_type
    body
}

例如：

Response
{
    status: 200,
    headers: {
        "Content-Type": "text/html; charset=UTF-8"
    },
    content_type: "text/html",
    body: "<html>...</html>"
}

这里需要区分：

Renderer
↓
负责产生表现结果

Adapter
↓
负责向目标环境输出

HTTP Response
↓
Web环境中的具体输出形式

因此完整关系可以表示为：

WebRenderer
    ↓
Rendered HTML
    ↓
WebAdapter
    ↓
HTTP Response
    ↓
Browser

如果 Renderer 已经生成：

<h1>Product A</h1>

WebAdapter 再把它作为 HTTP Response 输出：

HTTP/1.1 200 OK
Content-Type: text/html

<h1>Product A</h1>

这样 Renderer 和 Adapter 的职责仍然保持独立。

8. Web 完整案例

下面建立一个完整的 WebRenderer 案例。

假设 ICAI 已经产生一个结构化结果：

Expression
{
    id: 3001,
    type: "RESULT",
    target: "WEB",

    data: {
        title: "Product Information",

        product: {
            name: "Electric Toothbrush",
            price: 29.90,
            state: "available"
        }
    }
}

第一步：建立 Web Template

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">

    <title>{{title}}</title>

    <style>
        .product {
            padding: 20px;
            border: 1px solid #ddd;
        }

        .product-name {
            font-size: 24px;
        }
    </style>

</head>

<body>

<div class="product">

    <h1>{{product.name}}</h1>

    <p>
        Price: {{product.price}}
    </p>

    {{if product.state == "available"}}

        <p>Product is available.</p>

    {{else}}

        <p>Product is unavailable.</p>

    {{/if}}

</div>

</body>
</html>

第二步：TemplateEngine 处理

TemplateEngine 读取：

{{title}}
{{product.name}}
{{product.price}}
{{product.state}}

形成变量映射：

title
    ↓
Product Information

product.name
    ↓
Electric Toothbrush

product.price
    ↓
29.90

product.state
    ↓
available

条件：

product.state == "available"

结果：

TRUE

因此选择：

<p>Product is available.</p>

第三步：WebRenderer

WebRenderer 接收到已经处理的 Template 结构：

WebTemplate
    +
Expression

然后形成最终 Web 表现：

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">

    <title>Product Information</title>

    <style>
        .product {
            padding: 20px;
            border: 1px solid #ddd;
        }

        .product-name {
            font-size: 24px;
        }
    </style>

</head>

<body>

<div class="product">

    <h1>Electric Toothbrush</h1>

    <p>
        Price: 29.90
    </p>

    <p>Product is available.</p>

</div>

</body>
</html>

第四步：形成 Response

WebRenderer：

WebRenderer
    ↓
HTML Result

WebAdapter：

HTML Result
    ↓
HTTP Response

最终：

Response
{
    status: 200,

    headers: {
        Content-Type:
        "text/html; charset=UTF-8"
    },

    body: "<!DOCTYPE html>..."
}

WebRenderer 完整结构

第62章可以最终形成：

                         ICAI
                           ↓
                       Expression
                           ↓
                         SATE
                           ↓
                        Template
                           ↓
                    TemplateEngine
                           ↓
                     WebRenderer
                           ↓
              ┌────────────┼────────────┐
              ↓            ↓            ↓
             HTML          CSS      JavaScript
              └────────────┼────────────┘
                           ↓
                     Web Result
                           ↓
                      WebAdapter
                           ↓
                    HTTP Response
                           ↓
                        Browser

其中各层职责：

Expression
    = 表现内容

Template
    = 表现结构

TemplateEngine
    = 模板处理

WebRenderer
    = Web表现转换

HTML
    = 页面结构

CSS
    = 页面样式

JavaScript
    = 页面交互

WebAdapter
    = Web输出

Response
    = HTTP表现结果

核心定义

WebRenderer 是 SATE 面向 Web 环境的 Renderer，用于将 Expression 中已经确定的结构化表现数据按照 Web Template 转换为 HTML、CSS、JavaScript 等 Web 表现结果，并通过 Web Adapter 形成最终 Web Response。

最终模型：

Expression
    ↓
Web Template
    ↓
TemplateEngine
    ↓
WebRenderer
    ↓
HTML / CSS / JavaScript
    ↓
Web Result
    ↓
WebAdapter
    ↓
HTTP Response

最重要的边界是：

ICAI
负责产生认知结果

Expression
负责定义表现内容

SATE
负责模板表现处理

WebRenderer
负责 Web 表现转换

WebAdapter
负责 Web 输出

WebRenderer 不属于 ICAI 的认知、推理或决策系统，而属于 SATE 的表现层。

第62章 WebRenderer

第62章 WebRenderer

1. Web 表现

2. HTML

3. CSS

4. JavaScript

5. Template → HTML

6. Expression → Web

7. Response

8. Web 完整案例

第一步：建立 Web Template

第二步：TemplateEngine 处理

第三步：WebRenderer

第四步：形成 Response

WebRenderer 完整结构

核心定义