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

# Tailwind CSS và các công cụ phụ trợ
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Sentry cho theo dõi lỗi
npm install @sentry/nextjs

# Các thư viện khác
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 bổ sung nếu có
};

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

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

export const generateImage = async (prompt) => {
  // Thay bằng URL thực tế và tham số API của bạn
  const response = await axios.post('https://api.example.com/generate', { prompt });
  return response.data;
};

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

// 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="Enter your prompt..."
        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">
        Generate Image
      </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="Generated NSFW Content" 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('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">NSFW AI Image Generator</h1>
      <PromptForm onSubmit={handleGenerateImage} />
      {loading ? (
        <div className="flex justify-center mt-6">
          <p>Generating image...</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);
    // Gửi token lên backend để xác minh nếu cần
    onLogin(response);
  };

  return (
    <div className="flex justify-center my-6">
      <GoogleLogin
        clientId="YOUR_GOOGLE_CLIENT_ID"
        buttonText="Login with 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,
});