DEV Community: ficav

Building a Next.js NSFW Text-to-Image AI Generator with React and Sentry

ficav — Thu, 01 May 2025 03:28:45 +0000

Building a Next.js NSFW Text-to-Image AI Generator with React and Sentry

In the ever-evolving world of AI and web development, creating applications that can generate images from text prompts is a fascinating challenge. In this article, we’ll explore how to build a text-to-image AI NSFW generator using Next.js, React, TypeScript, Tailwind CSS, and Sentry, with tracking via Facebook Pixel. We’ll cover project setup, Tailwind configuration, Sentry initialization, the core text-to-image API integration, NSFW moderation, frontend UI, error handling, performance monitoring, and deployment. Code snippets are provided throughout so you can follow along hands-on.

Introduction

Text-to-image generation has seen rapid progress thanks to powerful models such as OpenAI’s DALL·E series or Stability AI’s Stable Diffusion. By integrating these APIs into a modern web stack, you can give users the creative freedom to describe scenes, characters, or abstract concepts—and see them visualized. At the same time, responsible handling of potentially NSFW content is crucial. In this guide, we’ll show you how to:

Spin up a Next.js + TypeScript starter
Style with Tailwind CSS
Initialize Sentry for error and performance tracking
Call a text-to-image AI API
Run moderation on NSFW prompts and outputs
Add Facebook Pixel for analytics
Build a responsive React UI
Deploy the finished app to Vercel

Let’s get started!

Technologies Used

Next.js – Server-side rendering, API routes, and static exports.
React – Component-driven UI.
TypeScript – Strong typing for reliability.
Tailwind CSS – Utility-first styling for rapid layout.
Sentry – Error tracking & performance monitoring.
Facebook Pixel – User interaction and conversion analytics.
OpenAI / Stability AI API – Backend text-to-image endpoint.
NSFW Moderation API – Built-in or third-party endpoint to filter content.

Setting Up the Next.js Project

Open your terminal and run:

npx create-next-app@latest --ts nsfw-text-to-image-generator
cd nsfw-text-to-image-generator

Install core dependencies:

npm install react react-dom next @sentry/nextjs tailwindcss postcss autoprefixer

Initialize Tailwind CSS:

npx tailwindcss init -p

Configuring Tailwind CSS

Edit tailwind.config.js to include your Next.js pages and components:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to styles/globals.css:

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

Initializing Sentry

Sentry helps capture exceptions and performance metrics across both server and client.

Run the Sentry init:

   npx @sentry/wizard -i nextjs

This will install @sentry/nextjs and generate sentry.server.config.js and sentry.client.config.js.

Configure your DSN in .env.local:

   NEXT_PUBLIC_SENTRY_DSN=https://yourPublicDsn@sentry.io/1234567
   SENTRY_ORG=your-org
   SENTRY_PROJECT=your-project

Wrap your application in Sentry’s error boundary. In pages/_app.tsx:

   import { AppProps } from 'next/app';
   import { ErrorBoundary } from '@sentry/react';
   import '@/styles/globals.css';

   function MyApp({ Component, pageProps }: AppProps) {
     return (
       <ErrorBoundary fallback={<p>Something went wrong.</p>}>
         <Component {...pageProps} />
       </ErrorBoundary>
     );
   }

   export default MyApp;

Environment Variables

Create .env.local at the project root:

NEXT_PUBLIC_OPENAI_API_KEY=sk-xxx…
NEXT_PUBLIC_SENTRY_DSN=https://…
NEXT_PUBLIC_FACEBOOK_PIXEL_ID=1234567890
MODERATION_API_KEY=mod-yyy…

Restart your dev server after changing env vars.

Building the Text-to-Image API Route

In pages/api/generate.ts, we’ll call the AI image API and run content moderation:

import type { NextApiRequest, NextApiResponse } from 'next';
import Sentry from '@sentry/nextjs';

const OPENAI_API_KEY = process.env.NEXT_PUBLIC_OPENAI_API_KEY!;
const MOD_API_KEY = process.env.MODERATION_API_KEY!;

type Data = { imageUrl?: string; error?: string };

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  Sentry.captureMessage('API route invoked', 'info');
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { prompt } = req.body;
  if (!prompt) {
    return res.status(400).json({ error: 'Prompt is required' });
  }

  // 1. Moderate the prompt
  const modResponse = await fetch('https://api.moderation.example/v1/check', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${MOD_API_KEY}`,
    },
    body: JSON.stringify({ text: prompt }),
  });
  const modResult = await modResponse.json();
  if (modResult.flagged) {
    return res.status(403).json({ error: 'Prompt flagged as NSFW' });
  }

  try {
    // 2. Generate the image
    const aiRes = await fetch('https://api.openai.com/v1/images/generations', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${OPENAI_API_KEY}`,
      },
      body: JSON.stringify({
        prompt,
        n: 1,
        size: '512x512',
      }),
    });
    const aiData = await aiRes.json();
    const imageUrl = aiData.data[0].url;

    // 3. Optionally moderate the resulting image URL
    // ... (similar to above, using an image moderation endpoint)

    res.status(200).json({ imageUrl });
  } catch (err) {
    Sentry.captureException(err);
    res.status(500).json({ error: 'Failed to generate image' });
  }
}

Handling NSFW Content

Prompt Moderation: Check the user’s text before sending it to the AI.
Image Moderation: After generation, you can run another check on the image (e.g., via a pixel-based NSFW detection API).
User Feedback: If flagged, return a friendly error like “Your prompt contained disallowed content.”

Integrating Facebook Pixel

In pages/_document.tsx, insert the Pixel snippet in the <Head>:

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Facebook Pixel */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '${process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID}');
              fbq('track', 'PageView');
            `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

Track custom events when the user generates or downloads an image:

import Router from 'next/router';

export function trackImageGenerated() {
  if (typeof window !== 'undefined' && window.fbq) {
    window.fbq('track', 'GenerateImagе');
  }
}

Router.events.on('routeChangeComplete', () => {
  if (Router.pathname === '/result') {
    trackImageGenerated();
  }
});

Building the Frontend UI

Create a simple form component in components/PromptForm.tsx:

import { useState } from 'react';
import { trackImageGenerated } from '@/lib/facebook';

export default function PromptForm() {
  const [prompt, setPrompt] = useState('');
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setError(null);
    setImageUrl(null);

    const res = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    setLoading(false);

    if (data.error) {
      setError(data.error);
    } else if (data.imageUrl) {
      setImageUrl(data.imageUrl);
      trackImageGenerated();
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <textarea
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
        placeholder="Describe your image..."
        className="w-full p-3 border rounded"
        rows={4}
      />
      <button
        type="submit"
        disabled={loading}
        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
      >
        {loading ? 'Generating…' : 'Generate Image'}
      </button>
      {error && <p className="text-red-500">{error}</p>}
      {imageUrl && (
        <div className="mt-4">
          <img src={imageUrl} alt="Generated" className="rounded shadow" />
        </div>
      )}
    </form>
  );
}

Include this in pages/index.tsx:

import PromptForm from '@/components/PromptForm';

export default function Home() {
  return (
    <main className="min-h-screen flex items-center justify-center p-6">
      <div className="max-w-lg w-full">
        <h1 className="text-3xl font-bold mb-6">
          NSFW Text-to-Image Generator
        </h1>
        <PromptForm />
      </div>
    </main>
  );
}

Error Handling & Performance Monitoring

All unhandled exceptions in API routes and React components are captured by Sentry.
Use Sentry’s Performance tab to inspect slow API calls or React render bottlenecks.
In development, set SENTRY_DEBUG=true to see verbose logs.

Deployment to Vercel

Push your code to GitHub.
Import the repo in Vercel and set your environment variables in the Vercel dashboard.
Choose “Next.js” as the framework and click “Deploy.”

Vercel will handle SSR, API routes, and static assets out of the box.

Conclusion

You’ve now built a full-fledged NSFW-aware text-to-image AI generator with Next.js, React, TypeScript, Tailwind CSS, Sentry, and Facebook Pixel tracking. From secure prompt moderation and AI integration to error monitoring and analytics, this architecture provides a solid foundation for any AI-driven creative app. Feel free to extend it—for example, by adding user authentication, credit-based usage, or a gallery of saved images. Happy coding!

How to Build an NSFW AI Image Generator Using Next.js and React

ficav — Wed, 30 Apr 2025 03:17:34 +0000

How to Build an NSFW AI Image Generator Using Next.js and React

In the rapidly evolving field of artificial intelligence, image generation has become a fascinating area for developers. Building an NSFW AI image generator can be both an exciting and educational project, especially when leveraging modern web technologies like Next.js, React, and Tailwind CSS. In this tutorial, we'll walk through the steps to create your own NSFW AI image generator web application.

Prerequisites
Setting Up the Next.js Project
Integrating Tailwind CSS
Building the Image Generation Component
Handling NSFW Content Responsibly
Testing the Application
Conclusion
Resources

Prerequisites

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

Node.js (v12 or later)
npm or Yarn
Basic knowledge of React and Next.js
Familiarity with Tailwind CSS is a plus

Setting Up the Next.js Project

First, create a new Next.js project using the following command:

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

Navigate to the project directory:

cd nsfw-ai-image-generator

Integrating Tailwind CSS

Tailwind CSS is a utility-first CSS framework that makes styling easy and efficient.

Install Tailwind CSS and its dependencies:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js by setting the content paths:

// tailwind.config.js
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Import Tailwind CSS in your main CSS file:

/* styles/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Make sure to import the global CSS in pages/_app.js:

// pages/_app.js
import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Building the Image Generation Component

We'll create a simple interface where users can input text prompts, and the application will generate images based on those prompts.

Creating the Input Form

Create a new component components/ImageGenerator.js:

// components/ImageGenerator.js
import { useState } from 'react'

export default function ImageGenerator() {
  const [prompt, setPrompt] = useState('')
  const [imageUrl, setImageUrl] = useState('')

  const handleGenerateImage = async () => {
    // Call your AI image generation API here
    // For the sake of this example, we'll mock the response
    const response = {
      imageUrl: 'https://via.placeholder.com/512',
    }
    setImageUrl(response.imageUrl)
  }

  return (
    <div className="max-w-xl mx-auto mt-10">
      <h1 className="text-2xl font-bold mb-4">NSFW AI Image Generator</h1>
      <textarea
        className="w-full p-2 border border-gray-300 rounded mb-4"
        rows="4"
        placeholder="Enter your text prompt..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <button
        onClick={handleGenerateImage}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        Generate Image
      </button>
      {imageUrl && (
        <div className="mt-6">
          <img src={imageUrl} alt="Generated" className="w-full h-auto" />
        </div>
      )}
    </div>
  )
}

Adding the Component to the Page

Update pages/index.js to include the ImageGenerator component:

// pages/index.js
import ImageGenerator from '../components/ImageGenerator'

export default function Home() {
  return (
    <div>
      <ImageGenerator />
    </div>
  )
}

Handling NSFW Content Responsibly

When building an NSFW AI image generator, it's crucial to handle potentially sensitive content responsibly. Implement content filtering to prevent the misuse of your application.

Using Content Moderation APIs

You can use content moderation APIs like Google's Cloud Vision SafeSearch or OpenAI's Moderation API to detect NSFW content.

Example using a hypothetical moderation function:

const handleGenerateImage = async () => {
  // Check if the prompt is appropriate
  const isSafe = await checkPromptForNSFW(prompt)
  if (!isSafe) {
    alert('Your prompt contains inappropriate content.')
    return
  }

  // Proceed with image generation
  // ...
}

Implementing `checkPromptForNSFW`

Create a function to check the prompt:

async function checkPromptForNSFW(prompt) {
  // Call your content moderation API
  // Return true if safe, false otherwise
  // For this example, we'll assume all content is safe
  return true
}

Testing the Application

Run your Next.js application:

npm run dev

Navigate to http://localhost:3000 to see your NSFW AI image generator in action.

Conclusion

Congratulations! You've built a basic NSFW AI image generator using Next.js, React, and Tailwind CSS. This project demonstrates how modern web technologies can be combined to create interactive AI applications. Remember to handle NSFW content responsibly by implementing proper content moderation.

Resources

How to Build an NSFW AI Image Generator Using Next.js and TensorFlow.js

ficav — Mon, 28 Apr 2025 03:34:51 +0000

How to Build an NSFW AI Image Generator Using Next.js and TensorFlow.js

Introduction

With the advancements in AI and web technologies, creating sophisticated applications like image generators has become more accessible. In this tutorial, we'll walk through building an NSFW (Not Safe For Work) AI image generator using Next.js and TensorFlow.js. We'll explore how to set up the project, integrate AI models, and generate images based on text prompts.

Disclaimer: This tutorial is for educational purposes only. Please ensure you comply with all local laws and regulations when working with NSFW content.

Prerequisites

Basic knowledge of JavaScript and React
Node.js installed on your machine
Familiarity with Next.js and TensorFlow.js is helpful but not required

Getting Started

Setting Up the Next.js Project

First, we'll create a new Next.js project using the following command:

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

Navigate to the project directory:

cd nsfw-ai-image-generator

Installing Dependencies

We'll need TensorFlow.js for running the AI models in the browser:

npm install @tensorflow/tfjs```
{% endraw %}
### Integrating an AI Model

For generating images, we'll use a pre-trained GAN (Generative Adversarial Network) model. However, since running heavy models in the browser is impractical, we'll set up a simple backend to handle the image generation.

#### Setting Up a Simple Backend

Create an {% raw %}`api`{% endraw %} directory in your project root:
{% raw %}

mkdir api




In `api/index.js`, set up an Express server:



```javascript
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const app = express();
const port = 3001;

app.use(cors());
app.use(bodyParser.json());

// Endpoint to handle image generation
app.post('/generate', (req, res) => {
  const prompt = req.body.prompt;
  // TODO: Integrate with your AI model here
  // For now, we'll return a placeholder response
  res.json({ imageUrl: 'https://via.placeholder.com/512' });
});

app.listen(port, () => {
  console.log(`Backend server listening at http://localhost:${port}`);
});

Install the necessary dependencies:

npm install express cors body-parser

Running the Backend Server

Start the backend server:

node api/index.js

Building the Frontend

In the Next.js project, we'll create a page where users can input text prompts and receive generated images.

Creating the Input Form

In pages/index.js, add the following code:

import React, { useState } from 'react';

export default function Home() {
  const [prompt, setPrompt] = useState('');
  const [imageUrl, setImageUrl] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    const response = await fetch('http://localhost:3001/generate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ prompt })
    });
    const data = await response.json();
    setImageUrl(data.imageUrl);
  };

  return (
    <div>
      <h1>NSFW AI Image Generator</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Enter your text prompt"
        />
        <button type="submit">Generate Image</button>
      </form>
      {imageUrl && (
        <div>
          <h2>Generated Image:</h2>
          <img src={imageUrl} alt="Generated" />
        </div>
      )}
    </div>
  );
}

Styling the Application

You can add CSS styles in styles/Home.module.css and import it into your index.js for better presentation.

Implementing Image Generation Logic

Note: Implementing an actual NSFW AI image generator involves using complex AI models and handling sensitive content responsibly. For the purpose of this tutorial, we're focusing on the structural setup.

If you have access to a suitable AI model, you can integrate it in the backend api/index.js where the TODO comment is placed. Ensure that you have the proper rights and comply with ethical guidelines when using AI models for NSFW content.

Testing the Application

Start the Next.js development server:

npm run dev

Navigate to http://localhost:3000 in your browser. You should see the input form for the NSFW AI image generator. Enter a text prompt and click "Generate Image" to see the result.

Conclusion

In this tutorial, we've built a basic structure for an AI NSFW image generator using Next.js and TensorFlow.js. While we've only set up a placeholder for the AI model, this foundation allows you to integrate complex AI functionalities into your web applications.

Remember to handle NSFW content responsibly and ensure compliance with all applicable laws and ethical guidelines.

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

ficav — Sun, 27 Apr 2025 03:12:25 +0000

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

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

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

Initialize Tailwind Configuration

Generate the Tailwind and PostCSS configuration files:

npx tailwindcss init -p

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: [],
}

Include Tailwind in CSS

Add the Tailwind directives to styles/globals.css:

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

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;

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

5. Handling NSFW Content Safely

Implement multiple layers of safety:

Input Validation: Filter explicit prompts using regex patterns
Output Filtering: Use NSFWJS for image classification
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);
}

6. Deployment

Deploy to Vercel with proper environment variables:

Create .env.local file:

REPLICATE_API_TOKEN=your_api_token_here

Configure in vercel.json:

{
  "build": {
    "env": {
      "REPLICATE_API_TOKEN": "@replicate-api-token"
    }
  }
}

Run deployment:

vercel deploy --prod

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.

Enhancing Images with AI: Building a Free Photo Extender Using Next.js and Tailwind CSS

ficav — Fri, 25 Apr 2025 03:21:11 +0000

Enhancing Images with AI: Building a Free Photo Extender Using Next.js and Tailwind CSS

In today's digital age, the demand for high-quality images is ever-increasing. Whether you're a developer, designer, or content creator, extending and enhancing images can be a valuable skill. In this tutorial, we'll walk through how to build a photo extender free application using Next.js and Tailwind CSS. We'll also leverage an AI service to perform the image extension, similar to the one found on Spark AI's AI Image Extender.

Introduction

Image outpainting, or extending the edges of an image, allows us to generate new content beyond the original boundaries of a photo. This can be incredibly useful for creating wallpapers, adapting images to different aspect ratios, or enhancing compositions.

In this guide, we'll build a simple web application that lets users upload an image and extends it using AI. We'll focus on:

Setting up a Next.js project
Styling with Tailwind CSS
Integrating with an AI image extension API
Handling file uploads and displaying results
Deploying the application

Prerequisites

Basic understanding of React and Next.js
Node.js installed on your machine
Familiarity with Tailwind CSS is a plus

Setting Up the Next.js Project

First, let's create a new Next.js application:

npx create-next-app photo-extender-free
cd photo-extender-free

Installing Tailwind CSS

We'll use Tailwind CSS for styling. Install Tailwind and its dependencies:

npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

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

Add Tailwind directives to your styles/globals.css:

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

Building the Upload Component

Create a new component at components/UploadImage.js:

import { useState } from 'react';

export default function UploadImage({ onImageUpload }) {
  const [preview, setPreview] = useState(null);

  const handleChange = (e) => {
    const file = e.target.files[0];
    if (!file) return;
    setPreview(URL.createObjectURL(file));
    onImageUpload(file);
  };

  return (
    <div className="flex flex-col items-center justify-center p-4 border-2 border-dashed rounded-lg">
      <input
        type="file"
        accept="image/*"
        onChange={handleChange}
        className="mb-4"
      />
      {preview && (
        <img
          src={preview}
          alt="Preview"
          className="max-w-xs max-h-64 object-contain"
        />
      )}
    </div>
  );
}

This component handles the file selection, creates a preview URL, and invokes a callback onImageUpload with the selected file.

Creating the Main Page

Next, update pages/index.js to include the upload component, call the API, and display the result:

import { useState } from 'react';
import UploadImage from '../components/UploadImage';

export default function Home() {
  const [file, setFile] = useState(null);
  const [extendedUrl, setExtendedUrl] = useState('');
  const [loading, setLoading] = useState(false);

  const handleUpload = (file) => {
    setFile(file);
    setExtendedUrl('');
  };

  const extendImage = async () => {
    if (!file) return;
    setLoading(true);
    const formData = new FormData();
    formData.append('image', file);

    const res = await fetch('/api/extend', {
      method: 'POST',
      body: formData,
    });

    const data = await res.json();
    setExtendedUrl(data.extendedImageUrl);
    setLoading(false);
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-3xl font-bold mb-6">Photo Extender Free</h1>
      <UploadImage onImageUpload={handleUpload} />
      <button
        onClick={extendImage}
        disabled={!file || loading}
        className="mt-4 px-6 py-2 bg-blue-600 text-white rounded-lg disabled:opacity-50"
      >
        {loading ? 'Extending...' : 'Extend Image'}
      </button>

      {extendedUrl && (
        <div className="mt-6">
          <h2 className="text-2xl font-semibold mb-2">Extended Image</h2>
          <img
            src={extendedUrl}
            alt="Extended Result"
            className="max-w-md rounded-lg shadow-lg"
          />
        </div>
      )}
    </div>
  );
}

Implementing the API Route

Create an API route at pages/api/extend.js. This route will receive the uploaded file, forward it to the AI service, and return the extended image URL.

import formidable from 'formidable';
import fs from 'fs';

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async function handler(req, res) {
  const form = new formidable.IncomingForm();
  form.parse(req, async (err, fields, files) => {
    if (err) return res.status(500).json({ error: 'Form parse error' });

    const imageFile = files.image;
    const buffer = fs.readFileSync(imageFile.filepath);

    // Call the AI API (replace with real endpoint and key)
    const apiRes = await fetch('https://api.sparkaipro.com/v1/image-extender', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/octet-stream',
        'Authorization': `Bearer ${process.env.SPARKAI_API_KEY}`,
      },
      body: buffer,
    });

    if (!apiRes.ok) {
      const errMsg = await apiRes.text();
      return res.status(500).json({ error: errMsg });
    }

    const result = await apiRes.json();
    // Assuming the API returns { extendedImageUrl: string }
    res.status(200).json({ extendedImageUrl: result.extendedImageUrl });
  });
}

Be sure to set your SPARKAI_API_KEY in a .env.local file:

SPARKAI_API_KEY=your_api_key_here

Styling with Tailwind CSS

We've already used Tailwind utility classes throughout our components. Feel free to customize the design by:

Adjusting the color palette in tailwind.config.js
Adding custom spacing, fonts, or shadows
Using plugins like @tailwindcss/forms for better form controls

Testing the Application

Run the development server:

npm run dev

Navigate to http://localhost:3000. Upload an image, click Extend Image, and see the magic happen!

Deploying to Vercel

To share your application:

Push your code to a GitHub repository.
Log in to Vercel and import your repo.
Add the SPARKAI_API_KEY environment variable in Vercel’s dashboard.
Deploy — Vercel will handle building and hosting.

Your photo extender will be live at a Vercel subdomain, ready for users to enhance images for free.

Conclusion

We’ve built a fully functional photo extender free application using Next.js and Tailwind CSS, powered by an AI image extension API. You can now extend images beyond their original borders, perfect for creative projects, design mockups, and more. Feel free to enhance this base with additional features like:

Batch processing multiple images
Custom aspect ratio controls
User authentication and history tracking

Happy coding and image extending! 🎨

Building an AI Image Extender with Next.js: Enhancing Images Using AI and React

ficav — Wed, 23 Apr 2025 03:30:00 +0000

Summary

In this guide, we’ll walk through building an AI Image Extender—a tool that takes an input image, uses AI-based outpainting to expand its canvas, and returns an enhanced result—all within a Next.js + React application. You’ll learn how to scaffold a Next.js project, integrate Tailwind CSS for styling, build a user-friendly upload interface, implement a serverless API route to handle AI calls, connect to your chosen AI outpainting service, and deploy the finished app. We’ll also cover error handling, loading states, and monitoring with Sentry and Google Analytics so you have a production-ready template for your own AI-driven image tools.

Technology Stack

Next.js (v13+) Provides file-based routing, built-in API routes, and server-side rendering / static optimization.
React For composing interactive UI components.
Tailwind CSS Utility-first, low-bundle-size styling.
AI Outpainting API Could be OpenAI’s image APIs, Stability AI, or a custom model endpoint.
Sentry For runtime error tracking.
Google Analytics (or GA4) To measure user engagement and API usage.
Vercel (or Netlify) Recommended for zero-config deployment of Next.js projects.

1. Setting Up a Next.js Project

First, scaffold:

npx create-next-app@latest ai-image-extender
cd ai-image-extender

Choose “App Router” when prompted (or stick with pages/ if you prefer). You now have:

/app       ← (if using App Router)
/pages    ← (if using Pages Router)
public/
/styles/
/next.config.js
package.json

All API routes will go under /pages/api/extend.js (or /app/api/extend/route.js).

2. Adding Tailwind CSS for Styling

Install Tailwind and its peers:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}", 
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: { extend: {} },
  plugins: [],
};

Import Tailwind into styles/globals.css:

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

Now you can use classes like p-4, rounded-2xl, and shadow-lg throughout.

3. Building the User Interface with React

Create a component to handle file uploads, previewing, and triggering the extend action.

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

export default function ImageUploader() {
  const [file, setFile] = useState(null);
  const [previewUrl, setPreviewUrl] = useState('');
  const [extendedUrl, setExtendedUrl] = useState('');
  const [loading, setLoading] = useState(false);

  const handleUpload = (e) => {
    const chosen = e.target.files[0];
    setFile(chosen);
    setPreviewUrl(URL.createObjectURL(chosen));
    setExtendedUrl('');
  };

  const handleExtend = async () => {
    if (!file) return;
    setLoading(true);
    const form = new FormData();
    form.append('image', file);

    try {
      const res = await fetch('/api/extend', { method: 'POST', body: form });
      const { extendedImageUrl } = await res.json();
      setExtendedUrl(extendedImageUrl);
    } catch (err) {
      console.error(err);
      alert('Failed to extend image. Please try again.');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="max-w-md mx-auto space-y-4 p-6 bg-white rounded-2xl shadow-lg">
      <input type="file" accept="image/*" onChange={handleUpload} />
      {previewUrl && (
        <img src={previewUrl} alt="Preview" className="rounded-xl" />
      )}
      <button
        onClick={handleExtend}
        disabled={!file || loading}
        className="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50"
      >
        {loading ? 'Extending…' : 'Extend Image'}
      </button>
      {extendedUrl && (
        <img src={extendedUrl} alt="Extended" className="rounded-xl mt-4" />
      )}
    </div>
  );
}

Then import this into your page (e.g. pages/index.js):

import ImageUploader from '../components/ImageUploader';

export default function Home() {
  return (
    <main className="min-h-screen bg-gray-50 flex items-center justify-center">
      <ImageUploader />
    </main>
  );
}

4. Implementing the AI Outpainting Backend

Next.js API route to receive the upload, forward it to the AI service, and return the result.

// pages/api/extend.js
import formidable from 'formidable';
import fs from 'fs';
import fetch from 'node-fetch';

export const config = { api: { bodyParser: false } };

export default async function handler(req, res) {
  if (req.method !== 'POST') return res.status(405).end();

  // Parse incoming form
  const data = await new Promise((resolve, reject) => {
    const form = new formidable.IncomingForm();
    form.parse(req, (err, fields, files) => {
      if (err) reject(err);
      else resolve(files.image);
    });
  });

  const imageBuffer = fs.readFileSync(data.filepath);

  // Call AI outpainting endpoint (example)
  const aiRes = await fetch('https://api.example.com/v1/outpaint', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${process.env.AI_API_KEY}`
    },
    body: imageBuffer
  });
  const blob = await aiRes.blob();

  // Convert to base64 for quick demo, or upload to storage
  const arrayBuffer = await blob.arrayBuffer();
  const base64 = Buffer.from(arrayBuffer).toString('base64');
  const mime = blob.type; // e.g. "image/png"
  const extendedImageUrl = `data:${mime};base64,${base64}`;

  return res.status(200).json({ extendedImageUrl });
}

Notes

Use streaming or upload to S3/Cloudinary in production instead of data URLs.
Protect your API key via process.env and Vercel’s secret management.

5. Monitoring & Analytics

Sentry

Install and initialize in pages/_app.js (or App Router’s layout):

npm install @sentry/nextjs

// sentry.server.config.js & sentry.client.config.js as per docs
// pages/_app.js
import * as Sentry from '@sentry/nextjs';

Sentry.init({ dsn: process.env.SENTRY_DSN });

Google Analytics (GA4)

Add the tag snippet in pages/_document.js or via Next.js’s built-in next/script:

// pages/_document.js
import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        {/* GA4 snippet */}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Track pageviews and button clicks with gtag.event() inside React handlers if desired.

6. Deployment

Push your repo to GitHub.
Connect your project to Vercel (https://vercel.com).
In Vercel’s dashboard, add your environment variables (AI_API_KEY, SENTRY_DSN, etc.).
Deploy! Vercel will detect Next.js and handle builds automatically.

Conclusion

You now have a fully functional AI Image Extender built with Next.js and React. This architecture scales: swap out the AI provider, enhance the UI with more controls (canvas crop, multiple directions), or integrate user accounts for saved images. With Tailwind for rapid styling, Next.js API routes for serverless scaling, and monitoring via Sentry/GA, you’re set to ship production-grade AI features on the web. Happy coding!

Building a Text-to-Image NSFW AI Image Generator with Next.js and Sentry

ficav — Tue, 15 Apr 2025 03:17:24 +0000

Building a Text-to-Image NSFW AI Image Generator with Next.js and Sentry

Introduction

In recent years, AI-powered text-to-image generators have gained significant traction, enabling developers to create applications that convert textual descriptions into visual representations. One interesting application is generating NSFW (Not Safe For Work) content, which, when used responsibly, can serve various purposes like artistic expression or content moderation testing.

In this tutorial, we'll explore how to build a text-to-image NSFW AI image generator using Next.js, integrate it with Sentry for error tracking, and leverage Webpack for module bundling. We will also discuss ethical considerations and best practices to ensure that our application runs smoothly in a production environment.

Technologies Used

Before diving in, let's overview the technologies we'll be using:

Next.js: A React framework that enables server-side rendering and static site generation, offering excellent performance and SEO benefits.
React: A JavaScript library for building user interfaces.
Webpack: A static module bundler for modern JavaScript applications.
Sentry: An error tracking and monitoring tool that helps developers identify and fix issues in real time.

These technologies were identified by analyzing the page source code of Spark AI's Text-to-Image NSFW Generator, which utilizes Next.js and integrates Sentry for error tracking.

Setting Up the Project

First, ensure you have Node.js and npm installed on your machine. Then, create a new Next.js project:

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

Installing Dependencies

We'll need additional packages for our application. Install the required dependencies:

npm install react react-dom next
npm install @sentry/nextjs

Then, set up Sentry for your Next.js project by running:

npx @sentry/wizard -i nextjs

Follow the prompts to complete the Sentry configuration.

Project Structure

Your project structure should look similar to this:

text-to-image-nsfw-generator/
├── pages/
│   ├── _app.js
│   ├── index.js
│   └── api/
│       └── generate-image.js
├── public/
├── styles/
├── .sentryclirc
├── next.config.js
└── ...

Building the Text-to-Image Feature

Integrating an AI API

To generate images from text, we'll need an AI service. For this tutorial, we'll assume the existence of an API endpoint /api/generate-image that accepts a text prompt and returns an image URL. In a real-world scenario, this endpoint can proxy requests to any third-party image generation service.

Creating the Input Form

In pages/index.js, create a form where users can input their text prompts. Below is the complete example code:

import { useState } from 'react';

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

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    try {
      const res = await fetch('/api/generate-image', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt }),
      });
      const data = await res.json();
      setImageUrl(data.imageUrl);
    } catch (error) {
      console.error('Error generating image:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>NSFW Text-to-Image Generator</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Enter your prompt..."
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          style={{ width: '300px', padding: '10px' }}
        />
        <button type="submit" style={{ marginLeft: '10px', padding: '10px 20px' }}>
          {loading ? 'Generating...' : 'Generate Image'}
        </button>
      </form>
      {imageUrl && (
        <div style={{ marginTop: '20px' }}>
          <img src={imageUrl} alt="Generated NSFW" style={{ maxWidth: '100%' }} />
        </div>
      )}
    </div>
  );
}

Implementing the API Endpoint

Create the API endpoint at pages/api/generate-image.js to handle the image generation request. In a production system, you would call your AI service here. For demonstration purposes, we return a placeholder image URL.

export default async function handler(req, res) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  const { prompt } = req.body;

  if (!prompt) {
    return res.status(400).json({ error: 'Prompt is required' });
  }

  try {
    // Integrate your AI image generation API here.
    // For demonstration, we'll use a placeholder image URL.
    const generatedImageUrl = 'https://via.placeholder.com/600x400.png?text=NSFW+Image';

    res.status(200).json({ imageUrl: generatedImageUrl });
  } catch (error) {
    // Capture error with Sentry if needed
    console.error('Error generating image:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

Handling NSFW Content and Ethical Considerations

When building and deploying an NSFW image generator, ethical and legal aspects must be carefully considered:

Content Filtering:

Implement mechanisms to filter out or flag content that may be harmful or exploitative. This might include integrating additional moderation APIs or manually reviewing generated content.
Watermarking:

Consider adding unobtrusive watermarks to generated images to indicate that the content was created by an AI, which may help prevent misuse or misattribution.
User Guidelines:

Establish clear usage policies and ensure that users are aware of acceptable use. This helps mitigate potential abuse of the NSFW generator.
Legal Compliance:

Ensure that your application complies with local laws and regulations concerning adult or NSFW content.

Integrating Error Tracking with Sentry

Sentry helps you track and diagnose production issues. After running the Sentry wizard, your project will have configuration files (e.g., sentry.client.config.js and sentry.server.config.js) and adjustments in your _app.js file.

A simple _app.js might look like:

import * as Sentry from '@sentry/nextjs';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

Sentry initialization and configuration should have been automatically set up by the wizard. Ensure you review your Sentry configuration files to adjust any settings such as release tracking or environment labels.

Customizing Webpack with Next.js

Next.js uses Webpack under the hood to bundle your application. If you need custom configuration (such as handling additional file types or optimizing performance), update your next.config.js:

module.exports = {
  webpack: (config, { isServer }) => {
    // Example: add custom plugins or modify loaders as needed
    // config.plugins.push(new YourCustomPlugin());
    return config;
  },
};

While this tutorial doesn’t include advanced modifications, understanding how to tweak Webpack can be beneficial for performance tuning and integrating unique assets.

Deployment and Best Practices

Deployment Platform:

Deploy your Next.js application using platforms like Vercel, which offer seamless integration, or choose other cloud providers such as AWS, Google Cloud, or DigitalOcean.
Environment Variables:

Ensure that sensitive keys, such as your Sentry DSN and any API keys for AI services, are stored securely using environment variables.
Monitoring and Logging:

Utilize Sentry and other logging mechanisms to monitor your app’s performance and promptly address errors in production.
Scaling Considerations:

If your service gains traction, consider optimizing serverless functions, using caching strategies, and load balancing to handle high traffic.

Conclusion

In this tutorial, we walked through building a text-to-image NSFW AI image generator with Next.js and Sentry. We covered:

Setting up a Next.js project and integrating essential technologies.
Creating a user-friendly interface to submit text prompts.
Implementing an API endpoint to handle the image generation process.
Integrating Sentry for error monitoring and logging.
Addressing NSFW content responsibly by discussing ethical considerations.
Customizing Webpack for potential production optimizations.
Deployment tips and best practices to ensure smooth operation in production.

This project serves as a foundation that you can extend with a real AI-powered image generation service, tighter content moderation systems, and additional features tailored to your needs. Always remember to use NSFW content generators responsibly and ethically.

Happy coding!

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

ficav — Fri, 11 Apr 2025 03:29:43 +0000

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

In this article, we'll explore how to build an NSFW AI text-to-image generator using Next.js, React, Tailwind CSS, and integrate it with an AI model. We'll also discuss how to handle NSFW (Not Safe For Work) content responsibly. Due to the sensitive nature of NSFW content, this guide emphasizes responsible content moderation strategies and thorough testing.

Introduction

AI-powered text-to-image generation has become increasingly popular, allowing users to transform textual descriptions into visual representations. Building an NSFW AI text-to-image generator presents unique challenges—especially regarding content moderation, user safety, and performance. In this guide, we’ll walk through each step from setting up the project to integrating an API for image generation and finally addressing NSFW handling.

Prerequisites

Before you start, make sure you have the following:

Basic knowledge of JavaScript and React.
Familiarity with the Next.js framework.
Understanding of Tailwind CSS for styling.
Node.js and npm installed on your machine.
An account or access to an AI model API for text-to-image generation (e.g., Stable Diffusion API, DALL·E API, etc.).

Technologies Used

Next.js: A React framework for building server-rendered applications.
React: A JavaScript library for building user interfaces.
Tailwind CSS: A utility-first CSS framework for rapid UI development.
Sentry: An error tracking and performance monitoring tool.
NextUI: A React UI library (optional for additional UI components).
AI Model API: A service for converting textual prompts into images.

Setting Up the Project

Initialize a New Next.js App

Create a new Next.js application by running:

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

Install Dependencies

Install Tailwind CSS and other necessary packages:

npm install tailwindcss@latest @sentry/nextjs@latest nextui

Initialize Tailwind CSS with the following command:

npx tailwindcss init -p

Configure Tailwind CSS

Update the tailwind.config.js file with the paths to your pages and components so that Tailwind can purge unused styles in production. Your configuration should look similar to:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

Ensure you also include Tailwind’s directives in your styles/globals.css file:

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

Creating the User Interface

Build the Layout

You can use NextUI or custom Tailwind CSS components to create a clean and responsive interface. For example, in your pages/index.js, you might build a simple layout with a text input for the prompt and a button to trigger the image generation:

import { useState } from 'react';

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

  const generateImage = async () => {
    setLoading(true);
    // Call your backend API to generate image
    const res = await fetch('/api/generate-image', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ prompt }),
    });
    const data = await res.json();
    setImageUrl(data.imageUrl);
    setLoading(false);
  };

  return (
    <div className="min-h-screen flex flex-col items-center justify-center bg-gray-100">
      <h1 className="text-3xl font-bold mb-4">NSFW AI Text-to-Image Generator</h1>
      <textarea
        className="w-80 p-2 border border-gray-300 rounded mb-4"
        placeholder="Enter your text prompt..."
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <button
        className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700"
        onClick={generateImage}
        disabled={loading}
      >
        {loading ? 'Generating...' : 'Generate Image'}
      </button>
      {imageUrl && (
        <div className="mt-4">
          <img src={imageUrl} alt="Generated" className="max-w-xs rounded shadow"/>
        </div>
      )}
    </div>
  );
}

This code sets up a basic interface: a heading, a prompt input area, a button to generate the image, and a container to display the generated image.

Integrating the AI Model API

Serverless API Route

Create an API route in Next.js to handle requests from the frontend. For example, in pages/api/generate-image.js:

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 {
    // Replace the URL and headers with those required by your AI model provider
    const response = await fetch('https://api.example.com/v1/generate-image', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.AI_API_KEY}`,
      },
      body: JSON.stringify({ prompt }),
    });
    const data = await response.json();

    // Optionally, verify the response and handle errors from the AI service
    if (!data || !data.imageUrl) {
      throw new Error('No image was generated');
    }

    return res.status(200).json({ imageUrl: data.imageUrl });
  } catch (error) {
    console.error('Error generating image:', error);
    // Optionally record the error with Sentry here
    return res.status(500).json({ error: 'Failed to generate image' });
  }
}

Remember to configure your API key and other sensitive variables in a .env.local file and add it to your .gitignore.

Handling NSFW Content Responsibly

User Warnings and Disclaimers

Given the NSFW nature of the content, it’s important to display warnings and obtain user consent. Consider adding a disclaimer modal before allowing users to generate or view NSFW images. For example, you can create a simple modal component that appears on the first visit or until the user agrees.

Content Moderation and Filtering

Implement safeguards such as:

NSFW Filters: Integrate with image classification models to detect overly explicit content. If a generated image surpasses a safety threshold, you can blur the image or display a warning.
User Reporting: Allow users to flag inappropriate content for review.
Usage Policies: Provide clear guidelines within your application regarding acceptable usage, and include terms of service or a dedicated NSFW disclaimer.

Backend Checks

If possible, include a secondary check after receiving the generated image (before sending it to the frontend) to ensure it does not violate any content policies. Leveraging third-party moderation APIs could help keep your application compliant.

Integrating Sentry for Error Tracking

Monitoring errors in production is essential. To integrate Sentry with Next.js, follow these steps:

Install Sentry CLI: Ensure you have installed Sentry using:

   npm install @sentry/nextjs

Configure Sentry: Create a sentry.client.config.js and sentry.server.config.js in your project root. Here’s an example for sentry.client.config.js:

   import * as Sentry from '@sentry/nextjs';

   Sentry.init({
     dsn: process.env.SENTRY_DSN,
     tracesSampleRate: 1.0,
   });

Usage: In your API routes or React components, you can now capture errors:

   import * as Sentry from '@sentry/nextjs';

   try {
     // your code
   } catch (error) {
     Sentry.captureException(error);
     console.error(error);
   }

Deployment Considerations

When you’re ready to deploy your application:

Host on Vercel: Next.js works seamlessly with Vercel. Push your code to a Git repository and deploy directly from Vercel.
Environment Variables: Ensure all API keys and environment variables (like AI_API_KEY and SENTRY_DSN) are set securely in your deployment settings.
Monitoring and Updates: Set up automated monitoring with Sentry and regularly update dependencies to keep your app secure.

Conclusion

In this guide, we walked you through building a NSFW AI text-to-image generator using modern web technologies such as Next.js and Tailwind CSS. We covered how to set up the project, create a responsive UI, integrate an AI generation API, and implement strategies for responsibly handling NSFW content. In addition, incorporating tools like Sentry allows you to monitor your application for issues in production.

This project not only demonstrates advanced integration of AI APIs into web applications but also emphasizes the importance of ethical content moderation and user safety. As you continue to iterate and improve your generator, keep testing and reviewing your NSFW safeguards to ensure a responsible and secure user experience.

Happy coding!

Building an AI-Powered 'Erase and Replace' Image Tool with Next.js and React

ficav — Sat, 05 Apr 2025 03:18:21 +0000

Building an AI-Powered "Erase and Replace" Image Tool with Next.js and React

Ever wanted to remove an unwanted object from a photo or replace it entirely with something else? With advancements in AI, this is now possible. In this tutorial, we'll explore how to build an AI erase and replace image editing tool using Next.js and React. We’ll leverage AI services to manipulate images and integrate them into a web application.

Understanding AI-Powered Image Editing

AI-powered image editing tools use advanced machine learning algorithms to understand image content and manipulate it intelligently. One of these functionalities is erase and replace, where users can remove objects from an image and replace them with generated content that blends seamlessly with the surroundings.

Technologies We'll Use

Before we dive in, let's look at the technologies we'll be using:

Next.js: A React framework for server-rendered applications and static websites. It provides features like file-based routing, server-side rendering, and easy API creation.
React: A JavaScript library for building user interfaces. We'll use it to create our frontend components.
Webpack: Although Next.js handles bundling internally with Webpack, understanding it helps in customizing the build process if needed.

We'll also integrate with an AI service for image manipulation. For demonstration purposes, we'll use a mock API, but in a production app, you might use services like TensorFlow.js, OpenAI's API, or other AI-as-a-Service platforms.

Setting Up the Project

First, set up a new Next.js project:

npx create-next-app ai-erase-and-replace

Navigate to the project directory:

cd ai-erase-and-replace

Start the development server:

npm run dev

You should now have a basic Next.js app running at http://localhost:3000.

Implementing the AI Erase and Replace Functionality

We’ll build a page where users can upload an image, select an area to erase, provide a description of what they want to replace it with, and see the AI-manipulated result.

Step 1: Creating the Upload Component

Let's create a component that allows users to upload images.

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

export default function ImageUpload({ onUpload }) {
  const [selectedImage, setSelectedImage] = useState(null);

  const handleImageChange = (e) => {
    if (e.target.files && e.target.files[0]) {
      setSelectedImage(URL.createObjectURL(e.target.files[0]));
      onUpload(e.target.files[0]);
    }
  };

  return (
    <div>
      <input type="file" accept="image/*" onChange={handleImageChange} />
      {selectedImage && (
        <div style={{ marginTop: '1rem' }}>
          <img src={selectedImage} alt="Uploaded" width="300" />
        </div>
      )}
    </div>
  );
}

This component lets the user select an image file and displays a preview. The uploaded file is passed to the parent component via the onUpload prop.

Step 2: Allowing the User to Select an Area to Erase

To let users select a portion of the image, you can use a library like react-image-crop. Install it with:

npm install react-image-crop

Then create a crop component:

// components/ImageCrop.js
import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

export default function ImageCrop({ src, onCropComplete }) {
  const [crop, setCrop] = useState({ aspect: 16 / 9 });

  const handleComplete = (crop) => {
    onCropComplete(crop);
  };

  return (
    <div>
      <ReactCrop
        src={src}
        crop={crop}
        onChange={(newCrop) => setCrop(newCrop)}
        onComplete={handleComplete}
      />
    </div>
  );
}

This component displays the uploaded image with a crop selection. When the user completes the crop, it sends the crop data (which you can later use as a “mask” for erasing) back via the onCropComplete callback.

Step 3: Creating the Replacement Description Form

Users need to specify what they want to replace the erased area with. Create a simple text input component:

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

export default function ReplacementForm({ onSubmit }) {
  const [description, setDescription] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (description.trim()) {
      onSubmit(description);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Describe the replacement content:
        <input
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          placeholder="e.g., a blue sky, a mountain landscape..."
          style={{ width: '100%', margin: '0.5rem 0' }}
        />
      </label>
      <button type="submit">Generate</button>
    </form>
  );
}

This component collects a text description that will be sent along with the image and crop data.

Step 4: Integrating with the AI Service

For demonstration purposes, we’ll use a mock API endpoint that simulates the AI manipulation. Create an API route in Next.js at /pages/api/erase-replace.js:

// pages/api/erase-replace.js
export default async function handler(req, res) {
  if (req.method === 'POST') {
    // In a real scenario, you would process the image file, crop data,
    // and description here, then pass them to an AI service.
    // For now, we simulate a delay and return a placeholder image URL.
    await new Promise((resolve) => setTimeout(resolve, 2000));

    res.status(200).json({
      resultImageUrl: 'https://via.placeholder.com/600x400?text=AI+Generated+Image',
    });
  } else {
    res.status(405).json({ message: 'Method not allowed' });
  }
}

This mock endpoint waits for 2 seconds and then returns a placeholder image URL. In production, replace this with your AI service integration.

Step 5: Building the Main Page

Now, tie everything together in a main page component. This page will allow the user to upload an image, select the area to erase, add a replacement description, and finally display the manipulated result.

// pages/index.js
import { useState } from 'react';
import ImageUpload from '../components/ImageUpload';
import ImageCrop from '../components/ImageCrop';
import ReplacementForm from '../components/ReplacementForm';

export default function Home() {
  const [uploadedFile, setUploadedFile] = useState(null);
  const [cropData, setCropData] = useState(null);
  const [description, setDescription] = useState('');
  const [resultUrl, setResultUrl] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleUpload = (file) => {
    setUploadedFile(file);
    setResultUrl(null); // Reset previous result when a new image is uploaded
  };

  const handleCropComplete = (crop) => {
    setCropData(crop);
  };

  const handleFormSubmit = async (desc) => {
    setDescription(desc);
    setLoading(true);

    // Create form data to send the image, crop data, and description
    const formData = new FormData();
    formData.append('image', uploadedFile);
    formData.append('cropData', JSON.stringify(cropData));
    formData.append('description', desc);

    const res = await fetch('/api/erase-replace', {
      method: 'POST',
      body: formData,
    });

    const data = await res.json();
    setResultUrl(data.resultImageUrl);
    setLoading(false);
  };

  return (
    <div style={{ padding: '2rem' }}>
      <h1>AI-Powered Erase and Replace Tool</h1>

      <section style={{ marginBottom: '2rem' }}>
        <h2>1. Upload an Image</h2>
        <ImageUpload onUpload={handleUpload} />
      </section>

      {uploadedFile && (
        <section style={{ marginBottom: '2rem' }}>
          <h2>2. Select the Area to Erase</h2>
          <ImageCrop src={URL.createObjectURL(uploadedFile)} onCropComplete={handleCropComplete} />
        </section>
      )}

      {cropData && (
        <section style={{ marginBottom: '2rem' }}>
          <h2>3. Describe the Replacement</h2>
          <ReplacementForm onSubmit={handleFormSubmit} />
        </section>
      )}

      {loading && <p>Processing image...</p>}

      {resultUrl && (
        <section>
          <h2>4. AI-Generated Result</h2>
          <img src={resultUrl} alt="Result" style={{ maxWidth: '100%' }} />
        </section>
      )}
    </div>
  );
}

In this main component, we:

Handle the image upload and display a preview.
Allow the user to select a crop (i.e., the region to be erased).
Accept a text description for the replacement.
Send the data to our API endpoint.
Display the resulting AI-manipulated image.

Final Touches and Conclusion

You now have a basic AI-powered erase and replace tool using Next.js and React! Here are a few ideas to further improve your project:

Improve the Masking: Instead of using a crop tool, consider integrating a drawing tool (e.g., fabric.js) for free-form selections.
Enhance the AI Integration: Replace the mock API with a real AI service that can process the image and generate content dynamically.
User Experience: Add error handling, progress indicators, and mobile responsiveness to polish the user interface.
Performance: Optimize image uploads and processing, possibly leveraging serverless functions or background processing.

This project demonstrates how you can blend modern web development with AI-powered image editing to create powerful creative tools. With Next.js handling both server-side operations and client-side interactivity, you can easily scale and refine this application for production use.

Happy coding!

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

ficav — Thu, 03 Apr 2025 03:09:27 +0000

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

In this article, we'll walk through how we built an NSFW AI Image Generator using Next.js, React, and Tailwind CSS. We'll explore the technologies involved, discuss the implementation details, and share some code samples to help you get started on a similar project. Note: When working with NSFW content, always ensure that your project complies with all legal and ethical guidelines.

Introduction

Generating images from text prompts has become increasingly popular with advancements in AI. We wanted to create a web application that allows users to generate NSFW (Not Safe For Work) images using AI models, with a focus on performance and scalability. By leveraging Next.js for server-side rendering, React for building UI components, and Tailwind CSS for styling, we built a responsive and efficient application that can scale to meet user demand.

Technologies Used

Before diving into the implementation, let's take a look at the key technologies we used:

Next.js: A React framework that enables server-side rendering and static site generation.
React: A JavaScript library for building user interfaces.
Tailwind CSS: A utility-first CSS framework for rapidly building custom designs.
Sentry: An application monitoring platform for error tracking.
OAuth Integration: For user authentication via platforms like Google.
Axios: For making HTTP requests to the AI image generation API.

Project Setup

1. Initialize the Next.js Application

First, create a new Next.js project:

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

2. Install Dependencies

Install the required dependencies, including Tailwind CSS, Sentry, Axios, and OAuth-related packages:

# Install Tailwind CSS and its peer dependencies
npm install tailwindcss postcss autoprefixer
npx tailwindcss init -p

# Install Sentry for error tracking
npm install @sentry/nextjs

# Install other dependencies
npm install axios react-google-login

3. Configure Tailwind CSS

In your tailwind.config.js, set up the paths to all of your template files:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  // ... other configurations
}

Create a globals.css file in the styles directory and include the Tailwind directives:

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

Building the NSFW Image Generator

1. Implementing the AI Backend

For the AI image generation, you can use an external API that supports generating images from text prompts, including NSFW content (ensure you comply with all legal and ethical guidelines).

Here's an example using Axios to call the API:

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

export const generateImage = async (prompt) => {
  // Replace with the actual URL and parameters required by your AI API
  const response = await axios.post('https://api.example.com/generate', { prompt });
  return response.data;
};

Next, create a serverless function in Next.js to act as a proxy for the API call:

// 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) {
    // Log the error to Sentry if configured
    console.error('Error generating image:', error);
    res.status(500).json({ error: 'Error generating image' });
  }
}

2. Creating the Frontend Components

a. The Input Form

Create a component that allows users to input a text 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="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>
  );
}

b. Displaying the Generated Image

Create a component to display the generated image:

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

c. Integrating Everything in the Main Page

Now, integrate the prompt form and image display in your main page:

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

3. Integrating OAuth for User Authentication

To allow user authentication, integrate OAuth using the react-google-login package. This will enable users to log in with their Google account before using the generator.

// 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);
    // Send token to your backend for further verification if necessary
    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>
  );
}

Then, include the Login component in your main page or a dedicated authentication page as needed.

4. Error Monitoring with Sentry

Integrate Sentry to track errors and performance issues. Create Sentry configuration files for both client and server:

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

Ensure these files are imported early in your application lifecycle as per the Sentry for Next.js documentation.

Deployment

Once your application is complete and thoroughly tested, you can deploy it using platforms like Vercel or Netlify. Both platforms offer seamless integration with Next.js applications. Before deployment, make sure to:

Set environment variables (e.g., API keys, Sentry DSN, OAuth credentials) securely.
Review your API rate limits and scaling options with your AI image generation service.
Test your deployment in a staging environment.

Conclusion

In this article, we demonstrated how to build an NSFW AI Image Generator using Next.js, React, and Tailwind CSS. We covered:

Setting up a Next.js project with Tailwind CSS.
Implementing a backend API to interface with an AI image generation service.
Creating responsive frontend components for user input and image display.
Integrating OAuth for secure user authentication.
Monitoring errors with Sentry.
Deploying the application with best practices for environment management and scaling.

Future Work & Considerations:

Content Moderation: Even though the generator is designed for NSFW content, consider implementing moderation and consent mechanisms.
Performance Optimization: Explore caching strategies, code-splitting, and API optimizations for enhanced performance.
User Experience Enhancements: Add features like history tracking, image download options, and interactive UI feedback.
Compliance: Always ensure that your application follows relevant legal guidelines and ethical considerations when handling NSFW content.

By following the steps outlined above, you now have a strong foundation to build, enhance, and scale your NSFW AI Image Generator.

Happy coding!

DEV Community: ficav

Building a Next.js NSFW Text-to-Image AI Generator with React and Sentry

Building a Next.js NSFW Text-to-Image AI Generator with React and Sentry

Introduction

Technologies Used

Setting Up the Next.js Project

Configuring Tailwind CSS

Initializing Sentry

Environment Variables

Building the Text-to-Image API Route

Handling NSFW Content

Integrating Facebook Pixel

Building the Frontend UI

Error Handling & Performance Monitoring

Deployment to Vercel

Conclusion

How to Build an NSFW AI Image Generator Using Next.js and React

How to Build an NSFW AI Image Generator Using Next.js and React

Table of Contents

Prerequisites

Setting Up the Next.js Project

Integrating Tailwind CSS

Building the Image Generation Component

Creating the Input Form

Adding the Component to the Page

Handling NSFW Content Responsibly

Using Content Moderation APIs

Implementing checkPromptForNSFW

Testing the Application

Conclusion

Resources

How to Build an NSFW AI Image Generator Using Next.js and TensorFlow.js

How to Build an NSFW AI Image Generator Using Next.js and TensorFlow.js

Introduction

Prerequisites

Getting Started

Setting Up the Next.js Project

Installing Dependencies

Running the Backend Server

Building the Frontend

Creating the Input Form

Styling the Application

Implementing Image Generation Logic

Testing the Application

Conclusion

Further Reading

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

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

Introduction

Prerequisites

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

Initialize the Project

Project Structure

2. Integrating Tailwind CSS

Install Tailwind CSS

Initialize Tailwind Configuration

Configure Tailwind

Include Tailwind in CSS

3. Building the NSFW AI Image Generator UI

Creating the Input Form

4. Implementing AI Image Generation

5. Handling NSFW Content Safely

6. Deployment

Conclusion

Enhancing Images with AI: Building a Free Photo Extender Using Next.js and Tailwind CSS

Enhancing Images with AI: Building a Free Photo Extender Using Next.js and Tailwind CSS

Introduction

Prerequisites

Setting Up the Next.js Project

Installing Tailwind CSS

Building the Upload Component

Creating the Main Page

Implementing the API Route

Styling with Tailwind CSS

Testing the Application

Deploying to Vercel

Conclusion

Building an AI Image Extender with Next.js: Enhancing Images Using AI and React

Summary

Technology Stack

Implementing `checkPromptForNSFW`