可构建和定制您自己的AI城镇的热门项目——AI Town - 文章 - 开发者社区

前言

在线演示[1]

加入我们的社区Discord：AI Stack Devs[2]

picture.image

AI Town是一个虚拟城镇，AI角色在此生活、聊天和社交。

这个项目是一个部署好的入门工具包，便于构建和定制你自己的AI Town版本。受到研究论文《生成代理：人类行为的交互模拟》的启发（链接：https://arxiv.org/pdf/2304.03442.pdf）。该项目的主要目标不仅仅是为了开发有趣，更重要的是提供一个具有可扩展性的强大基础平台。后端原生支持共享全局状态、事务和模拟引擎，适用于从简单玩耍的项目到可扩展的多人游戏的各种场景。第二个目标是提供一个JS/TS框架，因为这个领域的大部分模拟器（包括上述的原始论文）都是用Python编写的。

概述

•💻 技术栈[3] •🧠 安装[4] •👤 自定义 - 运行您自己的模拟世界[5] •👩‍💻 设置本地推理[6] •🏆 致谢[7]

[8]技术栈

•游戏引擎、数据库和向量搜索: Convex[9] •认证: Clerk[10] •文本模型: OpenAI[11] •部署: Vercel[12] •像素艺术生成: Replicate[13]、Fal.ai[14] •背景音乐生成: 使用Replicate[15]和MusicGen[16] •本地推理: Ollama[17] 安装

克隆存储库并安装软件包


          
git clone https://github.com/a16z-infra/ai-town.git
          
cd ai-town
          
npm install
          
npm run dev

npm run dev将会失败并要求设置环境变量。在Convex仪表板的环境变量中输入它们以继续。您可以通过npx convex dashboard或https://dashboard.convex.dev[18]进入。请参考下面有关如何获取各种环境变量的说明。

a. 设置Clerk

•前往 https://dashboard.clerk.com/ 并点击 "Add Application" •给您的应用程序取个名字，选择您想要提供给用户的登录提供者 •创建应用程序 •在 .env.local 中添加 VITE_CLERK_PUBLISHABLE_KEY 和 CLERK_SECRET_KEY


          
VITE_CLERK_PUBLISHABLE_KEY=pk_***
          
CLERK_SECRET_KEY=sk_***

•前往 JWT 模板并创建一个新的 Convex 模板。 •复制 JWKS 端点 URL 用于下面的使用。

b. OpenAI API 密钥访问OpenAI平台[19]获取您的OpenAI API密钥，并在您的Convex部署中设置OPENAI_API_KEY环境变量（请参见下方）。

c. 复制API密钥（可选）对于每日背景音乐生成，请创建一个Replicate[20]账户，并在您的个人资料的API令牌页面[21]上创建一个令牌。将该令牌添加为Convex环境变量中的REPLICATE_API_TOKEN。

d. 将环境变量添加到Convex后端。Convex 后端的环境变量是通过仪表板配置的：


        
            

          npx convex dashboard

进入"设置"并添加以下环境变量。CLERK_ISSUER_URL 应该是 JWKS 端点中 URL 的域名（例如， https://your-issuer-url.clerk.accounts.dev/）。


          
OPENAI_API_KEY  sk-*******
          
CLERK_ISSUER_URL  https://****
          
REPLICATE_API_TOKEN **** #可选

[22]运行代码

要同时运行前端和后端：


        
            

          npm run dev

您现在可以访问http://localhost:5173[23]。

如果您更愿意在Convex的后端功能保存时在单独的终端中运行前端，您可以运行以下两个命令：


        
            

          npm run dev:frontendnpm run dev:backend

有关详细信息，请参阅package.json，但是dev:backend运行npx convex dev。注意 : 如果窗口闲置，模拟将在5分钟后暂停。重新加载页面将取消暂停状态。您也可以通过界面上的按钮手动冻结和解冻世界。如果您想在没有浏览器的情况下运行世界，可以在convex/crons.ts文件中注释掉“停止非活动世界”定时器。

各种命令来运行/测试/调试

停止后端，以防活动过多 这将停止运行引擎和代理。您仍然可以运行查询和函数以进行调试。


        
            

          npx convex run testing:stop

停止后重新启动后端


        
            

          npx convex run testing:resume

如果游戏引擎或代理未运行，请重启引擎


        
            

          npx convex run testing:kick

归档世界

如果您想要重置世界并从头开始，可以对当前世界进行归档：


        
            

          npx convex run testing:archive

然后，您仍然可以通过仪表板查看世界的数据，但是引擎和代理将不再运行。

然后，您可以使用init创建一个全新的世界。


        
            

          npx convex run init

清除所有数据库

您可以使用wipeAllTables测试函数清除所有表格。


        
            

          npx convex run testing:wipeAllTables

暂停您的后端部署 您可以转到仪表板[24]以设置您的部署，从而暂停和取消暂停您的部署。这将停止所有函数的运行，无论是从客户端调用的函数，还是按计划执行或作为定时任务运行的函数。将此视为最后的手段，因为还有更温和的停止方法。一旦您部署了应用程序，

部署应用程序

部署到 Vercel

•在 Vercel 上注册一个账号，然后安装 Vercel CLI[25]。 •如果你正在使用 Github Codespaces : 你需要安装 Vercel CLI[26]，并通过运行vercel login在 codespaces cli 中进行身份验证。 •使用vercel --prod将应用部署到 Vercel。

####部署 Convex 函数到生产环境[27] 在运行该应用之前，您需要确保凸函数已部署到其生产环境。

1.运行 npx convex deploy 将凸函数部署到生产环境 2.运行 npx convex run init --prod

如果您有要清除的现有数据，可以运行 npx convex run testing:wipeAllTables --prod

[28]自定义您自己的模拟

注意：每次更改字符数据时，您应该重新运行npx convex run testing:wipeAllTables，然后再运行npm run dev以重新上传所有内容到Convex。这是因为字符数据在初始加载时发送到Convex。但是，请注意npx convex run testing:wipeAllTables会删除您的所有数据。

1.创建自己的角色和故事：所有角色和故事，以及它们的精灵表引用都存储在characters.ts[29]中。您可以通过更改角色描述来开始。 2.更新精灵表：在data/characters.ts中，您将看到以下代码：


          
export const characters = [
          
  {
          
    name: 'f1',
          
    textureUrl: '/assets/32x32folk.png',
          
    spritesheetData: f1SpritesheetData,
          
    speed: 0.1,
          
  },
          
  ...
          
];

您应该为您的角色找到一个精灵表，并在相应的文件中定义精灵动画和资源（在上面的示例中，f1SpritesheetData在f1.ts中定义）。3. 更新背景（环境）：data/firstmap.ts 是加载地图的地方。导出瓷砖地图最简单的方法是使用Tiled[30] - Tiled将瓷砖地图导出为CSV格式，您可以将CSV转换为firstmap.ts可接受的二维数组。4. 通过修改convex/music.ts中的提示来更改背景音乐。5. 通过修改convex/crons.ts中的generate new background music作业，更改生成新音乐的频率。

设置本地推理环境

我们支持使用Ollama[31]进行对话生成，但尚不支持使用本地模型生成嵌入。

使用Ollama的步骤如下：

1.安装Ollama[32]。

当Ollama在您的笔记本上运行时，默认情况下使用http://localhost:11434[33]作为生成的端点。接下来，我们需要设置一个tunnelmole或ngrok隧道，以便Convex可以访问它：**使用Tunnelmole** Tunnelmole[34]是一个开源的隧道工具。您可以使用以下选项之一安装Tunnelmole：

•NPM：npm install -g tunnelmole •Linux：curl -s https://tunnelmole.com/sh/install-linux.sh | sudo bash •Mac：curl -s https://tunnelmole.com/sh/install-mac.sh --output install-mac.sh && sudo bash install-mac.sh •Windows：使用NPM安装，如果您没有安装NodeJS，可以在此处下载Windows的exe文件here[35]并将其放在PATH中的某个位置。

安装完Tunnelmole后，运行以下命令：


        
            

          tmole 11434

Tunnelmole在运行此命令后应该输出一个唯一的URL。

使用Ngrok

Ngrok是一个流行的闭源隧道工具。

• 安装Ngrok[36]

安装并验证ngrok后，运行以下命令：


        
            

          ngrok http http://localhost:11434

运行此命令后，Ngrok应该输出一个唯一的URL。

2.将Ollama端点添加到Convex中

•运行npx convex dashboard来打开convex仪表盘 •进入设置 > 环境变量 •添加OLLAMA_HOST = [之前步骤中的tunnelmole/ngrok唯一URL] •你可能还想要设置：ACTION_TIMEOUT为100000或更多，以给你的模型更多的运行时间。NUM_MEMORIES_TO_SEARCH为1，以减小对话提示的大小。

默认情况下，我们在Ollama上使用llama2-7b模型。如果你想自定义使用哪个模型，你可以在环境变量下设置OLLAMA_MODEL变量。Ollama模型选项可以在这里[37]找到。

[38]感谢

•该项目中的所有交互、背景音乐和渲染都由PixiJS[39]提供支持。 •瓷砖图：•来自George Bailey的https://opengameart.org/content/16x16-game-assets•来自hilau的16x16 RPG Tileset | OpenGameArt.org[40] •我们使用了GitHub - pierpo/phaser3-simple-rpg: A simple Phaser3 RPG using Typescript ⚔️[41]作为该项目的原始POC。但现在我们已经完全重新编写了整个应用程序，但是感谢这个简单的起点。 •原始资源由ansimuz[42]制作。 •UI基于Mounir Tohami[43]的原始资源。

其他

Tunnelmole和Ngrok都是用于建立隧道连接的工具，但它们的应用场景和目的有所不同。

Tunnelmole

•用途：Tunnelmole主要用于创建安全的网络隧道。这些隧道可以帮助网络流量绕过互联网限制或保护通信的安全性。 •一般场景：•绕过网络限制：在一些网络环境中，特定服务或网站可能被限制访问。使用Tunnelmole可以创建一个隧道来绕过这些限制。•安全通信：用于在不安全的网络环境中安全地传输数据，例如在公共Wi-Fi下。•远程工作：在需要远程访问内部网络资源时，Tunnelmole可以提供一种安全的方式来实现这一目的。

Ngrok

•用途：Ngrok主要用于将本地服务器暴露到公共互联网上。它创建一个安全的隧道到本地主机，使得本地运行的服务器或服务可以被外部网络访问。 •一般场景：•本地开发测试：对于开发者来说，在开发阶段可以使用Ngrok将本地运行的应用暴露给外网，便于测试和演示。•网络钩子（Webhooks）测试：在开发涉及外部服务回调的应用时，Ngrok可以提供一个可公开访问的URL来接收这些回调。•远程调试：使其他人能够访问并测试本地正在开发或调试的应用，而不需要将应用部署到公共服务器上。

总结来说，Tunnelmole更侧重于创建安全的网络通道以保护数据传输或绕过限制，而Ngrok则主要用于将本地服务暴露给外部网络，便于开发和测试。

Ngrok和Nginx 主要区别和联系：

Ngrok和Nginx虽然名字相似，但它们的功能和用途大不相同。

Ngrok

1.功能：•Ngrok是一个隧道服务工具，它允许你将本地运行的服务器或服务暴露给外部的互联网。•它创建了一个从公共端点（URL）到本地主机的安全隧道。 2.用途：

•主要用于开发阶段，让开发者可以轻松地分享本地运行的应用或服务，进行远程测试和演示。 •可用于本地webhook开发和测试，因为它提供了一个可访问的公共URL。

3.工作原理：

•运行在本地的服务通过Ngrok连接到一个远程服务器，该服务器提供一个公共URL，外部流量通过这个URL被转发到本地服务。

Nginx

1.功能：•Nginx是一个高性能的Web服务器和反向代理服务器。•它也可以用作负载均衡器、HTTP缓存和邮件代理。 2.用途：

•主要用于生产环境中，处理实际的客户端请求，托管网站和应用。 •常用于提高网站性能和可靠性，通过负载均衡和缓存优化网站的响应。

3.工作原理：

•作为Web服务器，Nginx可以托管网站内容，处理HTTP请求。 •作为反向代理，它可以在客户端和多个服务器之间分发请求，提高性能和安全性。

区别和联系

区别： •Ngrok主要用于开发和测试，为本地服务器提供公共访问点；而Nginx是一个专业的Web服务器和反向代理，用于生产环境中托管和管理网络流量。 •Ngrok创建的是从外部到本地的隧道；Nginx则在服务器端处理来自客户端的请求。 联系： •两者都涉及网络请求的处理和转发，但在不同的环节和目的。 •在某些场景下，它们可以协同工作。例如，使用Ngrok暴露使用Nginx作为服务器的本地应用，以便远程测试。

总体而言，Ngrok和Nginx服务于网络应用的不同阶段和需求，Ngrok更侧重于开发和测试阶段的临时需求，而Nginx则是面向生产环境的长期和稳定运行。

项目链接：[GitHub - a16z-infra/ai-town: A MIT-licensed, deployable starter kit for building and customizing your own version of AI town - a virtual town where AI characters live, chat and socialize.

References