The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
improve /ai page
+26
-45
+22
-45
app/(home)/ai/page.tsx
+22
-45
app/(home)/ai/page.tsx
···
7
7
import { HiChevronRight, HiLightningBolt, HiUserAdd } from "react-icons/hi";
8
8
9
9
import Badge from "@/components/badge";
10
-
import Box from "@/components/box";
11
-
import Highlight from "@/components/discord/markdown";
12
-
import DiscordMessage from "@/components/discord/message";
13
10
import ImageGrid from "@/components/image-grid";
14
11
import ImageReduceMotion from "@/components/image-reduce-motion";
15
12
import { ServerButton } from "@/components/server-button";
···
56
53
57
54
export default async function Home() {
58
55
const models = await fetch(`${process.env.NEXT_PUBLIC_API}/ai`, fetchOptions).then((res) => res.json()) as ApiV1AiResponse[];
59
-
const query = "girl below sakura tree";
60
56
61
57
const styles = {
62
58
h2: cn(montserrat.className, "lg:text-5xl text-4xl bg-gradient-to-b bg-clip-text text-transparent from-neutral-200 from-40% to-neutral-400 font-bold underline decoration-violet-400"),
63
59
h3: cn(montserrat.className, "lg:text-2xl text-xl bg-gradient-to-b bg-clip-text text-transparent from-neutral-200 from-40% to-neutral-300 font-semibold")
64
60
};
65
61
66
-
const messageProps = () => {
67
-
return {
68
-
mode: "DARK" as const,
69
-
commandUsed: {
70
-
name: "image",
71
-
username: "@mwlica",
72
-
avatar: "/luna-small.webp",
73
-
bot: false
74
-
},
75
-
76
-
user: {
77
-
username: "Wamellow",
78
-
avatar: "/waya-v3-small.webp",
79
-
bot: true
80
-
}
81
-
};
82
-
};
83
-
84
62
return (
85
63
<div className="flex items-center flex-col w-full">
86
64
···
96
74
97
75
<div className="md:text-xl text-lg lg:flex w-full mt-4">
98
76
<span className="font-medium">
99
-
Unlock complimentary access to a variety of image generation models directly within your Discord server. Powered by LuxuryLabs
77
+
Unlock complimentary access to a variety of free image generation models directly within your Discord server. Powered by LuxuryLabs.
100
78
</span>
101
79
102
80
<div className="flex flex-col min-w-full lg:min-w-[420px]">
···
140
118
<div className="w-full">
141
119
<h2 className={styles.h2}>/image command</h2>
142
120
<div className="my-8 max-w-2xl font-medium">
143
-
We recommend that you play around with each model yourself as this page uses the same <Code>{query}</Code> query for everything, even non-anime models.
121
+
We recommend that you play around with each model yourself as this page uses the same query for everything, even non-anime models.
122
+
<br />
123
+
<br />
124
+
<Code className="select-all">query: anime girl, close up, intricate details, dramatic lighting, bloom, highly detailed, micro details</Code>
125
+
<Code className="select-all">negative-query: (poorly drawn face)++, (dark skin, tan skin)++, (character out of frame)1.3, bad quality, low-res, (monochrome)1.1, (grayscale)1.3, acne, skin blemishes, bad anatomy, text, error, missing fingers, extra limbs, missing limbs, cut off</Code>
144
126
</div>
145
127
</div>
146
128
147
-
<article itemScope itemType="http://schema.org/Article" className="grid grid-cols-2 gap-6 mb-10 w-full">
129
+
<article itemScope itemType="http://schema.org/Article" className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10 w-full">
148
130
149
131
{models.map((item, i) => (
150
-
<Box key={item.title + i} small className="gap-10 items-center w-full">
151
-
<h3 className={styles.h3}>{item.title}</h3>
152
-
<div className="mt-2 mb-6">
153
-
<Code className="select-all" color="secondary">/image query:{query} model:{item.title}</Code>
132
+
<div key={item.title + i} className="gap-10 items-center w-full relative max-w-lg hover:scale-105 duration-200">
133
+
<Image
134
+
alt=""
135
+
className="rounded-xl shadow-md w-full mt-2"
136
+
height={512}
137
+
itemProp="image"
138
+
loading="lazy"
139
+
src={item.url}
140
+
width={512}
141
+
/>
142
+
<div className="absolute bottom-0 left-0 w-full">
143
+
<div className="bg-wamellow/80 backdrop-blur-md m-2 p-2 rounded-xl">
144
+
<h3 className={styles.h3}>{item.title}</h3>
145
+
</div>
154
146
</div>
155
-
156
-
<div className="w-full px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}>
157
-
<DiscordMessage {...messageProps()}>
158
-
<Highlight mode={"DARK"} text="Please help us on [top.gg](https://top.gg/bot/1125449347451068437/vote), only takes a few seconds" />
159
-
<Image
160
-
alt=""
161
-
className="rounded-md shadow-md max-w-lg w-full mt-2"
162
-
height={512}
163
-
itemProp="image"
164
-
loading="lazy"
165
-
src={item.url}
166
-
width={512}
167
-
/>
168
-
</DiscordMessage>
169
-
</div>
170
-
</Box>
147
+
</div>
171
148
))}
172
149
</article>
173
150
+4
app/sitemap.xml/route.ts
+4
app/sitemap.xml/route.ts
public/ai.png
public/ai.png
This is a binary file and will not be displayed.
public/ai.webp
public/ai.webp
This is a binary file and will not be displayed.