Spaces:

enzostvs
/

hugger-roaster

Running

App Files Files Community

enzostvs HF staff commited on Aug 30

Commit

bab2147

•

1 Parent(s): 704ade6

share roast feature

Browse files

Files changed (16) hide show

Dockerfile +12 -4
app/[roastId]/page.tsx +50 -0
app/actions/roast.ts +20 -0
app/actions/share.ts +21 -0
app/api/roast/route.ts +0 -16
app/layout.tsx +5 -1
app/page.tsx +38 -23
components/copy.tsx +47 -0
components/quote.tsx +22 -0
entrypoint.sh +2 -0
package-lock.json +77 -1
package.json +2 -0
prisma/dev.db +0 -0
prisma/schema.prisma +14 -0
utils/prisma.ts +4 -0
utils/roast copy.ts +0 -55

Dockerfile CHANGED Viewed

@@ -1,24 +1,32 @@
 # Dockerfile
 # Use an official Node.js runtime as the base image
 FROM node:18
 # Set the working directory in the container
 WORKDIR /usr/src/app
 # Copy package.json and package-lock.json to the container
-COPY package.json package-lock.json ./
 # Install dependencies
 RUN npm install
 # Copy the rest of the application files to the container
-COPY . .
 # Build the Next.js application for production
-RUN npm run build
 # Expose the application port (assuming your app runs on port 3000)
 EXPOSE 3000
 # Start the application
-CMD ["npm", "start"]

 # 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"]

app/[roastId]/page.tsx ADDED Viewed

	@@ -0,0 +1,50 @@

+import { redirect } from "next/navigation";
+import Image from "next/image";
+import { getRoast } from "@/app/actions/roast";
+import { Quote } from "@/components/quote";
+import Logo from "@/assets/logo.svg";
+import Link from "next/link";
+async function get(id: string) {
+  const roast = await getRoast({ id });
+  return roast;
+}
+export default async function Roast({
+  params: { roastId },
+}: {
+  params: { roastId: string };
+}) {
+  const quote = await get(roastId);
+  if (!quote?.data) {
+    redirect("/");
+  }
+  return (
+    <div>
+      <header className="flex items-start max-lg:gap-1 lg:items-center justify-between max-lg:flex-col border-b border-zinc-200 pb-5">
+        <Image
+          src={Logo}
+          alt="logo hugging face"
+          width={100}
+          height={100}
+          className="object-contain w-36 lg:w-44"
+        />
+        <div>
+          <p className="text-sm text-zinc-500">
+            Roast your favorite Hugging Face user! 👹
+          </p>
+        </div>
+      </header>
+      <Quote data={quote.data?.text}>
+        <Link
+          href="/"
+          className="bg-black rounded-full inline-block px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 mt-5"
+        >
+          Roast another user! 🧨
+        </Link>
+      </Quote>
+    </div>
+  );
+}

app/actions/roast.ts CHANGED Viewed

@@ -5,6 +5,7 @@ import { HfInference } from '@huggingface/inference'
 import { formatInformations, transformForInference } from "@/utils/roast";
 import { FormProps } from "@/components/form";
 const MODEL_ID = "meta-llama/Meta-Llama-3.1-70B-Instruct";
@@ -60,4 +61,23 @@ export async function roast({ username, language }: FormProps) {
   return {
     data: res.generated_text
   }
 }

 import { formatInformations, transformForInference } from "@/utils/roast";
 import { FormProps } from "@/components/form";
+import prisma from "@/utils/prisma";
 const MODEL_ID = "meta-llama/Meta-Llama-3.1-70B-Instruct";
   return {
     data: res.generated_text
   }
+}
+export async function getRoast({ id } : { id: string }) {
+  const roast = await prisma.quote.findUnique({
+    where: {
+      id
+    }
+  })
+  if (!roast) {
+    return {
+      error: "Roast not found",
+      status: 404
+    }
+  }
+  return {
+    data: roast
+  }
 }

app/actions/share.ts ADDED Viewed

	@@ -0,0 +1,21 @@

+"use server";
+import prisma from "@/utils/prisma";
+export interface ShareProps {
+  hf_user: string;
+  text: string;
+}
+export async function share(form: ShareProps) {
+  const quote = await prisma.quote.create({
+    data: {
+      hf_user: form.hf_user,
+      text: form.text
+    }
+  })
+  return {
+    data: quote
+  }
+}

app/api/roast/route.ts DELETED Viewed

@@ -1,16 +0,0 @@
-import { NextResponse } from "next/server";
-export async function POST(req: Request) {
-  const body = await req.json();
-  console.log(body);
-  // fetch the user's username from the body
-  const { username } = body;
-  // fetch user from hugging face API
-  const user = await fetch(`https://huggingface.co/api/users/${username}`);
-  console.log(user);
-  return NextResponse.json({ message: "Roasted!" });
-}

app/layout.tsx CHANGED Viewed

@@ -16,7 +16,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
     </html>
   );
 }

 }>) {
   return (
     <html lang="en">
+      <body className={inter.className}>
+        <section className="min-h-screen h-full w-full flex items-center justify-center flex-col bg-zinc-100 gap-5 overflow-auto p-6">
+          {children}
+        </section>
+      </body>
     </html>
   );
 }

app/page.tsx CHANGED Viewed

@@ -4,7 +4,10 @@ import Image from "next/image";
 import classNames from "classnames";
 import { roast } from "@/app/actions/roast";
 import { Form, FormProps } from "@/components/form";
 import Logo from "@/assets/logo.svg";
@@ -12,6 +15,9 @@ export default function Home() {
   const [data, setData] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
   const handleRoast = async (form: FormProps) => {
     setError("");
@@ -26,14 +32,25 @@ export default function Home() {
     if (res.error) {
       setError(res.error);
     } else {
       setData(res?.data);
     }
     setLoading(false);
   };
   return (
-    <section className="min-h-screen h-full w-full flex items-center justify-center flex-col bg-zinc-100 gap-5 overflow-auto p-6">
       <div className="max-w-2xl w-full border border-gray-200 bg-white rounded-3xl p-8 grid gap-8 shadow-xl shadow-black/5">
         <header className="flex items-start max-lg:gap-1 lg:items-center justify-between max-lg:flex-col border-b border-zinc-200 pb-5">
           <Image
@@ -58,29 +75,27 @@ export default function Home() {
         <Form loading={loading} onSubmit={handleRoast} />
       </div>
       {data && (
-        <div className="max-w-2xl w-full border border-gray-200 bg-white rounded-3xl p-8 shadow-xl shadow-black/5 relative z-[1] overflow-hidden">
-          <p className="text-[8rem] absolute bottom-0 translate-y-1/3 right-0 opacity-20 -z-[1]">
-            🧨
-          </p>
-          <p className="uppercase text-base tracking-wider font-semibold mb-2">
-            Roasting
-          </p>
-          <div className="text-lg text-gray-500 leading-relaxed container mx-auto text-pretty whitespace-break-spaces">
-            {data}
-          </div>
-          <button
-            className={classNames(
-              "bg-black rounded-full mt-4 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:bg-zinc-300 disabled:text-zinc-500 disabled:cursor-not-allowed",
-              {
-                // "animate-pulse": loading,
               }
-            )}
-            disabled={true}
-          >
-            Share (coming soon)
-          </button>
-        </div>
       )}
-    </section>
   );
 }

 import classNames from "classnames";
 import { roast } from "@/app/actions/roast";
+import { share, ShareProps } from "@/app/actions/share";
 import { Form, FormProps } from "@/components/form";
+import { CopyToClipboard } from "@/components/copy";
+import { Quote } from "@/components/quote";
 import Logo from "@/assets/logo.svg";
   const [data, setData] = useState("");
   const [error, setError] = useState("");
   const [loading, setLoading] = useState(false);
+  const [loadingShare, setLoadingShare] = useState(false);
+  const [hfUser, setHfUser] = useState<string | undefined>(undefined);
+  const [quote, setQuote] = useState<string | undefined>(undefined);
   const handleRoast = async (form: FormProps) => {
     setError("");
     if (res.error) {
       setError(res.error);
     } else {
+      setQuote(undefined);
+      setHfUser(form.username);
       setData(res?.data);
     }
     setLoading(false);
   };
+  const handleShare = async (form: ShareProps) => {
+    setLoadingShare(true);
+    const res = await share({ hf_user: form.hf_user, text: form.text });
+    if (res?.data) {
+      setQuote(res.data.id);
+    }
+    setLoadingShare(false);
+  };
   return (
+    <>
       <div className="max-w-2xl w-full border border-gray-200 bg-white rounded-3xl p-8 grid gap-8 shadow-xl shadow-black/5">
         <header className="flex items-start max-lg:gap-1 lg:items-center justify-between max-lg:flex-col border-b border-zinc-200 pb-5">
           <Image
         <Form loading={loading} onSubmit={handleRoast} />
       </div>
       {data && (
+        <Quote data={data}>
+          {quote ? (
+            <CopyToClipboard id={quote} />
+          ) : (
+            <button
+              className={classNames(
+                "bg-black rounded-full mt-4 px-4 py-2.5 text-sm font-medium text-white hover:bg-zinc-800 disabled:bg-zinc-300 disabled:text-zinc-500 disabled:cursor-not-allowed",
+                {
+                  "animate-pulse": loadingShare,
+                }
+              )}
+              disabled={loadingShare}
+              onClick={() =>
+                hfUser && handleShare({ hf_user: hfUser, text: data })
               }
+            >
+              {loadingShare ? "Creating a quote..." : "Share my roast!"}
+            </button>
+          )}
+        </Quote>
       )}
+    </>
   );
 }

components/copy.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import classNames from "classnames";
+import { CopyIcon } from "lucide-react";
+import { useMemo, useState } from "react";
+import { useCopyToClipboard, useUpdateEffect } from "react-use";
+export const CopyToClipboard = ({ id }: { id: string }) => {
+  const [state, copyToClipboard] = useCopyToClipboard();
+  const [copied, setCopied] = useState(false);
+  const url = useMemo(() => {
+    return `https://huggingface.co/spaces/enzostvs/hugger-roaster/${id}`;
+  }, [id]);
+  const handleCopy = () => {
+    setCopied(true);
+    copyToClipboard(url);
+    setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+  };
+  return (
+    <div className="w-full mt-5">
+      <p className="text-xs text-zinc-500">
+        Share this link with your friends so they can see your roast and try it
+        out themselves!
+      </p>
+      <div
+        className="bg-white mt-2 max-w-max rounded-md mr-2 border border-gray-200 text-sm px-3 py-2.5 relative ring-transparent text-zinc-600 hover:ring-blue-500/20 ring-[3px] flex items-center justify-center group"
+        onClick={handleCopy}
+      >
+        <div
+          className={classNames(
+            "bg-black/80 text-xs text-white px-2 py-1 rounded-md absolute left-0 top-0 -translate-y-1/2 transition-all duration-200",
+            {
+              "opacity-0 !translate-y-0": !copied,
+            }
+          )}
+        >
+          Copied!
+        </div>
+        <CopyIcon className="w-4 h-4 text-zinc-400 mr-2 group-hover:text-blue-500" />
+        <p className="flex-1">{url}</p>
+      </div>
+    </div>
+  );
+};

components/quote.tsx ADDED Viewed

	@@ -0,0 +1,22 @@

+export const Quote = ({
+  data,
+  children,
+}: {
+  data: string;
+  children?: React.ReactNode;
+}) => {
+  return (
+    <div className="max-w-2xl w-full border border-gray-200 bg-white rounded-3xl p-8 shadow-xl shadow-black/5 relative z-[1] overflow-hidden">
+      <p className="text-[8rem] absolute bottom-0 translate-y-1/3 right-0 opacity-20 -z-[1]">
+        🧨
+      </p>
+      <p className="uppercase text-base tracking-wider font-semibold mb-2">
+        Roasting
+      </p>
+      <div className="text-lg text-gray-500 leading-relaxed container mx-auto text-pretty whitespace-break-spaces">
+        {data}
+      </div>
+      {children}
+    </div>
+  );
+};

entrypoint.sh ADDED Viewed

	@@ -0,0 +1,2 @@


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

package-lock.json CHANGED Viewed

@@ -9,10 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@huggingface/inference": "^2.8.0",
         "@xenova/transformers": "^2.17.2",
         "classnames": "^2.5.1",
         "lucide-react": "^0.436.0",
         "next": "14.2.7",
         "react": "^18",
         "react-dom": "^18",
         "react-use": "^17.5.1"
@@ -460,6 +462,63 @@
         "node": ">=14"
       }
     },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
@@ -2463,7 +2522,6 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -4308,6 +4366,24 @@
         "node": ">= 0.8.0"
       }
     },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

       "version": "0.1.0",
       "dependencies": {
         "@huggingface/inference": "^2.8.0",
+        "@prisma/client": "^5.19.0",
         "@xenova/transformers": "^2.17.2",
         "classnames": "^2.5.1",
         "lucide-react": "^0.436.0",
         "next": "14.2.7",
+        "prisma": "^5.19.0",
         "react": "^18",
         "react-dom": "^18",
         "react-use": "^17.5.1"
         "node": ">=14"
       }
     },
+    "node_modules/@prisma/client": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.19.0.tgz",
+      "integrity": "sha512-CzOpau+q1kEWQyoQMvlnXIHqPvwmWbh48xZ4n8KWbAql0p8PC0BIgSTYW5ncxXa4JSEff0tcoxSZB874wDstdg==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=16.13"
+      },
+      "peerDependencies": {
+        "prisma": "*"
+      },
+      "peerDependenciesMeta": {
+        "prisma": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@prisma/debug": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.19.0.tgz",
+      "integrity": "sha512-+b/G0ubAZlrS+JSiDhXnYV5DF/aTJ3pinktkiV/L4TtLRLZO6SVGyFELgxBsicCTWJ2ZMu5vEV/jTtYCdjFTRA=="
+    },
+    "node_modules/@prisma/engines": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@prisma/engines/-/engines-5.19.0.tgz",
+      "integrity": "sha512-UtW+0m4HYoRSSR3LoDGKF3Ud4BSMWYlLEt4slTnuP1mI+vrV3zaDoiAPmejdAT76vCN5UqnWURbkXxf66nSylQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/debug": "5.19.0",
+        "@prisma/engines-version": "5.19.0-31.5fe21811a6ba0b952a3bc71400666511fe3b902f",
+        "@prisma/fetch-engine": "5.19.0",
+        "@prisma/get-platform": "5.19.0"
+      }
+    },
+    "node_modules/@prisma/engines-version": {
+      "version": "5.19.0-31.5fe21811a6ba0b952a3bc71400666511fe3b902f",
+      "resolved": "https://registry.npmjs.org/@prisma/engines-version/-/engines-version-5.19.0-31.5fe21811a6ba0b952a3bc71400666511fe3b902f.tgz",
+      "integrity": "sha512-GimI9aZIFy/yvvR11KfXRn3pliFn1QAkdebVlsXlnoh5uk0YhLblVmeYiHfsu+wDA7BeKqYT4sFfzg8mutzuWw=="
+    },
+    "node_modules/@prisma/fetch-engine": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@prisma/fetch-engine/-/fetch-engine-5.19.0.tgz",
+      "integrity": "sha512-oOiPNtmJX0cP/ebu7BBEouJvCw8T84/MFD/Hf2zlqjxkK4ojl38bB9i9J5LAxotL6WlYVThKdxc7HqoWnPOhqQ==",
+      "dependencies": {
+        "@prisma/debug": "5.19.0",
+        "@prisma/engines-version": "5.19.0-31.5fe21811a6ba0b952a3bc71400666511fe3b902f",
+        "@prisma/get-platform": "5.19.0"
+      }
+    },
+    "node_modules/@prisma/get-platform": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@prisma/get-platform/-/get-platform-5.19.0.tgz",
+      "integrity": "sha512-s9DWkZKnuP4Y8uy6yZfvqQ/9X3/+2KYf3IZUVZz5OstJdGBJrBlbmIuMl81917wp5TuK/1k2TpHNCEdpYLPKmg==",
+      "dependencies": {
+        "@prisma/debug": "5.19.0"
+      }
+    },
     "node_modules/@protobufjs/aspromise": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@protobufjs/aspromise/-/aspromise-1.1.2.tgz",
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
       "hasInstallScript": true,
       "optional": true,
       "os": [
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prisma": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/prisma/-/prisma-5.19.0.tgz",
+      "integrity": "sha512-Pu7lUKpVyTx8cVwM26dYh8NdvMOkMnJXzE8L6cikFuR4JwyMU5NKofQkWyxJKlTT4fNjmcnibTvklV8oVMrn+g==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@prisma/engines": "5.19.0"
+      },
+      "bin": {
+        "prisma": "build/index.js"
+      },
+      "engines": {
+        "node": ">=16.13"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.3"
+      }
+    },
     "node_modules/prop-types": {
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",

package.json CHANGED Viewed

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@huggingface/inference": "^2.8.0",
     "@xenova/transformers": "^2.17.2",
     "classnames": "^2.5.1",
     "lucide-react": "^0.436.0",
     "next": "14.2.7",
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.5.1"

   },
   "dependencies": {
     "@huggingface/inference": "^2.8.0",
+    "@prisma/client": "^5.19.0",
     "@xenova/transformers": "^2.17.2",
     "classnames": "^2.5.1",
     "lucide-react": "^0.436.0",
     "next": "14.2.7",
+    "prisma": "^5.19.0",
     "react": "^18",
     "react-dom": "^18",
     "react-use": "^17.5.1"

prisma/dev.db ADDED Viewed

Binary file (20.5 kB). View file

prisma/schema.prisma ADDED Viewed

	@@ -0,0 +1,14 @@

+generator client {
+  provider = "prisma-client-js"
+}
+datasource db {
+  provider = "sqlite"
+  url      = env("DATABASE_URL")
+}
+model Quote {
+  id      String @id @default(cuid())
+  hf_user String
+  text    String
+}

utils/prisma.ts ADDED Viewed

	@@ -0,0 +1,4 @@

+import { PrismaClient } from '@prisma/client'
+const prisma = new PrismaClient()
+export default prisma

utils/roast copy.ts DELETED Viewed

@@ -1,55 +0,0 @@
-const formatSpacesInfos = (spaces: any) => {
-  const texts: string[] = []
-  spaces.map((space: any) => {
-    let text = `${space.cardData?.title} has ${space.likes} likes and has been updated ${space.lastModified} ago.`
-    if (space.cardData?.short_description) {
-      text += `The space description is: ${space.cardData?.short_description}`
-    }
-    texts.push(text)
-  })
-  return texts.join("\n")
-}
-const formatModelsInfos = (models: any) => {
-  const texts: string[] = []
-  models.map((model: any) => {
-    let text = `${model.id?.split("/")[1]} has ${model.likes} likes and ${model.downloads} downloads.`
-    if (model.gating) {
-      text += `You should ask for access to this model.`
-    } else {
-      text += `This model is public.`
-    }
-    text += `This model is about ${model.pipeline_tag}`
-    texts.push(text)
-  })
-  return texts.join("\n")
-}
-const formatUserInfos = (user: any, countFollowing: number, countFollowers: number, spacesLikes: number, modelsLikes: number, spaces: any, models: any) => {
-  return `
-  The user ${user.fullname} has ${countFollowers} followers and is following ${countFollowing} users.
-He is part of ${user.orgs?.length ?? 0} organizations.
-He is owner of ${spaces?.length ?? 0} spaces and has ${models?.length ?? 0} models.
-He already liked ${user.likes?.length ?? 0} models/spaces/datasets. This user is ${user.isPro ? "pro" : "not pro"}.
-He has ${spacesLikes} likes on his spaces and ${modelsLikes} likes on his models.
-`
-}
-export const formatInformations = (
-  user: any,
-  countFollowing: number,
-  countFollowers: number,
-  spaces: any,
-  models: any,
-  spacesLikes: number,
-  modelsLikes: number
-) => {
-  const userInfos = formatUserInfos(user, countFollowing, countFollowers, spacesLikes, modelsLikes, spaces, models)
-  const spacesInfos = formatSpacesInfos(spaces.slice(0, 6))
-  const modelsInfos = formatModelsInfos(models.slice(0, 6))
-  return `${userInfos}\n\n${spacesInfos}\n\n${modelsInfos}`
-}