feat: add WebGPULogo component and integrate it into LoadingScreen

src/components/LoadingScreen.tsx

@@ -2,6 +2,7 @@ import { ChevronDown } from "lucide-react";
 import { MODEL_OPTIONS } from "../constants/models";
 import HfLogo from "./icons/HfLogo";
 import MCPLogo from "./icons/MCPLogo";
+import WebGPULogo from "./icons/WebGPULogo";
 import { useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
@@ -188,7 +189,6 @@ export const LoadingScreen = ({
     handleModelSelect,
   ]);
 
-
   return (
     <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 text-white p-6 overflow-hidden">
       {/* Background Canvas */}
@@ -207,6 +207,16 @@ export const LoadingScreen = ({
       <div className="relative z-20 max-w-4xl w-full flex flex-col items-center">
         {/* Logos */}
         <div className="flex items-center justify-center mb-8 gap-5">
+          <a
+            href="https://gpuweb.github.io/gpuweb/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="WebGPU"
+            className="transform transition-all duration-300 hover:scale-105 hover:-translate-y-1"
+          >
+            <WebGPULogo className="h-16 w-16 md:h-20 md:w-20 text-gray-300 hover:text-white drop-shadow-lg" />
+          </a>
+          <span className="text-gray-500 text-3xl font-extralight">×</span>
           <a
             href="https://huggingface.co/docs/transformers.js"
             target="_blank"
@@ -234,7 +244,8 @@ export const LoadingScreen = ({
             WebGPU MCP
           </h1>
           <p className="text-lg sm:text-xl md:text-2xl text-gray-300 font-light leading-relaxed">
-            Run WebGPU-based models with tool calling in your browser, powered by the{" "}
+            Run WebGPU-based models with tool calling in your browser, powered
+            by the{" "}
             <a
               href="https://modelcontextprotocol.io/"
               target="_blank"
@@ -377,78 +388,112 @@ export const LoadingScreen = ({
             </div>
 
             {/* Dropdown - render in portal to avoid z-index issues */}
-            {isModelDropdownOpen && typeof document !== "undefined" && ReactDOM.createPortal(
-              <>
-                {/* Backdrop */}
-                <div
-                  className="fixed inset-0 z-[999]"
-                  onClick={() => setIsModelDropdownOpen(false)}
-                />
-                {/* Dropdown */}
-                <div
-                  ref={dropdownRef}
-                  role="menu"
-                  aria-label="Model options"
-                  style={{
-                    position: 'fixed',
-                    bottom: dropdownBtnRef.current ? `${window.innerHeight - dropdownBtnRef.current.getBoundingClientRect().top}px` : 'auto',
-                    left: dropdownBtnRef.current ? `${dropdownBtnRef.current.getBoundingClientRect().left}px` : 'auto',
-                    width: dropdownBtnRef.current ? `${dropdownBtnRef.current.getBoundingClientRect().width + 200}px` : '320px',
-                    zIndex: 1000,
-                  }}
-                  className="bg-gray-900 border-2 border-gray-600 rounded-2xl shadow-2xl overflow-y-auto max-h-[300px] min-w-[320px]"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  {MODEL_OPTIONS.map((option, index) => {
-                    const selected = selectedModelId === option.id;
-                    const isActive = activeIndex === index;
-                    return (
-                      <button
-                        key={option.id}
-                        role="menuitem"
-                        aria-checked={selected}
-                        onMouseEnter={() => setActiveIndex(index)}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleModelSelect(option.id);
-                          setIsModelDropdownOpen(false);
-                          dropdownBtnRef.current?.focus();
-                        }}
-                        className={`w-full px-6 py-4 text-left transition-all duration-150 relative outline-none border-b border-gray-700/50 last:border-b-0 cursor-pointer ${
-                          selected
-                            ? "bg-indigo-600 text-white hover:bg-indigo-500"
-                            : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-600"
-                        } ${index === 0 ? "rounded-t-2xl" : ""} ${
-                          index === MODEL_OPTIONS.length - 1
-                            ? "rounded-b-2xl"
-                            : ""
-                        } ${isActive && !selected ? "bg-gray-700" : ""}`}
-                      >
-                        <div className="flex items-center justify-between">
-                          <div className="flex-1">
-                            <div className={`font-semibold text-base mb-1 ${selected ? "text-white" : "text-gray-100"}`}>
-                              {option.label}
-                            </div>
-                            <div className={`text-sm ${selected ? "text-indigo-200" : "text-gray-500"}`}>
-                              {option.size}
+            {isModelDropdownOpen &&
+              typeof document !== "undefined" &&
+              ReactDOM.createPortal(
+                <>
+                  {/* Backdrop */}
+                  <div
+                    className="fixed inset-0 z-[999]"
+                    onClick={() => setIsModelDropdownOpen(false)}
+                  />
+                  {/* Dropdown */}
+                  <div
+                    ref={dropdownRef}
+                    role="menu"
+                    aria-label="Model options"
+                    style={{
+                      position: "fixed",
+                      bottom: dropdownBtnRef.current
+                        ? `${
+                            window.innerHeight -
+                            dropdownBtnRef.current.getBoundingClientRect().top
+                          }px`
+                        : "auto",
+                      left: dropdownBtnRef.current
+                        ? `${
+                            dropdownBtnRef.current.getBoundingClientRect().left
+                          }px`
+                        : "auto",
+                      width: dropdownBtnRef.current
+                        ? `${
+                            dropdownBtnRef.current.getBoundingClientRect()
+                              .width + 200
+                          }px`
+                        : "320px",
+                      zIndex: 1000,
+                    }}
+                    className="bg-gray-900 border-2 border-gray-600 rounded-2xl shadow-2xl overflow-y-auto max-h-[300px] min-w-[320px]"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {MODEL_OPTIONS.map((option, index) => {
+                      const selected = selectedModelId === option.id;
+                      const isActive = activeIndex === index;
+                      return (
+                        <button
+                          key={option.id}
+                          role="menuitem"
+                          aria-checked={selected}
+                          onMouseEnter={() => setActiveIndex(index)}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            handleModelSelect(option.id);
+                            setIsModelDropdownOpen(false);
+                            dropdownBtnRef.current?.focus();
+                          }}
+                          className={`w-full px-6 py-4 text-left transition-all duration-150 relative outline-none border-b border-gray-700/50 last:border-b-0 cursor-pointer ${
+                            selected
+                              ? "bg-indigo-600 text-white hover:bg-indigo-500"
+                              : "bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white active:bg-gray-600"
+                          } ${index === 0 ? "rounded-t-2xl" : ""} ${
+                            index === MODEL_OPTIONS.length - 1
+                              ? "rounded-b-2xl"
+                              : ""
+                          } ${isActive && !selected ? "bg-gray-700" : ""}`}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div className="flex-1">
+                              <div
+                                className={`font-semibold text-base mb-1 ${
+                                  selected ? "text-white" : "text-gray-100"
+                                }`}
+                              >
+                                {option.label}
+                              </div>
+                              <div
+                                className={`text-sm ${
+                                  selected ? "text-indigo-200" : "text-gray-500"
+                                }`}
+                              >
+                                {option.size}
+                              </div>
                             </div>
+                            {selected && (
+                              <div className="flex items-center gap-2 ml-4">
+                                <span className="text-xs font-medium text-indigo-200">
+                                  Selected
+                                </span>
+                                <svg
+                                  className="w-5 h-5 text-white"
+                                  fill="currentColor"
+                                  viewBox="0 0 20 20"
+                                >
+                                  <path
+                                    fillRule="evenodd"
+                                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                                    clipRule="evenodd"
+                                  />
+                                </svg>
+                              </div>
+                            )}
                           </div>
-                          {selected && (
-                            <div className="flex items-center gap-2 ml-4">
-                              <span className="text-xs font-medium text-indigo-200">Selected</span>
-                              <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
-                                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-                              </svg>
-                            </div>
-                          )}
-                        </div>
-                      </button>
-                    );
-                  })}
-                </div>
-              </>,
-              document.body
-            )}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </>,
+                document.body
+              )}
           </div>
         </div>
 
@@ -468,7 +513,6 @@ export const LoadingScreen = ({
           </div>
         )}
       </div>
-
     </div>
   );
 };

src/components/icons/WebGPULogo.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+const WebGPULogo = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    {...props}
+    xmlns="http://www.w3.org/2000/svg"
+    width="768"
+    height="600"
+    viewBox="0 0 768 600"
+    fill="currentColor"
+  >
+    <defs>
+      <style>
+        {`.cls-1, .cls-2, .cls-3, .cls-4, .cls-5 {
+          fill-rule: evenodd;
+          stroke-linejoin: round;
+        }
+        .cls-1 {
+          fill: #005a9c;
+          stroke: #005a9c;
+        }
+        .cls-2 {
+          fill: #0066b0;
+          stroke: #0066b0;
+        }
+        .cls-3 {
+          fill: #0076cc;
+          stroke: #0076cc;
+        }
+        .cls-4 {
+          fill: #0086e8;
+          stroke: #0086e8;
+        }
+        .cls-5 {
+          fill: #0093ff;
+          stroke: #0093ff;
+        }`}
+      </style>
+    </defs>
+    <path className="cls-4" d="m626.63 295.5-60.189-104.25h120.55z" />
+    <path className="cls-5" d="m626.63 87.001-60.189 104.25h120.55z" />
+    <path className="cls-3" d="m506.26 504-120.38-208.5 240.76-2e-3z" />
+    <path className="cls-2" d="m506.26 87-120.38 208.5 240.76-2e-3z" />
+    <path className="cls-1" d="m265.5 504-240.76-417h481.51z" />
+  </svg>
+);
+
+export default WebGPULogo;