ใใใใชใขใคใญใฃใใใไฝใใใใจใใฃใจๆใฃใฆใฏใใใฎใงใ Roo Code ใๆฌๆ ผ็ใซ่งฆใ้กๆใจใใฆไฝใฃใใ ๆๅใฎๆนใฎๆๆณใฏใใฎๆใซใใๆฎใใชใใฎใงใใใใซ้ฒใๅใซใใฎ้็จใฎใกใขใใ้ๆใใ่ใใฆใใใใจใๆธใใใใฎใ ใใฎ่จไบใฎใขใคใญใฃใใใฏใใใใฐใซไฝฟใฃใฆใใใๆ็ใๆนงใใฆใใพใฃใใตใคใฃใฝใใญใฃใฉใฏใฟใผใ
ๅๆ
- AI Coding ใๅใใฆใจใใงใฏใชใใ GitHub Copilot ใฎ ฮฒ ใซๅงใพใ Cursor Pro ใฏ 1 ๅนดใใใไฝฟใฃใฆใใใใ Cline ็ณปใๅใใฆ่งฆใใจใใงใฏใชใ
- Tier 4 ใฎ 3.7 Sonnet
- ็ด ใฎ Roo Code ใงใฉใใชใใฎใใ่ฉฆใใใใฃใใฎใงใ Code ใงๆธใไปฅๅคใฏไฝใใใฆใใชใใ rules ใใใญใณใใใใซในใฟใใคใบใใฆใใชใ
- ไธ้จใฏ Cursor ใไฝฟใฃใฆใใ
ๅฎ่ฃ ้็จ
ใใใจใใใใใฐใใใใใฃใใใใงใฏใชใใฎใงใใใฃใใใจใใๆ ็ตใฟใใไฝใใฏใใใใ ใใผในใจใชใใณใผใใฏๅๅไฝใฃใ้ข้ฃ่จไบใฎใขใใชใงใๆฐใใไฝใใฎใ้ขๅใชใฎใงใใใซ็ถใ่ถณใๅฝขใซใ
Workers AI ใๅฉ็จใใฆใใขใคใญใฃใใ็ปๅใ็ๆใใใใใซใใพใใใพใใฏใใฉใใช็ปๅใไฝใใใใๆค่จผใใใใใฎ็ฐกๅใขใใชใ related-aritcles-worker ใซๆฉ่ฝ่ฟฝๅ ใใๅฝขใงไฝๆใใฆใใ ใใใ
ไปฅไธใฎไปๆงใๅฎ็พใใฆใใ ใใ:
- `/create_eyecatch` ใจใณใใใคใณใใไฝๆใใๅใๅใฃใ่จไบใฎๆฌๆใใ Workers AI ใ็จใใฆ็ปๅใ็ๆใใพใ
- ใขใใซใซใฏ `@cf/black-forest-labs/flux-1-schnell` ใไฝฟ็จใใพใ
- ใขใใซใฎใใญใฅใกใณใใฏใใใงใ: https://developers.cloudflare.com/workers-ai/models/flux-1-schnell/
- index.html ใซ่จไบใฎๆฌๆใ้ไฟกใงใใใใฉใผใ ใๆฐใใซไฝๆใใ็ปๅใ็ๆใงใใใ่กจ็คบใใฆใใ ใใใจใใใใ่จไบใใใฎใพใพ Workers AI ใฎ็ปๅ็ๆใซๆใ่พผใใงใฟใใใใใฃใฝใใขใใชใฏๅบๆฅใใใ็ๆใใใพใใใใฏใใใชใๆๅญๆฐใชใผใใผใ
ใใใงใใฃใไธปใชใใใจใ:
- dev-server ใ่ตทๅใงใใชใ
- Dev Container ใงๅใใใฆใใใฎใง
wranlgerใฎ่ตทๅใซ--ipใๅฟ ่ฆใงใpackage.jsonใฎscriptใซใฏๆธใใฆใใใใ ใใฉ้ ใชใซ็ก่ฆใใใ rules ใงๅถๅพกใงใใใจใใใใ ใใใ๏ผ
- Dev Container ใงๅใใใฆใใใฎใง
- ใใฉใฆใถใ่ตทๅใงใใชใ
- ใกใใใจใใใฃใฆใชใใ Dev Container ไฝฟใฃใฆใใใฎใงใในใใจใฎใขใผใญใใฏใใฃใฎ้ใใงใใพใใใฃใฆใใชใใฟใใใช่ฉฑใๅคๅ็งใๆชใ
็ปๅ็ๆใใญใผใฏใผใใง่กใใใใซใใ:
`/create_eyecatch` ใงใฎ็ปๅ็ๆใใญใผใๆนๅใใพใใไปฅไธใฎใใญใผใๅฎ็พใใฆใใ ใใใ
- ็ปๅ็ๆใใๅใซใ Text Generation ใชใขใใซใ้ใใฆใ่จไบใใใญใผใฏใผใใๆฝๅบใใพใ
- ใขใใซใฏ @cf/meta/llama-3.3-70b-instruct-fp8-fast ใไฝฟใฃใฆใฟใฆใใ ใใ: https://developers.cloudflare.com/workers-ai/models/llama-3.3-70b-instruct-fp8-fast/
- ๆฝๅบใใใญใผใฏใผใใจไปฅไธใฎๅบๅฎใฎใใญใณใใใ็ตใฟๅใใใฆ 2000 ๆๅญไปฅๅ
ใฎใใญใณใใใ @cf/meta/llama-3.3-70b-instruct-fp8-fast ใซไฝๆใใใพใ
- ใใใญใฐใฎใขใคใญใฃใใใ่ๆฏใฏๅ่ฒใไบบ้ใๅซใพใชใใใขใใก่ชฟใ
- ๆ็ต็ใชใใญใณใใใไฝฟใฃใฆ็ปๅใ็ๆใใพใๅฎ่ฃ ่ชไฝใฏๆๅณ้ใใซใใฃใฆใใใใใใ ใๆๅณใใ็ปๅใฏใงใชใใใใญใณใใใใดใใชใฎใงๅฝใใๅใใใ่ฉฑใงใฏใใใใใใงใชใใจใชใ Open AI ใฎ DALL-E ใไฝฟใฃใฆใฟใใใชใฃใใฎใงใๅใๆฟใใฆใฟใใ
็พๅจ็ปๅ็ๆใ Cloudflare ใฎ Workers AI ใง่กใฃใฆใใพใใใใใใใใพใใใฃใฆใใชใใฎใง OpenAI ใฎใใฎใซ็ฝฎใๆใใพใใ
- ใใญใณใใไฝๆ้จๅใฏ็พ็ถใ็ถญๆใใพใ
- ็ปๅ็ๆใ DALLยทE 3 ใไฝฟใฃใๅฎ่ฃ
ใซ็ฝฎใๆใใฆใใ ใใ
- APIKEY ใฏๅพใปใฉใใกใใง่จญๅฎใใใฎใง env ใซ OPENAI_API_KEY ใ่จญๅฎใใใฆใใๅๆใง้ฒใใฆใใ ใใใตใคใบๅบๅฎใๅบๆฅใใใใซใชใฃใฆ(Workers AI ใงใๅบๆฅใใใฎใฏใใ)ใๅบๅใๅฎๅฎใใๆฐใใใใใปใใๆใใฎ็ปๅใฏใพใใงใชใใ
ใญใธใใฏใ่ฆ็ดใ
่จไบๅ ใฎใญใผใฏใผใใใใใใฃใฝใ็ปๅใไฝใใฎใฏใชใใชใๅณใใใใจใใใใฃใใฎใงใๅฅใฎๆนๆณใ่ใใใ ใชใฉใคใชใผใฃใฝใๆใใงใใญใผใฏใผใใจๅ็ฉใ้ข้ฃไปใใใฎใฏใฉใใใชใจๆใใคใค้ฉๅฝใซ Sonnet ใจ่ฉฑใใฆใใใ Sonnet ใใใ่จใฃใฆใใใฎใงใใใใใใใจใซใใใ ใซใใดใชใใจใซๅ็ฉใจ่ๆฏ่ฒใใใฃใใใจๆฑบใใฆใใใใใใผในใซไฝใฃใฆใใใใใใใซใ้กใใใใใญใณใใใ Sonnet ใจ่ใใใ
ๆ็ต็ใซใใใชๆใใซใใชใฉใคใชใผใฎใฑ๏ฝใชในใใฏใใใกใณใใณ(dumbo-octopus)ใฏ้ฉๅฝใซใกใขใซใใใใใจใๆธใใฆใใ Sonnet ใๅ ฅใใ:
`/create_eyecatch` ใฎๆขๅญใฎใญใผใฏใผใๆฝๅบใใใณ็ปๅ็ๆใณใผใใๆดป็จใปๆน่ฏใใๆ่กใญใผใฏใผใใซๅฏพๅฟใใใใใ็ตตๅ็ฉใญใฃใฉใฏใฟใผใใใผในใจใใใใญใฐ่จไบ็จใขใคใญใฃใใ็ปๅใ็ๆใใใทในใใ ใๅฎๆใใฆใใ ใใใ
## ๅฎ่ฃ
ๅ
ๅฎน
1. ใญใผใฏใผใ-ๅ็ฉใใใใณใฐใทในใใ ใฎๆกๅผต
ไปฅไธใฎใใใใณใฐใใผใใซใๆขๅญใณใผใใซ็ตใฟ่พผใ๏ผ
const techAnimalMap = {
"cloudflare": { animal: "alpaca", backgroundColor: "#F38020" },
"ai": { animal: "owl", backgroundColor: "#8A2BE2" },
"javascript": { animal: "rhino", backgroundColor: "#F7DF1E" },
"typescript": { animal: "guanaco", backgroundColor: "#3178C6" },
"html": { animal: "koala", backgroundColor: "#E34F26" },
"css": { animal: "fish", backgroundColor: "#1572B6" },
"database": { animal: "dumbo-octopus", backgroundColor: "#336791" }
};
2. ใญใผใฏใผใๆฝๅบใญใธใใฏใฎๅผทๅ
ๆขๅญใฎใญใผใฏใผใๆฝๅบใณใผใใๅฉ็จใใ่จไบๅ
ๅฎนใใไธ่จใซๅฎ็พฉใใใใญใผใฏใผใใฎๅบ็พ้ ปๅบฆใๅๆ
ๆใ้ข้ฃๆงใฎ้ซใใญใผใฏใผใใ็นๅฎใใใญใธใใฏใ่ฟฝๅ
่คๆฐใฎ้ข้ฃใญใผใฏใผใใใใๅ ดๅใฎๅชๅ
้ ไฝไปใใกใซใใบใ ใๅฎ่ฃ
ใใฎ่พบใใ็ปๅ็ๆ AI ใซๆใใใใญใณใใใ็งใ่ชญใพใชใใชใฃใใฎใงใๅ จ้จ่ฑ่ชใซๅคใใฆใใใฃใใใใญใณใใใซๆดใซๆณจๆใใคใใฆใใ:
็ปๅ็ๆใใญใณใใใๆฌกใฎใใใซๆนๅใใฆ
- 8bitใฒใผใ ้ขจใฎใฌใใญใชไฝ้ขจใซ
- ใญใฃใฉใฏใฟใผไปฅๅคใฎใขใคใณใณใใใญในใใๆฅตๅๅซใพใชใใใญใณใใใๆดใซๆนๅใใพใ
- ใญใฃใฉใฏใฟใผใฎใใใ็ตตใซใฏ้ปใ็ธใใคใใไปใซใ่ฒใ ๆใใๆฐใใใพใใใใใชใใใๆใใฎ็ปๅใ่ฟใฃใฆใใใใใซใชใฃใใๆ็ต็ใชใใญใณใใใฎใณใผใใฏใใใชๆใ:
const variations = [
"cute and playful",
"simple and minimalist",
"detailed and expressive",
"cheerful and colorful",
"cool and stylish"
];
const imageResponse = await openai.images.generate({
model: "dall-e-3",
prompt: `Create an 8-bit retro game style pixel art of a ${animal} character representing the concept of ${selectedTechKeyword} and ${keywordsString}.
The character should be centered on a solid ${backgroundColor} background.
Style: Classic 8-bit NES/Famicom era pixel art, extremely limited color palette (4-8 colors maximum), ${variations[index]}.
IMPORTANT: The ${animal} character MUST have a black outline/border around it - this is essential for the retro game look.
The black outline should be exactly 1 pixel thick and should completely surround the character.
The ${animal} character should be the ONLY element in the image - no icons, symbols, text, UI elements, or any other objects.
Make it look like a character sprite from an 80s video game with sharp pixels, no anti-aliasing.
The final result should be clean, minimalist, and instantly recognizable as an 8-bit game character with a distinct black outline.
The final image should be exactly 64x64 pixels in size.`,
n: 1, // DALL-E 3ใงใฏ1ๆใใค็ๆ
size: "1024x1024", // DALLยทE 3ใงๅฉ็จๅฏ่ฝใชใตใคใบ
quality: "standard",
response_format: "b64_json",
});ใใฌใใฃใใฃใฝใใใญใณใใใฏๆธใใฆใ่ใใฆใใใชใใฉใใใใๆธใใจใปใผๅซใใฆใใใใใซใชใใฎใงใใใใ backgroundColor ใฏใ ใใใ็ก่ฆใใใใใใใ 5 ใชใฏใจในใๅๆใซๆใใฆ 5 ๆใฅใคไฝใใใใซใใฆใใใ
ใกใชใฟใซ้ฉๅฝใซๆค่จผใใใฟใคใใณใฐใง็ปๅ็ๆใฏใใใฆใ้็บไธญใฏ้ฉๅฝใซไฝใฃใใใฎใซๅบๅฎใใใฐใใใฃใใใ้ ญใๅใใใซ็ก้งใซ $10 ใใใใฏใฌใธใใๆบถใใใ(ๆใ1)ใ ใใจใใใชๆใใซใใกใใฃใจใใพใใใฃใใช๏ผใจๆใฃใใฟใคใใณใฐใง็ตถๅฏพใซ git commit ใใๆนใใใ(ๆใ2)ใ
ใใใ็ตตใซใใใๅฐ็ใฎๅงใพใ
ใใฎๆใฎ็ปๅใฎ็ๆใใใฃใใใจใใใไบบใฏ็ฅใฃใฆใใใจๆใใใ็ๆ AI ใไฝใใใใ็ตตใฏใใใ็ตตใงใฏใชใใใใใใชใใจไฝใ่จใฃใฆใใใใ ใจใใๆใใ ใใใใฎ่จไบใฎใตใ ใใฎๅ ใซใชใฃใ็ปๅใ่ฆใฆใฟใใจใใใใใใใจๆใ:
ใใใ่ฆๆกๅคงใใใใใใ็ตตใซ่ฆใใใใๆใใซๅใใฆใใใใใใใใฃใใใ1ใใใใฎไธญใซ่คๆฐใฎ่ฒใๅญๅจใใใใใฆใใใ็ฎใจใ่ณใ่ฆใใจใใใ็ตตใจใใฆใฏใพใใชใ็ถๆ ใซใชใฃใฆใใใใจใใใใใใใใฏใใ ใใใ่ฃๆญฃใใฆใใใพใใใใ็ตตใซใใใฎใ็ฎๆจใใใฟใใฌใใใจใในใฆๆฉๆขฐๅใใใใจใฏ่ซฆใใฆใๆ็ต็ใซใฏไบบ้ใ็ดฐใใไฟฎๆญฃใใใๅฝขใซ่ฝใก็ใใใ
ใใฆใใใใใฉใไฟฎๆญฃใใฆใใใใจใใใจใใพใใฏ็ฏๅฒ้ธๆ โ ้ธๆใใ็ฏๅฒใ 128x128 px ใฎใใใ็ตตใจ่ฆ็ซใฆใ โ ใใใใใฎใใใใไธ็ชๅคใ่ฒใงๅกใใคใถใใใจใใใฎใ่ใใใ
่ชๅ็ๆใใใขใคใญใฃใใ็จ็ปๅใซ็ฐกๅใชๅ ๅทฅใๅบๆฅใใใใซใใพใใใใใฏใใใญใฐๅ
จไฝใงใฎ็ปๅใฎใใคในใใใชใในใๆใใใใใซๅฟ
่ฆใชไฝๆฅญใงใใ
ๆฌกใฎใใใชๅ ๅทฅใใใใใจ่ใใฆใใพใ:
- ่ๆฏ่ฒใ้้ๅฆ็
- ็ๆใใใ็ปๅใใใใขใคใณใณ้จๅใ ใใใฆใผใถใผใ็ฏๅฒ้ธๆใใฆๅใๆใ
- ๅใๆใใ็ปๅใใใขใฌในใใใคใใผๆณใ็จใใฆ 128x128 ใซ็ธฎๅฐ
- 4ๅใงใใ 512x512 ใซๆกๅคงใ1ใใใ่พบใ 4x4 ใๅฉ็จใใ็ถๆ
ใซใใ
- ใใฎ็ปๅใ 1200x630 ใฎใญใฃใณใในใฎ็ใไธญใซ้
็ฝฎใใ
- ใญใฃใณใในใฎ่ๆฏใๆๅฎใใใ 1 ่ฒใงๅกใใคใถใ
ใใใๆฌกใฎใใใชใใญใผใงๅฎ็พใใใใจ่ใใฆใใพใ:
- `/create_eyecatch` ใงๅ่ฃใจใชใ็ปๅใ่คๆฐๆ็ๆ
- ใฏใฉใคใขใณใใงใฆใผใถใผใ็ฏๅฒๆๅฎใใฆๅใๆใใ่กใ
- ็ธฎๅฐใๆกๅคงใ่ฃๆญฃใ่กใฃใใญใฃใฉใฏใฟใผใใฆใผใถใผใ็ขบ่ชใงใใๅฝขใงๅบๅ
- ใฆใผใถใผใๆฑบๅฎใใใใ1200x630ใฎใญใฃใณใในใซ้
็ฝฎใใใขใคใญใฃใใใจใใฆๅบๅใใ
ๅในใใใใงใญใฃใณใปใซใใฆๅ
้ ญใซๆปใใใใใซใใฆใใ ใใ็ต่ซใใใใใจใใใฏๅ จใใใพใใใใชใใฃใใๆใ็ถๆ ใซใชใใใไฝๅบฆใไฟฎๆญฃใๅ ใใใใ็ฏๅฒ้ธๆใใงใใๅใๆใใ่กใฃใฆ 128x128 ใซ็ธฎๅฐใใโฆ ใจใใใจใใใพใงใฏใใใใใใฎ็ปๅใ็ถบ้บใงใฏใชใใ ใใใใ็ๆใใใ็ปๅใฎใใใใฎใตใคใบใใพใกใพใกใชใฎใงใๅบๅฎๅคใงๅบๆฅใใใใชใใฎใงใใชใใใจใใๆใใ ไธๆนใงๅ จไฝใฎ UI ใจใใญใผใจใใใใ่ฆ็ด ใฎ้ ็ฝฎใใใพใใซใ้ฉๅฝใใใ(ใใใฏๆ็คบใไธๅใใฆใใชใใฎใๆชใใ)ใใจใ้คใใฐใๆไฝ่ชไฝใฏใใใฃใฝใใงใใใใใใใ ใใใงไฝใฃใใใใ็ตตๅใฎใญใธใใฏใฏใในใฆๆถใใฆใใใใ UI ใฎๆ ็ตใฟใฏใใใงไฝใฃใใใฎใๆๅพใพใงไฝฟใใใจใซใชใฃใใ
ๆฌกใซใฐใชใใใซๅบๅใฃใฆใใใใใฎใใใใไธ็ชๅคใ่ฒใงๅกใใคใถใใใจใใใฎใ่ใใใใคใกใผใธใจใใฆใฏใใใชใฎ:
index.html ใธ็ปๅใฎๅ ๅทฅๆฉ่ฝใๅฎ่ฃ
ใใพใใใใใฏ `/create_eyecatch` ใง็ๆใใใๆๆงใชใใใ็ตต(Pixel Art)ใใใใใชใใใ็ตตใซๅ ๅทฅใใๆ็ต็ใซ 1200 x 630 ใฎใตใคใบใซใใพใใ
## ๅๆ
- `/create_eyecatch` ใง็ๆใใใ็ปๅใฏ 1024x1024 px ใงใ
- ใใใซใๆกๅคงใใใ 64x64 px ็จๅบฆใฎใใใ็ตตใๆธใใใฆใใพใ
- ใใ ใใใใใ็ตตใจใใฆใฏๆญชใฟใใใ็ปๅใซใชใฃใฆใใพใ
- ไพใใฐใๆกๅคงใใใไธใคใฎ Dot ใ่คๆฐใฎ่ฒใๆงๆใใฆใใพใ
- ใใใ็ตตใซใฏๅญๅจใใชใใฏใใฎใๅๅฝขใฎ Dot ใๅญๅจใใพใ
## ๅฎ่ฃ
ใใๆฉ่ฝใฎใใญใผ
ใใใ็ตตใจใใฆไธๆญฃใช Dot ใ่ฃๆญฃใใฆใใใใ็ตตใๅฎๆใใใพใใ
1. ใพใ่ฟๅดใใใ่คๆฐใฎ็ปๅใใไธใคใใฆใผใถใผใ้ธๆใใพใ
2. ้ธๆใใใ็ปๅใซใฐใชใใใ่กจ็คบใใพใใใใฎใฐใชใใใฏ 8 x 8 pxใ 1 dot ใจใใฆๆฑใใพใใ่จใๆใใใจๅ
จไฝใ 128 x 128 px ใฎใญใฃใณใในใ ใจ่ฆ็ซใฆใใจใใใใจใงใ
3. ใฐใชใใใฎๅคงใใใฏในใฉใคใใผใงใฆใผใถใผใ่ชฟๆดใงใใใใใซใใพใ
4. ใฆใผใถใผใใฐใชใใใฎใตใคใบใๆฑบๅฎใใใใ็ปๅใๅคๆดใใๅฆ็ใซๅ
ฅใใพใ
5. ๅฆ็ใใ็ปๅใๅบๅใใพใใ1200 x 630 ใฎใญใฃใณใในใซใฏใพใ ๅ
ฅใใๅฟ
่ฆใฏใใใพใใ
## ็ปๅๅฆ็ใฎ่ฉณ็ดฐ
ใฆใผใถใผใๆฑบใใใฐใชใใใซใใฃใฆใDot ใฎๅกใใคใถใใ่กใใพใ
- ใฐใชใใใงๅบๅใใใ Dot ใฎไธญใงใๆใๅคใไฝฟใใใฆใใ่ฒใ่จ็ฎใใพใ
- ใใฎ่ฒใงใใใฎ Dot ใใในใฆๅกใใคใถใใพใ
- ไฝฟใฃใ่ฒใ่จ้ฒใใฆใใใพใ
- ใในใฆใฎ Dot ใๅกใใคใถใใใใจใไฝฟใฃใ่ฒใฎๆฐใ 16 ็จฎ้กไปฅไธใใๅ ดๅใ่ฒใๅฐใชใใใๅฆ็ใ่กใใพใ
- ่ฟใ่ฒใใพใจใใ16 ็จฎ้กใซใใพใ
- ใพใจใใใใ่ฒใใใพใจใใ่ฒใง็ฝฎใๆใใพใ
- ็ธใฎ่ฃ
้ฃพใฎใใ็ใฃ้ป(#000) ใฏๅฟ
ใๆฎใใพใ
- ๆ็ต็ใช่ฒใฎๅๅธใใๅใ็ณป็ตฑใฎ่ฒใซๅใใชใใใใซใใฆใใ ใใ
ใใฎๅฆ็ใ่กใใใจใงใไพใใฐใฐใชใใใฎใตใคใบใ 8x8 px ใงใใใฐใ1024x1024 ใฎ็ปๅใ 128x128px ใฎใใใ็ตตใจใชใใใจใๆๅพ
ใใพใใ่ฒใฎ็ตใ่พผใฟใฎใซใผใซใๅคๆดใใพใใ
- ๅบๆฌ็ใซใฏใไฝฟใใใฆใใๅๆฐใๅคใ้ ใซๆก็จใใ16 ่ฒใซๅใใพใ
- ไบบ้ใ่ญๅฅใงใใชใๆฟๆทกใฎๅทฎใใใ่ฒใใใๅ ดๅใฏใใใใใพใจใใพใ
- ใใฎไธญใซใๅ้
ใฎใใใใ 4 Dot ใฎ่ฒใฏๅซใพใชใใงใใ ใใ
- ๅ้
ใฎ 4Dot ใจๆฅตใใฆ่ฟใ่ฒใๆใค Dot ใฏใในใฆๅใ่ฒใซใใพใ'related-articles-worker/public/index.html' (see below for file content) ใซๅฎ่ฃ
ใใใฆใใ็ปๅ็ทจ้ๆฉ่ฝใใใใซใใฏใผใขใใใใพใใ
ๆขๅญใฎใใใใฎ่ฃๆญฃใ่ฒใฎ่ฃๆญฃใฎๅฆ็ใ็ตใใฃใใใจใใฆใผใถใผใใใใซไฟฎๆญฃใ่กใใๆ็ต็ใซ 1200 x 630 ใฎ็ปๅใจใใฆๅบๅใใพใใ
ไปฅไธใฎๆฉ่ฝใ่ฟฝๅ ใใฆใใ ใใ:
- ่ฃๆญฃใ็ตใใฃใ็ปๅใซๅฏพใใฆใไฝฟใใใฆใใ่ฒใๅฉ็จใใฆ 1 Dot ๅไฝใฎๅคๆดใๅบๆฅใๆฉ่ฝใฎ่ฟฝๅ
- ่ฃๆญฃใ็ตใใฃใ็ปๅใซๅฏพใใฆใไฝฟใใใฆใใ่ฒใๅฉ็จใใฆ้ฃใชใฃใฆใใๅ่ฒใใในใฆๅกใใคใถใๆฉ่ฝใฎ่ฟฝๅ
- ใใฎๅพใ็ปๅใฎ4้
ใฎ่ฒใจๅใ่ฒใงๅกใใคใถใใ 1200x630 ใฎใญใฃใณใในใ็จๆใใไปปๆใฎไฝ็ฝฎใซๅ ๅทฅๆธใฟใฎ็ปๅใ้
็ฝฎใงใใใใใซใใ
- ่ๆฏ่ฒใๅคๆดใงใใใใใซใใ
## ใฆใผใถใผใซใใ็ปๅใฎ่ฃๆญฃ
- ๅฉ็จใใฆใใ 16 ่ฒใฎใใฌใใใใใไปปๆใฎ่ฒใ้ธใใงใ
- ใฏใชใใฏใใ Dot ใใใฎ่ฒใซ็ฝฎใๆใใไบใใงใใ
- ้ฃใชใฃใฆใใๅ่ฒใๅกใใคใถใใใจใๅบๆฅใ
- ๅกใใคใถใใใผใซใๅฎ่ฃ
ใใ1 ๅใงใฏไธ่ถณใใฆใใใฎใงใ็ดฐใใไฟฎๆญฃไพ้ ผใจใใฏใใคใคใๅคงใพใใซ 3 ใคใฎใใญใณใใใงๆฉ่ฝๅ จไฝใใงใใใ ใใใฏใใฎๆ็นใงใใชใใใใใฎใๅบใฆใใฆใใฆใใชใในใ่ณใใใญใณใใใซ dump ใใใใใใใฃใใชใจๆใใใ
ใใใซใฐใชใใใฎใชใใปใใใไปใๅ ใใใใ Undo ใๅบๆฅใใใใซใใใใใจใใใฎใๅฏพ่ฉฑใง้ใซๅ ใใฆใใฃใใ Undo ใไฝใฃใฆใใ้ไธญใงไธๅบฆใณใณใใญในใใ่ถณใใชใใชใฃใใฎใงใๆฐใใใใญใณใใใงๆฌกใฎๆ็คบใใใใใใใจๅฏใใฆใใฃใฆใใใ:
@/related-articles-worker/public/index.html ใซใฏใใใ็ตตใ็ทจ้ใใๆฉ่ฝใใใใพใใใ undo ๆฉ่ฝใๅฎ่ฃ
ใใ้ไธญใงๆญขใพใฃใฆใใพใฃใฆใใพใใ
undo ๆฉ่ฝใๅฎๆใใใฆใใ ใใใ
- 10 ๅใพใง undo ใๅบๆฅใ
- ctrl + z ใใทใงใผใใซใใใซ่จญๅฎใใใใฎใใใใใ็ตๆงใใฐไฟฎๆญฃใจใใใใๅไฝใใฆๆฐใซๅ ฅใใชใใฃใใใๅใใฆใชใใฃใใใจใใใฎใไฟฎๆญฃใใใใจใๅขใใใ ใใจใใใฎๆฉ่ฝใฎๅฎ่ฃ ใๅ จ้จ index.html 1 ใใกใคใซใซ่ฉฐใ่พผใใงใใใฎใงใ 1 ๅใงไฝฟใใณใณใใญในใใฎ้ใใใใใใพใซๅคใใชใฃใฆใใใ
ใใฐไฟฎๆญฃใฎๅบๆฌ็ใชใใใใใจใใฆใฏใ UI ใ้ขใใใใฎใฏๆฐใซๅ ฅใใชใ้จๅใ SS ใใฆใๆๅฅใจไธ็ทใซๆใใฆใใใใใใงๅบๆฌ็ใซใฏ่งฃๆฑบใใฆใใใใ
ๅฏไธใใฐใชใใใจ็ปๅใใใใใใจใใๅ้กใใฉใใใฆใ Roo Code ใงใฏ่งฃๆฑบใงใใชใใฆใCursor ใจ่งฃๆฑบใใใ
ใใฎ่พบใฏใใคใใฉใใ Dev Tool ใใใใใใ CSS ใใ่ชฟในใใใจใใใใจใใฆใใฆใใ ใใใใใใฃใใจใใใงๅๅ ใใใใใใช่กใ Cursor ใซๆใใฆ็ดใใฆใใใฃใใ Cursor ใง็ดใใใใฎใฏใๅไฝใฎไธๅ ทๅใจใใฆใฏใใใจใใไธใคใใใฃใกใฏๅคๅ Cursor ใงใๅบๆฅใใใใ ใใใๆค่จใใคใใฆใใใฎใง Cursor ใซๆใใใปใใๆฉใใใชใจใชใฃใใ
ๅฎ่ฃ ใใใใซ้ฒใใฆใใฃใฆใๆ็ต็ใชๅบๅใ่ชฟๆดๅบๆฅใๆฎต้ใพใงๆฅใใฎใงใ็ดฐใใไฝ็ฝฎใใใใใฎๅคงใใใๆๅฎใงใใใใใซใใใ:
@/related-articles-worker/public/index.html ใฎใใใ็ตต็ทจ้ๆฉ่ฝใๆนๅใใพใใๆ็ต็ใซใขใคใญใฃใใใจใใฆ 1200 x 630 px ใฎใตใคใบใง็ปๅใๅบๅใใพใใ
ไปฅไธใฎๆฉ่ฝใๅฎ่ฃ
ใใพใ:
- ็ปๅใฎๅ็ใ่ชฟๆดใใๆฉ่ฝ
- ็ปๅใฎไฝ็ฝฎใไธญๅฟใใใฎใชใใปใใใง่ชฟๆดใใๆฉ่ฝ
- ้ธๆใใ่ฒใใในใฆ่ๆฏ่ฒใจใใฆๆฑใๆฉ่ฝ
## ๅ็ใ่ชฟๆดใใๆฉ่ฝ
ใใฎ็ทจ้ๆฉ่ฝใฏใฐใชใใใฎๅคงใใใ่จญๅฎใใใใจใใงใใพใใ
ไพใใฐ 16px ใฎใฐใชใใใ่จญๅฎใใๅ ดๅใใใใ็ตตใจใใฆ่ฆใๅ ดๅใฏ 16x16 px ใ 1 ใใใใจใใฆๆฑใใใใใใ16ๅใซๆกๅคงใใใ็ปๅใจใใใใจใซใชใใพใใ
ใใฎๅ็ใๆ็ต็ใชๅบๅใงใฏ่ช็ฑใซ่ชฟๆดใงใใใใใซใใฆใ็ปๅใฎๅคงใใใ่ชฟๆดใใพใใ
ๆฌกใฎใใใซๅฎ็พใใพใ:
- 1x 2x 4x 8x 16x ใฎใใใชๅปใฟใงๅ็ใ้ธๆๅบๆฅใใใใซใใ
- ใใฎๅ็ใฏใๅ
็ปๅใใใฎๅ็ใงใฏใชใใใใใ็ตตใ 1 ใใใ = 1x1px ใซๆญฃ่ฆๅใใๅ ดๅใฎๅ็ใงใ
- ไพใใฐใ16px ใฎใฐใชใใใงไฝๆใใใๅ ดๅใ 8x ใ้ธใใ ใฎใงใใใฐ 1 ใใใใ 8x8px ใฎใฐใชใใใงๆงๆใใใใใใ็ตตใซใชใใพใ
## ้ธๆใใ่ฒใใในใฆ่ๆฏ่ฒใจใใฆๆฑใ
ๆ็ต็ใชๅบๅใฎ่ๆฏใๅ่ฒใจใใใใฎใงใๅไธใฎ่ฒใงๅกใใคใถใๅฟ
่ฆใใใใพใ
ๅ ๅทฅไธญใฎ็ปๅใฎ่ๆฏ่ฒใฏใฉใณใใ ใชใใใใใฌใใใใ่ๆฏ่ฒใจใใฆๆฑใ่ฒใ่คๆฐๅ้ธในใๅฟ
่ฆใใใใพใ
้ธใใ ่ฒใจใ1200x630 ใ็ขบไฟใใฆ็ใพใใไฝๅฐ้จๅใฎ่ฒใใในใฆๅใใซใใฆใๅ่ฒใงใฎ่ๆฏใๅฎ็พใใพใใใใ ใจใใใ็ตตใใใฎใพใพๅผใไผธใฐใใฆๆฒใใๆใใฎ็ปๅใซใชใฃใฆใใใฎใงใ้้ใฃใฆใใใใจใใฃใใ็่งฃใใฆใใใ:
@/related-articles-worker/public/index.html ใงใฎใใใ็ตต็ทจ้ใฎๆ็ตๆฎต้ใงใใ 1200 x 630 ใงใฎใขใคใญใฃใใๅบๅ้จๅใๆนๅใใพใใ
ๅ็ใๅคๆดใใ้ใซใๅ
ใ
ใฎใฐใชใใใจๅ็ใ็ฐใชใใจ่ฒใฎๅข็ใใผใใใใใใซใชใฃใฆใใพใใใใใฏ้้ใฃใๅฎ่ฃ
ใงใใ
็ปๅใฎๅผใไผธใฐใใงใฏใชใใใใใใฎใตใคใบใฎใฟใๅคๆดใใพใใใขใใใญใผใใจ้ ไฟก้จๅใไฝใ
็ๆใใใ ใใง้ ไฟกใใใฆใใชใใฎใงใไฝใฃใ็ปๅใ่จไบใซ้ข้ฃไปใใฆๅใใใใใซใใๆฉ่ฝใ่ถณใใ
@/related-articles-worker/src/index.ts ใซใขใคใญใฃใใ็ปๅใ้
ไฟกใใๆฉ่ฝใ่ฟฝๅ ใใพใใใขใคใญใฃใใ็ปๅใฏ @/related-articles-worker/public/index.html ใงไฝๆใงใใใใใซใชใฃใฆใใพใใ
ๆฌกใฎใใญใผใๅฎ่ฃ
ใใฆใใ ใใ:
1. `/registier` ใง็ป้ฒใใใใจใใใใใพใงใฎๅฆ็ใซ่ฟฝๅ ใใฆใid ใจๆฌๆใฎๅ
ๅฎนใใปใใใง KV ใธไฟๅญใใพใ
2. ใใฎใจใใใพใ ใขใคใญใฃใใใฏไฝใใใฆใใพใใ
3. index.html ใง็ปๅ็ๆใ้ใใใจใใใพใ ใขใคใญใฃใใใฎใชใ่จไบใฎไธ่ฆงใ่กจ็คบใใพใ
4. ่จไบใ้ธใถใจใๅฏพ่ฑกใฎ id ใ `/create_eyecatch` ใซ้ใใๆขๅญใฎใใญใผใงใขใคใญใฃใใใไฝๆใใพใ
5. ไฝๆใใใขใคใญใฃใใใใขใใใญใผใใใใจใณใใใคใณใใๆฐใใซๅฎ่ฃ
ใใใใใธใขใคใญใฃใใใ้ไฟกใใพใ
- ใพใใid ใๆๅฎใใฆ็ปๅใใขใใใญใผใใใๆนๆณใๅๆใซ็จๆใใฆใใ ใใ
6. `/eyecatch?id=${id}` ใงใ็ป้ฒใใใขใคใญใฃใใใ็ปๅใจใใฆ่ฟใฃใฆใใใใใซใใพใ
ใใผใฟในใใขใๅฟ
่ฆใงใใใฐใ Workers ใฎ KV ใๅฉ็จใใฆใใ ใใใ็นใซ้้ใใใชใไธ็ฌใง็ตใใใ index.html ใใงใใใใฆไธๅบฆ้ๅใใใใใไปฅไธใฎใใญใณใใใงใฏใใใๅฎ่ฃ ใฎ็ถใใใใฆใใ ใใใ ใจใใๆ็คบใงๅใใใญใณใใใ่ฒผใไปใใใใใพใใใจใใฆใใใใ ็ดๆฅใขใใใญใผใใใๆฉ่ฝใจใใ้ฉๅฝใซ้็บใใใฆ็ตใใใๆธใใใจใ็นใซใชใใใใใใใฎใๅพๆใชใฎใฏใใใฏใใใจใใๆใใ
้ๆ
ใพใๅฎใใฏใชใ
ๅทฎ้กใง่ฆใๆใใไปๅใฎๆฉ่ฝใไฝใใฎใซ $25 ใใใใใใฃใฆใใใใใใซใในใฆใฎใใญใณใใใ่ผใใฆใใใใใงใฏใชใใ ๅๆฅใฎๅฏๅฆๅๆ้ใงใใฃใใใฎใงใๅ จ้จ่ชๅใงๆธใใใใใใฏใชใใชใใฃใใชใจๆใใจๆ้ใ่ฒทใใๆ่ฆใฏใใใฎใ ใใไปๅพใฎ่ถฃๅณใฎ้็บใใใฎใใผในใง้ฒใใจใใฆๅ็ดใซ 4 ้ฑใงๆ $100 + ฮฑใ ใใใซ Cursor Pro ใจ Claude Pro ใAPI ใจๅฉใใฆใใใใผใซใใใใใฎๅฉ็จๆใไนใฃใฆใชใใใใใใง AI ใซๆใใ่ฒป็จใๆ $200 ใใใใซใชใใฎใใจๆใใจใชใใชใใ
ใใ ใไปๅใกใใใจใใใใใซ Tier 4 ใซๅผใไธใใใใ Tier 4 ๆชๆบใฎ Roo Code ใฏ่ใใใใชใใฎใงใใใชใใพใ Tier 4 ใซใใๆนใใใใไฝใ Tier ใงไฝฟใฃใใใจใใใใใใฎใจใใฏๅพฎๅฆใจใใๆๆณใ ใฃใใ
่ชๅใงใๆๆงใช้จๅใฎ้็บใ้ใ
ใใใฏใใใฃใฆใใ่ฉฑใจใใใใๅฅใซๆฎๆฎตใฎ้็บใงใๅคใใใชใใจใใใไปๅใงใใใจใใใ็ตตใฎ็ทจ้ใ ๅฎๅ จใซไบบ้ใใใๅ ดๅใจๆฏในใฆใใจใใใใใใญใณใใใๆธใใฐไฝใใฏๅบใฆใใใฎใงใใใใ่งฆใฃใฆใฟใฆใใใฃใฑใ ใใ ใใชใใๆฐ่ปฝใซใงใใใฎใฏใใใฃใใจๆใใ ใฎใงใๅฅใซ AI ใๅพๆใงใฏใชใใใฉใไบบ้ใใใ็็ฑใซใฏใชใใชใใจใฏๆใฃใใๅฐใฃใใใใใใ Chat ใง็ธ่ซใจใใงใใใใ ใใ ใใใใใใใฎใซใๅพ่ฟฐใฎใปใผใใใคใณใใฏใพใใงใใใใไฝใฃใใปใใใใใจๆใฃใใ
ใณใณใใญในใใงใใใๅ้ก
ใใใฏ index.html ใซใในใฆใฎๅฎ่ฃ ใไนใใฆใใฃใใฎใๅฎๅ จใซๆชใใฎใ ใใฉใๆๅพใฎๆนใฏ 2500 ่ก็จๅบฆใซใชใฃใฆ 3 ๅๅพๅพฉใใใใณใณใใญในใใ่ถณใใชใใชใใใฟใใใซใชใฃใฆใใใ ๅพใงๅฎ้ใฎใใใจใใ้คใใฆใฟใใจใใปใผๆฏๅ index.html ใใใกใใใกใ้ใฃใฆใใใใงใใใใใกใคใซๆๅฎใใฆใใใใใใใใใใ
ไปๅใใใๅ้ฟใใใฎใซใๅใฎใใญใณใใ่ฒผใไปใใฆใๅคๅ็ถใใพใงใใฃใฆใใใใชใใจใใใฆใใฟใใใชๆ็คบใใใฆใใใ ใใฎ้ฒใๆน่ชไฝใฎๆฏ้ใฏใจใใใใ Roo Code ใฏ็ตๆงๅฏใใฆ้ฒใใฆใใใใฎใงใ็ด ็ดใซใใใใชใจๆใฃใใ
ใณใณใใญในใใ่ถณใใใใใซใณใผใใ้ฉๅใซๅๅฒใใใจใใ่ฉฑใงใฏใใฃใฆใใณใผใใฎใใกใคใซใๅใใๅบๆบใไปๅพใฏใใใจใใใซ้ขไฟใใฆใใใใ ใชใจๆใฃใใ ไปๅ rules ใชใใใฏๅ จใไฝฟใฃใฆใใชใใฆใใใชใฎใงใๆนๅใงใใใใ ใใใชใใจใฏๆใใคใคใใใใไปฅไธใซใณใณใใญในใใซไฝใใๅ ฅใใใใจใๅบๆฅใใฎใโฆ? ใจใใๆฐๆใกใๅผทใใ
ใปใผใใใคใณใใใใใใไฝใ
git commit ใใใใใใใใใจใใใฎใจใปใผใคใณใผใซใ ๅฐใใงใๆๅพ ใใๅไฝใซใชใฃใใใ้ฒๆใๅบใใจๆใฃใใใใใซ commit ใใ็ใใคใใใฎใใใใจๆใฃใใ ใใใพใงใใชใใซใใฆๅฎ่ฃ ใใใ็ดใใใใใจๆใใใจใ็ตๆงใใฃใฆใใใฎๆ็นใง commit ใใชใใฆ Roo Code ใฎๆปใใฎใใ้กใใใใใใฆใใใ่็กใ
ใใญใณใใใฏ้ฉๅฝใงใใใใจใชใใจใใชใ
ใใใฎๆฉ่ฝใๅฎ่ฃ ใใใใจใใฎๆ็คบๆธใใฟใใใชใใฎใฏ็ตๆง้ฉๅฝใงใใใใชใจใใๆ่ฆใใใใๆๆชๅฏพ่ฉฑใงไฟฎๆญฃใใใฐใใใฆใใใใฏ Cursor ใงใใใๆใใฆใใใ ใใ็จๅบฆใใฉใผใใใๅใใใฆใใใฎใใใใจใฏๆใใคใคใใๆๆงใชใใจใใใคใบใๅ ฅใฃใฆใใชใใใฐใชใใจใใชใใใจใใๅฐ่ฑกใ ใใใใใใณใผใใใผในๅ จไฝใ็่งฃใใใใใจใฎๆนใใฏใใใซ้่ฆใ ใใใชใใจใใๆใใใใใใใใไปๅใฏใปใผใในใฆใ index.html ใ ใฃใใฎใงใ้ใซใใใฏ่งฃๆฑบใใใฆใใๆใใใฃใใ
ใใถใคใณ้ฉๅฝใใๅ้ก
ใใใฏไฝใๆ็คบใใฆใใชใใฎใใ ใใใๆชใใจใฏๆใใใ ใใฉใ่ชฐใไฝฟใใใใ ใใฎ UI ใฟใใใชใฎใๅนณๆฐใงๅบใฆใใใๅบๆฌ็ธฆใซ้ท้ใใใ