From 28ad2d28d8bb5e36373183aac830c21d51924fb0 Mon Sep 17 00:00:00 2001 From: sedanah-m Date: Tue, 21 Jul 2026 15:38:35 -0700 Subject: [PATCH 1/9] feat: multimodal feature with UI --- .../src/features/multimodal/index.tsx | 102 +- .../src/features/multimodal/service.ts | 49 +- ai/ai-samples/yarn.lock | 1510 ----------------- 3 files changed, 146 insertions(+), 1515 deletions(-) delete mode 100644 ai/ai-samples/yarn.lock diff --git a/ai/ai-samples/src/features/multimodal/index.tsx b/ai/ai-samples/src/features/multimodal/index.tsx index 73a48218b..9169ced92 100644 --- a/ai/ai-samples/src/features/multimodal/index.tsx +++ b/ai/ai-samples/src/features/multimodal/index.tsx @@ -1,9 +1,103 @@ -import React from 'react'; +import { useState, useRef } from 'react'; +import { generateMultimodalContent } from './service'; + +export default function MultimodalView() { + const [prompt, setPrompt] = useState('Describe these files in detail.'); + const [response, setResponse] = useState(''); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); + + // use ref to cleanly grab the files without needing complex state management + const fileInputRef = useRef(null); + + const handleGenerate = async () => { + const files = fileInputRef.current?.files; + + if (!files || files.length === 0) { + setError('Please select at least one file (Image or PDF).'); + return; + } + + if (!prompt.trim()) { + setError('Please enter a prompt.'); + return; + } + + setLoading(true); + setError(null); + setResponse(''); + + try { + const fileArray = Array.from(files); + + const resultText = await generateMultimodalContent(prompt, fileArray); + setResponse(resultText); + } catch (err: any) { + setError(err.message || 'An error occurred during multimodal generation.'); + } finally { + setLoading(false); + } + }; -export default function MultimodalFeature() { return ( -
-

multimodal

+
+

Multimodal Generation

+

+ Upload images or PDFs alongside a text prompt to generate content. +

+ +
+ + +
+ +
+ +