Vibe CodingIntroduction to AI
and Computer
Science

请生成一个可直接运行的图灵机模拟器网页，保存为一个单独的 HTML 文件。

## 最重要要求

这个 HTML 文件必须能直接双击打开使用，不需要安装任何软件，不需要运行任何命令，不需要本地服务器，不需要联网。
- 所有代码、样式、资源全部内联在这个 HTML 文件里
- 不许使用 <script type="module">
- 不许从网络加载任何内容（完全离线可用）
- 不许写任何需要用户额外操作的代码

## 技术方案

用 React 18 实现（它有 UMD 格式，可以直接内联到 HTML 中）。
React 和 ReactDOM 的 UMD 文件从 https://unpkg.com/react@18/umd/ 下载后内联。
用 esbuild 的 build() API 将源码打包成 IIFE 格式内联到 HTML。
jsx 用经典模式（React.createElement），不要用 automatic JSX runtime。
所有 CSS 内联在 <style> 标签中。
Lucide 图标用内联 SVG 替代，不要引入图标库。

## 功能要求

制作一个交互式图灵机模拟器，面向大学课堂投影教学，中文界面。

### 核心界面

页面打开后直接显示模拟器（不要宣传首页）。第一视觉重点是横向纸带。每个格子显示一个符号，当前格子高亮，读写头在格子上方。
纸带可以向左右无限扩展（内部用 Map<number, string> 实现，只渲染读写头周围 15 格的窗口）。
纸带上方显示状态寄存器，包括：当前状态、当前读取符号、执行步数、运行状态（就绪/运行中/已暂停/接受/拒绝/已停机/错误）。

### 控制功能

- Demo 选择菜单（三个内置示例）
- 输入字符串 + 应用输入按钮
- 重置按钮
- 单步执行按钮
- 连续运行 / 暂停按钮
- 后退一步按钮
- 执行速度滑块
- 转移规则表（支持添加、删除、编辑规则，检查重复规则）
- 执行日志（显示中文步骤说明和形式化 δ 规则）
- 自定义图灵机编辑器（编辑状态集、字母表、规则等）
- 导入 / 导出 JSON 文件

### 特殊符号约定

- ⊢ 输入左边界；⊣ 输入右边界；□ 空白符
- 初始状态 q0；接受状态 q_accept；拒绝状态 q_reject
- 支持 L（左移）、R（右移）、S（不动）三种移动
- 如果当前状态+读取符号没有对应规则，显示“未定义转移”并停机（不许报错）
- 设置最大执行步数（如 1000 步）防止无限循环

### 三个内置示例

1. 一进制加法：输入 11101111（表示 3+4），运行后得到 1111111。动画展示扫描第一个操作数、删除分隔符、扫描第二个操作数、停机。
2. 二进制加一：输入 1011 输出 1100，111 输出 1000。正确处理进位和全 1 的情况。
3. 二进制回文识别：1001 进入接受状态，1010 进入拒绝状态。展示标记首尾字符、来回扫描的过程。

### 动画效果

每一步的动画按顺序播放：读取高亮→规则高亮→写入淡入淡出→读写头移动→状态更新。
连续运行时也必须按阶段播放，不能直接跳到最终结果。速度滑块能明显控制动画快慢。后退一步能恢复纸带、读写头和位置。

### 教学反馈

执行日志显示可读的中文步骤，同时显示形式化规则，例如：
δ(q0, 1) = (q1, 0, R)

停机后显示结果摘要：是否接受、总步数、最终状态、最终纸带内容、停机原因。

### 自定义模式

用户可以编辑：状态集合、输入字母表、纸带字母表、空白符、左右边界符、初始状态、接受状态、拒绝状态、初始纸带内容、读写头初始位置、转移规则。
支持用表格编辑规则，也支持粘贴文本格式的规则（如 q0,1 -> q1,0,R）。修改配置后可以立即重置并运行。

## 工程质量

- 不要把所有代码写在一个组件里，保持代码结构清晰
- 图灵机执行引擎要写成独立的模块，与界面分离
- 页面不能有文字重叠、按钮溢出或纸带格子变形
- 按钮用图标+文字，适配电脑和平板屏幕
- 为图灵机引擎写单元测试，覆盖三个示例的预期结果、负坐标移动、空白格读写、未定义规则、后退恢复和最大步数停止
- 不要留下 TODO、占位按钮或不可用功能
- 运行测试确认全部通过

Create a fully runnable interactive Turing Machine simulator as a single HTML file.

## Most important requirements

The HTML file must work by double-clicking it directly. It must not require software installation, commands, a local server, or an internet connection.
- Inline every piece of code, styling, and asset in this one HTML file.
- Do not use <script type="module">.
- Do not load anything from the network; it must work completely offline.
- Do not require any extra action from the user beyond opening the file.

## Technical approach

Build it with React 18 using its UMD build, which can be inlined directly in HTML.
Download the React and ReactDOM UMD files from https://unpkg.com/react@18/umd/ and inline them.
Use esbuild's build() API to bundle the source into an IIFE and inline it.
Use classic JSX mode (React.createElement), not the automatic JSX runtime.
Put all CSS in a <style> tag.
Replace Lucide icons with inline SVG; do not import an icon library.

## Functional requirements

Create an interactive Turing Machine simulator for Chinese university classroom projection. The interface language should be Chinese.

### Main interface

Open directly to the simulator, with no marketing landing page. Make the horizontal tape the primary visual focus. Each cell shows a symbol, the current cell is highlighted, and the read/write head sits above it.
The tape must expand infinitely in both directions (use Map<number, string> internally and render only a 15-cell window around the head).
Above the tape, show registers for: current state, currently read symbol, step count, and status (ready / running / paused / accepted / rejected / halted / error).

### Controls

- Demo picker with three built-in examples
- Input string and Apply Input button
- Reset
- Single step
- Run / Pause
- Step back
- Speed slider
- Transition-rule table with add, delete, edit, and duplicate-rule detection
- Execution log with readable Chinese steps and formal δ rules
- Custom Turing-machine editor for states, alphabets, and rules
- JSON import and export

### Symbol conventions

- ⊢ is the left input boundary, ⊣ the right input boundary, and □ the blank symbol.
- Initial state q0, accepting state q_accept, rejecting state q_reject.
- Support L, R, and S moves.
- If no rule exists for the current state and symbol, show “未定义转移” and halt without throwing an error.
- Add a maximum-step setting (for example 1000) to prevent infinite loops.

### Three built-in examples

1. Unary addition: input 11101111 represents 3+4 and must produce 1111111. Animate scanning the first operand, deleting the separator, scanning the second operand, and halting.
2. Binary increment: 1011 becomes 1100 and 111 becomes 1000. Correctly handle carry and all-ones inputs.
3. Binary palindrome recognition: 1001 accepts and 1010 rejects. Show marking the first and last characters and scanning back and forth.

### Animation

For every step, animate in this order: read highlight → rule highlight → write fade → head movement → state update.
Continuous running must preserve these phases rather than jumping to the final result. The speed slider must clearly affect the animation speed. Step back must restore the tape, head, and state.

### Teaching feedback

The execution log must show readable Chinese descriptions and formal rules, for example:
δ(q0, 1) = (q1, 0, R)

After halting, show a result summary: accepted or not, total steps, final state, final tape content, and halt reason.

### Custom mode

Allow editing the state set, input alphabet, tape alphabet, blank symbol, boundary symbols, initial state, accepting state, rejecting state, initial tape, initial head position, and transition rules.
Support both a table editor and pasted textual rules such as q0,1 -> q1,0,R. After editing, the configuration must be resettable and runnable immediately.

## Engineering quality

- Do not put all code in one component; keep the code structure clear.
- Implement the Turing-machine engine as a separate module from the interface.
- Avoid overlapping text, overflowing buttons, and distorted tape cells.
- Use icon-plus-text buttons that work on desktop and tablet screens.
- Write unit tests for the engine covering all three example results, negative-coordinate movement, blank reading and writing, undefined transitions, undo restoration, and maximum-step stopping.
- Leave no TODOs, placeholder buttons, or nonfunctional controls.
- Run the tests and confirm that all pass.

使用完整提示词作为起点，与 coding agent 多轮对话、测试并解释你最终完成的实现。