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

# Tailwind CSS và các gói liên quan
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Sentry giám sát lỗi
npm install @sentry/nextjs

# Axios và OAuth
npm install axios react-google-login

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

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

import axios from 'axios';

export const generateImage = async (prompt) => {
  // Thay url và tham số phù hợp với API của bạn
  const response = await axios.post('https://api.example.com/generate', { prompt });
  return response.data;
};

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' });
  }
}

// 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ả hình ảnh..." 
        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>
  );
}

// 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 NSFW được tạo" className="max-w-full rounded shadow-lg" />
    </div>
  );
}

// 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('Lỗi tạo ảnh:', 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">NSFW AI Image Generator</h1>
      <PromptForm onSubmit={handleGenerateImage} />
      {loading ? (
        <div className="flex justify-center mt-6">
          <p>Đang tạo ảnh...</p>
        </div>
      ) : (
        <ImageDisplay imageUrl={imageUrl} />
      )}
    </div>
  );
}

// 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>
  );
}

// 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,
});