เรียนรู้ AI วันแรก กับ OpenAI API ด้วย JavaScript

1
import OpenAI from 'openai'
2
const client = new OpenAI()
3

4
const response = await client.responses.create({
5
  model: 'gpt-4.1-nano',
6
  input: 'Write a one-sentence bedtime story about a unicorn.'
7
})
8

9
console.log(response.output_text)

1
import dotenv from 'dotenv'
2
dotenv.config()

1
Once upon a time, a gentle unicorn who loved to paint stars in the night sky drifted peacefully into a dream-filled sleep beneath the glowing moon.

1
เขียนโค๊ดปุ่ม button ด้วย React

1
ช่วยเขียนโค๊ดปุ่ม button ด้วย React โดยใช้ Tailwind CSS มีพื้นหลังสี green-500 และเมื่อ hover จะเปลี่ยนเป็นสี green-700

1
const response = await client.responses.create({
2
  model: 'gpt-4.1-nano',
3
  input: 'Are semicolons optional in JavaScript?',
4
  instructions: 'ตอบเป็นภาษาไทย'
5
})
6
console.log(response.output_text)

1
ใน JavaScript, เซมิโคลอน (semicolon) เป็นเครื่องหมายที่ใช้ในการบอกจุดสิ้นสุดของคำสั่ง (statement) โดยปกติแล้ว JavaScript จะมีการทำงานแบบ "automatic semicolon insertion" (ASI) ซึ่งหมายความว่า ถ้าคุณไม่เขียนเซมิโคลอนในตอนจบคำสั่ง JavaScript ก็จะพยายามแทรกเซมิโคลอนให้โดยอัตโนมัติในบางกรณี
2

3
อย่างไรก็ตาม การละเว้นเซมิโคลอนอาจทำให้เกิดความเข้าใจผิดหรือบั๊กที่คาดไม่ถึงได้ โดยเฉพาะในกรณีที่คำสั่งต่อไปนี้เริ่มต้นด้วยบรรทัดใหม่ที่อาจถูกตีความผิดว่าเป็นการต่อคำสั่งเดียวกัน
4

5
ตัวอย่างเช่น:
6

7
```javascript
8
function foo() {
9
  return
10
  {
11
    a: 1
12
  };
13
}
14
```
15

16
ในตัวอย่างนี้ เนื่องจากไม่มีเซมิโคลอนหลัง `return` และบรรทัดใหม่ที่ตามมามีการขึ้นบรรทัดใหม่ ก็จะกลายเป็นว่า `return` กลับว่างเปล่า (คืนค่า `undefined`) โดยไม่คืนอ็อบเจกต์ตามที่คาดหวัง
17

18
**สรุป:**
19
- ในทางเทคนิค JavaScript อนุญาตให้ละเว้นเซมิโคลอนในบางกรณีด้วยกลไก ASI
20
- แต่ในทางปฏิบัติ ควรเขียนเซมิโคลอนให้ครบเพื่อความชัดเจน ลดความผิดพลาด และเพิ่มความเข้าใจง่าย
21

22
**คำแนะนำ:**
23
- ใช้เซมิโคลอนเสมอเมื่อเขียนคำสั่งใหม่
24
- หรือใช้เครื่องมือ linting เช่น ESLint ที่สามารถบังคับให้เขียนเซมิโคลอนตามแนวทางที่ดีที่สุด

1
# Identity
2

3
คุณเป็นผู้ช่วยสอนเขียนโปรแกรม JavaScript และ TypeScript
4

5
# Instructions
6

7
- อธิบายสั้นๆ กระชับ เน้นเข้าใจง่าย
8
- ไม่ต้องใส่ comment ในโค๊ด
9
- prefer ไม่ต้องใช้ semicolon และ string เป็น single quote
10
- ตัวอย่างเป็น TypeScript

1
import fs from 'fs/promises'
2
import path from 'path'
3
import { fileURLToPath } from 'url'
4
const __filename = fileURLToPath(import.meta.url)
5
const __dirname = path.dirname(__filename)
6
const promptFilePath = path.join(__dirname, 'prompt.txt')
7

8
const instructions = await fs.readFile(promptFilePath, 'utf-8')
9

10
const response = await client.responses.create({
11
  model: 'gpt-4.1-nano',
12
  instructions,
13
  input: 'อธิบายเกี่ยวกับ async/await ใน JavaScript และแสดงตัวอย่างประกอบ'
14
})
15
console.log(response.output_text)

1
`async/await` เป็นแนวทางในการเขียนโค้ด asynchronous ให้อ่านง่ายขึ้น โดยใช้คำสั่ง `async` เพื่อประกาศฟังก์ชันเป็นแบบ asynchronous และใช้ `await` เพื่อรอผลลัพธ์จาก Promise จนกว่าจะเสร็จ
2

3
ตัวอย่าง:
4

5
```typescript
6
function fetchData(): Promise<string> {
7
  return new Promise(resolve => {
8
    setTimeout(() => resolve('Data fetched'), 2000)
9
  })
10
}
11

12
async function getData() {
13
  console.log('Start fetching')
14
  const data = await fetchData()
15
  console.log(data)
16
  console.log('Done')
17
}
18

19
getData()
20
```
21

22
ในตัวอย่างนี้ ฟังก์ชัน `getData` เป็นแบบ async และใช้ `await` เพื่อรอผลจาก `fetchData` ซึ่งเป็น Promise หลังจากนั้น โค้ดจะดำเนินต่อเมื่อ Promise เสร็จแล้ว ทำให้เขียนโค้ด asynchronous ได้เหมือนเขียน synchronous ง่ายขึ้น

1
**async/await** ใช้สำหรับจัดการ asynchronous code ให้อ่านง่ายเหมือน synchronous code
2
- async ใส่หน้าฟังก์ชันให้ return เป็น Promise
3
- await ใช้รอผลลัพธ์จาก Promise ก่อนจะดำเนินการต่อ
4

5
ตัวอย่าง TypeScript
6

7
```typescript
8
const fetchData = async (): Promise<string> => {
9
  return 'data loaded'
10
}
11

12
const main = async () => {
13
  const result = await fetchData()
14
  console.log(result)
15
}
16

17
main()
18
```
19

20
ผลลัพธ์:
21
data loaded

1
import OpenAI from 'openai'
2
import fs from 'fs'
3
const openai = new OpenAI()
4

5
const prompt = `
6
A children's book drawing of a veterinarian using a stethoscope to
7
listen to the heartbeat of a baby otter.
8
`
9

10
const result = await openai.images.generate({
11
  model: 'gpt-image-1',
12
  prompt
13
})
14

15
// Save the image to a file
16
const image_base64 = result.data[0].b64_json
17
const image_bytes = Buffer.from(image_base64, 'base64')
18
fs.writeFileSync('otter.png', image_bytes)

1
"A children's book drawing of a baby programmer using a notebook to learn AI, with a fluffy baby snow fox sitting nearby"