From a19954b4f2208551908ecea51565618869836cc8 Mon Sep 17 00:00:00 2001 From: Oscar <83197788+Wosca@users.noreply.github.com> Date: Fri, 10 May 2024 20:29:53 +1000 Subject: [PATCH] UI Improvements Added correct alt text on home page, and made powered by upstash link to the upstash site. --- www/src/app/page.tsx | 254 ++++++++++++++++++------------------ www/src/components/Demo.tsx | 86 ++++++------ www/src/lib/redis.ts | 4 +- 3 files changed, 177 insertions(+), 167 deletions(-) diff --git a/www/src/app/page.tsx b/www/src/app/page.tsx index 1eddfe5..7106e70 100644 --- a/www/src/app/page.tsx +++ b/www/src/app/page.tsx @@ -1,37 +1,38 @@ -import CodeSection from '@/components/CodeSection' -import Demo from '@/components/Demo' -import { Icons } from '@/components/Icons' -import YoutubePlayer from '@/components/YoutubePlayer' -import { redis } from '@/lib/redis' -import { cn } from '@/lib/utils' -import { Check, Star } from 'lucide-react' -import localFont from 'next/font/local' +import CodeSection from "@/components/CodeSection"; +import Demo from "@/components/Demo"; +import { Icons } from "@/components/Icons"; +import YoutubePlayer from "@/components/YoutubePlayer"; +import { redis } from "@/lib/redis"; +import { cn } from "@/lib/utils"; +import { Check, Star } from "lucide-react"; +import localFont from "next/font/local"; const fontScary = localFont({ - src: '../assets/Scary.ttf', -}) + src: "../assets/Scary.ttf", +}); export default async function Home() { - const requests = await redis.get('served-requests') + const requests = await redis.get("served-requests"); return ( -
-
-
-
-
+
+
+
+
+

- + "relative tracking-tight sm:text-left mt-10 font-bold !leading-[4rem] text-gray-900 text-5xl md:text-7xl" + )} + > + Profan - + i - + swaer-emoji @@ -39,118 +40,121 @@ export default async function Home() { API

-

- Detecting toxic content has always been{' '} +

+ Detecting toxic content has always been{" "} + )} + > slow - {' '} - and{' '} + {" "} + and{" "} + )} + > expensive . Not anymore. Introducing a fast, free and open-source profanity filter for your web apps.

-
    -
    -
  • - Much +
      +
      +
    • + Much faster and cheaper to run than AI
      • -
    • - Pretty accurate +
    • + Pretty + accurate
      • -
    • - 100% +
    • + 100% free & open-source
    -
    -
    +
    +
    Image Description Image Description Image Description Image Description Image Description
    -
    -
    - - - - - +
    +
    + + + + +
    -

    - +

    + {(Math.ceil(Number(requests) / 10) * 10).toLocaleString()} - {' '} - API requests served{' '} + {" "} + API requests served{" "}

    -
    +
    -
    +
    -
    -
    -
    -
    -

    - "Hate speech{' '} - +
    +
    +
    +
    +

    + "Hate speech{" "} + f@#k!ng - {' '} + {" "} sucks"

    -

    +

    - guy from my discord (i forgot who 💀)

    @@ -158,59 +162,59 @@ export default async function Home() {

    -

    - +

    + Moderating profanity is a thankless job. - {' '} + {" "} If you run a web app with any kind of user generated content, it's your responsibility to keep things in order. That's a challenge if your users keep dropping F-bombs like confetti at a toddler's birthday party.

    - + -

    +

    Profanity on your website...

    -
    -
    -
    -
    +
    +
    +
    +
    shocked-emoji
    -

    +

    ...scares away new visitors

    -

    +

    Imagine your ideal customer waddling through a minefield of four-letter words to find your amazing product. Not exactly a recipe for conversion is it??

    -
    -
    -
    +
    +
    +
    swear-emoji
    -

    ...makes you look bad

    -

    +

    ...makes you look bad

    +

    Your sweet grandma wants to see what her sunshine is doing on the internet and stumbles upon your website. Do you really - need her to put on a{' '} - + need her to put on a{" "} + hazmat suit - {' '} + {" "} first?

    @@ -219,39 +223,41 @@ export default async function Home() {
    -
    -
    -

    - There's a better{' '} +
    +
    +

    + There's a better{" "} way

    -

    - +

    + F@#k moderating content manually! - {' '} + {" "} Let ProfanityAPI do the dirty work of keeping your user input clean.

    -
    +
    -

    Make an API request

    -
    + id="api" + className="w-full flex flex-col items-center mt-12 px-4" + > +

    Make an API request

    +

    - ) + ); } diff --git a/www/src/components/Demo.tsx b/www/src/components/Demo.tsx index 4ac7f8e..6f0a219 100644 --- a/www/src/components/Demo.tsx +++ b/www/src/components/Demo.tsx @@ -1,67 +1,68 @@ -'use client' +"use client"; -import { checkProfanity } from '@/actions' -import { useMutation } from '@tanstack/react-query' -import { useState } from 'react' -import { Button } from './ui/button' -import { Input } from './ui/input' -import { Icons } from './Icons' +import { checkProfanity } from "@/actions"; +import { useMutation } from "@tanstack/react-query"; +import { useState } from "react"; +import { Button } from "./ui/button"; +import { Input } from "./ui/input"; +import { Icons } from "./Icons"; const Demo = () => { const [message, setMessage] = useState( - 'this is definitely not a swear word' - ) + "this is definitely not a swear word" + ); const { data, mutate, isPending, error } = useMutation({ - mutationKey: ['check-profanity'], + mutationKey: ["check-profanity"], mutationFn: checkProfanity, onSettled: (data) => { - if (data && 'error' in data) { - throw new Error(data.error) + if (data && "error" in data) { + throw new Error(data.error); } }, - }) + }); - const successData = data && !('error' in data) ? data : undefined + const successData = data && !("error" in data) ? data : undefined; return ( -
    -
    -
    -
    - +
    +
    +
    +
    + POST -
    -

    https://vector.profanity.dev

    +
    +

    https://vector.profanity.dev

    -
    +
    { - if (e.key === 'Enter') mutate({ message }) + if (e.key === "Enter") mutate({ message }); }} onChange={({ target }) => { - setMessage(target.value) + setMessage(target.value); }} />
    -
    +
    {successData ? ( -
    -

    +

    +

    {successData.score > 0.95 ? ( - 🚨🚨😱😱 OH GOD, VERY BIG PROFANITY DETECTED!! 🚨🚨😱😱{' '} + 🚨🚨😱😱 OH GOD, VERY BIG PROFANITY DETECTED!! 🚨🚨😱😱{" "} ) : successData.score > 0.9 ? ( 🚨😱 BIG PROFANITY DETECTED!! 🚨😱 @@ -74,27 +75,30 @@ const Demo = () => { ) : null}

    -

    +

    score (higher is worse): {successData.score.toFixed(3)}

    ) : ( -

    Results will be shown here

    +

    Results will be shown here

    )}
    {error ? ( -

    - Error: {error.message} +

    + Error: {error.message}

    ) : null}
    -
    - powered by -
    + + powered by +
    - ) -} + ); +}; -export default Demo +export default Demo; diff --git a/www/src/lib/redis.ts b/www/src/lib/redis.ts index bf14b1b..284c9d0 100644 --- a/www/src/lib/redis.ts +++ b/www/src/lib/redis.ts @@ -1,6 +1,6 @@ -import { Redis } from '@upstash/redis' +import { Redis } from "@upstash/redis"; export const redis = new Redis({ url: process.env.UPSTASH_REDIS_REST_URL!, token: process.env.UPSTASH_REDIS_REST_TOKEN!, -}) +});