基于LLM大模型开发Web App生成器

随着越来越多的代码生成模型公开可用，现在可以以我们以前无法想象的方式进行文本到网络甚至文本到应用程序。

本教程介绍了一种通过流式传输和渲染内容来生成 AI Web 内容的直接方法。

在这里插入图片描述

推荐：用 NSDT设计器 快速搭建可编程3D场景。

1、在 Node 应用程序中使用 LLM

虽然我们通常将 Python 视为与 AI 和 ML 相关的所有内容，但 Web 开发社区严重依赖 JavaScript 和 Node.js。

以下是你可以在此平台上使用大型语言模型的一些方法。

1.1 在本地运行模型

有多种方法可以在 Javascript 中运行 LLM，从使用 ONNX 到将代码转换为 WASM，再到调用用其他语言编写的外部进程。

其中一些技术现在可以作为即用型 NPM 库提供：

使用 AI/ML 库，例如 Transformers.js（支持代码生成）
使用专用的LLM库，例如llama-node（或浏览器的web-llm）
通过 Pythonia 等桥梁使用 Python 库
然而，在这样的环境中运行大型语言模型可能会占用大量资源，尤其是在你无法使用硬件加速的情况下。

1.2 使用 API

如今，各种云提供商提出了商业 API 来使用语言模型。 以下是当前的 Hugging Face 产品：

免费的推理 API 允许任何人使用社区中的中小型模型。
更先进、可用于生产的推理端点 API，适合需要更大模型或自定义推理代码的用户。
可以使用 NPM 上的 Hugging Face Inference API 库从 Node 使用这两个 API。

💡 性能最佳的模型通常需要大量内存（32 Gb、64 Gb 或更多）和硬件加速才能获得良好的延迟（请参阅基准测试）。 但我们也看到了模型尺寸缩小的趋势，同时在某些任务上保持相对较好的结果，内存要求低至 16 Gb 甚至 8 Gb。

2、系统架构

我们将使用 NodeJS 创建我们的生成式 AI Web 服务器。

该模型将是在推理端点 API 上运行的 WizardCoder-15B，但你可以随意尝试其他模型和技术栈。

如果你对其他解决方案感兴趣，这里有一些替代实现的提示：

  • 使用 Inference API：代码和空间
  • 使用 Node 中的 Python 模块：代码和空间
  • 使用 llama-node (llama cpp)：代码

3、初始化项目

首先，我们需要设置一个新的 Node 项目（如果需要，你可以克隆此模板）。

git clone https://github.com/jbilcke-hf/template-node-express tutorial
cd tutorial
nvm use
npm install

然后，我们可以安装Hugging Face Inference客户端：

npm install @huggingface/inference

并在 src/index.mts 中进行设置：

import { HfInference } from '@huggingface/inference'

// to keep your API token secure, in production you should use something like:
// const hfi = new HfInference(process.env.HF_API_TOKEN)
const hfi = new HfInference('** YOUR TOKEN **')

4、配置推理端点

💡 注意：如果你不想支付 Endpoint 实例的费用来完成本教程，可以跳过此步骤并查看这个免费的 Inference API 示例。 请注意，这仅适用于较小的型号，其功能可能不那么强大。

要部署新的端点，你可以转到端点创建页面。

你必须在模型存储库下拉列表中选择 WizardCoder，并确保选择足够大的 GPU 实例：
在这里插入图片描述

创建端点后，你可以从此页面复制 URL：
在这里插入图片描述

配置客户端以使用它：

const hf = hfi.endpoint('** URL TO YOUR ENDPOINT **')

现在可以告诉推理客户端使用我们的专用端点并调用我们的模型：

const { generated_text } = await hf.textGeneration({
  inputs: 'a simple "hello world" html page: <html><body>'
});

5、生成 HTML 流

现在是时候在 Web 客户端访问 URL（例如 /app）时向 Web 客户端返回一些 HTML。

我们将使用 Express.js 创建端点，以流式传输 Hugging Face Inference API 的结果。

import express from 'express'

import { HfInference } from '@huggingface/inference'

const hfi = new HfInference('** YOUR TOKEN **')
const hf = hfi.endpoint('** URL TO YOUR ENDPOINT **')

const app = express()

由于我们暂时没有任何 UI，界面将是一个简单的提示 URL 参数：

app.get('/', async (req, res) => {

  // send the beginning of the page to the browser (the rest will be generated by the AI)
  res.write('<html><head></head><body>')

  const inputs = `# Task
Generate ${req.query.prompt}
# Out
<html><head></head><body>`

  for await (const output of hf.textGenerationStream({
    inputs,
    parameters: {
      max_new_tokens: 1000,
      return_full_text: false,
    }
  })) {
    // stream the result to the browser
    res.write(output.token.text)

    // also print to the console for debugging
    process.stdout.write(output.token.text)
  }

  req.end()
})

app.listen(3000, () => { console.log('server started') })

启动你的Web服务器：

npm run start

然后打开链接 https://localhost:3000?prompt=some prompt。 片刻之后你应该会看到一些原始的 HTML 内容。

6、调整提示

每种语言模型对提示的反应都不同。 对于 WizardCoder，简单的指令通常效果最好：

const inputs = `# Task
Generate ${req.query.prompt}
# Orders
Write application logic inside a JS <script></script> tag.
Use a central layout to wrap everything in a <div class="flex flex-col items-center">
# Out
<html><head></head><body>`

7、使用Tailwind

Tailwind 是一种流行的 CSS 内容样式框架，WizardCoder 擅长开箱即用。

这允许代码生成随时随地创建样式，而不必在页面的开头或结尾生成样式表（这会让页面感觉卡住）。

为了提高结果，我们还可以通过显示方式来引导模型（ ）。

const inputs = `# Task
Generate ${req.query.prompt}
# Orders
You must use TailwindCSS utility classes (Tailwind is already injected in the page).
Write application logic inside a JS <script></script> tag.
Use a central layout to wrap everything in a <div class="flex flex-col items-center'>
# Out
<html><head></head><body class="p-4 md:p-8">`

8、预防幻觉

与较大的通用模型相比，在专用于代码生成的轻型模型上可靠地防止幻觉和失败（例如鹦鹉学舌地回传整个指令，或编写“lorem ipsum”占位符文本）可能很困难，但我们可以尝试减轻 它。

你可以尝试使用祈使语气并重复说明。 一种有效的方法还可以是通过用英语给出部分输出来显示方法：

const inputs = `# Task
Generate ${req.query.prompt}
# Orders
Never repeat these instructions, instead write the final code!
You must use TailwindCSS utility classes (Tailwind is already injected in the page)!
Write application logic inside a JS <script></script> tag!
This is not a demo app, so you MUST use English, no Latin! Write in English! 
Use a central layout to wrap everything in a <div class="flex flex-col items-center">
# Out
<html><head><title>App</title></head><body class="p-4 md:p-8">`

9、添加对图像的支持

我们现在有一个可以生成 HTML、CSS 和 JS 代码的系统，但当要求生成图像时，它很容易产生幻觉损坏的 URL。

幸运的是，在图像生成模型方面我们有很多选项可供选择！

→ 最快的入门方法是使用我们的免费推理 API 以及hub上可用的公共模型之一来调用稳定扩散模型：

app.get('/image', async (req, res) => {
  const blob = await hf.textToImage({
    inputs: `${req.query.caption}`,
    model: 'stabilityai/stable-diffusion-2-1'
  })
  const buffer = Buffer.from(await blob.arrayBuffer())
  res.setHeader('Content-Type', blob.type)
  res.setHeader('Content-Length', buffer.length)
  res.end(buffer)
})

将以下行添加到提示符中足以指示 WizardCoder 使用我们新的 /image 端点！ （你可能需要针对其他模型进行调整）：

To generate images from captions call the /image API: <img src="/image?caption=photo of something in some place" />

你也可以尝试更具体，例如：

Only generate a few images and use descriptive photo captions with at least 10 words!

在这里插入图片描述

10、添加一些用户界面

Alpine.js 是一个极简框架，允许我们创建交互式 UI，无需任何设置、构建管道、JSX 处理等。

一切都在页面内完成，因此非常适合创建快速演示的 UI。

这是一个静态 HTML 页面，你可以将其放入 /public/index.html 中：

<html>
  <head>
    <title>Tutorial</title>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="flex flex-col space-y-3 p-8" x-data="{ draft: '', prompt: '' }">
      <textarea
          name="draft"
          x-model="draft"
          rows="3"
          placeholder="Type something.."
          class="font-mono"
         ></textarea> 
      <button
        class="bg-green-300 rounded p-3"
        @click="prompt = draft">Generate</button>
      <iframe :src="`/app?prompt=${prompt}`"></iframe>
    </div>
  </body>
</html>

要实现此功能，你必须进行一些更改：

...

// going to localhost:3000 will load the file from /public/index.html
app.use(express.static('public'))

// we changed this from '/' to '/app'
app.get('/app', async (req, res) => {
   ...

11、优化输出

到目前为止，我们已经生成了 Tailwind 实用程序类的完整序列，这对于赋予语言模型设计自由非常有用。

但这种方法也非常冗长，消耗了我们很大一部分代币配额。

为了使输出更密集，我们可以使用 Daisy UI，这是一个 Tailwind 插件，它将 Tailwind 实用程序类组织到设计系统中。 这个想法是对组件使用简写类名，对其余部分使用实用程序类。

有些语言模型可能没有 Daisy UI 的内部知识，因为它是一个小众库，在这种情况下，我们可以在提示中添加 API 文档：

# DaisyUI docs
## To create a nice layout, wrap each article in:
<article class="prose"></article>
## Use appropriate CSS classes
<button class="btn ..">
<table class="table ..">
<footer class="footer ..">

12、更进一步

最终的演示空间包括更完整的用户界面示例。

以下是进一步扩展此概念的一些想法：

  • 测试其他语言模型，例如 StarCoder
  • 为中间语言（React、Svelte、Vue…）生成文件和代码
  • 将代码生成集成到现有框架内（例如 NextJS）
  • 从失败或部分代码生成中恢复（例如 JS 中的自动修复问题）
  • 将其连接到聊天机器人插件（例如，在聊天讨论中嵌入小型网络应用程序 iframe）
    在这里插入图片描述

原文链接：大模型Web App生成器开发 — BimAnt

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/36633.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

按日，周，年统计，无的数据补充0

按日，周，年统计，无的数据补充0

需求&#xff1a;按日-周-年统计。统计涉及到3张表数据。 写sql。先把3张表数据摘取出来&#xff0c;只需对3张表的时间做分组统计即可。 按日统计 select DAY(dateff) as time,IFNULL(count(id),0)as num from(select create_time as dateff,id as id from cz_taxi_orders…
阅读更多...
通过列排斥能比较两组迭代次数

通过列排斥能比较两组迭代次数

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让差值结构中有6个1, 行分布是0&#xff0c;1&#xff0c;1&#xff0c;1&#xff0c;1&#xff0c;2列分布是2&#xff0c;2&#xff0c;2.统计迭代次…
阅读更多...
【单片机】msp430f5529 万年历，数字时钟，矩阵键盘修改时间，7针OLED显示，内部温度读取

【单片机】msp430f5529 万年历，数字时钟，矩阵键盘修改时间，7针OLED显示，内部温度读取

文章目录 功能实物图原理图一些程序片段矩阵键盘内部温度读取将年月日转为星期 功能 1 显示万年历&#xff0c;利用内部RTC模块 2 按键修改时间 3 显示芯片内部的温度数值 实物图 原理图 一些程序片段 矩阵键盘 https://qq742971636.blog.csdn.net/article/details/1316505…
阅读更多...
OpenCV使用ellipse()函数来绘制一个椭圆

OpenCV使用ellipse()函数来绘制一个椭圆

/*** void ellipse(* InputOutputArray img, // 图像* Point center, // 椭圆原心* Size axes, // 椭圆x轴长度的一半，y轴长度的一半* double angle, // 椭圆旋转角度* double startAngle, // 起始角度* double endAngle, // 终止角度* const Scalar& color, // 椭圆颜色*…
阅读更多...
Hexo博客部署腾讯云服务器

Hexo博客部署腾讯云服务器

✅作者简介&#xff1a;大家好&#xff0c;我是Cisyam&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Cisyam-Shark的博客 &#x1f49e;当前专栏&#xff1a; 前端相关 ✨特色专栏&…
阅读更多...
华为Harmony应用开发初探

华为Harmony应用开发初探

HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上，HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念，能够支持手机、平板、智能穿戴、智慧屏、车机等多种终端设备，提供全场景（移动办公、运动健康、社交通信、媒体…
阅读更多...
＜Linux开发＞驱动开发 -之- Linux I2C 驱动

＜Linux开发＞驱动开发 -之- Linux I2C 驱动

&#xff1c;Linux开发&#xff1e;驱动开发 -之- Linux I2C 驱动 交叉编译环境搭建&#xff1a; &#xff1c;Linux开发&#xff1e; linux开发工具-之-交叉编译环境搭建 uboot移植可参考以下&#xff1a; &#xff1c;Linux开发&#xff1e; -之-系统移植 uboot移植过程详细…
阅读更多...
springboot服务端接口公网远程调试，并实现HTTP服务监听

springboot服务端接口公网远程调试，并实现HTTP服务监听

文章目录 前言1. 本地环境搭建1.1 环境参数1.2 搭建springboot服务项目 2. 内网穿透2.1 安装配置cpolar内网穿透2.1.1 windows系统2.1.2 linux系统 2.2 创建隧道映射本地端口2.3 测试公网地址 3. 固定公网地址3.1 保留一个二级子域名3.2 配置二级子域名3.2 测试使用固定公网地址…
阅读更多...
三个视频怎么合成一个视频？分享简单好用的合并方法

三个视频怎么合成一个视频？分享简单好用的合并方法

通过将多个视频合并成一个&#xff0c;可以将分散的内容整合在一起&#xff0c;形成一个连贯的故事或主题。这对于制作影片、剧集、纪录片或视频日志等需要综合多个片段的项目非常有用&#xff0c;可以产生更连贯和流畅的观看体验。那么怎么将视频进行合并呢&#xff1f;给大家…
阅读更多...
外部中断实验(stm32)

外部中断实验(stm32)

目录 EXIT的相关代码exit.cexit.h LED的相关代码KEY的相关代码BEEP的相关代码main.cGPIO 跟中断线的映射关系图 说明&#xff1a;以下内容参考正点原子资料 EXIT的相关代码 exit.c void EXTIX_Init(void) { EXTI_InitTypeDef EXTI_InitStructure;NVIC_InitTypeDef NVIC_InitS…
阅读更多...
pycharm如何给一串中文快捷加引号（方法二）

pycharm如何给一串中文快捷加引号（方法二）

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 商人重利轻别离&#xff0c;前月浮梁买茶去。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python白银群【此类生物】问了一个Pycharm基础的问题&a…
阅读更多...
数据结构--哈夫曼树

数据结构--哈夫曼树

数据结构–哈夫曼树 带权路径长度 结点的 权 \color{red}权 权:有某种现实含义的数值&#xff08;如:表示结点的重要性等) 结点的带权路径长度 \color{red}结点的带权路径长度 结点的带权路径长度:从树的根到该结点的路径长度(经过的边数&#xff09;与该结点上权值的乘积 树的…
阅读更多...
【玩转循环】探索Python中的无限可能性

【玩转循环】探索Python中的无限可能性

前言 循环可能是每个编程语言中使用比较多的语法了&#xff0c;如果能合理利用好循环&#xff0c;就会出现意想不到的结果&#xff0c;大大地减少代码量&#xff0c;让机器做那些简单枯燥的循环过程&#xff0c;今天我将为大家分享 python 中的循环语法使用。&#x1f697;&am…
阅读更多...
Neo4j图数据库的使用笔记

Neo4j图数据库的使用笔记

Neo4j图数据库的使用笔记 win系统安装Neo4j图数据库 安装准备&#xff1a; neo4j-3.4.0版本的zip包 找个目录解压安装zip包 启动neo4j 下载neo4j-3.4.0版本的zip包 可以去neo4j官网下载&#xff0c;也可以去微云数聚官网下载。 微云数聚是neo4j在国内的代理商。 解压到…
阅读更多...
满汉楼项目

满汉楼项目

满汉楼项目 1. 满汉楼介绍 满汉楼是一个综合餐饮管理系统&#xff0c;其主要分为&#xff1a; 人事登记&#xff1a;各部门人员信息登录管理&#xff1a;员工号、姓名、职位、密码菜谱价格&#xff1a;菜谱及价格报表统计&#xff1a;统计销售额成本及库房&#xff1a;名称注…
阅读更多...
flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单

flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单

flutter聊天界面-聊天气泡长按弹出复制、删除按钮菜单 在之前实现了flutter聊天界面的富文本展示内容&#xff0c;这里记录一下当长按聊天气泡的时候弹出复制、删除等菜单功能 一、查看效果 当长按聊天气泡的时候弹出复制、删除等菜单&#xff0c;可新增更多按钮 二、代码实现…
阅读更多...
2023/7/8总结

2023/7/8总结

Tomcat 启动&#xff1a;双击bin目录下的startup.bat文件停止&#xff1a;双击bin目录下的shutdown.bat 文件访问 &#xff1a;http://localhost:8080&#xff08;默认是8080&#xff0c;可以修改&#xff09; git的使用 打开git bash git config --global user.name "名…
阅读更多...
OpenCV读取一张深度图像并显示

OpenCV读取一张深度图像并显示

#include <iostream> #include <opencv2/imgcodecs.hpp> #include <opencv2/opencv.hpp> #include
阅读更多...
服务端研发提测模板

服务端研发提测模板

test环境分支自测通过 提测邮件标注test环境分支 【xxxxxx需求】服务端研发提测了&#xff0c;快去测试吧!
阅读更多...
第十二章 elk

第十二章 elk

1、ELK可以帮助我们解决哪些问题 日志分布在多台不同的服务器上，业务一旦出现故障，需要一台台查看日志 单个日志文件巨大，无法使用常用的文本工具分析，检索困难; 2、架构设计分析 Filebeat和Logstash ELK架构中使用Logstash收集、解析日志，但是Logstash对内存、cpu、i…
阅读更多...
最新文章

Copyright @ 2022~2023