「乡村教师教学助手」是一款基于Web技术的智能教育工具，旨在为乡村教师提供AI辅助教学、资源管理和个性化学习支持。应用采用现代化的前端技术栈，具有响应式设计，能够在不同设备上提供良好的用户体验。

## 技术栈选择
### 前端技术
- HTML5/CSS3 : 基础页面结构和样式
- JavaScript (原生) : 核心交互逻辑和功能实现
- Tailwind CSS v3 : 原子化CSS框架，提供快速开发和响应式设计
- Font Awesome 4.7.0 : 图标库，提供丰富的界面图标
- Chart.js 4.4.8 : 数据可视化库，用于统计图表展示
- Particles.js 2.0.0 : 粒子效果库，增强用户界面视觉体验
### 存储方案
- localStorage : 用于本地存储API密钥、用户登录状态等信息，确保页面刷新后保持用户状态

第一步：设计提示词

我要制作一个网页版的乡村教师工具，以下是提示词：
搭建一个多功能模块聊天助手网页：【帮助乡村教师大大提高备课效率、教学效果】

用于为乡村教师提供教学工具，更高效地完成教学任务，减轻教学负担
覆盖阶段：小学、初中、高中
## 功能描述/功能点 

1. 【设置API KEY】要求用户首先输入真实的API KEY才可进入网页（并提醒，可访问 https://www.modelscope.cn/my/myaccesstoken      链接获取访问令牌）
2. 【设置用户登录页面】用户可以注册个人账号并保存数据，下次可以登录。
2. 【功能介绍】简短介绍下列功能区用途及使用方法，帮助用户了解使用。
3. 【功能点1】用户知识库：用户可以在此上传私人文件、文档、图片、PPT、PDF、教材材料等，要有查看、添加、删除功能。
4. 【功能点2】AI智能助手：根据用户提出的问题，利用大模型深度思考，检索全网及用户知识库，输出关键要点、详细知识点、思考流程及注意事项，来帮助用户理解学习。必须确保内容知识点的准确性并链接标注出信息来源！输出结构进行渲染。
5. 【功能点3】图片处理：用户可上传图片并提出修改要求如去除水印等，利用下列提供的多模态大模型API，对图片进行深入理解，并按照用户要求进行修改，实现文生图功能，根据用户输入的文本进行绘图，需提供效果预览及下载保存功能。
6. 【功能点4】教案生成器：用户可上传文件，并提出制作要求。如按照上传文件格式生成其他主题的教案。利用大模型深度理解并制作输出，需提供下载保存功能。
7 【功能点5】题海生成：帮助用户生成习题，用户可自行设置习题类型、习题内容、习题数量、习题难易程度，需提供下载保存功能。
8. 【页面设计】整个网页设计，以淡绿色为主色调，清新美观，添加一些动态效果、粒子飘落特效、音效等。

## 技术栈与兼容性要求

网页基于【static HTML】实现。注意不要编写模拟实现的代码

## AI调用示例

```多模态大模型调用示例

/*这个模型可以识别图片，并根据输入的文字指令完成任务*/

return fetch("https://api-inference.modelscope.cn/v1/chat/completions     ",{

    method:"POST",

    headers:{

      "Content-Type":"application/json",

      "Authorization":"Bearer " + token

    },

    body:JSON.stringify({

      model:"Qwen/Qwen3-VL-30B-A3B-Instruct",

      messages:[{role:"user",content:[{"type": "image_url", "image_url": {"url": xxx}}, {"type": "text", "text": prompt}]}],

      max_tokens:2048,

      temperature:0.7,

      enable_thinking: false

    })

  }).then(r => {

    if (!r.ok) {

      throw new Error(HTTP error! status: ${r.status});

    }

    return r.json();

  })

```

```文生图模型调用示例

/*这个模型可以根据输入的文字生成图片*/

async function generateImage(token, prompt) {

  const response = await fetch("https://api-inference.modelscope.cn/v1/images/generations     ", {

    method: "POST",

    headers: {

      "Content-Type": "application/json",

      "Authorization": "Bearer " + token,

    },

    body: JSON.stringify({

      model: "black-forest-labs/FLUX.1-Krea-dev",   // 文生图模型 ID

      prompt: prompt              // 文本提示，例如 "A golden cat sitting on a windowsill"

    })

  });

  if (!response.ok) {

    throw new ErrorHTTP error! status: ${response.status});

  }

  const result = await response.json();

  return result;

}

// 使用示例

const token = "your_modelscope_api_token";

const prompt = "A golden cat";

generateImage(token, prompt)

  .then(data => console.log(data))

  .catch(error => console.error("Error:", error));

```

第二步：利用IDE解析重构项目

        因为通过大模型工具生成的网页开发是一整个文件index.html，如果需要修改变更的话很不方便，代码堆积也很难查看，所以需要进行重构项目，这边就利用trae实现。

第三步：功能调试及撰写README.md

第四步：最终预览

        先查看预览效果，是否报错，功能是否完善，成功可待后续美化渲染