Skip to content

Instantly share code, notes, and snippets.

@kittinan

kittinan/index.html

Created January 20, 2026 09:01
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kittinan/40a7d34ede1a2d0e7e11aa11b1222993 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kittinan/40a7d34ede1a2d0e7e11aa11b1222993 to your computer and use it in GitHub Desktop.
Download ZIP
8000
Raw
index.html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>รายงานเปรียบเทียบ AI Tools สำหรับ Software Engineer (งบ 8,000 บาท)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Warm Neutrals & Trust Blue -->
<!-- Background: #F9FAFB (Gray 50) / #F3F4F6 (Gray 100) -->
<!-- Surface: #FFFFFF -->
<!-- Primary Text: #1F2937 (Gray 800) -->
<!-- Accent: #3B82F6 (Blue 500) for actions, #10B981 (Green 500) for privacy safety -->
<!-- Application Structure Plan:
1. Header & Executive Summary: Sets the context (Budget 8k, Privacy First).
2. Cost vs. Value Visualization: A scatter plot to instantly identify tools that fit the specific budget/value sweet spot.
3. Privacy & Feature Filter: The core interactive section. Users can filter list by "Private Mode", "Free Tier", etc.
4. Detailed Cards: Each card explains the tool, the EXACT price in THB, and the critical "How to opt-out of training" instructions.
5. Comparison Matrix: A dense data view for side-by-side feature comparison.
-->
<!-- Visualization & Content Choices:
- Chart.js Scatter Plot: Best for showing Price (X) vs Score (Y) to visually demonstrate which tools fall under the 8,000 line and offer best value.
- Chart.js Bar Chart: Simple cost comparison.
- Interactive DOM Elements: Filters and Modals for "Privacy Details" to keep the UI clean but accessible.
- NO SVG/Mermaid: All icons use Unicode or Tailwind shapes.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body {
font-family: 'Sarabun', sans-serif;
background-color: #F3F4F6;
color: #1F2937;
}
.chart-container {
position: relative;
width: 100%;
max-width: 800px;
height: 350px;
max-height: 400px;
margin: 0 auto;
}
.card-hover {
transition: all 0.3s ease;
}
.card-hover:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.privacy-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.75rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
}
.privacy-safe { background-color: #D1FAE5; color: #065F46; }
.privacy-warning { background-color: #FEF3C7; color: #92400E; }
</style>
</head>
<body class="bg-gray-50 min-h-screen flex flex-col">
<!-- Navigation / Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 flex justify-between items-center">
<div class="flex items-center space-x-3">
<div class="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">AI</div>
<h1 class="text-xl font-bold text-gray-900">รายงาน AI Tools เพื่อ Developer</h1>
</div>
<div class="text-sm font-medium text-gray-500 hidden sm:block">
งบประมาณ: <span class="text-green-600 font-bold">฿8,000 / ปี</span> | เงื่อนไข: <span class="text-blue-600 font-bold">ไม่เทรนข้อมูล (Privacy First)</span>
</div>
</div>
</header>
<!-- Main Content -->
<main class="flex-grow container mx-auto px-4 py-8 space-y-12 max-w-7xl">
<!-- Section 1: Introduction & Key Findings -->
<section class="bg-white rounded-2xl p-8 shadow-sm border border-gray-100">
<h2 class="text-2xl font-bold text-gray-900 mb-4">บทสรุปผู้บริหาร: ทางเลือกที่ดีที่สุดในงบ 8,000 บาท</h2>
<p class="text-gray-600 mb-6 leading-relaxed">
จากการวิเคราะห์เครื่องมือ AI Assistant สำหรับ Software Engineer ในท้องตลาดปัจจุบัน โดยมีข้อจำกัดด้านงบประมาณไม่เกิน 8,000 บาทต่อปี และนโยบายความเป็นส่วนตัวที่เข้มงวด (Data Privacy) พบว่าเครื่องมือระดับโลกหลายตัว (เช่น ChatGPT Plus หรือ Claude Pro) มีราคาสูงเกินงบประมาณ (ประมาณ 8,600+ บาท) แต่ยังมีทางเลือกที่มีประสิทธิภาพสูงที่ออกแบบมาเพื่อการเขียนโค้ดโดยเฉพาะและอยู่ในงบประมาณ
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-blue-50 p-6 rounded-xl border border-blue-100">
<div class="text-blue-600 text-3xl mb-2">🏆</div>
<h3 class="font-bold text-lg text-blue-900">Top Pick: GitHub Copilot</h3>
<p class="text-sm text-blue-700 mt-2">ราคา ~3,600 บาท/ปี. ประสิทธิภาพสูงสุดในงบ เชื่อมต่อ IDE ได้ดีเยี่ยม และมี Settings ปิดการส่งข้อมูลได้</p>
</div>
<div class="bg-green-50 p-6 rounded-xl border border-green-100">
<div class="text-green-600 text-3xl mb-2">🔒</div>
<h3 class="font-bold text-lg text-green-900">Privacy King: Tabnine Pro</h3>
<p class="text-sm text-green-700 mt-2">ราคา ~5,200 บาท/ปี. โดดเด่นที่สุดเรื่องความปลอดภัย มีโหมดรัน Local Model ไม่ส่งโค้ดออกข้างนอก</p>
</div>
<div class="bg-purple-50 p-6 rounded-xl border border-purple-100">
<div class="text-purple-600 text-3xl mb-2">💎</div>
<h3 class="font-bold text-lg text-purple-900">Best Value: Codeium</h3>
<p class="text-sm text-purple-700 mt-2">ราคา 0 บาท (Free Tier). สำหรับบุคคลทั่วไปฟรีและมีความสามารถเทียบเคียงคู่แข่ง ประหยัดงบได้ 100%</p>
</div>
</div>
</section>
<!-- Section 2: Visual Analysis (Scatter Plot) -->
<section>
<div class="flex flex-col md:flex-row justify-between items-end mb-6">
<div class="max-w-2xl">
<h2 class="text-2xl font-bold text-gray-900">วิเคราะห์ความคุ้มค่า (Value Matrix)</h2>
<p class="text-gray-600 mt-2">
แผนภาพเปรียบเทียบราคาต่อปี (แกน X) กับคะแนนความสามารถโดยรวม (แกน Y) เส้นประสีแดงคืองบประมาณ 8,000 บาท
เครื่องมือที่อยู่ทางซ้ายของเส้นแดงคือเครื่องมือที่อยู่ในงบ
</p>
</div>
</div>
<div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100">
<div class="chart-container">
<canvas id="valueChart"></canvas>
</div>
</div>
</section>
<!-- Section 3: Detailed Tool Explorer -->
<section id="tool-explorer">
<h2 class="text-2xl font-bold text-gray-900 mb-6">เจาะลึกรายละเอียดรายเครื่องมือ</h2>
<p class="text-gray-600 mb-6">
เลือกดูรายละเอียดของแต่ละเครื่องมือ โดยเฉพาะวิธีการตั้งค่า <span class="font-bold text-red-600">Privacy Setting</span> เพื่อให้มั่นใจว่าโค้ดจะไม่ถูกนำไปเทรน
</p>
<!-- Filters -->
<div class="flex flex-wrap gap-3 mb-8">
<button onclick="filterTools('all')" class="px-4 py-2 rounded-lg bg-gray-800 text-white text-sm font-medium hover:bg-gray-700 transition" id="btn-all">ทั้งหมด</button>
<button onclick="filterTools('free')" class="px-4 py-2 rounded-lg bg-white border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition" id="btn-free">ของฟรี (Free)</button>
<button onclick="filterTools('paid')" class="px-4 py-2 rounded-lg bg-white border border-gray-300 text-gray-700 text-sm font-medium hover:bg-gray-50 transition" id="btn-paid">เสียเงิน (Paid)</button>
<button onclick="filterTools('privacy')" class="px-4 py-2 rounded-lg bg-white border border-green-600 text-green-700 text-sm font-medium hover:bg-green-50 transition" id="btn-privacy">เน้น Privacy สูงสุด</button>
</div>
<!-- Tool Cards Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6" id="tools-grid">
<!-- Cards will be injected by JS -->
</div>
</section>
<!-- Section 4: Comparison Table -->
<section class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
<div class="p-8 border-b border-gray-100">
<h2 class="text-2xl font-bold text-gray-900">ตารางเปรียบเทียบคุณสมบัติ (Feature Comparison)</h2>
<p class="text-gray-600 mt-2">เปรียบเทียบฟีเจอร์หลัก IDE ที่รองรับ และนโยบายข้อมูล</p>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left text-sm text-gray-600">
<thead class="bg-gray-50 text-gray-900 font-semibold uppercase tracking-wider text-xs">
<tr>
<th class="px-6 py-4">Tool</th>
<th class="px-6 py-4">ราคาต่อปี (โดยประมาณ)</th>
<th class="px-6 py-4">Chat Feature</th>
<th class="px-6 py-4">IDE Support</th>
<th class="px-6 py-4">Privacy (No Training)</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-100" id="comparison-table-body">
<!-- Table rows injected by JS -->
</tbody>
</table>
</div>
</section>
<!-- Section 5: Why Privacy Matters -->
<section class="bg-gray-100 rounded-2xl p-8 mb-12">
<div class="flex flex-col md:flex-row items-start gap-6">
<div class="flex-shrink-0 bg-yellow-100 p-4 rounded-full text-yellow-600 text-2xl">⚠️</div>
<div>
<h3 class="text-xl font-bold text-gray-900 mb-2">ข้อควรระวังเรื่อง Data Training</h3>
<p class="text-gray-700 leading-relaxed">
Software Engineer ที่ทำงานในบริษัทมักกังวลว่า Code ที่พิมพ์จะถูกส่งไปเทรนโมเดลกลาง (Public Model) ซึ่งอาจทำให้ความลับรั่วไหลได้
<br><br>
เครื่องมือที่เลือกมาในรายงานนี้ <strong>มีตัวเลือกในการ Opt-out (ไม่ยินยอม)</strong> ทั้งสิ้น แต่โดย Default บางตัวอาจจะเปิดไว้ ดังนั้นผู้ใช้ <strong>ต้องเข้าไปตั้งค่า</strong> ตามคำแนะนำในส่วน "วิธีการตั้งค่า Privacy" ด้านบนทันทีหลังติดตั้ง
</p>
</div>
</div>
</section>
</main>
<footer class="bg-white border-t border-gray-200 mt-auto">
<div class="max-w-7xl mx-auto px-4 py-6 text-center text-sm text-gray-500">
&copy; 2025 AI Budget Report Tool. ราคานี้เป็นการประมาณการจากค่าเงิน USD (1 USD = ~35-36 THB) ณ วันที่ทำรายงาน
</div>
</footer>
<!-- JavaScript Logic -->
<script>
// --- Data Source ---
const toolsData = [
{
id: 'copilot',
name: 'GitHub Copilot (Individual)',
priceUSD: 100,
priceTHB: 3600,
score: 9.5,
type: 'Paid',
privacyLevel: 'High (Configurable)',
privacyNote: 'สามารถปิดการส่ง Code Snippets ได้ใน GitHub Settings',
features: ['Autocomplete', 'Chat Interface', 'CLI Support', 'Strong Ecosystem'],
ide: ['VS Code', 'Visual Studio', 'JetBrains', 'Vim'],
description: 'มาตรฐานอุตสาหกรรม ใช้งานง่าย ช่วยเขียนโค้ดได้แม่นยำที่สุดในกลุ่มราคาประหยัด',
privacyConfig: 'ไปที่ GitHub Settings > Copilot > ปิดตัวเลือก "Allow GitHub to use my code snippets for product improvements"',
isBudgetSafe: true
},
{
id: 'tabnine',
name: 'Tabnine Pro',
priceUSD: 144,
priceTHB: 5200,
score: 8.8,
type: 'Paid',
privacyLevel: 'Very High (Local)',
privacyNote: 'จุดเด่นคือ Zero Data Retention และ Local AI Models',
features: ['Whole-line completion', 'Local Model', 'Enterprise-grade privacy'],
ide: ['VS Code', 'JetBrains', 'Eclipse', 'Sublime'],
description: 'ทางเลือกสำหรับผู้ที่ซีเรียสเรื่อง Privacy ขั้นสูงสุด สามารถรันโมเดลขนาดเล็กบนเครื่องตัวเองได้',
privacyConfig: 'Tabnine ออกแบบมาเป็น Zero Data Retention โดยพื้นฐาน แต่สามารถเช็คใน Tabnine Hub เพื่อความมั่นใจว่าไม่ได้เปิด Cloud Share',
isBudgetSafe: true
},
{
id: 'codeium',
name: 'Codeium (Individual)',
priceUSD: 0,
priceTHB: 0,
score: 8.5,
type: 'Free',
privacyLevel: 'Medium (Configurable)',
privacyNote: 'แบบฟรีจะไม่เทรนโค้ดหากเลือก Opt-out (แต่อาจมีฟีเจอร์จำกัด)',
features: ['Free Unlimited Autocomplete', 'Chat', 'Fast speeds'],
ide: ['VS Code', 'JetBrains', 'Vim', 'WebStorm'],
description: 'ตัวเลือกฟรีที่ดีที่สุด เร็ว และฟีเจอร์ครบครัน ประหยัดงบได้ 100%',
privacyConfig: 'ใน Settings ของ Codeium สามารถเลือกปิด "Code Snippet Telemetry" ได้',
isBudgetSafe: true
},
{
id: 'jetbrains',
name: 'JetBrains AI Assistant',
priceUSD: 100,
priceTHB: 3600,
score: 9.0,
type: 'Paid',
privacyLevel: 'High',
privacyNote: 'ไม่เทรนด้วย Code ของลูกค้าโดยระบุในนโยบายชัดเจน',
features: ['Deep IDE Integration', 'Refactoring', 'Commit Messages'],
ide: ['IntelliJ IDEA', 'WebStorm', 'PyCharm', 'All JetBrains'],
description: 'เหมาะมากถ้าคุณใช้ IDE ของค่าย JetBrains อยู่แล้ว เพราะมันเข้าใจ Project Structure ดีมาก',
privacyConfig: 'JetBrains มีสัญญา Data Privacy ชัดเจนว่าไม่เก็บข้อมูล Code ไปเทรนโมเดลกลาง',
isBudgetSafe: true
},
{
id: 'aws',
name: 'Amazon CodeWhisperer',
priceUSD: 0,
priceTHB: 0,
score: 7.5,
type: 'Free',
privacyLevel: 'Medium',
privacyNote: 'ฟรีสำหรับบุคคล แต่ต้องระวังการตั้งค่า',
features: ['AWS Integration', 'Security Scans', 'Free Tier'],
ide: ['VS Code', 'JetBrains', 'AWS Cloud9'],
description: 'ดีมากหากทำงานสาย AWS Cloud มีฟีเจอร์สแกนช่องโหว่ความปลอดภัยฟรี',
privacyConfig: 'ต้องเข้าไปที่ AWS Console หรือ Settings เพื่อปิด "Content sharing for service improvement"',
isBudgetSafe: true
},
{
id: 'chatgpt',
name: 'ChatGPT Plus / Claude Pro',
priceUSD: 240,
priceTHB: 8640,
score: 9.8,
type: 'OverBudget',
privacyLevel: 'High (Configurable)',
privacyNote: 'ฉลาดที่สุด แต่ราคาสูงเกินงบ',
features: ['General Purpose', 'Advanced Reasoning', 'File Uploads'],
ide: ['Web Interface', 'Via API (Paid separately)'],
description: 'ฉลาดกว่า AI Coding โดยเฉพาะ แต่ราคาเกินงบ 8,000 บาท',
privacyConfig: 'Settings > Data Controls > ปิด Chat History & Training',
isBudgetSafe: false
}
];
// --- Chart Generation ---
function initCharts() {
const ctxValue = document.getElementById('valueChart').getContext('2d');
// Filter out 'OverBudget' for the main chart visualization to focus on budget recommendations
// OR keep them but color differently. Let's keep them to show comparison.
const chartData = toolsData.map(tool => ({
x: tool.priceTHB,
y: tool.score,
label: tool.name,
isBudget: tool.isBudgetSafe
}));
new Chart(ctxValue, {
type: 'scatter',
data: {
datasets: [{
label: 'Tools',
data: chartData,
backgroundColor: (ctx) => {
const val = ctx.raw;
// Red if over budget, Blue if paid & budget, Green if free
if (val && !val.isBudget) return '#EF4444'; // Red-500
if (val && val.x === 0) return '#10B981'; // Green-500
return '#3B82F6'; // Blue-500
},
pointRadius: 8,
pointHoverRadius: 12
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
tooltip: {
callbacks: {
label: function(context) {
return `${context.raw.label}: ฿${context.raw.x.toLocaleString()} (Score: ${context.raw.y})`;
}
},
backgroundColor: 'rgba(31, 41, 55, 0.9)',
padding: 12,
titleFont: { family: 'Sarabun', size: 14 },
bodyFont: { family: 'Sarabun', size: 13 }
},
legend: { display: false },
annotation: {
annotations: {
line1: {
type: 'line',
xMin: 8000,
xMax: 8000,
borderColor: 'rgb(239, 68, 68)',
borderWidth: 2,
borderDash: [6, 6],
label: {
content: 'Budget Limit (8,000 THB)',
enabled: true,
position: 'start',
backgroundColor: 'rgba(239, 68, 68, 0.8)',
color: 'white',
font: { family: 'Sarabun' }
}
}
}
}
},
scales: {
x: {
type: 'linear',
position: 'bottom',
title: { display: true, text: 'ราคาต่อปี (บาท)', font: { family: 'Sarabun', weight: 'bold' } },
max: 10000,
grid: { color: '#E5E7EB' }
},
y: {
title: { display: true, text: 'คะแนนประสิทธิภาพ (เต็ม 10)', font: { family: 'Sarabun', weight: 'bold' } },
min: 6,
max: 10,
grid: { color: '#E5E7EB' }
}
}
}
});
}
// --- UI Rendering ---
const gridContainer = document.getElementById('tools-grid');
const tableBody = document.getElementById('comparison-table-body');
const buttons = document.querySelectorAll('button[id^="btn-"]');
function renderCards(filterType) {
gridContainer.innerHTML = '';
const filteredData = toolsData.filter(tool => {
if (filterType === 'all') return true;
if (filterType === 'free') return tool.priceTHB === 0;
if (filterType === 'paid') return tool.priceTHB > 0 && tool.isBudgetSafe;
if (filterType === 'privacy') return tool.privacyLevel.includes('High') || tool.privacyLevel.includes('Very High');
return true;
});
filteredData.forEach(tool => {
const isOverBudget = !tool.isBudgetSafe;
const card = document.createElement('div');
card.className = `bg-white rounded-xl p-6 shadow-sm border ${isOverBudget ? 'border-red-200 bg-red-50' : 'border-gray-200'} card-hover flex flex-col`;
let priceDisplay = tool.priceTHB === 0 ? 'ฟรี (Free Tier)' : `฿${tool.priceTHB.toLocaleString()} / ปี`;
if (isOverBudget) priceDisplay += ' (เกินงบ)';
card.innerHTML = `
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="text-xl font-bold ${isOverBudget ? 'text-red-700' : 'text-gray-900'}">${tool.name}</h3>
<div class="text-sm font-semibold mt-1 ${isOverBudget ? 'text-red-600' : 'text-blue-600'}">${priceDisplay}</div>
</div>
<div class="bg-gray-100 text-gray-800 text-xs font-bold px-2 py-1 rounded">Score: ${tool.score}</div>
</div>
<p class="text-gray-600 text-sm mb-4 flex-grow">${tool.description}</p>
<div class="mb-4">
<span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Supported IDEs:</span>
<div class="flex flex-wrap gap-2 mt-2">
${tool.ide.map(ide => `<span class="bg-gray-100 text-gray-600 text-xs px-2 py-1 rounded">${ide}</span>`).join('')}
</div>
</div>
<div class="mt-4 pt-4 border-t border-gray-100 bg-gray-50 -mx-6 -mb-6 px-6 py-4 rounded-b-xl">
<div class="flex items-center gap-2 mb-2">
<span class="text-xs font-bold uppercase text-gray-500">Privacy Setting:</span>
<span class="privacy-badge ${tool.privacyLevel.includes('High') ? 'privacy-safe' : 'privacy-warning'}">
${tool.privacyLevel}
</span>
</div>
<p class="text-xs text-gray-600 italic leading-relaxed">
<span class="font-bold">วิธีตั้งค่า:</span> ${tool.privacyConfig}
</p>
</div>
`;
gridContainer.appendChild(card);
});
}
function renderTable() {
tableBody.innerHTML = '';
toolsData.forEach(tool => {
const tr = document.createElement('tr');
tr.className = "hover:bg-gray-50 transition";
tr.innerHTML = `
<td class="px-6 py-4 font-medium text-gray-900">${tool.name}</td>
<td class="px-6 py-4 ${!tool.isBudgetSafe ? 'text-red-600 font-bold' : ''}">
${tool.priceTHB === 0 ? 'ฟรี' : '฿' + tool.priceTHB.toLocaleString()}
</td>
<td class="px-6 py-4">
${tool.features.includes('Chat Interface') || tool.features.includes('Chat') ? '<span class="text-green-600">✔ มี Chat</span>' : '<span class="text-gray-400">-</span>'}
</td>
<td class="px-6 py-4 text-xs leading-5">
${tool.ide.join(', ')}
</td>
<td class="px-6 py-4">
<span class="inline-block w-2 h-2 rounded-full mr-2 ${tool.privacyLevel.includes('High') ? 'bg-green-500' : 'bg-yellow-500'}"></span>
${tool.privacyNote}
</td>
`;
tableBody.appendChild(tr);
});
}
function filterTools(type) {
// Update UI State
buttons.forEach(btn => {
if(btn.id === `btn-${type}`) {
btn.classList.remove('bg-white', 'text-gray-700', 'border-gray-300');
btn.classList.add('bg-gray-800', 'text-white', 'border-transparent');
} else {
btn.classList.add('bg-white', 'text-gray-700', 'border-gray-300');
btn.classList.remove('bg-gray-800', 'text-white', 'border-transparent');
// Reset custom color for privacy button if inactive
if (btn.id === 'btn-privacy') {
btn.classList.remove('border-green-600', 'text-green-700');
btn.classList.add('border-gray-300', 'text-gray-700');
}
}
});
// Special styling specifically for privacy button active state
if (type === 'privacy') {
const privacyBtn = document.getElementById('btn-privacy');
privacyBtn.classList.remove('bg-gray-800', 'text-white');
privacyBtn.classList.add('bg-green-100', 'text-green-800', 'border-green-600');
}
renderCards(type);
}
// --- Initialization ---
document.addEventListener('DOMContentLoaded', () => {
initCharts();
renderCards('all');
renderTable();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment