Unleashing the Power of AI Image Processing with DreamEdit AI
👨💻 Passionate Web Developer | Open-Source Contributor 👨💼
Introduction
Welcome to DreamEdit AI, the ultimate AI image SaaS platform designed to revolutionize your image processing experience. With cutting-edge technology and a secure payment infrastructure, DreamEdit AI offers a plethora of advanced features to cater to all your image editing needs. Whether it's image restoration, recoloring, object removal, or generative filling, DreamEdit AI has got you covered.
Tech Stack
DreamEdit AI is built using a robust and modern tech stack to ensure high performance and scalability:
Next.js: For server-side rendering and static site generation.
TypeScript: Ensuring type safety and robust code.
MongoDB: A flexible and scalable NoSQL database.
Clerk: For secure authentication and authorization.
Cloudinary: Managing and optimizing media assets.
Stripe: Handling secure payment transactions.
Shadcn: For component-based architecture.
TailwindCSS: Providing a highly customizable and responsive UI.
Key Features
Authentication and Authorization
Secure user access with robust registration, login, and route protection mechanisms. Your data and transformations are safe with us.
/* eslint-disable camelcase */
import { clerkClient } from "@clerk/nextjs";
import { WebhookEvent } from "@clerk/nextjs/server";
import { headers } from "next/headers";
import { NextResponse } from "next/server";
import { Webhook } from "svix";
import { createUser, deleteUser, updateUser } from "@/lib/actions/user.actions";
export async function POST(req: Request) {
// You can find this in the Clerk Dashboard -> Webhooks -> choose the webhook
const WEBHOOK_SECRET = process.env.WEBHOOK_SECRET;
if (!WEBHOOK_SECRET) {
throw new Error(
"Please add WEBHOOK_SECRET from Clerk Dashboard to .env or .env.local"
);
}
// Get the headers
const headerPayload = headers();
const svix_id = headerPayload.get("svix-id");
const svix_timestamp = headerPayload.get("svix-timestamp");
const svix_signature = headerPayload.get("svix-signature");
// If there are no headers, error out
if (!svix_id || !svix_timestamp || !svix_signature) {
return new Response("Error occurred -- no svix headers", {
status: 400,
});
}
// Get the body
const payload = await req.json();
const body = JSON.stringify(payload);
// Create a new Svix instance with your secret.
const wh = new Webhook(WEBHOOK_SECRET);
let evt: WebhookEvent;
// Verify the payload with the headers
try {
evt = wh.verify(body, {
"svix-id": svix_id,
"svix-timestamp": svix_timestamp,
"svix-signature": svix_signature,
}) as WebhookEvent;
} catch (err) {
console.error("Error verifying webhook:", err);
return new Response("Error occurred", {
status: 400,
});
}
// Get the ID and type
const { id } = evt.data;
const eventType = evt.type;
// CREATE
if (eventType === "user.created") {
const { id, email_addresses, image_url, first_name, last_name, username } = evt.data;
const user = {
clerkId: id,
email: email_addresses[0].email_address,
username: username!,
firstName: first_name,
lastName: last_name,
photo: image_url,
};
const newUser = await createUser(user);
// Set public metadata
if (newUser) {
await clerkClient.users.updateUserMetadata(id, {
publicMetadata: {
userId: newUser._id,
},
});
}
return NextResponse.json({ message: "OK", user: newUser });
}
// UPDATE
if (eventType === "user.updated") {
const { id, image_url, first_name, last_name, username } = evt.data;
const user = {
firstName: first_name,
lastName: last_name,
username: username!,
photo: image_url,
};
const updatedUser = await updateUser(id, user);
return NextResponse.json({ message: "OK", user: updatedUser });
}
// DELETE
if (eventType === "user.deleted") {
const { id } = evt.data;
const deletedUser = await deleteUser(id!);
return NextResponse.json({ message: "OK", user: deletedUser });
}
console.log(`Webhook with an ID of ${id} and type of ${eventType}`);
console.log("Webhook body:", body);
return new Response("", { status: 200 });
}
This code snippet demonstrates how to handle user creation, update, and deletion events using Clerk and Svix webhooks in a Next.js application.
Community Image Showcase
Explore a wide array of user transformations with our easy-to-navigate community showcase. Pagination ensures smooth browsing through numerous images.
Advanced Image Search
Find images quickly and accurately by searching for content or objects present within the images. Our advanced search functionality makes it effortless.
"use client";
import Image from "next/image";
import { useRouter, useSearchParams } from "next/navigation";
import { useEffect, useState } from "react";
import { Input } from "@/components/ui/input";
import { formUrlQuery, removeKeysFromQuery } from "@/lib/utils";
export const Search = () => {
const router = useRouter();
const searchParams = useSearchParams();
const [query, setQuery] = useState("");
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
if (query) {
const newUrl = formUrlQuery({
searchParams: searchParams.toString(),
key: "query",
value: query,
});
router.push(newUrl, { scroll: false });
} else {
const newUrl = removeKeysFromQuery({
searchParams: searchParams.toString(),
keysToRemove: ["query"],
});
router.push(newUrl, { scroll: false });
}
}, 300);
return () => clearTimeout(delayDebounceFn);
}, [router, searchParams, query]);
return (
<div className="search">
<Image
src="/assets/icons/search.svg"
alt="search"
width={24}
height={24}
/>
<Input
className="search-field"
placeholder="Search"
onChange={(e) => setQuery(e.target.value)}
/>
</div>
);
};
This code snippet demonstrates how to implement an advanced image search feature in a Next.js application. It uses a debounced input field to update the URL query parameters based on the user's search input, allowing for efficient and dynamic search functionality.
Image Restoration
Revive old or damaged images with our powerful image restoration feature. Bring your memories back to life with just a few clicks.
Image Recoloring
Customize your images by replacing objects with your desired colors. Our AI makes recoloring easy and precise.
Image Generative Fill
Fill in missing areas of your images seamlessly. Our generative fill feature ensures that the filled areas blend perfectly with the rest of the image.
Object Removal
Clean up your images by removing unwanted objects with precision. Our AI ensures that the background remains intact and natural-looking.
Background Removal
Extract objects from their backgrounds effortlessly. Whether for professional or personal use, our background removal tool is highly effective.
Download Transformed Images
Save and share your AI-transformed images conveniently. Download your edited images in high quality with ease.
Transformed Image Details
View detailed information about each transformation. Understand the changes made and the AI processes involved.
import { auth } from "@clerk/nextjs";
import Image from "next/image";
import Link from "next/link";
import Header from "@/components/shared/Header";
import TransformedImage from "@/components/shared/TransformedImage";
import { Button } from "@/components/ui/button";
import { getImageById } from "@/lib/actions/image.actions";
import { getImageSize } from "@/lib/utils";
import { DeleteConfirmation } from "@/components/shared/DeleteConfirmation";
const ImageDetails = async ({ params: { id } }: SearchParamProps) => {
const { userId } = auth();
const image = await getImageById(id);
return (
<>
<Header title={image.title} />
<section className="mt-5 flex flex-wrap gap-4">
<div className="p-14-medium md:p-16-medium flex gap-2">
<p className="text-dark-600">Transformation:</p>
<p className="capitalize text-purple-400">
{image.transformationType}
</p>
</div>
{image.prompt && (
<>
<p className="hidden text-dark-400/50 md:block">●</p>
<div className="p-14-medium md:p-16-medium flex gap-2">
<p className="text-dark-600">Prompt:</p>
<p className="capitalize text-purple-400">{image.prompt}</p>
</div>
</>
)}
{image.color && (
<>
<p className="hidden text-dark-400/50 md:block">●</p>
<div className="p-14-medium md:p-16-medium flex gap-2">
<p className="text-dark-600">Color:</p>
<p className="capitalize text-purple-400">{image.color}</p>
</div>
</>
)}
{image.aspectRatio && (
<>
<p className="hidden text-dark-400/50 md:block">●</p>
<div className="p-14-medium md:p-16-medium flex gap-2">
<p className="text-dark-600">Aspect Ratio:</p>
<p className="capitalize text-purple-400">{image.aspectRatio}</p>
</div>
</>
)}
</section>
<section className="mt-10 border-t border-dark-400/15">
<div className="transformation-grid">
{/* MEDIA UPLOADER */}
<div className="flex flex-col gap-4">
<h3 className="h3-bold text-dark-600">Original</h3>
<Image
width={getImageSize(image.transformationType, image, "width")}
height={getImageSize(image.transformationType, image, "height")}
src={image.secureURL}
alt="image"
className="transformation-original_image"
/>
</div>
{/* TRANSFORMED IMAGE */}
<TransformedImage
image={image}
type={image.transformationType}
title={image.title}
isTransforming={false}
transformationConfig={image.config}
hasDownload={true}
/>
</div>
{userId === image.author.clerkId && (
<div className="mt-4 space-y-4">
<Button asChild type="button" className="submit-button capitalize">
<Link href={`/transformations/${image._id}/update`}>
Update Image
</Link>
</Button>
<DeleteConfirmation imageId={image._id} />
</div>
)}
</section>
</>
);
};
export default ImageDetails;
This code snippet demonstrates how to display detailed information about a transformed image in a Next.js application. It includes sections for the transformation type, prompt, color, aspect ratio, and the original and transformed images. Additionally, it provides options for the image author to update or delete the image.
Transformation Management
Have full control over your transformations. Delete or update your transformed images as needed.
Credits System
Earn or purchase credits for image transformations. Our credits system ensures you can continue using our services without interruption.
import { SignedIn, auth } from "@clerk/nextjs";
import Image from "next/image";
import { redirect } from "next/navigation";
import Header from "@/components/shared/Header";
import { Button } from "@/components/ui/button";
import { plans } from "@/constants";
import { getUserById } from "@/lib/actions/user.actions";
import Checkout from "@/components/shared/Checkout";
const Credits = async () => {
const { userId } = auth();
if (!userId) redirect("/sign-in");
const user = await getUserById(userId);
return (
<>
<Header
title="Buy Credits"
subtitle="Choose a credit package that suits your needs!"
/>
<section>
<ul className="credits-list">
{plans.map((plan) => (
<li key={plan.name} className="credits-item">
<div className="flex-center flex-col gap-3">
<Image src={plan.icon} alt="check" width={50} height={50} />
<p className="p-20-semibold mt-2 text-purple-500">
{plan.name}
</p>
<p className="h1-semibold text-dark-600">${plan.price}</p>
<p className="p-16-regular">{plan.credits} Credits</p>
</div>
{/* Inclusions */}
<ul className="flex flex-col gap-5 py-9">
{plan.inclusions.map((inclusion) => (
<li
key={plan.name + inclusion.label}
className="flex items-center gap-4"
>
<Image
src={`/assets/icons/${
inclusion.isIncluded ? "check.svg" : "cross.svg"
}`}
alt="check"
width={24}
height={24}
/>
<p className="p-16-regular">{inclusion.label}</p>
</li>
))}
</ul>
{plan.name === "Free" ? (
<Button variant="outline" className="credits-btn">
Free Consumable
</Button>
) : (
<SignedIn>
<Checkout
plan={plan.name}
amount={plan.price}
credits={plan.credits}
buyerId={user._id}
/>
</SignedIn>
)}
</li>
))}
</ul>
</section>
</>
);
};
export default Credits;
This code snippet demonstrates how to implement a credits system in a Next.js application. It includes a list of credit packages that users can choose from, with details about each package's price, credits, and inclusions. Users can purchase credits through a checkout component, and the system ensures that only signed-in users can make purchases.
Profile Page
Access all your transformed images and credit information in one place. Manage your profile and keep track of your activities.
import { auth } from "@clerk/nextjs";
import Image from "next/image";
import { redirect } from "next/navigation";
import { Collection } from "@/components/shared/Collection";
import Header from "@/components/shared/Header";
import { getUserImages } from "@/lib/actions/image.actions";
import { getUserById } from "@/lib/actions/user.actions";
const Profile = async ({ searchParams }: SearchParamProps) => {
const page = Number(searchParams?.page) || 1;
const { userId } = auth();
if (!userId) redirect("/sign-in");
const user = await getUserById(userId);
const images = await getUserImages({ page, userId: user._id });
return (
<>
<Header title="Profile" />
<section className="profile">
<div className="profile-balance">
<p className="p-14-medium md:p-16-medium">CREDITS AVAILABLE</p>
<div className="mt-4 flex items-center gap-4">
<Image
src="/assets/icons/coins.svg"
alt="coins"
width={50}
height={50}
className="size-9 md:size-12"
/>
<h2 className="h2-bold text-dark-600">{user.creditBalance}</h2>
</div>
</div>
<div className="profile-image-manipulation">
<p className="p-14-medium md:p-16-medium">IMAGE MANIPULATION DONE</p>
<div className="mt-4 flex items-center gap-4">
<Image
src="/assets/icons/photo.svg"
alt="coins"
width={50}
height={50}
className="size-9 md:size-12"
/>
<h2 className="h2-bold text-dark-600">{images?.data.length}</h2>
</div>
</div>
</section>
<section className="mt-8 md:mt-14">
<Collection
images={images?.data}
totalPages={images?.totalPages}
page={page}
/>
</section>
</>
);
};
export default Profile;
This code snippet demonstrates how to create a profile page in a Next.js application. It includes sections for displaying the user's available credits and the number of image manipulations they have done. Additionally, it features a collection component to display the user's images with pagination support.
Credits Purchase
Securely buy credits via Stripe for uninterrupted use of our services. Our payment system is designed to be safe and user-friendly.
/* eslint-disable camelcase */
import { createTransaction } from "@/lib/actions/transaction.action";
import { NextResponse } from "next/server";
import stripe from "stripe";
export async function POST(request: Request) {
const body = await request.text();
const sig = request.headers.get("stripe-signature") as string;
const endpointSecret = process.env.STRIPE_WEBHOOK_SECRET!;
let event;
try {
event = stripe.webhooks.constructEvent(body, sig, endpointSecret);
} catch (err) {
return NextResponse.json({ message: "Webhook error", error: err });
}
// Get the ID and type
const eventType = event.type;
// CREATE
if (eventType === "checkout.session.completed") {
const { id, amount_total, metadata } = event.data.object;
const transaction = {
stripeId: id,
amount: amount_total ? amount_total / 100 : 0,
plan: metadata?.plan || "",
credits: Number(metadata?.credits) || 0,
buyerId: metadata?.buyerId || "",
createdAt: new Date(),
};
const newTransaction = await createTransaction(transaction);
return NextResponse.json({ message: "OK", transaction: newTransaction });
}
return new Response("", { status: 200 });
}
This code snippet demonstrates how to handle Stripe webhook events for credit purchases in a Next.js application. It listens for the checkout.session.completed event, extracts relevant transaction details, and creates a new transaction record in the database.
Responsive UI/UX
Enjoy a seamless experience across all devices with our user-friendly interface. DreamEdit AI is designed to be responsive and intuitive.
Conclusion
DreamEdit AI is your go-to platform for all your image processing needs. With a powerful tech stack and a wide range of features, we ensure that your experience is smooth, secure, and highly efficient. Join us and unleash the power of AI in your image editing endeavors.
