在人工智慧(AI)的迅速發展中,Anthropic AI推出的Claude 3.5 Sonnet模型引起了廣泛關注。這款模型以其強大的性能和靈活性,今天要跟大家介紹Claude 3.5 Sonnet的特點、費用、操作說明及實作範例,讓你輕鬆掌握這款強大的AI工具。
claude
https://claude.ai/
Claude 3.5 Sonnet是Anthropic AI推出的一款先進的自然語言處理(NLP)模型,“Sonnet”象徵著該模型在語言處理上的優雅和精準,就如同一首完美的十四行詩。
該模型基於深度學習技術,主要處理和生成高質量的文本,無論是文章撰寫、語義分析還是對話系統開發,Claude 3.5 Sonnet都能提供卓越的性能。
與前一代模型相比,Claude 3.5 Sonnet在理解和生成程式碼方面有了顯著的進步,無論是生成小遊戲、切出網頁畫面,都能大幅提高開發效率。
Claude 3.5 Sonnet在各項測試中表現非常出色,尤其在知識理解、寫程式和小學數學方面優於其他模型,在解決數學問題方面,表現稍弱,但整體仍然領先。
Claude 3.5 Sonnet 免費提供,每日訊息有次數限制。
訂閱Claude Pro/Team方案的用戶可以更快地使用模型,可以透過Anthropic API、Amazon Bedrock和Google Cloud的Vertex AI存取。
Claude 3.5 Sonnet支持200K的上下文長度,輸入token的價格為每百萬token 3美元,輸出token的價格為每百萬token 15美元,與Claude 3 Opus相比,Claude 3.5 Sonnet的費用更加實惠。
操作Claude 3.5 Sonnet非常簡單,只需幾個步驟即可開始使用:
進入Claude首頁後,你可以使用google帳號或信箱登入
登入後,就可以開始使用Claude 3.5 Sonnet,在下方輸入框輸入你的描述
超過使用限制後,會出現你無法再使用免費的訊息,直到幾點「You are out of free messages until 5 PM」
在程式設計能力上有更大突破,可以幫助使用者生成高質量的程式碼,能夠獨立編寫和執行程式碼,具有複雜的推理和進階的錯誤排除能力,讓使用者能快速開發小遊戲、網頁。
以下的範例會測試程式碼的撰寫能力
我上傳一張wireframe圖像,請Claude幫我用html+css切出網頁畫面
在最後,還會講解他撰寫的操作說明,讓不熟悉語法的開發者也能夠了解
下圖為生成結果,與提供的圖像切出來的差不多,只需要自行做樣式調整
以下是生成畫面的code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="logo-container">
<div class="logo"><div class="mountain"></div></div>
</div>
<div class="dots">
<span class="dot"></span> <span class="dot"></span>
<span class="dot"></span>
</div>
<form class="login-form">
<input type="text" placeholder="Username" required />
<input type="password" placeholder="Password" required />
<div class="remember-me">
<input type="checkbox" id="remember" />
<label for="remember">Remember</label>
</div>
<button type="submit">Sign In <span class="arrow">→</span></button>
</form>
<div class="links">
<a href="#">Can't login in / One time</a>
<a href="#">Forgot Password?</a>
</div>
</div>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.logo-container {
text-align: center;
margin-bottom: 20px;
}
.logo {
width: 80px;
height: 80px;
background-color: #e0e0e0;
border-radius: 15px;
display: inline-flex;
justify-content: center;
align-items: center;
}
.mountain {
width: 40px;
height: 30px;
background-color: #a0a0a0;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.dots {
text-align: center;
margin-bottom: 20px;
}
.dot {
height: 8px;
width: 8px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.remember-me {
margin-bottom: 20px;
}
.login-form button {
width: 100%;
padding: 10px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.arrow {
float: right;
}
.links {
text-align: center;
margin-top: 20px;
font-size: 12px;
}
.links a {
color: #666;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
請Claude幫我製作一個托特塔羅抽卡測驗網頁
生成結果,可以點擊抽卡,但是沒有顯示卡片的說明
所以再請Claude幫我加入抽卡結果說明
就完成了簡易的托特塔羅抽卡網站了
以下是生成畫面的code
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>托特塔羅抽卡測驗</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
padding: 20px;
}
#card-container {
margin-top: 20px;
}
#card {
width: 200px;
height: 300px;
border: 1px solid #000;
margin: 0 auto;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
#explanation {
margin-top: 20px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
</style>
</head>
<body>
<h1>托特塔羅抽卡測驗</h1>
<div id="card-container">
<div id="card">點擊抽卡按鈕開始</div>
</div>
<button onclick="drawCard()">抽卡</button>
<div id="explanation"></div>
<script>
const cardExplanations = {
"愚者": "代表新的開始、冒險、自由和無限可能。提醒您保持開放的心態,勇於嘗試新事物。",
"魔術師": "象徵創造力、技能和意志力。暗示您擁有實現目標的所有工具,只需要付諸行動。",
"女祭司": "代表直覺、內在智慧和潛意識。建議您信任自己的感覺,聆聽內心的聲音。",
"女皇": "象徵豐饒、感性和創造力。提醒您關注自己的情感需求,享受生活的美好。",
"皇帝": "代表權威、結構和控制。暗示您需要建立秩序,或者面對生活中的權威人物。",
"教皇": "象徵精神指引、傳統和信仰。建議您尋求指導或遵循傳統價值觀。",
"戀人": "代表選擇、和諧和人際關係。提醒您關注重要的關係,或面臨重要的決定。",
"戰車": "象徵意志力、決心和勝利。鼓勵您堅持自己的目標,克服障礙。",
"力量": "代表內在力量、勇氣和自信。提醒您相信自己有能力應對挑戰。",
"隱者": "象徵內省、獨處和智慧。建議您花時間獨處,尋找內心的答案。",
"命運之輪": "代表變化、機會和命運。提醒您生活中的起起落落,接受改變。",
"正義": "象徵公平、平衡和誠實。鼓勵您做出公正的決定,保持誠實。",
"吊人": "代表犧牲、新視角和放下。建議您換個角度看問題,或者放下某些東西。",
"死神": "象徵結束、變化和轉型。提醒您某些事物需要結束,以便新的開始。",
"節制": "代表平衡、調和和耐心。鼓勵您在生活中尋找平衡,保持耐心。",
"魔鬼": "象徵誘惑、執著和物質主義。提醒您注意自己的慾望和依戀。",
"高塔": "代表突然的變化、崩塌和啟示。暗示您可能面臨意外的改變或頓悟。",
"星星": "象徵希望、靈感和更新。鼓勵您保持樂觀,相信美好的未來。",
"月亮": "代表直覺、幻想和恐懼。提醒您面對內心的恐懼,相信自己的直覺。",
"太陽": "象徵快樂、活力和成功。預示著積極的結果和喜悅的時光。",
"審判": "代表重生、覺醒和內在呼喚。鼓勵您聆聽內心的聲音,作出重要決定。",
"世界": "象徵完成、統一和成就。代表一個週期的結束和新週期的開始。"
};
function drawCard() {
const cardElement = document.getElementById('card');
const explanationElement = document.getElementById('explanation');
const cards = Object.keys(cardExplanations);
const randomCard = cards[Math.floor(Math.random() * cards.length)];
cardElement.textContent = randomCard;
explanationElement.innerHTML = `<h3>${randomCard}牌的含義:</h3><p>${cardExplanations[randomCard]}</p>`;
}
</script>
</body>
</html>
Claude 3.5 Sonnet生成速度相當快,在生成程式碼方面表現出色,能夠理解複雜的需求,並生成高質量、結構良好的程式碼。當我要求新增功能時,它能根據我的要求進行擴展,最後附上程式碼說明,這對於不熟悉程式語言的開發人員來說非常有幫助。
═══════════════
嗨,我是原來可以這樣做的Sunny
我正嘗試將我學習的知識轉化成文字
與你分享,一同成長
如果你喜歡我的內容
動動手指點個愛心或留言與我分享你的想法
想學習更多知識嗎,追蹤 @dowayworks
也歡迎分享給朋友一起學習唷
感謝你閱讀完這篇內容,期待與你一同進步