中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

Anthropic 的 Claude Artifacts 隨 Claude 3.5 Sonnet 推出，用戶能用提示詞創(chuàng)作內(nèi)容。它從簡(jiǎn)陋原型發(fā)展而來，多團(tuán)隊(duì)協(xié)作 3 個(gè)月完成。技術(shù)棧涵蓋 Streamlit、Node.js 等，前端有 React 等，后端因強(qiáng)大模型有調(diào)整。團(tuán)隊(duì)借 Claude 加速構(gòu)建進(jìn)程。

熟悉大模型行業(yè)的朋友應(yīng)該對(duì)Anthropic的Claude Artifacts不陌生，這個(gè)功能是隨 Claude 3.5 Sonnet 一同發(fā)布的，它允許用戶通過提示詞創(chuàng)建各種內(nèi)容，如網(wǎng)站（單頁(yè) React 或 HTML）、代碼片段、文檔、圖表等。不僅在多種任務(wù)中非常實(shí)用，還充滿了樂趣，一經(jīng)上市，廣受用戶好評(píng)。

雖然這個(gè)功能很小，但它在使用大語(yǔ)言模型進(jìn)行協(xié)作工作方面邁出了重要的一步——每個(gè)作品都可以被分享、被他人使用并且“重新混合”。出于對(duì)這個(gè)產(chǎn)品構(gòu)建方式的好奇，我聯(lián)系了 Anthropic 團(tuán)隊(duì)。今天，我們來探討一下構(gòu)建這個(gè)功能的實(shí)際情況，同時(shí)了解一下 Anthropic 工程團(tuán)隊(duì)的工作方式。

文章將涵蓋以下內(nèi)容：從構(gòu)思到發(fā)布 Artifacts：一個(gè)在“WIP Wednesday”上展示的簡(jiǎn)陋原型啟動(dòng)了 Artifacts 的開發(fā)歷程。

技術(shù)棧：使用了 Streamlit、Node.js、React、Next、Tailwind 和 Claude。利用 Claude 更快地構(gòu)建 Artifacts：團(tuán)隊(duì)不僅在內(nèi)部測(cè)試了 Claude，還利用他們的大語(yǔ)言模型加快了軟件的構(gòu)建速度，包括 Artifacts 的開發(fā)。

時(shí)間線和團(tuán)隊(duì)：一個(gè)小團(tuán)隊(duì)在短短 3 個(gè)月內(nèi)就完成并發(fā)布了這個(gè)功能。

一、從策劃階段到發(fā)布 Artifacts

讓我們深入了解 Artifacts 是如何構(gòu)建的。為此，我采訪了五位參與其創(chuàng)建的現(xiàn)任 Anthropic 員工：

1. 研究科學(xué)家 Alex Tamkin，他構(gòu)建并展示了第一個(gè)原型
2. 產(chǎn)品設(shè)計(jì)師 Michael Wang，他早期參與了迭代工作
3. 產(chǎn)品工程師 Florian Scholz，他幫助 Artifacts 走向生產(chǎn)階段
4. 安全工程師 Ziyad Edher，他幫助評(píng)估了 Artifacts 的安全性
5. 品牌經(jīng)理 Sam McAllister，他為 Artifacts 創(chuàng)建了多個(gè)發(fā)布材料

1. 加快速度的渴望

2024 年 3 月，研究科學(xué)家 Alex Tamkin 在測(cè)試 Anthropic 最新模型的網(wǎng)站生成能力時(shí)，采用了以下步驟：

1. 通過提示詞讓模型生成網(wǎng)站的 HTML 代碼將生成的代碼復(fù)制到編輯器中
2. 將文件保存為 HTML 格式
3. 打開網(wǎng)頁(yè)瀏覽器
4. 查看 HTML 文件

做一兩次這種操作還不算麻煩，但 Alex 回憶道，當(dāng)他這樣重復(fù)幾十次時(shí)：

“整個(gè)過程花費(fèi)了很多時(shí)間。我一直在想：要是我能馬上看到效果就好了。你知道那種感覺嗎？就像做飯時(shí)，你想立刻嘗嘗醬汁的味道，而不是等它慢慢煨煮？這就是我追求的效果。我只想讓它立刻在屏幕上顯示出來?！?/p>

于是，Alex 搭建了一個(gè)粗糙的并排界面，右邊是 Claude，左邊是實(shí)時(shí)輸出。然后，他在一個(gè)叫“WIP Wednesday”的常規(guī)會(huì)議上向團(tuán)隊(duì)展示了這個(gè)粗糙的演示：

他說，這次演示是一個(gè)轉(zhuǎn)折點(diǎn)：

我覺得這次演示讓我們很多人意識(shí)到：‘哇，這里確實(shí)有些東西?！?/p>

看到它立即在屏幕上顯示出來時(shí)，有一種頓悟的感覺。你知道有時(shí)候在看到某樣?xùn)|西之前，你根本不知道自己需要它嗎？這就是當(dāng)時(shí)的感覺。

這不僅僅是讓流程更快，而是改變我們與 Claude 的互動(dòng)方式，讓它變得更具體、更直接、更具協(xié)作性?！?/p>

2. 第一個(gè)原型

產(chǎn)品設(shè)計(jì)師 Michael Wang 是參與演示的一位成員，他隨后幫助將這個(gè)粗糙的演示變成了一個(gè)更接近生產(chǎn)狀態(tài)的體驗(yàn)。他回憶道：

“我一直在腦海中反復(fù)播放 Alex 的這個(gè)演示。所以我開始構(gòu)建一個(gè)原型，主要是想看看通過一些基礎(chǔ)的提示詞工程和 Claude 的指令，我們究竟能實(shí)現(xiàn)多少。結(jié)果發(fā)現(xiàn)，我們能做到的比預(yù)期還要多。我比預(yù)想得更快地做出了一個(gè)概念驗(yàn)證。這讓我思維急速運(yùn)轉(zhuǎn)。最后，我覺得我有了一個(gè)很好的想法，并把它發(fā)布到了 Slack 上。”

在 Slack 內(nèi)部發(fā)布這個(gè)想法是個(gè)好主意，因?yàn)樗鹆嗽S多同事的關(guān)注，包括 Anthropic 的 CEO Dario Amodei，他也給予了鼓勵(lì)。之后，事情進(jìn)展得非?？?，Michael 說：

“**大約一個(gè)半星期后，我們就準(zhǔn)備好了內(nèi)部測(cè)試。**整個(gè)公司都可以開始使用它了?？吹揭粋€(gè)想法在這么短的時(shí)間內(nèi)變成一個(gè)大家都在試用的工具，這種感覺有點(diǎn)不真實(shí)。但在和 Claude 一起工作時(shí)，這種情況時(shí)有發(fā)生——有時(shí)事情就是這么順利，你會(huì)發(fā)現(xiàn)自己在一周前根本無(wú)法想象的東西如今已成現(xiàn)實(shí)?！?/p>

隨著一個(gè)更加完善的版本逐漸成型，Michael 在公司內(nèi)部分享了演示，并收集了更多同事的反饋和鼓勵(lì)：

Michael 在 Anthropic 的 Slack 內(nèi)部分享 Artifacts/迭代模式的最新進(jìn)展

3. 新工程師助力發(fā)布 Artifacts

Anthropic 的工程師有很大的自主權(quán)，且公司也期望他們能充分發(fā)揮這種自主性。產(chǎn)品工程師 Florian Scholz 剛加入公司時(shí)，看到演示后決定幫助推動(dòng)這個(gè)新功能的發(fā)布。他回憶道：

“Alex 第一次展示 Artifacts 是在我加入 Anthropic 的第二周。當(dāng)時(shí)我還在舊金山辦公室適應(yīng)新的工作環(huán)境和入職流程，所以暫時(shí)擱置了這個(gè)項(xiàng)目。后來，當(dāng) Michael 展示了一個(gè)可運(yùn)行的原型時(shí)，我立刻加入了進(jìn)來。

我們都意識(shí)到這個(gè)功能將帶來顯著的進(jìn)步。 我的首要任務(wù)是確保我們的基礎(chǔ)設(shè)施足夠安全。我們很擔(dān)心 Claude 生成的不可信代碼可能引發(fā)的問題。這次經(jīng)歷讓我很快接觸到了 Anthropic 產(chǎn)品工程中的有趣挑戰(zhàn)?！?/p>

4. 用 8-bit 游戲演示 Artifacts

在產(chǎn)品即將發(fā)布 beta 版時(shí)，還有最后一件事要做：創(chuàng)建展示 Artifacts 及其使用方式的發(fā)布素材。此時(shí)，Claude 的品牌傳播負(fù)責(zé)人 Sam McAllister 出場(chǎng)了。在看到 Artifacts 的第一個(gè)原型后，他意識(shí)到這個(gè)功能是一個(gè)真正獨(dú)特的 UI 層。他在構(gòu)建 Artifacts 的過程中一直使用它，并制作了一個(gè)演示來展示該功能：生成了一款名為 “Claw’d” 的 8-bit 游戲，主角是一只螃蟹。

“Claw’d”是一款由 Artifacts 生成的 2D 8-bit 風(fēng)格的街機(jī)游戲截圖。

二、技術(shù)棧

1. 原型階段

第一個(gè)版本： 當(dāng) Alex 構(gòu)建 Artifacts 的早期版本時(shí)，他向內(nèi)部的幾位同事展示了這個(gè)版本，他使用了 Streamlit。這是一種能夠快速將 Python 數(shù)據(jù)腳本轉(zhuǎn)換為可共享 Web 應(yīng)用的工具，用于為團(tuán)隊(duì)創(chuàng)建原型。

使用專門的原型框架構(gòu)建“視覺概念驗(yàn)證”被證明是一個(gè)有效的方法。它不僅能快速獲得反饋，還時(shí)刻提醒大家這個(gè)原型尚未準(zhǔn)備好投入生產(chǎn)。當(dāng)然，并非所有原型都會(huì)成為最終的生產(chǎn)功能，但這個(gè)案例表明，允許研究人員展示自己想法的框架是非常有用的。

第二個(gè)版本：Node.js. 在收到良好的反饋后，Alex 準(zhǔn)備將這個(gè)功能分享給整個(gè)公司進(jìn)行嘗試。在這個(gè)階段，他決定將后端從 Streamlit 遷移出來。他希望使用一種更適合廣泛應(yīng)用的技術(shù)。Alex 解釋了他的決定：

“我將應(yīng)用程序遷移到了 Node.js 環(huán)境，并實(shí)現(xiàn)了并排布局進(jìn)行渲染，我覺得這提升了用戶體驗(yàn)。

我們?cè)?Anthropic 舉辦‘WIP Wednesday’會(huì)議，會(huì)上我們會(huì)與更廣泛的團(tuán)隊(duì)分享我們的正在進(jìn)行的工作。像這樣在 WIP Wednesday 分享工作是一個(gè)很好的推動(dòng)力。前一晚我在辦公室工作到很晚，專注于完善提示詞和整體交互模式。我還與 Michael 配對(duì)調(diào)試，他幫我解決了一個(gè)困擾我的簡(jiǎn)單 CORS 問題。此時(shí)，Claude 3 Opus 還無(wú)法自行解決這個(gè)問題?！?/p>

2. 前端

Artifact 使用的技術(shù)棧是許多網(wǎng)頁(yè)團(tuán)隊(duì)常用的前端堆棧：

• React：用于構(gòu)建界面的前端框架
• Next.js：一個(gè) React 框架，提供性能提升和開發(fā)效率，廣受 React 團(tuán)隊(duì)歡迎
• Tailwind CSS：一個(gè)實(shí)用性優(yōu)先的 CSS 框架，用于設(shè)計(jì)美觀的用戶界面

使用沙盒技術(shù)是與大多數(shù)網(wǎng)頁(yè)應(yīng)用構(gòu)建方式不同的一個(gè)顯著特點(diǎn)。Artifact 需要在沙盒中隔離不受信任的代碼；團(tuán)隊(duì)將這種方法稱為“安全游樂場(chǎng)”。正如產(chǎn)品工程師 Florian Scholz 所說：

“這種沙盒方法為我們提供了一個(gè)明確的環(huán)境，使我們能夠放心地進(jìn)行部署。這不是一個(gè)靜態(tài)的沙盒，我們不斷擴(kuò)展和增強(qiáng)它的功能。這個(gè)安全游樂場(chǎng)對(duì)我們能夠快速發(fā)布起到了關(guān)鍵作用?！?/p>

那么，Anthropic 是如何構(gòu)建其沙盒的？它是否使用了瀏覽器的沙盒技術(shù)，如Chrome V8 沙盒？安全工程師 Ziyad Edher 透露了相關(guān)細(xì)節(jié)：

“我們并沒有使用任何特定的‘沙盒’技術(shù)。

我們使用了帶有全站點(diǎn)進(jìn)程隔離的 iFrame 沙盒。這種方法經(jīng)過多年的發(fā)展已經(jīng)非常穩(wěn)健。這可以保護(hù)用戶在 Claude.ai 瀏覽會(huì)話中的主要會(huì)話免受惡意代碼的影響。我們還使用了嚴(yán)格的內(nèi)容安全策略（CSPs）來強(qiáng)制執(zhí)行有限且受控的網(wǎng)絡(luò)訪問。

這些措施可以保護(hù)用戶數(shù)據(jù)不被惡意代碼竊取。隨著瀏覽器生態(tài)系統(tǒng)的變化，我們也在不斷加固這些安全環(huán)境。”

3. 后端

技術(shù)進(jìn)步減少了對(duì)傳統(tǒng)后端的需求，至少對(duì)于像 Artifacts 這樣的應(yīng)用來說。Michael 說道：

“我們的模型已經(jīng)變得如此強(qiáng)大，很多你通常需要通過后端邏輯來實(shí)現(xiàn)的功能，現(xiàn)在只需直接請(qǐng)求即可！你只需給 Claude 模型下達(dá)指令，設(shè)定參數(shù)，它就能返回符合你需求的結(jié)構(gòu)化數(shù)據(jù)，并且格式也完全按照你的要求。

許多人在看 Artifacts 時(shí)可能會(huì)以為背后有一個(gè)非常復(fù)雜的后端系統(tǒng)在運(yùn)作。

但事實(shí)上，Artifacts 的很大一部分‘只是’展示性 UI。真正的重任其實(shí)是在模型本身完成的。傳統(tǒng)的后端工作并沒有完全消失，但重心發(fā)生了轉(zhuǎn)移。我認(rèn)為我們才剛剛觸及了這種方法潛力的冰山一角。隨著這些模型的不斷進(jìn)化，未來的發(fā)展?jié)摿Σ豢上蘖??！?/p>

三、使用 AI 更快地構(gòu)建 ArtifactsArtifacts

團(tuán)隊(duì)在構(gòu)建過程中大量依賴 Claude。研究科學(xué)家 Alex Tamkin 如下使用 Claude 3 Opus：

“當(dāng)時(shí)，Claude 3 Opus 是我們最智能的模型。整個(gè)過程非常簡(jiǎn)單：我會(huì)告訴 Claude 我想要的用戶界面，然后它就會(huì)生成代碼。我再把代碼復(fù)制過來，進(jìn)行渲染。接著，我會(huì)檢查哪些地方滿意，哪些地方需要改進(jìn)，或者發(fā)現(xiàn)任何錯(cuò)誤，然后反復(fù)進(jìn)行這個(gè)過程。

這是一種非常高效的想法迭代方式！

當(dāng)你能立刻在屏幕上看到效果時(shí)，會(huì)有一種瞬間‘頓悟’的感覺。這就是我想通過這種方法實(shí)現(xiàn)的目標(biāo)——盡快達(dá)到那些‘靈光一現(xiàn)’的時(shí)刻?！?/p>

在 Artifacts 完成前，使用 Claude 3 Opus 創(chuàng)建一個(gè)簡(jiǎn)單 HTML5 網(wǎng)頁(yè)應(yīng)用的多窗口迭代過程截圖

Artifacts 團(tuán)隊(duì)的產(chǎn)品工程師 Florian Scholz 也大量使用了 Claude。他說：

“當(dāng)我深入研究一些較為晦澀的瀏覽器 API 和功能時(shí)，Claude 幫了大忙。我用它來搞清楚如何實(shí)現(xiàn)一些特定的交互模式，比如配置內(nèi)容安全策略選項(xiàng)、iFrame 交互和 DOM 選擇 API。我在很多文檔匱乏或內(nèi)容復(fù)雜的領(lǐng)域都用到了它。

自從 Sonnet 和 Artifacts 推出后，我一直在利用它們來開發(fā)新功能的實(shí)驗(yàn)版本，并使其運(yùn)行。Claude 通常給我一個(gè)很好的起點(diǎn)，然后我會(huì)與 Claude 一起迭代。我發(fā)現(xiàn)這些工具特別有助于避免那種‘無(wú)從下手’的困境?！?/p>

在 Anthropic 內(nèi)部，Sonnet 3.5 被認(rèn)為是一個(gè)“變革者”，并激勵(lì)了 Artifacts 團(tuán)隊(duì)的雄心。產(chǎn)品設(shè)計(jì)師 Michael Wang 分享道：

“在我的開發(fā)過程中，我?guī)缀跻恢痹谑褂?Claude。Claude 已經(jīng)成為我工作流程中不可或缺的一部分，老實(shí)說，如果不能再用它，我真的不知道該怎么辦。我用它來構(gòu)建代碼結(jié)構(gòu)，持續(xù)探討實(shí)現(xiàn)細(xì)節(jié)，并按需修改代碼。

在 Artifacts 的初步原型開發(fā)階段，Claude 3.5 Sonnet 還沒有準(zhǔn)備好進(jìn)行測(cè)試。因此，當(dāng)時(shí)我主要使用的是 Claude 3 Opus。

當(dāng)我們提前體驗(yàn)到 3.5 Sonnet 時(shí)，它帶來了顛覆性的改變。 內(nèi)部的同事們展示了由 Sonnet 一口氣創(chuàng)建的完整 Three.js 或 WebGL 應(yīng)用程序。那時(shí)我意識(shí)到，我們的構(gòu)建目標(biāo)可以更具野心。Sonnet 在發(fā)布前的一個(gè)月里對(duì)我們的功能集產(chǎn)生了巨大的影響，它真正促使我們拓展了對(duì) Artifacts 可能性的想象。”

四、時(shí)間線與團(tuán)隊(duì)

Artifacts 是 Anthropic 今年在軟件工程圈子里討論度最高的發(fā)布之一！我向產(chǎn)品設(shè)計(jì)工程師 Michael Wang 了解了從想法到產(chǎn)品發(fā)布的團(tuán)隊(duì)規(guī)模和時(shí)間線。以下是項(xiàng)目的進(jìn)展情況：

“在 Alex 的演示之后，我于 2024 年 3 月 21 日開始在 claude.ai 的主庫(kù)中開發(fā)原型。

**我們有一位全職人員負(fù)責(zé)此項(xiàng)目，另一位兼職人員定期參與貢獻(xiàn)。**此外，在關(guān)鍵時(shí)刻還有幾位同事提供了幫助，期間很多 Anthropic 員工也參與了內(nèi)部測(cè)試。

項(xiàng)目在首次演示后的 3 個(gè)月內(nèi)，于 6 月 20 日發(fā)布。我們與目前最強(qiáng)大的模型 Claude 3.5 Sonnet 一同推出了 Artifacts。

整個(gè)項(xiàng)目感覺像是草草拼湊的操作，但有時(shí)候最好的東西就是這樣誕生的，不是嗎？”在之前的《The Pragmatic Engineer》文章中，我們報(bào)道過小團(tuán)隊(duì)發(fā)布有影響力產(chǎn)品的例子——例如?Meta 的 Threads 應(yīng)用程序由 12 位工程師在 6 個(gè)月內(nèi)完成。然而，Artifacts 可能是我遇到的最具草根性質(zhì)的高影響力產(chǎn)品之一！向所有參與構(gòu)建的 Anthropic 成員致以祝賀。