<!-- Three.js WebGPU着色器转换工具 - 详细功能与技术点分析
📋 一、工具核心功能概述
1. 主要功能
实时代码转换：将GLSL（OpenGL着色语言）实时转换为TSL（Three.js着色器语言）或WGSL（WebGPU着色器语言）

双向对比展示：左侧输入GLSL代码，右侧实时显示转换结果

多格式输出：支持TSL和WGSL两种现代图形API的着色器语言

在线编辑与调试：提供完整的代码编辑环境，便于测试和验证

2. 应用场景
WebGL到WebGPU迁移：帮助开发者将现有WebGL项目迁移到WebGPU

着色器学习：对比学习不同着色器语言的语法和特性

代码验证：验证着色器代码在不同图形API下的兼容性

教学演示：展示着色器语言的转换过程和原理

🔧 二、技术架构详解
1. 前端技术栈
Monaco Editor（核心编辑器）
来源：微软开发的代码编辑器，VS Code的核心组件

功能特性：

语法高亮（支持GLSL、JavaScript、WGSL）

代码折叠和智能缩进

自动换行和布局适配

深色主题（vs-dark）

集成方式：通过CDN动态加载，减少初始加载时间

配置细节：

javascript
{
  value: glslCode,          // 初始代码
  language: 'c',            // GLSL使用C语言模式
  theme: 'vs-dark',         // 深色主题保护视力
  automaticLayout: true,    // 响应式布局
  wordWrap: 'on',           // 自动换行
  readOnly: true            // 结果区只读
}
Three.js WebGPU版本
版本特色：专门为WebGPU优化的Three.js分支

模块系统：使用ES6模块导入，支持tree shaking

转换器组件：包含GLSLDecoder、TSLEncoder、WGSLEncoder等核心转换类

2. 转换器架构
Transpiler（转换器核心）
text
输入GLSL → GLSLDecoder解析 → 抽象语法树(AST) → TSLEncoder/WGSLEncoder生成 → 输出代码
解码器（GLSLDecoder）
功能：解析GLSL语法，构建抽象语法树

支持特性：

数据类型（float、vec2、vec3、vec4等）

内置函数（sin、cos、mix、fract等）

控制结构（for循环、条件语句）

函数定义和调用

编码器（TSLEncoder/WGSLEncoder）
TSLEncoder特点：

输出类似JavaScript的语法

与Three.js的TSL系统兼容

保留GLSL的数学函数语义

WGSLEncoder特点：

生成符合WebGPU标准的着色器代码

处理类型系统差异（GLSL到WGSL的类型转换）

适配WebGPU的内存布局和绑定系统

3. 防抖机制（Debouncing）
javascript
// 核心防抖逻辑
editor.getModel().onDidChangeContent(() => {
    if (timeout) clearTimeout(timeout);  // 清除之前的定时器
    timeout = setTimeout(build, 1000);   // 延迟1秒执行转换
});
目的：避免用户每次按键都触发转换，减少性能开销

延迟时间：1000毫秒，平衡响应速度和性能

效果：只有在用户停止输入1秒后才执行转换

🎨 三、界面设计与用户体验
1. 布局结构
text
┌─────────────────────────────────────────────────┐
│ 信息栏：工具说明                              │
├───────────────┬─────────────────────────────────┤
│ 输入格式选择  │ 输出格式选择                   │
├───────────────┼─────────────────────────────────┤
│               │                                 │
│  GLSL源码编辑器 │  TSL/WGSL结果编辑器          │
│  （可编辑）    │  （只读）                      │
│               │                                 │
└───────────────┴─────────────────────────────────┘
2. 视觉设计
颜色方案：深色主题（#222背景，#333控件）

字体选择：Arial等通用字体，确保跨平台一致性

间距控制：使用calc()函数精确计算布局尺寸

响应式设计：自动适应不同屏幕尺寸

3. 交互设计
实时反馈：代码修改后自动转换

错误处理：转换失败时显示详细错误信息

状态保持：下拉选择状态影响后续转换

代码示例：提供完整的Perlin噪声示例便于测试

🔄 四、代码转换过程详解
1. GLSL示例代码分析
glsl
// 经典Perlin噪声实现包含：
// 1. 常量定义（PI）
// 2. 随机数生成函数（rand）
// 3. 基础噪声函数（noise）
// 4. 分形噪声函数（pNoise）
// 5. 使用mix()进行线性插值
// 6. 使用cos()进行平滑处理
2. 转换难点处理
类型系统差异：GLSL的灵活类型 vs WGSL的严格类型

内置函数映射：GLSL函数到WGSL/TSL的对应关系

控制流转换：for循环、条件语句的语法转换

数学精度处理：float精度的保持和转换

3. 转换示例
glsl
// GLSL原始代码
float noise(vec2 p, float freq) {
    float unit = 1.0 / freq;
    vec2 ij = floor(p / unit);
    // ... 更多代码
}

// 转换为TSL后
function noise(p, freq) {
    const unit = 1.0 / freq;
    const ij = floor(divide(p, unit));
    // ... 转换后的代码
}
⚡ 五、性能优化策略
1. 加载优化
CDN加速：Monaco Editor通过jsDelivr CDN加载

按需加载：仅在需要时加载编辑器组件

模块分割：Three.js按模块导入，减少初始包大小

2. 运行优化
防抖处理：减少不必要的转换计算

错误边界：防止转换失败影响整个应用

内存管理：及时清理不需要的资源

3. 缓存策略
本地存储：可扩展为保存用户代码和历史记录

配置记忆：记住用户选择的输入输出格式

🚀 六、扩展性和维护性
1. 模块化设计
javascript
// 清晰的模块边界
- 编辑器模块（Monaco集成）
- 转换器模块（Transpiler及相关编解码器）
- UI模块（布局和交互）
- 配置模块（选项和设置）
2. 可扩展接口
新解码器支持：可添加HLSL、SPIR-V等输入格式

新编码器支持：可添加其他目标语言输出

插件系统：可扩展语法检查、代码美化等插件

3. 配置系统
javascript
const options = {
    decoder: 'GLSL',  // 易于修改和扩展
    encoder: 'TSL',
    // 可添加更多配置项
    theme: 'dark',
    autoConvert: true
}; -->


<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- 
        页面标题：Three.js WebGPU着色器转换工具
        描述：这是一个用于将GLSL着色器语言转换为TSL（Three.js着色器语言）和WGSL（WebGPU着色器语言）的在线转换工具
    -->
    <title>Three.js WebGPU着色器转换器 - GLSL转TSL/WGSL在线工具</title>
    
    <!-- 字符编码设置：UTF-8确保支持中文和特殊字符 -->
    <meta charset="utf-8">
    
    <!-- 
        视口配置：
        - width=device-width: 宽度等于设备宽度
        - user-scalable=no: 禁止用户缩放（保持界面稳定）
        - minimum-scale=1.0, maximum-scale=1.0: 固定缩放比例为1.0
    -->
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    
    <!-- 
        引入外部CSS样式表
        注意：main.css文件应该包含页面的基本样式，如果不存在可能需要创建
    -->
    <link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
    <!-- 
        内联样式定义区域
        这里定义了整个转换器界面的布局、尺寸、颜色等样式
        采用内联样式确保加载速度，避免外部CSS加载延迟导致的布局问题
    -->
    <style>
        /* 
            border-box盒模型：
            - 所有元素使用border-box模型，使宽度和高度包含边框和内边距
            - 便于精确控制布局尺寸，避免计算错误
        */
        * {
            box-sizing: border-box;
        }
        
        /* 
            左侧源码编辑器容器样式：
            - 绝对定位脱离文档流，实现精确布局
            - top: 50px为顶部下拉菜单留出空间
            - calc()函数用于动态计算宽度，减去1px为中间分割线留出空隙
            - 高度计算为总高度减去顶部50px的下拉菜单区域
        */
        #source {
            position: absolute;
            top: 50px;
            left: 0;
            width: calc(50% - 1px); /* 50%宽度减去1px的中间间隙 */
            height: calc(100% - 50px); /* 100%高度减去顶部50px的菜单栏 */
        }
        
        /* 
            右侧结果编辑器容器样式：
            - 与左侧对称布局，占据右侧50%宽度
            - right: 0确保靠右对齐
        */
        #result {
            position: absolute;
            top: 50px;
            right: 0;
            width: 50%;
            height: calc(100% - 50px);
        }
        
        /* 
            左侧下拉菜单区域（编码器选择）：
            - 固定在顶部，z-index: 100确保在其他元素上方
            - 背景色#222（深灰）与编辑器主题匹配
            - 宽度与左侧编辑器容器完全一致
            - text-align: center使下拉菜单居中显示
        */
        #source-dropdown {
            position: absolute;
            top: 0;
            width: calc(50% - 1px);
            z-index: 100;
            padding: 10px;
            background: #222;
            text-align: center;
        }
        
        /* 
            右侧下拉菜单区域（解码器选择）：
            - left: calc(50%)确保从页面中间开始，占据右侧50%
            - 其他样式与左侧下拉菜单保持一致，保持界面对称
        */
        #result-dropdown {
            position: absolute;
            top: 0;
            left: calc(50%);
            width: 50%;
            padding: 10px;
            z-index: 100;
            background: #222;
            text-align: center;
        }
        
        /* 
            下拉选择框样式：
            - 深色背景(#333)与整体暗色主题一致
            - 白色文字确保良好对比度
            - 灰色边框(#555)提供视觉分割
            - padding提供舒适的点击区域
        */
        select {
            background: #333;
            color: white;
            border: 1px solid #555;
            padding: 5px 10px;
        }
        
        /* 
            标签文字样式：
            - 白色文字确保在深色背景上清晰可见
            - 使用通用字体族确保跨平台一致性
            - 14px字体大小适中，易于阅读
        */
        label {
            color: white;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
        
        /* 
            页面信息显示区域：
            - 固定在页面顶部，在编辑器上方显示
            - 浅色背景与下拉菜单形成对比
            - 居中对齐显示工具说明信息
        */
        #info {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            padding: 8px;
            background: #f0f0f0;
            text-align: center;
            font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
            font-size: 13px;
            color: #333;
            border-bottom: 1px solid #ccc;
            z-index: 101; /* 比下拉菜单更高的层级 */
        }
    </style>

    <!-- 
        左侧控制区域：输入格式选择
        - 标签"编码器"表示输入代码的格式
        - 当前仅支持GLSL输入，后续可扩展支持其他格式
    -->
    <div id="source-dropdown">
        <label for="decoder-select">输入格式</label>
        <select id="decoder-select">
            <!-- 目前只支持GLSL作为输入格式，这是WebGL的标准着色器语言 -->
            <option value="GLSL">GLSL (OpenGL着色语言)</option>
            <!-- 未来可扩展的选项示例 -->
            <!-- <option value="HLSL">HLSL (DirectX着色语言)</option> -->
            <!-- <option value="SPIR-V">SPIR-V (中间表示)</option> -->
        </select>
    </div>
    
    <!-- 
        右侧控制区域：输出格式选择
        - 标签"解码器"表示输出代码的格式
        - 支持TSL和WGSL两种输出格式
    -->
    <div id="result-dropdown">
        <label for="encoder-select">输出格式</label>
        <select id="encoder-select">
            <!-- TSL：Three.js Shader Language，Three.js的着色器语言 -->
            <option value="TSL">TSL (Three.js着色器语言)</option>
            <!-- WGSL：WebGPU Shading Language，WebGPU的标准着色器语言 -->
            <option value="WGSL">WGSL (WebGPU着色语言)</option>
        </select>
    </div>
    
    <!-- 
        编辑器容器：
        - #source：左侧源码输入编辑器容器
        - #result：右侧转换结果编辑器容器
        这两个div将由Monaco Editor动态填充为代码编辑器
    -->
    <div id="source"></div>  <!-- GLSL源码输入区域 -->
    <div id="result"></div>  <!-- TSL/WGSL转换结果区域 -->

    <!-- 
        引入Monaco Editor代码编辑器：
        - Monaco Editor是微软开源的代码编辑器，VS Code的核心
        - 这里使用CDN加速加载，版本0.52.2
        - 提供语法高亮、智能提示、代码折叠等专业功能
    -->
    <script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs/loader.js"></script>

    <!-- 
        importmap：JavaScript模块导入映射表
        作用：为ES模块定义别名，简化导入路径
        这是现代浏览器支持的模块加载方式
    -->
    <script type="importmap">
        {
            "imports": {
                "three": "../build/three.webgpu.js",
                "three/webgpu": "../build/three.webgpu.js",
                "three/tsl": "../build/three.tsl.js",
                "three/addons/": "./jsm/"
            }
        }
    </script>

    <!-- 
        主应用程序逻辑模块
        type="module"表示这是一个ES6模块，支持import/export语法
    -->
    <script type="module">
        // ============================================================================
        // 模块导入部分
        // ============================================================================
        
        // 导入Transpiler转换器主类：负责协调解码和编码过程
        import Transpiler from 'three/addons/transpiler/Transpiler.js';
        
        // 导入GLSL解码器：负责解析和理解GLSL语法结构
        import GLSLDecoder from 'three/addons/transpiler/GLSLDecoder.js';
        
        // 导入WGSL编码器：负责生成WGSL格式的代码
        import WGSLEncoder from 'three/addons/transpiler/WGSLEncoder.js';
        
        // 导入TSL编码器：负责生成TSL格式的代码
        import TSLEncoder from 'three/addons/transpiler/TSLEncoder.js';

        // 调用初始化函数启动应用程序
        init();

        // ============================================================================
        // 初始化函数：应用程序入口点
        // ============================================================================
        function init() {
            // 配置Monaco Editor的加载路径
            // 使用CDN上的Monaco Editor资源，确保加载速度
            window.require.config({ 
                paths: { 
                    // vs表示Visual Studio核心编辑器的缩写
                    'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.52.2/min/vs'
                } 
            });

            // 异步加载Monaco Editor主模块
            // require是AMD模块加载器的标准方法
            require(['vs/editor/editor.main'], () => {
                // ====================================================================
                // 配置和变量定义部分
                // ====================================================================
                
                // 转换选项配置对象，存储用户选择的输入输出格式
                const options = {
                    decoder: 'GLSL', // 解码器（输入格式）：默认为GLSL
                    encoder: 'TSL'   // 编码器（输出格式）：默认为TSL
                };

                // 编码器语言与Monaco Editor语言模式的映射关系
                // Monaco Editor需要知道使用哪种语法高亮规则
                const encoderLanguages = {
                    'TSL': 'javascript', // TSL使用JavaScript语法高亮，因为TSL语法类似JS
                    'WGSL': 'wgsl'       // WGSL有专用的语言模式
                };

                let timeout = null; // 防抖定时器，用于延迟转换执行，避免频繁转换

                // 获取编辑器容器DOM元素
                const editorDOM = document.getElementById('source');
                const resultDOM = document.getElementById('result');

                // ====================================================================
                // 默认GLSL示例代码：Perlin噪声生成函数
                // 这是一个经典的GLSL噪声函数，用于展示转换器的能力
                // ====================================================================
                const glslCode = `/*
 * Perlin噪声函数 - GLSL实现
 * 基于经典的Perlin噪声算法
 * 参考：https://gist.github.com/patriciogonzalezvivo/670c22f3966e662d2f83
 * 
 * 函数说明：
 * - rand(): 生成随机数
 * - noise(): 生成基础噪声
 * - pNoise(): 生成分形Perlin噪声
 */

// 定义圆周率常量，用于三角函数计算
const float PI = 3.141592653589793;

// 随机数生成函数
// 使用三角函数和点积生成伪随机数
float rand(vec2 c) {
    return fract(sin(dot(c.xy, vec2(12.9898, 78.233))) * 43758.5453);
}

// 基础噪声函数
// 参数：p - 坐标点，freq - 频率
float noise(vec2 p, float freq) {
    // 计算网格单元大小
    float unit = 1.0 / freq;
    
    // 确定当前点所在的网格单元
    vec2 ij = floor(p / unit);
    
    // 计算在当前网格单元内的相对位置（0-1范围）
    vec2 xy = mod(p, unit) / unit;
    
    // 使用平滑插值函数（余弦插值）替代线性插值
    // 注释掉的是三次插值函数，当前使用的是余弦插值
    // xy = 3.0 * xy * xy - 2.0 * xy * xy * xy;
    xy = 0.5 * (1.0 - cos(PI * xy));
    
    // 获取网格四个顶点的随机值
    float a = rand(ij + vec2(0.0, 0.0));
    float b = rand(ij + vec2(1.0, 0.0));
    float c = rand(ij + vec2(0.0, 1.0));
    float d = rand(ij + vec2(1.0, 1.0));
    
    // 双线性插值：先水平插值，再垂直插值
    float x1 = mix(a, b, xy.x);
    float x2 = mix(c, d, xy.x);
    return mix(x1, x2, xy.y);
}

// 分形Perlin噪声函数（多层噪声叠加）
// 参数：p - 坐标点，res - 分形层数
float pNoise(vec2 p, int res) {
    float persistence = 0.5;  // 持久度，控制每层振幅衰减
    float n = 0.0;            // 噪声累加值
    float normK = 0.0;        // 归一化系数累加值
    float f = 4.0;            // 初始频率
    float amp = 1.0;          // 初始振幅
    int iCount = 0;           // 实际迭代计数器
    
    // 循环叠加多层噪声
    // 最大50层，但根据res参数提前退出
    for (int i = 0; i < 50; i++) {
        n += amp * noise(p, f);  // 添加当前层的噪声
        f *= 2.0;                // 频率加倍（倍频）
        normK += amp;            // 累加振幅用于归一化
        amp *= persistence;      // 振幅按持久度衰减
        
        // 如果达到指定的层数，提前退出循环
        if (iCount == res) break;
        iCount++;
    }
    
    // 归一化处理，确保结果在合理范围内
    float nf = n / normK;
    
    // 四次方处理，增强对比度
    return nf * nf * nf * nf;
}
`;

                // ====================================================================
                // 创建Monaco Editor编辑器实例
                // ====================================================================
                
                // 创建左侧源码编辑器（用于输入GLSL代码）
                const editor = window.monaco.editor.create(editorDOM, {
                    value: glslCode,          // 初始代码内容（Perlin噪声示例）
                    language: 'c',            // 使用C语言模式，因为GLSL语法类似C
                    theme: 'vs-dark',         // 深色主题，适合代码编辑
                    automaticLayout: true,    // 自动调整布局，响应窗口大小变化
                    wordWrap: 'on',           // 启用自动换行，避免水平滚动
                    minimap: { enabled: false } // 禁用右侧迷你地图，节省空间
                });

                // 创建右侧结果编辑器（用于显示转换结果）
                const result = window.monaco.editor.create(resultDOM, {
                    value: '',                // 初始为空，转换后填充
                    language: 'javascript',   // 默认语言模式（TSL用JS模式）
                    theme: 'vs-dark',         // 与左侧一致的深色主题
                    automaticLayout: true,    // 自动调整布局
                    wordWrap: 'on',           // 启用自动换行
                    readOnly: true,           // 只读模式，用户不能编辑转换结果
                    minimap: { enabled: false } // 禁用迷你地图
                });

                // ====================================================================
                // 工具函数定义
                // ====================================================================
                
                /**
                 * 在结果编辑器中显示转换后的代码
                 * @param {string} code - 要显示的转换结果代码
                 */
                const showCode = (code) => {
                    // 设置结果编辑器的值（显示转换后的代码）
                    result.setValue(code);
                    // 滚动到第一行，确保用户看到代码开头
                    result.revealLine(1);
                };

                /**
                 * 执行代码转换的核心函数
                 * 流程：获取输入代码 -> 选择编码器 -> 执行转换 -> 显示结果
                 */
                const build = () => {
                    try {
                        let encoder; // 编码器实例变量

                        // 根据用户选择的输出格式创建对应的编码器
                        if (options.encoder === 'TSL') {
                            // 创建TSL编码器实例
                            // TSL是Three.js的着色器语言，类似JavaScript
                            encoder = new TSLEncoder();
                        } else if (options.encoder === 'WGSL') {
                            // 创建WGSL编码器实例
                            // WGSL是WebGPU的标准着色器语言
                            encoder = new WGSLEncoder();
                        } else {
                            // 未知编码器类型的错误处理
                            throw new Error('不支持的编码器类型: ' + options.encoder);
                        }

                        // 从左侧编辑器获取用户输入的GLSL代码
                        const glsl = editor.getValue();

                        // 创建GLSL解码器实例
                        // 解码器负责解析GLSL语法，理解代码结构
                        const decoder = new GLSLDecoder();

                        // 创建转换器实例，传入解码器和编码器
                        // Transpiler是转换器的核心，协调整个转换过程
                        const transpiler = new Transpiler(decoder, encoder);
                        
                        // 执行转换：parse方法将GLSL解析为中间表示，然后编码为目标格式
                        const tsl = transpiler.parse(glsl);

                        // 在右侧编辑器中显示转换结果
                        showCode(tsl);

                    } catch (e) {
                        // 错误处理：捕获转换过程中的任何异常
                        // 在结果编辑器中显示错误信息，帮助用户调试
                        result.setValue('转换错误: ' + e.message);
                        
                        // 可以进一步扩展的错误处理：
                        // 1. 显示错误行号和位置
                        // 2. 提供错误修复建议
                        // 3. 记录错误日志
                    }
                };

                // 初始化构建：页面加载后立即执行一次转换
                // 显示默认示例代码的转换结果
                build();

                // ====================================================================
                // 事件监听器设置
                // ====================================================================
                
                /**
                 * 监听源码编辑器的内容变化事件
                 * 使用防抖技术避免频繁转换，提高性能
                 */
                editor.getModel().onDidChangeContent(() => {
                    // 清除之前设置的定时器（防抖）
                    if (timeout) clearTimeout(timeout);
                    
                    // 设置新的定时器，延迟1000毫秒后执行转换
                    // 用户停止输入1秒后才执行转换，避免频繁计算
                    timeout = setTimeout(build, 1000);
                });

                // 获取下拉菜单的DOM元素
                const decoderSelect = document.getElementById('decoder-select');
                const encoderSelect = document.getElementById('encoder-select');

                /**
                 * 监听输入格式（解码器）选择变化事件
                 * 用户改变输入格式时触发
                 */
                decoderSelect.addEventListener('change', () => {
                    // 更新配置对象中的解码器类型
                    options.decoder = decoderSelect.value;
                    // 执行新的转换
                    build();
                    
                    // 注意：当前版本只支持GLSL输入
                    // 未来扩展时，这里需要根据选择的解码器调整编辑器语言模式
                });

                /**
                 * 监听输出格式（编码器）选择变化事件
                 * 用户改变输出格式时触发
                 */
                encoderSelect.addEventListener('change', () => {
                    // 更新配置对象中的编码器类型
                    options.encoder = encoderSelect.value;

                    // 根据选择的编码器类型设置结果编辑器的语言模式
                    // 这会影响语法高亮、代码提示等功能
                    const language = encoderLanguages[encoderSelect.value];
                    window.monaco.editor.setModelLanguage(result.getModel(), language);

                    // 使用新的编码器重新执行转换
                    build();
                    
                    // 扩展建议：
                    // 可以在这里添加编码器切换时的动画效果
                    // 可以保存用户的选择到localStorage，记住用户偏好
                });

                // ====================================================================
                // 扩展功能建议（代码注释，实际未实现）
                // ====================================================================
                
                /*
                // 1. 添加代码示例库
                const examples = {
                    'perlin': glslCode,
                    'simple': `void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); }`,
                    'gradient': `// 渐变着色器示例...`
                };
                
                // 2. 添加错误高亮显示
                function highlightError(line, column) {
                    // 在编辑器中高亮显示错误位置
                }
                
                // 3. 添加转换统计信息
                function showStats(originalSize, convertedSize) {
                    // 显示代码大小变化、转换时间等信息
                }
                
                // 4. 添加导出功能
                function exportCode(format) {
                    // 将转换结果导出为文件
                }
                */
                
            }); // require回调函数结束
        } // init函数结束
        
        // ============================================================================
        // 全局变量和辅助函数（如果需要）
        // ============================================================================
        
        // 可以将一些工具函数放在这里，例如：
        // - 代码格式化函数
        // - 语法验证函数
        // - 性能统计函数
        
    </script>
</body>
</html>