The weeb for the next gen discord boat - Wamellow
wamellow.com
bot
discord
fix AI landing page
+45
-12
+43
-12
app/(home)/ai/page.tsx
+43
-12
app/(home)/ai/page.tsx
···
1
-
import { Code } from "@nextui-org/react";
1
+
import { Chip } from "@nextui-org/react";
2
2
import { Metadata } from "next";
3
3
import { Montserrat, Patrick_Hand } from "next/font/google";
4
4
import Image from "next/image";
···
9
9
import Badge from "@/components/badge";
10
10
import ImageGrid from "@/components/image-grid";
11
11
import ImageReduceMotion from "@/components/image-reduce-motion";
12
+
import TextInput from "@/components/inputs/TextInput";
12
13
import { ServerButton } from "@/components/server-button";
13
14
import ArrowPic from "@/public/arroww.webp";
14
15
import { ApiV1AiResponse } from "@/typings";
···
24
25
25
26
export const generateMetadata = async (): Promise<Metadata> => {
26
27
27
-
const title = "Supercharged Ai";
28
-
const description = "Unlock complimentary access to a variety of free image generation models directly within your Discord server.";
28
+
const title = "Supercharged image Ai for Discord";
29
+
const description = "Unlock complimentary access to a variety of free /image generation models directly within your Discord server.";
29
30
const url = getCanonicalUrl("ai");
30
31
31
32
return {
···
62
63
return (
63
64
<div className="flex items-center flex-col w-full">
64
65
65
-
<div className="md:text-5xl text-4xl font-semibold md:mb-6 mb-4 dark:text-neutral-100 text-neutral-900 flex gap-2 w-full">
66
+
<div className="md:text-5xl text-4xl font-semibold md:mb-6 mb-4 dark:text-neutral-100 text-neutral-900 flex items-center gap-2 w-full">
66
67
<h1 className={montserrat.className}>
67
68
<span className="bg-gradient-to-r from-indigo-400 to-pink-400 bg-clip-text text-transparent break-keep">Supercharged Ai</span>
68
69
</h1>
69
70
<HiLightningBolt className="text-pink-400 rotate-6" />
70
-
<Badge text="Free" />
71
+
<Chip
72
+
className="ml-auto"
73
+
color="secondary"
74
+
variant="flat"
75
+
size="lg"
76
+
>
77
+
<span className="font-semibold text-lg">
78
+
Free
79
+
</span>
80
+
</Chip>
71
81
</div>
72
82
73
-
{models && <ImageGrid images={models.slice(0, 24).map((model) => ({ id: model.title, url: model.url || "/discord.webp" }))} />}
83
+
{models &&
84
+
<ImageGrid
85
+
images={
86
+
models
87
+
.slice(0, 24)
88
+
.map((model) => ({
89
+
id: model.title,
90
+
url: model.url || "/discord.webp"
91
+
}))
92
+
}
93
+
/>
94
+
}
74
95
75
96
<div className="md:text-xl text-lg lg:flex w-full mt-4 gap-4">
76
97
<span className="font-medium">
···
117
138
118
139
<div className="w-full">
119
140
<h2 className={styles.h2}>/image command</h2>
120
-
<div className="my-8 max-w-2xl font-medium">
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>
141
+
<div className="my-8 font-medium space-y-4">
142
+
<div className="max-w-xl">
143
+
We recommend that you play around with each model yourself as this page uses the same query for everything, even non-anime models.
144
+
</div>
145
+
146
+
<TextInput
147
+
name="Query"
148
+
defaultState="anime girl, close up, intricate details, dramatic lighting, bloom, highly detailed, micro details"
149
+
disabled
150
+
/>
151
+
<TextInput
152
+
name="Negative query"
153
+
max={300}
154
+
defaultState="(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<"
155
+
disabled
156
+
/>
126
157
</div>
127
158
</div>
128
159