diff --git a/README.md b/README.md index 55c42a4747..e3a22d28b8 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,47 @@ -<h1 align="center"> Immich </h1> - <p align="center"> <b>High performance self-hosted photo and video backup solution.</b> </p> -<p align="center"> - <img src="design/feature-panel.png" title="Immich Logo"> -</p> - -<p align="center"> +<p align="center"> + <br/> <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-green.svg?color=3F51B5&style=for-the-badge&label=License&logoColor=000000&labelColor=ececec" alt="License: MIT"></a> - <a href="https://github.com/alextran1502/immich"><img src="https://img.shields.io/github/stars/alextran1502/immich.svg?style=for-the-badge&logo=github&color=3F51B5&label=Stars&logoColor=000000&labelColor=ececec" alt="Star on Github"></a> - <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndroidAndGetArtifact&guest=1"> - <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndroidAndGetArtifact.svg?style=for-the-badge&label=Android&logo=teamcity&logoColor=000000&labelColor=ececec" alt="Android Build"/> - </a> - <a href="https://immichci.little-home.net/viewType.html?buildTypeId=Immich_BuildAndPublishIOSToTestFlight&guest=1"> - <img src="https://img.shields.io/teamcity/http/immichci.little-home.net/s/Immich_BuildAndPublishIOSToTestFlight.svg?style=for-the-badge&label=iOS&logo=teamcity&logoColor=000000&labelColor=ececec" alt="iOS Build"/> - </a> - <a href="https://actions-badge.atrox.dev/alextran1502/immich/goto?ref=main"> - <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Falextran1502%2Fimmich%2Fbadge%3Fref%3Dmain&style=for-the-badge&label=Github Action&logo=github&labelColor=ececec&logoColor=000000" /> - </a> <a href="https://discord.gg/D8JsnBEuKb"> - <img src="https://img.shields.io/discord/979116623879368755.svg?label=Immich%20Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Immich Discord"/> + <img src="https://img.shields.io/discord/979116623879368755.svg?label=Discord&logo=Discord&style=for-the-badge&logoColor=000000&labelColor=ececec" atl="Discord"/> </a> <br/> <br/> </p> +<p align="center"> +<img src="design/immich-logo.svg" width="150" title="Login With Custom URL"> +</p> +<h3 align="center">Immich - High performance self-hosted photo and video backup solution</h3> +<br/> +<a href="https://docs.immich.app"> +<img src="design/immich-screenshots.png" title="Main Screenshot"> +</a> +<br/> + +## Disclaimer + +- ⚠️ The project is under **very active** development. +- ⚠️ Expect bugs and breaking changes. +- ⚠️ **Do not use as a single source to store of your photos and videos!** + +## Content + +- [Official Documentation](https://docs.immich.app/docs/overview/introduction) +- [Demo](#demo) +- [Features](#features) +- [Introduction](https://docs.immich.app/docs/overview/introduction) +- [Installation](https://docs.immich.app/docs/installation/requirements) +- [Contribution Guidelines](https://docs.immich.app/docs/contribution-guidelines) +- [Support The Project](#support-the-project) +- [Known Issues](#known-issues) + ## Demo You can access the web demo at https://demo.immich.app -For the mobile app, you can use https://demo.immich.app/api for the `Server Endpoint URL` +For the mobile app, you can use `https://demo.immich.app/api` for the `Server Endpoint URL` - -``` +```bash title="Demo Credential" The credential email: demo@immich.app password: demo @@ -40,236 +51,52 @@ password: demo Spec: Free-tier Oracle VM - Amsterdam - 2.4Ghz quad-core ARM64 CPU, 24GB RAM ``` -## Content -- [Features](#features) -- [Screenshots](#screenshots) -- [Installation](#installation) -- [Update](#update) -- [Mobile App](#mobile-app) -- [App Beta Invitation links](#App-Beta-release-channel) -- [Development](#development) -- [Support](#support) -- [Known Issues](#known-issues) +# Features -# Features +| Features | Mobile | Web | +| ------------------------------------------- | ------- | --- | +| Upload and view videos and photos | Yes | Yes | +| Auto backup when the app is opened | Yes | N/A | +| Selective album(s) for backup | Yes | N/A | +| Download photos and videos to local device | Yes | Yes | +| Multi-user support | Yes | Yes | +| Album | Yes | Yes | +| Shared Albums | Yes | Yes | +| Quick navigation with 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 | +| Administrative functions (user management) | N/A | Yes | +| Background backup | Android | N/A | +| Virtual scroll | N/A | Yes | -> ⚠️ WARNING: **NOT READY FOR PRODUCTION! DO NOT USE TO STORE YOUR ASSETS**. This project is under heavy development. There will be continuous functions, features and api changes. +# Support the project -| Features | Mobile | Web | -| - | - | - | -| Upload and view videos and photos | Yes | Yes -| Auto backup when the app is opened | Yes | N/A -| Selective album(s) for backup | Yes | N/A -| Download photos and videos to local device | Yes | Yes -| Multi-user support | Yes | Yes -| Album | Yes | Yes -| Shared Albums | Yes | Yes -| Quick navigation with 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 -| Administrative functions (user management) | N/A | Yes -| Background backup | Android | N/A -| Virtual scroll | N/A | Yes +I've committed to this project, and I will not stop. I will keep updating the docs, adding new features, and fixing bugs. But I can't do it alone. So I need your help to give me additional motivation to keep going. +As our hosts in the [selfhosted.show - In the episode 'The-organization-must-not-be-name is a Hostile Actor'](https://selfhosted.show/79?t=1418) said, this is a massive undertaking of what the team and I are doing. And I would love to someday be able to do this full-time, and I am asking for your help to make that happen. - <br/> +If you feel like this is the right cause and the app is something you are seeing yourself using for a long time, please consider supporting the project with the option below. -# Screenshots +## Donation -### Mobile -| | | | | | -| - | - | - | - | - | -| <img src="design/login-screen.png" width="150" title="Login With Custom URL"> <p align="center"> Login with custom URL </p> | <img src="design/backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup Settings </p> | <img src="design/selective-backup-screen.png" width="150" title="Backup Setting Info"> <p align="center"> Backup selection </p> | <img src="design/home-screen.jpeg" width="150" title="Home Screen"> <p align="center"> Home Screen </p> | <img src="design/search-screen.jpeg" width="150" title="Curated Search Info"> <p align="center"> Curated search </p> | -| <img src="design/shared-albums.png" width="150" title="Shared Albums"> <p align="center"> Shared albums </p> | <img src="design/nsc6.png" width="150" title="EXIF Info"> <p align="center"> EXIF info </p> | <img src="https://media.giphy.com/media/y8ZeaAigGmNvlSoKhU/giphy.gif" width="150" title="Loading ~4000 images/videos"> <p align="center"> Loading ~4000 images/videos </p> | - -### Web -| Home Dashboard | Image view | -| - | - | -|<img src="design/web-home.jpeg" width="100%" title="Home Dashboard"> | <img src="design/web-detail.jpeg" width="100%" title="Detail">| - - - <br/> - -# Project Details -## 💾 System Requirements - -- **OS**: Preferred unix-based operating system (Ubuntu, Debian, MacOS...etc). - -- **RAM**: At least 2GB, preferred 4GB. - -- **Core**: At least 2 cores, preferred 4 cores. - -## 🔩 Technology Stack - -There are several services that compose Immich: - -1. **NestJs** - Backend of the application -2. **SvelteKit** - Web frontend of the application -3. **PostgreSQL** - Main database of the application -4. **Redis** - For sharing websocket instance between docker instances and background tasks message queue. -5. **Nginx** - Load balancing and optimized file uploading. -6. **TensorFlow** - Object Detection (COCO SSD) and Image Classification (ImageNet). - - - <br/> - -# Installation - -NOTE: When using a reverse proxy in front of Immich (such as NGINX), the reverse proxy might require extra configuration to allow large files to be uploaded (such as `client_max_body_size` in the case of NGINX). -## Testing one-step installation (not recommended for production) - -> ⚠️ *This installation method is for evaluating Immich before further customization to meet the users' needs.* - -*Applicable operating systems: Ubuntu, Debian, MacOS* - -- In the shell, from the directory of your choice, run the following command: - -```bash -curl -o- https://raw.githubusercontent.com/immich-app/immich/main/install.sh | bash -``` - -This script will download the `docker-compose.yml` file and the `.env` file, then populate the necessary information, and finally run the `docker-compose up` or `docker compose up` (based on your docker's version) command. - -The web application will be available at `http://<machine-ip-address>:2283`, and the server URL for the mobile app will be `http://<machine-ip-address>:2283/api`. - -The directory which is used to store the backup file is `./immich-app/immich-data`. - - - <br/> - -## Custom installation (Recommended) - -### Step 1 - Download necessary files - -- Create a directory called `immich-app` and cd into it. - -- Get `docker-compose.yml` - -```bash -wget https://raw.githubusercontent.com/immich-app/immich/main/docker/docker-compose.yml -``` - -- Get `.env` - -```bash -wget -O .env https://raw.githubusercontent.com/immich-app/immich/main/docker/.env.example -``` - -### Step 2 - Populate .env file with custom information - -<a href="https://github.com/immich-app/immich/blob/main/docker/.env.example" target="_blank"><b>See the example <code>.env</code> file</b></a> - -* Populate custom database information if necessary. -* Populate `UPLOAD_LOCATION` as prefered location for storing backup assets. -* Populate a secret value for `JWT_SECRET`, you can use this command: `openssl rand -base64 128` - -### Step 3 - Start the containers - -- Run `docker-compose up` or `docker compose up` (based on your docker's version) - -### Step 4 - Register admin user - -- Navigate to the web at `http://<machine-ip-address>:2283` and follow the prompts to register admin user. -<p align="center"> - <img src="design/admin-registration-form.png" width="300" title="Admin Registration"> -</p> - -- You can add and manage users from the administration page. -<p align="center"> - <img src="design/admin-interface.png" width="500" title="Admin User Management"> -</p> - -### Step 5 - Access the mobile app - -- Login the mobile app with the server endpoint URL at `http://<machine-ip-address>:2283/api` -<p align="center"> - <img src="design/login-screen.jpeg" width="250" title="Example login screen"> -</p> - - <br/> - -## Update - -If you have installed, you can update the application by navigate to the directory that contains the `docker-compose.yml` file and run the following command: - -```bash -docker-compose pull && docker-compose up -d -``` -# Unraid Installation - -Please follow this [article](https://mfaz.dev/posts/immich-unraid/) for a tutorial on how to install Immich on Unraid - - -# Mobile app - -| F-Droid | Google Play | iOS | -| - | - | - | -| <a href="https://f-droid.org/packages/app.alextran.immich"><img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png" alt="Get it on F-Droid" height="80"></a> | <p align="left"> <a href="https://play.google.com/store/apps/details?id=app.alextran.immich"><img src="design/google-play-qr-code.png" width="200" title="Google Play Store"></a> <p/> | <p align="left"> <a href="https://apps.apple.com/us/app/immich/id1613945652"><img src="design/ios-qr-code.png" width="200" title="Apple App Store"></a> <p/> | - -> *The Play/App Store version might be lagging behind the latest release due to their review process.* - -# App Beta release channel - -You can opt-in to join app beta release channel by following the links below: -* Android: Invitation link from [web](https://play.google.com/store/apps/details?id=app.alextran.immich) or from [mobile](https://play.google.com/store/apps/details?id=app.alextran.immich) -* iOS: [TestFlight invitation link](https://testflight.apple.com/join/1vYsAa8P) - <br/> - -# Development - -The development environment can be started from the root of the project after populating the `.env` file with the command: - -```bash -make dev # required Makefile installed on the system. -``` - -All servers and web container are hot reload for quick feedback loop. - -## Note for developers -### 1 - OpenAPI -OpenAPI is used to generate the client (Typescript, Dart) SDK. `openapi-generator-cli` can be installed [here](https://openapi-generator.tech/docs/installation/). When you add a new or modify an existing endpoint, you must run the generate command below to update the client SDK. - -```bash -npm run api:generate # Run from server directory -``` -You can find the generated client SDK in the [`web/src/api`](web/src/api) for Typescript SDK and [`mobile/openapi`](mobile/openapi) for Dart SDK. - - - <br/> - -# Support - -If you like the app, find it helpful, and want to support me to offset the cost of publishing to AppStores, you can sponsor the project with [**one time**](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) or monthly donation from [**Github Sponsor**](https://github.com/sponsors/alextran1502). - -You can also donate using crypto currency with the following addresses: - -<p align="" style="display: flex; place-items: center; gap: 15px" title="Bitcoin(BTC)"><img src="design/bitcoin.png" width="25" title="Bitcoin"> <b>Bitcoin</b>: <code>1FvEp6P6NM8EZEkpGUFAN2LqJ1gxusNxZX</code></p> - -<p align="" style="display: flex; place-items: center; gap: 15px" title="Cardano(ADA)"> <img src="design/cardano.png" width="30" title="Cardano"> <b>Cardano</b>: <code>addr1qyy567vqhqrr3p7vpszr5p264gw89sqcwts2z8wqy4yek87cdmy79zazyjp7tmwhkluhk3krvslkzfvg0h43tytp3f5q49nycc</code> </p> - - -This is also a meaningful way to give me motivation and encouragement to continue working on the app. - -Cheers! 🎉 - - - <br/> +- [Monthly donation](https://github.com/sponsors/alextran1502) via GitHub Sponsors +- [One-time donation](https://github.com/sponsors/alextran1502?frequency=one-time&sponsor=alextran1502) via Github Sponsors # Known Issues ## TensorFlow Build Issue -*This is a known issue for incorrect Proxmox setup* +_This is a known issue for incorrect Proxmox setup_ TensorFlow doesn't run with older CPU architecture, it requires a CPU with AVX and AVX2 instruction set. If you encounter the error `illegal instruction core dump` when running the docker-compose command above, check for your CPU flags with the command and make sure you see `AVX` and `AVX2`: - + ```bash more /proc/cpuinfo | grep flags -``` - +``` + If you are running virtualization in Proxmox, the VM doesn't have the flag enabled. - + You need to change the CPU type from `kvm64` to `host` under VMs hardware tab. - + `Hardware > Processors > Edit > Advanced > Type (dropdown menu) > host` diff --git a/design/immich-screenshots.png b/design/immich-screenshots.png new file mode 100644 index 0000000000..a92aec8d49 Binary files /dev/null and b/design/immich-screenshots.png differ diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 2c217a5f25..bb6a926a2c 100644 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -6,9 +6,9 @@ const darkCodeTheme = require("prism-react-renderer/themes/dracula"); /** @type {import('@docusaurus/types').Config} */ const config = { - title: "Immich Documentation", + title: "Immich", tagline: - "Self-hosted photo and video backup solution directly from your mobile phone", + "High performance self-hosted photo and video backup solution directly from your mobile phone", url: "https://documentation.immich.app", baseUrl: "/", onBrokenLinks: "throw", diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 61cc0121a6..0392c1c9df 100644 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -4,10 +4,10 @@ * work well for content-centric websites. */ -@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Snowburst+One&display=swap"); + html { - /* font-family: "Work Sans", sans-serif; */ font-family: "Overpass", sans-serif; } diff --git a/docs/src/pages/index.module.css b/docs/src/pages/index.module.css index d7b3a58c10..a06cfd8701 100644 --- a/docs/src/pages/index.module.css +++ b/docs/src/pages/index.module.css @@ -5,10 +5,13 @@ .heroBanner { padding: 4rem 0; - text-align: center; position: relative; overflow: hidden; - height: 40rem; + text-align: center; + background: #606c88; + background: -webkit-linear-gradient(to top, #4e5362, #606c88); + background: linear-gradient(to top, #4e5362, #606c88); + color: whitesmoke; } @media screen and (max-width: 996px) { @@ -22,3 +25,32 @@ align-items: center; justify-content: center; } + +.buttonsRow { + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + margin-bottom: 4rem; + gap: 1rem; +} + +.installButton { + background-color: #adcbfa; + color: #000000; + border-radius: 50px; +} + +.installButton:hover { + color: #000000; +} + +.introButton { + background-color: #e6ebf5; + color: #000000; + border-radius: 50px; +} + +.introButton:hover { + color: #000000; +} diff --git a/docs/src/pages/index.tsx b/docs/src/pages/index.tsx index 9e202c3ab1..3fb735c63c 100644 --- a/docs/src/pages/index.tsx +++ b/docs/src/pages/index.tsx @@ -12,16 +12,37 @@ function HomepageHeader() { return ( <header className={clsx("hero hero--primary", styles.heroBanner)}> <div className="container"> - <h1 className="hero__title">{siteConfig.title}</h1> + <h1 + className="hero__title" + style={{ + fontFamily: "Snowburst One", + color: "#adcbfa", + }} + > + IMMICH + </h1> <p className="hero__subtitle">{siteConfig.tagline}</p> - <div className={styles.buttons}> - <Link - className="button button--secondary button--lg" - to="docs/installation/requirements" - > - Getting Started - </Link> + <div className={styles.buttonsRow}> + <div className={styles.buttons}> + <Link + className={clsx("button button--lg", styles.introButton)} + to="docs/overview/introduction" + > + Introduction + </Link> + </div> + + <div className={styles.buttons}> + <Link + className={clsx("button button--lg", styles.installButton)} + to="docs/installation/requirements" + > + Installation + </Link> + </div> </div> + + <img src="/img/immich-screenshots.png" alt="logo" /> </div> </header> ); @@ -31,13 +52,11 @@ export default function Home(): JSX.Element { const { siteConfig } = useDocusaurusContext(); return ( <Layout - title={`${siteConfig.title}`} - description="Description will go into a meta tag in <head />" + title={`Home`} + description="immich Self-hosted photo and video backup solution directly from your mobile phone " > <HomepageHeader /> - <main> - <HomepageFeatures /> - </main> + <main>{/* <HomepageFeatures /> */}</main> </Layout> ); } diff --git a/docs/static/img/immich-screenshots.png b/docs/static/img/immich-screenshots.png new file mode 100644 index 0000000000..f9a5642ef4 Binary files /dev/null and b/docs/static/img/immich-screenshots.png differ