Merge pull request #423 from aws-samples/video

[新規ユースケース] 映像分析
aws-samples · Mar 28, 2024 · d056cc8 · d056cc8
2 parents e5f6cf8 + c569d51
commit d056cc8
Show file tree

Hide file tree

Showing 8 changed files with 378 additions and 3 deletions.
diff --git a/packages/cdk/bin/generative-ai-use-cases.ts b/packages/cdk/bin/generative-ai-use-cases.ts
@@ -54,7 +54,7 @@ const anonymousUsageTracking: boolean = !!app.node.tryGetContext(
 );
 
 const vpcId = app.node.tryGetContext('vpcId');
-if (typeof vpcId != 'undefined' && vpcId != null && typeof vpcId != 'string' ) {
+if (typeof vpcId != 'undefined' && vpcId != null && typeof vpcId != 'string') {
   throw new Error('vpcId must be string or undefined');
 }
 if (typeof vpcId == 'string' && !vpcId.match(/^vpc-/)) {

diff --git a/packages/web/src/@types/navigate.d.ts b/packages/web/src/@types/navigate.d.ts
@@ -62,3 +62,7 @@ export type WebContentPageQueryParams = BaseQueryParams & {
   url?: string;
   context?: string;
 };
+
+export type VideoAnalyzerPageQueryParams = BaseQueryParams & {
+  content: string;
+};
diff --git a/packages/web/src/App.tsx b/packages/web/src/App.tsx
@@ -17,6 +17,7 @@ import {
   PiX,
   PiRobot,
   PiUploadSimple,
+  PiVideoCamera,
 } from 'react-icons/pi';
 import { Outlet } from 'react-router-dom';
 import Drawer, { ItemProps } from './components/Drawer';
@@ -26,11 +27,14 @@ import useDrawer from './hooks/useDrawer';
 import useConversation from './hooks/useConversation';
 import PopupInterUseCasesDemo from './components/PopupInterUseCasesDemo';
 import useInterUseCases from './hooks/useInterUseCases';
+import { MODELS } from './hooks/useModel';
 
 const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
 const agentEnabled: boolean = import.meta.env.VITE_APP_AGENT_ENABLED === 'true';
 const recognizeFileEnabled: boolean =
   import.meta.env.VITE_APP_RECOGNIZE_FILE_ENABLED === 'true';
+const { multiModalModelIds } = MODELS;
+const multiModalEnabled: boolean = multiModalModelIds.length > 0;
 
 const items: ItemProps[] = [
   {
@@ -103,6 +107,14 @@ const items: ItemProps[] = [
     icon: <PiImages />,
     display: 'usecase' as const,
   },
+  multiModalEnabled
+    ? {
+        label: '映像分析',
+        to: '/video',
+        icon: <PiVideoCamera />,
+        display: 'usecase' as const,
+      }
+    : null,
   {
     label: '音声認識',
     to: '/transcribe',

diff --git a/packages/web/src/hooks/useFiles.ts b/packages/web/src/hooks/useFiles.ts
@@ -3,7 +3,7 @@ import useFileApi from './useFileApi';
 import { UploadedFileType } from 'generative-ai-use-cases-jp';
 import { produce } from 'immer';
 
-const extractBaseURL = (url: string) => {
+export const extractBaseURL = (url: string) => {
   return url.split(/[?#]/)[0];
 };
 const useFilesState = create<{

diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
@@ -16,6 +16,7 @@ import SummarizePage from './pages/SummarizePage';
 import GenerateTextPage from './pages/GenerateTextPage';
 import EditorialPage from './pages/EditorialPage';
 import TranslatePage from './pages/TranslatePage';
+import VideoAnalyzerPage from './pages/VideoAnalyzerPage';
 import NotFound from './pages/NotFound';
 import KendraSearchPage from './pages/KendraSearchPage';
 import RagPage from './pages/RagPage';
@@ -24,13 +25,16 @@ import GenerateImagePage from './pages/GenerateImagePage';
 import TranscribePage from './pages/TranscribePage';
 import AgentChatPage from './pages/AgentChatPage.tsx';
 import FileUploadPage from './pages/FileUploadPage.tsx';
+import { MODELS } from './hooks/useModel';
 
 const ragEnabled: boolean = import.meta.env.VITE_APP_RAG_ENABLED === 'true';
 const samlAuthEnabled: boolean =
   import.meta.env.VITE_APP_SAMLAUTH_ENABLED === 'true';
 const agentEnabled: boolean = import.meta.env.VITE_APP_AGENT_ENABLED === 'true';
 const recognizeFileEnabled: boolean =
   import.meta.env.VITE_APP_RECOGNIZE_FILE_ENABLED === 'true';
+const { multiModalModelIds } = MODELS;
+const multiModalEnabled: boolean = multiModalModelIds.length > 0;
 
 const routes: RouteObject[] = [
   {
@@ -81,6 +85,12 @@ const routes: RouteObject[] = [
     path: '/transcribe',
     element: <TranscribePage />,
   },
+  multiModalEnabled
+    ? {
+        path: '/video',
+        element: <VideoAnalyzerPage />,
+      }
+    : null,
   recognizeFileEnabled
     ? {
         path: '/file',