{children}
27 |
31 |
32 |
33 |
34 | {content}
35 |
36 | 
3 | Spirals
4 | 5 | 6 |7 | Generate beautiful AI spiral art with one click. Powered by Vercel and Replicate. 8 |
9 | 10 |
11 |
12 | 
20 | Introduction · 21 | Tech Stack · 22 | Deploy Your Own · 23 | Author 24 |
25 |26 | 27 | ## Introduction 28 | 29 | Spirals is an AI app for you to generate beautiful spiral art with one click. Powered by Vercel and Replicate. 30 | 31 | https://github.com/steven-tey/spirals/assets/28986134/9f0202d4-2a31-47a0-b43f-bdcd189743ef 32 | 33 | ## Tech Stack 34 | 35 | - Next.js [App Router](https://nextjs.org/docs/app) 36 | - Next.js [Server Actions](https://nextjs.org/docs/app/api-reference/functions/server-actions) 37 | - [Bun](https://bun.sh/) for compilation 38 | - [Vercel Blob](https://vercel.com/storage/blob) for image storage 39 | - [Vercel KV](https://vercel.com/storage/kv) for redis 40 | - [`promptmaker`](https://github.com/zeke/promptmaker) lib by @zeke for generating random prompts 41 | 42 | ## Deploy Your Own 43 | 44 | You can deploy this template to Vercel with the button below: 45 | 46 | [](https://stey.me/spirals-deploy) 47 | 48 | Note that you'll need to: 49 | 50 | - Set up a [Replicate](https://replicate.com) account to get the `REPLICATE_API_TOKEN` env var. 51 | - Set up [Vercel KV](https://vercel.com/docs/storage/vercel-kv/quickstart) to get the 52 | - Set up [Vercel Blob](https://vercel.com/docs/storage/vercel-blob/quickstart) 53 | 54 | ## Author 55 | 56 | - Steven Tey ([@steventey](https://twitter.com/steventey)) 57 | -------------------------------------------------------------------------------- /components/form-rsc.tsx: -------------------------------------------------------------------------------- 1 | import Form from "@/components/form"; 2 | import { Twitter } from "@/components/icons"; 3 | import PhotoBooth from "@/components/photo-booth"; 4 | import { CountDisplay, GeneratedCount } from "./generated-count"; 5 | import { Suspense } from "react"; 6 | 7 | export default function FormRSC({ 8 | prompt, 9 | pattern, 10 | image, 11 | }: { 12 | prompt?: string; 13 | pattern?: string; 14 | image: string | null; 15 | }) { 16 | return ( 17 |
18 |
24 |
65 | );
66 | }
67 |
--------------------------------------------------------------------------------
/app/t/[id]/opengraph-image.tsx:
--------------------------------------------------------------------------------
1 | import { ImageResponse } from "next/server";
2 | import { notFound } from "next/navigation";
3 | import { kv } from "@vercel/kv";
4 |
5 | export default async function DynamicOG({
6 | params,
7 | }: {
8 | params: { id: string };
9 | }) {
10 | const data = await kv.hgetall<{ prompt: string; image?: string }>(params.id);
11 | if (!data) {
12 | return notFound();
13 | }
14 |
15 | const [inter] = await Promise.all([
16 | fetch(
17 | "https://github.com/rsms/inter/raw/master/docs/font-files/Inter-Regular.woff",
18 | ).then((res) => res.arrayBuffer()),
19 | ]);
20 |
21 | return new ImageResponse(
22 | (
23 | 26 | Introducing Spirals 27 |
28 | 29 |33 | Spirals 34 |
35 |39 | Generate beautiful AI spiral art with one click. Powered by{" "} 40 | 46 | Vercel 47 | {" "} 48 | and{" "} 49 | 55 | Replicate 56 | 57 | . 58 |
59 | 60 |
35 |
91 | ),
92 | {
93 | width: 1200,
94 | height: 630,
95 | fonts: [
96 | {
97 | name: "Inter",
98 | data: inter,
99 | },
100 | ],
101 | headers: {
102 | "cache-control": "public, max-age=60, stale-while-revalidate=86400",
103 | },
104 | },
105 | );
106 | }
107 |
--------------------------------------------------------------------------------
/components/photo-booth.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { Copy, Download } from "lucide-react";
4 | import Image from "next/image";
5 | import { useEffect, useState } from "react";
6 | import { LoadingCircle } from "@/components/icons";
7 | import { useParams, useRouter } from "next/navigation";
8 | import va from "@vercel/analytics";
9 |
10 | function forceDownload(blobUrl: string, filename: string) {
11 | let a: any = document.createElement("a");
12 | a.download = filename;
13 | a.href = blobUrl;
14 | document.body.appendChild(a);
15 | a.click();
16 | a.remove();
17 | }
18 |
19 | export default function PhotoBooth({ image }: { image: string | null }) {
20 | const router = useRouter();
21 | const params = useParams();
22 | const { id } = params;
23 | const [copying, setCopying] = useState(false);
24 | const [downloading, setDownloading] = useState(false);
25 |
26 | useEffect(() => {
27 | let interval: NodeJS.Timeout;
28 |
29 | if (!image) {
30 | interval = setInterval(() => {
31 | router.refresh();
32 | }, 1000);
33 | }
34 |
35 | return () => clearInterval(interval);
36 | }, [image, router]);
37 |
38 | return (
39 |
39 |
90 |
40 | {data.prompt.substring(0, 72)}
41 | {data.prompt.length > 72 && "..."}
42 |
43 |
44 |
88 |
89 |
43 | {id && image && (
44 |
134 | );
135 | }
136 |
--------------------------------------------------------------------------------
/components/pattern-picker.tsx:
--------------------------------------------------------------------------------
1 | import { UploadCloud } from "lucide-react";
2 | import Image from "next/image";
3 | import { Dispatch, SetStateAction, useState } from "react";
4 | import { toast } from "sonner";
5 |
6 | const patterns = [
7 | "https://xd2kcvzsdpeyx1gu.public.blob.vercel-storage.com/8uiaWqu-77Maq6Zn38dfz9iWwXsyaheFfOSJPL.png",
8 | "https://xd2kcvzsdpeyx1gu.public.blob.vercel-storage.com/vercel-RaEAI0uDphGrSl0a7lCcNhdKO7dNKT.png",
9 | "https://xd2kcvzsdpeyx1gu.public.blob.vercel-storage.com/react-58b3JHEzb6qWG20KYl944yW7V72CGo.png",
10 | "https://xd2kcvzsdpeyx1gu.public.blob.vercel-storage.com/logo-wfAh7QadApCiJ1tu7EVOsILwGBQ1wz.png",
11 | ];
12 |
13 | export default function PatternPicker({
14 | setPattern,
15 | setOpenPopover,
16 | }: {
17 | setPattern: Dispatch
45 |
78 |
107 |
108 | )}
109 | {image ? (
110 |
120 |
132 | )}
133 |
126 |
130 | )}
131 | 127 | This can take anywhere between 20s-30s to run. 128 |
129 |
24 | (null);
41 | useEffect(() => {
42 | if (promptValue && textareaRef.current) {
43 | textareaRef.current.select();
44 | }
45 | }, [promptValue]);
46 |
47 | const [pattern, setPattern] = useState(patternValue || DEFAULT_PATTERN);
48 | const [openPopover, setOpenPopover] = useState(false);
49 |
50 | const onChangePicture = (e: React.ChangeEvent) => {
51 | const file = e.target.files && e.target.files[0];
52 | if (file) {
53 | if (file.size / 1024 / 1024 > 5) {
54 | toast.error("File size too big (max 5MB)");
55 | } else if (file.type !== "image/png" && file.type !== "image/jpeg") {
56 | toast.error("File type not supported (.png or .jpg only)");
57 | } else {
58 | const reader = new FileReader();
59 | reader.onload = (e) => {
60 | setPattern(e.target?.result as string);
61 | setOpenPopover(false);
62 | };
63 | reader.readAsDataURL(file);
64 | }
65 | }
66 | };
67 |
68 | return (
69 |
25 |
51 |
52 | 26 | Choose a pattern 27 |
28 |
29 | {patterns.map((p) => (
30 |
48 | ))}
49 |
50 |
53 |
122 | );
123 | }
124 |
--------------------------------------------------------------------------------
/components/form.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | import { generate } from "@/lib/actions";
4 | import useEnterSubmit from "@/lib/hooks/use-enter-submit";
5 | import { SendHorizonal } from "lucide-react";
6 | import { useEffect, useRef, useState } from "react";
7 | import { experimental_useFormStatus as useFormStatus } from "react-dom";
8 | import { LoadingCircle } from "./icons";
9 | import { cn } from "@/lib/utils";
10 | import { useRouter } from "next/navigation";
11 | import va from "@vercel/analytics";
12 | // @ts-ignore
13 | import promptmaker from "promptmaker";
14 | import Image from "next/image";
15 | import Popover from "./popover";
16 | import { DEFAULT_PATTERN } from "@/lib/constants";
17 | import PatternPicker from "./pattern-picker";
18 | import { toast } from "sonner";
19 |
20 | export default function Form({
21 | promptValue,
22 | patternValue,
23 | }: {
24 | promptValue?: string;
25 | patternValue?: string;
26 | }) {
27 | const router = useRouter();
28 | const [prompt, setPrompt] = useState(promptValue || "");
29 | const [placeholderPrompt, setPlaceholderPrompt] = useState("");
30 | useEffect(() => {
31 | if (promptValue) {
32 | setPlaceholderPrompt("");
33 | } else {
34 | setPlaceholderPrompt(promptmaker());
35 | }
36 | }, [promptValue]);
37 |
38 | const { formRef, onKeyDown } = useEnterSubmit();
39 |
40 | const textareaRef = useRef
54 |
60 | Upload your own
55 |56 | Recommended: Square (1:1) ratio, with a black and white color 57 | scheme. You can also drag and drop an image here. 58 |
59 |