diff --git "a/Docs/Development_Docs/\345\274\200\345\217\221\350\256\241\345\210\222.md" "b/Docs/Development_Docs/\345\274\200\345\217\221\350\256\241\345\210\222.md" new file mode 100644 index 0000000000000000000000000000000000000000..910ac00f77c9b1f38382d1a6143e89fc7e1d9db1 --- /dev/null +++ "b/Docs/Development_Docs/\345\274\200\345\217\221\350\256\241\345\210\222.md" @@ -0,0 +1,26 @@ +# 开发计划 + + + +### **阶段 1：图像模型训练与调优（07月01日-08月10日）** + +- 收集和标注数据集，利用传统图像处理方法进行图像预处理。 +- 训练图像分割模型（ResNet/U-Net/其他）。 +- 训练文字识别模型（OCR），并结合图像识别结果生成图片描述json文件。 + +### **阶段 2：大模型代码生成（08月10日-08月30日）** + +- 向量化 OpenInula组件库。 +- 集成图像分割、OCR，生成prompt， 调用大语言模型API生成代码。 + +### **阶段 3：系统前后端开发 （08月30日-09月15日）** + +- 开发后端功能和数据库。 +- 利用大模型生成OpenInula代码，开发前端页面。 +- 进行系统测试和调试。 + +### **阶段 4：项目总结（09月15日-09月30日）** + +- 思考项目可改进的地方 +- 撰写项目说明文档、技术文档 + diff --git "a/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\200\357\274\211.md" "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\200\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..666fca0e2554d51b992314619a7cbab4d4747f3a --- /dev/null +++ "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\200\357\274\211.md" @@ -0,0 +1,675 @@ +# 过程记录（阶段一） + +[TOC] + +## 目标 + +- 收集和标注数据集，利用传统图像处理方法进行图像预处理。 +- 训练图像分割模型（ResNet/U-Net/其他），生成图片描述json文件。 + + + +## 数据收集与标注 + +数据收集和标注。搜索和收集相关的图像数据，进行人工标注。 + +图像数据：https://public.roboflow.com/object-detection/website-screenshots + +标注工具：[**X-AnyLabeling**](https://github.com/CVHub520/X-AnyLabeling/tree/main) + +辅助标注模型：SAM + +首先，决定要用什么组件annotation + +#### 组件标签选择 + +- 标签及其介绍 + + **细分组件** 参考组件库文档 + + | **Header** | 网页的头部区域 | **Form** | 表单 | **Pagination** | 分页 | + | ------------ | -------------- | ---------- | ------ | -------------- | ------ | + | **Footer** | 网页的底部区域 | **Link** | 超链接 | **Tabs** | 标签页 | + | **Navbar** | 导航栏 | **Table** | 表格 | | | + | **Sidebar** | 侧边栏 | **Card** | 卡片 | | | + | **Button** | 按钮 | **Modal** | 弹窗 | | | + | **Text** | 文本 | **Icon** | 图标 | | | + | **Image** | 图片 | **Logo** | logo | | | + | **Input** | 输入框 | **Slider** | 滑块 | | | + | **Checkbox** | 复选框 | **Search** | 搜索框 | | | + | **Radio** | 单选框 | **Select** | 选择框 | | | + | **Dropdown** | 下拉菜单 | **Video** | 视频 | | | + + + +## YOLO模型测试 + +训练： + +```xml +yolo detect train data=datasets\\page_seg\\page.yaml model=ultralytics\\cfg\\models\\v8\\yolov8.yaml pretrained=yolov8n.pt epochs=100 batch=4 lr0=0.01 resume=True +``` + +测试： + +```xml +yolo predict model=runs\\detect\\train28\\weights\\best.pt source=datasets\\page_seg\\test-images\\bitfinex_com_png.rf.5ynRIc7FwyQbQGejn5Gb.jpg +``` + +- 阶段一： + + 标注50张图片，用YOLO v8进行训练，测试部分结果如下： + + ![](https://p.ipic.vip/z2bfma.png) + + 这个结果还不错。主要问题是右上Input识别成Button。 + + ![](https://p.ipic.vip/7gczpy.png) + + 很明显这个识别就很差。主要页面相当于是一个table，完全没有识别到。Search组件识别的也很混乱。 + + **上图2的效果不好，但是在工业界，以Form表单为主的前端项目非常多（比如一些管理项目，有各种查询、提交的表单），下一步准备数据集中多加入含Form表单的页面，使模型提高对表单以及表单内组件的识别精度。（ ❗重要）** + + + +## 数据集修改 + +找到一些antd代表页面，对其截图并进行手动标签标注。一部分标签用传统视觉模型自动标注。 + +示例页面：[Ant Design Pro](https://preview.pro.ant.design/dashboard/analysis) + + + +#### Ant Design组件属性识别 + +在上周用Button进行测试的基础上，扩展到所有组件。 + +1. 原始数据： + +YOLO目标检测数据以json形式保存后，通过手动标注添加组件属性，示例： + +```json +{ + "components": [ + { + "id": "component_1", + "type": "Button", + "attributes": { + "shape": "round", // 手动标注 + "icon": true, // 手动标注 + }, + "position": { + "x": 50, + "y": 100, + "width": 80, + "height": 30 + } + }, + ] +} +``` + +2. 数据集加载 + +在加载数据集时，定义detect_nested_components探寻组件之间的包含关系。如果一个组件包含另一个组件，则将后者添加为前者的子组件。 + +```python +# 组件数据集 +class AntDesignDataset(Dataset): + ... # 读取数据 + # 检测嵌套组件 + def detect_nested_components(self, data): + for item in data: + components = item["components"] + for i, comp in enumerate(components): + for j, other_comp in enumerate(components): + if i != j: + ... # 定义position + if ( + comp_left <= other_left + and comp_top <= other_top + and comp_right >= other_right + and comp_bottom >= other_bottom + ): + if "children" not in comp: + comp["children"] = [] + comp["children"].append(other_comp) +``` + +3. 模型设置 + +使用预训练的ResNet-18模型作为基础，添加一个全连接层用于组件属性检测。 + +```python +class AntDesignAttributeNet(nn.Module): + def __init__(self, num_attributes): + super(AntDesignAttributeNet, self).__init__() + base_model = models.resnet18(pretrained=True) + num_ftrs = base_model.fc.in_features + self.base_model = nn.Sequential(*list(base_model.children())[:-1]) + self.fc_attributes = nn.Linear(num_ftrs, num_attributes) + + def forward(self, x): + x = self.base_model(x) + x = x.view(x.size(0), -1) + attributes_output = self.fc_attributes(x) + return attributes_output +``` + +4. 模型调用 + +```python +# 数据预处理和数据增强 +data_transforms = transforms.Compose([ + transforms.ToPILImage(), + transforms.Resize((224, 224)), + transforms.ToTensor(), + transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225]) +]) + +# OCR自动识别 +def ocr_recognition(image)... +# 颜色自动识别 +def color_recognition(image_path)... + +# 加载数据集和模型 +... + +# Train +... + +# Test +results = [] +for data in dataloader: + for i, annotation in enumerate(annotations): + # 自动识别文字和颜色 + text_result = perform_ocr(images[i] + color_result = detect_color(images[i]) + attributes = {} + if text_result: + attributes['text'] = text_result + if color_result: + attributes['color'] = { + "r": color_result[0], + "g": color_result[1], + "b": color_result[2] + } + # 加入属性识别结果 + other_attributes = attributes_output[i].cpu().numpy() + # 构造组件字典 + component = { + "id": component_id, + "type": component_type, + "attributes": attributes, + "position": position + } + results.append(component) + +# 输出结果到JSON文件 +... +``` + +5. 理想结果 + +理想结果文件可以检测出组件的attributes以及组件之间的位置关系。 + +示例如下： + +```json +{ + "components": [ + // Button组件，attributes包括Text、Color、Shape（圆角、尖角等）、icon + { + "id": "component_1", + "type": "Button", + "attributes": { + "text": "Submit", + "color": { + "r": 241, + "g": 241, + "b": 241 + }, + "shape": "round", + "icon": true, + }, + "position": { + "x": 50, + "y": 100, + "width": 80, + "height": 30 + } + }, + // Input组件 + { + "id": "component_2", + "type": "Input", + "attributes": { + "placeholder": "Enter your name", + "size": "large" + }, + "position": { + "x": 50, + "y": 50, + "width": 200, + "height": 30 + } + }, + // Form表单，有children结果，展示form中的子组件 + { + "id": "component_3", + "type": "Form", + "attributes": { + "layout": "vertical" + }, + "position": { + "x": 20, + "y": 20, + "width": 250, + "height": 150 + }, + "children": [ + { + "id": "component_2" + }, + { + "id": "component_1" + } + ] + }, + // + { + "id": "component_4", + "type": "Text", + "attributes": { + "content": "Welcome to the application", + "color": "black" + }, + "position": { + "x": 50, + "y": 10, + "width": 300, + "height": 30 + } + } + ] +} +``` + +#### 标签关系识别 + +为了获得组件之间的关系 + +- 父子关系（嵌套关系） +- 相邻关系（兄弟关系） +- 依赖关系（某些组件显示依赖于其他组件的状态） + +**位置和布局分析** + +利用位置信息和布局规则推断组件之间的关系： + +- 相对位置：通过组件的边界框（bounding box）来判断相邻和嵌套关系。 + - 如果组件A的边界框完全包含组件B，则A是B的父组件。 + - 如果组件A和组件B的边界框水平或垂直对齐并且相距较近，则它们可能是兄弟组件。 +- **布局规则**：结合Ant Design的布局规范，例如栅格系统（Grid）等，推断组件之间的布局关系。 + +初步识别组件之间的父子关系和兄弟关系： + +```python +import cv2 +import numpy as np + +def detect_relationships(components): + relationships = [] + + for i, comp_a in enumerate(components): + for j, comp_b in enumerate(components): + if i != j: + # 父子关系检测 + if (comp_a['x'] <= comp_b['x'] <= comp_a['x'] + comp_a['width'] and + comp_a['y'] <= comp_b['y'] <= comp_a['y'] + comp_a['height']): + relationships.append({'parent': comp_a['id'], 'child': comp_b['id']}) + # 兄弟关系检测 + elif (abs(comp_a['x'] - comp_b['x']) < 10 or abs(comp_a['y'] - comp_b['y']) < 10): + relationships.append({'sibling': (comp_a['id'], comp_b['id'])}) + + return relationships + +# 示例组件数据 +components = [ + {'id': 1, 'x': 10, 'y': 10, 'width': 100, 'height': 50}, + {'id': 2, 'x': 20, 'y': 20, 'width': 80, 'height': 30}, + {'id': 3, 'x': 150, 'y': 10, 'width': 100, 'height': 50} +] + +relationships = detect_relationships(components) +print(relationships) +``` + + + +## 数据集组件&YOLO模型修改 + +截取所有的Antd组件，并分析其视觉属性。 + +选取出的组件包括： + +```json +components = [ + "Button", + "Icon", + "Sider", + "Header", + "Footer", + "Breadcrumb", + "Dropdown", + "Menu", + "Pagination", + "Steps", + "Input", + "Checkbox", + "Radio", + "Select", + "Form", + "Card", + "Statistic", + "Tabs", + "Table", + "Alert", + "Drawer", + "Message", + "Modal", + "Text", + "Content", + "Item", + "Chart", + "Calendar", + "Rate", + "Slider", + "Anchor", + "Carousel", + "Switch", + "QRCode", + "Image", + "Timeline", + "Tag", + "Segmented", +] +``` + +选取出的视觉属性包括： + +```python +component_templates = { + "Button": { + "type": "Button", + "attributes": { + "shape": "round", # 默认为round，可选circle/rectangle + }, + }, + "Icon": {"type": "Icon", "attributes": {}}, + "Sider": {"type": "Sider", "attributes": {}}, + "Header": {"type": "Header", "attributes": {}}, + "Footer": {"type": "Footer", "attributes": {}}, + "Breadcrumb": {"type": "Breadcrumb", "attributes": {}}, + "Dropdown": {"type": "Dropdown", "attributes": {}}, + "Menu": {"type": "Menu", "attributes": {}}, + "Pagination": { + "type": "Pagination", + "attributes": { + "showSizeChanger": False, + "showQuickJumper": False, + "simple": False, + "showTotal": False, + }, + }, + "Steps": { + "type": "Steps", + "attributes": { + "direction": "horizontal", # 可选vertical/horizontal + "progressDot": False, + }, + }, + "Input": { + "type": "Input", + "attributes": { + "allowClear": False, + "count": False, + "disabled": False, + "status": None, # 'error' | 'warning' + "prefix": False, + "suffix": False, + }, + }, + "Checkbox": { + "type": "Checkbox", + "attributes": { + "checked": False, + "disabled": False, + }, + }, + "Radio": { + "type": "Radio", + "attributes": { + "checked": False, + "disabled": False, + }, + }, + "Select": { + "type": "Select", + "attributes": { + "allowClear": False, + "disabled": False, + "status": None, # 'error' | 'warning' + }, + }, + "Form": { + "type": "Form", + "attributes": { + "layout": "horizontal", # 可选horizontal/vertical/inline + }, + }, + "Card": {"type": "Card", "attributes": {}}, + "Statistic": {"type": "Statistic", "attributes": {}}, + "Tabs": {"type": "Tabs", "attributes": {}}, + "Table": {"type": "Table", "attributes": {}}, + "Alert": { + "type": "Alert", + "attributes": {"type": "info"}, # 可选success/info/warning/error + }, + "Drawer": {"type": "Drawer", "attributes": {}}, + "Message": {"type": "Message", "attributes": {}}, + "Modal": {"type": "Modal", "attributes": {}}, + "Text": {"type": "Text", "attributes": {}}, + "Content": {"type": "Content", "attributes": {}}, + "Item": {"type": "Item", "attributes": {}}, + "Chart": {"type": "Chart", "attributes": {}}, + "Calendar": {"type": "Calendar", "attributes": {}}, + "Rate": {"type": "Rate", "attributes": {}}, + "Slider": {"type": "Slider", "attributes": {}}, + "Anchor": { + "type": "Anchor", + "attributes": {"direction": "vertical"}, # 可选vertical/horizontal + }, + "Carousel": {"type": "Carousel", "attributes": {}}, + "QRCode": {"type": "QRCode", "attributes": {}}, + "Image": {"type": "Image", "attributes": {}}, + "Timeline": {"type": "Timeline", "attributes": {}}, + "Tag": {"type": "Tag", "attributes": {}}, + "Segmented": {"type": "Segmented", "attributes": {}}, + "Switch": { + "type": "Switch", + "attributes": { + "checked": False, + "disabled": False, + }, + }, +} +``` + +在Antd文档和示例页面中截取组件图片，并进行标注。 + +#### 组件属性标注 + +编写组件属性标注工程：AttributeLabeling，自动识别组件的颜色和文字，并且根据组件的位置信息确定组件之间的嵌套关系。其余属性通过pyqt页面进行标注。 + +#### 模型 + +将上周的Button示例模型扩展到所有组件，并进行模型训练和debug。 + +用10张图片进行试运行，epoch = 10： + +![yolo](https://p.ipic.vip/fjd6sl.png) + +模型loss function可以成功收敛。 + + + +## YOLOv8模型识别Antd组件 + +在Antd示意网页和组件库说明文档中截取238张图片，进行组件标注。然后输入到YOLOv8模型中进行训练。 + +训练结果测试示例： + +![image-20240927114459426](https://p.ipic.vip/4uevoi.png) + + + +![image-20240927114604978](https://p.ipic.vip/xkftx1.png) + +![image-20240927114622007](https://p.ipic.vip/wpmuvd.png) + +![image-20240927114634911](https://p.ipic.vip/ai1jot.png) + +可以看到，模型可以识别到大部分组件，但是Form内部的组件识别准确度比较低，猜测是因为Form组件相似程度比较高，比如Input和Select组件相似程度非常高，难以区分。 + +idea： + +1. 修改YOLO模型，减小模型识别阈值，这样能更容易识别出Input、Select等重要组件。 +2. 修改YOLO预训练模型，现在使用的YOLOv8n模型比较轻量，但是在准确度方面不如YOLOv8l等YOLOv8x大型模型，可以尝试YOLOv8x预训练模型进行预训练。 +3. 尝试其他模型。现在在尝试EfficientDet模型中。 + + + +## YOLO模型修改 + +修改预训练的YOLOv8n到YOLOv8x模型。 + +训练代码： + +```python +import time +from ultralytics import YOLO + +start_time = time.time() + +model = YOLO("yolov8x.pt") # Model Path + +# train +model.train( + data="datasets/page_seg/icon.yaml", # Dataset Path + epochs=100, + batch=10, + device="cuda:1", + lr0=0.0001, +) +metrics = model.val() + +success = model.export(format="onnx") + +end_time = time.time() +total_time = end_time - start_time +hours, remainder = divmod(total_time, 3600) +minutes, seconds = divmod(remainder, 60) + +print(f"Process Time: {int(hours)}Hours {int(minutes)}Minutes {int(seconds)}Seconds") + +``` + +测试代码： +```python +import os +import cv2 +import json +from ultralytics import YOLO + +model_path = 'runs/detect/train/weights/best.pt' +test_image_folder = 'datasets/test/image' +output_folder = 'runs/detect/test_output' + +os.makedirs(output_folder, exist_ok=True) +model = YOLO(model_path) + +# 设置置信度阈值 +confidence_threshold = 0.2 + +image_paths = [os.path.join(test_image_folder, img) for img in os.listdir(test_image_folder) if img.endswith(('png', 'jpg', 'jpeg'))] + +for image_path in image_paths: + img = cv2.imread(image_path) + img_rgb = cv2.cvtColor(img, cv2.COLOR_BGR2RGB) + results = model(img_rgb, conf=confidence_threshold) + + detections = results[0].boxes.data + height, width, _ = img.shape + detection_results = [] + + component_id = 1 + for detection in detections: + x1, y1, x2, y2, conf, cls = detection[:6] + x1, y1, x2, y2 = int(x1), int(y1), int(x2), int(y2) + + position = { + "x": x1 / width, + "y": y1 / height, + "width": (x2 - x1) / width, + "height": (y2 - y1) / height + } + + detection_results.append({ + "id": f"component_{component_id}", + "type": model.names[int(cls)], + "position": position + }) + + component_id += 1 + cv2.rectangle(img, (x1, y1), (x2, y2), (0, 255, 0), 2) + label = f'{model.names[int(cls)]} {conf:.2f}' + cv2.putText(img, label, (x1, y1 - 10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2) + + output_path = os.path.join(output_folder, os.path.basename(image_path)) + cv2.imwrite(output_path, img) + json_file_name = os.path.splitext(os.path.basename(image_path))[0] + '.json' + json_output_path = os.path.join(output_folder, json_file_name) + + # 将结果保存为 JSON 文件 + with open(json_output_path, 'w') as f: + json.dump(detection_results, f, indent=4) + + # 可选：显示结果图片 + # plt.imshow(cv2.cvtColor(img, cv2.COLOR_BGR2RGB)) + # plt.show() + +print('检测完成，结果已保存至', output_folder) + +``` + +经过修改，模型结果有一定改善： + + + +但是，对ICON等组件的识别不准确。 + +## 数据集&模型修改 + +针对Icon识别不准确的情况，添加Antd官网的所有Icon以及官方仓库的svg icon图片集。 + +- ANTD-ICON-1数据集(27张，840个Icon) + 数据来自Ant Design官方文档所有 Icon组件的截图。 + +- ANTD-ICON-2数据集(481个Icon) + 基于Antd-icon仓库中的所有svg格式的Icon，将其转换为png图片，添加Antd-Icon-2数据集。 + +同时，修改模型为YOLO v10模型： + +YOLOv10 是清华大学研究人员在2024年5月引入的一种新的实时目标检测模型，解决了YOLO 以前版本 在后处理和模型架构方面的不足。是YOLOv10模型中拥有最高精度和准确度的模型。 + diff --git "a/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\211\357\274\211.md" "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\211\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..a179710f0aad9d89b6221025fde0cc219cf12d27 --- /dev/null +++ "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\270\211\357\274\211.md" @@ -0,0 +1,55 @@ +# 过程记录（阶段三） + +## 目标 + +### 系统前后端开发 （08月30日-09月15日） + +- 开发后端功能和数据库。 +- 利用大模型生成OpenInula代码，开发前端页面。 +- 进行系统测试和调试。 + +## 系统开发过程 + +### 后端功能和数据库 + +- **后端技术栈：** + - 采用 **Python** 开发后端服务，集成了 YOLO 模型用于视觉识别。 + - 使用 **Django** 框架构建 API，处理前端上传的图片文件。 +- **核心功能实现：** + - 视觉模型处理： + - 接收前端上传的网页截图，利用 YOLO 模型识别图像中的 UI 组件。 + - 将识别结果（组件类型、位置和属性）生成 JSON 文件并返回。 + - 流式 API： + - 提供流式接口以加速大文件（如图像和 JSON 数据）的上传和传输。 + - 使用 Base64 格式返回处理后的标注图片（`detectImg`）。 + +------ + +### 前端页面开发 + +- **前端技术栈：** + - 基于 **React** 框架开发，结合 **Next.js** 实现高效的服务器端渲染。 + - 使用 **Ant Design** 提供的 UI 组件库创建交互友好、美观的界面。 +- **核心功能模块：** + 1. 代码生成模块： + - 用户上传网页截图后，调用后端 API 进行视觉模型处理，显示识别结果。 + - 使用 **Monaco Editor** 实现在线代码编辑功能，支持实时修改和渲染。 + 2. 模型选择模块： + - 提供 OpenAI 和 Claude 大语言模型的切换功能。 + - 支持用户自定义 API Key，满足个性化需求。 + 3. 交互优化模块： + - 集成实时对话功能，允许用户通过自然语言与模型交互修改生成的代码。 + - 提供历史版本回溯功能，方便开发者查看和应用之前的代码生成记录。 + +------ + +### 系统测试与调试 + +- **测试方法：** + - 使用多组网页截图验证 YOLO 模型的识别精度，包括表单页面、列表页面和复杂布局页面。 + - 比较使用和不使用 JSON 文件对代码生成准确性的影响。 +- **调试重点：** + - **识别准确性：** 针对模型在按钮（Button）和图标（Icon）检测上的不足，通过扩展训练数据集进行优化。 + - **代码生成：** 修改 Prompt 内容以提升大模型对嵌套组件和颜色属性的识别能力。 + - **系统性能：** 通过引入并行处理机制降低前后端交互的响应时间。 + diff --git "a/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\272\214\357\274\211.md" "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\272\214\357\274\211.md" new file mode 100644 index 0000000000000000000000000000000000000000..4d7ce949aa0b1ff1bddfb7b928fec56b2c74f231 --- /dev/null +++ "b/Docs/Development_Docs/\350\277\207\347\250\213\350\256\260\345\275\225\357\274\210\351\230\266\346\256\265\344\272\214\357\274\211.md" @@ -0,0 +1,212 @@ +# 过程记录（阶段二） + +[TOC] + +### 目标 + +- 向量化 OpenInula组件库。 +- 集成图像分割、OCR，生成prompt， 调用大语言模型API生成代码。 + + + +## OpenAI API测试和连接 + +用OpenAI API 注册并测试node版本连通性，配置本地proxy： + +``` +const { OpenAI } = require("openai"); +require('dotenv').config(); + +const { HttpsProxyAgent } = require ('https-proxy-agent') +const httpAgent = new HttpsProxyAgent(''); +console.log('.env.OPENAI_API_KEY',process.env.OPENAI_API_KEY); + +const openai = new OpenAI({ + apiKey: process.env.OPENAI_API_KEY, + baseURL:"", + httpAgent +}); + +const createChatCompletion = async () => { + console.log('createChatCompletion') + try { + const response = await openai.chat.completions.create({ + model: 'gpt-3.5-turbo', + messages: [ + { role: 'system', content: 'You are a helpful assistant.' }, + { role: 'user', content: 'Who won the world series in 2020?' }, + { role: 'assistant', content: 'The Los Angeles Dodgers won the World Series in 2020.' }, + { role: 'user', content: 'Where was it played?' }, + { role: 'assistant', content: 'The World Series was played in Arlington, Texas at the Globe Life Field.' }, + ], + }); + + console.log(response.choices[0].message.content); + } catch (error) { + console.error('Error creating chat completion:', error); + } +}; +createChatCompletion(); +``` + +结果：可以运行。 + +![openapi](https://p.ipic.vip/o862ol.png) + + + +## OpenAI API生成Antd代码 + +主要对JSON文件的作用进行测试，对比采用json文件和不使用后生成代码的区别。 + +- 测试图片：Antd登录页面 + +![image-20240927114708342](https://p.ipic.vip/mzg2gj.png) + +- 代码生成prompt设置为： + +prompt设置的思想： + +1. 强调要根据页面图片+json文件生成完整的Antd/React的代码。 +2. 说明JSON文件的来源（YOLO+ResNet模型），以及**JSON文件的识别结果可能是不准确的。** +3. 生成代码的要求 + +- 确保和页面截图完全一样 +- 关注并只能生成组件之间的关系、组件内部的属性 + +1. 提供Antd组件库的URL + +prompt信息还要根据后续的结果文件进行修改。 + +```jsx +const promptText = ` +You are an expert React/Ant Design of React developer +You take screenshots of a reference web page from the user, and then build single page apps +using React and Ant Design and @ant-design/pro-components. +At the same time, you will get a json file. This json file is the result of image recognition using YOLO and ResNet, which mainly records the components and their positions on the page, as well as some properties. +You can also refer to this json file when generating the program, but please note that this json file may have inaccurate results. + +- Make sure the app looks exactly like the screenshot. +- Pay close attention to background color, text color, font size, font family, +padding, margin, border, etc. Match the colors and sizes exactly. +- Use the exact text from the screenshot. +- import component example: const { ProForm, ProFormText, ProFormSelect } = ProComponents; const { Card } = antd; +- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. +- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. +- For images, use placeholder images from and include a detailed description of the image in the alt text so that an image generation AI can generate the image later. +- Strict output code does not require markdown format. + +In terms of libraries, + +- Use these script to include React so that it can run on a standalone page: + + + + + Use these script to include Ant Design: + + + + + +Return only the full code in tags. +Do not include markdown "\\`\\`\\`" or "\\`\\`\\`html" at the start or end. +``` + +1. 首先，将原始图片输入GPT-4o模型，进行代码生成的结果为： + +![image-20240927114721582](https://p.ipic.vip/qtjsy1.png) + +可以看到文字部分可以很好识别，但是没有识别到这是一个登录页面，缺少Button和一个Input组件，以及“其他登录方式”等一些Icon Button。 + +1. 将基于ResNet生成的json文件第一版（无组件嵌套关系）和网页图片同时输入GPT生成代码，结果页面为： + + ![image-20240927114738575](https://p.ipic.vip/m51pam.png) + +和原始图片以及仅用图片进行代码生成的结果对比发现，图片+JSON文件的组合可以使生成的页面代码更加准确。 + + + +## OpenInula组件库向量化 + +由于OpenInula组件库暂未开源，因此在Prompt中，将所有可用的OpenInula组件及其定义写入，并强调调用的方法。其余要素与Antd代码生成相同。 + +经过参考Prompt设置的各种方法，总结OpenInula组件库向量化的方法： + +1. **定义上下文**: 指定生成的环境和库，**强调使用OpenInula代替React**，同时确保兼容性。 + +2. **代码结构**: 明确要求代码的结构，包括如何渲染组件。例如，确保最终代码使用`render`方法将组件渲染到指定的DOM元素。 + +3. **组件限制**: 限定可使用的组件类型，确保所有组件来自指定的OpenInula v1-components和Nivo图表组件库。 + +4. **无状态组件**: 强调生成的代码是完全静态的，不需要处理传递的props，专注于界面表现。 + +5. **无障碍设计**: 使用语义HTML元素和ARIA属性，以确保生成内容的可访问性。 + + 其他因素和生成Antd代码的方法相同。 + +设置prompt如下： + +```javascript +You are an expert web developer who specializes in building working website prototypes. + +You take screenshots of a reference web page from the user, and then build single page apps. + +Use openinula instead of react, openinula is a fully compatible react-like library with react. +Remember that you should render the Component to container with id app at the end of the file, for example: + import { render } from 'openinula' + function TheComponent() { + // ... your actual jsx code here + } + render(, document.getElementById('app')) + +You might be given component detection results from the screenshot, which include the type of components and their positions within the screenshot. +Note that the component detection results come from a YOLO model, which may not be entirely accurate.You can use this information to assist in generating more accurate code. +You might also be given a screenshot(The second image) of a web page that you have already built, and asked to +update it to look more like the reference image(The first image). + +- Make sure the app looks exactly like the screenshot. +- Pay close attention to background color, text color, font size, font family, padding, margin, border, etc. Match the colors and sizes exactly. +- Completely generate all parts of the screenshot. +- Use the exact text from the screenshot. +- DON'T assume that the component can get any data from outside, all required data should be included in your generated code. + Rather than defining data as separate variables, we prefer to inline it directly in the code. +- Do not add comments in the code such as "" and "" in place of writing the full code. WRITE THE FULL CODE. +- Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items. DO NOT LEAVE comments like "" or bad things will happen. +- For images, use placeholder images from https://placehold.co and include a detailed description of the image in the alt text so that an image generation AI can generate the image later. +- Strict output code does not require markdown format. +- Make sure your code can run successfully + +Return only the full code in tags. + +Do not include markdown "\`\`\`" or "\`\`\`html" at the start or end. + +The code should ONLY use the following components, there are no other libs available: + +- The v1-components provided by the following available examples. +- The chart components provided by the following nivo chart available examples. + +You can use icons from 'lucide-react', for example: +1. ArrowRight +2. Check +3. Home +4. User +5. Search + +When creating code, refer to the usage method in the following sample code without omitting any code. +Since the code is COMPLETELY STATIC(do not accept any props), there is no need to think too much about scalability and flexibility. It is more important to make its UI results rich and complete.Also there is no need to consider the length or complexity of the generated code. + +Use semantic HTML elements and aria attributes to ensure the accessibility of results, and more. Also need to use Tailwind to adjust spacing, margins and padding between elements, especially when using elements like main or div. Also need to make sure to rely on default styles as much as possible and avoid adding color to components without explicitly telling them to do so. + +If you have any images, load them from Unsplash or use solid colored rectangles as placeholders. + +Your prototype should look and feel much more complete and advanced than the wireframes provided. Flesh it out, make it real! Try your best to figure out what the designer wants and make it happen. If there are any questions or underspecified features, use what you know about applications, user experience, and website design patterns to "fill in the blanks". If you're unsure of how the designs should work, take a guess—it's better for you to get it wrong than to leave things incomplete. + +Remember: you love your designers and want them to be happy. The more complete and impressive your prototype, the happier they will be. Good luck, you've got this! + +... （以下为各组件源代码） +``` + + + + diff --git "a/Docs/Development_Docs/\351\241\271\347\233\256\347\224\263\350\257\267\344\271\246.md" "b/Docs/Development_Docs/\351\241\271\347\233\256\347\224\263\350\257\267\344\271\246.md" new file mode 100644 index 0000000000000000000000000000000000000000..feaf036217fc3e678108b06eb7ca9180ea432121 --- /dev/null +++ "b/Docs/Development_Docs/\351\241\271\347\233\256\347\224\263\350\257\267\344\271\246.md" @@ -0,0 +1,321 @@ +# 项目申请书 + +openInula AI 代码生成工具 + +## **项目背景** + +openInula AI 代码生成工具是一个利用大语言模型能力，结合视觉识别技术，生成**基于 openInula 生态和特定 UI 组件库**的应用页面代码的工具。 + +项目仓库：https://gitee.com/openInula/inula + +### **1. 项目特点** + +1. **多模态输入**：支持使用网页设计稿或图片作为输入，生成对应的代码。 +2. **openInula 生态适配**：生成的代码基于 openInula 生态，确保与其框架和规范兼容。 +3. **实时编辑和渲染**：开发者可以对生成的代码进行手动编辑，并实时查看渲染结果。 +4. **交互式修改**：开发者可以基于当前代码向 AI 提出修改需求，AI 将再次生成修改后的代码。 +5. **版本控制**：支持多版本管理，方便开发者进行代码迭代和回溯。 +6. **生态友好**：大语言模型可以根据需要进行替换，提高工具的灵活性和适应性。 +7. **渐进式生成**：支持分步生成代码，让开发者可以逐步完善和优化页面。 +8. **代码导出**：允许开发者下载生成的代码，便于后续的集成和部署。 + +### **2. 项目产出要求** + +- **视觉识别模型**：训练一个基于 ResNet 神经网络的模型，用于识别图片中的页面元素，如组件、文字等。 +- **页面分析器**：利用视觉模型识别的页面元素信息，进行布局分析、组件识别、icon 识别和文字组织等任务。 +- **UI 组件库向量化**：对 UI 组件库进行向量化表示，便于大语言模型理解和生成。 +- **业务逻辑生成器**：基于页面分析和 UI 组件向量化的结果，调优 prompt，引导大语言模型生成符合要求的代码。 +- 整体工程： + - 前端网站：提供交互对话、在线编辑等功能，让开发者与 AI 协作完成页面生成。 + - 后端服务：负责存储生成的代码、管理向量数据库、适配多种大语言模型。 + +### **3. 项目技术要求** + +- 熟悉 JS/TS 编程，熟悉 React、Vue 等前端框架开发及其原理。 +- 了解 AI 与大语言模型原理，有过基本的模型调用与调优经验。 + +## **项目实现细节梳理** + +### **1. 图像分割与识别** + +通过一张图片，利用ResNet/Unet等深度学习模型分割图像、识别图片中各种信息数据；将图像分割和 OCR 识别的文本结果结合，生成相应的描述信息（prompt）或符合约定规范的 JSON 描述。 + +### **数据集** + +- 数据集：收集包含各种前端网页截图的图像数据集（ + + https://universe.roboflow.com/）。确保数据集多样化，涵盖不同风格和布局的网页。 + + 1. 数据集一：用于图像分割。数据集为网页图像，标签为图像的分割结果（图像边缘、每个元素的位置和边界） + 2. 数据集二：用于图像识别。数据集为设计元素图像（各种组件、前端UI结构），标签为元素标签（如按钮、Icon等） + +- **标注**：使用工具（如 LabelMe）对网页图像进行标注，标记出不同组件的位置和类型，以及包含的文字。 + +### **视觉识别模型** + +- 图像预处理： + + 1. （传统图像识别方法）：使用机器视觉算法分析背景颜色和背景渐变方向，通过漫水填充算法，选取漫水的种子节点，滤除渐变色背景区域噪声。 + 2. 图像标准化和尺寸调整。 + 3. 数据增强（如旋转、翻转等），增加训练数据的多样性。 + +- 图像分割 + + ：使用标注好的数据集训练ResNet / U-Net 模型，使其能够识别和分割网页中的不同组件（如按钮、输入框、文本区域等）。 + + - **ResNet**：可以作为特征提取器，提取网页图像的特征。 + - **U-Net**：适合语义分割，可以将网页图像分割成不同的区域，对每个区域进行分类。 在本项目中，可以用Unet进行图像分割，识别各组件的边缘。 + +- **组件识别：**识别图像中的特定对象，例如按钮、图标等，并将其与预定义的OpenInula组件库进行匹配。 + + - 使用ResNet模型，读取数据集（包括各种设计组件及其标签）。 + - 训练模型，将识别出的对象与设计元素库中的元素进行匹配。 + +### **文字识别模型** + +- **OCR 识别**：使用现有的 OCR 工具（如 Tesseract 或深度学习 OCR 模型）识别文本内容。使用网页截图中的文字部分来训练或微调 OCR 模型，提高其对网页文本的识别准确率。 + + 因为web网页图像和UI设计图中的文字都比较清晰、噪声/图像倾斜较小，所以我倾向于用简单的OCR模型来识别文字。 + + - 模型输入：**前述视觉模型的识别结果**，包括组件及其对应位置。 + - 模型输出：在视觉模型识别结果的前提下，利用组件的边界框，裁剪出对应的图像区域，然后输入到OCR模型进行文字识别，为每个组件添加对应文字。 + +- **获取组件及其边界（视觉模型的结果）** + + 使用视觉模型（例如U-Net或ResNet）获取了组件的边界框。示例输出如下： + + ``` + # 视觉模型的输出，包含组件边界框和类型 + component_boxes = [ + {'bbox': (50, 150, 200, 200), 'type': 'button'}, + {'bbox': (250, 250, 450, 300), 'type': 'input'} + ] + ``` + +- **裁剪图像区域并进行OCR识别** + + - 使用**Tesseract**：Google开源的 OCR 工具，适合基本的文字识别任务。 + + - 一个简单的文本识别代码如下： + + ``` + import cv2 + import pytesseract + + def ocr_for_components(image_path, component_boxes): + image = cv2.imread(image_path) + results = [] + + for component in component_boxes: + x1, y1, x2, y2 = component['bbox'] + component_type = component['type'] + + # 裁剪图像区域 + component_image = image[y1:y2, x1:x2] + + # 使用Tesseract进行OCR识别 + custom_config = r'--oem 3 --psm 6' + ocr_result = pytesseract.image_to_string(component_image, config=custom_config).strip() + + # 将OCR结果添加到组件信息中 + component_result = { + "type": component_type, + "position": {"x": x1, "y": y1, "width": x2 - x1, "height": y2 - y1}, + "text": ocr_result + } + + results.append(component_result) + + return results + ``` + + 因此，OCR模型将在视觉模型的基础上，**为每个组件添加其对应的文字**，便于Prompt中json文件的生成。 + +### **生成 Prompt** + +- **图像 to json文件生成** + + 根据图像分割和 OCR 识别的结果生成相应的描述信息（prompt），根据图像分割和文字识别的结果，生成 JSON 描述。每个组件的描述包括其类型、位置、尺寸、以及包含的文字。类似格式可为： + + ``` + [ + { + "type": "button", + "position": {"x": 100, "y": 200, "width": 50, "height": 20}, + "text": "Submit" + }, + { + "type": "input", + "position": {"x": 150, "y": 250, "width": 200, "height": 20}, + "text": "Username" + } + ] + ``` + +- **Figma设计稿 to json文件生成** + + 参考项目：https://github.com/yagudaev/figma-to-json + +### **2. 代码生成** + +利用RAG技术，将OpenInula的**技术文档**（Markdown文档，包括**文字说明和组件代码**）输入大模型进行UI组件向量化，生成嵌入向量（embedding），存储入数据库。 + +基于组件库嵌入和用户输入的文字问题/步骤1中生成的图片描述信息合成大模型提示语（prompt），生成特定的组件库代码。 + +### **UI 组件库向量化** + +对 UI 组件库进行向量化表示，便于大语言模型理解和生成。 + +- **生成嵌入**：将组件库文档进行嵌入生成，每个文本部分转化成向量。 + + 输入：组件库的组件库文档（markdown：文字+jsx代码块） + + 输出：嵌入向量。嵌入格式是向量，每个向量代表一个文本部分的语义信息。 + + 处理：生成嵌入时，每个页面的内容会被处理成多个部分（sections）， + + 例如：一个md文档如下 + + ``` + # Section 1 + This is the first section content. + + # Section 2 + This is the second section content. + ``` + + 嵌入时，会根据文档格式，自动拆分成两个section，分别生成嵌入（embedding）。这些向量用于表示文本在高维空间中的位置，使得相似的文本片段在该空间中彼此接近。 + + 可通过调用OpenAI的`createEmbedding`方法生成嵌入，方法代码如下： + + ``` + const embeddingResponse = await openai.createEmbedding({ + model: 'text-embedding-ada-002', + input, // 组件库文档的section内容 + }) + ``` + +- **存储嵌入**：将生成的嵌入存储入数据库。 + + 存储入数据库，以Supabase数据库为例： + + ``` + const { data: pageSection } = await supabaseClient + .from('page_section') + .insert({ + page_id: page.id, + heading, + content, + embedding: responseData.embedding, // 存储嵌入 + }) + ``` + +### **Prompt 构建** + +从数据库中获取组件库向量化（嵌入），基于学习数据和用户问题构建 prompt。 + +- 从数据库中获取组件库向量化（嵌入），以Supabase数据库为例： + + ``` + const {data } = await supabaseClient.rpc( + 'match_page_sections', + { + embedding, + ..... + } + ) + ``` + +- 基于学习数据+问题构建prompt，初步prompt想法如下： + + ``` + const prompt = ` + Act as an AI code generation assistant specialized in the openInula ecosystem. + Based on the visual recognition results and the UI component library, + generate the appropriate code for the specified application page. + The generated code should be compatible with the openInula framework and adhere to its standards. + + Visual recognition results (JSON format): + """ + ${visualRecognitionResults} + """ + + UI component library documentation: + """ + ${uiComponentLibraryDocumentation} + """ + + Based on the above information, generate the code for the application page as described. + Ensure that the code is well-structured, maintainable, and follows best practices in the openInula ecosystem. + Provide explanations for the code where necessary. + + Code: + ` + messages.push({ role: 'user', content: prompt }) + ``` + +其中，visualRecognitionResults是前述步骤1图像识别结果（json形式），uiComponentLibraryDocumentation是OpenInula组件库向量化的结果。 + +### **生成代码** + +调用大模型 API 生成代码，以OpenAI API为例： + +``` +const response = await fetch(`https://${openAiBaseUrl}/v1/chat/completions`, { + method: 'POST', + headers: { + Authorization: `Bearer ${openAiKey}`, + 'Content-Type': 'application/json', + }, + body: JSON.stringify(completionOptions), +}); +``` + +### **3. 前端&后端开发** + +- **openInula 适配**：前端页面用OpenInula组件库编写。 +- **页面设计**：提供交互对话、在线编辑等功能，让开发者与 AI 协作完成页面生成。 +- **数据库：**存储用户信息、用户的文字问题/图片、OpenInula组件库向量化信息。 +- **后端服务器（server）：**获取前端传入的信息，传入深度学习模型、大模型进行处理。 + +## **项目开发规划** + +### **阶段 1：图像模型训练与调优（07月01日-08月10日）** + +- 收集和标注数据集，利用传统图像处理方法进行图像预处理。 +- 训练图像分割模型（ResNet/U-Net/其他）。 +- 训练文字识别模型（OCR），并结合图像识别结果生成图片描述json文件。 + +### **阶段 2：大模型代码生成（08月10日-08月30日）** + +- 向量化 OpenInula组件库。 +- 集成图像分割、OCR，生成prompt， 调用大语言模型API生成代码。 + +### **阶段 3：系统前后端开发 （08月30日-09月15日）** + +- 开发后端功能和数据库。 +- 利用大模型生成OpenInula代码，开发前端页面。 +- 进行系统测试和调试。 + +### **阶段 4：项目总结（09月15日-09月30日）** + +- 思考项目可改进的地方 +- 撰写项目说明文档、技术文档 + +## **参考文章/仓库** + +1. Figma Codia插件技术文档：https://codia.ai/docs/blog/screenshot-to-figma-design-by-ai-a-new-chapter-in-future-design.html + +2. OpenInula相关项目：https://atomgit.com/openinula-competition-2024/000067 + +3. imgcook项目文档：https://www.imgcook.com/blog/ + +4. Figma to Code项目：https://github.com/bernaferrari/FigmaToCode + +5. Sigma to Json项目：https://github.com/yagudaev/figma-to-json + +6. 文章：Design2Code: How Far Are We From Automating Front-End Engineering？ + + Si C, Zhang Y, Yang Z, et al. Design2Code: How Far Are We From Automating Front-End Engineering?[J]. arXiv preprint arXiv:2403.03163, 2024. + + 大模型相关。文章提出了D2C的**基准测试集和评估指标**，多模态提示方法和模型微调方法。 \ No newline at end of file diff --git "a/Docs/\346\212\200\346\234\257\346\212\245\345\221\212.docx" "b/Docs/\346\212\200\346\234\257\346\212\245\345\221\212.docx" new file mode 100644 index 0000000000000000000000000000000000000000..9f6eba3be47654cac7d2173c11b041949c241071 Binary files /dev/null and "b/Docs/\346\212\200\346\234\257\346\212\245\345\221\212.docx" differ diff --git "a/Docs/\347\224\250\346\210\267\346\211\213\345\206\214.md" "b/Docs/\347\224\250\346\210\267\346\211\213\345\206\214.md" new file mode 100644 index 0000000000000000000000000000000000000000..9d6c1f32a35f42eae533f0493759c15b479d1505 --- /dev/null +++ "b/Docs/\347\224\250\346\210\267\346\211\213\345\206\214.md" @@ -0,0 +1,59 @@ +# OpenInula AI 代码生成工具用户手册 + +## 系统概述 + +OpenInula AI 代码生成工具是一个基于 Web 的应用，它结合了大语言模型和视觉识别技术，允许用户上传图片并自动生成对应的前端代码。 + +## 视频演示 + + OpenInula AI 代码生成工具操作演示视频： + + + +## 使用步骤 + +##### 1. 访问系统 + +在浏览器中输入工具的网址，进入 OpenInula AI 代码生成工具 Web 页面。 + +##### 2. 模型选择 + +可以选择使用 React+AntD 或 OpenInula 组件库进行代码生成，以确保生成的代码与目标应用的技术栈兼容。 + +![ ](https://p.ipic.vip/zdgtzn.png) + +同时，用户可选择 OpenAI 或 Claude 大语言模型，并输入个人的 API Key，以便个性化定制生成过程。 + +![图片 2](https://p.ipic.vip/rfg2sq.png) + +##### 3. 上传图片 + +可以上传所需的图片，系统将自动识别并生成相应的代码。用户可以方便地选择待处理的图片，系统会应用视觉模型进行识别。 + +![图片 3](https://p.ipic.vip/rpfauk.png) + +##### 4. 实时编辑和渲染 + +生成的代码会在界面上展示，用户可直观地查看生成结果，并可以直接复制或下载代码进行进一步编辑，实时更新渲染效果，从而支持快速迭代开发。 + +![图片 4](https://p.ipic.vip/k33pbp.png) + +![图片 5](https://p.ipic.vip/v37n61.png) + +##### 5. 交互式修改 + +如果对生成的代码有特定修改需求，可以通过对话更新代码版本。 + +##### 6. 版本控制 + +界面支持查看不同版本的代码，并进行选择和回溯。 + +## 联系方式 + +遇到问题或有建议和反馈，请通过以下方式联系： + +- 邮箱：Renlirong - [email@renlirong@foxmail.com](mailto:email@renlirong@foxmail.com) +- 项目链接：[inula-code-generator](https://gitee.com/openInula/inula-code-generator) + +期待宝贵意见，以帮助不断改进工具的功能和用户体验。 + diff --git "a/Docs/\351\241\271\347\233\256\345\261\225\347\244\272\350\247\206\351\242\221.mp4" "b/Docs/\351\241\271\347\233\256\345\261\225\347\244\272\350\247\206\351\242\221.mp4" new file mode 100644 index 0000000000000000000000000000000000000000..a72f6f15bd8a21b1e99d362d9e9bed8f8ed43926 Binary files /dev/null and "b/Docs/\351\241\271\347\233\256\345\261\225\347\244\272\350\247\206\351\242\221.mp4" differ diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 0000000000000000000000000000000000000000..9e32cdef1625daed25cf365c865f01050877cff3 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,127 @@ + 木兰宽松许可证, 第2版 + + 木兰宽松许可证， 第2版 + 2020年1月 http://license.coscl.org.cn/MulanPSL2 + + + 您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束： + + 0. 定义 + + “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。 + + “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。 + + “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。 + + “法人实体”是指提交贡献的机构及其“关联实体”。 + + “关联实体”是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。 + + 1. 授予版权许可 + + 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。 + + 2. 授予专利许可 + + 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。 + + 3. 无商标许可 + + “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。 + + 4. 分发限制 + + 您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。 + + 5. 免责声明与责任限制 + + “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论，即使其曾被建议有此种损失的可能性。 + + 6. 语言 + “本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文版为准。 + + 条款结束 + + 如何将木兰宽松许可证，第2版，应用到您的软件 + + 如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步： + + 1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字； + + 2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中； + + 3， 请将如下声明文本放入每个源文件的头部注释中。 + + Copyright (c) [Year] [name of copyright holder] + [Software Name] is licensed under Mulan PSL v2. + You can use this software according to the terms and conditions of the Mulan PSL v2. + You may obtain a copy of Mulan PSL v2 at: + http://license.coscl.org.cn/MulanPSL2 + THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + See the Mulan PSL v2 for more details. + + + Mulan Permissive Software License，Version 2 + + Mulan Permissive Software License，Version 2 (Mulan PSL v2) + January 2020 http://license.coscl.org.cn/MulanPSL2 + + Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v2 (this License) with the following terms and conditions: + + 0. Definition + + Software means the program and related documents which are licensed under this License and comprise all Contribution(s). + + Contribution means the copyrightable work licensed by a particular Contributor under this License. + + Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License. + + Legal Entity means the entity making a Contribution and all its Affiliates. + + Affiliates means entities that control, are controlled by, or are under common control with the acting entity under this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity. + + 1. Grant of Copyright License + + Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not. + + 2. Grant of Patent License + + Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution, where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed. The patent license shall not apply to any modification of the Contribution, and any other combination which includes the Contribution. If you or your Affiliates directly or indirectly institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken. + + 3. No Trademark License + + No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in Section 4. + + 4. Distribution Restriction + + You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software. + + 5. Disclaimer of Warranty and Limitation of Liability + + THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. + + 6. Language + + THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION SHALL PREVAIL. + + END OF THE TERMS AND CONDITIONS + + How to Apply the Mulan Permissive Software License，Version 2 (Mulan PSL v2) to Your Software + + To apply the Mulan PSL v2 to your work, for easy identification by recipients, you are suggested to complete following three steps: + + i Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner; + + ii Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package; + + iii Attach the statement to the appropriate annotated syntax at the beginning of each source file. + + + Copyright (c) [Year] [name of copyright holder] + [Software Name] is licensed under Mulan PSL v2. + You can use this software according to the terms and conditions of the Mulan PSL v2. + You may obtain a copy of Mulan PSL v2 at: + http://license.coscl.org.cn/MulanPSL2 + THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + See the Mulan PSL v2 for more details. diff --git a/README.md b/README.md index 90ef3d0624949ce39c8de60798ee2f1065c39143..86bcea9ca8c455bddaa4d7c768fb4ce21d3974a7 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,21 @@ 7. **渐进式生成**: 支持分步生成代码，让开发者逐步完善和优化页面。 8. **代码导出**: 允许开发者下载生成的代码，方便后续集成与部署。 +### 视频演示 + +OpenInula AI 代码生成工具 [操作演示视频](Docs/项目展示视频.mp4) + + +### 系统使用流程 + +系统使用流程图可参照如下： + +![图片 1](https://p.ipic.vip/ownhuz.png) + + + +## 项目运行 + ### 后端运行 * 进入后端 @@ -71,8 +86,39 @@ npm run dev ``` + + +## 项目结构 + +### 技术架构 + +本项目首先深入研究**视觉识别**技术在前端开发中的应用，通过YOLOv10模型进行多目标检测，构建高效的组件识别系统；然后，整合识别结果为**结构化的JSON文件**，确保数据的准确性与完整性；最终，利用**大语言模型**基于JSON文件生成符合用户需求的前端代码，实现从设计到代码的快速转化。此外，前后端的高效协作显著提升了系统的响应速度和用户体验，最终形成一个完整的视觉识别与代码生成解决方案。 + +整体技术方案如下图： + +![图片 1](https://p.ipic.vip/k27q2s.png) + + + +### 项目文档 + +有关更多技术内容、开发流程等，请参阅[项目文档](Docs)。 + +- [技术及总结报告](Docs/技术报告.docx) +- [用户手册](Docs/用户手册.md) +- [开发流程](Docs/Development_Docs) + + + +## 许可协议 + +OpenInula 主要遵循 [Mulan Permissive Software License v2](https://gitee.com/link?target=http%3A%2F%2Flicense.coscl.org.cn%2FMulanPSL2) 协议，详情请参考各代码仓 `LICENSE.txt` 。 + + + ## 联系方式 Renlirong - email@renlirong@foxmail.com -Project Link: [inula-code-generator](https://gitee.com/openInula/inula-code-generator) +仓库链接： [inula-code-generator](https://gitee.com/openInula/inula-code-generator) +