A little coding challenge that it was able to accomplish in almost no time.

一個小小的編碼挑戰，它幾乎能在瞬間完成。

I mean, I'm really impressed, and it only took two prompts.

我的意思是，我真的很感動，而且只用了兩個提示。

I had to correct it, you know, that first one.

我不得不糾正它，你知道，第一個。

Apparently, Claude is the game to beat in town.

顯然，克勞德是城裡的遊戲高手。

As of yesterday, June 20th, 2024, Claude's models, their new model Sonnet, is outperforming in most instances all the other big players in the AI LLM game.

截至昨天（2024 年 6 月 20 日），克勞德的模型，也就是他們的新模型 Sonnet，在大多數情況下都超過了人工智能 LLM 遊戲中的所有其他大玩家。

Now, if you're an ordinary person like me, a lot of that is just jargon that I don't know what it means.

現在，如果你是像我一樣的普通人，很多東西都是行話，我不知道是什麼意思。

Let's get digging a little bit, though, and do something kind of basic, kind of not.

不過，讓我們再挖掘一下，做一些基本的、不基本的事情。

We're going to build a one-page website.

我們將建立一個單頁網站。

Now, let me highlight a few things from Claude, first and foremost.

現在，請允許我首先強調一下克勞德的幾件事。

A, I like the interface here.

A，我喜歡這裡的界面。

This is basic stuff if you're using the and it gives you a response up here, just like ChatGPT, Copilot, MetaAI, anything that you've been using or have seen used or even heard talked about.

如果你正在使用 ChatGPT、Copilot、MetaAI 等任何你一直在使用或見過或聽說過的軟件，這都是最基本的東西。

This is what we're talking about when we say LLMs.

這就是我們所說的法學碩士。

It's large language models that we can talk to like a little chat, and it responds to us mostly intelligently.

它是一個大型語言模型，我們可以像哈拉一樣與它對話，它也會對我們做出大部分智能迴應。

Now, what I want to do today is look at a few of the nitty-gritties.

現在，我今天要做的是研究一些細枝末節。

We could just stay right here and prompt Claude 3.5, and I am on the free version.

我們可以就在這裡使用 Claude 3.5，我使用的是免費版本。

I might point that out.

我想指出這一點。

But I want to go a few steps deeper.

但我想再深入幾步。

So on Anthropic's page, you can find out more information on their model, what it does, how it does it, all that stuff.

是以，在 Anthropic 的網頁上，你可以找到更多關於他們模型的資訊，包括它的功能、原理等等。

It's got links to papers and research and pricing and API access.

它有論文、研究、定價和 API 訪問的鏈接。

And what's this?

這是什麼？

Speaking of API access, let's dig into the documentation a little bit.

說到 API 訪問，讓我們來深入瞭解一下文檔。

So if you go a little deeper and you look into the documentation here, there's all sorts of stuff that you can get into.

所以，如果你再深入一點，看看這裡的文檔，你就會發現有各種各樣的東西。

What we're going to do is check out this right here.

我們要做的就是看看這裡。

This is a prompt library, which is fantastic to do exactly what it says.

這是一個提示庫，其功能非常強大。

Explore example prompts for inspiration.

探索提示範例，尋找靈感。

If you've ever been using AI and just kind of curious about what you can actually do, other than have it reply to you in the form of a poem or other such pretty useless things, this is a good starting point.

如果你曾經使用過人工智能，只是有點好奇除了讓它以詩歌或其他無用的形式回覆你之外，你還能做些什麼，那麼這是一個很好的起點。

We're going to go there in just a second to get our website prompt, in fact.

事實上，我們馬上就要去那裡獲取網站提示。

Two other things to point out, though, there's an intro section here that you can explore the capabilities and development flow if you are on the technical side of things and interested in using this for development.

不過還有兩點需要指出的是，這裡有一個介紹部分，如果你是技術人員，對使用它進行開發感興趣的話，你可以探索一下它的功能和開發流程。

And in a future video, I plan on going through this quick start.

在今後的視頻中，我將介紹這種快速啟動方法。

And this is actually getting what's called an API key and doing this from your computer, from the terminal, from the command line, and actually prompting instead of typing on their website, prompting the AI model.

實際上，這就是獲取所謂的 API 密鑰，然後從電腦、終端、命令行進行操作，實際上是提示人工智能模型，而不是在網站上輸入。

Now, that's way ahead of where we are today, but just a tease of what's to come and what you can do with this LLM.

現在，這已經遠遠超過了我們今天的水準，但這只是對未來發展的一個預告，以及您可以利用這個法學碩士學位做些什麼。

Let's go back over here to our prompt library, though.

讓我們回到我們的提示庫。

So they have all kinds of prompts, some of them witty and clever.

是以，他們有各種各樣的提示，其中一些詼諧而巧妙。

Spreadsheet Sourcer is a good example of that.

Spreadsheet Sourcer 就是一個很好的例子。

All of them witty and clever, actually.

事實上，他們都很機智、聰明。

They've got categories here for us.

他們在這裡為我們提供了類別。

But I want to go to this website wizard, OK?

但我想去這個網站嚮導，好嗎？

And we've got here system prompts and user prompts.

這裡有系統提示和用戶提示。

So what's the difference?

有什麼區別？

Well, a system prompt is something that you're instructing the model, the AI model, to be.

那麼，系統提示就是你對模型（人工智能模型）發出的指令。

So in this case, your task is to create a one-page website with these specifications and some general guidelines for what the system should be doing.

是以，在這種情況下，你的任務是創建一個單頁網站，其中包含這些規格和系統應該做什麼的一些一般指導原則。

This is very useful when you're using the API requests and not just the chat window.

當您使用 API 請求而不僅僅是哈拉窗口時，這一點非常有用。

You can type this in the chat window also.

您也可以在哈拉窗口中輸入。

And in fact, let's do it both ways.

事實上，我們可以雙管齊下。

So let's get started.

那麼，讓我們開始吧。

Let's take this system prompt.

我們來看看這個系統提示。

Let's go over here and say that and then shift return for a new line.

讓我們到這裡說，然後換行。

Please respond only with yes if you understand your role, OK?

如果您瞭解自己的職責，請只回答 "是"，好嗎？

And so it's going to take that The alternative to this is over here on the console.

是以，它將使用控制檯的替代方案。

So this is kind of the developer version of all that.

所以，這就是所有這些的開發者版本。

We can enter a system prompt up here.

我們可以在這裡輸入系統提示。

And don't worry, there's links for all of this stuff in the description.

別擔心，這些內容的鏈接都在說明中。

It's all found in different places on Anthropic's website.

這一切都可以在 Anthropic 網站的不同地方找到。

Don't be intimidated.

不要被嚇倒。

Just start trying this stuff out.

開始嘗試吧

I'm going to paste that system prompt in here.

我要把系統提示粘貼到這裡。

When you first use the console, you can see that you actually have to have credits to do this.

第一次使用控制檯時，您會發現實際上必須有信用點數才能完成此操作。

Then they've got this one-page website for this learning platform called EduQuest.

然後，他們就有了這個名為 EduQuest 的學習平臺的單頁網站。

So this is the prompt that they're using.

這就是他們使用的提示。

And I've actually modified it over here in another window to fit our purposes.

實際上，我已經在另一個窗口對其進行了修改，以適應我們的目的。

And I'm going to take that.

我會接受的。

I'm going to come back in here and I'm going to basically what we're saying is, hey, create this one-page website.

我要回到這裡，基本上我們要說的是，嘿，創建這個單頁網站。

Change the title there.

更改標題。

Create a one-page website for an online learning platform.

為在線學習平臺創建一個單頁網站。

Got sheet.

有床單。

A fixed navigation bar with links to two categories.

一個固定的導航欄，有兩個類別的鏈接。

Actually, we're going to put my name in here because that's kind of the brand right now.

事實上，我們要把我的名字寫在這裡，因為這就是我現在的品牌。

So we've got a navigation bar with these two categories.

是以，我們已經有了一個包含這兩個類別的導航欄。

A hero section with a video background.

帶有視頻背景的英雄部分。

We may have to add that ourselves.

我們可能需要自己添加。

A dynamic tagline that changes between these statements.

動態標語可在這些陳述之間變換。

A feature course section.

特色課程部分。

A success story is basically a testimonial section.

成功故事基本上就是推薦部分。

A footer with links to the newsletter.

帶有通訊鏈接的頁腳。

FAQ, privacy policy, and contact us.

常見問題、隱私政策和聯繫我們。

And include filler placeholder content for the video background.

併為視頻背景添加填充佔位符內容。

For the course cards, because I've got that video, we'll see what it does with the video.

至於課程卡，因為我已經拿到了視頻，我們將看看它在視頻中的表現。

And let's just try this out.

讓我們試試這個。

And right out of the gate, you can see the speed that it's going here.

從一開始，你就能看到它的速度。

This is pretty fast compared to some stuff I've seen.

與我見過的一些東西相比，這個速度相當快。

Okay, so we got some problems in commenting there.

好吧，我們在評論方面遇到了一些問題。

It looks like this whole thing is commented out, but we can change that ourselves.

看起來整件事都是註釋出來的，但我們可以自己改變。

No, it's not.

不，不是這樣的。

It's just not.

就是不行。

The format is just showing it grayed out.

格式顯示為灰色。

It's not commented out.

沒有註釋。

This first line is.

這第一行是

All right, so it's putting all the style in there.

好的，所以它把所有的樣式都放進去了。

And yeah, this should be in a CSS file probably, but we're going to keep it in here.

是的，這應該放在 CSS 文件中，但我們要把它放在這裡。

You know, I didn't specify any colors, so we'll see what it comes up with in terms of colors.

你知道，我沒有指定任何顏色，所以我們將看看它能想出什麼顏色。

It looks like background being dark and color of font being white is what it's going for.

看起來背景是深色的，字體顏色是白色的。

We got this stuff.

我們得到了這個東西。

Look, we've got that video.

你看，我們已經得到了視頻。

This is probably not going to work.

這可能行不通。

We need to down.

我們需要下來。

Now it's putting in the JavaScript for the taglines, setting the interval, rotate.

現在要為標語輸入 JavaScript、設置間隔和旋轉。

I mean, this is doing a lot.

我的意思是，這已經做了很多了。

Okay, now copy this.

好了，現在複製這個。

And then what we're going to do is go over here to we're going to load up an HTML file.

然後，我們要做的就是在這裡加載一個 HTML 文件。

I'm going to paste all of that in right here.

我要把這些都貼在這裡。

And then I've got a live server.

然後我就有了一個實時服務器。

And there it is.

就是這樣。

So this is rotating between the things.

是以，這是在事物之間的旋轉。

It does have a get started button.

它確實有一個啟動按鈕。

It does have featured course cards and it has success stories.

它確實有特色課程卡和成功案例。

And is it responsive?

它的反應靈敏嗎？

It is responsive.

它反應靈敏。

So it's got breakpoints in there.

所以裡面有斷點。

It's got the bottom stuff going on there.

這裡有最底層的東西。

Wow.

哇

So that's super impressive.

這真是令人印象深刻。

You know, some things I'll get rid of.

你知道，有些東西我會扔掉的。

I don't need a search bar up here.

我這裡不需要搜索欄。

That's not going to do anything for me.

這對我毫無用處。

Need links to YouTube and to the course page right there.

需要鏈接到 YouTube 和課程頁面。

And this needs to be a sign up link as well.

這也需要一個註冊鏈接。

But on the whole, pretty cool.

但總的來說，還是很不錯的。

That spat out a decent starting point for a website in a matter of a couple minutes.

幾分鐘內就能吐出一個不錯的網站起點。

So I'm impressed with that.

我對此印象深刻。

The other thing that I thought was incredibly cool.

還有一件事我覺得非常酷。

Look at this right here.

看這裡

Cosmic Street keystrokes.

宇宙街按鍵

Write me a complete web app as a single HTML file using WASD to move around, blah, blah, blah, you should make the website very aesthetic and use Tailwind.

給我寫一個完整的網絡應用程序，只需一個 HTML 文件，使用 WASD 左右移動，等等等等，你應該讓網站非常美觀，並使用 Tailwind。

Now it's got example output that works.

現在它的示例輸出可以正常工作了。

But I want to see what happens when I throw this in myself.

但我想看看我自己把這個扔進去會發生什麼。

To Claude.

敬克勞德

It's still right in the JavaScript.

它仍然在 JavaScript 中。

Okay, there you go.

好了，給你。

Copy this.

收到。

Let's bring this over into our page here.

讓我們把它帶入我們的頁面。

And this is just auto refreshing.

這只是自動刷新。

Look at this.

看看這個。

Wow.

哇

Now, I don't see the JavaScript working.

現在，我看不到 JavaScript 工作了。

So it doesn't look like this one is actually working.

是以，看起來這一次並沒有真正奏效。

Like current word is this const words.

比如現在的詞就是這個const words。

So we've got a word list in there.

是以，我們在這裡有一個單詞表。

This is completely different from the anthropic example.

這與人類學的例子完全不同。

Where is it cosmic keystrokes.

宇宙按鍵在哪裡？

So here's the example output that they gave.

下面是他們給出的輸出示例。

Let me just paste that back in here.

讓我把它粘貼回去。

And then go back here and look, this is actually working.

然後再回到這裡，看看，這實際上是有效的。

So let's try ours again.

所以，讓我們再試一次。

So you enter the word and you get a high score up here.

輸入單詞後，你就能在這裡獲得高分。

And WASD does this up and down.

WASD 可以上下移動。

What word was that boy?

那個男孩說的是什麼詞？

Boy, and there you go.

孩子，這就對了。

I'm going to get 10,000 points.

我將獲得 10,000 積分。

Watch, watch and learn against.

觀看，觀看，學習對抗。

Oh, oh, no.

哦，哦，不

I clicked the wrong word.

我點錯了詞。

Go back to a new word.

回到一個新詞。

I don't know what I just clicked.

我不知道我剛才點了什麼。

Right, agent, agent.

好的 探員 探員

There.

在那兒

So 11,000 points.

所以是 11000 點。

So pretty cool.

太酷了

I mean, come on.

我的意思是，來吧。

Let's go back here, though, and see what's going on in our actual prompt window.

不過，讓我們回到這裡，看看實際提示窗口中發生了什麼。

Works to move around, but there are no words scrolling.

可以移動，但沒有文字滾動。

You're right.

你說得對。

The words aren't scrolling as intended.

文字沒有按預期滾動。

Let's modify the game.

讓我們來修改遊戲。

I'll update the code.

我會更新代碼。

Here's a revised version.

以下是修訂版。

Seems like it took a shorter amount of time.

似乎用時更短。

Let's see if we can get this working.

讓我們看看能否讓它正常工作。

Hey.

嘿。

Oh, and this is even resilience quest.

哦，這甚至還是復原任務。

All right.

好的

So I did get some points that time.

所以，那次我確實得到了一些分數。

Ambition.

雄心勃勃。

Only problem with this.

唯一的問題是

Persevere.

堅持不懈。

Wow, that's cool.

哇，太酷了

So this is actually even better courage in terms of the interface than the one that they gave the example for.

是以，就界面而言，這實際上比他們舉例說明的那個更有勇氣。

However, there's too many words.

不過，字數太多了。

So we could we could prompt this some more and get it to do us a little bit different.

是以，我們可以再提示一下，讓它為我們做一些不同的事情。

And we could also have the arrow keys instead of the WASD keys, because this just almost this just makes it so I can't move out of way of other words.

我們還可以用方向鍵代替 WASD 鍵，因為這幾乎讓我無法避開其他文字。

And of course, we're typing some discover while all this is going on.

當然，在這一切發生的同時，我們也在輸入一些發現。

But I mean, this is sweet.

但我的意思是，這是甜蜜的。

Little coding challenge that it was able to accomplish in almost no time.

它幾乎能在短時間內完成小小的編碼挑戰。

I mean, I'm really impressed.

我的意思是，我真的很感動。

And it only took two prompts.

而且只用了兩個提示。

I had to correct it.

我必須糾正它。

You know, that first one didn't work right out of the gate, but good enough.

要知道，第一部並不是一開始就成功的，但已經足夠好了。

And look, I can talk and obtain victory here.

聽著，我可以在這裡說話並取得勝利。

Speaking of victory, all at the same time, 125.

說到勝利，同時 125.

Now I like the scoring in the other game because we got up to 10,000 pretty quick.

現在我喜歡另一場比賽的得分，因為我們很快就達到了 10000 分。

This one is a little bit lower score, a little bit lower stakes, but hey, that's OK.

這個分數低一點，賭注小一點，但沒關係。

Hope that was helpful for you.

希望對你有所幫助。

Subscribe to my channel where I teach coding and spreadsheets to business professionals and hope you have a fantastic day.

訂閱我的頻道，我將在這裡向商業專業人士傳授編碼和電子表格知識，希望您度過愉快的一天。