时至今日,以ChatGPT 为代表的这波AI技术的影响力基本结束了爆发式增长,趋于温和和理性,大家持续在应用层探索,衍生出来的新方向基本在向量数据库、插件生态以及Prompt Engineer/自动化这些范畴内。目前的GPT技术谈不上完美但已经足够震惊,但就算作为OpenAI发源地的美国,还有42%的美国人根本没有听说过ChatGPT,所以在可预见的未来增量空间还很大。但目前GPT3.5和GPT4的幻觉问题,依然没有根治,大家期望着不确定什么时候到来的GPT5也许能解决幻象丛生的问题。
最近在网上看到这张图,用来形容GPT应用的不同阶段还挺贴切的。BTW,笔者在今年3月份也做了一个基于向量数据库用低代码搭建的知识库问答机器人教程,感兴趣的朋友也可以了解:《如何用低代码搭建一个专业知识库问答AI机器人》
低代码与GPT结合落地现状
A portfolio page for Matt Perry, a photographer in Amsterdam. The site should also include information about Matt's background, his approach to photography, and upcoming events or exhibitions.
/** Metadata about the web page which will be used to create content for it. */
interface Page {
/** Who or what is the page mainly about? */
subject: string
/** A good title for the page based on the user request and all other info. It should be a string with around 3 words. Use the same language as the user request. */
pageTitle: string
/** The css color values, in hex format, that would best be used with this type of web page. For example, a web page about fire trucks might use "#ce2029". */
colors: string[]
/** The style of typography to use based on the type of content on this web page. If it's an artistic page, it might be "serif", if its a page that is informative, it might be "sans-serif". */
typography: """serif" | "sans-serif""
/** Five detailed image description ideas in English for images on the site. Don't describe concepts and don't use names of people, instead describe the image contents. Keep the descriptions short and pure (don't add titles or prefixes). Keep it as diverse as possible (avoid repetition). */
imageDescriptions: string[]
/**
* A decimal between 0 and 1 indicating how light the page should be. For
* example, a page with a sci-fi or tech theme might have a low value like
* 0. A page for a baking blog might have a high value like 0.8. A website
* where the lightness doesn't matter would have a value of 0.5.
*/
lightness: string
/**
* A decimal between 0 and 1 indicating how creative the design of the page
* should be. The majority of pages will be very close to 0.5. However
* specific themes of webpages will have values closer to 0 or 1. For
* example, a page with a sci-fi, fantasy, or artistic theme might have a
* very high value like 0.9. Meanwhile, SaaS software, ecommerce, or a
* website marketing a business might have a lower value, like 0.2.
*/
creativity: string
}
messages
中定义的语言格式和对象结构借助GPT的推理能力,就能够拿到包含整体应用页面的风格定义和主题定义的静态对象。{
"subject":"Matt Perry, Photographer in Amsterdam",
"pageTitle":"Matt Perry Portfolio",
"colors":[
"#2c3e50",
"#f5f5f5",
"#3498db"
],
"typography":"sans-serif",
"imageDescriptions":[
"A black and white portrait of a person standing in a busy street",
"A close-up of a dewdrop on a flower petal",
"A panoramic view of a sunset over the city skyline",
"A motion-blurred photo of a cyclist in motion",
"A photo of a lone tree on a foggy morning"
],
"lightness":"0.7",
"creativity":"0.8"
}
Section
区块的定义部分
/** Image keys that are available for use. Only the values in this set will work, any other value will cause an error. It’s okay to use the same value more than once, because a random image will be chosen (but still try to vary when possible). */
type ImageKey = "abstract_space_themed_art" | "starry_night_in_amsterdam" | "silhouette_female" | "sky" | "architecture_details_of_old_building" | "boat_passing_under_bridge" | "photo_of_a_building" | "bicycles_parked_on_bridge" | "forest" | "cityscape" | "abstract_pattern" | "avatar_female" | "avatar_male" | "single_object" | "close_up_of_plant" | "landscape_with_mountains" | "colorful_canal_houses_in_amsterdam" | "silhouette_male"
type Section =
// Spacious section with random vector shapes. Put this between text heavy sections.
| { id: "divider" }
// Must be last and not combined with other footers
| { id: "footer"; copyrightShortSentence: string }
// A small category/label followed by a big text (a sentence or so)
| { id: "generic_text_1"; labelOrCategory: string; shortSentence: string }
// A section with avatar and text content right aligned
| { id: "generic_text_2"; siteAuthorPhoto: ImageKey; oneWordHeading: string; paragraph: string }
// Has 2 differently priced plans in format $4.99/mo etc
| { id: "pricing_cards"; plan1Name: string; plan1MonthlyPrice: string; plan1Feature1Max2Words: string; plan1Feature2Max2Words: string; plan1Feature3Max2Words: string; plan1Feature4Max2Words: string; plan1CTA: string; plan2Name: string; plan2MonthlyPrice: string; plan2Feature1Max2Words: string; plan2Feature2: string; plan2Feature3Max2Words: string; plan2Feature4Max2Words: string; plan2CTA: string }
// A list of four items with names and associated years
| { id: "text_list"; listTitle: string; item1Title: string; item1Year: string; item2Title: string; item2Year: string; item3Title: string; item3Year: string; item4Title: string; item4Year: string }
// Big title with a paragraph and input field below it
| { id: "signup_form"; signupForNewsletter: string; fewLinesWithCallsToAction: string }
// Hero with navigation, text and a background gradient
| { id: "hero"; navigationItemOneWord1: string; navigationItemOneWord2: string; navigationItemOneWord3: string; taglineOfFiveToTenWordsAlwaysAddAPeriod: string }
// Three rows with project titles, an icon, and a subtitle continuing sentence below it
| { id: "metrics"; projectTitle1: string; shortAchievementMaxFiveWords1: string; projectTitle2: string; shortAchievementMaxFiveWords2: string; projectTitle3: string; shortAchievementMaxFiveWords3: string }
// A heading with four images under it
| { id: "gallery"; galleryTitleMax3Words: string; picture1: ImageKey; picture2: ImageKey; picture3: ImageKey; picture4: ImageKey; picture5: ImageKey; picture6: ImageKey }
// 6 short paragraphs in a text grid
| { id: "summary"; featuresTitleMax4Words: string; feature1Max4Words: string; subtitleMax14Words1: string; feature2Max4Words: string; subtitleMax14Words2: string; feature3Max4Words: string; subtitleMax14Words3: string; feature4Max4Words: string; subtitleMax14Words4: string; feature5Max4Words: string; subtitleMax14Words5: string; feature6Max4Words: string; subtitleMax14Words6: string }
// Big title with a button below it
| { id: "call_to_action"; titleMax2Words: string; fewLinesWithCallsToAction: string; ctaButtonText: string }
interface Page {
/** Several sections with the content that will appear on the page (top to bottom). */
sections: Section[]
}
{
"sections":[
{
"id":"hero",
"navigationItemOneWord1":"Portfolio",
"navigationItemOneWord2":"About",
"navigationItemOneWord3":"Events",
"taglineOfFiveToTenWordsAlwaysAddAPeriod":"Capturing Amsterdam’s essence, one click at a time."
},
{
"id":"generic_text_1",
"labelOrCategory":"Photographer",
"shortSentence":"Welcome to Matt Perry’s world of vibrant visuals."
},
{
"id":"gallery",
"galleryTitleMax3Words":"Amsterdam Showcase",
"picture1":"starry_night_in_amsterdam",
"picture2":"architecture_details_of_old_building",
"picture3":"boat_passing_under_bridge",
"picture4":"photo_of_a_building",
"picture5":"bicycles_parked_on_bridge",
"picture6":"colorful_canal_houses_in_amsterdam"
},
{
"id":"generic_text_2",
"siteAuthorPhoto":"avatar_male",
"oneWordHeading":"Approach",
"paragraph":"Matt’s photography is fueled by his passion for Amsterdam’s rich history and culture. His unique perspective captures the city’s essence, blending historical landmarks with modern sensibilities."
},
{
"id":"text_list",
"listTitle":"Upcoming Events",
"item1Title":"Night Lights Exhibition",
"item1Year":"July 5, 2023",
"item2Title":"Amsterdam Reflections",
"item2Year":"August 12, 2023",
"item3Title":"Urban Jungle",
"item3Year":"September 20, 2023",
"item4Title":"Golden Hour",
"item4Year":"October 15, 2023"
},
{
"id":"divider"
},
{
"id":"signup_form",
"signupForNewsletter":"Stay Updated",
"fewLinesWithCallsToAction":"Don’t miss out on Matt’s latest adventures and exhibitions. Subscribe to our newsletter for exclusive updates and offers."
},
{
"id":"footer",
"copyrightShortSentence":"© 2023 Matt Perry Photography. All rights reserved."
}
]
}
max_token
限制,另一方面也是兼顾生成效率的考量下最好的结果。同时也由此导致无法更细粒度的控制组件的变化,使得场景也容易受限在了静态官网类的生成上。低代码结合GPT的机会启发
上周OpenAI对部分开发者开放了32K的token,有望缓解DSL推理的长度问题。但就目前大部分低代码平台的DSL复杂度来说,依然杯水车薪,生成页面的时效性灵活性和自动化页面的多样性,这两者目前很难兼顾。
-
平台集成:在低代码集成 snippet code的生成,结合平台开放API预训练代码生成,快速生成低代码中的自定义前后端逻辑; -
DSL生成:从文生图到图生页面(已基本成熟),再到低代码专属DSL的生成,未来需要中间产物DSL来实现复杂业务的人机交互,0-1的生成也许会被AI取代,但是1-10(即复杂业务的匹配度)个人认为依然要人为调教; -
工具链:包括不限于 向量数据库、embedding模型以及基于此的上层SDK封装(轻训练/搜索等)有增量空间; -
…
上述内容系之前分享节选,时间过去小半年,部分内容做了更新,有些预判看到了实际应用落地,进化之快有点始料未及。
参考资料
CodeX: https://platform.openai.com/docs/guides/code
[2]Replit: https://replit.com/
[3]Framer: https://framer.com/
[4]Wireframe-Designer: https://www.figma.com/community/plugin/1228969298040149016/Wireframe-Designer
[5]ReAct: https://arxiv.org/abs/2210.03629
[6]LLM Powered Autonomous Agents: https://lilianweng.github.io/posts/2023-06-23-agent/