|
import sys |
|
import os |
|
import gradio as gr |
|
import json |
|
import requests |
|
from PIL import Image |
|
|
|
css = """ |
|
.example-image img{ |
|
display: flex; /* Use flexbox to align items */ |
|
justify-content: center; /* Center the image horizontally */ |
|
align-items: center; /* Center the image vertically */ |
|
height: 300px; /* Set the height of the container */ |
|
object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */ |
|
} |
|
.example-image img{ |
|
display: flex; /* Use flexbox to align items */ |
|
justify-content: center; /* Center the image horizontally */ |
|
align-items: center; /* Center the image vertically */ |
|
height: 300px; /* Set the height of the container */ |
|
object-fit: contain; /* Preserve aspect ratio while fitting the image within the container */ |
|
|
|
.block-background { |
|
# background-color: #202020; /* Set your desired background color */ |
|
border-radius: 5px; |
|
} |
|
} |
|
""" |
|
|
|
def find_key_in_dict(d, target_key): |
|
for key, value in d.items(): |
|
if key == target_key: |
|
return value |
|
elif isinstance(value, dict): |
|
result = find_key_in_dict(value, target_key) |
|
if result is not None: |
|
return result |
|
return None |
|
|
|
def json_to_html_table(data, image_keys): |
|
html = "<table border='1' style='border-collapse: collapse; width: 100%;'>" |
|
for key, value in data.items(): |
|
if isinstance(value, dict): |
|
html += f"<tr><td colspan='2'><strong>{key}</strong></td></tr>" |
|
for sub_key, sub_value in value.items(): |
|
if sub_key in image_keys: |
|
html += f"<tr><td>{sub_key}</td><td><img src='data:image/png;base64,{sub_value}' width = '200' height= '100' /></td></tr>" |
|
else: |
|
html += f"<tr><td>{sub_key}</td><td>{sub_value}</td></tr>" |
|
else: |
|
if key in image_keys: |
|
html += f"<tr><td>{key}</td><td><img src='data:image/png;base64,{value}' width = '200' height= '100' /></td></tr>" |
|
else: |
|
html += f"<tr><td>{key}</td><td>{value}</td></tr>" |
|
|
|
html += "</table>" |
|
return html |
|
|
|
def idcard_recognition(frame1, frame2): |
|
url = "https://recognito-iddocumentrecognition.p.rapidapi.com/api/read_idcard" |
|
|
|
files = None |
|
if frame1 is not None and frame2 is not None: |
|
files = {'image': open(frame1, 'rb'), 'image2': open(frame2, 'rb')} |
|
elif frame1 is not None and frame2 is None: |
|
files = {'image': open(frame1, 'rb')} |
|
elif frame1 is None and frame2 is not None: |
|
files = {'image': open(frame2, 'rb')} |
|
else: |
|
return ['', None] |
|
|
|
headers = {"X-RapidAPI-Key": os.environ.get("API_KEY")} |
|
|
|
r = requests.post(url=url, files=files, headers=headers) |
|
|
|
images = None |
|
rawValues = {} |
|
image_table_value = "" |
|
result_table_dict = { |
|
'portrait':'', |
|
'documentName':'', |
|
'score':'', |
|
'countryName':'', |
|
'name':'', |
|
'sex':'', |
|
'address':'', |
|
'dateOfBirth':'', |
|
'dateOfIssue':'', |
|
'dateOfExpiry':'', |
|
'documentNumber':'', |
|
} |
|
|
|
if 'data' in r.json(): |
|
for key, value in r.json()['data'].items(): |
|
if key == 'image': |
|
for image_key, image_value in value.items(): |
|
row_value = ("<tr>" |
|
"<td>{key}</td>" |
|
"<td><img src=""data:image/png;base64,{base64_image} width = '200' height= '100' /></td>" |
|
"</tr>".format(key=image_key, base64_image=image_value)) |
|
image_table_value = image_table_value + row_value |
|
|
|
images = ("<table>" |
|
"<tr>" |
|
"<th>Field</th>" |
|
"<th>Image</th>" |
|
"</tr>" |
|
"{image_table_value}" |
|
"</table>".format(image_table_value=image_table_value)) |
|
|
|
for key, value in r.json().items(): |
|
if key == 'data': |
|
if 'image' in value: |
|
del value['image'] |
|
rawValues[key] = value |
|
else: |
|
rawValues[key] = value |
|
|
|
|
|
for result_key in result_table_dict.keys(): |
|
result_table_dict[result_key] = find_key_in_dict(r.json(), result_key) |
|
|
|
result = json_to_html_table(result_table_dict, {'portrait'}) |
|
json_result = json.dumps(rawValues, indent=6) |
|
return [result, json_result, images] |
|
|
|
def launch_demo(): |
|
with gr.Blocks(css=css) as demo: |
|
gr.Markdown( |
|
f""" |
|
<a href="https://recognito.vision" style="display: flex; align-items: center;"> |
|
<img src="https://recognito.vision/wp-content/uploads/2024/03/Recognito-modified.png" style="width: 8%; margin-right: 15px;"/> |
|
<div> |
|
<p style="font-size: 32px; font-weight: bold; margin: 0;">Recognito</p> |
|
<p style="font-size: 18px; margin: 0;">www.recognito.vision</p> |
|
</div> |
|
</a> |
|
<p style="font-size: 20px; font-weight: bold;">📘 Product Documentation</p> |
|
<div style="display: flex; align-items: center;"> |
|
  <a href="https://docs.recognito.vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/05/book.png" style="width: 48px; margin-right: 5px;"/></a> |
|
</div> |
|
<p style="font-size: 20px; font-weight: bold;">🏠 Visit Recognito</p> |
|
<div style="display: flex; align-items: center;"> |
|
  <a href="https://recognito.vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/recognito_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
<a href="https://www.linkedin.com/company/recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/linkedin_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
<a href="https://huggingface.co/recognito" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/hf_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
<a href="https://github.com/recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/github_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
<a href="https://hub.docker.com/u/recognito" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/03/docker_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
<a href="https://www.youtube.com/@recognito-vision" style="display: flex; align-items: center;"><img src="https://recognito.vision/wp-content/uploads/2024/04/youtube_64_cl.png" style="width: 32px; margin-right: 5px;"/></a> |
|
</div> |
|
<p style="font-size: 20px; font-weight: bold;">🤝 Contact us for our on-premise ID Document Verification SDKs deployment</p> |
|
<div style="display: flex; align-items: center;"> |
|
  <a target="_blank" href="mailto:hello@recognito.vision"><img src="https://img.shields.io/badge/email-hassan@recognito.vision-blue.svg?logo=gmail " alt="www.recognito.vision"></a> |
|
<a target="_blank" href="https://wa.me/+14158003112"><img src="https://img.shields.io/badge/whatsapp-+14158003112-blue.svg?logo=whatsapp " alt="www.recognito.vision"></a> |
|
<a target="_blank" href="https://t.me/recognito_vision"><img src="https://img.shields.io/badge/telegram-@recognito__vision-blue.svg?logo=telegram " alt="www.recognito.vision"></a> |
|
<a target="_blank" href="https://join.slack.com/t/recognito-workspace/shared_invite/zt-2d4kscqgn-"><img src="https://img.shields.io/badge/slack-recognito__workspace-blue.svg?logo=slack " alt="www.recognito.vision"></a> |
|
</div> |
|
<br/> |
|
""" |
|
) |
|
|
|
with gr.Row(): |
|
with gr.Column(scale=6): |
|
with gr.Row(): |
|
with gr.Column(scale=3): |
|
id_image_input1 = gr.Image(type='filepath', label='Front', elem_classes="example-image") |
|
with gr.Column(scale=3): |
|
id_image_input2 = gr.Image(type='filepath', label='Back', elem_classes="example-image") |
|
|
|
with gr.Row(): |
|
id_examples = gr.Examples( |
|
examples=[['examples/1_f.png', 'examples/1_b.png'], |
|
['examples/2_f.png', 'examples/2_b.png'], |
|
['examples/3_f.png', 'examples/3_b.png'], |
|
['examples/4.png', None]], |
|
inputs=[id_image_input1, id_image_input2], |
|
outputs=None, |
|
fn=idcard_recognition |
|
) |
|
|
|
with gr.Blocks(): |
|
with gr.Column(scale=4, min_width=400, elem_classes="block-background"): |
|
id_recognition_button = gr.Button("ID Card Recognition", variant="primary", size="lg") |
|
with gr.Tab("Key Fields"): |
|
id_result_output = gr.HTML() |
|
with gr.Tab("Raw JSON"): |
|
json_result_output = gr.JSON() |
|
with gr.Tab("Images"): |
|
image_result_output = gr.HTML() |
|
|
|
|
|
id_recognition_button.click(idcard_recognition, inputs=[id_image_input1, id_image_input2], outputs=[id_result_output, json_result_output, image_result_output]) |
|
|
|
gr.HTML('<a href="https://visitorbadge.io/status?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2Frecognito%2FID-Document-Verification"><img src="https://api.visitorbadge.io/api/combined?path=https%3A%2F%2Fhuggingface.co%2Fspaces%2Frecognito%2FID-Document-Verification&labelColor=%2337d67a&countColor=%23263759&style=flat" /></a>') |
|
|
|
demo.launch(server_name="0.0.0.0", server_port=7860, show_api=False) |
|
|
|
if __name__ == '__main__': |
|
launch_demo() |
