Add tag overlay to media areas #7
Conversation
Add comprehensive metadata system for media assets: - Extend Asset type with AssetMetadata interface (AI tool, prompt format, prompt content) - Add updateAssetMetadata function in store for metadata management - Add metadata editing UI in Properties Panel (AI tool input, prompt format select, prompt input) - Display metadata as overlay on canvas preview cells with gradient background - Show metadata tags in timeline view with colored badges - All metadata displayed automatically without requiring cell selection
Summary of ChangesHello @Sunwood-ai-labs, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request significantly enhances the application's ability to manage and display rich metadata for media assets. It introduces a structured metadata system, provides a user interface for editing this information, and visually integrates the metadata into both the canvas preview and timeline views, making asset context immediately accessible to users. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
🦊 狐崎煌羽 のレビュー🦊 狐崎煌羽のエグゼ-ティブレビュー
厳しく見るポイント
実行判断
リーダーメモ
— 狐崎煌羽 |
🎀 雪村綾乃 のレビュー🎀 雪村綾乃のUXチェック
ここ映えてる！
ここダサくない？
まとめ
— 雪村綾乃 |
🌿 鬼塚蓮司 のレビュー🌿 鬼塚蓮司のエンジニアリングレビュー
気に入ったところ
ここ工夫したらもっと良さげ
追加でチェックしたいこと
— 鬼塚蓮司 |
There was a problem hiding this comment.
Code Review
This pull request introduces a comprehensive metadata system for media assets, including an editing UI and display overlays in the canvas and timeline. The implementation is well-structured, extending the data model and state management correctly. My review focuses on a potential runtime error in the properties panel, a usability improvement for prompt editing, and an incomplete feature related to metadata tags. Addressing these points will improve the robustness and completeness of this new functionality.
| onChange={(event) => | ||
| updateAssetMetadata(activeAsset.id, { | ||
| ...activeAsset.metadata, | ||
| aiTool: event.target.value | ||
| }) | ||
| } |
There was a problem hiding this comment.
The onChange handler for the 'AI ツール' input might cause a runtime error. If activeAsset.metadata is undefined, spreading it with ...activeAsset.metadata will throw a TypeError. You should handle the case where metadata is initially undefined by providing a fallback empty object.
| onChange={(event) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...activeAsset.metadata, | |
| aiTool: event.target.value | |
| }) | |
| } | |
| onChange={(event) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...(activeAsset.metadata ?? {}), | |
| aiTool: event.target.value | |
| }) | |
| } |
| onValueChange={(value) => | ||
| updateAssetMetadata(activeAsset.id, { | ||
| ...activeAsset.metadata, | ||
| promptFormat: value | ||
| }) | ||
| } |
There was a problem hiding this comment.
Similar to the 'AI ツール' input, the onValueChange handler here can cause a runtime error if activeAsset.metadata is undefined when spreading it. Please add a fallback to an empty object to prevent this.
| onValueChange={(value) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...activeAsset.metadata, | |
| promptFormat: value | |
| }) | |
| } | |
| onValueChange={(value) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...(activeAsset.metadata ?? {}), | |
| promptFormat: value | |
| }) | |
| } |
| onChange={(event) => | ||
| updateAssetMetadata(activeAsset.id, { | ||
| ...activeAsset.metadata, | ||
| prompt: event.target.value | ||
| }) | ||
| } |
There was a problem hiding this comment.
The onChange handler for 'プロンプト内容' has the same potential runtime error as the other metadata fields if activeAsset.metadata is undefined. Please add a fallback to an empty object to ensure the update is safe.
onChange={(event) =>
updateAssetMetadata(activeAsset.id, {
...(activeAsset.metadata ?? {}),
prompt: event.target.value
})
}
| <Input | ||
| type="text" | ||
| placeholder="プロンプトの内容" | ||
| value={activeAsset.metadata?.prompt ?? ""} | ||
| onChange={(event) => | ||
| updateAssetMetadata(activeAsset.id, { | ||
| ...activeAsset.metadata, | ||
| prompt: event.target.value | ||
| }) | ||
| } | ||
| /> |
There was a problem hiding this comment.
The 'プロンプト内容' (Prompt Content) field uses a single-line <Input /> component. Prompts can often be long and multi-line. For a better user experience, consider using a multi-line <Textarea /> component instead. This will make it easier for users to view and edit longer prompts. You'll likely need to import Textarea from @/components/ui/textarea.
| <Input | |
| type="text" | |
| placeholder="プロンプトの内容" | |
| value={activeAsset.metadata?.prompt ?? ""} | |
| onChange={(event) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...activeAsset.metadata, | |
| prompt: event.target.value | |
| }) | |
| } | |
| /> | |
| <Textarea | |
| placeholder="プロンプトの内容" | |
| value={activeAsset.metadata?.prompt ?? ""} | |
| onChange={(event) => | |
| updateAssetMetadata(activeAsset.id, { | |
| ...activeAsset.metadata, | |
| prompt: event.target.value | |
| }) | |
| } | |
| /> |
| aiTool?: string; // AI tool name (e.g., "DALL-E 3", "Midjourney", "Stable Diffusion") | ||
| promptFormat?: string; // Prompt format (e.g., "JSON", "YAML", "Plain Text") | ||
| prompt?: string; // Actual prompt content | ||
| tags?: string[]; // Additional custom tags |
There was a problem hiding this comment.
The tags property is defined in the AssetMetadata interface, and the pull request description mentions 'Show metadata tags in timeline view with colored badges'. However, the current implementation does not include any UI for adding or displaying these tags. This feature seems incomplete. Please either implement the functionality for tags or remove the tags property and update the description to avoid confusion.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <div className="space-y-2"> | ||
| <Label className="text-[10px]">AI ツール</Label> | ||
| <Input | ||
| type="text" | ||
| placeholder="例: DALL-E 3, Midjourney" | ||
| value={activeAsset.metadata?.aiTool ?? ""} | ||
| onChange={(event) => | ||
| updateAssetMetadata(activeAsset.id, { | ||
| ...activeAsset.metadata, | ||
| aiTool: event.target.value |
There was a problem hiding this comment.
Guard metadata spread against undefined
Each metadata editor calls updateAssetMetadata(activeAsset.id, { ...activeAsset.metadata, ... }). When an asset has no existing metadata, spreading undefined throws a TypeError, so simply typing into any of these inputs crashes the properties panel for legacy assets. Consider defaulting to an empty object (...(activeAsset.metadata ?? {})) or teaching updateAssetMetadata to merge partial updates so the UI can initialize metadata safely.
Useful? React with 👍 / 👎.
Move metadata editing UI from Properties Panel to Timeline View: - Add metadata editing section (AI tool, prompt format, prompt) to each cell in timeline - Remove metadata editing from Properties Panel to avoid duplication - All cells can now be edited directly in the timeline without selection - Add Tag icon to metadata section for better visual distinction - Update timeline header description to mention metadata editing - Update active cell message to mention scale/pan adjustments in Properties Panel This improves UX by: - Making all cell metadata editable in one place (timeline) - Eliminating the need to select cells to edit metadata - Keeping related controls (trim, volume, metadata) together
Replace text input with select dropdown for AI tool selection: - Add comprehensive list of AI tools (DALL-E 3, Grok, Whisk, Midjourney, etc.) - Include image generation tools (DALL-E 3, Midjourney, Stable Diffusion, Firefly, Imagen, etc.) - Include video generation tools (Runway, Pika, Sora, Kling, Veo) - Add "その他" (Other) option for unlisted tools Supported AI tools: - DALL-E 3 - Grok (xAI) - Whisk (Google) - Midjourney - Stable Diffusion - Firefly (Adobe) - Imagen (Google) - Leonardo.AI - Runway - Pika - Sora (OpenAI) - Kling - Veo (Google) This improves UX by: - Providing consistent tool naming - Reducing typos - Making it easier to filter/search by tool later
Add additional AI image/video generation tools to the select dropdown: - Flux Kontext - AI image generation tool - Reve - AI generation tool - Seedream 4.0 - AI generation model - Nano Banana - AI tool - Multi Ref - Multi-reference AI tool Total supported AI tools now: 18 - Image generation: DALL-E 3, Grok, Whisk, Midjourney, Stable Diffusion, Firefly, Imagen, Leonardo.AI, Flux Kontext, Reve, Seedream 4.0, Nano Banana, Multi Ref - Video generation: Runway, Pika, Sora, Kling, Veo - Other: その他 (for unlisted tools)
Add comprehensive tag system with multi-select functionality: **Tag Selection UI (Timeline View):** - Add TAG_OPTIONS constant with 11 predefined tags - Implement checkbox-based multi-select UI for tags - Tags: AI生成, 手動編集, アニメーション, 背景, キャラクター, ロゴ, テキスト, エフェクト, 音楽, 効果音, ボイス - Create checkbox.tsx component using Radix UI - Install @radix-ui/react-checkbox dependency **Tag Display:** - Show selected tags in timeline view with purple badges - Display tags in canvas preview overlay with purple background - Include tags in metadata condition checks **Tag Rendering (Export):** - Add tag overlay to image export (exporter.ts) - Add tag overlay to video export (video-exporter.ts) - Display tags with "タグ: " prefix in purple color (rgba(216, 180, 254, 1)) - Render tags below AI tool, format, and prompt information - Tags are comma-separated and truncated if too long **Implementation Details:** - Tags stored in asset.metadata.tags array - Multi-select using Checkbox components in 2-column grid - Tags displayed consistently across UI and exports - Gradient background overlay for metadata in renders This allows users to: - Select multiple tags per asset - See tags in timeline and canvas preview - Export images/videos with tag information visible
Add comprehensive metadata system for media assets: