Upload 22 files

app/_actions/generate.ts

@@ -0,0 +1,88 @@
+"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, {
+    use_cache: false,
+  });
+
+  const prompt: any = 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,
+    })
+    .then((res) => res)
+    .catch((err) => {
+      return { error: err.message };
+    });
+
+  if (prompt?.error) {
+    return {
+      error: prompt.error,
+    };
+  }
+
+  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/_actions/logos.ts

@@ -0,0 +1,39 @@
+"use server";
+
+import prisma from "@/_utils/prisma";
+
+export const getLastLogos = async () => {
+  const images = await prisma.logo.findMany({
+    select: {
+      id: true,
+    },
+    take: 24,
+    orderBy: {
+      id: "desc",
+    },
+  });
+  return images.map((image) => image.id);
+};
+
+const ITEMS_PER_PAGE = 24;
+
+export const getLogos = async (page: number = 0) => {
+  const images = await prisma.logo.findMany({
+    select: {
+      id: true,
+    },
+    skip: page * ITEMS_PER_PAGE,
+    take: ITEMS_PER_PAGE,
+    orderBy: {
+      id: "desc",
+    },
+  });
+
+  const total = await prisma.logo.count();
+  const hasMore = total > (page + 1) * ITEMS_PER_PAGE;
+
+  return {
+    logos: images.map((image) => image.id),
+    hasMore,
+  };
+};

app/_components/gallery/index.tsx

@@ -0,0 +1,36 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export const Gallery = ({ logos }: { logos: Array<number> }) => {
+  return (
+    <section id="gallery" className="w-full py-10 lg: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-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+        See our <span className="text-white">last designs</span>.
+      </h3>
+      <div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
+        {logos.map((index) => (
+          <Image
+            key={index}
+            src={`/api/images/${index}`}
+            alt="Generated logo"
+            width={500}
+            height={500}
+            className="rounded-2xl w-full lg:size-72 object-cover"
+          />
+        ))}
+      </div>
+      <div className="mt-12 flex items-center justify-center">
+        <Link
+          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 text-center max-lg:w-full"
+        >
+          View all examples
+        </Link>
+      </div>
+    </section>
+  );
+};

app/_components/gallery/list.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import InfiniteScroll from "react-infinite-scroll-component";
+import Image from "next/image";
+import { useState } from "react";
+import { getLogos } from "@/app/_actions/logos";
+
+export const InfiniteGallery = ({
+  logos: initialLogos,
+  hasMore: initialHasMore,
+}: {
+  logos: Array<number>;
+  hasMore: boolean;
+}) => {
+  const [page, setPage] = useState(0);
+  const [logos, setLogos] = useState([...initialLogos]);
+  const [hasMore, setHasMore] = useState(initialHasMore);
+
+  const fetchMoreData = async () => {
+    const newLogos = await getLogos(page + 1);
+    setLogos([...logos, ...newLogos.logos]);
+    setHasMore(newLogos.hasMore);
+    setPage(page + 1);
+  };
+
+  return (
+    <InfiniteScroll
+      scrollableTarget="content-wrapper"
+      dataLength={logos.length} //This is important field to render the next data
+      next={fetchMoreData}
+      hasMore={hasMore}
+      loader={
+        <div className="w-full max-lg:col-span-2 text-center">Loading...</div>
+      }
+      className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap"
+      endMessage={
+        <div className="w-full max-lg:col-span-2 text-zinc-400 text-center">
+          Yay! You have seen it all
+        </div>
+      }
+    >
+      {logos.map((index) => (
+        <Image
+          key={index}
+          src={`/api/images/${index}`}
+          alt="Generated logo"
+          width={500}
+          height={500}
+          className="rounded-2xl w-full lg:size-72 object-cover"
+        />
+      ))}
+    </InfiniteScroll>
+  );
+};

app/_components/generation/index.tsx

@@ -0,0 +1,79 @@
+"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";
+import { toast } from "react-toastify";
+import Image from "next/image";
+
+export const Generation = () => {
+  const [form, setForm] = useState<Form>({
+    brand_name: "",
+    display_name: false,
+    description: "",
+    industry: "",
+    style: "",
+  });
+
+  const [loading, setLoading] = useState<boolean>(false);
+  const [result, setResult] = useState<number | undefined>(undefined);
+
+  const handleGenerate = async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const response = await generate(form);
+      setResult(response.data);
+    } catch (err) {
+      toast.error("An error occurred. Please try again later.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <main id="generation" className="w-full py-10 lg:py-20">
+      <h3 className="max-w-4xl text-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+        Start your <span className="text-white">generation</span> here.
+      </h3>
+      <Steps form={form} />
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-20">
+        <Brand form={form} setForm={setForm} />
+        <Description form={form} setForm={setForm} />
+        <Industry form={form} setForm={setForm} />
+        <div className="lg:col-span-3 flex items-center justify-center">
+          <button
+            className={classNames(
+              "max-lg:w-full 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="lg:col-span-3 flex items-center justify-center rounded-3xl">
+            <Image
+              src={`/api/images/${result}`}
+              alt="Generated logo"
+              className="h-[300px]"
+              width={400}
+              height={400}
+            />
+          </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="w-full">
+      <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="w-full">
+      <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 = ({ form }: { form: Form }) => {
+  return (
+    <div className="max-lg:hidden 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-14 lg:py-20 grid grid-cols-1 gap-5">
+      <h1 className="text-4xl lg: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="max-lg:max-w-xs w-full max-lg:mx-auto max-lg:grid lg:flex lg:items-center lg: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 text-center max-lg:w-full"
+        >
+          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 text-center max-lg:w-full"
+        >
+          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/gallery/page.tsx

@@ -0,0 +1,19 @@
+import { InfiniteGallery } from "@/app/_components/gallery/list";
+import { getLogos } from "@/app/_actions/logos";
+
+async function lastLogos() {
+  const logos = await getLogos();
+  return logos;
+}
+export const revalidate = 0;
+
+export default async function Gallery() {
+  const { hasMore, logos } = await lastLogos();
+  return (
+    <section className="w-full py-10 lg:py-16">
+      <div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
+        <InfiniteGallery logos={logos} hasMore={hasMore} />
+      </div>
+    </section>
+  );
+}

app/layout.tsx

@@ -0,0 +1,87 @@
+import type { Metadata } from "next";
+import localFont from "next/font/local";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+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
+          id="content-wrapper"
+          className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth"
+        >
+          <Navigation />
+          {children}
+          <footer className="mt-4 w-full max-w-4xl mx-auto border-t border-zinc-800 pt-8 pb-3 text-center">
+            <p className="text-sm text-zinc-400">
+              Powered by{" "}
+              <a
+                href="https://github.com/huggingface/huggingface.js"
+                target="_blank"
+                className="font-mono text-amber-500 hover:text-amber-400"
+              >
+                huggingface.js
+              </a>{" "}
+              and{" "}
+              <a
+                href="https://huggingface.co/Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design"
+                target="_blank"
+                className="font-mono text-zinc-100 hover:text-white"
+              >
+                Shakker-Labs/FLUX.1-dev-LoRA-Logo-Design
+              </a>
+            </p>
+          </footer>
+        </div>
+        <ToastContainer />
+      </body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,23 @@
+import { getLastLogos } from "./_actions/logos";
+import { Gallery } from "./_components/gallery";
+import { Generation } from "./_components/generation";
+import { HeroHeader } from "./_components/hero-header";
+
+async function lastLogos() {
+  const logos = await getLastLogos();
+  return logos;
+}
+export const revalidate = 0;
+
+export default async function Home() {
+  const logos = await lastLogos();
+  return (
+    <section>
+      <div className="max-w-4xl mx-auto">
+        <HeroHeader />
+        <Generation />
+      </div>
+      <Gallery logos={logos} />
+    </section>
+  );
+}