|
|
<!DOCTYPE html> |
|
|
<html lang="vi"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Trình Tạo Nội Dung Marketing AI</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#1E3A8A', |
|
|
secondary: '#60A5FA', |
|
|
accent: '#F59E0B' |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen flex flex-col items-center justify-center p-4 font-sans"> |
|
|
<div class="bg-white p-8 rounded-xl shadow-2xl w-full max-w-3xl transform transition-all duration-300"> |
|
|
<h1 class="text-3xl font-bold mb-6 text-center text-primary">Trình Tạo Nội Dung Marketing AI</h1> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<h2 class="text-xl font-semibold mb-4 text-primary">Yêu Cầu Nội Dung</h2> |
|
|
<div class="space-y-6"> |
|
|
<div class="relative group"> |
|
|
<label for="contentType" class="block text-sm font-medium text-gray-700">Loại Nội Dung</label> |
|
|
<select id="contentType" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200"> |
|
|
<option value="social_media_post">Bài Đăng Mạng Xã Hội</option> |
|
|
<option value="email_campaign">Chiến Dịch Email</option> |
|
|
<option value="blog_post">Bài Viết Blog</option> |
|
|
<option value="ad_copy">Quảng Cáo</option> |
|
|
</select> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Chọn loại nội dung bạn muốn tạo</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="targetAudience" class="block text-sm font-medium text-gray-700">Đối Tượng Mục Tiêu</label> |
|
|
<input id="targetAudience" type="text" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200" placeholder="Ví dụ: Người trẻ, 25-35 tuổi, thành thị"> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Mô tả đối tượng mục tiêu của chiến dịch</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="tone" class="block text-sm font-medium text-gray-700">Phong Cách</label> |
|
|
<select id="tone" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200"> |
|
|
<option value="professional">Chuyên Nghiệp</option> |
|
|
<option value="casual">Thân Thiện</option> |
|
|
<option value="humorous">Hài Hước</option> |
|
|
<option value="inspirational">Truyền Cảm Hứng</option> |
|
|
</select> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Chọn phong cách phù hợp với nội dung</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="campaignGoal" class="block text-sm font-medium text-gray-700">Mục Tiêu Chiến Dịch</label> |
|
|
<input id="campaignGoal" type="text" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200" placeholder="Ví dụ: Tăng nhận diện thương hiệu"> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Xác định mục tiêu chính của nội dung</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="contentLength" class="block text-sm font-medium text-gray-700">Độ Dài Nội Dung</label> |
|
|
<select id="contentLength" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200"> |
|
|
<option value="short">Ngắn (50-100 từ)</option> |
|
|
<option value="medium">Trung Bình (100-200 từ)</option> |
|
|
<option value="long">Dài (200-500 từ)</option> |
|
|
</select> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Chọn độ dài mong muốn cho nội dung</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mb-8"> |
|
|
<button id="toggleBrand" class="w-full flex justify-between items-center text-lg font-semibold mb-4 text-primary hover:text-secondary transition duration-200"> |
|
|
Thông Tin Thương Hiệu |
|
|
<svg id="toggleIcon" class="w-5 h-5 transform transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> |
|
|
</svg> |
|
|
</button> |
|
|
<div id="brandSection" class="space-y-6 hidden"> |
|
|
<div class="relative group"> |
|
|
<label for="brandName" class="block text-sm font-medium text-gray-700">Tên Thương Hiệu</label> |
|
|
<input id="brandName" type="text" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200" placeholder="Ví dụ: Sáng Tạo EcoTrend"> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Nhập tên thương hiệu của bạn</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="brandVoice" class="block text-sm font-medium text-gray-700">Giọng Điệu Thương Hiệu</label> |
|
|
<input id="brandVoice" type="text" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200" placeholder="Ví dụ: Thân thiện môi trường, sáng tạo, gần gũi"> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Mô tả giọng điệu đặc trưng của thương hiệu</span> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<label for="keyMessages" class="block text-sm font-medium text-gray-700">Thông Điệp Chính</label> |
|
|
<textarea id="keyMessages" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200" rows="4" placeholder="Ví dụ: Sống bền vững, công nghệ tiên tiến, lấy khách hàng làm trung tâm"></textarea> |
|
|
<span class="absolute hidden group-hover:block text-xs text-gray-500 mt-1">Liệt kê các thông điệp cốt lõi của thương hiệu</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="flex space-x-4"> |
|
|
<button id="generateButton" class="flex-1 bg-primary text-white p-3 rounded-lg hover:bg-secondary transition duration-200 flex items-center justify-center"> |
|
|
<span id="generateText">Tạo Nội Dung</span> |
|
|
<svg id="loadingSpinner" class="hidden animate-spin h-5 w-5 ml-2 text-white" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z "></path> |
|
|
</svg> |
|
|
</button> |
|
|
<button id="clearButton" class="flex-1 bg-gray-300 text-gray-700 p-3 rounded-lg hover:bg-gray-400 transition duration-200">Xóa Form</button> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="output" class="mt-8 hidden"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<h2 class="text-xl font-semibold text-primary">Nội Dung Được Tạo</h2> |
|
|
<button id="copyButton" class="text-sm text-secondary hover:text-accent transition duration-200">Sao Chép</button> |
|
|
</div> |
|
|
<div id="contentOutput" class="mt-4 p-4 bg-gray-100 border border-gray-200 rounded-lg whitespace-pre-wrap"></div> |
|
|
<div class="mt-4"> |
|
|
<label for="refineRequest" class="block text-sm font-medium text-gray-700">Yêu Cầu Tinh Chỉnh</label> |
|
|
<select id="refineRequest" class="mt-1 block w-full p-3 border border-gray-300 rounded-lg focus:ring-secondary focus:border-secondary transition duration-200"> |
|
|
<option value="">Không tinh chỉnh</option> |
|
|
<option value="more_creative">Sáng tạo hơn</option> |
|
|
<option value="more_concise">Ngắn gọn hơn</option> |
|
|
<option value="more_persuasive">Thuyết phục hơn</option> |
|
|
<option value="more_emotional">Cảm xúc hơn</option> |
|
|
</select> |
|
|
<button id="refineButton" class="mt-2 w-full bg-accent text-white p-3 rounded-lg hover:bg-yellow-600 transition duration-200 flex items-center justify-center"> |
|
|
<span id="refineText">Tinh Chỉnh Nội Dung</span> |
|
|
<svg id="refineSpinner" class="hidden animate-spin h-5 w-5 ml-2 text-white" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
let currentContent = ''; |
|
|
|
|
|
|
|
|
const toggleButton = document.getElementById('toggleBrand'); |
|
|
const brandSection = document.getElementById('brandSection'); |
|
|
const toggleIcon = document.getElementById('toggleIcon'); |
|
|
toggleButton.addEventListener('click', () => { |
|
|
brandSection.classList.toggle('hidden'); |
|
|
toggleIcon.classList.toggle('rotate-180'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('clearButton').addEventListener('click', () => { |
|
|
document.getElementById('contentType').value = 'social_media_post'; |
|
|
document.getElementById('targetAudience').value = ''; |
|
|
document.getElementById('tone').value = 'professional'; |
|
|
document.getElementById('campaignGoal').value = ''; |
|
|
document.getElementById('contentLength').value = 'medium'; |
|
|
document.getElementById('brandName').value = ''; |
|
|
document.getElementById('brandVoice').value = ''; |
|
|
document.getElementById('keyMessages').value = ''; |
|
|
document.getElementById('refineRequest').value = ''; |
|
|
document.getElementById('output').classList.add('hidden'); |
|
|
currentContent = ''; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('generateButton').addEventListener('click', async () => { |
|
|
const contentType = document.getElementById('contentType').value; |
|
|
const targetAudience = document.getElementById('targetAudience').value; |
|
|
const tone = document.getElementById('tone').value; |
|
|
const campaignGoal = document.getElementById('campaignGoal').value; |
|
|
const contentLength = document.getElementById('contentLength').value; |
|
|
const brandName = document.getElementById('brandName').value; |
|
|
const brandVoice = document.getElementById('brandVoice').value; |
|
|
const keyMessages = document.getElementById('keyMessages').value; |
|
|
|
|
|
if (!contentType || !targetAudience || !tone || !campaignGoal || !contentLength || !brandName || !brandVoice || !keyMessages) { |
|
|
alert('Vui lòng điền đầy đủ tất cả các trường.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const lengthConstraints = { |
|
|
short: '50-100 từ', |
|
|
medium: '100-200 từ', |
|
|
long: '200-500 từ' |
|
|
}; |
|
|
|
|
|
const contentTypeDescriptions = { |
|
|
social_media_post: 'Bài đăng mạng xã hội ngắn gọn, thu hút, phù hợp với nền tảng như Facebook, Instagram hoặc LinkedIn.', |
|
|
email_campaign: 'Email marketing chuyên nghiệp, có lời kêu gọi hành động rõ ràng.', |
|
|
blog_post: 'Bài viết blog chi tiết, cung cấp giá trị thông tin và phù hợp với SEO.', |
|
|
ad_copy: 'Quảng cáo ngắn gọn, thuyết phục, tập trung vào việc thúc đẩy hành động.' |
|
|
}; |
|
|
|
|
|
const prompt = ` |
|
|
Bạn là một chuyên gia sáng tạo nội dung marketing. Tạo một ${contentType.replace('_', ' ')} cho thương hiệu "${brandName}" với các yêu cầu sau: |
|
|
- **Đối tượng mục tiêu**: ${targetAudience}. |
|
|
- **Phong cách**: ${tone} (đảm bảo giọng điệu nhất quán và phù hợp). |
|
|
- **Mục tiêu chiến dịch**: ${campaignGoal}. |
|
|
- **Giọng điệu thương hiệu**: ${brandVoice}. |
|
|
- **Thông điệp chính**: ${keyMessages}. |
|
|
- **Độ dài**: ${lengthConstraints[contentLength]}. |
|
|
- **Mô tả loại nội dung**: ${contentTypeDescriptions[contentType]}. |
|
|
- **Yêu cầu bổ sung**: |
|
|
- Nội dung phải sáng tạo, thu hút, và phù hợp với bản sắc thương hiệu. |
|
|
- Sử dụng ngôn ngữ tự nhiên, gần gũi với người dùng Việt Nam. |
|
|
- Tránh lặp lại từ ngữ hoặc ý tưởng một cách không cần thiết. |
|
|
- Nếu là bài đăng mạng xã hội hoặc quảng cáo, hãy thêm lời kêu gọi hành động mạnh mẽ. |
|
|
- Đảm bảo nội dung đúng ngữ pháp và không có lỗi chính tả. |
|
|
- **Ví dụ** (nếu phù hợp): |
|
|
- Bài đăng mạng xã hội: "Khám phá bộ sưu tập mới từ [Thương hiệu]! 🌟 Sản phẩm bền vững, thời thượng, dành riêng cho bạn. Mua ngay hôm nay!" |
|
|
- Email: "Kính gửi [Khách hàng], chúng tôi mang đến ưu đãi đặc biệt dành cho bạn! Nhấn vào đây để nhận ngay 20% giảm giá." |
|
|
Tạo nội dung bằng tiếng Việt, đảm bảo chất lượng cao và phù hợp với các yêu cầu trên. |
|
|
`; |
|
|
|
|
|
const generateButton = document.getElementById('generateButton'); |
|
|
const generateText = document.getElementById('generateText'); |
|
|
const loadingSpinner = document.getElementById('loadingSpinner'); |
|
|
generateButton.disabled = true; |
|
|
generateText.textContent = 'Đang tạo...'; |
|
|
loadingSpinner.classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/generate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ prompt }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
const outputDiv = document.getElementById('output'); |
|
|
const contentOutput = document.getElementById('contentOutput'); |
|
|
|
|
|
if (data.content) { |
|
|
currentContent = data.content; |
|
|
contentOutput.textContent = currentContent; |
|
|
outputDiv.classList.remove('hidden'); |
|
|
} else { |
|
|
contentOutput.textContent = 'Lỗi khi tạo nội dung. Vui lòng thử lại.'; |
|
|
outputDiv.classList.remove('hidden'); |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Lỗi:', error); |
|
|
document.getElementById('contentOutput').textContent = 'Lỗi kết nối với máy chủ.'; |
|
|
document.getElementById('output').classList.remove('hidden'); |
|
|
} finally { |
|
|
generateButton.disabled = false; |
|
|
generateText.textContent = 'Tạo Nội Dung'; |
|
|
loadingSpinner.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('refineButton').addEventListener('click', async () => { |
|
|
const refineRequest = document.getElementById('refineRequest').value; |
|
|
if (!currentContent || !refineRequest) { |
|
|
alert('Vui lòng tạo nội dung trước và chọn yêu cầu tinh chỉnh.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const refinePrompt = ` |
|
|
Dưới đây là nội dung marketing đã được tạo: |
|
|
"${currentContent}" |
|
|
|
|
|
Vui lòng tinh chỉnh nội dung trên theo yêu cầu sau: ${refineRequest.replace('_', ' ')}. |
|
|
- Giữ nguyên bản sắc thương hiệu, đối tượng mục tiêu, và mục tiêu chiến dịch. |
|
|
- Đảm bảo nội dung vẫn bằng tiếng Việt, đúng ngữ pháp, và thu hút. |
|
|
- Nếu yêu cầu là "ngắn gọn hơn", giảm độ dài nhưng giữ thông điệp cốt lõi. |
|
|
- Nếu yêu cầu là "sáng tạo hơn", thêm yếu tố độc đáo hoặc cách diễn đạt mới mẻ. |
|
|
- Nếu yêu cầu là "thuyết phục hơn", tăng cường lời kêu gọi hành động hoặc lập luận mạnh mẽ. |
|
|
- Nếu yêu cầu là "cảm xúc hơn", thêm yếu tố cảm xúc để kết nối với người đọc. |
|
|
`; |
|
|
|
|
|
const refineButton = document.getElementById('refineButton'); |
|
|
const refineText = document.getElementById('refineText'); |
|
|
const refineSpinner = document.getElementById('refineSpinner'); |
|
|
refineButton.disabled = true; |
|
|
refineText.textContent = 'Đang tinh chỉnh...'; |
|
|
refineSpinner.classList.remove('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/api/generate', { |
|
|
method: 'POST', |
|
|
headers: { 'Content-Type': 'application/json' }, |
|
|
body: JSON.stringify({ prompt: refinePrompt }) |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
const contentOutput = document.getElementById('contentOutput'); |
|
|
|
|
|
if (data.content) { |
|
|
currentContent = data.content; |
|
|
contentOutput.textContent = currentContent; |
|
|
} else { |
|
|
contentOutput.textContent = 'Lỗi khi tinh chỉnh nội dung. Vui lòng thử lại.'; |
|
|
} |
|
|
} catch (error) { |
|
|
console.error('Lỗi:', error); |
|
|
document.getElementById('contentOutput').textContent = 'Lỗi kết nối với máy chủ.'; |
|
|
} finally { |
|
|
refineButton.disabled = false; |
|
|
refineText.textContent = 'Tinh Chỉnh Nội Dung'; |
|
|
refineSpinner.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('copyButton').addEventListener('click', () => { |
|
|
const content = document.getElementById('contentOutput').textContent; |
|
|
navigator.clipboard.writeText(content).then(() => { |
|
|
const copyButton = document.getElementById('copyButton'); |
|
|
copyButton.textContent = 'Đã Sao Chép!'; |
|
|
setTimeout(() => { copyButton.textContent = 'Sao Chép'; }, 2000); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
