Skip to content

2BAB/Pexels

 
 

Repository files navigation

Pexels and AI Sample App with KMP

This repo is dedicated to showcase the KMP usage with on-device model and GEN AI. It forked the Pexels as a template to demonstrate the basic KMP workflow and then link to a new AI chat screen to demonstrate the on-device model capability.

It's the sample project for my speech on Google I/O Extended XiaMen and GuangZhou 2024.

Take below steps to set up the repo:

  1. Follow the original Pexels's README to setup the KMP dependencies including JDK 17, Android Studio (with Android SDK), XCode (with iOS SDK) and Cocoapods.
  2. Download 2 models, gemma-1.1-2b-it-gpu-int4 and gemma-1.1-2b-it-cpu-int8, from Kaggle respectively.
  3. Execute below command to push models to Android device respectively (must be physical device) adb push /the/path/to/gemma-2b-it-gpu-int4.bin data/local/tmp/llm/
  4. Move models to iOS project respectively by dragging the model to the "iosApp" target and select "create folder reference".

ai-ios-setup-1 ai-ios-setup-2

  1. Open the project via Android Studio, create a local.properties, put the android sdk path and cocoapods executable path.
sdk.dir=/Users/xxxx/Library/Android/sdk
kotlin.apple.cocoapods.bin=/opt/homebrew/lib/ruby/gems/3.3.0/bin/pod
  1. You can run the Android target just like normal application, and iOS target within the Android Studio via Kotlin Multiplatform IDE Plugin or the XCode running button. The sample enables Android and iOS only since the llm inference of mediapipe is only available on Android/iOS/Web, you can implement the web version by yourself.

Pexels

A multiplatform client for Pexels photos, powered by Compose Multiplatform

Supported Platforms

Platform Supported Screenshot
Desktop(Linux, Windows, macOS)
Web
iOS
Android

You can download prebuilt app file here

Web version: https://linroid.github.io/Pexels/

Features

  • Pagination
  • Pull to refresh
  • Adaptive UI
  • Photo zoom in and zoom out
  • Transition
  • Cached photo list data

Used Libraries

  • ktor: A multiplatform asynchronous HTTP client, which allows you to make requests and handle responses.
  • kotlinx.serialization: A multiplatform JSON serialization library.
  • koin: A pragmatic lightweight dependency injection framework for Kotlin & Kotlin Multiplatform.
  • Voyager: A pragmatic navigation library for Compose.
  • Build Config: A plugin for generating BuildConstants.
  • KStore: A tiny Kotlin multiplatform library that assists in saving and restoring objects to and from disk.
  • Napier: A logger library for Kotlin Multiplatform.
  • coil: Image loading for Compose Multiplatform.

Unit Tests

Test

  • PexelsApiTest
  • ObjectStoreTest

Before running!

  • check your system with KDoctor
  • install JDK 17 or higher on your machine
  • add local.properties file to the project root and set a path to Android SDK there

Android

To run the application on android device/emulator:

  • open project in Android Studio and run imported android run configuration

To build the application bundle:

  • run ./gradlew :composeApp:assembleDebug
  • find .apk file in composeApp/build/outputs/apk/debug/composeApp-debug.apk Run android simulator UI tests: ./gradlew :composeApp:pixel5Check

Desktop

Run the desktop application: ./gradlew :composeApp:run Run desktop UI tests: ./gradlew :composeApp:jvmTest

iOS

To run the application on iPhone device/simulator:

  • Open iosApp/iosApp.xcproject in Xcode and run standard configuration
  • Or use Kotlin Multiplatform Mobile plugin for Android Studio Run iOS simulator UI tests: ./gradlew :composeApp:iosSimulatorArm64Test

Experimental Browser (Wasm)

Run the browser application: ./gradlew :composeApp:wasmJsBrowserDevelopmentRun --continue Run browser UI tests: ./gradlew :composeApp:wasmJsBrowserTest

About

A multiple platform client for Pexels photos using Compose multiplatform

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Kotlin 94.2%
  • Ruby 3.0%
  • Swift 2.5%
  • HTML 0.3%