Merge pull request #95 from aws-samples/rag-optin

RAG Opt-in 対応

README.md

@@ -95,7 +95,19 @@ npx -w packages/cdk cdk bootstrap
 npm run cdk:deploy
 ```
 
-RAG のユースケースを試す場合は、Kendra の Data source を手動で Sync する必要があります。以下の手順で行なってください。
+### RAG 有効化
+
+RAG のユースケースを試す場合は、RAG の有効化および Kendra の Data source を手動で Sync する必要があります。
+
+まず、RAG を有効化して再デプロイします。
+`packages/cdk/cdk.json` を開き、`context` の `ragEnabled` を `true` に変更します。
+その後、以下のコマンドで再デプロイしてください。
+
+```bash
+npm run cdk:deploy
+```
+
+続いて、Kendra の Data source の Sync を以下の手順で行なってください。
 
 1. [Amazon Kendra のコンソール画面](https://console.aws.amazon.com/kendra/home) を開く
 1. generative-ai-use-cases-index をクリック
@@ -105,7 +117,7 @@ RAG のユースケースを試す場合は、Kendra の Data source を手動
 
 Sync run history の Status / Summary に Completed が表示されれば完了です。AWS の Amazon Bedrock 関連のページをクローリングし、自動でドキュメントが追加されます。
 
-## モデル・リージョンの切り替え
+### モデル・リージョンの切り替え
 
 - デフォルトでは `us-east-1` の `anthropic.claude-v2` を利用しています。異なる設定を利用したい場合は [/docs/BEDROCK.md](docs/BEDROCK.md) をご確認ください。
 - Amazon Bedrock ではなく Amazon SageMaker にデプロイしたカスタムモデルを使うことも可能です。詳細は [/docs/SAGEMAKER.md](docs/SAGEMAKER.md) をご確認ください。

packages/cdk/cdk.json

@@ -17,6 +17,7 @@
     ]
   },
   "context": {
+    "ragEnabled": false,
     "@aws-cdk/aws-lambda:recognizeLayerVersion": true,
     "@aws-cdk/core:checkSecretUsage": true,
     "@aws-cdk/core:target-partitions": [
@@ -54,4 +55,4 @@
     "@aws-cdk/core:includePrefixInUniqueNameGeneration": true,
     "@aws-cdk/aws-opensearchservice:enableOpensearchMultiAzWithStandby": true
   }
-}
+}

packages/cdk/lib/construct/index.ts

@@ -2,3 +2,4 @@ export * from './api';
 export * from './auth';
 export * from './web';
 export * from './database';
+export * from './rag';

packages/cdk/lib/construct/web.ts

@@ -11,6 +11,7 @@ export interface WebProps {
   userPoolClientId: string;
   idPoolId: string;
   predictStreamFunctionArn: string;
+  ragEnabled: boolean;
 }
 
 export class Web extends Construct {
@@ -74,6 +75,7 @@ export class Web extends Construct {
         VITE_APP_USER_POOL_CLIENT_ID: props.userPoolClientId,
         VITE_APP_IDENTITY_POOL_ID: props.idPoolId,
         VITE_APP_PREDICT_STREAM_FUNCTION_ARN: props.predictStreamFunctionArn,
+        VITE_APP_RAG_ENABLED: props.ragEnabled.toString(),
       },
     });
 

packages/cdk/lib/generative-ai-use-cases-stack.ts

@@ -1,14 +1,15 @@
 import { Stack, StackProps, CfnOutput } from 'aws-cdk-lib';
 import { Construct } from 'constructs';
-import { Auth, Api, Web, Database } from './construct';
-import { Rag } from './construct/rag';
+import { Auth, Api, Web, Database, Rag } from './construct';
 
 export class GenerativeAiUseCasesStack extends Stack {
   constructor(scope: Construct, id: string, props?: StackProps) {
     super(scope, id, props);
 
     process.env.overrideWarningsEnabled = 'false';
 
+    const ragEnabled: boolean = this.node.tryGetContext('ragEnabled') || false;
+
     const auth = new Auth(this, 'Auth');
     const database = new Database(this, 'Database');
     const api = new Api(this, 'API', {
@@ -23,12 +24,15 @@ export class GenerativeAiUseCasesStack extends Stack {
       userPoolClientId: auth.client.userPoolClientId,
       idPoolId: auth.idPool.identityPoolId,
       predictStreamFunctionArn: api.predictStreamFunction.functionArn,
+      ragEnabled,
     });
 
-    new Rag(this, 'Rag', {
-      userPool: auth.userPool,
-      api: api.api,
-    });
+    if (ragEnabled) {
+      new Rag(this, 'Rag', {
+        userPool: auth.userPool,
+        api: api.api,
+      });
+    }
 
     new CfnOutput(this, 'Region', {
       value: this.region,
@@ -53,5 +57,9 @@ export class GenerativeAiUseCasesStack extends Stack {
     new CfnOutput(this, 'PredictStreamFunctionArn', {
       value: api.predictStreamFunction.functionArn,
     });
+
+    new CfnOutput(this, 'RagEnabled', {
+      value: ragEnabled.toString(),
+    });
   }
 }

packages/web/src/App.tsx

@@ -13,7 +13,7 @@ import {
   PiChatsCircle,
 } from 'react-icons/pi';
 import { Outlet } from 'react-router-dom';
-import Drawer from './components/Drawer';
+import Drawer, { ItemProps } from './components/Drawer';
 import { Authenticator, translations } from '@aws-amplify/ui-react';
 import { Amplify, I18n } from 'aws-amplify';
 import '@aws-amplify/ui-react/styles.css';
@@ -22,7 +22,9 @@ import MenuItem from './components/MenuItem';
 import useDrawer from './hooks/useDrawer';
 import useConversation from './hooks/useConversation';
 
-const items = [
+const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
+
+const items: ItemProps[] = [
   {
     label: 'ホーム',
     to: '/',
@@ -33,11 +35,13 @@ const items = [
     to: '/chat',
     icon: <PiChatsCircle />,
   },
-  {
-    label: 'RAG チャット',
-    to: '/rag',
-    icon: <PiChatCircleText />,
-  },
+  ragEnabled
+    ? {
+        label: 'RAG チャット',
+        to: '/rag',
+        icon: <PiChatCircleText />,
+      }
+    : null,
   {
     label: '要約',
     to: '/summarize',
@@ -53,12 +57,14 @@ const items = [
     to: '/cs',
     icon: <PiPencil />,
   },
-  {
-    label: 'Kendra 検索',
-    to: '/kendra',
-    icon: <PiMagnifyingGlass />,
-  },
-];
+  ragEnabled
+    ? {
+        label: 'Kendra 検索',
+        to: '/kendra',
+        icon: <PiMagnifyingGlass />,
+      }
+    : null,
+].flatMap((i) => (i !== null ? [i] : []));
 
 // /chat/:chatId の形式から :chatId を返す
 // path が別の形式の場合は null を返す

packages/web/src/components/Drawer.tsx

@@ -7,7 +7,7 @@ import { PiSignOut, PiX, PiGithubLogo } from 'react-icons/pi';
 import { ReactComponent as MLLogo } from '../assets/model.svg';
 import ChatList from './ChatList';
 
-type ItemProps = BaseProps & {
+export type ItemProps = BaseProps & {
   label: string;
   to: string;
   icon: JSX.Element;

packages/web/src/main.tsx

@@ -2,7 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import {
+  RouterProvider,
+  createBrowserRouter,
+  RouteObject,
+} from 'react-router-dom';
 import LandingPage from './pages/LandingPage.tsx';
 import ChatPage from './pages/ChatPage.tsx';
 import SummarizePage from './pages/SummarizePage.tsx';
@@ -12,48 +16,56 @@ import NotFound from './pages/NotFound.tsx';
 import KendraSearchPage from './pages/KendraSearchPage.tsx';
 import RagPage from './pages/RagPage.tsx';
 
-const router = createBrowserRouter([
+const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
+
+const routes: RouteObject[] = [
   {
     path: '/',
-    element: <App />,
-    children: [
-      {
-        path: '/',
-        element: <LandingPage />,
-      },
-      {
-        path: '/chat',
-        element: <ChatPage />,
-      },
-      {
-        path: '/chat/:chatId',
-        element: <ChatPage />,
-      },
-      {
-        path: '/summarize',
-        element: <SummarizePage />,
-      },
-      {
-        path: '/mail',
-        element: <GenerateMail />,
-      },
-      {
-        path: '/cs',
-        element: <GenerateMessage />,
-      },
-      {
+    element: <LandingPage />,
+  },
+  {
+    path: '/chat',
+    element: <ChatPage />,
+  },
+  {
+    path: '/chat/:chatId',
+    element: <ChatPage />,
+  },
+  {
+    path: '/summarize',
+    element: <SummarizePage />,
+  },
+  {
+    path: '/mail',
+    element: <GenerateMail />,
+  },
+  {
+    path: '/cs',
+    element: <GenerateMessage />,
+  },
+  ragEnabled
+    ? {
         path: '/rag',
         element: <RagPage />,
-      },
-      {
+      }
+    : null,
+  ragEnabled
+    ? {
         path: '/kendra',
         element: <KendraSearchPage />,
-      },
-      {
-        path: '*',
-        element: <NotFound />,
-      },
-    ],
+      }
+    : null,
+  {
+    path: '*',
+    element: <NotFound />,
+  },
+].flatMap((r) => (r !== null ? [r] : []));
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: routes,
   },
 ]);
 

packages/web/src/pages/LandingPage.tsx

@@ -12,6 +12,8 @@ import {
 } from 'react-icons/pi';
 import { ReactComponent as AwsIcon } from '../assets/aws.svg';
 
+const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
+
 const LandingPage: React.FC = () => {
   const navigate = useNavigate();
 
@@ -83,7 +85,7 @@ ABC株式会社の鈴木です。いつもお世話になっております。
 引き続き、ABC株式会社のご支援に努めてまいりますので、今後ともよろしくお願い申し上げます。
 
 鈴木
-`,
+        `,
         recipient: '',
         recipientAttr: '',
         sender: '',
@@ -135,20 +137,22 @@ ABC株式会社の鈴木です。いつもお世話になっております。
             </div>
           </div>
         </CardDemo>
-        <CardDemo label="RAG チャット" onClickDemo={demoRag}>
-          <div className="flex flex-row items-start">
-            <div className="mr-4 text-7xl">
-              <PiChatCircleText />
+        {ragEnabled && (
+          <CardDemo label="RAG チャット" onClickDemo={demoRag}>
+            <div className="flex flex-row items-start">
+              <div className="mr-4 text-7xl">
+                <PiChatCircleText />
+              </div>
+              <div className="text-sm">
+                RAG (Retrieval Augmented Generation) は、情報の検索と LLM
+                の文章生成を組み合わせる手法のことで、効果的な情報アクセスを実現できます。Amazon
+                Kendra から取得した参考ドキュメントをベースに LLM
+                が回答を生成してくれるため、「社内情報に対応した LLM
+                チャット」を簡単に実現することが可能です。
+              </div>
             </div>
-            <div className="text-sm">
-              RAG (Retrieval Augmented Generation) は、情報の検索と LLM
-              の文章生成を組み合わせる手法のことで、効果的な情報アクセスを実現できます。Amazon
-              Kendra から取得した参考ドキュメントをベースに LLM
-              が回答を生成してくれるため、「社内情報に対応した LLM
-              チャット」を簡単に実現することが可能です。
-            </div>
-          </div>
-        </CardDemo>
+          </CardDemo>
+        )}
         <CardDemo label="要約" onClickDemo={demoSummarize}>
           <div className="flex flex-row items-start">
             <div className="mr-4 text-7xl">

packages/web/src/vite-env.d.ts

@@ -7,6 +7,7 @@ interface ImportMetaEnv {
   readonly VITE_APP_USER_POOL_CLIENT_ID: string;
   readonly VITE_APP_IDENTITY_POOL_ID: string;
   readonly VITE_APP_PREDICT_STREAM_FUNCTION_ARN: string;
+  readonly VITE_APP_RAG_ENABLED: string;
 }
 
 interface ImportMeta {

setup-env.sh

@@ -19,3 +19,4 @@ export VITE_APP_USER_POOL_ID=`stack_output 'UserPoolId'`
 export VITE_APP_USER_POOL_CLIENT_ID=`stack_output 'UserPoolClientId'`
 export VITE_APP_IDENTITY_POOL_ID=`stack_output 'IdPoolId'`
 export VITE_APP_PREDICT_STREAM_FUNCTION_ARN=`stack_output PredictStreamFunctionArn`
+export VITE_APP_RAG_ENABLED=`stack_output RagEnabled`