export default function NLPExample()

in react-native-pytorch-core/example/src/toolbox/models/Distilbert.tsx [24:84]
59 lines of code
5 McCabe index (conditional complexity)

export default function NLPExample() {
  const [text, setText] = useState(
    'PyTorch Live is an open source playground for everyone to discover, build, test and share on-device AI demos built on PyTorch. The PyTorch Live monorepo includes the PyTorch Live command line interface (i.e., torchlive), a React Native package to interface with PyTorch Mobile, and a React Native template with examples ready to be deployed on mobile devices.',
  );
  const [question, setQuestion] = useState('What is PyTorch Live?');
  const {answer, metrics, isProcessing, processQA} = useNLPQAModelInference(
    NLPModels[0],
  );

  return (
    <ScrollView style={styles.container}>
      <View style={styles.row}>
        <Text style={styles.label}>Text</Text>
        <TextInput
          style={styles.textArea}
          onChangeText={setText}
          multiline={true}
          placeholder="Text"
          autoCorrect={false}
          value={text}
        />
      </View>
      <View style={styles.row}>
        <Text style={styles.label}>Question</Text>
        <View style={styles.askBox}>
          <TextInput
            style={styles.askInput}
            onChangeText={setQuestion}
            placeholder="Ask a question..."
            autoCorrect={false}
            value={question}
          />

          <TouchableOpacity
            disabled={isProcessing}
            onPress={() => processQA(text, question)}>
            <View
              style={
                isProcessing ? styles.askButtonDisabled : styles.askButton
              }>
              <Text style={styles.askButtonText}>Ask</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
      <View style={[styles.row, !answer && !isProcessing && styles.rowHidden]}>
        <Text style={styles.label}>Answer</Text>
        <Text style={styles.answer}>
          {isProcessing && <ActivityIndicator size="small" color="tomato" />}
          {answer}
        </Text>
        {answer != null && !isProcessing && (
          <Text style={styles.smallLabel}>
            Time taken: {metrics?.totalTime}ms (p={metrics?.packTime}/i=
            {metrics?.inferenceTime}/u={metrics?.unpackTime})
          </Text>
        )}
      </View>
    </ScrollView>
  );
}