From 5b3d3ba4555691594a91f52bfcadbfd8b5f99035 Mon Sep 17 00:00:00 2001 From: Jeason Date: Thu, 4 Jul 2024 11:40:31 +0800 Subject: [PATCH] chore: add some tips in playground --- app/components/outputs.tsx | 149 +++++++++++++++++++++++++++++++++++++ app/orders/page.tsx | 5 +- app/page.tsx | 5 +- app/utils.ts | 25 ------- 4 files changed, 155 insertions(+), 29 deletions(-) create mode 100644 app/components/outputs.tsx diff --git a/app/components/outputs.tsx b/app/components/outputs.tsx new file mode 100644 index 0000000..ed2afe8 --- /dev/null +++ b/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 {} + +export const Outputs = React.forwardRef< + HTMLDivElement, + React.PropsWithChildren +>(({ 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 = ( +
+

+ Enabling AI in Chrome +

+

+ Chrome's implementation of built-in AI with Gemini Nano is + experimental and will change as they test and address feedback. +

+ + {isBrowserSupport ? null : ( + + + Your browser is not supported. + + Please update Chrome to version 127 or higher. + + + )} + + {isEnabledFlags ? null : ( +
+

+ Once your browser is installed, ensure the following flags are + set: +

+
    +
  1. +
    + 1 +
    +
    +

    + Step 1:  + + chrome://flags/#prompt-api-for-gemini-nano + +

    +

    + Select 'Enabled' +

    +
    +
    2. +
  2. +
    + 2 +
    +
    +

    + Step 2:  + + chrome://flags/#optimization-guide-on-device-model + +

    +

    + Select 'Enabled BypassPrefRequirement' +

    +
    +
    3. +
  3. +
    + 3 +
    +
    +

    + Step 3:  + + chrome://components + +

    +

    + Click 'Check for Update' on Optimization Guide On + Device Model to download the model. If you don't see + Optimization Guide, ensure you have set the flags correctly + above, relaunch your browser, and refresh the page. +

    +
    +
    4. +
+
+ )} +
+ ); + } else { + infoElement = null; + } + + return ( +
+ {infoElement ?? children} +
+ ); +}); + +Outputs.displayName = 'Outputs'; diff --git a/app/orders/page.tsx b/app/orders/page.tsx index d4565d0..66ff6f1 100644 --- a/app/orders/page.tsx +++ b/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 = () => {
-
+
{loading ? (
+
); diff --git a/app/page.tsx b/app/page.tsx index efe1cac..3fdde14 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -28,6 +28,7 @@ import { useSettingsForm, useSettingsModel, } from './components/settings'; +import { Outputs } from './components/outputs'; const HomePage: React.FC = () => { const form = useSettingsForm({ @@ -83,7 +84,7 @@ const HomePage: React.FC = () => {
-
+ Outputs @@ -197,7 +198,7 @@ const HomePage: React.FC = () => {
- +
); diff --git a/app/utils.ts b/app/utils.ts index 3fcbef3..9ad0df4 100644 --- a/app/utils.ts +++ b/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'); - } -}