Add demo app for image embeddings

Author: pweglik

apps/text-embeddings/android/app/src/main/AndroidManifest.xml

@@ -20,6 +20,12 @@
         <action android:name="android.intent.action.MAIN"/>
         <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
+      <intent-filter>
+        <action android:name="android.intent.action.VIEW"/>
+        <category android:name="android.intent.category.DEFAULT"/>
+        <category android:name="android.intent.category.BROWSABLE"/>
+        <data android:scheme="rne-embeddings"/>
+      </intent-filter>
     </activity>
   </application>
 </manifest>

apps/text-embeddings/android/app/src/main/java/com/anonymous/textembeddings/MainActivity.kt

@@ -27,8 +27,8 @@ class MainActivity : ReactActivity() {
    * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
    * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
    */
-  override fun createReactActivityDelegate(): ReactActivityDelegate =
-    ReactActivityDelegateWrapper(
+  override fun createReactActivityDelegate(): ReactActivityDelegate {
+    return ReactActivityDelegateWrapper(
       this,
       BuildConfig.IS_NEW_ARCHITECTURE_ENABLED,
       object : DefaultReactActivityDelegate(
@@ -37,6 +37,7 @@ class MainActivity : ReactActivity() {
         fabricEnabled,
       ) {},
     )
+  }
 
   /**
    * Align the back button behavior with Android S

apps/text-embeddings/android/app/src/main/java/com/anonymous/textembeddings/MainApplication.kt

@@ -14,17 +14,15 @@ import com.facebook.soloader.SoLoader
 import expo.modules.ApplicationLifecycleDispatcher
 import expo.modules.ReactNativeHostWrapper
 
-class MainApplication :
-  Application(),
-  ReactApplication {
+class MainApplication : Application(), ReactApplication {
   override val reactNativeHost: ReactNativeHost =
     ReactNativeHostWrapper(
       this,
       object : DefaultReactNativeHost(this) {
         override fun getPackages(): List<ReactPackage> {
           val packages = PackageList(this).packages
           // Packages that cannot be autolinked yet can be added manually here, for example:
-          // packages.add(new MyReactNativePackage());
+          // packages.add(MyReactNativePackage())
           return packages
         }
 

apps/text-embeddings/app.json

@@ -7,6 +7,7 @@
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
+    "scheme": "rne-embeddings",
     "splash": {
       "image": "./assets/splash-icon.png",
       "resizeMode": "contain",
@@ -25,6 +26,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-router"]
   }
 }

apps/text-embeddings/app/_layout.tsx

@@ -0,0 +1,101 @@
+import { Drawer } from 'expo-router/drawer';
+import ColorPalette from '../colors';
+import React, { useState } from 'react';
+import { Text, StyleSheet, View } from 'react-native';
+
+import {
+  DrawerContentComponentProps,
+  DrawerContentScrollView,
+  DrawerItemList,
+} from '@react-navigation/drawer';
+import { GeneratingContext } from '../context';
+
+interface CustomDrawerProps extends DrawerContentComponentProps {
+  isGenerating: boolean;
+}
+
+function CustomDrawerContent(props: CustomDrawerProps) {
+  const { isGenerating, ...otherProps } = props;
+  return (
+    <DrawerContentScrollView {...otherProps}>
+      {!isGenerating ? (
+        <DrawerItemList {...otherProps} />
+      ) : (
+        <View style={styles.centerContent}>
+          <Text style={styles.mainText}>Model is generating...</Text>
+          <Text style={styles.subText}>Interrupt before switching model</Text>
+        </View>
+      )}
+    </DrawerContentScrollView>
+  );
+}
+
+export default function _layout() {
+  const [isGenerating, setIsGenerating] = useState(false);
+
+  return (
+    <GeneratingContext
+      value={{
+        setGlobalGenerating: (newState: boolean) => {
+          setIsGenerating(newState);
+        },
+      }}
+    >
+      <Drawer
+        drawerContent={(props) => (
+          <CustomDrawerContent {...props} isGenerating={isGenerating} />
+        )}
+        screenOptions={{
+          drawerActiveTintColor: ColorPalette.primary,
+          drawerInactiveTintColor: '#888',
+          headerTintColor: ColorPalette.primary,
+          headerTitleStyle: { color: ColorPalette.primary },
+        }}
+      >
+        <Drawer.Screen
+          name="text-embeddings/index"
+          options={{
+            drawerLabel: 'Text embeddings',
+            title: 'Text embeddings',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="clip-embeddings/index"
+          options={{
+            drawerLabel: 'CLIP embeddings',
+            title: 'CLIP embeddings',
+            headerTitleStyle: { color: ColorPalette.primary },
+          }}
+        />
+        <Drawer.Screen
+          name="index"
+          options={{
+            drawerLabel: () => null,
+            title: 'Main Menu',
+            drawerItemStyle: { display: 'none' },
+          }}
+        />
+      </Drawer>
+    </GeneratingContext>
+  );
+}
+
+const styles = StyleSheet.create({
+  centerContent: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  mainText: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    marginBottom: 10,
+    color: ColorPalette.primary,
+  },
+  subText: {
+    fontSize: 14,
+    color: ColorPalette.strongPrimary,
+  },
+});