Add recent predictions feature to landing page #154
Conversation
Co-authored-by: ntedgi <31243793+ntedgi@users.noreply.github.com>
There was a problem hiding this comment.
Pull Request Overview
This PR implements a complete recent predictions feature that displays the last 3-5 image predictions on the landing page. The implementation includes both server-side storage of recent predictions and a client-side component to display them.
Key changes include:
- Added in-memory storage on the server to track recent predictions with automatic cleanup
- Created new API endpoint
/api/recent-predictionsto fetch stored predictions - Built Angular component with responsive grid layout to display recent predictions with thumbnails
Reviewed Changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| playground/server/server.js | Added in-memory storage and /api/recent-predictions endpoint |
| playground/server/tests/server.test.js | Added test for new recent predictions endpoint |
| playground/ui/src/app/recent-predictions/recent-predictions.component.ts | New component to display recent predictions |
| playground/ui/src/app/recent-predictions/recent-predictions.component.html | Template for recent predictions grid layout |
| playground/ui/src/app/recent-predictions/recent-predictions.component.scss | Styling for responsive grid and card design |
| playground/ui/src/app/recent-predictions/recent-predictions.component.spec.ts | Basic test setup for component |
| playground/ui/src/app/languages-api.service.ts | Added method to fetch recent predictions |
| playground/ui/src/app/interfces/index.ts | Added TypeScript interface for recent prediction entries |
| playground/ui/src/app/uploader/uploader.component.ts | Added ViewChild reference and auto-refresh logic |
| playground/ui/src/app/uploader/uploader.component.html | Integrated recent predictions component |
| playground/ui/src/app/app.module.ts | Registered new component in module |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| styleUrls: ['./uploader.component.scss'], | ||
| }) | ||
| export class UploaderComponent implements OnInit { | ||
| @ViewChild(RecentPredictionsComponent) recentPredictionsComponent: RecentPredictionsComponent; |
There was a problem hiding this comment.
The ViewChild should include a static flag or be made optional with undefined type. Consider using @ViewChild(RecentPredictionsComponent) recentPredictionsComponent?: RecentPredictionsComponent; to handle cases where the component might not be available.
| @ViewChild(RecentPredictionsComponent) recentPredictionsComponent: RecentPredictionsComponent; | |
| @ViewChild(RecentPredictionsComponent) recentPredictionsComponent?: RecentPredictionsComponent; |
| setTimeout(() => { | ||
| this.recentPredictionsComponent.loadRecentPredictions(); | ||
| }, 1000); // Small delay to ensure server has processed the prediction |
There was a problem hiding this comment.
Using a hardcoded 1000ms timeout is fragile and could lead to race conditions. Consider using a more reliable approach like waiting for the upload API response to complete, or implementing a proper callback/observable pattern.
| setTimeout(() => { | |
| this.recentPredictionsComponent.loadRecentPredictions(); | |
| }, 1000); // Small delay to ensure server has processed the prediction | |
| this.recentPredictionsComponent.loadRecentPredictions(); |
| @@ -0,0 +1,88 @@ | |||
| [recent-predictions-container] { | |||
There was a problem hiding this comment.
The CSS selector [recent-predictions-container] should use standard attribute selector syntax. Consider using a class selector .recent-predictions-container or proper attribute selector [recent-predictions-container] with quotes if this is intended as a custom attribute.
| [recent-predictions-container] { | |
| .recent-predictions-container { |
| const imageBase64 = fs.readFileSync(imagePath, { encoding: 'base64' }); | ||
|
|
||
| const predictionEntry = { | ||
| id: Date.now() + Math.random(), // Simple unique ID |
There was a problem hiding this comment.
Using Date.now() + Math.random() for ID generation could potentially create collisions and is not guaranteed to be unique. Consider using a more robust ID generation method like crypto.randomUUID() or a proper UUID library.
Implements a complete recent predictions feature that displays the last 3-5 image predictions on the landing page, as requested in issue #XX.
Changes Made
Server-side (Node.js/Express)
/api/upload/:languageendpoint to save prediction results along with image data (base64), language, and timestamp/api/recent-predictionsGET endpoint to fetch stored recent predictionsClient-side (Angular)
RecentPredictionsComponentwith responsive grid layoutRecentPredictionEntryTypeScript interface for type safetyLanguagesApiServiceto includegetRecentPredictions()methodUI/UX Features
Screenshots
Multiple Recent Predictions Display:
The feature shows recent predictions in a clean grid layout with image thumbnails, prediction labels, language badges, and timestamps.
Testing
/api/recent-predictionsendpointThis implementation provides users with a quick overview of their recent image classification attempts, improving the overall user experience of the EfficientNet playground.
Warning
Firewall rules blocked me from connecting to one or more addresses (expand for details)
I tried to connect to the following addresses, but was blocked by firewall rules:
https://storage.googleapis.com/tensorflow/libtensorflow/libtensorflow-gpu-linux-x86_64-2.7.0.tar.gznode scripts/install.js gpu download(http block)https://storage.googleapis.com/tf-builds/pre-built-binary/napi-v8/3.13.0/GPU-linux-3.13.0.tar.gznode-pre-gyp(http block)If you need me to access, download, or install something from one of these locations, you can either:
Original prompt
💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.