-
-
Notifications
You must be signed in to change notification settings - Fork 16
Open
Labels
bugSomething isn't workingSomething isn't workinghelp wantedExtra attention is neededExtra attention is needed
Milestone
Description
Describe the bug
I'm trying to use this library on my bare react native app, but after downloading the models, I'm getting this error "Model loading failed: [TypeError: dims[1] must be an integer, got: undefined]"
To Reproduce
Steps to reproduce the behavior:
- Go to '...'
- Click on '....'
- Scroll down to '....'
- See error
Expected behavior
Load model without any error.
Smartphone (please complete the following information):
- Device: [iPhone16]
- OS: [iOS18]
- Version [1]
Additional context
[
{
"name": "Phi-3-mini",
"model": "microsoft/Phi-3-mini-4k-instruct-onnx-web",
"onnx_path": "onnx/model_q4.onnx",
"options": {"externalData": true}
},
{
"name": "Llama-160M",
"model": "Felladrin/onnx-Llama-160M-Chat-v1",
"onnx_path": "onnx/decoder_model_merged.onnx"
},
{
"name": "Minueza-32M",
"model": "Felladrin/onnx-Minueza-32M-UltraChat",
"onnx_path": "onnx/decoder_model_merged.onnx"
},
{
"name": "distilgpt2",
"model": "Xenova/distilgpt2_onnx-quantized",
"onnx_path": "decoder_model.onnx"
},
{
"name": "tiny-mamba",
"model": "Xenova/tiny-mamba-onnx",
"onnx_path": "onnx/model.onnx"
}
]
import React, {useState} from 'react';
import {
StyleSheet,
Text,
Button,
TextInput,
SafeAreaView,
View,
} from 'react-native';
import RNFS, {
DownloadBeginCallbackResult,
DownloadProgressCallbackResult,
} from 'react-native-fs';
import {Pipeline} from 'react-native-transformers';
import presets from './presets.json';
export default function App() {
const [progress, setProgress] = useState<number>(0);
const [input, setInput] = useState<string>('We love local LLM');
const [output, setOutput] = useState<string>();
const loadModel = async (preset: {
name: string;
model: string;
onnx_path: string;
options?: any;
}) => {
console.log('Loading model...');
setProgress(0);
try {
await Pipeline.TextGeneration.init(preset.model, preset.onnx_path, {
verbose: true,
fetch: async (url: string) => {
console.log('Downloading... ' + url);
const localPath = `${RNFS.CachesDirectoryPath}/${url
.split('/')
.pop()!}`;
if (await RNFS.exists(localPath)) {
console.log('Model already downloaded at: ' + localPath);
setProgress(1);
return localPath;
}
const downloadResumable = RNFS.downloadFile({
fromUrl: url,
toFile: localPath,
background: true,
discretionary: true,
cacheable: true,
progress: (res: DownloadProgressCallbackResult) => {
let progressPercent =
(res.bytesWritten / res.contentLength) * 100;
setProgress(progressPercent);
},
});
await downloadResumable.promise;
console.log('Downloaded model to ' + localPath);
setProgress(1);
return localPath;
},
...preset.options,
});
console.log('Model loaded successfully');
} catch (error) {
console.error('Model loading failed:', error);
}
};
const AutoComplete = () => {
if (!input) return;
Pipeline.TextGeneration.generate(input, setOutput);
};
return (
<SafeAreaView style={styles.container}>
<Text>Select a model</Text>
{presets.map(preset => (
<Button
key={preset.name}
title={preset.name}
onPress={() => loadModel(preset)}
/>
))}
<Text>Input: </Text>
<TextInput
value={input}
onChangeText={setInput}
style={styles.input}
placeholder="Type something..."
/>
<Text>Output: {output || 'No output yet'}</Text>
{/* Display progress */}
<View style={styles.progressContainer}>
<Text>{`Download Progress: ${(progress * 100).toFixed(2)}%`}</Text>
</View>
<Button title="Run" onPress={AutoComplete} />
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 16,
},
input: {
borderWidth: 1,
borderColor: 'gray',
padding: 8,
marginVertical: 8,
width: '80%',
},
progressContainer: {
marginVertical: 8,
},
});
Metadata
Metadata
Assignees
Labels
bugSomething isn't workingSomething isn't workinghelp wantedExtra attention is neededExtra attention is needed

