Tự Tay Xây 'Cỗ Máy' Tạo Ảnh AI NSFW Với Next.js, React & Tailwind CSS: Hướng Dẫn Siêu Vui Nhộn!

Lê Lân

16/06/2025

Xây Dựng Trình Tạo Ảnh AI NSFW Với Next.js, React Và Tailwind CSS

Mở Đầu

Việc tạo ra các hình ảnh từ văn bản đã trở thành một xu hướng nổi bật với sự phát triển vượt bậc của trí tuệ nhân tạo. Ứng dụng AI trong lĩnh vực này không chỉ đem lại trải nghiệm sáng tạo mà còn mở ra vô vàn cơ hội mới cho các nhà phát triển.

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách xây dựng một trình tạo ảnh AI NSFW (Not Safe For Work) sử dụng các công nghệ hiện đại bao gồm Next.js, React và Tailwind CSS. Mục tiêu là tạo ra một ứng dụng web hiệu quả, linh hoạt và có khả năng mở rộng tốt, đồng thời đảm bảo tuân thủ các quy định pháp lý và đạo đức khi làm việc với nội dung NSFW.

Chúng ta sẽ đi qua các bước từ khởi tạo dự án, tích hợp API tạo ảnh AI, xây dựng giao diện người dùng, đến việc bảo mật và giám sát lỗi với các công cụ chuyên biệt.

Các Công Nghệ Sử Dụng

Next.js

Một framework React mạnh mẽ giúp hỗ trợ server-side rendering (SSR) và static site generation (SSG), cải thiện hiệu năng và SEO.

React

Thư viện JavaScript phổ biến để xây dựng giao diện người dùng theo dạng component, giúp tái sử dụng và quản lý trạng thái dễ dàng.

Tailwind CSS

Một framework CSS theo hướng utility-first, giúp thiết kế giao diện nhanh chóng và linh hoạt với các lớp tiện ích sẵn có.

Các Công Cụ Bổ Sung

Sentry: Nền tảng giám sát lỗi và hiệu năng ứng dụng.

OAuth Integration: Cho phép xác thực người dùng an toàn thông qua Google.

Axios: Thư viện HTTP client dùng để giao tiếp với API tạo ảnh AI.

Lưu ý quan trọng: Khi triển khai dự án với nội dung NSFW, bạn cần tuân thủ nghiêm ngặt các quy tắc pháp lý và đạo đức phù hợp.

Thiết Lập Dự Án

1. Khởi Tạo Ứng Dụng Next.js

Mở terminal và dùng lệnh sau để tạo một dự án mới:

npx create-next-app nsfw-image-generator
cd nsfw-image-generator

2. Cài Đặt Các Thư Viện Phụ Thuộc

Cài đặt Tailwind CSS cùng các công cụ hỗ trợ:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Cài đặt Sentry để giám sát lỗi:

npm install @sentry/nextjs

Và các thư viện khác như Axios và google-login:

npm install axios react-google-login

3. Cấu Hình Tailwind CSS

Thêm đường dẫn các file vào tailwind.config.js :

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // các cấu hình khác nếu có
}

Tạo file globals.css trong thư mục styles và thêm:

@tailwind base;
@tailwind components;
@tailwind utilities;

Xây Dựng Trình Tạo Ảnh AI NSFW

1. Triển Khai Backend AI

Sử dụng một API bên ngoài có khả năng tạo ảnh từ prompt văn bản hỗ trợ nội dung NSFW (nhớ đảm bảo tuân thủ luật pháp).

// lib/api.js
import axios from 'axios';

export const generateImage = async (prompt) => {
  const response = await axios.post('https://api.example.com/generate', { prompt });
  return response.data;
};

Tạo một API route serverless trên Next.js làm proxy:

// pages/api/generate-image.js
import { generateImage } from '../../lib/api';

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }
  const { prompt } = req.body;
  try {
    const { imageUrl } = await generateImage(prompt);
    res.status(200).json({ imageUrl });
  } catch (error) {
    console.error('Error generating image:', error);
    res.status(500).json({ error: 'Error generating image' });
  }
}

Việc sử dụng proxy API giúp bảo mật khoá API và kiểm soát lưu lượng gọi API trực tiếp từ frontend.

2. Tạo Các Thành Phần Giao Diện Người Dùng

a. Form Nhập Prompt

// components/PromptForm.js
import { useState } from 'react';

export default function PromptForm({ onSubmit }) {
  const [prompt, setPrompt] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!prompt.trim()) return;
    onSubmit(prompt);
  };

  return (
    <form onSubmit={handleSubmit} className="flex flex-col items-center w-full max-w-md mx-auto p-4">
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Nhập mô tả..."
        className="w-full p-2 border border-gray-300 rounded mb-4"
      />
      <button type="submit" className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded w-full">
        Tạo ảnh
      </button>
    </form>
  );
}

b. Hiển Thị Ảnh Đã Tạo

// components/ImageDisplay.js
export default function ImageDisplay({ imageUrl }) {
  if (!imageUrl) return null;

  return (
    <div className="flex justify-center mt-6">
      <img src={imageUrl} alt="Ảnh tạo bởi AI (NSFW)" className="max-w-full rounded shadow-lg" />
    </div>
  );
}

c. Kết Nối Trên Trang Chính

// pages/index.js
import { useState } from 'react';
import PromptForm from '../components/PromptForm';
import ImageDisplay from '../components/ImageDisplay';
import axios from 'axios';

export default function Home() {
  const [imageUrl, setImageUrl] = useState('');
  const [loading, setLoading] = useState(false);

  const handleGenerateImage = async (prompt) => {
    setLoading(true);
    try {
      const response = await axios.post('/api/generate-image', { prompt });
      setImageUrl(response.data.imageUrl);
    } catch (error) {
      console.error('Error generating image:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 py-10">
      <h1 className="text-4xl font-bold text-center mb-8">Trình Tạo Ảnh AI NSFW</h1>
      <PromptForm onSubmit={handleGenerateImage} />
      {loading ? (
        <div className="flex justify-center mt-6">
          <p>Đang tạo ảnh...</p>
        </div>
      ) : (
        <ImageDisplay imageUrl={imageUrl} />
      )}
    </div>
  );
}

3. Tích Hợp OAuth Cho Xác Thực Người Dùng

Cho phép người dùng đăng nhập qua Google để tăng cường bảo mật:

// components/Login.js
import React from 'react';
import { GoogleLogin } from 'react-google-login';

export default function Login({ onLogin }) {
  const responseGoogle = (response) => {
    console.log('Google login response:', response);
    onLogin(response);
  };

  return (
    <div className="flex justify-center my-6">
      <GoogleLogin
        clientId="YOUR_GOOGLE_CLIENT_ID"
        buttonText="Đăng nhập với Google"
        onSuccess={responseGoogle}
        onFailure={responseGoogle}
        cookiePolicy={'single_host_origin'}
      />
    </div>
  );
}

Bạn có thể sử dụng component này trong trang chính hoặc tạo trang riêng biệt cho xác thực.

4. Giám Sát Lỗi Với Sentry

Cài đặt và cấu hình Sentry để theo dõi và phân tích lỗi:

// sentry.client.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  tracesSampleRate: 1.0,
});

// sentry.server.config.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  tracesSampleRate: 1.0,
});