So I followed a tutorial on creating a model for the Image Classification on Fashion-Mnist dataset and used the tflite-convertor to convert into a .tflite file that can be used.
I also followed a tutorial on how to use tflite with flutter but i am not getting the expected results.
I'm using the method here as :
loadModel() async {
await Tflite.loadModel(
model: 'assets/tf_lite_model.tflite',
labels: 'assets/labels.txt',
numThreads: 1);
}
classifyImage(File image) async {
var output = await Tflite.runModelOnImage(
path: image.path,
imageMean: 0.0,
imageStd: 255.0,
numResults: 1,
threshold: 0.2,
asynch: true);
setState(() {
_loading = false;
_outputs = output;
});
}
And to pick images I'm using the image picker package and the code goes like
pickImageFromCamera() async{
var image =
await ImagePicker.platform.pickImage(source: ImageSource.camera);
if (image == null) return null;
setState(() {
_loading = true;
_image = image as File;
});
classifyImage(_image!);
}
pickImage() async {
var image =
await ImagePicker.platform.pickImage(source: ImageSource.gallery);
if (image == null) return null;
setState(() {
_loading = true;
_image = image as File;
});
classifyImage(_image!);
}
The labels.txt file has outputs like
T-shirt/top
Trouser
Pullover
Dress
Coat
Sandal
Shirt
Sneaker
Bag
Ankle boot
Neither the image is getting selected nor the image is being shown.
Link to the code base: https://github.com/Vasudev-2308/tflite_with_flutter
Please feel free to make corrections in code and raise pull requests, If i get the desired output I will merge them.
Thanks in advance
Related
I define pick image and photoUrl variables:
File? image;
String? photoUrl;
This is my pick image method:
Future pickImage(ImageSource source) async {
try {
final image = await ImagePicker().pickImage(source: ImageSource.gallery);
if (image == null) return;
final imageTemporary = File(image.path);
setState(() {
this.image = imageTemporary;
});
} on PlatformException catch (e) {
print('Failed to pick image : $e');
}
}
This is my upload image function ı upload image with current user ids:
Future uploadFile() async {
final path = '${_auth.currentUser!.uid}.jpg';
final file = File(image!.path);
final ref = FirebaseStorage.instance
.ref()
.child('images/${_auth.currentUser!.uid}.jpg');
task = await ref.putFile(file);
//final url = await ref.getDownloadURL();
//print('Download URLLLLLLLLLLLLLLLLLLLLL : $url');
/*
I saved download image url to setstate method
setState(() {
photoUrl = url.toString();
});
*/
}
This is my download image and init state method, when I upload image to firebase storage first time, ı am getting no object exist at desired reference error, but after ı upload image then I try
to download image and I want to show in image.network it works, How can I fix this error when I try to upload and download first time without error ?
Future downloadImage() async {
final ref = FirebaseStorage.instance
.ref()
.child('images/${_auth.currentUser!.uid}.jpg');
final url = await ref.getDownloadURL();
print('Download URLLLLLLLLLLLLLLLLLLLLL : $url');
setState(() {
photoUrl = url.toString();
});
}
#override
initState() {
// TODO: implement initState
super.initState();
downloadImage();
}
This is my error:
and
this is my storage its empty :
The problem seems to be that you are trying to get the url before uploading the image, Here is what you can do :
uploadImage() async {
final _firebaseStorage = FirebaseStorage.instance;
final _imagePicker = ImagePicker();
PickedFile image;
//Check Permissions
await Permission.photos.request();
var permissionStatus = await Permission.photos.status;
if (permissionStatus.isGranted){
//Select Image
image = await _imagePicker.getImage(source: ImageSource.gallery);
var file = File(image.path);
if (image != null){
//Upload to Firebase
var snapshot = await _firebaseStorage.ref()
.child('images/imageName')
.putFile(file).onComplete;
var downloadUrl = await snapshot.ref.getDownloadURL();
setState(() {
imageUrl = downloadUrl;
// in here you can add your code to store the url in firebase database for example:
FirebaseDatabase.instance
.ref('users/$userId/imageUrl')
.set(imageUrl)
.then((_) {
// Data saved successfully!
})
.catchError((error) {
// The write failed...
});
});
} else {
print('No Image Path Received');
}
} else {
print('Permission not granted. Try Again with permission access');
}
source How to upload to Firebase Storage with Flutter
I hope this will be helpfull
Following a tutorial for adding and saving images and getting errors for the below code, under ImagePicker, ImageSource and SelectedImage.
Future getImage() async {
var image = await ImagePicker.PickImage(source: ImageSource.camera);
setState(() {
selectedimage = image;
});
}
You need to create an instance first, then you will be able to use pickImage method.
Future getImage() async {
XFile? image = await ImagePicker().pickImage(source: ImageSource.camera);
if (image != null) {
setState(() {
selectedimage = image;
});
}
}
Fine more about image_picker
You have to be careful whenever playing with the setState() functions. This combined with how you pick the image and how you store it in the 'var' in your case could cause further trouble. To generally ease things up for further use I recommend creating a utils class, in which you would have an image picker method, just like this one:
import 'package:image_picker/image_picker.dart';
pickImage(ImageSource source) async {
final ImagePicker _imagePicker = ImagePicker();
XFile? _file = await _imagePicker.pickImage(source: source);
if (_file != null) {
return await _file.readAsBytes();
}
print('No Image Selected');
}
Afterwards, if you would like to call that in any other instance you would need something like this, though this is for a url image(I had it in hand), such as:
void selectImage() async {
Uint8List? im = await pickImage(ImageSource.gallery);
final ByteData imageData = await NetworkAssetBundle(Uri.parse(
"url for template image"))
.load("");
final Uint8List bytes = imageData.buffer.asUint8List();
// if null - use the template image
im ??= bytes;
// update state
setState(() {
_image = im!;
});
}
Hope it helped in a way.
im learning flutter and now tried to capture the photo with ImagePicker package from the following method, but after I successfully capture the photo, there is always 1 sec until app get the data and jump to next page:
Future pickImage(ImageSource source) async {
try {
var image = await ImagePicker().pickImage(source: source);
if (image == null) return;
final imagePermanent = await saveImagePermanently(image.path);
selectedImage = File(imagePermanent.path);
isUploaded.value = !isUploaded.value;
update();
} on PlatformException catch (e) {
print('Failed to pick image: $e');
}
}
Future<File> saveImagePermanently(String imagePath) async {
final directory = await getApplicationDocumentsDirectory();
final name = basename(imagePath);
final image = File('${directory.path}/$name');
return File(imagePath).copy(image.path);
}
now my solution is adding a listener onInit when image is created with GetX:
#override
void onInit() {
super.onInit();
ever(isUploaded, (value) {
Get.to(
() => AddPersonProfileAddDetails(),
);
});
}
So is there a way to detect the status of capturing the image like finished/failed/progressing, thanks for any clue or let me know a better way to jump to next page after capturing the image, thanks a lot!
I am currently making a wallpaper app in Flutter. I am using the palette_generator package to extract colors from the image. The problem is while the app is extracting colors from the image. The UI freezes for a solid 3 seconds, after which the colors are shown on the screen. After the colors have been rendered, the whole screen suffers from jank and lag. All animations on that screen perform very badly. Popping off that screen removes the jank and lag. Here is the code I am using:
Future<PaletteGenerator?> updatePalette() async {
var cache = DefaultCacheManager();
File file = await cache.getSingleFile(widget.wall.url);
ui.Image image = await load(file);
palette = await PaletteGenerator.fromImage(
image,
maximumColorCount: 7,
);
return palette;
}
Future<ui.Image> load(File file) async {
var data = await file.readAsBytes();
ui.Codec codec = await ui.instantiateImageCodec(data);
ui.FrameInfo fi = await codec.getNextFrame();
return fi.image;
}
FutureBuilder<PaletteGenerator?>(
future: updatePalette(),
builder: (context, snapshot) {
if (snapshot.hasData)
return MyBottomSheet(
wall: widget.wall, palette: snapshot.data);
return LinearProgressIndicator();
}),
Is there anything I can do to fix this issue?
I recommend using the flutter_isolate package to implement Isolates. The function you are using is a heavy function. Using an Isolated function avoids putting too much pressure on the main thread.
Example code:
void updatePalette() async {
var cache = DefaultCacheManager();
File file = await cache.getSingleFile(url);
var port = ReceivePort();
var isolate = await FlutterIsolate.spawn(
computePalette,
[file.readAsBytesSync(), port.sendPort],
);
port.listen((msg) {
List<int> data = msg;
data.forEach((d) => colorList.add(Color(d)));
isolate.kill();
port.close();
});
}
void computePalette(List<Object> args) async {
var image = args[0] as Uint8List;
var port = args[1] as SendPort;
var img = Image.memory(image);
var palette = await PaletteGenerator.fromImageProvider(
img.image,
maximumColorCount: 7,
);
List<int> colors = [];
palette.colors.forEach((element) => colors.add(element.value));
port.send(colors);
}
I am using the example code from Flutter Camera Plugin. I want to reduce Image size once I capture the image and store it in imageFile variable.
I am not sure is there a built in feature available. didn't find any information in their documentation.
I tried to use Image Plugin to achieve it like below. but it is not working. the entire application stops it function when you use it.
void onTakePictureButtonPressed() {
takePicture().then((XFile? file) {
if (mounted) {
setState(() {
resizeImage(file) // this is what I tried to add to achieve it...
imageFile = file;
videoController?.dispose();
videoController = null;
});
if (file != null) showInSnackBar('Picture saved to ${file.path}');
}
});
}
XFile resizeImage(img) {
var image = imageP.decodeJpg(File(img.path).readAsBytesSync());
var thumbnail = imageP.copyResize(image, width: 400);
File(img.path).writeAsBytesSync(imageP.encodeJpg(thumbnail));
return XFile(img.path);
}
There is a bug in Image Package.... I used flutter_native_image Package and it worked....
void onTakePictureButtonPressed() {
takePicture().then((XFile? file) {
if (mounted) {
setState(() {
resizeImage(file) // this is what I tried to add to achieve it...
imageFile = file;
videoController?.dispose();
videoController = null;
});
if (file != null) showInSnackBar('Picture saved to ${file.path}');
}
});
}
here is the image compression function code.
Future<XFile> resizeImage(img) async {
ImageProperties properties =
await FlutterNativeImage.getImageProperties(img.path);
File compressedFile = await FlutterNativeImage.compressImage(img.path,
quality: 90,
targetWidth: 500,
targetHeight: (properties.height! * 500 / properties.width!).round());
// delete original file
try {
if (await img.exists()) {
await img.delete();
}
} catch (e) {
// Error in getting access to the file.
}
return XFile(compressedFile.path);
}