| <!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> |
