自作のイテレーションツールをWebアプリケーション化したい

現在、tetsseractによる光学文字認識の学習をしています。trainingのやり方について調べてみたのですが、画像ベースで行うものではなく、テキストベースで学習させるものばかりでした。jTessBoxEditorについても、フォントを選択、文字を入力することでtifとboxファイルが作成されそれを学習に用いるという内容しかありませんでした。
しかし、いろいろ試したところjTessBoxEditorでもboxファイルさえあれば自作の画像データでも学習できることがわかりました。ただ、boxファイル作成のイテレーションツールを見つけることができなかったため自作することにしました。
コードを以下にしまします。(コードが汚いのは申し訳ありません。。。)

python
1# -*- coding: utf-8 -*-
2import cv2
3
4
5class mouseParam:
6    def __init__(self, input_img_name):
7        # マウス入力用のパラメータ
8        self.mouseEvent = {"x": None, "y": None, "event": None, "flags": None}
9        # マウス入力の設定
10        cv2.setMouseCallback(input_img_name, self.__CallBackFunc, None)
11
12    # コールバック関数
13    def __CallBackFunc(self, eventType, x, y, flags, userData):
14        self.mouseEvent["x"] = x
15        self.mouseEvent["y"] = y
16        self.mouseEvent["event"] = eventType
17        self.mouseEvent["flags"] = flags
18        self.mouseEvent["flags"] = userData
19
20    # マウス入力用のパラメータを返すための関数
21    def getData(self):
22        return self.mouseEvent
23
24    # マウスイベントを返す関数
25    def getEvent(self):
26        return self.mouseEvent["event"]
27
28    def putButton(self):
29        return True, self.mouseEvent["x"], self.mouseEvent["y"]
30
31    def moveMouse(self, x, y, display_image, drawing):
32        if drawing:
33            img = display_image.copy()
34            x2 = self.mouseEvent["x"]
35            y2 = self.mouseEvent["y"]
36            img = cv2.rectangle(img, (x, y), (x2, y2), (255, 0, 0), 1)
37            return img
38        else:
39            return display_image
40
41    def upButton(self, x, y, display_image):
42        drawing = False
43        x2 = self.mouseEvent["x"]
44        y2 = self.mouseEvent["y"]
45        if x2 - x == 0 and y2 - y == 0:
46            return 0, 0, display_image, drawing
47        elif x2 - x != 0 and y2 - y != 0:
48            img = cv2.rectangle(display_image, (x, y), (x2, y2), (255, 0, 0), 1)
49            return x2, y2, img, drawing
50
51
52def getAxis(image, window_name):
53    box_file_element = []
54    drawing = False
55    x, y, x2, y2 = 0, 0, 0, 0
56    first_display_image = image.copy()
57    second_display_image = image.copy()
58    object_name = None
59    object_names_index = None
60    while 1:
61        # コールバックkの設定
62        cv2.imshow(window_name, first_display_image)
63        mouse_data = mouseParam(window_name)
64        k = cv2.waitKey(50) & 0xff
65        if object_names_index is None and object_name is None:
66            object_name = input("画像にある文字列を入力してください")
67            object_names_index = len(object_name)
68
69        # 左クリックがあった時の処理
70        if mouse_data.getEvent() == cv2.EVENT_LBUTTONDOWN and object_names_index > 0:
71            # クリックされた座標を取得、x,y変数に入れる。クリックしている間はマウスを動かすと四角を描写
72            drawing, x, y = mouse_data.putButton()
73
74        # マウスを動かしている間の処理
75        elif mouse_data.getEvent() == cv2.EVENT_MOUSEMOVE:
76            # drawingがTrueの時、随時マウスの座標を取得しクリック位置とマウス座標の2点で四角を描写、ディスプレイ更新する
77            first_display_image = mouse_data.moveMouse(x, y, second_display_image, drawing)
78
79        # マウスのクリックが離れた時の処理
80        elif mouse_data.getEvent() == cv2.EVENT_LBUTTONUP and object_names_index > 0:
81            # クリック位置とボタンを離した位置の座標を利用し四角を作成、ディスプレイを更新
82            x2, y2, first_display_image, drawing = mouse_data.upButton(x, y, second_display_image)
83            if x2 != 0 and y2 != 0:
84                box_file_element.append([object_name[len(object_name) - object_names_index],
85                                         x, y, x2, y2, 0])
86                object_names_index -= 1
87
88        # マウスの右クリックボタンが押された時、かつ座標リストに値があった場合ディスプレイの枠とその座標を削除
89        elif mouse_data.getEvent() == cv2.EVENT_RBUTTONDOWN and len(box_file_element) > 0:
90            drawing = False
91            box_file_element.pop(-1)
92            object_names_index += 1
93            second_display_image = image.copy()
94            if len(box_file_element) != 0:
95                for i in box_file_element:
96                    x = i[1]
97                    y = i[2]
98                    width = i[3]
99                    height = i[4]
100                    first_display_image = cv2.rectangle(second_display_image, (x, y), (x + width, y + height),
101                                                        (255, 0, 0), 1)
102            else:
103                first_display_image = second_display_image
104
105        # 各文字の座標を記録できた時、キーボードを押すことで関数を抜ける
106        if object_names_index == 0 and k == 27:
107            cv2.destroyAllWindows()
108            break
109
110    return box_file_element

画像が入ってきたら文字列を入力、画像window上でマウスのを動かすことで座標を取得しそれを保存、入力文字数に達したら新たな座標は取得することができなくなり、Escを押すことで関数を終了し囲まれた文字と座標のリストを返す。というものです。
一応動かすことはでき、座標も取得できるようになったため、学習も踏まえてwebアプリケーション化しようと思いました。flaskを使おうと考えています。しかし、今回作成したプログラムはOpenCVの画像上で機能するプログラムを、それをどのようにweb画面に
拡張することができるかわかりません。また、座標はディスプレイベースではなく画像ベースで取得したいです。参考になる技術等教えていただけると助かります。

長文となり申し訳ありません。以上、よろしくお願いします。

FiroProchainezo

2020/07/27 02:09

> 参考になる技術等教えていただけると助かります。ということなので、Webの技術は無しという認識で必要そうな技術を列挙します。まず、以下は必須です。ブラウザに描写するための言語です。・HTML5 ・CSS ブラウザ上でいろいろ操作したいというように見えますので、以下も必須です。・JavaScript Web上の表示はHTMLとCSS、操作はJavaScriptが担当です。一応以下も学んでおいたほうが理解がはかどるかもしれません・HTTP(1.0, 1.1) 長々と書きましたが、Webを支える技術という本を読むとWeb技術の概略が分かり安い気がします。