feat: add sample video loading functionality and improve button styling in upscaler page

docs/upscaler/index.html

@@ -41,7 +41,11 @@
             name="twitter:description"
             content="Upscale videos with AI super resolution directly in your browser. Free, private, no upload needed."
         />
-        <link rel="shortcut icon" href="/assets/img/favicon.ico" type="image/x-icon" />
+        <link
+            rel="shortcut icon"
+            href="/assets/img/favicon.ico"
+            type="image/x-icon"
+        />
         <script
             async
             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8579453810848662"
@@ -131,9 +135,35 @@
                                     class="text-slate-700 font-medium text-base mb-1"
                                     >Choose a video file</span
                                 >
-                                <span class="text-slate-400 text-sm"
+                                <span class="text-slate-400 text-sm mb-4"
                                     >or drag and drop here</span
                                 >
+                                <button
+                                    type="button"
+                                    onclick="loadSampleVideo(event)"
+                                    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-semibold text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-all"
+                                >
+                                    <svg
+                                        class="w-4 h-4"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+                                        />
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                                        />
+                                    </svg>
+                                    Try sample video
+                                </button>
                             </div>
                             <!-- Video Preview (shown after file selection) -->
                             <div
@@ -517,7 +547,9 @@
                     signal,
                 });
 
-                document.addEventListener("mousemove", updatePosition, { signal });
+                document.addEventListener("mousemove", updatePosition, {
+                    signal,
+                });
                 document.addEventListener("touchmove", updatePosition, {
                     passive: false,
                     signal,
@@ -526,18 +558,22 @@
                 document.addEventListener("mouseup", stopDrag, { signal });
                 document.addEventListener("touchend", stopDrag, { signal });
 
-                container.addEventListener("click", (e) => {
+                container.addEventListener(
-                    const rect = container.getBoundingClientRect();
+                    "click",
-                    const x = e.clientX - rect.left;
+                    (e) => {
-                    const { percentage } = updateComparisonPosition(
+                        const rect = container.getBoundingClientRect();
-                        originalElement,
+                        const x = e.clientX - rect.left;
-                        rect,
+                        const { percentage } = updateComparisonPosition(
-                        x,
+                            originalElement,
-                    );
+                            rect,
+                            x,
+                        );
 
-                    handle.style.left = x + "px";
+                        handle.style.left = x + "px";
-                    applyMaskToElement(originalElement, percentage);
+                        applyMaskToElement(originalElement, percentage);
-                }, { signal });
+                    },
+                    { signal },
+                );
 
                 applyMaskToElement(originalElement, 50);
                 handle.style.left = container.offsetWidth / 2 + "px";
@@ -583,7 +619,11 @@
                     originalVideo.currentTime = enhancedVideo.currentTime;
                 });
 
-                comparisonCleanup = setupComparisonDrag(container, handle, originalVideo);
+                comparisonCleanup = setupComparisonDrag(
+                    container,
+                    handle,
+                    originalVideo,
+                );
 
                 enhancedVideo.autoplay = true;
                 enhancedVideo.play().catch(() => {});
@@ -596,6 +636,47 @@
                 return s > 0 ? `${m}m ${s}s` : `${m}m`;
             }
 
+            async function loadSampleVideo(e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const sampleUrl =
+                    "https://artplayer.org/assets/sample/frag_bunny.mp4";
+                const btn = e.currentTarget;
+                const originalText = btn.innerHTML;
+
+                btn.disabled = true;
+                btn.innerHTML = `
+                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    Loading...
+                `;
+
+                try {
+                    const response = await fetch(sampleUrl);
+                    const blob = await response.blob();
+                    const file = new File([blob], "sample_video.mp4", {
+                        type: "video/mp4",
+                    });
+
+                    // Create a DataTransfer to set files on input
+                    const dataTransfer = new DataTransfer();
+                    dataTransfer.items.add(file);
+                    document.getElementById("universalInput").files =
+                        dataTransfer.files;
+                    document
+                        .getElementById("universalInput")
+                        .dispatchEvent(new Event("change"));
+                } catch (error) {
+                    console.error("Failed to load sample video:", error);
+                    alert("Failed to load sample video. Please try again.");
+                    btn.disabled = false;
+                    btn.innerHTML = originalText;
+                }
+            }
+
             let previewVideoUrl = null;
 
             function showVideoPreview(file) {
@@ -873,14 +954,23 @@
                     videoResultSection?.classList.remove("hidden");
 
                     // Scroll to result section
-                    resultSection.scrollIntoView({ behavior: "smooth", block: "start" });
+                    resultSection.scrollIntoView({
+                        behavior: "smooth",
+                        block: "start",
+                    });
 
                     // Initialize comparison drag after video loads
-                    const enhancedVideo = document.getElementById("resultVideoEnhanced");
+                    const enhancedVideo = document.getElementById(
+                        "resultVideoEnhanced",
+                    );
                     if (enhancedVideo.readyState >= 2) {
                         initVideoComparisonDrag();
                     } else {
-                        enhancedVideo.addEventListener("loadeddata", initVideoComparisonDrag, { once: true });
+                        enhancedVideo.addEventListener(
+                            "loadeddata",
+                            initVideoComparisonDrag,
+                            { once: true },
+                        );
                     }
                 } catch (error) {
                     console.error("Upscaling error:", error);