some long due refactoring

src/Initialize.tsx

@@ -2,6 +2,9 @@ import { Button } from "./theme";
 import cn from "./utils/classnames.ts";
 import { formatBytes } from "./utils/format.ts";
 import Translator from "./ai/Translator.ts";
+import Card from "./theme/misc/Card.tsx";
+import Introduction from "./components/Introduction.tsx";
+import ModelLoader from "./components/ModelLoader.tsx";
 
 interface InitializeProps {
   progress: number;
@@ -17,102 +20,29 @@ export default function Initialize({
   className = "",
 }: InitializeProps) {
   return (
-    <div className={cn("max-w-2xl mx-auto px-8 animate-fade-in-up", className)}>
-      <div className="bg-white rounded-lg shadow-md p-8 border border-border">
-        <div className="flex flex-col items-center gap-6">
-          {/* Description */}
-          <div className="space-y-4 text-left w-full">
-            <div
-              className="animate-fade-in-up"
-              style={{ animationDelay: "0.1s", opacity: 0 }}
-            >
-              <h3 className="font-semibold text-base mb-1">
-                About TranslateGemma 4B
-              </h3>
-              <p className="text-sm text-secondary-foreground">
-                TranslateGemma is a family of translation models from Google,
-                built on top of Gemma 2B. This 4B parameter model supports
-                translations across 100+ languages with state-of-the-art
-                quality.{" "}
-                <a
-                  href="https://blog.google/innovation-and-ai/technology/developers-tools/translategemma/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
-                >
-                  Learn more
-                </a>
-              </p>
-            </div>
-
-            <div
-              className="animate-fade-in-up"
-              style={{ animationDelay: "0.2s", opacity: 0 }}
-            >
-              <h3 className="font-semibold text-base mb-1">
-                Completely private & offline-capable
-              </h3>
-              <p className="text-sm text-secondary-foreground">
-                Everything runs entirely in your browser with 🤗 Transformers.js
-                and ONNX Runtime Web — no data is ever sent to a server. Once
-                loaded, it works offline.
-              </p>
-            </div>
-
-            <div
-              className="animate-fade-in-up"
-              style={{ animationDelay: "0.3s", opacity: 0 }}
-            >
-              <h3 className="font-semibold text-base mb-1">
-                Experimental — WebGPU required
-              </h3>
-              <p className="text-sm text-secondary-foreground">
-                This is experimental and requires a browser with WebGPU support
-                and enough VRAM to run the model.
-              </p>
-            </div>
-          </div>
-
-          {/* Initialize button or progress indicator */}
-          {isInitializing ? (
-            <div
-              className="w-full space-y-2 animate-fade-in-up"
-              style={{ animationDelay: "0.4s", opacity: 0 }}
-            >
-              <div className="flex justify-between items-center">
-                <span className="text-sm font-medium text-muted-foreground">
-                  Loading model...
-                </span>
-                <span className="text-sm font-medium text-primary animate-pulse-soft">
-                  {progress}%
-                </span>
-              </div>
-              <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
-                <div
-                  className="bg-primary h-full transition-all duration-300 ease-out relative overflow-hidden"
-                  style={{ width: `${progress}%` }}
-                >
-                  <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_infinite]" />
-                </div>
-              </div>
-              <p className="text-xs text-muted-foreground text-center">
-                This may take a few moments. Please don't close the page.
-              </p>
-            </div>
-          ) : (
+    <div
+      className={cn(
+        "max-w-2xl w-full mx-auto px-8 animate-fade-in-up",
+        className
+      )}
+    >
+      <Card className="flex flex-col items-center gap-6">
+        {isInitializing ? (
+          <ModelLoader className="w-full" progress={progress} />
+        ) : (
+          <div className="w-full space-y-8">
+            <Introduction />
             <Button
               variant="primary"
               onClick={onInitialize}
               disabled={isInitializing}
-              className="text-lg! mt-4"
+              className="text-lg! w-full"
             >
-              {isInitializing
-                ? "Initializing..."
-                : `Download TranslateGemma (${formatBytes(Translator.size)})`}
+              Download TranslateGemma ({formatBytes(Translator.size)})
             </Button>
-          )}
-        </div>
-      </div>
+          </div>
+        )}
+      </Card>
     </div>
   );
 }

src/components/Introduction.tsx

@@ -0,0 +1,60 @@
+import cn from "../utils/classnames.ts";
+
+export default function Introduction({
+  className = "",
+}: {
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-4 text-left w-full", className)}>
+      <div
+        className="animate-fade-in-up"
+        style={{ animationDelay: "0.1s", opacity: 0 }}
+      >
+        <h3 className="font-semibold text-base mb-1">
+          About TranslateGemma 4B
+        </h3>
+        <p className="text-sm text-secondary-foreground">
+          TranslateGemma is a family of translation models from Google, built on
+          top of Gemma 2B. This 4B parameter model supports translations across
+          100+ languages with state-of-the-art quality.{" "}
+          <a
+            href="https://blog.google/innovation-and-ai/technology/developers-tools/translategemma/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:underline underline-offset-2 transition-all hover:underline-offset-4"
+          >
+            Learn more
+          </a>
+        </p>
+      </div>
+
+      <div
+        className="animate-fade-in-up"
+        style={{ animationDelay: "0.2s", opacity: 0 }}
+      >
+        <h3 className="font-semibold text-base mb-1">
+          Completely private & offline-capable
+        </h3>
+        <p className="text-sm text-secondary-foreground">
+          Everything runs entirely in your browser with 🤗 Transformers.js and
+          ONNX Runtime Web — no data is ever sent to a server. Once loaded, it
+          works offline.
+        </p>
+      </div>
+
+      <div
+        className="animate-fade-in-up"
+        style={{ animationDelay: "0.3s", opacity: 0 }}
+      >
+        <h3 className="font-semibold text-base mb-1">
+          Experimental — WebGPU required
+        </h3>
+        <p className="text-sm text-secondary-foreground">
+          This is experimental and requires a browser with WebGPU support and
+          enough VRAM to run the model.
+        </p>
+      </div>
+    </div>
+  );
+}

src/components/ModelLoader.tsx

@@ -0,0 +1,33 @@
+import cn from "../utils/classnames.ts";
+
+export default function ModelLoader({
+  progress,
+  className = "",
+}: {
+  progress: number;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2", className)}>
+      <div className="flex justify-between items-center">
+        <span className="text-sm font-medium text-muted-foreground">
+          Loading model...
+        </span>
+        <span className="text-sm font-medium text-primary animate-pulse-soft">
+          {progress}%
+        </span>
+      </div>
+      <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
+        <div
+          className="bg-primary h-full transition-all duration-300 ease-out relative overflow-hidden"
+          style={{ width: `${progress}%` }}
+        >
+          <div className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_infinite]" />
+        </div>
+      </div>
+      <p className="text-xs text-muted-foreground text-center">
+        This may take a few moments. Please don't close the page.
+      </p>
+    </div>
+  );
+}

src/index.css

@@ -130,3 +130,46 @@ body {
 .animate-pulse-soft {
   animation: pulse-soft 2s ease-in-out infinite;
 }
+
+/* View Transitions */
+::view-transition-old(initialize-content) {
+  animation-duration: 0.2s;
+  animation-timing-function: ease-out;
+  animation-name: fade-out;
+  mix-blend-mode: normal;
+  overflow: hidden;
+}
+
+::view-transition-new(initialize-content) {
+  animation-duration: 0.6s;
+  animation-timing-function: ease-in;
+  animation-name: fade-in-after-scale;
+  mix-blend-mode: normal;
+  overflow: hidden;
+}
+
+::view-transition-group(initialize-content) {
+  animation-duration: 0.4s;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in-after-scale {
+  0% {
+    opacity: 0;
+  }
+  66% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

src/theme/index.ts

@@ -1,3 +1,4 @@
 export { default as Button } from "./button/Button";
 export { default as Textarea } from "./form/Textarea";
 export { default as Loader } from "./misc/Loader";
+export { default as Card } from "./misc/Card";

src/theme/misc/Card.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from "react";
+import cn from "../../utils/classnames.ts";
+
+interface CardProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+export default function Card({ className = "", children }: CardProps) {
+  return (
+    <div
+      className={cn(
+        "bg-white rounded-lg shadow-md p-8 border border-border",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}