今天上午，2024百度云智大会在北京中关村国际创新中心举行。

文心快码升级，实现了从一句话需求到代码的全部生成，感觉和cursor差不多了。

目前一般认为Claude代码写的最好。今年推出了Artifacts，这一功能在用户请求Claude生成代码、文档或网站设计时，能够将这些生成的成果与对话一同直观地展现在一个专门的窗口里。

同样的LlamaCoder是一个受Claude Artifacts启发的应用，通过聊天的方式就可以把整个项目的代码帮你写好，及预览体验。

如何使用？

1、访问
https://llamacoder.together.ai/

2、输出要构建的项目，比如“创建一个2048”

3、点击"Publish App"，生成一个url，类似这样的：

https://llamacoder.together.ai/share/x_SN7

4、访问
https://llamacoder.together.ai/share/x_SN7。

如何构建该AI程序？

LlamaCoder是一个基于Next.js的应用。

1、搭建初始界面

LlamaCoder 的核心交互是一个输入框，用户可以在其中输入他们想要构建的应用提示。

首先，实现这个输入框：

function Page() {
  let [prompt, setPrompt] = useState(''); 

  return (
    <form>
      <input
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="给我构建一个计算器应用..."
        required
      />
      
      <button type="submit">
        <ArrowLongRightIcon />
      </button>
    </form>
  );
}

接下来，为表单添加一个提交处理程序，命名为 createApp，它将负责根据用户的输入生成相应的应用代码。

function Page() {
  let [prompt, setPrompt] = useState("");

  function createApp(e) {
    e.preventDefault();

    // TODO:
    // 1. 生成代码
    // 2. 渲染应用
  }

  return <form onSubmit={createApp}>{/* ... */}</form>;
}

为了生成代码，需要让 React 应用调用一个新的 API 端点 apigenerateCode。

这是一个 POST 请求，我们可以在请求体中发送用户的输入：

async function createApp(e) {
  e.preventDefault();

  // 1. 生成代码
  await fetch("/api/generateCode", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt }),
  });

  // 2. 渲染应用
}

2、创建 API 端点

在 Next.js 应用目录中创建 route.js 文件来定义 API 路由：

// app/api/generateCode/route.js
export async function POST(req) {
  let json = await req.json();
  console.log(json.prompt);
}

当用户提交表单时，控制台会显示用户输入的提示信息。接下来，我们可以将这个提示发送到 LLM，让它生成用户需要的应用代码。

这里选择使用 Llama 3.1 405B，因为它在生成小型应用时效果最好。

首先安装 Together 的 Node SDK：

npm i together-ai

然后，使用 Together 的 chat.completions.create 方法来与 Llama 3.1 交互，生成代码：

// app/api/generateCode/route.js
import Together from "together-ai";

let together = new Together();

export async function POST(req) {
  let json = await req.json();

  let completion = await together.chat.completions.create({
    model: "meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo",
    messages: [
      {
        role: "system",
        content: "你是一个经验丰富的前端 React 工程师。",
      },
      {
        role: "user",
        content: json.prompt,
      },
    ],
  });

  return Response.json(completion);
}

在这个实现中，我们为 LLM 提供了一条“系统消息”，告诉它扮演 React 工程师的角色。接着将用户的提示信息传递给它。

3、在 React 中渲染生成的代码

接下来，我们要更新 React 应用，读取 LLM 返回的 JSON 数据，并将生成的代码展示出来：

async function createApp(e) {
  e.preventDefault();

  let res = await fetch("/api/generateCode", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ prompt }),
  });

  let json = await res.json();
  console.log(json);

  // TODO: 渲染生成的应用
}

为了在浏览器中实际运行生成的代码，使用了Sandpac 这个强大的库，它能让我们在浏览器中渲染和执行代码。

npm i @codesandboxsandpack-react

使用 Sandpack 组件，我们可以轻松执行生成的代码：

<Sandpack
  template="react-ts"
  files={{
    "App.tsx": `export default function App() { return <p>Hello, world!</p> }`,
  }}
/>

最终，我们将生成的代码存储在 generatedCode 的状态中，并在有生成的代码时渲染 Sandpack 组件：

function Page() {
  let [prompt, setPrompt] = useState("");
  let [generatedCode, setGeneratedCode] = useState("");

  async function createApp(e) {
    e.preventDefault();

    let res = await fetch("/api/generateCode", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt }),
    });

    let json = await res.json();
    setGeneratedCode(json.choices[0].message.content);
  }

  return (
    <div>
      <form onSubmit={createApp}>{/* 输入表单 */}</form>

      {generatedCode && (
        <Sandpack
          template="react-ts"
          files={{
            "App.tsx": generatedCode,
          }}
        />
      )}
    </div>
  );
}

这样，当用户输入“构建一个计算器应用”并提交表单后，Llama 3.1 生成的代码会通过 Sandpack 组件渲染在浏览器中。

4、增加代码流式传输

为了让用户在代码生成过程中看到即时反馈，我们可以使用 Together AI 的流式响应功能。在后端 API 和 React 前端分别进行更新以支持流式处理。

更新后端 API 路由，使其返回流式响应：

// app/api/generateCode/route.js
let res = await together.chat.completions.create({
  model: "meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo",
  messages: [/* 系统消息和用户提示 */],
  stream: true,
});
return new Response(res.toReadableStream(), {
  headers: new Headers({ "Cache-Control": "no-cache" }),
});

最终，用户在等待生成代码时可以看到即时反馈，大大提升了应用的响应体验。