Spaces:

TDN-M
/

content

Runtime error

App Files Files Community

TDN-M commited on Jul 19, 2025

Commit

1284494

verified ·

1 Parent(s): dcf5e21

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +317 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,317 @@

+<!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>
+    <!-- User Requirements Form -->
+    <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>
+    <!-- Brand Knowledge Form (Collapsible) -->
+    <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>
+    <!-- Action Buttons -->
+    <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>
+    <!-- Output Section -->
+    <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 = '';
+    // Toggle Brand Section
+    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');
+    });
+    // Clear Form
+    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 = '';
+    });
+    // Generate Content
+    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');
+      }
+    });
+    // Refine Content
+    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');
+      }
+    });
+    // Copy to Clipboard
+    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>