dify案例分享-AI 助力初中化学学习：用 Qwen Code+Dify 一键生成交互式元素周期表网页

1.前言

初中化学元素周期表是初中化学学习的重要内容之一，它按照元素的原子序数从小到大排列，将已知的元素系统地分类和排列，帮助学生理解和记忆元素的性质和规律。以下是对初中化学元素周期表的详细说明：

初中化学元素周期表是初中化学学习的重要内容，通过系统学习和记忆，学生可以更好地理解和掌握化学元素的性质和规律。

初中化学元素周期表是初中生学习化学一项非常基础知识点。很多化学方程式都需要熟练掌握这些元素周期表的属性内容。今天我们基于AI 来制作一个元素周期表。

最近阿里Qwen Code 推出每天2000次免费使用Qwen3- Code 模型。那么我们今天就带大家使用Qwen3- Code生成化学元素周期表。

效果如下：

呵呵看起来效果还不错，另外我用dify 使用魔搭社区提供的qwen3-coder-480B-A35B-Instruct模型也做了一个基于dify元素周期表的工作流。效果如下

工作截图如下：

那么这样工作流是和HTML 页面是如何制作的呢？下面就手把手带大家一起做一遍。

2.Qwen Code生成页面制作

首先我们使用阿里开源的Qwen Code 这个项目来执行。那么这个Qwen Code是什么呢？

大家用过claude-code 、gemini-cli 吧其实就是类似这2个基于命令行窗口的辅助编程工具。项目地址github.com/QwenLM/qwen... 使用这个我们首先需要安装这CLI命令（详细步骤这里就不展开了）

安装

shell 复制代码

curl -qL https://www.npmjs.com/install.sh | sh
npm install -g @qwen-code/qwen-code@latest
qwen --version

看到上面的这个页面我们的qwen-code 就安装完成了。模型这里用到qwen3-coder-plus，第一次启动需要页面端授权，授权完成后就可以每天免费使用2000次调用了，哈哈挺爽的。

制作元素周期表

这里我们需要给它创建一个提示词。提示词具体生成我这里就不做详细展开了，提示词内容如下：

yaml 复制代码

# Role: 初中化学元素周期表HTML页面生成专家

## Profile
- Author: 周辉
- Version: 1.0
- Language: 中文
- Description: 专门为初中化学教学设计的元素周期表HTML页面生成专家，能够创建符合初中化学教学大纲要求的交互式元素周期表网页

## Skills
1. 深度理解初中化学元素周期表知识点和教学要求
2. 精通HTML5、CSS3和JavaScript前端技术
3. 具备响应式网页设计能力
4. 了解初中生的认知特点和学习习惯
5. 掌握教育技术和可视化设计原理
6. 熟悉无障碍网页设计标准

## Rules
1. 严格按照初中化学教学大纲要求，只包含初中阶段需要掌握的元素
2. 页面设计必须简洁明了，符合初中生的认知水平
3. 确保所有化学信息的准确性和科学性
4. 代码结构清晰，注释详细，便于教师理解和修改
5. 支持多种设备访问，具备良好的响应式设计
6. 遵循网页无障碍设计原则，确保所有学生都能正常使用
7. 颜色搭配要考虑色盲色弱学生的需求

## Workflow
1. **需求分析阶段**
   - 确认目标用户（初中生和化学教师）
   - 明确教学目标和功能需求
   - 了解技术限制和部署环境

2. **内容规划阶段**
   - 确定需要展示的元素范围（通常为前20个元素）
   - 规划元素信息展示内容（原子序数、元素符号、中文名称、原子量等）
   - 设计交互功能（点击查看详情、搜索、分类等）

3. **界面设计阶段**
   - 设计符合初中生审美的视觉风格
   - 规划布局结构和颜色方案
   - 设计交互效果和动画

4. **代码实现阶段**
   - 编写语义化的HTML结构
   - 实现响应式CSS样式
   - 添加JavaScript交互功能
   - 进行跨浏览器兼容性处理

5. **测试优化阶段**
   - 功能测试和兼容性测试
   - 性能优化和代码优化
   - 教学效果评估和改进

## Initialization
作为初中化学元素周期表HTML页面生成专家，我将为您创建一个专业、实用、符合教学需求的元素周期表网页。

请告诉我您的具体需求：

**基础信息收集：**
1. 目标学段：初一/初二/初三？
2. 元素范围：前18个元素/前20个元素/其他？
3. 主要功能：基础展示/交互查询/练习测试？
4. 设备支持：PC端/移动端/平板/全平台？
5. 特殊要求：是否需要打印友好/离线使用/特定颜色主题？

**技术偏好：**
1. 复杂度：简单静态页面/中等交互/高级功能？
2. 框架选择：原生HTML/Bootstrap/其他框架？
3. 兼容性：现代浏览器/IE兼容/移动端优先？

**教学需求：**
1. 展示信息：元素符号、名称、原子序数、原子量、电子排布？
2. 分类方式：金属/非金属/稀有气体的颜色区分？
3. 交互功能：点击详情/搜索功能/记忆练习？
4. 辅助功能：语音朗读/放大镜/高对比度模式？

我将根据您的需求生成完整的HTML代码，包括：
- 结构清晰的HTML文档
- 美观实用的CSS样式
- 流畅的JavaScript交互
- 详细的代码注释
- 使用说明文档

现在请告诉我您的具体需求，我将为您量身定制最适合的初中化学元素周期表HTML页面！

接下来我们使用这提示词生成化学元素周期表

less 复制代码

@初中化学元素周期表HTML生成提示词.md  请根据这个提示词生成一个基于html页面的118个元素周期表。

最后它按照我们提供的提示词完成了html页面

我们使用浏览器打开上面生成元素周期表：

点开任意元素还可以详细展开这个元素的元素符号、原子量、周期表位置等信息，方便初中生很直观的看到这些元素信息，方便记忆。

2.dify工作流制作

上面的这个通过CLI 命令实现HTML 代码生成，不方便给客户展示，这里我们又制作了一个dify 版本的化学元素周期表。那么接下来我们说一下详细制作过程。

开始

这个开始节点我们这没有设置用户填写信息，主要还是依靠用户的sys.query信息

LLM大语言模型

这个地方我们使用LLM大语言模型通过提示词来生成HTML 代码。这里我们使用魔搭社区提供的qwen3-coder-480B-A35B-Instruct模型

关于魔搭社区提供的这个模型大家可以登录www.modelscope.cn 点击模型库获取详细信息

系统提示词和上面使用的提示词是一样的。

用户提示词内容如下：

less 复制代码

请根据用户输入的提示词{{#sys.query#}}生成初中化学元素周期表HTML

代码处理

对模型输出我们这里用代码来处理。为什么要代码处理呢？因为我们通过提示词生成的代码包含一部分非代码部分的内容，我们需要通过代码把这个处理掉，这样后面调用EdgeOne Pages MCP 或者自定义代码处理生成HTML 这样就简单了。

输入参数 json_html 输入值上个LLM大模型输出

apikey 和apiurl 是我们定义的远程调用服务端代码的apikey 和apiurl

我们在环境变量里面设置

apiurl：http://14.103.204.132:8080/generate-html/

apikey：sk-zhouhuixxx

这个有小伙伴问过这个apikey从哪来的，这个是我们服务端代码自己定义的。

关于服务端代码部署发布和使用可以看我之前的文章dify案例分享-探秘：AI 怎样颠覆财报分析，打造酷炫 HTML 可视化

重点看代码处理生成html调用这部分

服务端代码可以从我开源项目中github.com/wwwzhouhui/... 获取

客户端代码如下

python 复制代码

import json
import re
import time
import requests

def main(json_html: str, apikey: str,apiurl: str) -> dict:
    try:
        # 去除输入字符串中的 ```html 和 ``` 标记
        match = re.search(r'```html\s*([\s\S]*?)```', json_html, re.DOTALL)
        
        if match:
            # group(1) 获取第一个捕获组的内容，即纯HTML代码
            # .strip() 去除可能存在的前后空白
            html_content = match.group(1).strip()
        else:
            # 如果在输入中找不到HTML代码块，则返回错误
            raise ValueError("未能在输入中找到 ```html ... ``` 代码块。")
        
        # 生成时间戳，确保文件名唯一
        timestamp = int(time.time())
        filename = f"makehtml_{timestamp}.html"
        
        # API端点（假设本地运行）
        url = f"{apiurl}"
        
        # 请求数据
        payload = {
            "html_content": html_content,
            "filename": filename  # 使用传入的文件名
        }
        
        # 设置请求头（包含认证token）
        headers = {
            "Authorization": f"Bearer {apikey}",  # 替换为实际的认证token
            "Content-Type": "application/json"
        }
        
        try:
            # 发送POST请求
            response = requests.post(url, json=payload, headers=headers)
            
            # 检查响应状态
            if response.status_code == 200:
                result = response.json()
                html_url = result.get("html_url", "")
                generated_filename = result.get("filename", "")
                
                # 返回结果
                return {
                    "html_url": html_url,
                    "filename": generated_filename,
                    "markdown_result":  f"[点击查看]({html_url})"
                }
            else:
                raise Exception(f"HTTP Error: {response.status_code}, Message: {response.text}")
        
        except requests.exceptions.RequestException as e:
            raise Exception(f"Request failed: {str(e)}")
    
    except Exception as e:
        return {
            "error": f"Error: {str(e)}"
        }

输入变量我这里设置三个html_url、filename、markdown_result 返回的变量类型是string

直接回复

这个直接回复我们这里输出2个值，一个是代码执行返回的URL ，一个是URL markdown地址

以上我们就完成了工作流的制作。

3.验证及测试

我们打开工作流预览按钮。聊天窗口中输入如下提示词

提示词

css 复制代码

生成一个基于html页面的118个元素周期表。代码名称叫做初中化学元素周期表HTML-qwen.html

这次生成的版本还带查询功能页面，呵呵。

体验地址difyhs.duckcloud.fun/chat/UGKtCK...

备用地址（http://14.103.204.132/chat/UGKtCKHMm92GdHtv）

4.总结

今天主要带大家了解并实现了使用 Qwen Code 生成初中化学元素周期表 HTML 页面，以及通过 Dify 搭建对应的元素周期表生成工作流方案。此工作流借助 LLM 大语言模型（Qwen3-coder 系列）生成符合初中教学需求的元素周期表 HTML 代码，再通过代码处理去除冗余内容并生成实际可用的 HTML 页面，大大提升了化学元素周期表的制作效率和交互体验。

该方案不仅解决了手动制作元素周期表网页繁琐、信息易出错、适配性差的问题，还利用大模型的知识储备和代码执行的精准处理，有效平衡了生成速度与教学实用性。通过此工作流，我们能够轻松将化学元素信息以直观、交互性强的 HTML 页面呈现，方便初中生学习和教师教学使用。

感兴趣的小伙伴可以按照本文步骤去尝试搭建自己的元素周期表生成工作流。今天的分享就到这里结束了，我们下一篇文章见。

关注「 wwzhouhui」公众号，点赞分享这篇文章，后台私信："dsl" 领取 dsl 工作流文件。