sagnik/Project_Animatix
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Added support for Anime Style [WAN 2.2 I2V] #1

Browse Source
This commit is contained in:
Sagnik
2026-04-18 14:18:46 +05:30
parent c7994d17a9
commit 732dcaa39d
5 changed files with 332 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
frontend/src/components/dashboard-client.tsx
View File

@@ -41,7 +41,7 @@ type ComposerState = {
aspectPreset: "16:9" | "1:1" | "9:16";
durationPreset: "5s" | "8s";
generationCount: 1 | 2 | 3 | 4;
modelPreset: "wan22-a14b";
modelPreset: "wan22-a14b" | "wan22-a14b-anime-style";
};
type AssetKind = "image" | "video" | "audio" | "pose_sheet";
@@ -428,19 +428,19 @@ export function DashboardClient() {
/>
{outputMenuOpen ? (
<div className="absolute bottom-[4.75rem] right-5 z-20 w-full max-w-md rounded-[26px] border border-white/10 bg-[rgba(12,16,23,0.98)] p-4 shadow-glow backdrop-blur-xl sm:right-6">
<div className="mb-3 flex items-center justify-between gap-3">
<div className="fixed right-4 top-6 z-30 w-[min(24rem,calc(100vw-2rem))] max-h-[min(34rem,calc(100vh-3rem))] overflow-y-auto rounded-[24px] border border-white/10 bg-[rgba(12,16,23,0.98)] p-3.5 shadow-glow backdrop-blur-xl sm:right-6 sm:top-8">
<div className="mb-2.5 flex items-center justify-between gap-3">
<div className="text-xs uppercase tracking-[0.24em] text-subtext">Controls</div>
<button
className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-subtext transition hover:bg-white/[0.08] hover:text-white"
className="flex h-8 w-8 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-subtext transition hover:bg-white/[0.08] hover:text-white"
onClick={() => setOutputMenuOpen(false)}
type="button"
>
<X className="h-4 w-4" />
</button>
</div>
<div className="grid gap-3">
<div className="grid grid-cols-2 gap-2">
<div className="grid gap-2.5">
<div className="grid grid-cols-2 gap-1.5">
<button
className={composer.mode === "animate" ? "btn-primary" : "btn-secondary"}
onClick={() => setComposer((current) => ({ ...current, mode: "animate" }))}
@@ -451,7 +451,7 @@ export function DashboardClient() {
</button>
<button
className={composer.mode === "audio" ? "btn-primary" : "btn-secondary"}
onClick={() => setComposer((current) => ({ ...current, mode: "audio" }))}
onClick={() => setComposer((current) => ({ ...current, mode: "audio", modelPreset: "wan22-a14b" }))}
type="button"
>
<Mic2 className="mr-2 h-4 w-4" />
@@ -459,7 +459,7 @@ export function DashboardClient() {
</button>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-1.5">
<button
className={composer.activeSurface === "frames" ? "btn-primary" : "btn-secondary"}
onClick={() => setComposer((current) => ({ ...current, activeSurface: "frames" }))}
@@ -476,7 +476,7 @@ export function DashboardClient() {
</button>
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-1.5">
{composer.mode === "animate" ? (
<>
<button
@@ -488,7 +488,7 @@ export function DashboardClient() {
</button>
<button
className={composer.submode === "mix" ? "btn-primary" : "btn-secondary"}
onClick={() => setComposer((current) => ({ ...current, submode: "mix" }))}
onClick={() => setComposer((current) => ({ ...current, submode: "mix", modelPreset: "wan22-a14b" }))}
type="button"
>
Mix
@@ -501,7 +501,7 @@ export function DashboardClient() {
)}
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-1.5">
{(["9:16", "16:9"] as const).map((key) => (
<button
className={composer.aspectPreset === key ? "btn-primary" : "btn-secondary"}
@@ -514,7 +514,7 @@ export function DashboardClient() {
))}
</div>
<div className="grid grid-cols-2 gap-2">
<div className="grid grid-cols-2 gap-1.5">
{(["5s", "8s"] as const).map((key) => (
<button
className={composer.durationPreset === key ? "btn-primary" : "btn-secondary"}
@@ -527,7 +527,7 @@ export function DashboardClient() {
))}
</div>
<div className="grid grid-cols-4 gap-2">
<div className="grid grid-cols-4 gap-1.5">
{[1, 2, 3, 4].map((count) => (
<button
className={composer.generationCount === count ? "btn-primary" : "btn-secondary"}
@@ -545,13 +545,32 @@ export function DashboardClient() {
))}
</div>
<div className="rounded-[18px] border border-white/10 bg-white/[0.04] px-4 py-3 text-sm text-white">
Wan 2.2 A14B
<div className="mt-1 text-xs text-subtext">More Coming Soon...</div>
<div className="grid gap-1.5">
<button
className={composer.modelPreset === "wan22-a14b" ? "btn-primary" : "btn-secondary"}
onClick={() => setComposer((current) => ({ ...current, modelPreset: "wan22-a14b" }))}
type="button"
>
Wan 2.2 A14B Base
</button>
<button
className={composer.modelPreset === "wan22-a14b-anime-style" ? "btn-primary" : "btn-secondary"}
onClick={() =>
setComposer((current) => ({
...current,
mode: "animate",
submode: "move",
modelPreset: "wan22-a14b-anime-style",
}))
}
type="button"
>
Anime Style [WAN 2.2 I2V]
</button>
</div>
<div className="text-center text-xs leading-5 text-subtext">
Start frame is live. End frame is planned. Batch `x1-x4` submits real jobs against the live queue.
<div className="px-1 text-center text-[11px] leading-5 text-subtext">
Start frame is live. End frame is planned. Batch x1-x4 submits real jobs against the live queue.
</div>
</div>
</div>