improve TTS landing · shi.gg/mellow-web@91ff742

+83 -25

app/(home)/page.tsx

··· 26 26 import cn from "@/utils/cn"; 27 27 import { toFixedArrayLength } from "@/utils/fixed-array-length"; 28 28 import { convertMonthToName } from "@/utils/time"; 29 + import { actor } from "@/utils/tts"; 29 30 import { getCanonicalUrl } from "@/utils/urls"; 30 31 31 32 const montserrat = Montserrat({ subsets: ["latin"] }); ··· 154 155 </ServerButton> 155 156 </div> 156 157 157 - <span className={cn("lg:ml-auto flex gap-2 text-neutral-500 font-mediumr mt-3 opacity-80 pl-20 lg:pr-20 rotate-2", handwritten.className)}> 158 + <span className={cn("lg:ml-auto flex gap-2 text-neutral-500 font-medium mt-3 opacity-80 pl-20 lg:pr-20 rotate-2", handwritten.className)}> 158 159 <Image src={ArrowPic} width={24} height={24} alt="arrow up" className="h-5 w-5 relative top-px" draggable={false} /> 159 160 Get started here in seconds 160 161 </span> ··· 208 209 <div> 209 210 <h2 className={styles.h2}>Fun leveling and leaderboards 🦄</h2> 210 211 <div className="my-8 max-w-md font-medium"> 211 - Have you ever dreamed of not using <span className="line-through">MEE6™</span>? Just use <span className="font-bold">Wamellow</span> instead and don{"'"}t pay premium to personalise your cards and webpages! 212 + Have you ever dreamed of not using <span className="line-through">MEE6™</span>? Just use <span className="font-bold">Wamellow</span> instead and don{"'"}t pay premium to personalise your cards and webpages! 👀 212 213 </div> 213 214 214 215 <Box className="flex flex-col md:flex-row gap-10 items-center"> ··· 240 241 </div> 241 242 </div> 242 243 243 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 244 + <div 245 + className="w-full md:w-1/2 px-8 py-4 rounded-lg" 246 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 247 + > 244 248 <DiscordMessage {...messageProps("leaderboard")}> 245 249 <Image src={LeaderboardPic} itemProp="image" alt="" height={1024 / 2} width={2048 / 2} loading="lazy" /> 246 250 </DiscordMessage> ··· 251 255 <div> 252 256 <h2 className={styles.h2}>Next-Level text to speech, tts 🔊</h2> 253 257 <div className="my-8 max-w-md font-medium"> 254 - Embrace the power of VoiceWave and let your messages speak everywhere you want! <span className="text-sm relative top-0.5 italic opacity-75">(Chat GPT called it VoiceWave)</span> 258 + It{"'"}s crucial for people with speech impairments. 259 + It ensures inclusivity and allows everyone to participate fully, promoting accessibility and community engagement. ❤️ 260 + <span className="sr-only">One of the msot important Accessibility feature you need.</span> 255 261 </div> 256 262 257 263 <Box className="flex flex-col md:flex-row-reverse gap-10 items-center"> 258 - <div className="md:w-1/2"> 264 + <div className="md:w-1/2 flex flex-col items-start"> 259 265 <Chip 260 266 className="mb-2" 261 267 color="secondary" ··· 265 271 > 266 272 <span className="font-semibold">100% free forever</span> 267 273 </Chip> 268 - <h3 className={styles.h3}>40 Voices in 5 Languages</h3> 274 + 275 + <h3 className={styles.h3}>40 Voices in 8 Languages</h3> 276 + 269 277 <div className="pt-6"> 270 - With Wamellow{"'"}s Text to Speech, you{"'"}re in control of transforming text into captivating speech. 271 - You can either generate files using <Code color="secondary">/tts file</Code>, talk in voice chats with <Code color="secondary">/tts voice</Code> or setup a deticated channel! 278 + You can either generate files using <Code color="secondary">/tts file</Code>, talk in voice chats with <Code color="secondary">/tts voice</Code> or setup a dedicated channel! 279 + Great for people with aphonia, dysphonia, or other speech impairments. 272 280 </div> 273 - <div className="flex gap-2 mt-6"> 281 + 282 + <AvatarGroup 283 + as={Link} 284 + href={getCanonicalUrl("profile", "text-to-speech", "?utm_source=wamellow.com&utm_medium=home")} 285 + className="mt-4" 286 + max={8} 287 + > 288 + {["us", "de", "es", "fr", "jp", "kr", "br", "id"].map((lang) => { 289 + const name = Object.entries(actor).find(([, [, langCode]]) => langCode === lang)?.[1][0] || lang; 290 + 291 + return ( 292 + <Avatar 293 + size="sm" 294 + key={"ttsLang-" + lang} 295 + src={`/${lang}.webp`} 296 + alt={name} 297 + title={name} 298 + /> 299 + ); 300 + })} 301 + </AvatarGroup> 302 + 303 + <div className="flex gap-2 mt-5"> 274 304 <Invite /> 275 305 <ServerButton 276 306 as={Link} ··· 284 314 </div> 285 315 </div> 286 316 287 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg flex flex-col sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center gap-4 min-h-56" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 288 - <DiscordChannelCategory name="#/voice/dev/null"> 289 - <DiscordChannelVoice name="• Public"> 290 - <DiscordUser username="mwlica" avatar="/luna-small.webp" /> 291 - <DiscordUser username="Wamellow" avatar="/waya-v3-small.webp" isTalking /> 292 - </DiscordChannelVoice> 293 - </DiscordChannelCategory> 317 + <div className="w-full md:w-1/2 "> 318 + 319 + <div 320 + className="px-8 py-6 md:py-12 rounded-lg flex flex-col sm:flex-row sm:items-center md:flex-col md:items-start lg:flex-row lg:items-center gap-4 min-h-56" 321 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 322 + > 323 + <DiscordChannelCategory name="#/voice/dev/null"> 324 + <DiscordChannelVoice name="• Public"> 325 + <DiscordUser username="mwlica" avatar="/luna-small.webp" /> 326 + <DiscordUser username="Space" avatar="/space.webp" /> 327 + <DiscordUser username="Wamellow" avatar="/waya-v3-small.webp" isTalking /> 328 + </DiscordChannelVoice> 329 + </DiscordChannelCategory> 330 + 331 + <div className="bg-[#313338] h-0.5 w-full sm:w-0.5 sm:h-32 md:h-0.5 md:w-full lg:w-0.5 lg:h-32 rounded-full ml-2" /> 294 332 295 - <div className="bg-[#313338] h-0.5 w-full sm:w-0.5 sm:h-32 md:h-0.5 md:w-full lg:w-0.5 lg:h-32 rounded-full ml-2" /> 333 + <DiscordMessage {...messageProps("tts voice")}> 334 + <Highlight mode={"DARK"} text="Now talking..." /> 335 + </DiscordMessage> 336 + </div> 296 337 297 - <DiscordMessage {...messageProps("tts voice")}> 298 - <Highlight mode={"DARK"} text="Now talking..." /> 299 - </DiscordMessage> 338 + <span className="text-sm mt-1 opacity-75"> 339 + English, French, German, Spanish, Portuguese, Indonesian and Japanese, Korean. 340 + </span> 341 + 300 342 </div> 343 + 301 344 </Box> 302 345 </div> 303 346 ··· 337 380 </div> 338 381 </div> 339 382 340 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 383 + <div 384 + className="w-full md:w-1/2 px-8 py-4 rounded-lg" 385 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 386 + > 341 387 <DiscordMessage {...messageProps()}> 342 388 <DiscordMessageEmbed 343 389 mode={"DARK"} ··· 399 445 </div> 400 446 </div> 401 447 402 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 448 + <div 449 + className="w-full md:w-1/2 px-8 py-4 rounded-lg" 450 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 451 + > 403 452 <DiscordMessage {...messageProps()}> 404 453 <Highlight mode={"DARK"} text="Welcome @mwlica to **Someone's** 👋" /> 405 454 <Image src={WelcomePic} itemProp="image" alt="example welcome card" width={1024 / 2} height={(256 + 16) / 2} loading="lazy" /> ··· 499 548 </div> 500 549 </div> 501 550 502 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 551 + <div 552 + className="w-full md:w-1/2 px-8 py-4 rounded-lg" 553 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 554 + > 503 555 <DiscordMessage {...messageProps("anime")}> 504 556 <Highlight mode={"DARK"} text="Please help us on [top.gg](https://top.gg/bot/1125449347451068437/vote), only takes a few seconds" /> 505 557 <Image ··· 565 617 </div> 566 618 </div> 567 619 568 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 620 + <div 621 + className="w-full md:w-1/2 px-8 py-4 rounded-lg" 622 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 623 + > 569 624 <DiscordMessage {...messageProps("image")}> 570 625 <Highlight mode={"DARK"} text="Please help us on [top.gg](https://top.gg/bot/1125449347451068437/vote), only takes a few seconds" /> 571 626 <Image ··· 618 673 </div> 619 674 </div> 620 675 621 - <div className="w-full md:w-1/2 px-8 py-4 rounded-lg flex flex-col gap-4" style={{ backgroundColor: "rgb(43, 45, 49)" }}> 676 + <div 677 + className="w-full md:w-1/2 px-8 py-4 rounded-lg flex flex-col gap-4" 678 + style={{ backgroundColor: "rgb(43, 45, 49)" }} 679 + > 622 680 <DiscordMessage 623 681 mode={"DARK"} 624 682 user={{

+7 -2

app/layout.tsx

··· 20 20 const montserrat = Montserrat({ subsets: ["latin"] }); 21 21 22 22 export const viewport: Viewport = { 23 - themeColor: "#945682", 23 + themeColor: "#8957ff", 24 24 initialScale: 0.85 25 25 }; 26 26 ··· 46 46 }, 47 47 48 48 description, 49 - keywords: ["discord", "bot", "app", "intefration", "discord bot", "waya", "waya bot", "waya.one", "mwya", "mellow", "wamellow", "mwlica", "lunish.nl", "Luna-devv", "mee6 alternative", "arcane alternative", "dyno alternative", "starboard", "ranks", "leaderboard", "lb", "leaderboards", "text to speech", "captcha", "passport", "verification", "verify", "captcha.bot", "security", "tts", "text to speech", "free", "customizable", "next-gen", "next generation", "ai", "ai images", "nsfw detection", "moderation", "anime", "nekos", "waifus", "chat to speech", "liapew"], 49 + keywords: [ 50 + "discord", "bot", "app", "intefration", "discord bot", "waya", "waya bot", "waya.one", "mwya", "mellow", "wamellow", "mwlica", "lunish", "Luna-devv", "mee6 alternative", 51 + "arcane alternative", "dyno alternative", "starboard", "ranks", "leaderboard", "lb", "leaderboards", "text to speech", "captcha", "passport", "verification", "verify", 52 + "captcha.bot", "security", "tts", "text to speech", "free", "customizable", "next-gen", "next generation", "ai", "ai images", "nsfw detection", "moderation", "anime", 53 + "nekos", "waifus", "chat to speech", "accessibility", "aphonia", "dysphonia", "mute", "liapew" 54 + ], 50 55 51 56 alternates: { 52 57 canonical: getBaseUrl()

+18 -18

app/profile/text-to-speech/page.tsx

··· 2 2 3 3 import { User, userStore } from "@/common/user"; 4 4 import SelectInput from "@/components/inputs/SelectMenu"; 5 - import { Voice } from "@/typings"; 6 5 import { deepMerge } from "@/utils/deepMerge"; 7 - import { getVoices } from "@/utils/tts"; 8 - 9 - const TTSVoicesArray = ["en_us_001", "en_us_006", "en_us_007", "en_us_009", "en_us_010", "en_uk_001", "en_uk_003", "en_au_001", "en_au_002", "fr_001", "fr_002", "de_001", "de_002", "es_002", "es_mx_002", "br_003", "br_004", "br_005", "id_001", "jp_001", "jp_003", "jp_005", "jp_006", "kr_002", "kr_004", "kr_003", "en_us_ghostface", "en_us_chewbacca", "en_us_c3po", "en_us_stitch", "en_us_stormtrooper", "en_us_rocket", "en_female_f08_salut_damour", "en_male_m03_lobby", "en_male_m03_sunshine_soon", "en_female_f08_warmy_breeze", "en_female_ht_f08_glorious", "en_male_sing_funny_it_goes_up", "en_male_m2_xhxs_m03_silly", "en_female_ht_f08_wonderful_world"] as Voice[]; 10 - 6 + import { actor, getVoices, voices } from "@/utils/tts"; 11 7 12 8 export default function Home() { 13 9 const user = userStore((s) => s); ··· 24 20 url="/users/@me/text-to-speech" 25 21 dataName="defaultVoice" 26 22 description="This is the default voice for any text to speech conversion." 27 - items={TTSVoicesArray.map((voice) => { 28 - return { 29 - name: getVoices(voice)[0], 30 - value: voice 31 - }; 32 - })} 23 + items={voices.map((voice) => ({ 24 + name: getVoices(voice)[0], 25 + value: voice 26 + }))} 33 27 defaultState={user?.extended?.tts?.defaultVoice} 34 28 onSave={(options) => { 35 29 if (!user) return; 36 - userStore.setState(deepMerge<User>(user, { extended: { tts: { ...user.extended?.tts, defaultVoice: options.value as Voice } } })); 30 + userStore.setState(deepMerge<User>(user, { extended: { tts: { ...user.extended?.tts, defaultVoice: options.value as keyof typeof actor } } })); 37 31 }} 38 32 /> 39 33 </div> ··· 44 38 url="/users/@me/text-to-speech" 45 39 dataName="defaultFiletype" 46 40 description="The default audio format for file based tts." 47 - items={["mp3", "wav", "ogg"].map((type) => { 48 - return { 49 - name: `.${type}`, 50 - value: type 51 - }; 52 - })} 41 + items={["mp3", "wav", "ogg"].map((type) => ({ 42 + name: `.${type}`, 43 + value: type 44 + }))} 53 45 defaultState={user?.extended?.tts?.defaultFiletype} 54 46 onSave={(options) => { 55 47 if (!user) return; ··· 58 50 /> 59 51 </div> 60 52 </div> 53 + 54 + <iframe 55 + className="mt-6 aspect-video rounded-lg" 56 + width={"100%"} 57 + src="https://www.youtube-nocookie.com/embed/NS5fZ1ltovE?si=uODiGspuNGKPRQKp" 58 + title="Wamellow Text to Speech tutorial" 59 + allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" 60 + /> 61 61 62 62 </div> 63 63 );

public/br.webp