ui.py

import gradio as gr
from api import check_id, check_credit, check_mrz

ID_EXAMPLES = [[f"images/id/{i}.jpg"] for i in range(1, 8)]
CREDIT_EXAMPLES = [["images/bank/demo1.jpg"], ["images/bank/demo2.png"], ["images/bank/demo3.png"]]
MRZ_EXAMPLES = [["images/mrz_barcode/demo1.png"], ["images/mrz_barcode/demo2.png"]]


def _format_result_html(result: dict) -> str:
    if not result or "error" in result:
        return ""

    rows = []
    for key, value in result.items():
        if isinstance(value, dict):
            inner = "".join(
                f'<tr><td style="padding:6px 12px;font-weight:600;color:#64748b;'
                f'border-bottom:1px solid #f1f5f9;">{k}</td>'
                f'<td style="padding:6px 12px;color:#334155;border-bottom:1px solid #f1f5f9;">{v}</td></tr>'
                for k, v in value.items()
            )
            rows.append(
                f'<tr><td colspan="2" style="padding:8px 12px;font-weight:700;'
                f'color:#1e293b;background:#f8fafc;border-bottom:2px solid #e2e8f0;">'
                f'{key}</td></tr>{inner}'
            )
        else:
            rows.append(
                f'<tr><td style="padding:6px 12px;font-weight:600;color:#64748b;'
                f'border-bottom:1px solid #f1f5f9;">{key}</td>'
                f'<td style="padding:6px 12px;color:#334155;border-bottom:1px solid #f1f5f9;">{value}</td></tr>'
            )

    return f"""
    <div style="padding:16px 0;">
        <div style="background:white;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;">
            <table style="width:100%;border-collapse:collapse;">
                {''.join(rows)}
            </table>
        </div>
    </div>
    """


def process_image(image, doc_type: str):
    if image is None:
        return (
            '<div style="padding:20px;text-align:center;color:#94a3b8;">'
            "Upload or select an example image</div>",
            {"error": "No image provided"},
        )

    check_fn = {"ID": check_id, "Credit Card": check_credit, "MRZ": check_mrz}.get(doc_type, check_id)
    result = check_fn(image)

    if "error" in result:
        return (
            f'<div style="padding:20px;text-align:center;color:#dc2626;">{result["error"]}</div>',
            result,
        )

    return _format_result_html(result), result


def create_interface():
    with gr.Blocks(
        title="MiniAiLive ID Document Reader",
        theme=gr.themes.Soft(primary_hue="blue", neutral_hue="slate"),
        css="footer {display: none !important;}",
    ) as demo:
        gr.Markdown(
            """
            # 🥇 MiniAiLive ID Document Reader
            **Advanced AI-Powered ID Document Recognition Technology**

            <a href="https://miniai.live/document-verification/">For more details, please visit website</a>

            Upload a document image or select an example below to extract information.
            """
        )

        doc_type = gr.Radio(
            choices=["ID", "Credit Card", "MRZ"],
            value="ID",
            label="Document Type",
        )

        with gr.Row(equal_height=False):
            with gr.Column(scale=1, min_width=400):
                image_input = gr.Image(label="Upload Image")
                submit_btn = gr.Button("Read Document", variant="primary", size="lg")

                with gr.Column(visible=True) as id_col:
                    gr.Examples(
                        examples=ID_EXAMPLES,
                        inputs=image_input,
                        label="ID Card Examples",
                    )
                with gr.Column(visible=False) as credit_col:
                    gr.Examples(
                        examples=CREDIT_EXAMPLES,
                        inputs=image_input,
                        label="Credit Card Examples",
                    )
                with gr.Column(visible=False) as mrz_col:
                    gr.Examples(
                        examples=MRZ_EXAMPLES,
                        inputs=image_input,
                        label="MRZ / Barcode Examples",
                    )

            with gr.Column(scale=1, min_width=400):
                result_html = gr.HTML(label="Extracted Data")
                raw_json = gr.JSON(label="Raw Response")

        doc_type.change(
            fn=lambda choice: (
                gr.update(visible=choice == "ID"),
                gr.update(visible=choice == "Credit Card"),
                gr.update(visible=choice == "MRZ"),
            ),
            inputs=doc_type,
            outputs=[id_col, credit_col, mrz_col],
        )

        submit_btn.click(
            fn=process_image,
            inputs=[image_input, doc_type],
            outputs=[result_html, raw_json],
        )

    return demo