AutoView - 讓你的設(shè)計(jì)快速變成前端組件（AI代碼生成器）
（自动视角游乐场）
@autoview 是一个自动化前端构建器，它根据类型数据自动生成代码。
@autoview 是一个代码生成器，可以根据数据生成 TypeScript 前端组件代码。这些数据可以来自 TypeScript 类型或 Swagger/OpenAPI 文档。
前端开发人员可以使用@autoview大大提高工作效率。只需定义 TypeScript 类型就可以，前端代码就会自动生成。然后你可以进一步完善这些代码，完成你的应用。
对于后端开发者而言，只需将你的 swagger.json 文件上传到 @autoview。如果你的 API 有 200 个函数，它会自动生成这 200 个前端组件。同理，如果有 300 个 API 函数，也会自动生成 300 个前端组件。
- GitHub 项目主页: https://github.com/wrtnlabs/autoview
- 演示页面: https://wrtnlabs.io/autoview WRN Labs 自动查看页面
2.1. 游乐场
访问我们的主页并试试@autoview，亲身体验一下。
在代码编辑器标签（由StackBlitz提供支持）中，找到并打开env.ts文件，并输入您的OpenAI密钥。然后在终端中运行npm run generate，以查看@autoview是如何从TypeScript类型和OpenAPI文档派生的示例schema生成TypeScript前端代码的。
你可以用自己的模式替换提供的模式，以生成定制的 TypeScript 前端代码，而无需本地安装 @autoview。这种在线编辑器的方式推荐使用因为它很方便。
2.2. TypeScript 类型定义
import { 自动视图代理 } from "@autoview/agent";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";
interface 成员信息 {
id: string & tags.Format<"uuid">;
名称: string;
年龄: number & tags.Minimum<0> & tags.Maximum<100>;
缩略图: string & tags.Format<"uri"> & tags.ContentMediaType;
}
const 代理: 自动视图代理 = new 自动视图代理({
厂商: {
api: new OpenAI({ apiKey: "********" }),
模型: "o3-mini",
},
输入模式: {
参数: typia.llm.parameters<
成员信息,
"chatgpt",
{ reference: true }
>(),
},
});
const 结果: IAutoViewResult = await 代理.generate();
await fs.promises.writeFile(
"./src/transformers/transformMember.ts",
结果.transformTsCode,
"utf8",
);
全屏模式 退出全屏
从 TypeScript 类型生成前端代码可以使用如下方法：typia.llm.parameters<Schema, Model, Config>() (其中 Schema 表示模式，Model 表示模型，Config 表示配置)。
创建一个 AutoViewAgent 实例，利用 typia.llm.parameters<Schema, Model>() 指定 IMember 类型的参数，接着调用 AutoViewAgent.generate() 方法。生成的 TypeScript 代码将会在 IAutoViewResult.transformTsCode 属性中提供。
生成代码后，将其保存到您想要的位置以便将来使用。这就是@autoview利用AI根据TypeScript类型生成TypeScript前端代码的过程。
import { AutoViewAgent } from "@autoview/agent";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";
interface IMember {
id: string & tags.Format<"uuid">;
name: string;
age: number & tags.Minimum<0> & tags.Maximum<100>;
thumbnail: string & tags.Format<"uri"> & tags.ContentMediaType;
}
// LLM 模型生成
const $defs: Record<string, IChatGptSchema> = {};
const schema: IChatGptSchema = typia.llm.schema<
Array<IMember>,
"chatgpt",
{ reference: true }
>({ $defs });
// 代码生成
const agent: AutoViewAgent = new AutoViewAgent({
vendor: {
api: new OpenAI({ apiKey: "********" }),
model: "o3-mini",
},
inputSchema: {
$defs,
schema,
},
transformFunctionName: "transformMember",
});
const result: IAutoViewResult = await agent.execute();
// 将结果写入文件
await fs.promises.writeFile(
"./src/transformers/transformMember.ts",
result.transformTsCode,
"utf8",
);全屏模式，退出全屏
注意，typia.llm.parameters<Schema, Model, Config>() 函数仅支持静态对象类型（没有动态键）。如果你需要为非对象类型（例如 Array<IMember>）生成前端代码，则必须使用 typia.llm.schema<Schema, Model, Config>() 函数。
在使用typia.llm.schema<Schema, Model, Config>()函数生成模式之前，确保提前定义并赋值一个类型为Record<string, IChatGptSchema>的"$defs"变量，这一点非常重要。
2.3. Swagger/OpenAPI 规范
import { AutoViewAgent } from "@autoview/agent";
import { OpenApi } from "@samchon/openapi";
import fs from "fs";
import OpenAI from "openai";
import typia, { tags } from "typia";
const app: IHttpLlmApplication<"chatgpt"> = HttpLlm.application({
model: "chatgpt",
document,
options: {
reference: true,
},
});
const func: IHttpLlmFunction<"chatgpt"> | undefined = app.functions.find(
(func) =>
func.path === "/shoppings/customers/sales/{id}" &&
func.method === "get",
);
if (func === undefined) throw new Error("函数未找到");
else if (func.output === undefined) throw new Error("没有返回类型");
const agent: AutoViewAgent = new AutoViewAgent({
vendor: {
api: new OpenAI({ apiKey: "********" }), // API密钥占位符保持不变
model: "o3-mini",
},
inputSchema: {
$defs: func.parameters.$defs,
schema: func.output!,
},
transformFunctionName: "transformSale", // 保留原名，用于一致性
});
const result: IAutoViewResult = await agent.generate();
await fs.promises.writeFile(
"./src/transformers/transformSale.ts",
result.typescript,
"utf8",
);
全屏模式 退出全屏
如果你有 swagger.json 文件，你可以批量生成这些前端组件。
将 Swagger/OpenAPI 文档转换成适合 LLM 函数调用的模式，使用 HttpLlm.application() 函数，并将结果提供给 AutoViewAgent 类。这样可以为每个 API 函数自动生成前端组件。
此外，您可以将后端服务器与@agentica集成，这是一个专注于大型语言模型函数调用的代理AI框架。通过从@agentica获取参数值，并通过使用@autoview自动化返回值查看器，您可以将前端应用开发完全自动化。
2.4. 前端展示
//----
// 生成的代码
//----
// src/transformSale.ts
import { IAutoViewComponentProps } from "@autoview/interface";
export function transformSale(sale: IShoppingSale): IAutoViewComponentProps;
//----
// 代码渲染
//----
// src/SaleView.tsx
import { IAutoViewComponentProps } from "@autoview/interface";
import { renderComponent } from "@autoview/ui";
import { transformSale } from "./transformSale";
export const SaleView = (props: {
sale: IShoppingSale
}) => {
const comp: IAutoViewComponentProps = transformSale(props.sale);
return <div>
{renderComponent(comp)}
</div>;
};
export default SaleView;
//----
// 主应用
//----
// src/main.tsx
import ReactDOM from "react-dom"; // React DOM 引入
import SaleView from "./SaleView";
const sale: IShoppingSale = {...}; // 略
ReactDOM.render(<SaleView sale={sale} />, document.body);
全屏模式 退出全屏
你可以用 @autoview/ui 包来渲染自动生成的那段代码。
从 @autoview/ui 导入 renderComponent() 函数，并像上面那样将其渲染成一个 React 组件。
import { FunctionCall } from "pseudo";
import { IValidation } from "typia";
export const correctCompile = <T>(ctx: {
call: FunctionCall;
compile: (src: string) => Promise<IValidation<(v: T) => IAutoViewComponentProps>>;
random: () => T;
repeat: number;
retry: (reason: string, errors?: IValidation.IError[]) => Promise<unknown>;
}): Promise<(v: T) => IAutoViewComponentProps>> => {
// 找不到对应函数，请尝试重试
if (ctx.call.name !== "render")
return ctx.retry("找不到对应函数，请尝试重试");
//----
// 编译结果
//----
const result: IValidation<(v: T) => IAutoViewComponentProps>> =
await ctx.compile(call.arguments.source);
if (result.success === false)
return ctx.retry("修正编译错误信息", result.errors);
//----
// 验证反馈
//----
for (let i: number = 0; i < ctx.repeat; ++i) {
const value: T = ctx.random(); // 生成随机值
try {
const props: IAutoViewComponentProps = result.data(value);
const validation: IValidation<IAutoViewComponentProps> =
func.validate(props); // 验证AI生成的函数
if (validation.success === false)
return ctx.retry(
"根据验证错误信息进行修正",
{
errors: validation.errors,
},
);
} catch (error) {
//----
// 异常反馈
//----
return ctx.retry(
"参照错误信息进行修正",
{
errors: [
{
path: "$input",
name: error.name,
reason: error.message,
stack: error.stack,
}
]
}
)
}
}
return result.data;
}
切换到全屏 / 退出全屏
@autoview 读取用户自定义的 TypeScript 类型或 Swagger/OpenAPI 定义，并引导 AI 生成基于这些定义的 TypeScript 前端代码。
然而，由AI生成的前端代码并不完美。为了引导AI写出更合适的前端代码，@autoview采用了多种反馈验证策略：
第一个策略是向AI提供编译错误。AI通过编译器的反馈来学习，并在后续尝试中写出正确的TypeScript代码，这样。
第二种策略是验证反馈策略。@autoview 使用 typia.random<T>() 函数为给定的类型生成随机值，并检查 AI 生成的 TypeScript 渲染代码是否生成有效输出。如果验证失败，@autoview 会提供详细跟踪信息帮助修正函数。
最终策略是异常反馈机制。生成的TypeScript代码虽然编译时没有错误，运行时异常仍然可能发生。遇到这种情况时，使用异常信息指导AI代理修正函数。
4. 路线图 (Roadmap)4.1. 截图回复
我们从渲染结果中获得理解。
当前版本的@autoview实现了三种反馈策略：“编译”、“验证”和“异常处理”。在下一个更新中，，@autoview将添加“截图反馈功能”。
当AI为用户自定义类型创建一个新的TypeScript转换函数时，@autoview会请求该类型的示例值，截图结果，并让AI代理查看截图。
由于AI在分析和解读图像方面特别擅长，@autoview的下一个版本将提供更加酷炫的体验。
4.2. 人工反馈
与用户关于渲染结果的聊天。
目前的版本的@autoview不是一个聊天机器人，而是一个前端代码生成工具，仅根据用户定义的类型模式工作。
在下一个更新中，将支持AutoViewAgent.conversate()函数，可用于开发聊天机器人。在这款聊天机器人里，用户可以通过对话指导AI生成前端代码，并在查看渲染结果的过程中，用类似指令要求AI修改前端代码。
- 宽度太窄了，可以再宽一点吗？
- 标题想更大一点。
- 有点太啰嗦了。
- 能不能更简洁一点？
4.3 主题设定
@autoview 具备主题系统功能，允许你使用自定义选项来自定义默认渲染器 @autoview/ui。
不过，此自定义主题功能目前还没有相关文档。
在下一次更新中，我们将提供自定义主题的详尽文档。
5: Agentica@agentica 是一款专门用于 LLM 模型函数调用的代理式 AI 框架。
当你向@agentica提供一个TypeScript类时，它的类方法会被正确执行。如果你提供一个Swagger/OpenAPI文档，它会成为一个与后端API功能交互的聊天机器人。
通过将@agentica与@autoview结合使用，您可以体验到一个彻底改变的开发工作流。用@agentica驱动的AI聊天助手来替换参数输入组件，并用@autoview自动化返回值显示。这可能是基于AI的前端自动化中最具有前景的方法之一。
下面是代码示例和演示该代码实际运行的视频。这些示例说明了未来可能实现的Agentic AI的潜力。
import { Agentica } from "@agentica/agent";
import { HttpLlm, OpenApi } from "@samchon/openapi";
import typia from "typia";
const agent = new Agentica({
model: "chatgpt",
vendor: {
api: new OpenAI({ apiKey: "*****" }),
model: "gpt-4o-mini",
},
controllers: [
{
protocol: "http",
name: "shopping",
application: HttpLlm.application({
model: "chatgpt",
document: await fetch(
"https://shopping-be.wrtn.ai/editor/swagger.json",
).then((r) => r.json()),
}),
connection: {
host: "https://shopping-be.wrtn.ai",
headers: {
Authorization: "Bearer *****",
},
},
},
{
protocol: "class",
name: "counselor",
application: typia.llm.application<ShoppingCounselor, "chatgpt">(),
execute: new ShoppingCounselor(),
},
{
protocol: "class",
name: "policy",
application: typia.llm.application<ShoppingPolicy, "chatgpt">(),
execute: new ShoppingPolicy(),
},
{
protocol: "class",
name: "rag",
application: typia.llm.application<ShoppingSearchRag, "chatgpt">(),
execute: new ShoppingSearchRag(),
},
],
});
await agent.duihua("我想买一台 MacBook Pro");
点击全屏 撤出全屏
共同學(xué)習(xí)，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
