用草图自动生成地理信息网页应用，省去繁琐编码。
From PowerPoint UI Sketches to Web-Based Applications: Pattern-Driven Code Generation for GIS Dashboard Development Using Knowledge-Augmented LLMs, Context-Aware Visual Prompting, and the React Framework
- 从PPT草图提取布局，结合知识库增强大模型生成代码
- 生成可维护的模块化网页，支持时间序列、矢量等数据展示
- 适合科研人员快速构建智慧城市类可视化平台
开发基于网络的地理信息系统（GIS）应用（即CyberGIS仪表板），用于环境研究中的数据查询与可视化，通常需要重复且资源密集的工作。尽管生成式AI具有自动化编码潜力，但在复杂科学应用中仍受限于领域知识、软件工程原则与界面设计规范的整合难题。本文提出一种知识增强型代码生成框架，从专用知识库中检索软件工程最佳实践、领域专长及先进技术栈，以增强生成式预训练模型（GPT）在前端开发中的能力。该框架可将用户在PowerPoint或Adobe Illustrator中绘制的界面草图自动转换为地理信息类网页应用（如仪表板、交互界面）。提出一种新型上下文感知视觉提示方法，使用Python实现，能从草图中提取布局与界面特征，指导代码生成。通过引入结构化推理、软件工程原则和领域知识，结合思维链（CoT）提示与检索增强生成（RAG）思想，利用大语言模型（LLM）生成前端代码。案例研究证明，该框架能从用户草图生成一个模块化、可维护的网络平台，集成多个仪表板，用于展示环境与能源数据（如时间序列、形状文件、栅格数据）。采用知识驱动方法，生成符合行业标准的可扩展前端代码，运用如模型-视图-视图模型（MVVM）设计模式及React框架，显著降低设计与编码的手动投入，开创智能城市软件开发的自动化高效路径。
原文摘要 · Abstract (English)
Developing web-based GIS applications, commonly known as CyberGIS dashboards, for querying and visualizing GIS data in environmental research often demands repetitive and resource-intensive efforts. While Generative AI offers automation potential for code generation, it struggles with complex scientific applications due to challenges in integrating domain knowledge, software engineering principles, and UI design best practices. This paper introduces a knowledge-augmented code generation framework that retrieves software engineering best practices, domain expertise, and advanced technology stacks from a specialized knowledge base to enhance Generative Pre-trained Transformers (GPT) for front-end development. The framework automates the creation of GIS-based web applications (e.g., dashboards, interfaces) from user-defined UI wireframes sketched in tools like PowerPoint or Adobe Illustrator. A novel Context-Aware Visual Prompting method, implemented in Python, extracts layouts and interface features from these wireframes to guide code generation. Our approach leverages Large Language Models (LLMs) to generate front-end code by integrating structured reasoning, software engineering principles, and domain knowledge, drawing inspiration from Chain-of-Thought (CoT) prompting and Retrieval-Augmented Generation (RAG). A case study demonstrates the framework's capability to generate a modular, maintainable web platform hosting multiple dashboards for visualizing environmental and energy data (e.g., time-series, shapefiles, rasters) from user-sketched wireframes. By employing a knowledge-driven approach, the framework produces scalable, industry-standard front-end code using design patterns such as Model-View-ViewModel (MVVM) and frameworks like React. This significantly reduces manual effort in design and coding, pioneering an automated and efficient method for developing smart city software.
Thank you to arXiv for use of its open access interoperability. PaperDance 不是 arXiv 官方产品；中文卡片由大模型生成，请以原文为准。