DEV Community

ficav
ficav

Posted on

2

Building an NSFW AI Image Generator with Next.js and Tailwind CSS

#nextjs #tailwindcss #typescript #webdev

Building an NSFW AI Image Generator with Next.js and Tailwind CSS

Creating an AI image generator that can handle NSFW (Not Safe For Work) content is an exciting challenge that combines cutting-edge technologies. In this tutorial, we'll walk through building an NSFW AI image generator using Next.js, TypeScript, and Tailwind CSS. We'll cover setting up the project, integrating the UI library, and handling AI-generated images securely.

Introduction

AI image generators have gained popularity for their ability to create images from textual descriptions. By leveraging frameworks like Next.js and libraries like Tailwind CSS, we can build a responsive and performant web application. In this tutorial, we'll focus on:

  • Setting up a Next.js project with TypeScript
  • Integrating Tailwind CSS for styling
  • Building the user interface for input and image display
  • Implementing the logic to handle AI image generation, including NSFW content
  • Deploying the application

Let's get started!

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js (>= 14.x)
  • npm or yarn package manager

Basic knowledge of React and TypeScript is also recommended.

1. Setting Up the Project with Next.js and TypeScript

First, we'll initialize a new Next.js project with TypeScript support.

Initialize the Project

Run the following command to create a new Next.js app:

npx create-next-app@latest nsfw-ai-image-generator --typescript
Enter fullscreen mode Exit fullscreen mode

This command sets up a new Next.js project named nsfw-ai-image-generator with TypeScript configuration.

Project Structure

The project structure should look like this:

nsfw-ai-image-generator/
├── pages/
│   ├── _app.tsx
│   ├── index.tsx
├── public/
├── styles/
│   └── globals.css
├── tsconfig.json
├── package.json
Enter fullscreen mode Exit fullscreen mode

2. Integrating Tailwind CSS

Next, we'll add Tailwind CSS to style our application.

Install Tailwind CSS

Run the following command to install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
Enter fullscreen mode Exit fullscreen mode

Initialize Tailwind Configuration

Generate the Tailwind and PostCSS configuration files:

npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Configure Tailwind

Modify tailwind.config.js to specify the paths to all of your template files:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

Include Tailwind in CSS

Add the Tailwind directives to styles/globals.css:

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

3. Building the NSFW AI Image Generator UI

Now, let's build the user interface for our application.

Creating the Input Form

Open pages/index.tsx and replace its content with the following:

import { useState } from 'react';

const Home = () => {
  const [prompt, setPrompt] = useState('');
  const [imageSrc, setImageSrc] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState('');

  const handleGenerateImage = async () => {
    setIsLoading(true);
    setError('');
    try {
      const response = await fetch('/api/generate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ prompt }),
      });

      if (!response.ok) throw new Error('Image generation failed');

      const { imageUrl, isNSFW } = await response.json();

      if (isNSFW) {
        setError('NSFW content detected');
        return;
      }

      setImageSrc(imageUrl);
    } catch (err) {
      setError(err.message || 'Failed to generate image');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-gray-100 py-8 px-4">
      <div className="max-w-2xl mx-auto">
        <h1 className="text-4xl font-bold text-center mb-8">
          NSFW AI Image Generator
        </h1>

        <div className="bg-white rounded-lg shadow-md p-6">
          <div className="flex gap-4 mb-4">
            <input
              type="text"
              value={prompt}
              onChange={(e) => setPrompt(e.target.value)}
              placeholder="Enter your prompt..."
              className="flex-1 p-2 border rounded-md"
            />
            <button
              onClick={handleGenerateImage}
              disabled={isLoading}
              className="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700 disabled:opacity-50"
            >
              {isLoading ? 'Generating...' : 'Generate'}
            </button>
          </div>

          {error && (
            <div className="text-red-500 mb-4">{error}</div>
          )}

          {imageSrc && (
            <div className="mt-6">
              <h2 className="text-xl font-semibold mb-4">Generated Image:</h2>
              <img 
                src={imageSrc} 
                alt="Generated" 
                className="w-full h-auto rounded-lg shadow-md"
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default Home;
Enter fullscreen mode Exit fullscreen mode

4. Implementing AI Image Generation

We'll use the Replicate API for Stable Diffusion implementation. Create a new API route at pages/api/generate.ts:

import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { prompt } = req.body;

  try {
    const response = await fetch('https://api.replicate.com/v1/predictions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Token ${process.env.REPLICATE_API_TOKEN}`,
      },
      body: JSON.stringify({
        version: 'a9758cbfbd5f3c2094457d996681af52552901775aa2d6dd0b17fd15df959bef',
        input: {
          prompt: prompt,
          width: 512,
          height: 512,
          num_outputs: 1,
        },
      }),
    });

    const prediction = await response.json();

    // Add NSFW detection logic here
    const isNSFW = await checkNSFW(prediction.output[0]);

    res.status(200).json({ 
      imageUrl: prediction.output[0], 
      isNSFW 
    });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

// Example NSFW detection using NSFWJS
async function checkNSFW(imageUrl: string): Promise<boolean> {
  const tf = await import('@tensorflow/tfjs');
  const nsfwjs = await import('nsfwjs');

  const model = await nsfwjs.load();
  const image = await fetch(imageUrl);
  const buffer = await image.arrayBuffer();
  const img = tf.node.decodeImage(new Uint8Array(buffer), 3);
  const predictions = await model.classify(img);

  return predictions.some(p => 
    ['Hentai', 'Porn', 'Sexy'].includes(p.className)
  );
}
Enter fullscreen mode Exit fullscreen mode

5. Handling NSFW Content Safely

Implement multiple layers of safety:

  1. Input Validation: Filter explicit prompts using regex patterns
  2. Output Filtering: Use NSFWJS for image classification
  3. Content Moderation: Integrate third-party APIs like Sightengine

Add input validation middleware to your API route:

function validatePrompt(prompt: string): boolean {
  const blockedTerms = [
    'nudity', 'explicit', 'porn', 
    'sexual', 'nsfw', 'adult'
  ];
  return !new RegExp(blockedTerms.join('|'), 'i').test(prompt);
}
Enter fullscreen mode Exit fullscreen mode

6. Deployment

Deploy to Vercel with proper environment variables:

  1. Create .env.local file: 
REPLICATE_API_TOKEN=your_api_token_here
Enter fullscreen mode Exit fullscreen mode
  1. Configure in vercel.json: 
{
  "build": {
    "env": {
      "REPLICATE_API_TOKEN": "@replicate-api-token"
    }
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Run deployment: 
vercel deploy --prod
Enter fullscreen mode Exit fullscreen mode

Conclusion

In this tutorial, we've built an NSFW-aware AI image generator using:

  • Next.js for server-side logic and API routes
  • Tailwind CSS for modern styling
  • Stable Diffusion for image generation
  • TensorFlow.js for NSFW classification

Remember to implement additional safety measures and consider ethical implications before deploying such applications to production. Always comply with your local regulations and AI service providers' terms of service.

profile
Sentry
 Promoted

Sentry image

Make it make sense

Only get the information you need to fix your code that’s broken with Sentry.

Start debugging →

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

profile
DevCycleHQ
 Promoted

DevCycle image

Ship Faster, Stay Flexible.

DevCycle is the first feature flag platform with OpenFeature built-in to every open source SDK, designed to help developers ship faster while avoiding vendor-lock in.

Start shipping