add sdxl google

app/api/route.ts

@@ -22,19 +22,21 @@ export async function POST(
   const textIsNSFW = await isTextNSFW(inputs, global_headers)
   if (textIsNSFW) return Response.json({ status: 401, ok: false, message: "Prompt is not safe for work." });
 
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/models/stabilityai/stable-diffusion-xl-base-1.0`, {
+  const response = await fetch(`${process.env.API_SDXL_URL}`, {
     method: 'POST',
     body: JSON.stringify({
-      inputs: findStyle?.prompt.replace("{prompt}", inputs) ?? inputs,
+      prompt: findStyle?.prompt.replace("{prompt}", inputs) ?? inputs,
       negative_prompt: findStyle?.negative_prompt ?? "",
     }),
     headers: global_headers,
   })
 
+  
   const res = await response.clone().json().catch(() => ({}));
   if (res?.error) return Response.json({ status: response.status, ok: false, message: res.error });
-
-  const blob = await response.blob()
+  
+  const base64Image = res.images[0];
+  const blob = await fetch(`data:image/png;base64,${base64Image}`).then((r) => r.blob());
   
   const imageIsNSFW = await isImageNSFW(blob, global_headers)
   if (imageIsNSFW) return Response.json({ status: 401, ok: false, message: "Image is not safe for work." });
@@ -51,7 +53,7 @@ export async function POST(
       userId: userId ?? "",
     },
   })
-  
+
   return Response.json({ image: new_image, status: 200, ok: true });
 
 }

app/api/uploader.ts

@@ -1,19 +1,18 @@
-import { uploadFiles } from "./../../node_modules/@huggingface/hub/dist";
+import { uploadFile } from "./../../node_modules/@huggingface/hub/dist";
 import type { RepoDesignation, Credentials } from "./../../node_modules/@huggingface/hub/dist";
 
 export const UploaderDataset = async (blob: Blob, name: string) => {
   const repo: RepoDesignation = { type: "dataset", name: "enzostvs/stable-diffusion-tpu-generations" };
   const credentials: Credentials = { accessToken: process.env.NEXT_APP_HF_TOKEN as string };
 
-  const res: any = await uploadFiles({
+  const res: any = await uploadFile({
     repo,
     credentials,
-    files: [
+    file:
       {
         path: `images/${name}.png`,
         content: blob,
       },
-    ],
   });
 
   if (res?.error) return {

components/button/index.tsx

@@ -15,7 +15,7 @@ export const Button: React.FC<Props> = ({
   return (
     <button
       className={classNames(
-        "rounded-full px-6 py-2.5 font-semibold flex items-center justify-center gap-2.5 border-[2px] transition-all duration-200 max-w-max",
+        "rounded-full px-4 py-1.5 lg:px-6 lg:py-2.5 text-sm lg:text-base font-semibold flex items-center justify-center gap-2.5 border-[2px] transition-all duration-200 max-w-max",
         {
           "bg-primary text-white border-primary": theme === "primary",
           "bg-white text-gray-900 border-white": theme === "white",

components/main/index.tsx

@@ -4,6 +4,8 @@ import { useState } from "react";
 import { HiUserGroup, HiHeart, HiAdjustmentsHorizontal } from "react-icons/hi2";
 import Link from "next/link";
 import Image from "next/image";
+import classNames from "classnames";
+import { createBreakpoint } from "react-use";
 
 import { InputGeneration } from "@/components/input-generation";
 import { Button } from "@/components/button";
@@ -17,35 +19,38 @@ const categories = [
   {
     key: "community",
     label: "Community",
-    icon: <HiUserGroup className="text-2xl" />,
+    icon: <HiUserGroup className="text-lg lg:text-2xl" />,
   },
   {
     key: "my-own",
     label: "My generations",
     isLogged: true,
-    icon: <HiHeart className="text-2xl" />,
+    icon: <HiHeart className="text-lg lg:text-2xl" />,
   },
 ];
 
+const useBreakpoint = createBreakpoint({ L: 1024, XS: 640 });
+
 export const Main = () => {
   const { openWindowLogin, user } = useUser();
+  const breakpoint = useBreakpoint();
   const { list_styles, style, setStyle, loading } = useInputGeneration();
   const [category, setCategory] = useState<string>("community");
   const [advancedSettings, setAdvancedSettings] = useState<boolean>(false);
 
-  console.log("user", user);
-
   return (
     <main className="px-6 z-[2] relative max-w-[1722px] mx-auto">
       <div className="py-2 pl-2 pr-2 lg:pr-4 bg-black bg-opacity-30 backdrop-blur-sm lg:sticky lg:top-4 z-10 rounded-full">
         <div className="flex flex-col lg:flex-row items-center justify-between w-full">
           <InputGeneration />
-          <div className="items-center justify-center lg:justify-end gap-5 w-full mt-6 lg:mt-0 flex">
+          <div className="items-center justify-center flex-col lg:flex-row lg:justify-end gap-5 w-full mt-6 lg:mt-0 flex">
             {categories.map(({ key, label, icon, isLogged }) =>
               isLogged && !user ? (
                 <img
                   key={key}
-                  src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl.svg"
+                  src={`https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-${
+                    breakpoint === "XS" ? "lg" : "xl"
+                  }.svg`}
                   className="cursor-pointer hover:-translate-y-1 transition-all duration-200"
                   onClick={openWindowLogin}
                 />
@@ -63,25 +68,37 @@ export const Main = () => {
             )}
           </div>
         </div>
-        {user && (
-          <div className="flex items-center justify-center lg:justify-end text-white text-right text-sm gap-1 mt-4 lg:mt-0">
-            Logged as
-            <Link
-              href={user?.profile}
-              target="_blank"
-              className="hover:text-blue-500 flex items-center justify-end gap-2"
-            >
-              @{user?.preferred_username}
-              <Image
-                src={user?.picture}
-                width={24}
-                height={24}
-                className="rounded-full ring-1 ring-white/60 border border-black"
-                alt={user?.preferred_username}
-              />
-            </Link>
-          </div>
-        )}
+        <div
+          className={classNames(
+            "flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0",
+            {
+              "text-gray-300 text-xs": !user?.sub,
+              "text-white text-sm": user?.sub,
+            }
+          )}
+        >
+          {user?.sub ? (
+            <>
+              Logged as
+              <Link
+                href={user?.profile}
+                target="_blank"
+                className="hover:text-blue-500 flex items-center justify-end gap-2"
+              >
+                @{user?.preferred_username}
+                <Image
+                  src={user?.picture}
+                  width={24}
+                  height={24}
+                  className="rounded-full ring-1 ring-white/60 border border-black"
+                  alt={user?.preferred_username}
+                />
+              </Link>
+            </>
+          ) : (
+            "to save your generations in your own gallery"
+          )}
+        </div>
       </div>
       <p
         className="text-white/70 font-medium text-sm flex items-center justify-center lg:justify-start gap-2 hover:text-white cursor-pointer mt-3"

prisma/schema.prisma

@@ -4,7 +4,7 @@ generator client {
 
 datasource db {
   provider = "sqlite"
-  url      = "file://data/dev.db"
+  url      = "file:../data/dev.db"
 }
 
 model Collection {

utils/checker/image.ts

@@ -1,8 +1,9 @@
 export const isImageNSFW = async (blob: Blob, global_headers: any) => {
   return new Promise(async (resolve, reject) => {
+    console.log("isImageNSFW running...")
     const headers = new Headers();
     headers.set("Content-Type", "image/*");
-    const request = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/models/DamarJati/NSFW-Filterization-DecentScan`, {
+    const request = await fetch(`${process.env.INFERENCE_API_URL}/models/DamarJati/NSFW-Filterization-DecentScan`, {
       method: 'POST',
       headers: {
         ...global_headers,
@@ -15,10 +16,11 @@ export const isImageNSFW = async (blob: Blob, global_headers: any) => {
     if (res?.error && res?.estimated_time) {
       setTimeout(() => {
         isImageNSFW(blob, global_headers)
-      }, res?.estimated_time * 100);
+      }, res?.estimated_time);
     } else {
       if (res?.error) return Response.json({ status: 500, ok: false, message: res?.error });
       if (res?.length) {
+        console.log(res)
         const isNSFW = res?.find((n: { label: string }) => n.label === "no_safe")?.score > 0.85 ?? false;
         resolve(isNSFW)
       }

utils/checker/prompt.ts

@@ -1,6 +1,6 @@
 export const isTextNSFW = async (prompt: string, headers: any) => {
   return new Promise(async (resolve, reject) => {
-    const request = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/models/michellejieli/NSFW_text_classifier`, {
+    const request = await fetch(`${process.env.INFERENCE_API_URL}/models/michellejieli/NSFW_text_classifier`, {
       method: 'POST',
       body: JSON.stringify({
         inputs: prompt,