Merge pull request #8 from jeasonstudio/chore-add-tips

chore: add some tips in playground

app/components/outputs.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import React from 'react';
+import { cn } from '../utils';
+import { Alert, AlertDescription, AlertTitle } from './ui/alert';
+import { AlertCircle } from 'lucide-react';
+import Link from 'next/link';
+
+export interface OutputsProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const Outputs = React.forwardRef<
+  HTMLDivElement,
+  React.PropsWithChildren<OutputsProps>
+>(({ children, ...props }, ref) => {
+  let infoElement = null;
+
+  const [isBrowserSupport, setIsBrowserSupport] = React.useState(true);
+  const [isEnabledFlags, setIsEnabledFlags] = React.useState(true);
+
+  React.useEffect(() => {
+    function getChromeVersion() {
+      var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+      return raw ? parseInt(raw[2], 10) : 0;
+    }
+    const version = getChromeVersion();
+    setIsBrowserSupport(version >= 127);
+
+    setIsEnabledFlags(!!('ai' in globalThis));
+
+    globalThis.ai?.canCreateGenericSession().then((status) => {
+      setIsEnabledFlags(status === 'readily');
+    });
+  }, []);
+
+  if (!isBrowserSupport || !isEnabledFlags) {
+    infoElement = (
+      <div className="w-[500px] m-auto flex flex-col gap-4">
+        <h2 className="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
+          Enabling AI in Chrome
+        </h2>
+        <p className="leading-7">
+          Chrome&apos;s implementation of built-in AI with Gemini Nano is
+          experimental and will change as they test and address feedback.
+        </p>
+
+        {isBrowserSupport ? null : (
+          <Alert variant="destructive">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Your browser is not supported.</AlertTitle>
+            <AlertDescription>
+              Please update Chrome to version 127 or higher.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {isEnabledFlags ? null : (
+          <div className="flex flex-col items-start justify-start">
+            <p className="leading-7 mb-4">
+              Once your browser is installed, ensure the following flags are
+              set:
+            </p>
+            <ol className="grid gap-4 counter-reset:step">
+              <li className="flex items-center gap-4 text-sm">
+                <div className="flex h-6 w-6 text-xs items-center justify-center rounded-full bg-primary text-primary-foreground counter:step">
+                  1
+                </div>
+                <div className="w-full">
+                  <h4 className="font-medium">
+                    Step 1:&nbsp;
+                    <Link
+                      href="chrome://flags/#prompt-api-for-gemini-nano"
+                      target="_blank"
+                      className="underline"
+                    >
+                      chrome://flags/#prompt-api-for-gemini-nano
+                    </Link>
+                  </h4>
+                  <p className="text-muted-foreground">
+                    Select &apos;Enabled&apos;
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-center gap-4 text-sm">
+                <div className="flex h-6 w-6 text-xs items-center justify-center rounded-full bg-primary text-primary-foreground counter:step">
+                  2
+                </div>
+                <div className="w-full">
+                  <h4 className="font-medium">
+                    Step 2:&nbsp;
+                    <Link
+                      href="chrome://flags/#optimization-guide-on-device-model"
+                      target="_blank"
+                      className="underline"
+                    >
+                      chrome://flags/#optimization-guide-on-device-model
+                    </Link>
+                  </h4>
+                  <p className="text-muted-foreground">
+                    Select &apos;Enabled BypassPrefRequirement&apos;
+                  </p>
+                </div>
+              </li>
+              <li className="flex items-center gap-4 text-sm">
+                <div className="flex h-6 w-6 text-xs items-center justify-center rounded-full bg-primary text-primary-foreground counter:step">
+                  3
+                </div>
+                <div className="w-full">
+                  <h4 className="font-medium">
+                    Step 3:&nbsp;
+                    <Link
+                      href="chrome://components"
+                      target="_blank"
+                      className="underline"
+                    >
+                      chrome://components
+                    </Link>
+                  </h4>
+                  <p className="text-muted-foreground">
+                    Click &apos;Check for Update&apos; on Optimization Guide On
+                    Device Model to download the model. If you don&apos;t see
+                    Optimization Guide, ensure you have set the flags correctly
+                    above, relaunch your browser, and refresh the page.
+                  </p>
+                </div>
+              </li>
+            </ol>
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    infoElement = null;
+  }
+
+  return (
+    <div
+      {...props}
+      ref={ref}
+      className={cn(
+        'relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2 mt-2',
+        props.className
+      )}
+    >
+      {infoElement ?? children}
+    </div>
+  );
+});
+
+Outputs.displayName = 'Outputs';

app/orders/page.tsx

@@ -27,6 +27,7 @@ import {
   useSettingsModel,
 } from '../components/settings';
 import { z } from 'zod';
+import { Outputs } from '../components/outputs';
 
 const schema = z.object({
   name: z.string({ description: 'customer name' }),
@@ -85,7 +86,7 @@ const OrdersPage: React.FC<unknown> = () => {
     <Layout>
       <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3 h-screen">
         <Settings form={form} />
-        <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2 mt-2">
+        <Outputs>
           <div className="mb-2">
             {loading ? (
               <Button size="sm" className="ml-auto" disabled={loading}>
@@ -147,7 +148,7 @@ const OrdersPage: React.FC<unknown> = () => {
               </Table>
             </CardContent>
           </Card>
-        </div>
+        </Outputs>
       </main>
     </Layout>
   );

app/page.tsx

@@ -28,6 +28,7 @@ import {
   useSettingsForm,
   useSettingsModel,
 } from './components/settings';
+import { Outputs } from './components/outputs';
 
 const HomePage: React.FC<unknown> = () => {
   const form = useSettingsForm({
@@ -83,7 +84,7 @@ const HomePage: React.FC<unknown> = () => {
     <Layout>
       <main className="grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3 h-screen">
         <Settings form={form} />
-        <div className="relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2 mt-2">
+        <Outputs>
           <Badge variant="outline" className="absolute right-3 top-3">
             Outputs
           </Badge>
@@ -197,7 +198,7 @@ const HomePage: React.FC<unknown> = () => {
               </TooltipProvider>
             </div>
           </form>
-        </div>
+        </Outputs>
       </main>
     </Layout>
   );

app/utils.ts

@@ -4,28 +4,3 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }
-
-export async function checkEnv() {
-  function getChromeVersion() {
-    var raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
-    return raw ? parseInt(raw[2], 10) : 0;
-  }
-
-  const version = getChromeVersion();
-  if (version < 127) {
-    throw new Error(
-      'Your browser is not supported. Please update to 127 version or greater.'
-    );
-  }
-
-  if (!('ai' in globalThis)) {
-    throw new Error(
-      'Prompt API is not available, check your configuration in chrome://flags/#prompt-api-for-gemini-nano'
-    );
-  }
-
-  const state = await ai?.canCreateGenericSession();
-  if (state !== 'readily') {
-    throw new Error('Built-in AI is not ready, check your configuration in chrome://flags/#optimization-guide-on-device-model');
-  }
-}