added model facts

src/App.tsx

@@ -11,22 +11,7 @@ function App() {
   const init = async () => {
     setIsInitializing(true);
     const t = Translator.getInstance();
-    const loaded = new Map<string, number>();
-    let newProgress = 0;
-    await t.init((e) => {
-      if (e.status === "progress") {
-        loaded.set(e.file, e.loaded);
-        const allLoaded = Array.from(loaded.values()).reduce(
-          (acc: number, curr: number) => acc + curr,
-          0
-        );
-        const percentLoaded = Math.round((100 / Translator.size) * allLoaded);
-        if (newProgress !== percentLoaded) {
-          newProgress = percentLoaded;
-          setProgress(newProgress);
-        }
-      }
-    });
+    await t.init(setProgress);
     setTranslator(t);
     setIsInitializing(false);
   };

src/Initialize.tsx

@@ -5,6 +5,7 @@ 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";
+import { flushSync } from "react-dom";
 
 interface InitializeProps {
   progress: number;
@@ -19,13 +20,20 @@ export default function Initialize({
   isInitializing = false,
   className = "",
 }: InitializeProps) {
+  const handleInitialize = async () => {
+    if (document.startViewTransition) {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          onInitialize();
+        });
+      });
+    } else {
+      await onInitialize();
+    }
+  };
+
   return (
-    <div
-      className={cn(
-        "max-w-2xl w-full mx-auto px-8 animate-fade-in-up",
-        className
-      )}
-    >
+    <div className={cn("max-w-2xl w-full mx-auto px-8", className)}>
       <Card className="flex flex-col items-center gap-6">
         {isInitializing ? (
           <ModelLoader className="w-full" progress={progress} />
@@ -34,7 +42,7 @@ export default function Initialize({
             <Introduction />
             <Button
               variant="primary"
-              onClick={onInitialize}
+              onClick={handleInitialize}
               disabled={isInitializing}
               className="text-lg! w-full"
             >

src/ai/Translator.ts

@@ -1,5 +1,4 @@
 import { pipeline, DataType } from "@huggingface/transformers";
-import { ProgressCallback } from "../types/transformers.ts";
 
 class Translator {
   private static instance: Translator | null = null;
@@ -18,11 +17,28 @@ class Translator {
     return Translator.instance;
   }
 
-  public async init(onProgress?: ProgressCallback) {
+  public async init(onProgress?: (progress: number) => void) {
     if (this.pipeline) return;
 
+    const loaded = new Map<string, number>();
+    let newProgress = 0;
+
     this.pipeline = await pipeline("text-generation", Translator.modelId, {
-      progress_callback: onProgress,
+      progress_callback: (e) => {
+        if (e.status === "progress") {
+          loaded.set(e.file, e.loaded);
+          const allLoaded = Array.from(loaded.values()).reduce(
+            (acc: number, curr: number) => acc + curr,
+            0
+          );
+          const percentLoaded =
+            Math.round((100 / Translator.size) * allLoaded * 100) / 100;
+          if (newProgress !== percentLoaded) {
+            newProgress = percentLoaded;
+            onProgress(newProgress);
+          }
+        }
+      },
       device: "webgpu",
       dtype: Translator.dtype,
     });
@@ -37,8 +53,6 @@ class Translator {
       throw new Error("Translator not initialized. Call init() first.");
     }
 
-    console.log(`Translating from ${sourceLang} to ${targetLang}`, text);
-
     const messages = [
       {
         role: "user",

src/components/ModelLoader.tsx

@@ -1,33 +1,79 @@
+import { CSSProperties, useState, useEffect } from "react";
 import cn from "../utils/classnames.ts";
+import { MODEL_FACTS } from "../constants.ts";
 
 export default function ModelLoader({
   progress,
   className = "",
+  style,
 }: {
   progress: number;
   className?: string;
+  style?: CSSProperties;
 }) {
+  const [shuffledFacts, setShuffledFacts] = useState<readonly string[]>([]);
+  const [currentFactIndex, setCurrentFactIndex] = useState(0);
+  const [isTransitioning, setIsTransitioning] = useState(false);
+
+  // Shuffle facts on mount
+  useEffect(() => {
+    const shuffled = [...MODEL_FACTS].sort(() => Math.random() - 0.5);
+    setShuffledFacts(shuffled);
+  }, []);
+
+  // Rotate facts every 5 seconds
+  useEffect(() => {
+    if (shuffledFacts.length === 0) return;
+
+    const interval = setInterval(() => {
+      setIsTransitioning(true);
+
+      setTimeout(() => {
+        setCurrentFactIndex((prev) => (prev + 1) % shuffledFacts.length);
+        setIsTransitioning(false);
+      }, 400); // Half of transition duration for crossfade
+    }, 10_000);
+
+    return () => clearInterval(interval);
+  }, [shuffledFacts]);
+
   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 className={cn("space-y-4", className)} style={style}>
+      {shuffledFacts.length > 0 && (
+        <div className="min-h-12 flex items-center justify-center">
+          <p
+            className={cn(
+              "text-lg text-center transition-opacity duration-400",
+              isTransitioning ? "opacity-0" : "opacity-100"
+            )}
+          >
+            {shuffledFacts[currentFactIndex]}
+          </p>
+        </div>
+      )}
+
+      {/* Progress */}
+      <div className="space-y-2 mt-8">
+        <div className="flex justify-between items-center">
+          <span className="text-sm font-medium text-muted-foreground">
+            Loading model...
+          </span>
+          <span className="text-sm text-primary animate-pulse-soft font-mono font-bold">
+            {progress.toFixed(2)}%
+          </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>
-      <p className="text-xs text-muted-foreground text-center">
-        This may take a few moments. Please don't close the page.
-      </p>
     </div>
   );
 }

src/constants.ts

@@ -70,3 +70,15 @@ export type LanguageCode = (typeof LANGUAGES_WITH_AUTO)[number]["code"];
 export const getLanguageName = (code: LanguageCode): string => {
   return LANGUAGES.find((lang) => lang.code === code)?.name || code;
 };
+
+export const MODEL_FACTS = [
+  "TranslateGemma 4B runs entirely in your browser. Your text never leaves your device.",
+  "Google's 4B model rivals the translation quality of models 3x its size, thanks to knowledge distilled from Gemini.",
+  "TranslateGemma's quality was refined using an ensemble of AI judges that score translations for accuracy and fluency.",
+  "Evaluated on 55 languages, but trained on nearly 500 language pairs, including many languages AI usually ignores.",
+  "Bengali has 300 million speakers but limited AI training data. TranslateGemma helps bridge this gap.",
+  "Built on Gemma 3, the same foundation Google uses across its AI products but fine-tuned specifically for translation.",
+  "The 4B model was designed for phones and edge devices. Google optimized it to run where cloud access isn't guaranteed.",
+  "Frozen embeddings during training helped TranslateGemma handle scripts and languages not in the training data.",
+  "TranslateGemma is fully open. Researchers can fine-tune it for their own languages, domains, or specialized terminology.",
+] as const;

src/index.css

@@ -86,16 +86,6 @@ body {
   }
 }
 
-@keyframes float {
-  0%,
-  100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-5px);
-  }
-}
-
 @keyframes pulse-soft {
   0%,
   100% {
@@ -123,53 +113,6 @@ body {
   animation: fadeIn 0.6s ease-out forwards;
 }
 
-.animate-float {
-  animation: float 3s ease-in-out infinite;
-}
-
 .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/misc/Card.tsx

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