initial commit

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"]
+}

.gitignore

@@ -0,0 +1,40 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+uploads/*
+prisma/dev.db
+.env

Dockerfile

@@ -0,0 +1,32 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+
+USER 1000
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+VOLUME /data
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+RUN chmod +x entrypoint.sh
+
+# Build the Next.js application for production
+# RUN npm run build
+
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+
+RUN npx prisma generate
+
+# Start the application
+ENTRYPOINT ["/usr/src/app/entrypoint.sh"]

README.md

@@ -0,0 +1,13 @@
+---
+title: Logo.Ai
+emoji: 🍋
+colorFrom: gray
+colorTo: gray
+sdk: docker
+pinned: true
+app_port: 3000
+short_description: Generate a Logo in 2 clicks
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

_types/index.ts

@@ -0,0 +1,7 @@
+export interface Form {
+  brand_name: string;
+  description: string;
+  display_name: boolean;
+  industry: string;
+  style: string;
+}

_utils/index.ts

@@ -0,0 +1,132 @@
+import { PiIslandFill } from "react-icons/pi";
+import { MdSportsVolleyball } from "react-icons/md";
+import { RiShoppingCart2Fill } from "react-icons/ri";
+import { MdRealEstateAgent } from "react-icons/md";
+import { TbWorld } from "react-icons/tb";
+import { GrTechnology } from "react-icons/gr";
+import { BiSolidParty } from "react-icons/bi";
+import { IoMdMedical } from "react-icons/io";
+import { MdRestaurant } from "react-icons/md";
+import { FaPiggyBank } from "react-icons/fa6";
+import { MdMovieFilter } from "react-icons/md";
+import { IoBuildSharp } from "react-icons/io5";
+import { MdSchool } from "react-icons/md";
+import { GiLipstick } from "react-icons/gi";
+import { FaCar } from "react-icons/fa";
+import { MdPets } from "react-icons/md";
+import { FaPaintBrush } from "react-icons/fa";
+import { IoMusicalNotes } from "react-icons/io5";
+import { MdPhotoCamera } from "react-icons/md";
+
+export const INDUSTRIES = [
+  {
+    name: "Travel",
+    icon: PiIslandFill,
+  },
+  {
+    name: "Sports Fitness",
+    icon: MdSportsVolleyball,
+  },
+  {
+    name: "Retail",
+    icon: RiShoppingCart2Fill,
+  },
+  {
+    name: "Real Estate",
+    icon: MdRealEstateAgent,
+  },
+  {
+    name: "Internet",
+    icon: TbWorld,
+  },
+  {
+    name: "Technology",
+    icon: GrTechnology,
+  },
+  {
+    name: "Events",
+    icon: BiSolidParty,
+  },
+  {
+    name: "Medical",
+    icon: IoMdMedical,
+  },
+  {
+    name: "Restaurant",
+    icon: MdRestaurant,
+  },
+  {
+    name: "Finance",
+    icon: FaPiggyBank,
+  },
+  {
+    name: "Entertainment",
+    icon: MdMovieFilter,
+  },
+  {
+    name: "Construction",
+    icon: IoBuildSharp,
+  },
+  {
+    name: "Education",
+    icon: MdSchool,
+  },
+  {
+    name: "Beauty",
+    icon: GiLipstick,
+  },
+  {
+    name: "Automotive",
+    icon: FaCar,
+  },
+  {
+    name: "Animal Pets",
+    icon: MdPets,
+  },
+  {
+    name: "Art",
+    icon: FaPaintBrush,
+  },
+  {
+    name: "Music",
+    icon: IoMusicalNotes,
+  },
+  {
+    name: "Photography",
+    icon: MdPhotoCamera,
+  },
+  {
+    name: "Other",
+  },
+];
+
+export const THEMES = [
+  {
+    name: "Warm",
+  },
+  {
+    name: "Pastel",
+  },
+  {
+    name: "Cold",
+  },
+  {
+    name: "Contrast",
+  },
+  {
+    name: "Greyscale",
+  },
+  {
+    name: "Gradient",
+  },
+];
+
+export const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
+  let binary = "";
+  const bytes = new Uint8Array(buffer);
+  const len = bytes.byteLength;
+  for (let i = 0; i < len; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return window.btoa(binary);
+};

_utils/prisma.ts

@@ -0,0 +1,4 @@
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+export default prisma;

app/_actions/generate.ts

@@ -0,0 +1,75 @@
+"use server";
+
+import { HfInference } from "@huggingface/inference";
+import fs from "fs/promises";
+
+import { Form } from "@/_types";
+import prisma from "@/_utils/prisma";
+
+export async function generate({ brand_name, industry, description }: Form) {
+  if (!process.env.PUBLIC_FILE_UPLOAD_DIR) {
+    throw new Error("PUBLIC_FILE_UPLOAD_DIR is not set");
+  }
+  const inference = new HfInference(process.env.HF_ACCESS_TOKEN);
+
+  const prompt = await inference.chatCompletion({
+    model: "meta-llama/Meta-Llama-3.1-70B-Instruct",
+    messages: [
+      { role: "user", content: "lee, a noodle restaurant" },
+      {
+        role: "assistant",
+        content:
+          'logo,Minimalist,A pair of chopsticks and a bowl of rice with the word "Lee",',
+      },
+      { role: "user", content: "cat shop" },
+      { role: "assistant", content: "wablogo,Minimalist,Leaf and cat,logo," },
+      { role: "user", content: "Ato, real estate company" },
+      {
+        role: "assistant",
+        content:
+          'logo,Minimalist,A man stands in front of a door,his shadow forming the word "A",',
+      },
+      { role: "user", content: `${brand_name}, ${description}, ${industry}` },
+    ],
+    temperature: 0.5,
+    max_tokens: 1024,
+    top_p: 0.7,
+  });
+
+  if (prompt?.choices[0]?.message?.content) {
+    const hfRequest = await inference.textToImage({
+      inputs: prompt.choices[0].message.content,
+      model: "Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design",
+      parameters: {
+        num_inference_steps: 24,
+        guidance_scale: 3.5,
+      },
+    });
+
+    const buffer = await hfRequest.arrayBuffer();
+    const array = new Uint8Array(buffer);
+
+    const newImage = await prisma.logo.create({
+      data: {
+        name: prompt.choices[0].message.content,
+      },
+    });
+
+    const indexFile = newImage.id;
+
+    const dir = await fs
+      .opendir(process.env.PUBLIC_FILE_UPLOAD_DIR)
+      .catch(() => null);
+    if (!dir) await fs.mkdir(process.env.PUBLIC_FILE_UPLOAD_DIR);
+    await fs.writeFile(
+      `${process.env.PUBLIC_FILE_UPLOAD_DIR}/${indexFile}.png`,
+      array
+    );
+
+    return { data: indexFile };
+  }
+
+  return {
+    error: "Failed to generate logo",
+  };
+}

app/_components/gallery/index.tsx

@@ -0,0 +1,23 @@
+export const Gallery = ({ logos }: { logos: Array<number> }) => {
+  return (
+    <section id="gallery" className="w-full py-16">
+      <div className="mx-auto bg-amber-500/10 border border-amber-500/15 text-amber-500 px-3 py-1.5 rounded-full flex items-center gap-1 justify-center max-w-max text-xs mb-4">
+        <span className="text-xs">⚡</span>
+        Increase your creativity
+      </div>
+      <h3 className="max-w-4xl text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+        See our <span className="text-white">last designs</span>.
+      </h3>
+      <div className="flex items-start justify-center gap-6 flex-wrap">
+        {logos.map((index) => (
+          <img
+            key={index}
+            src={`/api/images/${index}`}
+            alt="Generated logo"
+            className="rounded-2xl w-72 h-52 object-cover"
+          />
+        ))}
+      </div>
+    </section>
+  );
+};

app/_components/generation/index.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { useState } from "react";
+
+import { Form } from "@/_types";
+import { generate } from "@/app/_actions/generate";
+
+import { Brand } from "./step/brand";
+import { Steps } from "./step/list";
+import { Industry } from "./step/industry";
+import { Description } from "./step/description";
+import classNames from "classnames";
+
+export const Generation = () => {
+  const [form, setForm] = useState<Form>({
+    brand_name: "",
+    display_name: false,
+    description: "",
+    industry: "",
+    style: "",
+  });
+
+  const [step, setStep] = useState<number>(0);
+  const [loading, setLoading] = useState<boolean>(false);
+  const [result, setResult] = useState<number | undefined>(undefined);
+
+  const handleGenerate = async () => {
+    if (loading) return;
+    setLoading(true);
+    const response = await generate(form);
+    if (response.data) {
+      setResult(response.data);
+    } else {
+      console.log("Error: ", response.error);
+    }
+    setLoading(false);
+  };
+
+  return (
+    <main id="generation" className="w-full py-20">
+      <h3 className="max-w-4xl text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+        Start your <span className="text-white">generation</span> here.
+      </h3>
+      <Steps step={step} form={form} />
+      <div className="grid grid-cols-3 gap-20">
+        <Brand form={form} setForm={setForm} />
+        <Description form={form} setForm={setForm} />
+        <Industry form={form} setForm={setForm} />
+        <div className="col-span-3 flex items-center justify-center">
+          <button
+            className={classNames(
+              "rounded-full bg-white text-zinc-950 font-medium text-sm px-6 py-3 hover:bg-opacity-80 transition-all duration-150 disabled:bg-zinc-500 disabled:text-zinc-700",
+              {
+                "animate-pulse": loading,
+              }
+            )}
+            disabled={!form.brand_name || !form.description || !form.industry}
+            onClick={handleGenerate}
+          >
+            {loading ? "Generating..." : "Generate my Logo"}
+          </button>
+        </div>
+        {result && (
+          <div className="col-span-3 flex items-center justify-center">
+            <img
+              src={`/api/images/${result}`}
+              alt="Generated logo"
+              className="h-[300px]"
+            />
+          </div>
+        )}
+      </div>
+    </main>
+  );
+};

app/_components/generation/step/brand.tsx

@@ -0,0 +1,25 @@
+import { Form } from "@/_types";
+
+export const Brand = ({
+  form,
+  setForm,
+}: {
+  form: Form;
+  setForm: React.Dispatch<React.SetStateAction<Form>>;
+}) => {
+  return (
+    <div className="">
+      <label htmlFor="brand_name" className="text-zinc-300 mb-1 block text-sm">
+        Brand name
+      </label>
+      <input
+        type="text"
+        id="brand_name"
+        placeholder="Hugging Face"
+        value={form.brand_name}
+        className="border bg-zinc-900 border-zinc-800 rounded-lg py-2 px-4 text-gray-200 outline-none w-full placeholder:text-gray-600"
+        onChange={(e) => setForm({ ...form, brand_name: e.target.value })}
+      />
+    </div>
+  );
+};

app/_components/generation/step/description.tsx

@@ -0,0 +1,25 @@
+import { Form } from "@/_types";
+
+export const Description = ({
+  form,
+  setForm,
+}: {
+  form: Form;
+  setForm: React.Dispatch<React.SetStateAction<Form>>;
+}) => {
+  return (
+    <div className="">
+      <label htmlFor="description" className="text-zinc-300 mb-1 block text-sm">
+        Short Description
+      </label>
+      <input
+        type="text"
+        id="description"
+        placeholder="A platform for building and sharing models"
+        value={form.description}
+        className="border bg-zinc-900 border-zinc-800 rounded-lg py-2 px-4 text-gray-200 outline-none w-full placeholder:text-gray-600"
+        onChange={(e) => setForm({ ...form, description: e.target.value })}
+      />
+    </div>
+  );
+};

app/_components/generation/step/industry.tsx

@@ -0,0 +1,32 @@
+import { Form } from "@/_types";
+
+import { INDUSTRIES } from "@/_utils";
+
+export const Industry = ({
+  form,
+  setForm,
+}: {
+  form: Form;
+  setForm: React.Dispatch<React.SetStateAction<Form>>;
+}) => {
+  return (
+    <div className="">
+      <label htmlFor="industry" className="text-zinc-300 mb-1 block text-sm">
+        Industry
+      </label>
+      <select
+        id="industry"
+        className="border bg-zinc-900 border-zinc-800 rounded-lg py-3 px-4 text-gray-200 outline-none w-full"
+        onChange={(e) => setForm({ ...form, industry: e.target.value })}
+      >
+        <option value="">Select an industry</option>
+        {INDUSTRIES.map((industry, i) => (
+          <option key={i} value={industry.name}>
+            {/* <industry.icon className="mr-2 inline-block" /> */}
+            {industry.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

app/_components/generation/step/list.tsx

@@ -0,0 +1,74 @@
+import { TiLightbulb } from "react-icons/ti";
+import { MdWorkOutline } from "react-icons/md";
+import { IoMdCheckmark } from "react-icons/io";
+import { MdOutlinePermIdentity } from "react-icons/md";
+import classNames from "classnames";
+
+import { Form } from "@/_types";
+
+const STEPS = [
+  {
+    title: "Brand",
+    description: "Tell us about your brand.",
+    icon: MdOutlinePermIdentity,
+    active: "bg-amber-500 !border-amber-500",
+    key: "brand_name",
+  },
+  {
+    title: "Concept",
+    description: "What's your brand about?",
+    icon: TiLightbulb,
+    active: "bg-violet-500 !border-violet-500",
+    key: "description",
+  },
+  {
+    title: "Industry",
+    description: "What industry are you in?",
+    icon: MdWorkOutline,
+    active: "bg-emerald-500 !border-emerald-500",
+    key: "industry",
+  },
+];
+
+export const Steps = ({ step, form }: { step: number; form: Form }) => {
+  return (
+    <div className="w-full flex items-center justify-center gap-2 mb-12">
+      {STEPS.map((s, i) => (
+        <>
+          <div
+            key={i}
+            className={classNames(
+              "text-center flex flex-col items-center min-w-60 cursor-pointer",
+              {
+                "opacity-40": form[s.key as keyof typeof form] === "",
+              }
+            )}
+          >
+            <div
+              className={classNames(
+                "size-7 border border-white text-white flex items-center justify-center rounded-2xl mb-3",
+                {
+                  [s.active]: form[s.key as keyof typeof form],
+                }
+              )}
+            >
+              {form[s.key as keyof typeof form] ? (
+                <IoMdCheckmark className="text-xl" />
+              ) : (
+                <s.icon className="text-base" />
+              )}
+            </div>
+            <p className="text-white text-xl font-semibold">{s.title}</p>
+            <p className="text-white text-sm font-mono">{s.description}</p>
+          </div>
+          {i !== STEPS.length - 1 && (
+            <div
+              key={"linear_" + i}
+              className="h-0 flex-1 border-gray-100/20 border-dashed border-b"
+            />
+          )}
+        </>
+      ))}
+    </div>
+  );
+};

app/_components/hero-header.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import classNames from "classnames";
+import { useState } from "react";
+import { useInterval } from "react-use";
+
+export const HeroHeader = () => {
+  const [selectedWord, setSelectedWord] = useState("Think.");
+
+  useInterval(() => {
+    setSelectedWord((prev) => {
+      switch (prev) {
+        case "Think.":
+          return "Customize.";
+        case "Customize.":
+          return "Generate.";
+        case "Generate.":
+          return "Think.";
+        default:
+          return "Think.";
+      }
+    });
+  }, 2000);
+
+  return (
+    <header className="py-20 grid grid-cols-1 gap-5">
+      <h1 className="text-5xl font-semibold text-[#aaaaaa] max-w-max mx-auto text-center">
+        <span
+          className={classNames("transition-all duration-300 text-opacity-0", {
+            "text-white !text-opacity-100": selectedWord === "Think.",
+          })}
+        >
+          Think.
+        </span>{" "}
+        <span
+          className={classNames("transition-all duration-300 text-opacity-0", {
+            "text-white !text-opacity-100": selectedWord === "Customize.",
+          })}
+        >
+          Customize.
+        </span>{" "}
+        <br />
+        and{" "}
+        <span
+          className={classNames("transition-all duration-300 text-opacity-0", {
+            "text-white !text-opacity-100": selectedWord === "Generate.",
+          })}
+        >
+          Generate.
+        </span>
+      </h1>
+      <h2 className="text-lg font-light text-center text-[#898989] max-w-sm mx-auto">
+        An AI powered tool that helps you create a logo for your brand.
+      </h2>
+      <div className="flex items-center justify-center gap-6 mt-3">
+        <a
+          href="#generation"
+          className="rounded-full bg-white text-zinc-950 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150"
+        >
+          Start generation
+        </a>
+        <a
+          href="#gallery"
+          className="rounded-full text-zinc-300 bg-zinc-900 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150"
+        >
+          View examples
+        </a>
+      </div>
+    </header>
+  );
+};

app/api/images/[id]/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest } from "next/server";
+import fs from "fs/promises";
+
+import prisma from "@/_utils/prisma";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  const { id } = params;
+
+  const image = await prisma.logo.findUnique({
+    where: { id: Number(id) },
+  });
+
+  if (!image) {
+    return new Response(null, { status: 404 });
+  }
+
+  const buffer = await fs.readFile(
+    `${process.env.PUBLIC_FILE_UPLOAD_DIR}/${image.id}.png`
+  );
+
+  if (!buffer) {
+    return new Response(null, { status: 404 });
+  }
+
+  return new Response(buffer, {
+    headers: {
+      "Content-Type": "image/png",
+    },
+  });
+}

app/api/logo/route.ts

@@ -0,0 +1,15 @@
+import { NextRequest } from "next/server";
+import prisma from "@/_utils/prisma";
+
+export async function GET(req: NextRequest) {
+  const images = await prisma.logo.findMany({
+    select: {
+      id: true,
+    },
+    take: 24,
+    orderBy: {
+      id: "desc",
+    },
+  });
+  return Response.json(images.map((image) => image.id));
+}

app/layout.tsx

@@ -0,0 +1,60 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import "@/assets/globals.css";
+import { Navigation } from "@/components/_navigation";
+
+const nohemiRegular = localFont({
+  src: [
+    {
+      path: "./_fonts/nohemi/light.woff",
+      weight: "300",
+    },
+    {
+      path: "./_fonts/nohemi/regular.woff",
+      weight: "400",
+    },
+    {
+      path: "./_fonts/nohemi/semibold.woff",
+      weight: "600",
+    },
+    {
+      path: "./_fonts/nohemi/bold.woff",
+      weight: "700",
+    },
+    {
+      path: "./_fonts/nohemi/extrabold.woff",
+      weight: "900",
+    },
+  ],
+  variable: "--font-nohemi-sans",
+});
+
+const geistMono = localFont({
+  src: "./_fonts/GeistMonoVF.woff",
+  variable: "--font-geist-mono",
+  weight: "100 900",
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
+      >
+        <div className="min-h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth">
+          <Navigation />
+          {children}
+        </div>
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,29 @@
+import { Gallery } from "./_components/gallery";
+import { Generation } from "./_components/generation";
+import { HeroHeader } from "./_components/hero-header";
+
+async function getLogos() {
+  try {
+    const logos = await fetch(process.env.API_URL + "/api/logo")
+      .then((res) => res.json())
+      .then((data) => data);
+    return logos;
+  } catch (error: any) {
+    console.error("Error fetching logos: ", error.message);
+    return [];
+  }
+}
+export const revalidate = 0;
+
+export default async function Home() {
+  const logos = await getLogos();
+  return (
+    <section>
+      <div className="max-w-4xl mx-auto">
+        <HeroHeader />
+        <Generation />
+      </div>
+      <Gallery logos={logos} />
+    </section>
+  );
+}

assets/globals.css

@@ -0,0 +1,53 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+html,
+body {
+  @apply scroll-smooth;
+}
+
+@keyframes jiggle {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(5deg);
+  }
+  50% {
+    transform: rotate(-5deg);
+  }
+  75% {
+    transform: rotate(5deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+  .animate-jiggle {
+    animation: jiggle 0.5s infinite;
+  }
+}

components/_navigation/index.tsx

@@ -0,0 +1,33 @@
+import Image from "next/image";
+
+import Arrow from "@/assets/svg/arrow.svg";
+import Logo from "@/assets/logo.png";
+
+export const Navigation = () => {
+  return (
+    <div className="rounded-full bg-zinc-950 border border-white/10 px-6 py-4 flex items-center justify-between max-w-xl w-full mx-auto shadow-md relative">
+      <div className="flex items-center justify-center gap-3 relative">
+        <div className="relative">
+          <Image src={Logo} alt="logo" className="size-6" />
+          <div className="absolute left-0 -translate-x-[calc(100%+12px)] top-5 text-white flex justify-end gap-1 -rotate-6">
+            <p className="font-mono text-sm text-white">AI Generated</p>
+            <Image
+              src={Arrow}
+              alt="arrow"
+              className="w-[30px] absolute -right-3 -top-1"
+            />
+          </div>
+        </div>
+        <p className="font-semibold text-lg">LogoAI</p>
+      </div>
+      <ul className="flex items-center justify-right gap-3">
+        <li>
+          <a href="#">X</a>
+        </li>
+        <li>
+          <a href="#">HF</a>
+        </li>
+      </ul>
+    </div>
+  );
+};

entrypoint.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+npm run build && npx prisma generate && npx prisma migrate deploy && npx prisma db push && npm start

next.config.mjs

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack: (config) => {
+    // Ignore node-specific modules when bundling for the browser
+    // See https://webpack.js.org/configuration/resolve/#resolvealias
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      sharp$: false,
+      "onnxruntime-node$": false,
+    };
+    return config;
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "logoai.dev",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@huggingface/inference": "^2.8.0",
+    "@prisma/client": "^5.19.1",
+    "@xenova/transformers": "^2.17.2",
+    "classnames": "^2.5.1",
+    "next": "14.2.12",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.3.0",
+    "react-use": "^17.5.1"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.12",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

prisma/schema.prisma

@@ -0,0 +1,18 @@
+// This is your Prisma schema file,
+// learn more about it in the docs: https://pris.ly/d/prisma-schema
+
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+
+model Logo {
+  id        Int      @id @default(autoincrement())
+  name      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @default(now())
+}

tailwind.config.ts

@@ -0,0 +1,22 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
+      },
+      fontFamily: {
+        mono: ["var(--font-geist-mono)"],
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}