Gemini File API Multimodal Upload App — AI-Generated HTML Example
CODE PREVIEW
エディタを読み込み中…
P
Prompt
Create a single-page HTML app that demonstrates the Gemini File API for multimodal input. The page must: 1) Allow the user to upload an image, audio, or video file. 2) After upload, send the file URI to the Gemini API (use a simulated/placeholder API key) and display the AI's analysis result. 3) Use a clean modern UI with card layout. 4) Include a loading spinner during processing. 5) Handle errors gracefully with a message. Use CDN for Google's Generative AI client library if needed. Make it visually appealing with a gradient background. Output only the HTML with embedded CSS/JS.
このデモはGemini File APIを使ったマルチモーダル入力を紹介します。画像・音声・動画をアップロードし、分析ボタンをクリックするとAIが解釈した結果を表示します。グラデーション背景とカードレイアウトの洗練されたUI、ローディングスピナー、エラーハンドリングを備えています。実際のGemini APIキーに差し替えれば本稼働します。
Prompt Overview
This demo introduces multimodal input using the Gemini File API. Upload images, audio, or video, and click the analysis button to display the AI's interpretation results. It features a sophisticated UI with a gradient background and card layout, a loading spinner, and error handling. Replace the placeholder with an actual Gemini API key to make it fully operational.
Was this prompt helpful?
Comments
Comments appear after moderation
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選