import gradio as gr
import requests
from PIL import Image

def check_id(frame):
    url = "https://api.miniai.live/api/id_check"
    files = {'image': open(frame, 'rb')}

    r = requests.post(url=url, files=files)

    html = None
    images = None
    mrz = None

    status = r.json().get('Status')
    table_value = ""

    if r.json().get('MRZ') is not None:
        mrz = r.json().get('MRZ')

    for key, value in r.json().items():
        if key == 'Status' or key == 'Images' or key == 'MRZ' or key == 'Position':
            continue

        mrz_value = ''
        if mrz is not None and mrz.get(key) is not None:
            mrz_value = mrz[key]
            del mrz[key]

        row_value = ("<tr>"
                        "<td>{key}</td>"
                        "<td>{value}</td>"
                        "<td>{mrz_value}</td>"
                    "</tr>".format(key=key, value=value, mrz_value=mrz_value))
        table_value = table_value + row_value


    if mrz is not None:
        for key, value in mrz.items():
            if key == 'MRZ':
                value = value.replace('<', '&lt;')
                value = value.replace(',', '<p>')

            row_value = ("<tr>"
                            "<td>{key}</td>"
                            "<td>{value}</td>"
                            "<td>{mrz_value}</td>"
                        "</tr>".format(key=key, value='', mrz_value=value))
            table_value = table_value + row_value
            

    html = ("<table>"
                "<tr>"
                    "<th style=""width:20%"">Field</th>"
                    "<th style=""width:40%"">Value</th>"
                    "<th style=""width:40%"">MRZ</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    table_value = ""
    for key, value in r.json().items():
        if key == 'Images':
            for details_key, details_value in value.items():
                for image_key, image_value in details_value.items():
                    if image_key == 'image':
                        row_value = ("<tr>"
                                        "<td>{key}</td>"
                                        "<td><img src=""data:image/png;base64,{base64_image} width = '200'  height= '100' /></td>"
                                    "</tr>".format(key=details_key, base64_image=image_value))
                        table_value = table_value + row_value

    images = ("<table>"
                "<tr>"
                    "<th>Field</th>"
                    "<th>Image</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    return [html, images]


def check_bank(frame):
    url = "https://api.miniai.live/api/bank_credit_check"
    files = {'image': open(frame, 'rb')}

    r = requests.post(url=url, files=files)

    html = None
    images = None

    status = r.json().get('Status')
    table_value = ""

    for key, value in r.json().items():
        if key == 'Status' or key == 'Images' or key == 'Position':
            continue

        row_value = ("<tr>"
                        "<td>{key}</td>"
                        "<td>{value}</td>"
                    "</tr>".format(key=key, value=value))
        table_value = table_value + row_value

    html = ("<table>"
                "<tr>"
                    "<th style=""width:20%"">Field</th>"
                    "<th style=""width:40%"">Value</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    table_value = ""
    for key, value in r.json().items():
        if key == 'Images':
            for details_key, details_value in value.items():
                for image_key, image_value in details_value.items():
                    if image_key == 'image':
                        row_value = ("<tr>"
                                        "<td>{key}</td>"
                                        "<td><img src=""data:image/png;base64,{base64_image} width = '200'  height= '100' /></td>"
                                    "</tr>".format(key=details_key, base64_image=image_value))
                        table_value = table_value + row_value

    images = ("<table>"
                "<tr>"
                    "<th>Field</th>"
                    "<th>Image</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    return [html, images]

def check_mrz(frame):
    url = "https://api.miniai.live/api/mrz_barcode_check"
    files = {'image': open(frame, 'rb')}

    r = requests.post(url=url, files=files)

    html = None
    images = None
    mrz = None

    status = r.json().get('Status')
    table_value = ""

    if r.json().get('MRZ') is not None:
        mrz = r.json().get('MRZ')

    for key, value in r.json().items():
        if key == 'Status' or key == 'Images' or key == 'MRZ' or key == 'Position':
            continue

        mrz_value = ''
        if mrz is not None and mrz.get(key) is not None:
            mrz_value = mrz[key]
            del mrz[key]

        row_value = ("<tr>"
                        "<td>{key}</td>"
                        "<td>{mrz_value}</td>"
                    "</tr>".format(key=key, mrz_value=mrz_value))
        table_value = table_value + row_value


    if mrz is not None:
        for key, value in mrz.items():
            if key == 'MRZ':
                value = value.replace('<', '&lt;')
                value = value.replace(',', '<p>')

            row_value = ("<tr>"
                            "<td>{key}</td>"
                            "<td>{mrz_value}</td>"
                        "</tr>".format(key=key, mrz_value=value))
            table_value = table_value + row_value
            

    html = ("<table>"
                "<tr>"
                    "<th style=""width:20%"">Field</th>"
                    "<th style=""width:40%"">MRZ</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    table_value = ""
    for key, value in r.json().items():
        if key == 'Images':
            for details_key, details_value in value.items():
                for image_key, image_value in details_value.items():
                    if image_key == 'image':
                        row_value = ("<tr>"
                                        "<td>{key}</td>"
                                        "<td><img src=""data:image/png;base64,{base64_image} width = '200'  height= '100' /></td>"
                                    "</tr>".format(key=details_key, base64_image=image_value))
                        table_value = table_value + row_value

    images = ("<table>"
                "<tr>"
                    "<th>Field</th>"
                    "<th>Image</th>"
                "</tr>"
                "{table_value}"
                "</table>".format(table_value=table_value))
    
    return [html, images]


# APP Interface
with gr.Blocks() as MiniAIdemo:
    gr.Markdown(
        """
        <a href="https://miniai.live" style="display: flex; align-items: center;">
            <img src="https://miniai.live/wp-content/uploads/2024/02/logo_name-1-768x426-1.png" style="width: 18%; margin-right: 15px;"/>
            <div>
                <p style="font-size: 50px; font-weight: bold; margin-right: 20px;">IDSDK Web Online Demo</p>
            </div>
        </a>

        <br/>
        <ul>
            <li style="font-size: 18px;">Visit and learn more about our Service : <a href="https://miniai.live" target="_blank" style="font-size: 18px;">https://www.miniai.live</a></li>
            <li style="font-size: 18px;">Check our SDK for cross-platform from Github : <a href="https://github.com/MiniAiLive" target="_blank" style="font-size: 18px;">https://github.com/MiniAiLive</a></li>
            <li style="font-size: 18px;">Quick view our Youtube Demo Video : <a href="https://www.youtube.com/@miniailive" target="_blank" style="font-size: 18px;">MiniAiLive Youtube Channel</a></li>
            <li style="font-size: 18px;">Demo with Android device from Google Play : <a href="https://play.google.com/store/apps/dev?id=5831076207730531667" target="_blank" style="font-size: 18px;">MiniAiLive Google Play</a></li>
        </ul>
        <br/>
        """
    )
    with gr.Tabs():
        with gr.Tab("ID Document Recognition"):
            with gr.Row():
                with gr.Column(scale=3):
                    im_id_in = gr.Image(type='filepath', height=300)
                    gr.Examples(
                        [
                            "images/id/demo1.jpg",
                            "images/id/demo2.png",
                            "images/id/demo3.png",
                        ],
                        inputs=im_id_in
                    )
                    btn_f_id = gr.Button("Check Document Details", variant='primary')
                with gr.Column(scale=5):
                    table_id_out = gr.HTML()
                with gr.Column(scale=2):
                    im_id_out = gr.HTML()

            btn_f_id.click(check_id, inputs=im_id_in, outputs=[table_id_out, im_id_out])
        with gr.Tab("Bank/Credit Recognition"):
            with gr.Row():
                with gr.Column(scale=3):
                    im_bank_in = gr.Image(type='filepath', height=300)
                    gr.Examples(
                        [
                            "images/bank/demo1.jpg",
                            "images/bank/demo2.png",
                            "images/bank/demo3.png",
                        ],
                        inputs=im_bank_in
                    )
                    btn_f_bank = gr.Button("Check Document Details", variant='primary')
                with gr.Column(scale=5):
                    table_bank_out = gr.HTML()
                with gr.Column(scale=2):
                    im_bank_out = gr.HTML()

            btn_f_bank.click(check_bank, inputs=im_bank_in, outputs=[table_bank_out, im_bank_out])
        with gr.Tab("MRZ/Barcode Recognition"):
            with gr.Row():
                with gr.Column(scale=3):
                    im_mrz_in = gr.Image(type='filepath', height=300)
                    gr.Examples(
                        [
                            "images/mrz_barcode/demo1.png",
                            "images/mrz_barcode/demo2.png",
                        ],
                        inputs=im_mrz_in
                    )
                    btn_f_mrz = gr.Button("Check Document Details", variant='primary')
                with gr.Column(scale=5):
                    table_mrz_out = gr.HTML()
                with gr.Column(scale=2):
                    im_mrz_out = gr.HTML()

            btn_f_mrz.click(check_mrz, inputs=im_mrz_in, outputs=[table_mrz_out, im_mrz_out])
if __name__ == "__main__":
    MiniAIdemo.launch()