Enhance AI image upscaler with denoise, metadata, and UI improvements - #29
Merged
Conversation
…ons for improved image processing
- Add scaleFactor and denoiseLevel metadata to upscaler models. - Relocate hardware notice card below the drop zone in workspace. - Unify FAQ and Tip formatting with Markdown-like bold/italic support. - Centralize shared AI FAQs and fix asset resolution for upscaler preview. - Fix TS deprecation warnings by removing outdated baseUrl from tsconfigs.
…kers - Patch ONNX engines to use dynamic filename construction - Enable custom WASM paths in background removal and upscaler workers - Resolve and pass local asset URLs from main thread to AI workers
There was a problem hiding this comment.
Pull request overview
Introduces a new client-side AI Upscaler tool to the Imify web app and extension, aligning it with existing AI tooling (Background Remover) by adding model management, workspace UI, hydration-aware UX, and shared media/SEO support.
Changes:
- Added the Upscaler feature end-to-end (store, models, worker, hook, workspace UI, sidebar, and web routing/metadata).
- Improved AI model caching/download UX by extending the “AI Models” asset tab and standardizing shared FAQ/tip rendering.
- Updated ONNX runtime asset loading + minor configuration/dev-environment tweaks.
Reviewed changes
Copilot reviewed 33 out of 34 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/stores/src/stores/image-upscaler-store.ts | New persisted zustand store for Upscaler settings/export preferences. |
| packages/stores/src/index.ts | Exposes the new upscaler store via the stores public API. |
| packages/features/src/workspace-shell/workspace-tools.tsx | Adds “Upscaler” to workspace tool definitions and icon rendering. |
| packages/features/src/workspace-chrome/asset-tabs/asset-ai-models-tab.tsx | Adds Upscaler model category and supports warm-up/download + cache detection by HF repo id. |
| packages/features/src/upscaler/workspace.tsx | Main upscaler workspace UI including preview/compare, processing feedback, and download flow. |
| packages/features/src/upscaler/use-image-upscaler.ts | New hook to run the upscaler worker with progress reporting and ONNX wasm path overrides. |
| packages/features/src/upscaler/upscaler-preset-info-panel.tsx | Upscaler “about this tool”/showcase panel configuration. |
| packages/features/src/upscaler/sidebar.tsx | Upscaler configuration sidebar (model/variant, denoise, mode, presets). |
| packages/features/src/upscaler/page.tsx | Shared upscaler page controller (file intake, clipboard intake, processing orchestration). |
| packages/features/src/upscaler/models.ts | Upscaler model metadata and mapping to Hugging Face repo IDs. |
| packages/features/src/upscaler/model-variant-dialog.tsx | Dialog UI to choose upscaler model + precision/quantization variant. |
| packages/features/src/upscaler/model-download-dialog.tsx | Terms/consent dialog shown before downloading model weights. |
| packages/features/src/upscaler/index.ts | Barrel export for the new upscaler feature package. |
| packages/features/src/upscaler/image-upscaler.worker.ts | New worker implementing model warm-up + tiling upscaling + optional denoise. |
| packages/features/src/upscaler/drop-zone.tsx | New “drop image to upscale” intake component. |
| packages/features/src/shared/preset-info-showcase-panel.tsx | Renders formatted tip text (consistent markdown-like rendering). |
| packages/features/src/shared/media-assets.ts | Registers Upscaler preview asset paths and exposes ONNX engine asset paths via resolver. |
| packages/features/src/shared/features-info-common-faqs.ts | Adds shared AI-processing FAQ content for reuse across tools. |
| packages/features/src/index.ts | Exposes the new upscaler feature entry from the features package. |
| packages/features/src/dev-mode/debug-shared.ts | Adds “upscaler” as a dev-mode options tab. |
| packages/features/src/background-removal/use-background-removal.ts | Allows passing custom ONNX wasm asset paths to the worker. |
| packages/features/src/background-removal/remover-preset-info-panel.tsx | Uses resolved feature media URLs and reuses shared FAQ content. |
| packages/features/src/background-removal/background-removal.worker.ts | Accepts optional wasmPaths override (from main thread). |
| packages/config/tsconfig.base.json | Removes redundant baseUrl configuration. |
| assets/onnx-engines/ort-wasm-simd-threaded.mjs | Adjusts dynamic wasm path resolution for better bundler compatibility. |
| assets/onnx-engines/ort-wasm-simd-threaded.asyncify.mjs | Adjusts dynamic wasm path resolution for better bundler compatibility (asyncify build). |
| apps/web/tsconfig.json | Removes redundant baseUrl configuration. |
| apps/web/src/features/upscaler/upscaler-pages.tsx | Adds Upscaler page composition, hydration loading state, and hardware notice. |
| apps/web/src/features/background-remover/background-remover-pages.tsx | Adds hydration loading state and hardware notice for Background Remover. |
| apps/web/src/app/upscaler/page.tsx | Adds the Next.js route entrypoint for /upscaler with route metadata. |
| apps/web/src/app/seo-metadata.ts | Adds SEO metadata entry for /upscaler. |
| apps/extension/src/adapters/bootstrap-extension-adapters.ts | Registers Upscaler preview asset in extension runtime asset map. |
| .vscode/settings.json | Adds missing “gitnexus” command to allowed terminal commands list. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+91
to
+92
| const storageKey = "imify-upscaler-settings"; | ||
| const saved = localStorage.getItem(storageKey); |
| const { quantized = false, progress_callback } = options; | ||
| let { device, dtype: defaultDtype } = await detectBestDevice(); | ||
|
|
||
| // Something here |
Comment on lines
+157
to
+158
| const imageBitmap = await createImageBitmap(resultImageData); | ||
| ctx.drawImage(imageBitmap, 0, 0); |
Comment on lines
+265
to
+266
| const imageBitmap = await createImageBitmap(resultImageData) | ||
| ctx.drawImage(imageBitmap, 0, 0) |
TrongAJTT
added a commit
that referenced
this pull request
Jul 10, 2026
…ehensive i18n support (#33) * feat: implement PWA with full offline support and bump version to v2.2.0-dev - Implement Progressive Web App (PWA) support for Imify Web - Add Service Worker with Workbox pre-caching for WASM binaries and core assets - Add web app manifest for standalone desktop and mobile installation - Integrate Service Worker update detection with the "Imify has been updated" dialog - Refactor PWA logic into dedicated components and directory - Update documentation (Feature Matrix, Architecture) and package sync scripts - Bump monorepo version to v2.2.0 and set versionType to Dev * feat: implement browser extension landing page with feature showcase and community badges * feat(ui): optimize PWA mobile responsiveness and refactor settings flow - Improve BaseDialog height handling using 'dvh' units for mobile browsers - Refactor mobile Settings to a drill-down (list-detail) navigation pattern - Add prominent Donate CTA to mobile header menu - Reduce redundant horizontal padding across mobile layout - Optimize Template Creation dialog for mobile viewports - Remove redundant Information accordion from Inspector panel - Update filling FAQ with known state management workaround - Fix various type mismatches and syntax errors in dialog components * fix(web/ext): resolve WHATS_NEW loading and refine mobile/footer layouts - Fix WHATS_NEW.md loading in extension by adding to shared assets and using url: import - Redesign mobile bottom navbar with floating glassmorphism pill - Optimize mobile header (flush sticky) and desktop tool header (full-width) - Hide footer ONLY on tool pages when viewed on mobile devices (AND logic) - Restore mini footer for desktop tool pages * refactor: standardize canvas resizing with shared useCanvasResizer hook and improve Single Processor interaction guide * feat: implement workspace options header and modular asset management UI components * refactor(ui): harmonize Settings and Asset Management dialogs - Implement consistent drill-down navigation for mobile in both dialogs - Move section titles and descriptions to the dialog header on mobile detail views - Standardize UI components by replacing raw HTML tags (button, p) with project components (Button, BodyText, MutedText) - Fix duplicated headers in Shortkeys and Developer tabs - Refactor tab configurations to be data-driven with standardized class names * Implement Background Remover with WebGPU support and UI enhancements (#28) * feat(ai): implement Background Remover with WebGPU support and Asset Manager integration - Added Background Remover tool with dual comparison modes (Slider/Side-by-side) - Implemented AI worker using @xenova/transformers with WebGPU acceleration and WASM fallback - Integrated model management into Asset Manager (view/clear cached models) - Added Model Download Agreement dialog and edge smoothing/solid color output options - Resolved all TypeScript and linting issues across features and extension options * feat(background-remover): stabilize integration, fix layout consistency, and standardize feature architecture * chore: update lockfile to include transformers.js dependency * chore: upgrade to @huggingface/transformers and enable WebGPU for background removal * feat(bg-remover): implement robust multi-model fallback and dynamic worker selection - Replaced brittle warm-up loop with native WebGPU pre-flight capability check. - Added verified lightweight models from ONNX Community (ORMBG, MODNet, Selfie Segmenter). - Fixed 'std::bad_alloc' by making worker dynamic and properly disposing old model instances. - Updated UI dropdown to be a single source of truth from models.ts registry. - Set ORMBG (44MB) as the new recommended default for better performance. * feat(bg-remover): refine sidebar UI, fix canvas slider interaction, and implement custom background color * feat: implement background removal feature including UI, worker, and model management components. * feat(ai): integrate dual-engine ONNX support and robust build infrastructure * feat(background-removal): refactor model metadata and polish asset management UI - Centralized file size formatting in @imify/core - Refactored AIModelMetadata to use sizeBytes for precision - Redesigned Asset Management dialog with enhanced hierarchical layout - Optimized variant cards with sticky actions and improved contrast - Expanded dialog dimensions for better information density * feat(background-removal): integrate showcase sidebar and update model performance metadata * feat: implement background remover workspace with modular sidebar and advanced export controls * feat(bg-remover): implement showcase mode and fix state persistence - Add 'ABOUT THIS TOOL' showcase panel to sidebar when no image is active - Exclude 'hasImage' and 'activePresetId' from persistence to ensure clean slate on F5 - Refactor ProcessorPresetDetail to support flexible config rendering - Fix responsive layout and metadata display in workspace action bar * feat(ui): optimize preset management UI/UX and environment-aware navigation - Centralized navigation logic into 'useImifyNavigation' hook with extension support. - Synced preset card colors with inner shields (light to vibrant transition). - Improved PresetSelector header for mobile responsiveness. - Updated 'Refresh' logic to use store rehydration instead of page reload. - Refined active preset styling in sidebar with full vibrancy. - Simplified selection state by removing inner border glow. * feat(ui): polish watermark dialogs and update acknowledgements - Standardize Typography in Watermark Save/Open dialogs\n- Fix centering and width issues in BaseDialog usage\n- Reorganize Acknowledgements into categories (AI Models, Core, Utilities)\n- Add missing AI models (MODNet, Selfie Segmenter) and Transformers.js to attributions * docs: update changelog and implement automated credits sync - Update CHANGELOG.md with recent AI Background Removal features\n- Implement automated CREDITS.md generation script\n- Add sync:credit command to package.json\n- Update lockfile for tsx dependency * fix(build): resolve export and type errors for Cloudflare Pages - Re-export formatFileSize from format-utils\n- Provide complete formatOptions for VIRTUAL_DEFAULT_PNG_PRESET * feat(filling): complete image filling creation methods, quick templates, and save action icons - Adjust Creation Method grid layout to 2 columns on small screens\n- Configure '3 vertical columns' preset with Rows=1 and definition '3'\n- Allow preset templates in Grid Designer to apply dynamic row counts\n- Remove 'rows=3' from the popup information text\n- Prioritize 'Grid Designer' with 'Recommend' badge as default selection\n- Replace general save icon with task-oriented icons (Image for Save & Fill, Pencil for Save & Edit, ArrowLeft for Save & Back to list) across workspaces\n- Update Grid Designer tooltips example for adjacent cell merging\n- Format standard aspect ratio helper array * feat(fill): add clear image shortkey, manual clear layer button, and animate github stars * feat: add preset selection components and integrate ONNX engine files * feat: add background removal AI model definitions and implement filling template management UI * feat: implement dynamic smart file naming system for batch processing with dimension detection * feat(presets): implement identified feature presets and unified output settings - Add support for identified presets with in-place updates in batch store - Implement 'Type' filter in preset selection view (Processor vs Features) - Unify default and identified preset logic into a single mechanism - Integrate 'File Renaming' into core processing presets - Standardize 'Output Settings' in Background Remover and Image Splitter - Refine 'Configuration Details' UI with compact icons and tooltips - Simplify 'Split Order' dialog by replacing dnd-kit with simple toggle - Add shared useIdentifiedPresetLoader hook for feature initialization * feat(settings): restructure settings, standalone dev-tools, unified schema v2, and import schema migration * feat(chrome): configure client-side 3h cache for github stars, add mobile star button, and integrate shared Tooltip in import dialog * refactor(splicing): standardize output settings and refactor store structure - Standardize Image Splicing export configuration with shared PresetSelector - Group Splicing store state into logical objects (layout, canvas, image, exportSettings) - Simplify Splitter and Splicing stores by removing redundant mergeCodecOptions logic - Fix tab-reset bug in PresetSelector dialog and rename 'Custom Create' to 'Feature Custom' - Ensure real-time synchronization between global BatchStore and feature-specific settings * feat(presets): refine preset selector tabs, filters, and add manual refresh - Swap tab order in PresetSelector: Feature Preset (formerly Custom Create) is now first - Rename tab to 'Feature Preset' for clarity and specialization - Add 'TYPE' filter (Processor vs Features) to Select Preset tab in PresetSelector - Add manual refresh button to ProcessorPresetSelectView for on-demand sync - Standardize identified preset registration per-layout in Splicing sidebar - Ensure consistent categorization of feature presets in selection views * style: set all accordion cards to open by default across all features * refactor(presets): use human-readable names for identified presets and fix filling renaming - Update Splicing and Splitter identified preset names to follow 'Feature #[Name]' format - Fix bug in Image Filling export pipeline where renaming pattern was ignored - Ensure Image Filling presets are correctly categorized under 'Features' in selection view - Standardize identified preset naming across all main feature sidebars * feat(filling): refine interactions, fix selection alignment, and add clipboard paste support - Refactor image selection to open file picker directly on canvas click. - Add 'Paste from Clipboard' button in sidebar and support Ctrl+V replace. - Fix layer shrinking bug by normalizing scale during node updates. - Improve selection border alignment to tightly match visual shapes. - Implement Escape key shortcut to deselect layers. - Fix renaming dialog visibility and input propagation. - Use human-readable names for identified presets (e.g., 'Filling #HALO'). - Prevent dialog interactions from triggering sidebar reorder sensors. * New feature: Enhance AI image upscaler with denoise, metadata, and UI improvements (#29) * feat(upscale): implement browser-based AI image upscaler with sequential tiling * feat(upscale): add denoise functionality and update model configurations for improved image processing * feat(upscaler): improve metadata, layout and formatting - Add scaleFactor and denoiseLevel metadata to upscaler models. - Relocate hardware notice card below the drop zone in workspace. - Unify FAQ and Tip formatting with Markdown-like bold/italic support. - Centralize shared AI FAQs and fix asset resolution for upscaler preview. - Fix TS deprecation warnings by removing outdated baseUrl from tsconfigs. * feat(ai): unify upscaler naming, add hydration loading and hardware notice cards * feat(ai): improve ONNX WASM asset loading and path resolution for workers - Patch ONNX engines to use dynamic filename construction - Enable custom WASM paths in background removal and upscaler workers - Resolve and pass local asset URLs from main thread to AI workers * Implement QR Generator and Reader with new features and UI improvements (#30) * docs(gitnexus): update index metadata and generate repo-specific skills * feat: implement QR Generator and QR Reader features * feat(qr): refactor QR generator UI and introduce resizable TextArea component - Redesign QR Generator workspace with a grid layout for better UX - Implement resizable TextArea component with auto-expand and slider modes - Update SelectChip styling and refine workspace settings - Clean up web tsconfig excludes * feat(qr-reader): simplify scan workflow and redesign dashboard - Remove segmented tabbar control in favor of 3 full-width/height cards - Request media/file permissions instantly upon card selection - Remove redundant activeTab/selectedMode states from workspace and store - Refactor card layout using array mapping to avoid JSX duplication - Extract QR code image cropping logic into helper function - Convert raw HTML elements to design system components (Kicker, TextArea, ToastContainer) - Delay URL reputation redirect by 2 seconds to make Copy URL toast visible * feat(asset-management): integrate font management system with offline woff2 conversion - Install `woff2-encoder` and integrate inline WASM-based TTF/OTF to WOFF2 converter. - Upgrade IndexedDB schema to v2, adding `fonts` object store and `fontStorage` helpers. - Implement Zustand `useFontStore` to sync installed font metadata and handle browser `document.fonts` registration/unregistration. - Create `font-service` utilities to handle curated Google Fonts (WOFF2 CSS2 parsing & fetching), local System Font API, and file uploads. - Add "Fonts" tab to `AssetManagementDialog` with updated size and count statistics. - Create `AssetFontsTab` UI supporting Google Font downloads, file drop zone, searchable System Font picker, and delete operations. - Initialize and load all offline custom fonts to `FontFaceSet` at application startup. * feat(options): integrate font management and settings asset statistics - Add collapsible sections for custom, installed, and library fonts in Assets - Implement detailed DownloadFontDialog with licensing specimen links and terms checkbox - Add distinct chip colors for 'google' (blue) and 'custom' (amber) font sources - Refactor and isolate DownloadFontDialog into its own file - Merge font statistics into Settings under the unified ASSET STATISTICS section * feat: implement centralized attribution system and add UI for displaying library credits * feat(qr-generator): enhance QR generator with custom design options and frame support - Replace qrcode.react with qr-code-styling for advanced styling capabilities. - Implement a new render engine supporting custom dot types, markers, and SVG/PNG/WebP exports. - Add frame presets with integrated text and customizable font options. - Update Sidebar UI with dedicated "Design" and "Frame & Text" configuration panels. - Expand the store to manage new design and frame states. * feat(ui): implement shared GridIconSelector and design icon set - Add GridIconSelector to @imify/ui as a standardized component for visual grid-based selection. - Initialize a comprehensive set of SVG design icons for QR patterns, markers, and frames. - Update the core render engine and types to support the new design configuration schema. * refactor(qr-generator): transition to proportional frame templates and simplified UI - Replace the manual padding/border system with 6 proportional templates (None, Border, Bottom, Top, Tooltip, Ribbon). - Implement dynamic layout calculations in the render engine to ensure frames scale perfectly with QR resolution. - Simplify Sidebar UI: integrate GridIconSelector for templates, add a "Text Scale" slider, and remove complex manual adjustment panels. - Clean up the codebase by removing the obsolete frame-presets.ts logic and synchronizing Store/Workspace state. - Complete the export of GridIconSelector from the core UI package. * feat(qr-generator): implement custom styles, frame templates, and vector exports - Migrate QR rendering engine from qrcode.react to qr-code-styling. - Add support for custom dot patterns and marker shapes (square/dot). - Implement dynamic frame templates (Border, Bottom, Top, Tooltip, Ribbon) with automatic layout calculations. - Introduce font selection, text scaling, and inner padding configurations. - Add independent color overrides with foreground/background sync options. - Integrate tooltips inside the `GridIconSelector` component to improve UX. - Re-architect SVG, PNG, and WebP export pipelines to use the unified master canvas composition. * feat(qr-generator): enhance configurations, fix UI interactions and visuals - Add qrMargin state to control inner padding of the QR code and integrate slider into Sidebar UI. - Increase the maximum limit of the "Text Scale" slider from 150% to 200%. - Fix React key warnings in GridIconSelector. - Stop global keyboard shortcut propagation in TextInput and TextArea to fix spacebar input issues. - Add touch event support (touchstart, touchmove, touchend) to TextArea resize handle for mobile devices. - Remove CSS transition-all on TextArea during slider resizing to eliminate visual delay. - Correct textY calculation for the "tooltip" frame style to center text perfectly above the tail. - Update Dot Pattern SVG icons to accurately reflect the generated shapes. * feat(qr-generator): add event and messaging types, extract fields form - Extract data field rendering logic from workspace.tsx into a dedicated QrFieldsForm component to improve maintainability. - Introduce two new QR code types: event (iCal format) and messaging (WhatsApp, Telegram, Zalo links). - Enhance vcard encoding to strictly comply with RFC 6350, adding foldLine, escapeVCardText, and missing fields (phoneHome, phoneFax). - Update qr-generator-store with initial data states for the new types and implement a merge function in Zustand's persis middleware for graceful state migration. * feat(qr): implement PhoneInput and expand QR Generator & Reader with Event & Messaging types - Create a reusable `PhoneInput` component featuring a text input for country code (with a static "+" prefix), dynamic help icon linking to countrycode.org when empty, and real-time formatting normalization (strips leading 0). - Integrate `PhoneInput` with phone, sms, and messaging (WhatsApp, Zalo) fields in the QR Generator. - Add support for new QR types: Event (RFC 5545 iCalendar) and Direct Messaging (WhatsApp, Telegram, Zalo deep links). - Extract data input fields in the QR Generator into a standalone `QrFieldsForm` component. - Upgrade the QR Reader with parser decoding logic and sidebar UI panels to support viewing and interacting with Event and Messaging QR codes. * refactor(types): cast array buffers to ArrayBuffer explicitly - Explicitly cast ArrayBufferLike or typed array buffers to ArrayBuffer in packager workers and font-service to prevent TypeScript compiler errors. * feat(ui): implement native-like mobile BottomSheet for workspace configuration - Add new `BottomSheet` component in `@imify/ui` using native `<dialog>` API with swipe-to-close gesture and backdrop blur. - Implement `SidebarPanelContext` to automatically hide redundant headers when panels are nested within a BottomSheet. - Refactor Web and Extension workspace shells to replace the mobile bottom navbar with a compact persistent trigger bar. - Flatten mobile workspace UI by removing card-style wrappers (borders, backgrounds, shadows) to maximize screen real estate. - Add comprehensive Tailwind animations for smooth slide-up, slide-down, and backdrop transitions. - Update all major feature routes (QR, AI, Processor, etc.) to provide context-aware titles for the BottomSheet. * feat(dev-tools): add browser capabilities dashboard and optimize mobile grid - Implement a "Capabilities" tab in Dev Tools for real-time browser feature detection (Camera, Screen Capture, Local Fonts, etc.). - Enhance `browser-detection` core utility with comprehensive environment checks and mobile platform detection. - Optimize `GridIconSelector` to always use 6 columns on mobile while respecting custom counts on desktop. - Dynamically hide "Screen Capture" in QR Reader and "Import System Font" in Assets if the required browser APIs are unsupported. - Increase display height of Live State Monitor and Runtime Console Monitor in Dev Tools for better usability. * docs(core): update open-source attributions and fix library links - Update `attributions.ts` with correct GitHub URLs and authors for Swin2SR, woff2-encoder, and youtube-video-element. - Add "QR Code Styling" and "jsQR" to the attributions list to reflect recent tool changes. - Synchronize `CREDITS.md` using the automated sync script. - Refine attribution dialog UI for better author display and tooltip formatting. * Implement comprehensive i18n support across multiple features and tools (#31) * feat(i18n): implement phase 1 core package, locales scaffold and i18n-store * feat(i18n): implement phase 2 dev tools settings and import dialog * feat(i18n): implement phase 3 settings tab and application integrations * feat(i18n): localize workspace tool categories and tool labels * feat(i18n): implement phase 4 string migrations, shared features, and full locales * feat(i18n): localize web landing page and extension popup/sidepanel views * feat(i18n): localize web extension download page and download buttons * feat(i18n): localize all landing page sections and fix hydration mismatches * feat(i18n): implement IndexedDB persistence and UI enhancements for runtime custom languages - Add IndexedDB storage utilities in `@imify/i18n` to persist custom uploaded translation bundles - Automatically load custom runtime translations from IndexedDB at application startup - Update Dev Mode store to dynamically refresh the active translation keys overlay when toggled - Automatically apply and set custom translations as the active language in `I18nRuntimeImportDialog` upon import - Update `LanguageSettingsTab` to refresh available locales dynamically and support deleting custom runtime languages * feat(i18n): remove obsolete tooltip constants and fully localize batch processor - Deleted redundant `processor-tooltips.ts` and `target-format-tooltips.ts` files from both `packages/features` and `apps/extension`. - Migrated all tooltip content to the centralized `processor.json` translation dictionaries. - Refactored components in both workspaces to resolve tooltips and action buttons dynamically via the `useTranslation` hook. - Localized the batch upload dropzone title/subtitle, "No files in queue" placeholder, and all batch action buttons. - Translated preset and workspace loading/not-found route screens. * feat(i18n): localize format, quality, resize card, and concurrency settings - Removed duplicate `concurrency-messages.ts` files from packages/features and apps/extension. - Moved the multiline concurrency tooltip to `processor.json` using `\n` syntax, rendering it via `whiteSpace: "pre-line"`. - Localized hardcoded labels in `target-format-quality-card.tsx` ("Target format", "Quality", "Near-Lossless"). - Localized all elements in `resize-card.tsx` ("Resize", "Resize type", "Scale (%)", "Value (px)", "Quick Stats", "Resampling Algorithm", and all dropdown options). - Localized the WebP Advanced settings card title and checkboxes. - Added translation keys to Vietnamese and English i18n locales. * feat(i18n): restructure preset selector home page and localize sidebar showcase - Moved Type and Filter controls below the preset cards grid in both presets select view and dialog selector. - Extracted and localized all content in the sidebar showcase panel (titles, subtitles, tips, feature chips, and FAQs) under `showcaseSingle` and `showcaseBatch` translation keys. - Added English and Vietnamese translations for the sidebar showcase elements. * fix(ui): upgrade sidebar drag sensors to PointerSensor and restrict right-click triggers - Switched `WorkspaceCardMouseSensor` to `WorkspaceCardPointerSensor` to leverage modern pointer events and avoid emulation quirks in Chromium. - Enforced `nativeEvent.button === 0` in pointer sensors to restrict drag activation exclusively to left-clicks, fixing custom context menu triggers. - Retained spatial and temporal activation constraints (distance: 8px, delay: 150ms) to prevent accidental drags on quick clicks. - Maintained physical DOM structure check (`data-workspace-config-item`) to ignore event bubbling from portals like modal dialogs. * feat(splitter): implement full i18n support and select-none constraints for Splitter workspace - Added comprehensive English and Vietnamese translation resources to `splitter.json` covering showcase guides, accordion settings, and tooltips. - Dynamically rendered dropdown options, tooltips, and segment configurations across all Splitter accordions using the `useTranslation` hook. - Integrated `select-none` styling in `SplitterOrderDialog` to prevent accidental text selection, and fully localized the grid order preview. * feat(diffchecker): implement full i18n support and select-none constraints for Splitter workspace - Added comprehensive English and Vietnamese translation resources to `diffchecker.json` covering showcase guides, accordion settings, and tooltips. - Dynamically rendered dropdown options, tooltips, and segment configurations across all Splitter accordions using the `useTranslation` hook. * feat(i18n): translate image inspector to English and Vietnamese - Fully translate Inspector feature showcase, settings accordions, and panels - Localize file details, dimensions, EXIF groups, and GPS locations - Add dynamic lookup maps for privacy alerts and performance advisor suggestions - Update components: basic-info, color-inspector, developer-actions, and web-performance cards * feat(scripts): add sync:lang script to synchronize and reorder locales - Create scripts/sync-lang.mjs to audit and sync locale keys recursively - Support adding missing keys (UC1) and matching key ordering (UC2) - Validate inputs and show detailed usage instructions in terminal - Register "sync:lang" run command in root package.json * feat(i18n): translate image qr generator to English and Vietnamese - Fully translate QR Generator feature showcase, settings accordions, and panels - Fix selected error correction level highlight in non-English locales * feat(qr-reader): add multilingual support and robust qr preprocessor decoder - Migrate QR Reader workspace and sidebar options to use `@imify/i18n` translations - Populate `en/qrReader.json` and `vi/qrReader.json` with translated attributes, tips, FAQs, and parsed action items - Implement custom window event `imify:open-mobile-sidebar` to slide up the results bottom sheet programmatically on mobile layout scanning success - Implement `scanQrCodeWithPreprocessing` to downscale large inputs and run grayscale and multi-threshold binarization (thresholds 127, 180, 80) - Resolve styled QR scanner failures (circular dots/custom markers) and allow precise real-time web-cam and image file decoding * feat(qr-reader): centralize mobile bottom sheet state and add delayed scan trigger - Add `isMobileSidebarOpen` and `setIsMobileSidebarOpen` to global `useWorkspaceHeaderStore` - Refactor `WorkspaceShell` and extension `Options` page layout components to read bottom sheet visibility directly from the central store, removing redundant event listener boilerplate - Trigger `setIsMobileSidebarOpen(true)` with a 1-second delay in QR Reader workspace upon successful QR code detection * refactor(bg-remover): extract shared AI Engine card and implement multilingual support - Extract `AiEngineAccordionCard` as a reusable component in shared features and integrate it into Background Remover and Upscaler sidebars - Add comprehensive translations for Background Remover drop-zones, workspace actions, notice cards, and configuration panels - Localize model variant selection and download dialogs with local data binding - Populate and sync `backgroundRemover.json` catalogs for English and Vietnamese locales - Fix filename pattern retrieval in Background Remover and Upscaler workspaces to respect the active preset pattern instead of global batch-store pattern * feat(splicing): implement multi-language localization for Splicing feature - Add comprehensive i18n keys for Splicing in `en/splicing.json` and `vi/splicing.json` - Migrate all showcase panels, tips, and FAQs to dynamic translations - Localize layout, canvas, image, preview, and output settings accordions - Refactor drop-zone placeholders, grid statistics, and confirm/warning dialogs - Migrate `SPLICING_TOOLTIPS` values into i18n locales and delete `splicing-tooltips.ts` - Implement dynamic localization in progress toasts for imports, scaling, and exports (ZIP, PDF) * feat(filling): implement full multi-language localization and migrate all tooltip files * refactor(splicing): restructure code using linter * feat(pattern): localize Pattern Generator & migrate output settings to PresetSelector - Localize all Pattern Generator views (Home showcase, Preset selectors, Asset drawing, Canvas options, and Boundary controllers) to Vietnamese and English. - Replace PatternExportAccordion with the standardized PresetSelector to unify output settings. - Implement useIdentifiedPresetLoader for feature presets using the template `preset_pattern-gen_ID` / `PatternGen #NAME`. - Add local state parsing/sync to map global PresetSelector format configurations back to the flat PatternStore structure. - Redesign workspace shell headers with localized title ("Pattern Preview") and active asset/size subtitles. - Refactor the Export Pattern split dropdown button into a standard single button. - Implement debounced active preset config synchronization in PatternWorkspaceShell. - Delete obsolete files (pattern-tooltips.ts, pattern-export-accordion.tsx) and clean up exports. * feat: implement processor presets UI, internationalization support, and new component showcases * refactor(i18n): migrate to lazy loading backend + extract _meta into dedicated files Architecture: - Replace 34 static JSON imports in i18n-instance.ts with a custom LocaleBackend that lazily fetches locale files from the filesystem on demand. - Extension: fetches via chrome.runtime.getURL("locales/{lang}/{ns}.json") - Web: fetches via fetch("/locales/{lang}/{ns}.json") from Next.js public/ _meta Restructuring: - Extract _meta from all 37 namespace JSON files into a single _meta.json per language. - Register _meta as its own i18next namespace for clean access in language-info.ts. - Update runtime-import.ts and i18n-runtime-import-dialog.tsx to use new structure. Eager Bundle Strategy: - common, shared, and _meta are always eagerly inlined for all supported languages. - All other namespaces are fetched lazily — zero cost for unused workspaces. Build Pipeline: - New scripts/sync-locales.mjs: copies locale files → apps/web/public/locales/ - New scripts/sync-locales-extension.mjs: copies locale files → apps/extension/static/locales/ - Both chained automatically before dev and build commands in respective package.json. - Extension's web_accessible_resources updated to include locales/**/*.json. Other Fixes: - Add shared namespace to NAMESPACES in completion-calculator.ts (previously missing). - Add shared to generateEmptyLanguageTemplate in runtime-import.ts. - Add shared to namespace list in i18n-runtime-import-dialog.tsx. - New packages/docs/i18n-guide.md updated to document the full new architecture. * refactor(i18n): merge shared namespace to common & ignore build-time locales i18n Restructuring: - Merge all translation keys from `shared.json` into `common.json` for English & Vietnamese locales. - Delete obsolete `shared.json` files and clean up references across `i18n-instance.ts`, `completion-calculator.ts`, and `runtime-import.ts`. - Update `PresetInfoShowcasePanel` to use `common` namespace hook instead of `shared`. Build & Git Integrity: - Update `.gitignore` to ignore generated locale files in `apps/web/public/locales/` and `apps/extension/static/locales/`. - Untrack build-time locale outputs from Git index, establishing `packages/i18n/src/locales/` as the single source of truth. - Update `i18n-guide.md` documentation to reflect the final lazy loading structure without the `shared` namespace. * feat(i18n): metadata-driven completion stats & client-side ZIP locale imports - Implement `update-locale-stats.mjs` to calculate total/completed keys at build time and record them directly in `_meta.json`. - Chained statistics updates to the build and development sync-locale scripts. - Refactored `LanguageInfo` and `LanguageSettingsTab` to use the pre-calculated stats directly from the eagerly-bundled `_meta` namespace. - Completely removed bundle-bloating static JSON imports from `completion-calculator.ts`. - Integrated dynamic statistics calculation during the runtime ZIP import process to store metrics directly in IndexedDB metadata. * refactor(i18n): centralize namespace list & fix ZIP import stats calculation - Move `NAMESPACES` list and count helper functions to the top of `runtime-import.ts` adjacent to `EN_RESOURCES` for single declaration. - Expose unified helper `calculateImportedStats` to count keys compared directly to the static `EN_RESOURCES` baseline. - Update ZIP custom translation import preview and runtime integration to use the new helper, resolving the client-side lazy-load key-counting discrepancy (199 keys vs 1851 keys). * feat(i18n): fully internationalize Settings dialog and shortcut definitions - Redesign language settings tab: - Replace globe icon with language code badge (monospace, sky-colored) - Replace "Active"/"Runtime import" text badges with icon+tooltip (Check / Upload) - Collapse-row Apply button shown on hover for non-active languages - Expanded panel: Delete button for runtime-imported languages (with browser confirm), Apply button shown when non-active - 2-column expanded layout: completion rate on left, contributors on right - Contributors now embedded as clickable links (name + role) instead of raw URLs - Migrate all Settings UI strings to i18n (settings namespace): - General, Performance, Warnings, Usage Stats, Data Management tabs - Shortcut definitions: categories, action labels, descriptions, "Unassigned" - Schema migration toast messages (success/error) - `common:apply` key used for Apply buttons - Add Vietnamese translations for all new settings keys (vi/settings.json) - Sync `_meta.json` total key count: 1964 → 1996 (en & vi) - Migrate extension's settings-shortcuts-panel to use useTranslation hook - Fix runtime-import metadata sync: remove per-language `total` reliance - Update GitNexus skills and AGENTS.md with updated rule set * feat(processor): fully internationalize presets selector, advanced settings cards, and optimize mobile layout - Preset Selector: - Migrate all UI text in preset selector dialog and active workspace selector states to i18n - Add missing translations for custom creation inputs, dialog actions, format warning prompts, and refresh buttons - Layout Optimization: - Update `filterControl` layout in `processor-preset-select-view.tsx` to wrap into two separate lines on mobile devices to prevent horizontal overflow - Advanced Configuration Cards: - Translate all remaining hardcoded strings in format settings cards (PNG, AVIF, JXL, MozJPEG) including titles, subtitles, dynamic sublabels, and dropdown option values - Locales & Metadata: - Add corresponding English and Vietnamese translations to `processor.json` namespaces - Update total key count in `en/_meta.json` and `vi/_meta.json` from 1997 to 2083 * feat: add PreviewInteractionModeToggle and RichDropdown components with supporting translations * feat: implement watermark saving and loading dialogs with localization and configuration support * feat: implement homepage UI with comprehensive localization and workspace configuration features * feat(i18n): localize concurrency advisor, rename dialog, summary card and optimize sync-lang script - Localize Concurrency Advisor dynamic status messages, details, and format-specific factors (JXL, AVIF, MozJPEG, PNG, etc.) in `performance-preferences.ts` and `smart-concurrency-advisor-card.tsx`. - Localize Advanced File Renaming Dialog by parameterizing `RenamePatternDialog` and mapping dynamic presets/tags to the translated locales from the parent feature container. - Localize Batch Summary Card including action buttons (ZIP preparation, PDF merges, individual downloads) and conversion success statistics. - Enhance `sync-lang.mjs` script with 4 use cases, introducing a new Case 2 to clean up obsolete keys in target locales and updating the recommended workflow in Case 4 (Insert -> Clean -> Sort). - Fix a CLI argument parser bug in `sync-lang.mjs` that ignored the `-all` flag. * feat: implement i18next backend module for environment-aware locale file loading * Enhance QR reader and localization features with UI improvements (#32) * feat: implement QrReaderWorkspace with camera, screen capture, and image upload scanning capabilities * feat: uplate QR reader feature with camera, screen capture, file import, and history management support * feat: implement QR code action panel and sidebar components with multi-language support and split button UI * feat: update WorkspaceOptionsHeader component and add Vietnamese localization file * feat: add About and Asset Management dialogs with internationalization support and base UI components * feat: update sidebar components, pages, and i18n support for core features including QR tools, inspector, and processor. * feat: implement QR reader history sidebar with management and action controls * feat: implement QR code parsing utility and add supporting UI components and localized labels * feat: add QR generator sidebar, workspace layout, and core encoder logic * feat: support utf8 for QR Generator * feat(qr-reader): change text, font and spacing * feat(i18n): improve custom languages management in Dev Tools and reuse language card component - Extract custom language list card item into a shared reusable `LanguageItemCard` component to unify UI layout between Settings Dialog and Developer Tools. - Add listing of imported custom languages inside Developer Tools > Language Tools with Export (ZIP folder via `fflate`) and Delete capabilities. - Add `i18next` and `react-i18next` attributions to core dependencies registry and sync CREDITS.md. * feat: implement markdown-powered guides dialog with Developer Mode enabling easter egg * docs: add comprehensive guides for i18n localization workflows and utility CLI scripts * feat(dev-mode): enhance state diagnostics and export features - Register QR Code Generator and Background Remover stores in Dev Mode registry and State Diagnostics dropdown. - Filter out temporary data (e.g., text, url, wifi inputs) from QR Code Generator state during serialization and state monitoring. - Isolate browser environment info into a separate "environment" feature toggle in Dev Mode export options. - Hide "Environment Information" and "Runtime Console Logs" in the Export dialog when opened outside of Dev Mode. - Enhance Dev Mode export dialog layout by expanding its width and using up to 3 columns on desktop. * feat(dev-tools): add About tab and reorganize Developer Mode settings - Create "About Dev Tools" as the first tab in Dev Tools layout with HelpCircle icon. - Add descriptive documentation in the About tab explaining the purpose of developer features (State Diagnostics, Console Monitor, Capabilities, and Language Tools). - Move the "Disable Developer Mode" section from the System Monitor tab to the new About tab. - Set the About tab as the default active tab on desktop initialization. * feat(dev-mode): auto-format code * style(qr-generator): ensure preview canvas scales to fill parent container - Change preview canvas CSS classes from `max-h-full max-w-full` to `w-full h-full object-contain` in QrGenerator workspace view. - This ensures the generated QR code preview always stretches to fit its layout wrapper instead of shrinking at smaller export sizes (e.g., 256px). * feat(background-remover): auto-open mobile bottom sheet on image load - Import `useWorkspaceHeaderStore` in Background Remover page component. - Trigger `setIsMobileSidebarOpen(true)` in `handleLoadFile` immediately when a source file is successfully loaded, improving mobile user experience. * feat(ai-model): lower the recommended system requirement. * feat(pwa): replace bug report with PWA app installation flow - Implement a PWA installation trigger helper in `@imify/core` to capture the `beforeinstallprompt` event. - Add `PwaInstallDialog` showcasing install benefits (offline capability, quick launch, standalone UI) with multilingual translations. - Replace the "Report Bug" button in the About dialog with an "Install App" button. - Extract the bug reporting guidelines into a new markdown guide file `bug-report.md` registered inside the Guides dialog. - Completely remove deprecated bug report dialog files and code. * style(markdown): enhance alert callouts and link styles to match GitHub - Add custom blockquote renderer to detect and parse GitHub-style alerts (`[!NOTE]`, `[!IMPORTANT]`, `[!WARNING]`, `[!TIP]`, `[!CAUTION]`). - Style alert callouts with distinct left borders, colored headers, and soft background colors while removing standard italic style. - Apply semantic styling for anchor elements to make inline links bold, blue, and underlined similar to GitHub Issues. * style(dialogs): fix centering and close button positioning on dialogs - Enforce proper centering and wrapper width on `PwaInstallDialog` by passing `className="max-w-md"` directly to `BaseDialog`. - Fix the close button (X) overflowing on `DonateDialog` by setting `className="max-w-xl"` and adding the `relative` class to `contentClassName` to establish the correct absolute positioning context. * feat(header): add fullscreen toggle button next to theme toggle on appbar - Implement document fullscreen state tracking and toggle handler in `WorkspaceOptionsHeader` component. - Add `Maximize2` and `Minimize2` icons to visualize fullscreen state dynamically. - Insert a fullscreen TitleBarButton next to the light/dark mode switch in the desktop appbar. - Add a corresponding fullscreen toggle item in the mobile dropdown menu layout. * feat(i18n): localize donate dialog details and update support FAQ wording - Add i18n support to `DonateDialog` title and description using the `about` namespace. - Update `about.json` locales (EN/VI) with donate dialog translations. - Refactor the support FAQ answer in `homepage.json` (EN/VI) to gracefully reference the integrated GitHub Star & Donate button on the appbar. - Run locale synchronization script to apply changes to web distribution. * feat(i18n): localize short and full footer templates - Add localized translation keys for short/full descriptions, column headers, links, and copyright text in `homepage.json` (EN/VI). - Integrate `useTranslation` hook into `WebFooter` component to replace hardcoded strings. - Synchronize updated translation assets to distribution public folder. * fix(stores): align initial store language with i18n resolution logic - Initialize the language state in `useI18nStore` using `resolveInitialLanguage()` instead of hardcoded "en". - Ensure that both the state store and i18next instance use the same browser locale detection logic on first launch. * refactor(core): centralize feature preset prefixes and helper function - Create a new module `presets.ts` in `@imify/core` to define `FEATURE_PRESET_PREFIXES` and the `isFeaturePreset` checker function. - Export the presets module from the core public API. - Remove duplicate inline `isFeaturePreset` declarations in `preset-selector` and `processor-preset-select-view` components, replacing them with the centralized core import. * fix(inspector): improve visual analysis popover behavior and fix basic info vertical image overflow - Implement primary pointer detection using CSS hover media query to disable visual analysis hover popover on mobile touch devices. - Retain hover popover visibility on desktop when loupe is disabled, falling back to 1x zoom for the overlay canvas. - Fix portrait/tall image overflow issue in `BasicInfoCard` by replacing the rigid h-48 container with layout constraints (`object-contain` and `max-h-[280px]`). * fix(inspector): correct WCAG contrast visual preview logic - Swapped `backgroundColor` and `color` styles in PaletteColorItem tooltips. - The preview now correctly renders the inspected color as the text color on fixed black/white backgrounds, fixing the inverted dark/light preview bug. * feat(about): replace WhatsNew flow with a centralized Changelogs dialog - Create `changelogs.ts` in core package to manage version and release history metadata. - Develop a multi-tab `ChangelogsDialog` with layout similar to settings-dialog (versions list on the left, markdown details on the right). - Remove obsolete `WHATS_NEW.md` and related markdown-splitting helper files. - Update `WhatsNewUpdateSummaryDialog` to render `latest-summary.md` and add a new "Explore Now" button adjacent to "View updates changelog". - Multi-language support implemented for dialog titles, actions, and buttons. * feat(devtools): add a comprehensive LocalStorage Manager tab - Implement `LocalStorageManager` view with search, filter (Imify-only toggle), dynamic adding/deleting, and copying capabilities. - Integrate inline JSON validator to prevent invalid object/array syntax structures from corrupting persistent store states. - Provide JSON Import/Export and factory reset features for rapid environment setup. - Add warnings concerning reactivity store limits when directly mutating state. * style(landing): restore blue gradient styling to Image Toolkit in Hero section - Wrap key target terms in `heroTitle` with styled span tags in both EN and VI locales. - Replace raw translation string output with the `Trans` component in `home-client.tsx` to safely parse and render React style classes. * feat(landing): merge tools list and showcase sections into a single responsive grid - Combine grid-only and pro features grids into a unified professional-grade ToolCard grid. - Implement responsive layout: cards render horizontally on mobile and vertically on tablet/desktop. - Configure badge overlay mapping for "Highlight" and "New" tags dynamically. - Clean up obsolete translation keys and integrate missing tool descriptions in i18n JSON packages. * feat(ui): add tool illustrations, media attributions, and refresh homepage content - Add Freepik-licensed SVG illustrations for QR Generator, QR Reader, and SEO Audit - Register asset paths in media-assets.ts and extension bootstrap adapter - Use new illustrations as previewSrc in QR Generator and QR Reader info panels - Add "Media & Illustrations" section with image-preview cards in Acknowledgements dialog - Extend AttributionItem with optional image field and re-sync CREDITS.md via sync-credits.ts - Clean up obsolete homepage i18n keys (proTitle, proDesc, features.*, highlightFeatureLabel) - Add homepage descriptions and status badges (highlight/new) for core tools (bgRemover, upscaler, qrGen/Reader) * feat: implement multi-languages for attribution dialog * feat(ui): update homepage UI with interactive tool gallery, feature sections, and community components * feat: update i18n runtime loading, hydration-safe translation hook, and administrative dialogs for workspace assets and changelogs. * feat: update height of DevTools dialogand Guides dialogs, add archived link for version 2.1.3 * feat: update new changelog, change version to v2.2.0 stable * feat: update changelog and text * Fix(splicing): Automatically open the mobile configuration bottom sheet when images are loaded * feat(filling): update workspace and states management, add more i18n keys * feat(dialog-preset-selector): update to use responsive layout * update changelog and footer
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces a new Upscaler feature to the web app, adds associated UI and SEO metadata, and improves user experience for both the Upscaler and Background Remover features by handling store hydration and displaying hardware requirement notices. It also updates asset imports and fixes some configuration and ONNX engine loader issues.
New Upscaler Feature:
upscaler/page.tsx) and UI logic for workspace, hydration state, and hardware notice. This is similar to the Background Remover flow, with a dedicated hardware requirements card and a loading state during store hydration. [1] [2]seo-metadata.ts.UI/UX Improvements:
Asset and Adapter Updates:
ONNX Engine Loader Fixes:
Configuration and Miscellaneous:
baseUrlfrom tsconfig files and added a missing command to VSCode settings. [1] [2] [3]