Generate alt text for images in bit Boilerplate (#11097) #11098
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThe changes introduce automatic generation and management of alternative text (alt text) for product primary images during file upload. This includes AI-based analysis of uploaded images to generate descriptive alt text, model and database updates to store the alt text, UI modifications to display and edit it, and localization support for the new field. Changes
Sequence Diagram(s)sequenceDiagram
participant User as User
participant UI as Product Page UI
participant Server as AttachmentController
participant AI as AI Chat Client
User->>UI: Uploads product primary image
UI->>Server: POST image file
Server->>AI: Sends image for analysis (isCar, alt text)
AI-->>Server: Returns JSON { isCar, alt }
alt isCar == false
Server-->>UI: Returns error (not a car)
else isCar == true
Server-->>UI: Returns alt text
UI->>User: Displays alt text in editable field
end
User->>UI: Edits alt text (optional)
UI->>Server: Saves product with alt text
Assessment against linked issues
Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for AI-generated alt text in the Bit Boilerplate template by extending resources, DTOs, entities, migrations, server logic, and the client UI.
- Added
AltTextresource entries and Farsi translation. - Introduced
PrimaryImageAltTextproperty in the product DTO and entity, with corresponding database migrations and seed updates. - Enhanced the attachment upload controller to call an AI service for image analysis and return alt text, and updated the product page to display and bind the alt text.
Reviewed Changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/.../AppStrings.resx | Closed existing <data> tag and added AltText entry |
| src/.../AppStrings.fa.resx | Added Farsi AltText translation |
| src/.../ProductDto.cs | Added PrimaryImageAltText with a [Display] attribute |
| src/.../Product.cs | Introduced PrimaryImageAltText on the product entity |
| src/.../AppDbContextModelSnapshot.cs | Updated snapshot to include PrimaryImageAltText |
| src/.../20250711145344_Initial.cs | Added new column and updated seed data with null alt-text values |
| src/.../AttachmentController.cs | Integrated AI image review, logging, and return of alt text |
| src/.../AddOrEditProductPage.razor.cs | Updated upload completion handler to set PrimaryImageAltText |
| src/.../AddOrEditProductPage.razor | Rendered AltText input field and validation message |
Files not reviewed (1)
- src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.Designer.cs: Language not supported
Comments suppressed due to low confidence (2)
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs:154
- The comment indicates this variable is for 'future use' but it's already used to store and return the AI-generated alt text. Update the comment to accurately reflect its current purpose.
string? altText = null; // For future use, e.g., AI-generated alt text.
src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx:977
- [nitpick] The newly added
</data>and<data name="AltText">entries have inconsistent indentation compared to surrounding entries. Align their indentation for better readability.
</data>
src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Products/ProductDto.cs
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs
Show resolved
Hide resolved
.../Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.cs
Show resolved
Hide resolved
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (3)
src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx (1)
972-974: Add a translator comment for context.The new key/value pair is correct, but consider adding a
<comment>element to clarify that this label refers to the primary image’s alternative-text field. It helps translators keep future variants consistent.<data name="AltText" xml:space="preserve"> - <value>متن جایگزین</value> + <value>متن جایگزین</value> + <comment>Label for the product primary image alternative-text field</comment> </data>src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx (1)
978-980: Mirror the translator comment in the neutral resource file.For parity with the localized file (and future automated tooling), add the same explanatory comment here.
<data name="AltText" xml:space="preserve"> - <value>Alt text</value> + <value>Alt text</value> + <comment>Label for the product primary image alternative-text field</comment> </data>src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs (1)
154-154: Consider initializing altText with a default value.While the null initialization is technically correct, consider adding a comment or initializing with a more descriptive default to improve code clarity.
- string? altText = null; // For future use, e.g., AI-generated alt text. + string? altText = null; // Will be populated with AI-generated alt text for product images
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (10)
src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs(4 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.Designer.cs(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.cs(2 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/AppDbContextModelSnapshot.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Models/Products/Product.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Products/ProductDto.cs(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.fa.resx(1 hunks)src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build and test
🔇 Additional comments (8)
src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Dtos/Products/ProductDto.cs (1)
43-44: LGTM! Property implementation follows DTO best practices.The
PrimaryImageAltTextproperty is properly implemented with appropriate nullability and localization support through theDisplayattribute.src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/AppDbContextModelSnapshot.cs (1)
578-579: EF Core model snapshot correctly reflects the new property.The
PrimaryImageAltTextproperty is properly configured in the model snapshot with appropriate column type and nullability settings.src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.Designer.cs (1)
581-582: LGTM: Database schema correctly updated for alt text storage.The addition of the nullable
PrimaryImageAltTextstring property with TEXT column type is appropriate for storing alternative text descriptions of product images.src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor.cs (1)
90-90: Method signature change is safeVerified with
rgthat eachHandleOnUploadCompleteis defined and used only within its own Razor component.
AddOrEditProductPage.razor.csuses the new(BitFileInfo fileInfo)signatureProfileSection.razor.csretains its no-argument version in its own componentThere are no cross-component calls to update.
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.cs (2)
226-227: LGTM! Column definition is appropriate.The
PrimaryImageAltTextcolumn is correctly defined as a nullable TEXT field, which is suitable for storing optional alternative text descriptions for product images.
573-625: Seed data consistency verified: all entries include PrimaryImageAltTextVerified that every product seed in
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Data/Migrations/20250711145344_Initial.cs
includes the newPrimaryImageAltTextcolumn (all set tonull).src/Templates/Boilerplate/Bit.Boilerplate/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor (1)
74-77: Approve alt text field implementation
- Verified the
AltTextlocalization key exists in
src/Templates/Boilerplate/Bit.Boilerplate/src/Shared/Resources/AppStrings.resx.- The multiline
BitTextFieldis correctly bound toproduct.PrimaryImageAltTextwith accompanying<ValidationMessage>.- Placement inside the conditional block ensures it’s only rendered when a primary image is present.
src/Templates/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs (1)
262-262: LGTM! Return value properly includes AI-generated alt text.The modified return statement correctly includes the AI-generated alt text, enabling the frontend to receive and display it.
...tes/Boilerplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Models/Products/Product.cs
Show resolved
Hide resolved
...e/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor.cs
Show resolved
Hide resolved
...late/src/Client/Boilerplate.Client.Core/Components/Pages/Products/AddOrEditProductPage.razor
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs
Show resolved
Hide resolved
...rplate/Bit.Boilerplate/src/Server/Boilerplate.Server.Api/Controllers/AttachmentController.cs
Show resolved
Hide resolved
2 participants
closes #11097
Summary by CodeRabbit
New Features
Localization