chores(doc): Update documentation (immich-app#2145)

* Update app architecture with typesense

* Update readme

* Added local search

* replace diagram

* Update search page

README.md

@@ -72,7 +72,7 @@ Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM
 | Scrubbable/draggable scrollbar              | Yes    | Yes |
 | Support RAW (HEIC, HEIF, DNG, Apple ProRaw) | Yes    | Yes |
 | Metadata view (EXIF, map)                   | Yes    | Yes |
-| Search by metadata, objects and image tags  | Yes    | No  |
+| Search by metadata, objects and CLIP  | Yes    | No  |
 | Administrative functions (user management)  | N/A    | Yes |
 | Background backup                           | Yes    | N/A |
 | Virtual scroll                              | Yes    | Yes |

docs/docs/developer/architecture.md

@@ -20,7 +20,7 @@ Immich is a full-stack [TypeScript](https://www.typescriptlang.org/) application
 ### Web
 
 - [SvelteKit](https://kit.svelte.dev/)
-- [tailwindcss](https://tailwindcss.com/)
+- [Tailwindcss](https://tailwindcss.com/)
 
 ### Server
 
@@ -34,6 +34,8 @@ Immich is a full-stack [TypeScript](https://www.typescriptlang.org/) application
 
 - [PostgreSQL](https://www.postgresql.org/)
 - [Redis](https://redis.io/) for job queuing.
+- [Typesense](https://typesense.org/) for search.
+
 
 ### Web Server
 

docs/docs/features/search.md

@@ -1,16 +1,20 @@
 # Search
 
-:::warning Work In Progress
-Search is work-in-progress and subject to change. Stay tuned!
-:::
+Immich uses Typesense as the primary search database to enable high performance search mechanism. 
 
-## Search by Place
+Typesense is a powerful search engine that can be integrated with popular natural language processing (NLP) models like CLIP and SBERT to provide highly accurate and relevant search results. Here are some benefits of using Typesense integrated search for CLIP and SBERT:
 
-:::info
-Searching is currently only implemented in the [Mobile App](/docs/features/mobile-app.mdx)
-:::
+Improved Search Accuracy: Typesense uses a combination of indexing, querying, and ranking algorithms to quickly and accurately retrieve relevant search results. When integrated with CLIP and SBERT, Typesense can leverage the semantic understanding and deep learning capabilities of these models to further improve the accuracy of search results.
 
-Searching by the name of a city, state, or country is possible for assets with geolocation data and successful [Reverse Geocoding](/docs/features/reverse-geocoding.md).
+Faster Search Response Times: Typesense is optimized for lightning-fast search response times, making it ideal for applications that require near-instantaneous search results. By integrating with CLIP and SBERT, Typesense can reduce the time required to process complex search queries, making it even faster and more efficient.
 
-<img src={require('./img/reverse-geocoding-mobile1.png').default} width='33%' title='Reverse Geocoding' />
-<img src={require('./img/reverse-geocoding-mobile2.png').default} width='33%' title='Reverse Geocoding' />
+Enhanced Semantic Search Capabilities: CLIP and SBERT are powerful NLP models that can extract the semantic meaning from text, enabling more nuanced search queries. By integrating with Typesense, these models can help to improve the accuracy of semantic search, enabling users to find the most relevant results based on the true meaning of their query.
+
+Greater Search Flexibility: Typesense provides flexible search capabilities, including fuzzy search, partial search, enabling users to find the information they need quickly and easily. When integrated with CLIP and SBERT, Typesense can offer even greater flexibility, allowing users to refine their search queries using natural language and providing more accurate and relevant results. 
+
+(Generated by Chat-GPT4)
+
+Some search examples: 
+<img src={require('./img/search-ex-2.webp').default}  title='Search Example 1' />
+
+<img src={require('./img/search-ex-3.webp').default} title='Search Example 2' />

docs/docusaurus.config.js

@@ -1,70 +1,71 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require("prism-react-renderer/themes/github");
-const darkCodeTheme = require("prism-react-renderer/themes/dracula");
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/dracula');
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-  title: "Immich",
+  title: 'Immich',
   tagline:
-    "High performance self-hosted photo and video backup solution directly from your mobile phone",
-  url: "https://documentation.immich.app",
-  baseUrl: "/",
-  onBrokenLinks: "throw",
-  onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.png",
+    'High performance self-hosted photo and video backup solution directly from your mobile phone',
+  url: 'https://documentation.immich.app',
+  baseUrl: '/',
+  onBrokenLinks: 'throw',
+  onBrokenMarkdownLinks: 'warn',
+  favicon: 'img/favicon.png',
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
-  organizationName: "immich-app", // Usually your GitHub org/user name.
-  projectName: "immich", // Usually your repo name.
-  deploymentBranch: "main",
+  organizationName: 'immich-app', // Usually your GitHub org/user name.
+  projectName: 'immich', // Usually your repo name.
+  deploymentBranch: 'main',
   // Even if you don't use internalization, you can use this field to set useful
   // metadata like html lang. For example, if your site is Chinese, you may want
   // to replace "en" with "zh-Hans".
   i18n: {
-    defaultLocale: "en",
-    locales: ["en"],
+    defaultLocale: 'en',
+    locales: ['en'],
   },
 
   plugins: [
     async function myPlugin(context, options) {
       return {
-        name: "docusaurus-tailwindcss",
+        name: 'docusaurus-tailwindcss',
         configurePostCss(postcssOptions) {
           // Appends TailwindCSS and AutoPrefixer.
-          postcssOptions.plugins.push(require("tailwindcss"));
-          postcssOptions.plugins.push(require("autoprefixer"));
+          postcssOptions.plugins.push(require('tailwindcss'));
+          postcssOptions.plugins.push(require('autoprefixer'));
           return postcssOptions;
         },
       };
     },
+    require.resolve('docusaurus-lunr-search'),
   ],
   presets: [
     [
-      "docusaurus-preset-openapi",
+      'docusaurus-preset-openapi',
       /** @type {import('docusaurus-preset-openapi').Options} */
       ({
         docs: {
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
 
-          sidebarPath: require.resolve("./sidebars.js"),
+          sidebarPath: require.resolve('./sidebars.js'),
           // Please change this to your repo.
           // Remove this to remove the "edit this page" links.
-          editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
+          editUrl: 'https://github.com/immich-app/immich/tree/main/docs/',
         },
         api: {
-          path: "../server/immich-openapi-specs.json",
-          routeBasePath: "/docs/api",
+          path: '../server/immich-openapi-specs.json',
+          routeBasePath: '/docs/api',
         },
         // blog: {
         //   showReadingTime: true,
         //   editUrl: "https://github.com/immich-app/immich/tree/main/docs/",
         // },
         theme: {
-          customCss: require.resolve("./src/css/custom.css"),
+          customCss: require.resolve('./src/css/custom.css'),
         },
       }),
     ],
@@ -74,13 +75,13 @@ const config = {
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({
       colorMode: {
-        defaultMode: "dark",
+        defaultMode: 'dark',
       },
       announcementBar: {
-        id: "site_announcement_immich",
+        id: 'site_announcement_immich',
         content: `⚠️ The project is under <strong>very active</strong> development. Expect bugs and changes. Do not use it as <strong>the only way</strong> to store your photos and videos!`,
-        backgroundColor: "#593f00",
-        textColor: "#ffefc9",
+        backgroundColor: '#593f00',
+        textColor: '#ffefc9',
         isCloseable: false,
       },
       docs: {
@@ -90,72 +91,72 @@ const config = {
       },
       navbar: {
         logo: {
-          alt: "Immich University Logo",
-          src: "img/color-logo.png",
-          srcDark: "img/logo.png",
+          alt: 'Immich University Logo',
+          src: 'img/color-logo.png',
+          srcDark: 'img/logo.png',
         },
         items: [
           {
-            to: "/docs/overview/introduction",
-            position: "right",
-            label: "Docs",
+            to: '/docs/overview/introduction',
+            position: 'right',
+            label: 'Docs',
           },
           {
-            to: "/docs/api",
-            position: "right",
-            label: "API",
+            to: '/docs/api',
+            position: 'right',
+            label: 'API',
           },
           {
-            href: "https://github.com/immich-app/immich",
-            label: "GitHub",
-            position: "right",
+            href: 'https://github.com/immich-app/immich',
+            label: 'GitHub',
+            position: 'right',
           },
           {
-            href: "https://github.com/orgs/immich-app/projects/1",
-            label: "Roadmap",
-            position: "right",
+            href: 'https://github.com/orgs/immich-app/projects/1',
+            label: 'Roadmap',
+            position: 'right',
           },
         ],
       },
       footer: {
-        style: "light",
+        style: 'light',
         links: [
           {
-            title: "Overview",
+            title: 'Overview',
             items: [
               {
-                label: "Welcome",
-                to: "/docs/overview/introduction",
+                label: 'Welcome',
+                to: '/docs/overview/introduction',
               },
               {
-                label: "Installation",
-                to: "/docs/install/requirements",
+                label: 'Installation',
+                to: '/docs/install/requirements',
               },
             ],
           },
           {
-            title: "Community",
+            title: 'Community',
             items: [
               {
-                label: "Discord",
-                href: "https://discord.com/invite/D8JsnBEuKb",
+                label: 'Discord',
+                href: 'https://discord.com/invite/D8JsnBEuKb',
               },
             ],
           },
           {
-            title: "Links",
+            title: 'Links',
             items: [
               // {
               //   label: "Blog",
               //   to: "/blog",
               // },
               {
-                label: "GitHub",
-                href: "https://github.com/immich-app/immich",
+                label: 'GitHub',
+                href: 'https://github.com/immich-app/immich',
               },
               {
-                label: "Roadmap",
-                href: "https://github.com/orgs/immich-app/projects/1",
+                label: 'Roadmap',
+                href: 'https://github.com/orgs/immich-app/projects/1',
               },
             ],
           },
@@ -166,7 +167,7 @@ const config = {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
       },
-      image: "overview/img/feature-panel.png",
+      image: 'overview/img/feature-panel.png',
     }),
 };