ArchAIve is an AI-powered artefact digitisation platform for the preservation and proliferation of heritage and culture.
With custom-built and highly specialised AI models and ML pipelines, the platform enables the use of AI to automate interpretation and documentation of historical artefacts through a streamlined experience.
Since it was the team's first time developing a solution for a real-world client (SCCCI), we poured in much effort into making a robust, powerful, and efficient system design. The result is truly remarkable - ArchAIve is a project bigger than any we've done before.
The ArchAIve team comprises of:
- Prakhar Trivedi (Team Lead, Image Captioning, Automatic Categorisation, User Management)
- Joon Jun Han (Traditional Chinese OCR, AI Transcription Processing, Catalogue Browsing)
- Toh Zheng Yu (Image Classification, Archivus Chatbot, Data Import & Processing)
For a more general overview of ArchAIve, see the organisation README.
Skip to a section:
Thousands of scanned Chinese historical artefacts — such as handwritten meeting minutes in Traditional Chinese calligraphy and photographs from key historical eras — remain difficult to interpret, catalogue, and search. Manual transcription and face recognition is tedious, slow, and error-prone, while no unified system exists to manage these artefacts digitally.
ArchAIve is a platform that addresses these challenges by combining advanced text recognition, face recognition, and digital cataloguing in a unified system. It streamlines complex AI pipelines into an accessible platform, enabling efficient preservation, understanding, and management of historical artefacts without compromising performance.
We wanted to build a user interface like never before - one that completely re-innovated how artefacts could be digitised and managed. With a laser focus on user experience and simplicity, we drafted numerous possible designs. The result is ArchAIve's Frontend: several beautifully designed pages that work together in harmony.
The resulting experience is so smooth that it even makes you forget about all the intense processing going on behind the scenes. Colours, cards, icons, text, and other components are skillfully orchestrated to empower the user in whatever their goal is. Processing batches, organising artefacts, editing metadata - everything is exceptionally consistent and simple.
The frontend codebase is a Vite-built React SPA with routing established with React Router. We used the Chakra UI v3 library for our designs.
In order to ensure security and consistency on a fundamental level, we made use of Layout components. A Layout component is simply a higher-level component, where sub-trees (based on the current route) are filled into Outlets. We built 5 such layouts:
RootLayout: The absolute base of the rendering tree. This layout fetches session information from the backend and sets up the toasting (little alert boxes that come up on the bottom-right) context on mount.DefaultLayout: AppliesdefaultLayoutCSS class and adds theNavbarcomponent to the render tree. This is the most commonly used layout across all the routes.GalleryLayout: Adds aNavbarcomponent wrapped in adefaultLayoutCSS class div. The sub-tree isOutlet'd separately from thedefaultLayoutdiv. This is primarily for the catalogue page.ProtectedLayout: Routes wrapped with this layout are protected - users must be logged in with valid session information being returned by the backend to access the route. This ensures generic, high-level security for most routes.SuperuserLayout: Routes wrapped with this layout require that a valid account with superuser privileges is logged in.
These layouts may seem trivial, but they go a long way in abstracting common logic and UI and ensuring consistency.
Network requests are facilitated with the axios library. A standard axios instance is defined and imported by respective UI components. The instance has request and response interceptors for the addition of required headers and response decoding respectively.
Most backend responses were programmatically enforced to be in a particular JSON format. For convenience, on the frontend side, an attempt is made to decode any backend response into JSONResponse objects. Thereafter, several easy-to-use methods of JSONResponse (like isErrorStatus()) simplify response handling logic for the numerous network requests being made across the system.
The networking interface abstracts away a lot of redundant logic and makes backend communication much easier and consistent too.
We used the Chakra UI Themeing API to define a custom theme (called MainTheme). We implemented things like standard button variants (a blue-red combination of colours), text font family and standard colour tokens.
Additionally, we customised the look of toasts, in various modes, to better suit the MainTheme. The toasts look much cleaner and in line with what the user would already be expecting.
This, of course, has the direct impact of making the entire UI feel very coherent. Standardising the UI goes a long way in offering a comfortable user experience - no unexpected UX shocks.
Data Processing page
Manage Associations modal
Editor Mode Action Bar
It's no secret that there is tons of UI out there right now. We're always working with digital interfaces of technology everyday, and users also have some pre-set UX expectations. Thus, it was important to us that, while we distinguish ourself uniquely enough to be memorable, users are always comfortable. This means designing UX flows that are similar to other industry standards and more.
Here's a few of the UX decisions we made:
- Netflix-style Browsing: The Catalogue Browser draws inspiration from the Netflix homepage. The page features dynamic rows of multiple cards of artefact images. Hovering on an artefact card increases the card's size slightly, along with some brief description information also being rendered. The resulting design feels so natural and intuitive to use. It's something similar to what users might have experienced, and can thus automatically fill in the rest on how the interface works without any user training.
- Spotify-style Association Management: The manage associations modal, triggered by the menu action, took several designs to crack. The underlying logic is quite complex, as meeting minute artefacts can only be associated with books, and event photo artefacts with categories. Thus, we decided to minimise confusion and simply render a row of the actual options available. We drew inspiration from the Spotify "Add to Playlist" drop down menu, adopting easy-to-interpret switches that enable a user to conveniently make changes.
- Hint Tooltips: We made adequate use of the Chakra UI Tooltip component to hint the user about what they might be seeing. This helps minimise confusion and keeps the user informed and comfortable at all times. A great tooltip we implemented is the one in the Create Group modal, which clearly informs the distinction between books and categories.
- Consistent Practices: Several other consistent design practices were critical to making the UX coherent. We used the Chakra UI Action Bar component to highlight changes being made by the user. Toast messages are generally consistent in terms of error and success states too. Icons have been used where appropriate, as they send UX signals much more effectively than regular text. Progress bars on the Data Processing page give reassurance that processing is underway as per normal. The navbar is consistently always at the top, with all the buttons acting as expected.
Development on the backend was quite intense. Thus, by the time we started development on frontend, deadlines were just around the corner. Setting up consistent practices and designs early gave us a much-needed advantage to develop interfaces quicker. The logical separation and flow of pages was something we discussed and iterated on several times, even before we wrote some of the backend infrastructure.
We are extremely delighted by the final result. ArchAIve's Frontend makes the platform so easy, convenient and simple to use. As a versatile platform, there's buttons all over the place. The simplicity of being able to do so much with just a few clicks is, to us at least, an incredibly satisfying feeling. All the features work in fantastic harmony, producing a coherent and beautiful user experience that we're proud of. We hope that the user experience is to your liking too! ❤️
Check out the complex, powerful business logic brains behind ArchAIve here! 🧠
We hope you feel inspired about enabling heritage and culture with technology. Thank you for reading! ✨
©️ 2025 The ArchAIve Team. All rights reserved.