feat(example): minor refactor

mybigday · Nov 8, 2024 · b8babc8 · b8babc8
1 parent 9726d1e
commit b8babc8
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 84 deletions.
diff --git a/cpp/rn-whisper.cpp b/cpp/rn-whisper.cpp
@@ -1,6 +1,5 @@
 #include <cstdio>
 #include <string>
-#include <sstream>
 #include <vector>
 #include <unordered_map>
 #include "rn-whisper.h"

diff --git a/example/src/Bench.tsx b/example/src/Bench.tsx
@@ -5,6 +5,7 @@ import RNFS from 'react-native-fs'
 import Clipboard from '@react-native-clipboard/clipboard'
 import { initWhisper } from '../../src' // whisper.rn
 import { createDir, fileDir, modelHost } from './util'
+import { Button } from './Button'
 
 const modelList = [
   // TODO: Add coreml model download
@@ -75,18 +76,6 @@ const styles = StyleSheet.create({
   modelItemTextUnselected: {
     color: '#666',
   },
-  button: {
-    backgroundColor: '#333',
-    borderRadius: 5,
-    padding: 8,
-    margin: 4,
-    width: 'auto',
-  },
-  buttonText: {
-    color: '#ccc',
-    fontSize: 12,
-    fontWeight: 'bold',
-  },
   progressBar: {
     backgroundColor: '#3388ff',
     position: 'absolute',
@@ -271,8 +260,12 @@ export default function Bench() {
           />
         ))}
       </View>
-      <TouchableOpacity
-        style={styles.button}
+      <Button
+        title={
+          modelState === 'select'
+            ? `Download ${downloadCount} Models`
+            : 'Cancel Download'
+        }
         onPress={() => {
           if (modelState === 'select') {
             downloadedModelsRef.current = []
@@ -281,15 +274,9 @@ export default function Bench() {
             setModelState('select')
           }
         }}
-      >
-        <Text style={styles.buttonText}>
-          {modelState === 'select'
-            ? `Download ${downloadCount} Models`
-            : 'Cancel Download'}
-        </Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        style={styles.button}
+      />
+      <Button
+        title="Start benchmark"
         onPress={async () => {
           log('Start benchmark')
           log(
@@ -338,9 +325,7 @@ export default function Bench() {
             Promise.resolve(),
           )
         }}
-      >
-        <Text style={styles.buttonText}>Run benchmark</Text>
-      </TouchableOpacity>
+      />
       <View style={styles.logContainer}>
         {logs.map((msg, index) => (
           <Text key={index} style={styles.logText}>
@@ -349,17 +334,13 @@ export default function Bench() {
         ))}
       </View>
       <View style={styles.buttonContainer}>
-        <TouchableOpacity
-          style={styles.button}
+        <Button
+          title="Copy Logs"
           onPress={() => Clipboard.setString(logs.join('\n'))}
-        >
-          <Text style={styles.buttonText}>Copy Logs</Text>
-        </TouchableOpacity>
-        <TouchableOpacity style={styles.button} onPress={() => setLogs([])}>
-          <Text style={styles.buttonText}>Clear Logs</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={styles.button}
+        />
+        <Button title="Clear Logs" onPress={() => setLogs([])} />
+        <Button
+          title="Delete Models"
           onPress={() => {
             setModelState('select')
             RNFS.readDir(fileDir).then((files) => {
@@ -368,9 +349,7 @@ export default function Bench() {
               })
             })
           }}
-        >
-          <Text style={styles.buttonText}>Delete Models</Text>
-        </TouchableOpacity>
+        />
       </View>
     </ScrollView>
   )

diff --git a/example/src/Button.tsx b/example/src/Button.tsx
@@ -0,0 +1,45 @@
+import React from 'react'
+import { Text, StyleSheet, StyleProp, ViewStyle } from 'react-native'
+import { TouchableOpacity } from 'react-native-gesture-handler'
+
+const styles = StyleSheet.create({
+  button: {
+    backgroundColor: '#333',
+    borderRadius: 5,
+    padding: 8,
+    margin: 4,
+    width: 'auto',
+  },
+  buttonText: {
+    color: '#ccc',
+    fontSize: 12,
+    fontWeight: 'bold',
+  },
+})
+
+export function Button({
+  style,
+  title,
+  onPress,
+  disabled,
+}: {
+  style?: StyleProp<ViewStyle>
+  title: string
+  onPress: () => void
+  disabled?: boolean
+}) {
+  return (
+    <TouchableOpacity
+      style={[styles.button, style]}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <Text style={styles.buttonText}>{title}</Text>
+    </TouchableOpacity>
+  )
+}
+
+Button.defaultProps = {
+  style: undefined,
+  disabled: false,
+}
diff --git a/example/src/Transcribe.tsx b/example/src/Transcribe.tsx
@@ -7,12 +7,12 @@ import {
   Platform,
   PermissionsAndroid,
 } from 'react-native'
-import { TouchableOpacity } from 'react-native-gesture-handler'
 import RNFS from 'react-native-fs'
 import { unzip } from 'react-native-zip-archive'
 import Sound from 'react-native-sound'
 import { initWhisper, libVersion, AudioSessionIos } from '../../src' // whisper.rn
 import type { WhisperContext } from '../../src'
+import { Button } from './Button'
 import contextOpts from './context-opts'
 import { createDir, fileDir, modelHost } from './util'
 
@@ -120,8 +120,8 @@ export default function App() {
     >
       <View style={styles.container}>
         <View style={styles.buttons}>
-          <TouchableOpacity
-            style={styles.button}
+          <Button
+            title="Initialize (Use Asset)"
             onPress={async () => {
               if (whisperContext) {
                 log('Found previous context')
@@ -140,11 +140,9 @@ export default function App() {
               log('Loaded model in', endTime - startTime, `ms in ${mode} mode`)
               whisperContextRef.current = ctx
             }}
-          >
-            <Text style={styles.buttonText}>Initialize (Use Asset)</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={styles.button}
+          />
+          <Button
+            title="Initialize (Download)"
             onPress={async () => {
               if (whisperContext) {
                 log('Found previous context')
@@ -203,13 +201,11 @@ export default function App() {
               log('Loaded model in', endTime - startTime, `ms in ${mode} mode`)
               whisperContextRef.current = ctx
             }}
-          >
-            <Text style={styles.buttonText}>Initialize (Download)</Text>
-          </TouchableOpacity>
+          />
         </View>
         <View style={styles.buttons}>
-          <TouchableOpacity
-            style={styles.button}
+          <Button
+            title="Transcribe File"
             disabled={!!stopTranscribe?.stop}
             onPress={async () => {
               if (!whisperContext) return log('No context')
@@ -248,12 +244,10 @@ export default function App() {
               )
               log('Finished transcribing')
             }}
-          >
-            <Text style={styles.buttonText}>Transcribe File</Text>
-          </TouchableOpacity>
-          <TouchableOpacity
+          />
+          <Button
+            title={stopTranscribe?.stop ? 'Stop' : 'Transcribe File'}
             style={[
-              styles.button,
               stopTranscribe?.stop ? styles.buttonClear : null,
             ]}
             onPress={async () => {
@@ -322,11 +316,7 @@ export default function App() {
                 log('Error:', e)
               }
             }}
-          >
-            <Text style={styles.buttonText}>
-              {stopTranscribe?.stop ? 'Stop' : 'Realtime'}
-            </Text>
-          </TouchableOpacity>
+          />
         </View>
         <View style={styles.logContainer}>
           {logs.map((msg, index) => (
@@ -340,38 +330,35 @@ export default function App() {
             <Text style={styles.logText}>{transcibeResult}</Text>
           </View>
         )}
-
-        <TouchableOpacity
-          style={[styles.button, styles.buttonClear]}
+        <Button
+          title="Release Context"
+          style={styles.buttonClear}
           onPress={async () => {
             if (!whisperContext) return
             await whisperContext.release()
             whisperContextRef.current = null
             log('Released context')
           }}
-        >
-          <Text style={styles.buttonText}>Release Context</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[styles.button, styles.buttonClear]}
+        />
+        <Button
+          title="Clear Logs"
+          style={styles.buttonClear}
           onPress={() => {
             setLogs([])
             setTranscibeResult('')
           }}
-        >
-          <Text style={styles.buttonText}>Clear Logs</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[styles.button, styles.buttonClear]}
+        />
+        <Button
+          title="Clear Download files"
+          style={styles.buttonClear}
           onPress={async () => {
             await RNFS.unlink(fileDir).catch(() => {})
             log('Deleted files')
           }}
-        >
-          <Text style={styles.buttonText}>Clear Download files</Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={[styles.button, styles.buttonClear]}
+        />
+        <Button
+          title="Play Recorded file"
+          style={styles.buttonClear}
           onPress={async () => {
             if (!(await RNFS.exists(recordFile))) {
               log('Recorded file does not exist')
@@ -392,9 +379,7 @@ export default function App() {
               })
             })
           }}
-        >
-          <Text style={styles.buttonText}>Play Recorded file</Text>
-        </TouchableOpacity>
+        />
       </View>
     </ScrollView>
   )