Add PyTorch Live Demo for a Text Classification Task using Lightning Flash.

examples/text-classification/TextClassificationDemo.v0.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { Button, Text, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+  return (
+    <View style={{ marginTop: insets.top, marginBottom: insets.bottom }}>
+      <TextInput placeholder="Text" />
+      <Button onPress={() => { }} title="Classify" />
+      <Text>Text Classification</Text>
+    </View>
+  );
+}

examples/text-classification/TextClassificationDemo.v1.tsx

@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: insets.top, marginBottom: insets.bottom },
+      ]}>
+      <TextInput
+        multiline={true}
+        placeholder="Text"
+        placeholderTextColor="#CCC"
+        style={[styles.item, styles.input]}
+      />
+      <Button onPress={() => { }} title="Classify" />
+      <Text style={styles.item}>Text Classification</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  item: {
+    margin: 10,
+    padding: 10,
+  },
+  input: {
+    borderWidth: 1,
+    color: '#000',
+  },
+});

examples/text-classification/TextClassificationDemo.v2.tsx

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+
+  const [text, setText] = useState('');
+  const [question, setQuestion] = useState('');
+
+  async function handleAsk() {
+    console.log({
+      text,
+    });
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: insets.top, marginBottom: insets.bottom },
+      ]}>
+      <TextInput
+        multiline={true}
+        onChangeText={setText}
+        placeholder="Text"
+        placeholderTextColor="#CCC"
+        style={[styles.item, styles.input]}
+        value={text}
+      />
+      <Button onPress={handleAsk} title="Classify" />
+      <Text style={styles.item}>Text Classification</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  item: {
+    margin: 10,
+    padding: 10,
+  },
+  input: {
+    borderWidth: 1,
+    color: '#000',
+  },
+});

examples/text-classification/TextClassificationDemo.v3.tsx

@@ -0,0 +1,75 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { MobileModel } from 'react-native-pytorch-core';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const model = require('../../models/bert_qa.ptl');
+
+type TextClassificationResult = {
+  sentiment: number;
+};
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+
+  const [text, setText] = useState('');
+
+  async function handleClassify() {
+    const _text = `[CLS] ${text} [SEP]`;
+
+    const inferenceResult = await MobileModel.execute<TextClassificationResult>(
+      model,
+      {
+        text: _text,
+        modelInputLength: 360,
+      },
+    );
+
+    // Log model inference result to Metro console
+    console.log(inferenceResult);
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: insets.top, marginBottom: insets.bottom },
+      ]}>
+      <TextInput
+        multiline={true}
+        onChangeText={setText}
+        placeholder="Text"
+        placeholderTextColor="#CCC"
+        style={[styles.item, styles.input]}
+        value={text}
+      />
+      <Button onPress={handleClassify} title="Classify" />
+      <Text style={styles.item}>Text Classification</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  item: {
+    margin: 10,
+    padding: 10,
+  },
+  input: {
+    borderWidth: 1,
+    color: '#000',
+  },
+});

examples/text-classification/TextClassificationDemo.v4.tsx

@@ -0,0 +1,77 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { MobileModel } from 'react-native-pytorch-core';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const model = require('../../models/bert_qa.ptl');
+
+type TextClassificationResult = {
+  sentiment: number;
+};
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+
+  const [text, setText] = useState('');
+  const [sentiment, setSentiment] = useState('');
+
+  async function handleClassify() {
+    const _text = `[CLS] ${text} [SEP]`;
+
+    const { result } = await MobileModel.execute<TextClassificationResult>(model, {
+      text: _text,
+      modelInputLength: 360,
+    });
+
+    // No answer found if the answer is null
+    if (result.sentiment == null) {
+      setSentiment('Could not find sentiment.');
+    } else {
+      setSentiment(result.answer);
+    }
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: insets.top, marginBottom: insets.bottom },
+      ]}>
+      <TextInput
+        multiline={true}
+        onChangeText={setText}
+        placeholder="Text"
+        placeholderTextColor="#CCC"
+        style={[styles.item, styles.input]}
+        value={text}
+      />
+      <Button onPress={handleClassify} title="Classify" />
+      <Text style={styles.item}>{sentiment}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  item: {
+    margin: 10,
+    padding: 10,
+  },
+  input: {
+    borderWidth: 1,
+    color: '#000',
+  },
+});

examples/text-classification/TextClassificationDemo.v5.tsx

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import * as React from 'react';
+import { useState } from 'react';
+import { Button, StyleSheet, Text, TextInput, View } from 'react-native';
+import { MobileModel } from 'react-native-pytorch-core';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const model = require('../../models/bert_qa.ptl');
+
+type TextClassificationResult = {
+  sentiment: number;
+};
+
+export default function TextClassificationDemo() {
+  // Get safe area insets to account for notches, etc.
+  const insets = useSafeAreaInsets();
+
+  const [text, setText] = useState('');
+  const [sentiment, setSentiment] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  async function handleAsk() {
+    setIsProcessing(true);
+
+    const _text = `[CLS] ${text} [SEP]`;
+
+    const { result } = await MobileModel.execute<TextClassificationResult>(model, {
+      text: _text,
+      modelInputLength: 360,
+    });
+
+    // No answer found if the answer is null
+    if (result.sentiment == null) {
+      setSentiment('No answer found');
+    } else {
+      setSentiment(result.sentiment);
+    }
+
+    setIsProcessing(false);
+  }
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { marginTop: insets.top, marginBottom: insets.bottom },
+      ]}>
+      <TextInput
+        multiline={true}
+        onChangeText={setText}
+        placeholder="Text"
+        placeholderTextColor="#CCC"
+        style={[styles.item, styles.input]}
+        value={text}
+      />
+      <Button onPress={handleAsk} title="Classify" />
+      <Text style={styles.item}>
+        {isProcessing ? 'Predicting sentiment' : sentiment}
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 10,
+  },
+  item: {
+    margin: 10,
+    padding: 10,
+  },
+  input: {
+    borderWidth: 1,
+    color: '#000',
+  },
+});