I am building an app which aims to put a blank box over some words in Arabic in a picture from the Quran. I don't need to identify the words themselves; I just want with every space available in picture that the program automatically identifies that this is a separate word and return the coordinates of that word. I tried using Tesseract to do this, but it failed, it was only able to identify some parts of words but was not reliable. it might be because the Quranic scripture is similar to handwritten Arabic with a specific Othmani font, which Tesseract was not trained to identify. At the moment I am trying to do this task manually using Positioned
widget and MediaQuery
to reference the position to a percent of the screen size. This is taking a lot of time to finish. Is there a faster way to automate this? I again don't need the content of the word itself, I just want to place a container as a curtain on top of each word, so I just need to identify that there is a space so that I can separate between the containers.
Below is my code so far:
import 'package:flutter/material.dart';
import 'package:memorize_me_quran/blindersList.dart';
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String extracted = '';
bool viz = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: OrientationBuilder(
builder: (BuildContext context, Orientation orientation) {
return Stack(
children: [
Image.asset('lib/images/411.PNG', fit: BoxFit.fill, //this is the picture of a page from the Quran with arabic text
height: double.infinity,
width: double.infinity,),
Blinder(viz: viz, y:0.21, x: 0.77), //these will be percentages of length and width of the screen
Blinder(viz: viz, y:0.265, x: 0.492),
Blinder(viz: viz, y:0.321, x: 0.13),
Blinder(viz: viz, y:0.376, x: 0.64,w:0.18),
Blinder(viz: viz, y:0.431, x: 0.1, w:0.2),
Blinder(viz: viz, y:0.486, x: 0.3, w:0.06),
Blinder(viz: viz, y:0.546, x: 0.42, w:0.25),
Blinder(viz: viz, y:0.611, x: 0.145),
Blinder(viz: viz, y:0.666, x: 0.5),
Positioned(
top:MediaQuery.of(context).size.height*0.92,
child: FloatingActionButton(onPressed: () {
setState(() {
viz = !viz;
print(viz);
});
},
child: Text('Hide'),
))
],
);
},
),
),
],
),
);
}
}
class Blinder extends StatelessWidget {
const Blinder({
required this.viz,
required this.y,
required this.x,
this.w=0.11,
});
final bool viz;
final double y;
final double x;
final double w;
@override
Widget build(BuildContext context) {
return Visibility(
visible: viz,
child: Positioned(
//X and y of the blinder are % of the screen h and w
top: MediaQuery.of(context).size.height*y,
left: MediaQuery.of(context).size.width*x,
child:Container(
width: MediaQuery.of(context).size.width*w,
height: MediaQuery.of(context).size.height*0.05,
color: Colors.blueGrey,
)
),
);
}
}
EDIT: to clarify, I am not looking solely for machine learning solutions, any trick that can make the detection of words will be of great help.