ミニ生命保険システムを作成 S09

関連記事

はじめに

今回は、以下の技術を利用してデータ入力プラットフォームを構築し、ミニ生命保険システムに接続します。

• 生命保険システムにおけるイメージライブラリーの役割 こちら
• Pythonでバーコードの生成と認識 こちら
• Pythonでイメージのアップロードとプレビューサービスを実装します こちら
• paddleocrのdemo こちら

アーキテクチャ

だんだんとアーキテクチャがはっきりしてくる。

実装

イメージライブラリを呼び出すためのインターフェイスをカプセル化します。

ImageService

@FeignClient(name = "images", url = "http://127.0.0.1:5000/")
public interface ImageService {
    @GetMapping("/img/get/{id}")
    ImageDTO getImg(@PathVariable("id") String id);

    @GetMapping("/img/info/{barcode}")
    List<ImageInfoDTO> getInfo(@PathVariable("barcode") String barcode);
}

OCRを呼び出すためのインターフェイスをカプセル化します。

OcrService

@FeignClient(name = "ocr", url = "http://127.0.0.1:5000/")
public interface OcrService {
    @GetMapping("/ocr/{id}")
    List<String> ocr(@PathVariable("id") String id);
}

イメージを取得方法

ImageDTO dto = imageService.getImg(imgId);
image.setSrc("data:image/png;base64, " + dto.getBase64Image());

OCRの結果を取得方法

List<String> lst = ocrService.ocr(imgId);

完全なUIの実装

package com.insurance.life.img2txt.front;

@Route("/main")
public class Main extends SplitLayout {

    private List<ImageInfoDTO> imgList;
    private int currentIndex;

    public Main(ImageService imageService, OcrService ocrService) {
        setHeight("100%");
        setSplitterPosition(50);
        VerticalLayout main = new VerticalLayout();
        main.setHeight("100%");
        addToPrimary(main);

        Image image = new Image();
        image.setWidth("100%");

        main.add(image);

        VerticalLayout secondary = new VerticalLayout();
        main.setHeight("100%");

        addToPrimary(main);
        addToSecondary(secondary);


        TextField barCode = new TextField();
        Button button = new Button("Get");
        Button save = new Button("Save & Next");

        button.addClickListener(o -> {
            currentIndex = 0;
            imgList = imageService.getInfo(barCode.getValue());
            ImageDTO dto = imageService.getImg(imgList.get(currentIndex).getId());
            image.setSrc("data:image/png;base64, " + dto.getBase64Image());
            currentIndex++;
            save.setText("Save & Next (%d/%d)".formatted(currentIndex, imgList.size()));
        });

        secondary.add(new HorizontalLayout(barCode, button), new Hr());

        TextField name = new TextField("Name");
        TextField birthDate = new TextField("BirthDate");
        TextField address = new TextField("Address");

        secondary.add(name, birthDate, address);

        secondary.add(new Hr());
        Button ocr = new Button("OCR");
        ocr.addClickListener(o-> {
            List<String> lst = ocrService.ocr(imgList.get(currentIndex).getId());
            // This is just a demo, requires some layout parse.
            name.setValue(lst.get(2));
            birthDate.setValue(lst.get(3));
            address.setValue(lst.get(5));
        });


        save.addClickListener(o-> {
            ImageDTO dto = imageService.getImg(imgList.get(currentIndex).getId());
            image.setSrc("data:image/png;base64, " + dto.getBase64Image());
            currentIndex++;
            if (currentIndex < imgList.size() ) {
                o.getSource().setText("Save & Next (%d/%d)".formatted(currentIndex, imgList.size()));
            }
        });


        secondary.add(new HorizontalLayout(ocr, save));
    }

}

Source Code

終わり

最後まで読んでいただきありがとうございました。何かご提案やご質問がありましたら、コメントをお待ちしています。