Spaces:

leptonai
/

tryemoji

Running

App Files Files Community

yadongxie commited on Nov 30, 2023

Commit

89682f8

1 Parent(s): 5818b4d

feat: add web

Browse files

Files changed (36) hide show

.gitignore +38 -0
README.md +47 -1
index.html +2 -9
next.config.js +4 -0
package-lock.json +0 -0
package.json +50 -0
photon/main.py +216 -0
postcss.config.js +6 -0
requirements.txt +6 -0
src/app/api/run/route.ts +22 -0
src/app/api/share/route.ts +50 -0
src/app/globals.css +27 -0
src/app/icon.svg +1 -0
src/app/layout.tsx +48 -0
src/app/og/image.png +0 -0
src/app/og/route.tsx +106 -0
src/app/page.tsx +37 -0
src/components/dice.tsx +44 -0
src/components/emoji-selector.tsx +267 -0
src/components/github.tsx +17 -0
src/components/try-emoji.tsx +275 -0
src/components/ui/select.tsx +160 -0
src/components/ui/slider.tsx +28 -0
src/components/ui/toast.tsx +127 -0
src/components/ui/toaster.tsx +35 -0
src/components/ui/tooltip.tsx +30 -0
src/components/ui/use-toast.tsx +189 -0
src/components/ui/utils.ts +6 -0
src/util/presets.ts +45 -0
src/util/set-emoji-favicon.ts +12 -0
src/util/use-previous.ts +11 -0
src/util/use-response.ts +76 -0
src/util/use-share.ts +50 -0
style.css +11 -23
tailwind.config.ts +36 -0
tsconfig.json +27 -0

.gitignore ADDED Viewed

	@@ -0,0 +1,38 @@

+# 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
+.idea
+photon/__pycache__/
+.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

README.md CHANGED Viewed

@@ -7,5 +7,51 @@ sdk: static
 pinned: false
 license: mit
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 pinned: false
 license: mit
 ---
+<div align="center">
+<h1 align="center">🐱 tryEmoji</h1>
+Turn emoji into amazing artwork via AI
+<a href="https://tryemoji.com">
+<img src="https://tryemoji.com/preview.png">
+</a>
+</div>
+## Features
+- Includes complete front-end and back-end code.
+- Support deployment both locally and in the cloud.
+- Fully based on open source and can be used for commercial purposes.
+## Install
+```bash
+# Install web dependencies
+npm install
+# Install server dependencies
+pip install -r requirements.txt -U
+```
+## Development
+```bash
+# Start server on localhost:8080
+lep photon run -n tryemoji -m photon/main.py --local
+```
+```bash
+# Start web server on localhost:3000
+npm run dev
+```
+## Built with
+- [Lepton AI](https://github.com/leptonai/leptonai)
+- [emoji-mart](https://github.com/missive/emoji-mart)
+- [Real-Time-Latent-Consistency-Model](https://huggingface.co/spaces/radames/Real-Time-Latent-Consistency-Model)

index.html CHANGED Viewed

@@ -3,17 +3,10 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
 	</body>
 </html>

 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width" />
+		<title>🐤 tryEmoji</title>
 		<link rel="stylesheet" href="style.css" />
 	</head>
 	<body>
+	<iframe src="https://www.tryemoji.com/"></iframe>
 	</body>
 </html>

next.config.js ADDED Viewed

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

+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+module.exports = nextConfig;

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

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

+{
+  "name": "useemoji",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
+    "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-slider": "^1.1.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@vercel/analytics": "^1.1.1",
+    "@vercel/kv": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "emoji-mart": "^5.5.2",
+    "lucide-react": "^0.294.0",
+    "lz-string": "^1.5.0",
+    "next": "14.0.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-responsive": "^9.0.2",
+    "react-share": "^5.0.2",
+    "swr": "^2.2.4",
+    "tailwind-merge": "^2.0.0",
+    "use-debounce": "^10.0.0"
+  },
+  "devDependencies": {
+    "@types/lz-string": "^1.5.0",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-prettier": "^5.0.1",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "postcss": "^8",
+    "prettier": "^3.1.0",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
+}

photon/main.py ADDED Viewed

	@@ -0,0 +1,216 @@

+from contextlib import nullcontext
+from io import BytesIO
+import os
+import threading
+from typing import Optional, Union
+import warnings
+from compel import Compel
+from fastapi.responses import StreamingResponse
+from loguru import logger
+from PIL import Image
+import torch
+from leptonai.photon import Photon, FileParam, get_file_content, HTTPException
+EXAMPLE_IMAGE_BASE64 = "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"
+class JPEGResponse(StreamingResponse):
+    media_type = "image/jpeg"
+class ImgPilot(Photon):
+    requirement_dependency = [
+        "torch",
+        "diffusers",
+        "invisible-watermark",
+        "compel",
+        "Pillow",
+    ]
+    # In default, we will use gpu.a10 as the computation resource shape. This should
+    # be fast enough.
+    deployment_template = {
+        "resource_shape": "gpu.a10",
+        "env": {
+            "MODEL": "SimianLuo/LCM_Dreamshaper_v7",
+            "USE_TORCH_COMPILE": "false",
+            "WIDTH": "768",
+            "HEIGHT": "768",
+            "PRINT_PROMPT": "false",
+        },
+    }
+    # A10 should be able to support a maximum concurrency of 8 requests to interleave
+    # IO and compute. This is not tuned by the way.
+    handler_max_concurrency = 1
+    def init(self):
+        from diffusers import AutoPipelineForImage2Image  # type: ignore
+        cuda_available = torch.cuda.is_available()
+        if cuda_available:
+            self.device = torch.device("cuda")
+        else:
+            self.device = torch.device("cpu")
+        self.base = AutoPipelineForImage2Image.from_pretrained(
+            os.environ["MODEL"],
+            torch_dtype=torch.float16 if cuda_available else torch.float32,
+        )
+        self.base.safety_checker = None
+        self.base.requires_safety_checker = False
+        if self.handler_max_concurrency > 1:
+            self.base_lock = threading.Lock()
+        else:
+            self.base_lock = nullcontext()
+        self.print_prompt = os.environ["PRINT_PROMPT"].lower() in [
+            "true",
+            "t",
+            "1",
+            "yes",
+            "y",
+        ]
+        logger.info(f"print_prompt: {self.print_prompt}")
+        if cuda_available:
+            self.base.to("cuda")
+            self.use_torch_compile = os.environ["USE_TORCH_COMPILE"].lower() in [
+                "true",
+                "t",
+                "1",
+                "yes",
+                "y",
+            ]
+            if self.use_torch_compile:
+                if self.handler_max_concurrency > 1:
+                    warnings.warn(
+                        "torch compile does not support multithreading, so we will"
+                        " disable torch compile since handler_max_concurrency > 1."
+                    )
+                else:
+                    self.width = int(os.environ["WIDTH"])
+                    self.height = int(os.environ["HEIGHT"])
+                    logger.info(
+                        "Compiling model with torch.compile. Note that with torch"
+                        " compile, your first invocation will be slow, but subsequent"
+                        " invocations will be faster."
+                    )
+                    self.base.unet = torch.compile(
+                        self.base.unet, mode="reduce-overhead", fullgraph=True
+                    )
+        else:
+            self.use_torch_compile = False
+        self.compel_proc = Compel(
+            tokenizer=self.base.tokenizer,
+            text_encoder=self.base.text_encoder,
+            truncate_long_prompts=False,
+        )  # type: ignore
+        logger.info(f"Initialized model {os.environ['MODEL']}. cuda: {cuda_available}.")
+    @Photon.handler(
+        "run",
+        example={
+            "prompt": (
+                "Portrait of The Terminator, glare pose, detailed, intricate, full of"
+                " colour, cinematic lighting, trending on artstation, 8k,"
+                " hyperrealistic, focused, extreme details, unreal engine 5, cinematic,"
+                " masterpiece"
+            ),
+            "seed": 2159232,
+            "strength": 0.5,
+            "steps": 4,
+            "guidance_scale": 8.0,
+            "width": 512,
+            "height": 512,
+            "lcm_steps": 50,
+            "input_image": EXAMPLE_IMAGE_BASE64,
+        },
+    )
+    def run(
+        self,
+        prompt: str,
+        seed: int,
+        strength: float,
+        steps: int,
+        guidance_scale: float,
+        width: int,
+        height: int,
+        lcm_steps: int,
+        input_image: Optional[Union[str, FileParam]],
+    ) -> JPEGResponse:
+        from diffusers.utils import load_image  # type: ignore
+        import time
+        start = time.time()
+        if self.print_prompt:
+            logger.info(f"Prompt: {prompt}")
+        # diffusers truncates prompt to 77 tokens, in case prompt is too long, we will
+        # use compel to process the prompt (but compel is slower)
+        tokens = self.base.tokenizer(prompt, return_tensors="pt")
+        if tokens.input_ids.shape[1] > 77:
+            prompt_embeds = self.compel_proc(prompt)
+            prompt = None
+        else:
+            prompt_embeds = None
+        if input_image is not None:
+            image_file = get_file_content(input_image, return_file=True)
+            pil_image = Image.open(image_file, formats=["JPEG", "PNG", "GIF", "BMP"])
+            if self.use_torch_compile:
+                # checks width and height parameter, and return error if width and height are not correct
+                if width != self.width or height != self.height:
+                    raise HTTPException(
+                        status_code=400,
+                        detail=(
+                            f"width and height must be {self.width} and"
+                            f" {self.height} when use_torch_compile is true."
+                        ),
+                    )
+                # checks input image height and width, and resize if necessary
+                if pil_image.height != self.height or pil_image.width != self.width:
+                    pil_image = pil_image.resize(
+                        (self.width, self.height), Image.BILINEAR
+                    )
+            input_image = load_image(pil_image).convert("RGB")
+        with self.base_lock:
+            generator = torch.manual_seed(seed)
+            output_image = self.base(
+                prompt=prompt,
+                prompt_embeds=prompt_embeds,
+                generator=generator,
+                image=input_image,
+                strength=strength,
+                num_inference_steps=steps,
+                guidance_scale=guidance_scale,
+                width=width,
+                height=height,
+                lcm_origin_steps=lcm_steps,
+                output_type="pil",
+            )  # type: ignore
+        nsfw_content_detected = (
+            output_image.nsfw_content_detected[0]
+            if "nsfw_content_detected" in output_image
+            else False
+        )  # type: ignore
+        if nsfw_content_detected:
+            raise HTTPException(status_code=400, detail="nsfw content detected")
+        else:
+            img_io = BytesIO()
+            output_image.images[0].save(img_io, format="JPEG")  # type: ignore
+            img_io.seek(0)
+            logger.info(f"Produced output in {time.time() - start} seconds.")
+            return JPEGResponse(img_io)
+if __name__ == "__main__":
+    p = ImgPilot()
+    p.launch()

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

requirements.txt ADDED Viewed

	@@ -0,0 +1,6 @@

+leptonai
+torch
+diffusers
+invisible-watermark
+compel
+Pillow

src/app/api/run/route.ts ADDED Viewed

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

+import { NextRequest } from "next/server";
+const API_URL = process.env?.API_URL || "http://127.0.0.1:8080";
+const API_TOKEN = process.env?.API_TOKEN || "";
+export async function POST(req: NextRequest) {
+  const headers = new Headers();
+  headers.set("Accept", `image/jpeg`);
+  headers.set("Authorization", `Bearer ${API_TOKEN}`);
+  headers.set(
+    "Content-Type",
+    req.headers.get("Content-Type") || "application/json",
+  );
+  const url = new URL("/run", API_URL);
+  return fetch(url.toString(), {
+    body: req.body,
+    method: req.method,
+    headers,
+    duplex: "half",
+  } as unknown as RequestInit);
+}

src/app/api/share/route.ts ADDED Viewed

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

+import { NextRequest } from "next/server";
+import { createClient } from "@vercel/kv";
+const kv =
+  process.env?.KV_REST_API_URL && process.env?.KV_REST_API_TOKEN
+    ? createClient({
+        url: process.env.KV_REST_API_URL,
+        token: process.env.KV_REST_API_TOKEN,
+      })
+    : null;
+export async function POST(req: NextRequest) {
+  const { key, image } = await req.json();
+  if (!kv || !key || !image) {
+    return new Response("", {
+      status: 200,
+    });
+  }
+  const slug = key.replace(/[^a-zA-Z0-9]/g, "_");
+  await kv.set(slug, image);
+  return new Response("", {
+    status: 200,
+  });
+}
+export async function GET(req: NextRequest) {
+  const key = req.nextUrl.searchParams.get("share");
+  if (!kv || !key) {
+    return new Response("", {
+      status: 200,
+    });
+  }
+  const slug = key.replace(/[^a-zA-Z0-9]/g, "_");
+  const image = await kv.get<string>(slug);
+  if (!image) {
+    return new Response("", {
+      status: 200,
+    });
+  }
+  return new Response(image, {
+    status: 200,
+  });
+}

src/app/globals.css ADDED Viewed

	@@ -0,0 +1,27 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+[data-unified="1f5ff"],
+[data-unified="1f997"],
+[data-unified="1fab1"],
+[data-unified="1f95c"],
+[data-unified="1fa7b"],
+[data-unified="1fa79"] {
+  display: none !important;
+}
+em-emoji-picker {
+  height: 512px;
+  width: 320px;
+}
+@media (max-width: 768px) {
+  em-emoji-picker {
+    height: 100px;
+    min-height: 100px;
+    width: 100%;
+  }
+}

src/app/icon.svg ADDED Viewed

src/app/layout.tsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import type { Metadata, Viewport } from "next";
+import { Sriracha } from "next/font/google";
+import "./globals.css";
+import { ReactNode } from "react";
+import { Analytics } from "@vercel/analytics/react";
+const inter = Sriracha({ weight: "400", subsets: ["latin"] });
+const title = "tryEmoji";
+const description = "Turn emoji into amazing artwork via AI";
+export const metadata: Metadata = {
+  title,
+  description,
+  openGraph: {
+    title,
+    description,
+    type: "website",
+    url: "https://tryemoji.com",
+    images: [
+      {
+        url: "https://tryemoji.com/og.png",
+        width: 630,
+        height: 473,
+        alt: "tryEmoji",
+      },
+    ],
+  },
+};
+const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  userScalable: false,
+  maximumScale: 1,
+  minimumScale: 1,
+};
+export { viewport };
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+      <Analytics></Analytics>
+    </html>
+  );
+}

src/app/og/image.png ADDED Viewed

src/app/og/route.tsx ADDED Viewed

	@@ -0,0 +1,106 @@

+import { ImageResponse } from "next/og";
+import { createClient } from "@vercel/kv";
+import { shareString2Json } from "@/util/use-share";
+const kv =
+  process.env?.KV_REST_API_URL && process.env?.KV_REST_API_TOKEN
+    ? createClient({
+        url: process.env.KV_REST_API_URL,
+        token: process.env.KV_REST_API_TOKEN,
+      })
+    : null;
+export const runtime = "edge";
+const siteUrl =
+  process.env.NODE_ENV === "production"
+    ? "https://www.tryemoji.com/"
+    : "http://localhost:3000/";
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const image = await fetch(new URL("./image.png", import.meta.url)).then(
+    (res) => res.arrayBuffer(),
+  );
+  let base64URL = "";
+  let emoji = "";
+  const share = searchParams.get("share");
+  const option = share ? shareString2Json(share as string) : null;
+  const apiURL = new URL("api/share", siteUrl);
+  if (share) {
+    apiURL.searchParams.set("share", share);
+    const res = await fetch(apiURL.toString());
+    base64URL = await res.text();
+    emoji = option?.emoji || "👍";
+  }
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          background: "#f6f6f6",
+          width: "100%",
+          height: "100%",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          position: "relative",
+        }}
+      >
+        <img
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            objectPosition: "center",
+          }}
+          width="800"
+          height="471"
+          src={image as unknown as string}
+        />
+        {emoji && (
+          <span
+            style={{
+              width: 45,
+              height: 45,
+              textAlign: "center",
+              lineHeight: "40px",
+              background: "#0a0a0b",
+              position: "absolute",
+              top: 38,
+              left: 305,
+              fontSize: 40,
+              fontFamily: "sans-serif",
+            }}
+          >
+            {emoji}
+          </span>
+        )}
+        {base64URL && (
+          <img
+            src={base64URL}
+            width="302"
+            height="302"
+            style={{
+              position: "absolute",
+              borderRadius: 8,
+              top: 125,
+              right: 150,
+              width: 302,
+              height: 302,
+              objectFit: "cover",
+              objectPosition: "center",
+            }}
+          />
+        )}
+      </div>
+    ),
+    {
+      width: 800,
+      height: 471,
+    },
+  );
+}

src/app/page.tsx ADDED Viewed

	@@ -0,0 +1,37 @@

+import { Metadata } from "next";
+import TryEmoji from "@/components/try-emoji";
+type Props = {
+  params: { share?: string };
+  searchParams: { [key: string]: string | string[] | undefined };
+};
+export async function generateMetadata(po: Props): Promise<Metadata> {
+  // read route params
+  const share = po.searchParams?.share;
+  const siteUrl =
+    process.env.NODE_ENV === "production"
+      ? "https://www.tryemoji.com/"
+      : "http://localhost:3000/";
+  const ogUrl = new URL("og", siteUrl);
+  if (share) {
+    ogUrl.searchParams.set("share", share as string);
+  }
+  return {
+    openGraph: {
+      images: [
+        {
+          url: ogUrl.toString(),
+          width: 630,
+          height: 473,
+          alt: "tryEmoji",
+        },
+      ],
+    },
+  };
+}
+export default function Home() {
+  return <TryEmoji />;
+}

src/components/dice.tsx ADDED Viewed

	@@ -0,0 +1,44 @@

+import { Dice1, Dice2, Dice3, Dice4, Dice5, Dice6 } from "lucide-react";
+import { FC, useState } from "react";
+const dices = [
+  <Dice1 key="dice-1" />,
+  <Dice2 key="dice-2" />,
+  <Dice3 key="dice-3" />,
+  <Dice4 key="dice-4" />,
+  <Dice5 key="dice-5" />,
+  <Dice6 key="dice-6" />,
+];
+export const Dice: FC = () => {
+  const [click, setClick] = useState(false);
+  const [currentNumber, setCurrentNumber] = useState(3);
+  const rollDice = () => {
+    let rollingTime = 0;
+    setClick(true);
+    const rollInterval = setInterval(
+      () => {
+        setCurrentNumber(Math.floor(Math.random() * 6));
+        rollingTime += 100;
+        // Slow down the rolling
+        if (rollingTime >= 1200) {
+          clearInterval(rollInterval);
+          setClick(false);
+        }
+      },
+      100 - rollingTime / 20,
+    );
+  };
+  return (
+    <div
+      className={click ? "animate-[shake_1.2s_ease-in-out]" : ""}
+      onClick={(event) => {
+        event.preventDefault();
+        rollDice();
+      }}
+    >
+      {dices[currentNumber]}
+    </div>
+  );
+};

src/components/emoji-selector.tsx ADDED Viewed

	@@ -0,0 +1,267 @@

+import Picker from "@emoji-mart/react";
+import data from "@emoji-mart/data";
+import { FC } from "react";
+import { useMediaQuery } from "react-responsive";
+const emojis = (data as unknown as any).emojis as { [key: string]: EmojiSkin };
+export interface EmojiData {
+  id: string;
+  name: string;
+  native: string;
+  unified: string;
+  keywords: string[];
+  shortcodes: string;
+  skin: number;
+  aliases: string[];
+}
+const exceptEmojis = [
+  "bat",
+  "feet",
+  "coral",
+  "snail",
+  "bug",
+  "ant",
+  "bee",
+  "beetle",
+  "ladybug",
+  "cricket",
+  "cockroach",
+  "spider",
+  "scorpion",
+  "mosquito",
+  "fly",
+  "worm",
+  "microbe",
+  "gorilla",
+  "orangutan",
+  "tiger2",
+  "leopard",
+  "zebra_face",
+  "pig_nose",
+  "camel",
+  "black_cat",
+  "water_buffalo",
+  "rat",
+  "spider_web",
+  "service_dog",
+  "mammoth",
+  "frog",
+  "crocodile",
+  "lizard",
+  "snake",
+  "t-rex",
+  "dragon",
+  "empty_nest",
+  "octopus",
+  "ox",
+  "wolf",
+  "headstone",
+  "moyai",
+  "new_moon",
+  "new_moon_with_face",
+  "shrimp",
+  "lobster",
+  "fried_shrimp",
+  "coffin",
+  "drop_of_blood",
+  "pinata",
+  "performing_arts",
+  "rock",
+  "clubs",
+  "chess_pawn",
+  "spades",
+  "knot",
+  "bathtub",
+  "shower",
+  "white_flower",
+  "hammer",
+  "nazar_amulet",
+  "hamsa",
+  "hammer_and_wrench",
+  "squid",
+  "crab",
+  "smoking",
+  "dna",
+  "musical_score",
+  "musical_note",
+  "notes",
+  "dark_sunglasses",
+  "kaaba",
+  "old_key",
+  "bikini",
+  "one-piece_swimsuit",
+  "sari",
+  "sloth",
+  "x-ray",
+];
+interface EmojiSkin {
+  id: string;
+  name: string;
+  keywords: string[];
+  skins: { native: string; shortcodes: string; unified: string }[];
+}
+const categoryIcons = {
+  categoryIcons: {
+    "new-people": {
+      svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M57.89 397.2c-6.262-8.616-16.02-13.19-25.92-13.19c-23.33 0-31.98 20.68-31.98 32.03c0 6.522 1.987 13.1 6.115 18.78l46.52 64C58.89 507.4 68.64 512 78.55 512c23.29 0 31.97-20.66 31.97-32.03c0-6.522-1.988-13.1-6.115-18.78L57.89 397.2zM496.1 352c-44.13 0-79.72 35.75-79.72 80s35.59 80 79.72 80s79.91-35.75 79.91-80S540.2 352 496.1 352zM640 99.38c0-13.61-4.133-27.34-12.72-39.2l-23.63-32.5c-13.44-18.5-33.77-27.68-54.12-27.68c-13.89 0-27.79 4.281-39.51 12.8L307.8 159.7C262.2 192.8 220.4 230.9 183.4 273.4c-24.22 27.88-59.18 63.99-103.5 99.63l56.34 77.52c53.79-35.39 99.15-55.3 127.1-67.27c51.88-22 101.3-49.87 146.9-82.1l202.3-146.7C630.5 140.4 640 120 640 99.38z"/></svg>',
+    },
+  },
+};
+const custom = [
+  {
+    id: "recommend",
+    name: "Recommend",
+    emojis: [
+      emojis["baby_chick"],
+      emojis["hatched_chick"],
+      emojis["dog"],
+      emojis["fox_face"],
+      emojis["lion_face"],
+      emojis["tiger"],
+      emojis["hamster"],
+      emojis["panda_face"],
+      emojis["rabbit"],
+      emojis["polar_bear"],
+      emojis["tangerine"],
+      emojis["watermelon"],
+      emojis["pineapple"],
+      emojis["beer"],
+      emojis["curry"],
+      emojis["cake"],
+      emojis["snow_capped_mountain"],
+      emojis["volcano"],
+      emojis["bridge_at_night"],
+      emojis["kiwifruit"],
+      emojis["stadium"],
+      emojis["foggy"],
+      emojis["night_with_stars"],
+      emojis["cityscape"],
+      emojis["sunrise_over_mountains"],
+      emojis["sunrise"],
+      emojis["city_sunset"],
+      emojis["city_sunrise"],
+    ],
+  },
+  {
+    id: "new-people",
+    name: "People",
+    emojis: [
+      emojis["child"],
+      emojis["boy"],
+      emojis["girl"],
+      emojis["adult"],
+      emojis["person_with_blond_hair"],
+      emojis["man"],
+      emojis["bearded_person"],
+      emojis["man_with_beard"],
+      emojis["woman_with_beard"],
+      emojis["red_haired_man"],
+      emojis["curly_haired_man"],
+      emojis["white_haired_man"],
+      emojis["bald_man"],
+      emojis["woman"],
+      emojis["red_haired_woman"],
+      emojis["red_haired_person"],
+      emojis["curly_haired_woman"],
+      emojis["curly_haired_person"],
+      emojis["white_haired_woman"],
+      emojis["white_haired_person"],
+      emojis["bald_woman"],
+      emojis["bald_person"],
+      emojis["blond-haired-woman"],
+      emojis["blond-haired-man"],
+      emojis["older_adult"],
+      emojis["older_man"],
+      emojis["older_woman"],
+      emojis["person_frowning"],
+      emojis["man-frowning"],
+      emojis["woman-frowning"],
+      emojis["person_with_pouting_face"],
+      emojis["man-pouting"],
+      emojis["woman-pouting"],
+      emojis["health_worker"],
+      emojis["male-doctor"],
+      emojis["female-doctor"],
+      emojis["student"],
+      emojis["male-student"],
+      emojis["female-student"],
+      emojis["teacher"],
+      emojis["male-teacher"],
+      emojis["female-teacher"],
+      emojis["judge"],
+      emojis["male-judge"],
+      emojis["female-judge"],
+      emojis["farmer"],
+      emojis["male-farmer"],
+      emojis["female-farmer"],
+      emojis["cook"],
+      emojis["male-cook"],
+      emojis["female-cook"],
+      emojis["mechanic"],
+      emojis["male-mechanic"],
+      emojis["female-mechanic"],
+      emojis["office_worker"],
+      emojis["male-office-worker"],
+      emojis["female-office-worker"],
+      emojis["scientist"],
+      emojis["male-scientist"],
+      emojis["female-scientist"],
+      emojis["technologist"],
+      emojis["male-technologist"],
+      emojis["female-technologist"],
+      emojis["artist"],
+      emojis["male-artist"],
+      emojis["female-artist"],
+      emojis["astronaut"],
+      emojis["male-astronaut"],
+      emojis["female-astronaut"],
+      emojis["sleuth_or_spy"],
+      emojis["male-detective"],
+      emojis["female-detective"],
+      emojis["construction_worker"],
+      emojis["male-construction-worker"],
+      emojis["female-construction-worker"],
+      emojis["person_with_crown"],
+      emojis["prince"],
+      emojis["princess"],
+      emojis["person_in_tuxedo"],
+      emojis["man_in_tuxedo"],
+      emojis["woman_in_tuxedo"],
+      emojis["bride_with_veil"],
+      emojis["man_with_veil"],
+      emojis["woman_with_veil"],
+    ],
+  },
+];
+export const EmojiSelector: FC<{ onSelect: (e: EmojiData) => void }> = ({
+  onSelect,
+}) => {
+  const isSmallScreen = useMediaQuery({ query: "(max-width: 768px)" });
+  return (
+    <Picker
+      exceptEmojis={exceptEmojis}
+      dynamicWidth={true}
+      custom={custom}
+      categories={[
+        "recommend",
+        "new-people",
+        "nature",
+        "foods",
+        "activity",
+        "places",
+        "objects",
+      ]}
+      theme="dark"
+      categoryIcons={categoryIcons}
+      searchPosition={isSmallScreen ? "none" : "bottom"}
+      navPosition={isSmallScreen ? "none" : "top"}
+      previewPosition={isSmallScreen ? "none" : "bottom"}
+      data={data}
+      onEmojiSelect={onSelect}
+    />
+  );
+};

src/components/github.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+import React from "react";
+export function GithubForkRibbon() {
+  return (
+    <div className="hidden md:block overflow-hidden w-[150px] h-[150px] absolute top-0 z-50 right-0">
+      <div className="bg-amber-600 text-zinc-100 shadow-2xl absolute p-1 z-50 top-[35px] right-[-45px] rotate-45">
+        <a
+          className="w-[200px] inline-block p-1 text-center"
+          href="https://github.com/leptonai/tryemoji"
+          target="_blank"
+        >
+          Fork me on GitHub
+        </a>
+      </div>
+    </div>
+  );
+}

src/components/try-emoji.tsx ADDED Viewed

	@@ -0,0 +1,275 @@

+"use client";
+import { Dice } from "@/components/dice";
+import { EmojiSelector } from "@/components/emoji-selector";
+import { GithubForkRibbon } from "@/components/github";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { Toaster } from "@/components/ui/toaster";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useToast } from "@/components/ui/use-toast";
+import { presetImage, presetArtStyles } from "@/util/presets";
+import { usePrevious } from "@/util/use-previous";
+import { useResponse } from "@/util/use-response";
+import { getShareUrl, Option, useShare } from "@/util/use-share";
+import { clsx } from "clsx";
+import { Check, Download, Share2 } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+import {
+  FacebookIcon,
+  FacebookShareButton,
+  LinkedinIcon,
+  LinkedinShareButton,
+  TwitterShareButton,
+  XIcon,
+} from "react-share";
+import { setEmojiFavicon } from "@/util/set-emoji-favicon";
+export default function TryEmoji() {
+  const { option: presetOption, hasShare } = useShare();
+  const { toast } = useToast();
+  const [emoji, setEmoji] = useState({
+    emoji: presetOption.emoji,
+    name: presetOption.name,
+  });
+  const [preset, setPreset] = useState(
+    presetArtStyles.find((p) => p.prompt === presetOption.prompt)!,
+  );
+  const [strength, setStrength] = useState(presetOption.strength);
+  const [seed, setSeed] = useState(presetOption.seed);
+  const shareOption: Option = useMemo(() => {
+    return {
+      emoji: emoji.emoji,
+      name: emoji.name,
+      prompt: preset.prompt,
+      seed: seed,
+      strength: strength,
+    };
+  }, [emoji.emoji, emoji.name, preset.prompt, seed, strength]);
+  const { image, loading } = useResponse(
+    hasShare,
+    emoji.emoji,
+    emoji.name,
+    preset.prompt,
+    strength,
+    seed,
+  );
+  const previousImage = usePrevious(image);
+  const mergedImage = useMemo(
+    () => image || previousImage || presetImage,
+    [image, previousImage],
+  );
+  useEffect(() => {
+    setEmojiFavicon(emoji.emoji);
+  }, [emoji.emoji]);
+  const shareKey = useMemo(() => {
+    return getShareUrl(shareOption);
+  }, [shareOption]);
+  const shareUrl = useMemo(() => {
+    return `https://tryemoji.com?share=${shareKey}`;
+  }, [shareKey]);
+  const warmOrg: Promise<void> = useMemo(() => {
+    if (image) {
+      return fetch("/api/share", {
+        method: "POST",
+        body: JSON.stringify({
+          image: image,
+          key: shareKey,
+        }),
+      }).then();
+    } else {
+      return new Promise((resolve) => resolve());
+    }
+  }, [image, shareKey]);
+  return (
+    <TooltipProvider delayDuration={50}>
+      <Toaster />
+      <div className="min-h-screen flex flex-col gap-4 bg-zinc-950 items-center justify-center py-4 md:py-12">
+        <GithubForkRibbon></GithubForkRibbon>
+        <div className="text-6xl text-zinc-100">
+          {emoji.emoji || "🐤"} tryEmoji{" "}
+        </div>
+        <div className="text-xl text-zinc-100">
+          Turn emoji into amazing artwork via AI
+        </div>
+        <div className="flex items-center justify-center flex-col md:flex-row gap-2 md:gap-4">
+          <div className="flex-0 w-full md:w-80">
+            <EmojiSelector
+              onSelect={(e) => {
+                const prefix =
+                  e.keywords.indexOf("animal") > -1 ? "super cute" : "";
+                const keyword = e.keywords.join(", ");
+                const emoji = e.native;
+                const name = `${prefix} ${e.name}, ${keyword}`;
+                setEmoji({ emoji, name });
+              }}
+            ></EmojiSelector>
+          </div>
+          <div className="flex-1">
+            <div className="max-w-[100vw] h-auto md:h-[512px] w-[512px] rounded-lg overflow-hidden relative">
+              <img src={mergedImage} className="h-full w-full object-contain" />
+              <div
+                className={clsx("transition absolute inset-0", {
+                  "backdrop-blur-xl": loading,
+                })}
+              ></div>
+              <div className="hidden absolute top-2 right-2 md:flex gap-2 items-center">
+                <FacebookShareButton
+                  beforeOnClick={() => warmOrg}
+                  url={shareUrl}
+                >
+                  <FacebookIcon className="rounded" size={24}></FacebookIcon>
+                </FacebookShareButton>
+                <TwitterShareButton onClick={() => warmOrg} url={shareUrl}>
+                  <XIcon className="rounded" size={24} />
+                </TwitterShareButton>
+                <LinkedinShareButton onClick={() => warmOrg} url={shareUrl}>
+                  <LinkedinIcon className="rounded" size={24} />
+                </LinkedinShareButton>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <button
+                      onClick={() => {
+                        warmOrg.then(() => {
+                          navigator.clipboard.writeText(shareUrl).then(() => {
+                            toast({
+                              description: (
+                                <div className="flex gap-2 text-sm items-center">
+                                  <Check className="text-green-500"></Check>
+                                  Copied, paste to share
+                                </div>
+                              ),
+                            });
+                          });
+                        });
+                      }}
+                      className="flex-0 rounded bg-amber-600 w-6 flex items-center justify-center h-6 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
+                    >
+                      <Share2 size={16}></Share2>
+                    </button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Share</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+              <div className="absolute bottom-2 left-2 right-2 flex gap-2 flex-wrap">
+                <div className="flex flex-auto gap-2 w-full md:w-auto">
+                  <div className="text-xl text-zinc-100">AI</div>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Slider
+                        className="flex-1"
+                        defaultValue={[strength]}
+                        onValueChange={(v) => setStrength(v[0])}
+                        max={0.7}
+                        min={0.5}
+                        step={0.025}
+                      />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>AI strength</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <div className="flex flex-auto md:flex-grow-0 gap-2 w-full md:w-auto">
+                  <Select
+                    value={preset.artist}
+                    onValueChange={(value) =>
+                      setPreset(
+                        presetArtStyles.find((p) => p.artist === value)!,
+                      )
+                    }
+                  >
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <SelectTrigger className="flex-1 w-56 border-0 rounded bg-amber-600 px-2 py-1 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600">
+                          <SelectValue placeholder="Select a fruit" />
+                        </SelectTrigger>
+                      </TooltipTrigger>
+                      <TooltipContent>
+                        <p>Art style</p>
+                      </TooltipContent>
+                    </Tooltip>
+                    <SelectContent>
+                      {presetArtStyles.map((p) => (
+                        <SelectItem key={p.artist} value={p.artist}>
+                          {p.artist}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button
+                        onClick={() => {
+                          setSeed(Math.floor(Math.random() * 2159232));
+                        }}
+                        className="flex-0 rounded bg-amber-600 px-0.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
+                      >
+                        <Dice></Dice>
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Random</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <a
+                        href={image}
+                        download
+                        className="flex-0 block rounded bg-amber-600 px-0.5 py-0.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-600"
+                      >
+                        <Download />
+                      </a>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Download</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="text-xs text-zinc-500 font-sans mt-8 flex gap-2">
+          <a
+            className="hover:text-zinc-100"
+            href="https://lepton.ai"
+            target="_blank"
+          >
+            Powered by Lepton AI
+          </a>
+          |
+          <a
+            className="hover:text-zinc-100"
+            href="https://github.com/leptonai/tryemoji"
+            target="_blank"
+          >
+            Github
+          </a>
+        </div>
+      </div>
+    </TooltipProvider>
+  );
+}

src/components/ui/select.tsx ADDED Viewed

	@@ -0,0 +1,160 @@

+"use client";
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import { cn } from "@/components/ui/utils";
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex w-full items-center justify-between rounded-md border border-input bg-background px-3 py-1 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className,
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "bg-zinc-900 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-0 bg-zinc-900",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative bg-zinc-900 text-zinc-100 flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

src/components/ui/slider.tsx ADDED Viewed

	@@ -0,0 +1,28 @@

+"use client";
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "@/components/ui/utils";
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-amber-500">
+      <SliderPrimitive.Range className="absolute h-full bg-amber-600" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-amber-500 bg-amber-600 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

src/components/ui/toast.tsx ADDED Viewed

	@@ -0,0 +1,127 @@

+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import { cn } from "@/components/ui/utils";
+const ToastProvider = ToastPrimitives.Provider;
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed bottom-0 right-0 z-[100] flex max-h-screen w-fit flex-col-reverse p-4 md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md p-3 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-amber-600 text-zinc-100",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-zinc-100",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-amber-600 transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-zinc-100 group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-zinc-100/50 opacity-0 transition-opacity hover:text-zinc-100 focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

src/components/ui/toaster.tsx ADDED Viewed

	@@ -0,0 +1,35 @@

+"use client";
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast";
+import { useToast } from "@/components/ui/use-toast";
+export function Toaster() {
+  const { toasts } = useToast();
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

src/components/ui/tooltip.tsx ADDED Viewed

	@@ -0,0 +1,30 @@

+"use client";
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/components/ui/utils";
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md px-3 py-1.5 text-sm text-zinc-100 bg-amber-800 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/components/ui/use-toast.tsx ADDED Viewed

	@@ -0,0 +1,189 @@

+// Inspired by react-hot-toast library
+import * as React from "react";
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+let count = 0;
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+type ActionType = typeof actionTypes;
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+interface State {
+  toasts: ToasterToast[];
+}
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+  toastTimeouts.set(toastId, timeout);
+};
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+const listeners: Array<(state: State) => void> = [];
+let memoryState: State = { toasts: [] };
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+type Toast = Omit<ToasterToast, "id">;
+function toast({ ...props }: Toast) {
+  const id = genId();
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+export { useToast, toast };

src/components/ui/utils.ts ADDED Viewed

	@@ -0,0 +1,6 @@

+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/util/presets.ts ADDED Viewed

	@@ -0,0 +1,45 @@

+export const presetArtStyles = [
+  {
+    artist: "Pixar",
+    prompt:
+      "in the style of Pixar, cartoon-style characters, 4k, 8k, unreal engine, octane render photorealistic by cosmicwonder, hdr, photography by cosmicwonder, high definition, symmetrical face, volumetric lighting, dusty haze, photo, octane render, 24mm, 4k, 24mm, DSLR, high quality, 60 fps, ultra realistic",
+  },
+  {
+    artist: "Minecraft",
+    prompt:
+      "in the style of Minecraft Character, minecraft, ultra hd, realistic, vivid colors, highly detailed, UHD drawing, pen and ink, perfect composition",
+  },
+  {
+    artist: "8 Bit pixel",
+    prompt:
+      "pixel style, pixel style, 8 bit pixel art, golden ratio, fake detail, trending pixiv fanbox, acrylic palette knife, style of makoto shinkai studio ghibli genshin impact james gilleard greg rutkowski chiho aoshima",
+  },
+  {
+    artist: "Vincent van Gogh",
+    prompt:
+      "in the style of Vincent van Gogh, with bold, expressive brush strokes and vibrant colors",
+  },
+  {
+    artist: "Claude Monet",
+    prompt:
+      "in the style of Claude Monet, using impressionist techniques with a focus on light and color",
+  },
+  {
+    artist: "Salvador Dalí",
+    prompt:
+      "in the style of Salvador Dalí, with dream-like, bizarre elements and melting clocks",
+  },
+  {
+    artist: "Pablo Picasso",
+    prompt:
+      "in the style of Pablo Picasso's Cubism, with geometric shapes and multiple perspectives merged into one image.",
+  },
+  {
+    artist: "Edvard Munch",
+    prompt:
+      "in the style of Edvard Munch, using intense colors and bold lines to convey strong emotions, such as in 'The Scream'.",
+  },
+];
+export const presetImage =
+  "data:image/jpeg;base64,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";

src/util/set-emoji-favicon.ts ADDED Viewed

	@@ -0,0 +1,12 @@

+"use client";
+export const setEmojiFavicon = (emoji: string) => {
+  if (typeof document === "undefined") return;
+  const href = `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>${emoji}</text></svg>`;
+  const link =
+    document.querySelector("link[rel*='icon']") ||
+    document.createElement("link");
+  link.setAttribute("rel", "icon");
+  link.setAttribute("href", href);
+  document.head.appendChild(link);
+};

src/util/use-previous.ts ADDED Viewed

	@@ -0,0 +1,11 @@

+import { useEffect, useRef } from "react";
+export function usePrevious<T>(value: T) {
+  const ref = useRef<T>();
+  useEffect(() => {
+    if (value) {
+      ref.current = value;
+    }
+  }, [value]);
+  return ref.current;
+}

src/util/use-response.ts ADDED Viewed

	@@ -0,0 +1,76 @@

+import useSWR from "swr";
+const dimension = 512;
+function blobToBase64(blob: Blob): Promise<string> {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.readAsDataURL(blob);
+  });
+}
+function convertEmojiToDataToDataURL(emoji: string): string {
+  const element = document.createElement("canvas");
+  const ctx = element.getContext("2d")!;
+  element.height = dimension;
+  element.width = dimension;
+  ctx.fillStyle = "rgb(24 24 27)";
+  ctx.fillRect(0, 0, element.width, element.height);
+  ctx.textAlign = `center`;
+  ctx.font = `${dimension - 32}px serf`;
+  const textMetrics = ctx.measureText(emoji);
+  const textHeight =
+    textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
+  const y =
+    dimension / 2 + (textMetrics.actualBoundingBoxAscent - textHeight / 2);
+  ctx.fillText(emoji, dimension / 2, y);
+  return element.toDataURL("image/jpeg", 0.5);
+}
+export const useResponse = (
+  revalidateOnMount: boolean,
+  emoji: string,
+  name: string,
+  style: string,
+  strength: number,
+  seed: number,
+) => {
+  const { data, isLoading } = useSWR(
+    [emoji, name, style, strength, seed],
+    async ([base64, name, style, strength, seed]) => {
+      const response = await fetch("/api/run", {
+        headers: {
+          accept: "image/jpeg",
+          "content-type": "application/json",
+        },
+        body: JSON.stringify({
+          input_image: convertEmojiToDataToDataURL(emoji).replace(
+            /^data:image\/(png|jpeg);base64,/,
+            "",
+          ),
+          prompt: `${name}, emoji ${emoji}, ${style}`,
+          guidance_scale: 8,
+          lcm_steps: 50,
+          seed,
+          steps: 4,
+          strength,
+          width: dimension,
+          height: dimension,
+        }),
+        method: "POST",
+      });
+      if (response.status !== 200) return "";
+      const blob = await response.blob();
+      return await blobToBase64(blob);
+    },
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateOnMount,
+      refreshWhenOffline: false,
+      refreshInterval: 0,
+    },
+  );
+  return { image: data as string, loading: isLoading };
+};

src/util/use-share.ts ADDED Viewed

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

+import { presetArtStyles } from "@/util/presets";
+import {
+  decompressFromEncodedURIComponent,
+  compressToEncodedURIComponent,
+} from "lz-string";
+import { useSearchParams } from "next/navigation";
+export interface Option {
+  emoji: string;
+  name: string;
+  prompt: string;
+  seed: number;
+  strength: number;
+}
+const fallbackOptions: Option = {
+  emoji: "🐤",
+  name: "cat",
+  prompt: presetArtStyles[0].prompt,
+  seed: 2159232,
+  strength: 0.7,
+};
+export const shareString2Json = (shareString: string): Option => {
+  try {
+    return JSON.parse(decompressFromEncodedURIComponent(shareString));
+  } catch (_) {
+    return fallbackOptions;
+  }
+};
+export const useShare = (): { option: Option; hasShare: boolean } => {
+  const searchParams = useSearchParams();
+  const shareParam = searchParams.get("share");
+  if (shareParam) {
+    try {
+      return {
+        option: JSON.parse(decompressFromEncodedURIComponent(shareParam)),
+        hasShare: true,
+      };
+    } catch (_) {
+      return { option: fallbackOptions, hasShare: false };
+    }
+  }
+  return { option: fallbackOptions, hasShare: false };
+};
+export const getShareUrl = (option: Option) => {
+  return compressToEncodedURIComponent(JSON.stringify(option));
+};

style.css CHANGED Viewed

@@ -1,28 +1,16 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-.card p:last-child {
-	margin-bottom: 0;
 }

+html, body {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+  width: 100%;
 }
+iframe {
+  border: none;
+  height: 100%;
+  width: 100%;
 }
+* {
+  outline: none;
 }

tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,36 @@

+import type { Config } from "tailwindcss";
+const config: Config = {
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
+        "gradient-conic":
+          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      },
+      keyframes: {
+        shake: {
+          "10%, 90%": {
+            transform: "translate3d(0, 1px, 0)",
+          },
+          "20%, 80%": {
+            transform: "translate3d(0, -2px, 0)",
+          },
+          "30%, 50%, 70%": {
+            transform: "translate3d(0, 4px, 0)",
+          },
+          "40%, 60%": {
+            transform: "translate3d(0, -4px, 0)",
+          },
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;

tsconfig.json ADDED Viewed

	@@ -0,0 +1,27 @@

+{
+  "compilerOptions": {
+    "target": "es5",
+    "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": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}