Ai-artifacts：免费使用o1模型！还有Claude Artifacts 功能，几秒生成全栈APP（10+编程任务测试）

程序猿李巡天

于 2024-09-28 20:00:16 发布

阅读量346

点赞数 2

文章标签：人工智能分布式 prompt 机器学习 microsoft

本文链接：https://blog.csdn.net/m0_59235945/article/details/142620734

版权

一个实现了Claude 3.5 Sonnet Artifacts 类似功能的开源项目现在升级了，界面变得更好，最重要的是它现在可以免费使用 OpenAI 的 o1 模型，而且是 o1 preview，这真让人难以置信。

▲ o1-preview

并且目前提供免费模型还有 Llama3.1 405B、Claude3.5 Sonnet 、Gemini Pro 等等。

这个项目名叫 ai-artifacts，用户界面与 v0（往期文章）非常相似。

它是 E2B 公司开源的，像是一个让 AI 运行代码的沙箱环境。总之，这是一个可以在本地托管和使用的开源 Artifacts 替代品。

我对其中的模型进行了许多编程任务的测试，下面我们来看看吧：

> 为了让这些模型发挥最佳性能，所有提示词使用英文，视频或截图出现中文是为了方便观看。

音乐播放器:开发一个简单的音乐播放器，允许用户上传和播放自己的音乐文件。

Claude 3.5 Sonnet

如果你观看了视频，会发现他完成的很棒，

太太太太 …

所有的功能都正常运作。

然后相同的提示词我继续使用 o1-mini 和 Gemini Pro来测试：

丸辣

两个转了半天没有转出来，Gemini Pro 甚至一个代码字符都没憋出来，所以他们都失败了。在此，o1-mini 好感度 -1

创建一个应用程序，用户输入一个问题，并返回一个人工智能生成的答案。

非常完美，后续我还让他：

“ 想要添加更复杂的功能控件，并将将对话框发送在底部 ”

太酷啦 …

创建一个天气桌面应用程序，显示当前天气和未来几天的天气预报。

claude

真的很完美，尤其右上角那些下拉菜单那些功能都能用甚至还有一个录制截屏视频的，而且还提供了界面暗色、亮色的切换。

o1-mini

当 o1-mini 跑出了几乎相同的app界面的时候，我在想他们的某些训练数据是不是一样的，或者这就是这种提示词下最标准的编程实践，还有或许是 ai-artifacts 框架导致的。

当然o1-mini生成的和claude有一点不同的是左边直接提供了天气应用程序api的接入框，总的来说这个任务下二者做的都不错。

健康跟踪应用程序:设计一个应用程序，帮助用户记录和跟踪健康指标，如体重、锻炼和饮食。

o1-mini 失败了

在线投票系统:设计一个简单的在线投票应用程序，允许用户创建投票并查看结果。

gpt4-o效果很一般

这行忘删了：创建一实时天气应用程序，使用Vue.js显示当前天气数据。

使用Gradio开发一个AI代理应用程序，允许用户通过选择不同的任务与多个模型进行交互。

o1-preview，虽然创建出来了，但是和指令似乎并不那么相关

生成一个看起来很酷很现代的桌面天气应用，使用虚拟数据。

这个看起来还是不错的。

创建一个集成多个AI模型与Streamlit的代理开发平台，用户可以选择不同的AI模型(如文本生成、图像生成、情感分析等)，并通过简单的拖放界面将这些模型组合起来，创建个性化的应用程序。

Claude 3.5 Sonnet 也没有做出来，提示指令太复杂了并且没有细分。

o1 preview 也处于一直转不出来的状态

构建一个 Gradio 应用程序，用户可以在其中实时输入文本并生成图像。提供多种滤镜和样式选项，允许用户在生成过程中调整图像效果并共享其作品的链接。

Llama3.1 70B 失败了

创建一个Streamlit应用，用户输入文本描述后生成相应的图像。

Gemini Pro生成错误。

好了所有的测试先到这里，总的来说我觉得这个开源项目做的整个界面相当不错，就像v0一样，而且运行得很好，你可以用自己的 API 密钥在本地使用，让我告诉你如何在本地设置它：

Get Started

Prerequisites

git
Recent version of Node.js and npm package manager
E2B API Key
LLM Provider API Key

1. Clone the Repository

只需去 GitHub 仓库并将其克隆到你的计算机上：

git clone https://github.com/e2b-dev/ai-artifacts.git

2. Install the Dependencies

完成后进入仓库目录，运行 npm install 命令，依赖项应该会被安装：

cd ai-artifacts

运行以下命令以安装所需的依赖项：

npm i

3. Set the Environment Variables

安装完成后，然后输入你可以从 E2B 免费获取的 API 密钥：

https://e2b.dev/dashboard

创建一个 .env.local 文件并设置以下内容：

# Get your API key here - https://e2b.dev/   E2B_API_KEY="your-e2b-api-key"      # OpenAI API Key   OPENAI_API_KEY=      # Other providers   ANTHROPIC_API_KEY=   GROQ_API_KEY=   FIREWORKS_API_KEY=   TOGETHER_AI_API_KEY=   GOOGLE_AI_API_KEY=   MISTRAL_API_KEY=

4. Start the Development Server

运行以下命令以启动开发服务器：

npm run dev

5. Build the Web App

一切准备好后，我们就可以开始使用了。只需运行 npm run 命令，它就会启动，转到它显示的本地端口。

npm run build

E2B的简介&特色

E2B可以给你的ai应用程序集成代码解释器

还有许多其他功能

总的来说，代码生成这一块我更喜欢Claude3.5，o1与它的表现相近，但是要付出更多的时间和成本。我本来期望o1-preview能在复杂的app生成上做得比Claude3.5好，可惜实际并不是这样，也许o1在其他复杂任务上会更好，如数学、逻辑推理思考等。Claude3.5确实比较适合写代码。

对于其他的模型，Gemini Pro、405B、70B、Mistral等等，我觉得他们并不能写出很棒的效果，稍微复杂一点就挂了。当然，基本上我也没有测试比较简单的东西，其他模型，比如Mistral因为都失败了所以没有放出来了。

如何学习大模型 AI ？

由于新岗位的生产效率，要优于被取代岗位的生产效率，所以实际上整个社会的生产效率是提升的。

但是具体到个人，只能说是：

“最先掌握AI的人，将会比较晚掌握AI的人有竞争优势”。

这句话，放在计算机、互联网、移动互联网的开局时期，都是一样的道理。

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

在这里插入图片描述