# page_style_change_ai

**Repository Path**: make_progress_every_day1/page_style_change_ai

## Basic Information

- **Project Name**: page_style_change_ai
- **Description**: AI页面样式修改
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-28
- **Last Updated**: 2025-10-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 模块识别与选择（Next.js + Playwright）

## 本地运行

使用 npm（或改用 yarn/pnpm）：

```bash
npm install
npm run dev
```

首次安装会自动执行浏览器依赖安装（等价于 `npx playwright install`）。

打开浏览器访问 `http://localhost:3000`，输入目标 URL，点击“开始识别”。后端会用 Playwright 打开页面，查找 `data-type="outerContainer"` 的 DOM 元素，为每个元素返回截图与 HTML。

## 提交到第三方接口
- 配置环境变量：在项目根目录创建 `.env.local` 并设置：

```
THIRD_PARTY_ENDPOINT=http://localhost:3001/ingest
```

- 前端在“已选择模块”区域填写需求并点击“提交至第三方”，服务端会把 `{ requirement, html }` 以 JSON POST 到上述地址。

## Windows 注意事项
- 首次运行会下载 Playwright 浏览器二进制，需联网。
- 若网络受限，请预先执行：`npx playwright install`。

## 项目结构
- `app/page.tsx`：URL 输入与结果渲染
- `app/api/scrape/route.ts`：无头浏览器识别逻辑
- `tailwind.config.ts` + `app/globals.css`：样式

## 许可
仅用于内部演示。