import gradio as gr
import ObjCharRec
from deep_translator import GoogleTranslator
import markdown as md
import translate_speak
import base64

langs_list = GoogleTranslator().get_supported_languages()
langs_dict = GoogleTranslator().get_supported_languages(as_dict=True)

def encode_image(image_path):
    with open(image_path, "rb") as image_file:
        return base64.b64encode(image_file.read()).decode('utf-8')

# Encode the images
github_logo_encoded = encode_image("Images/github-logo.png")
linkedin_logo_encoded = encode_image("Images/linkedin-logo.png")
website_logo_encoded = encode_image("Images/ai-logo.png")

usecase_img_encoded = encode_image("Images/UML/Usecase.png")
class_img_encoded = encode_image("Images/UML/class.png")
object_img_encoded = encode_image("Images/UML/object.png")
sequence_img_encoded = encode_image("Images/UML/sequence.png")
component_img_encoded = encode_image("Images/UML/component.png")
colab_img_encoded = encode_image("Images/UML/colab.png")
activity_img_encoded = encode_image("Images/UML/activity.png")

css = '''
    /* Header Styling */
    h3, h4 {
        margin-top: 1.2em;
        margin-bottom: 0.6em;
        font-weight: bold;
    }

    h3 {
        font-size: 1.7em;
        border-bottom: 2px solid #00b9c2;
        color: 00b9c2;
        padding-bottom: 0.3em;
        margin-bottom: 1em;
    }

    h4 {
        font-size: 1.5em;
    }

    code {
        color: rgb(202 253 255);
    }

    code1{
        color: #00b9c2;
    }

    /* Text Emphasis */
    p, li {
        text-align: justify;
        margin: 0.6em 0;
        font-size: 1.2em;
    }

    em {
        color: #6c757d;
        font-style: italic;
    }

    /* List Styling */
    ul {
        padding-left: 1.2em;
        margin-bottom: 1em;
    }

    li {
        margin-bottom: 0.5em;
    }

    /* Link Styling */
    a {
        color: #007bff;
        text-decoration: none;
    }

    a:hover {
        text-decoration: underline;
    }

    /* Image Styling */
    img {
        border-radius: 8px;
        box-shadow: -8px 8px 20px 0px rgb(0 185 194)
        i
    }

    /* Divider Styling */
    hr {
        border: 0;
        height: 1px;
        background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.3), rgba(0,0,0,0));
        margin: 1.5em 0;
    }

    #component-34.column.svelte-vt1mxs.gap{
        min-width: min(200px, 100%);
    ]

    footer {visibility: hidden}
'''


with gr.Blocks(theme=gr.themes.Ocean(font=[gr.themes.GoogleFont("Noto Sans")]), css=css) as main_interface:
    gr.Markdown("# Welcome to The Linguistic Lens 👓🗣️")
    with gr.Tabs():
        with gr.TabItem("Intro"):
            gr.HTML(md.description)
            # gr.HTML(md.usecase_diagram.format(usecase_img_encoded))
            # gr.HTML(md.class_diagram.format(class_img_encoded))
            # gr.HTML(md.object_diagram.format(object_img_encoded))
            # gr.HTML(md.sequence_diagram.format(sequence_img_encoded))
            # gr.HTML(md.colab_diagram.format(colab_img_encoded))
            # gr.HTML(md.activity_diagram.format(activity_img_encoded))
            # gr.HTML(md.component_diagram.format(component_img_encoded))

        with gr.TabItem("Simple OCR"):
            gr.Markdown("Paddle OCR")
            with gr.Row():
                with gr.Column(scale=0.75, min_width=300):
                    image_input = gr.Image(label="Upload Image")
                    with gr.Row():
                        clear_btn = gr.ClearButton()
                        submit_btn = gr.Button("Submit", variant='primary')
                output_text = gr.Text(label="Output")
                
            # gr.Examples()

            submit_btn.click(fn=lambda img: ObjCharRec.ocr_with_paddle(img)[0], inputs=image_input, outputs=output_text)
            clear_btn.click(lambda :[None]*2, outputs=[image_input, output_text])

        with gr.TabItem("⭐Translator"):
            with gr.Row():
                with gr.Column(scale=0.75, min_width=300):
                    with gr.Row():
                        image_input = gr.Image(label="Upload Image")

                    with gr.Row():
                        clear_btn = gr.ClearButton()
                        submit_btn = gr.Button("Submit", variant='primary')
                with gr.Column():
                    with gr.Row():
                        output_text = gr.Text(label="Output")
                        audio_out = gr.Audio(label="Streamed Audio")
                    lang_drop = gr.Dropdown(langs_dict, label="language", interactive=True)
                    translate_btn = gr.Button("Translate", variant='primary')
                    with gr.Row():
                        translated_txt = gr.Text(label="translated text")
                        translated_out = gr.Audio(label="Streamed Audio")

            submit_btn.click(fn=ObjCharRec.ocr_with_paddle, inputs=image_input, outputs=[output_text, audio_out])
            translate_btn.click(fn=translate_speak.translate_txt, inputs=[lang_drop, output_text], outputs=[translated_txt, translated_out])
            clear_btn.click(lambda: [None] * 5, outputs=[image_input, output_text, translated_txt, translated_out, audio_out])

        with gr.TabItem("🔜OCR Lens"):
            with gr.Row():
                with gr.Row():
                    with gr.Column(scale=2):
                        image_input = gr.Image(label="Upload Image")
                        input_output_text = gr.Text()
                        input_audio_out = gr.Audio()
                with gr.Row():
                    with gr.Column(scale=1):
                        lang_abbr = {'english': 'en', 'telugu' : 'te', 'hindi': 'hi', 'kannada': 'ka', 'tamil': 'ta', 'arabic': 'ar', 'french': 'fr', 'german': 'german', 'korean': 'korean', 'Japanese': 'japan'}
                        ocr_lang = gr.Dropdown(list(lang_abbr.keys()), label="Image-language", interactive=True)
                        submit_btn = gr.Button("Submit", variant='primary')

                        lang_drop = gr.Dropdown(langs_dict, label="language", interactive=True)
                        translate_btn = gr.Button("Translate", variant='primary')

                        clear_btn = gr.ClearButton()
                with gr.Row():
                    with gr.Column(scale=2):
                        image_output = gr.Image(label="Upload Image")
                        output_output_text = gr.Text()
                        output_audio_out = gr.Audio()

            clear_btn.click(lambda: [None] * 6,outputs=[image_input, input_output_text, input_audio_out, image_output, output_output_text, output_audio_out])
            submit_btn.click(fn=None, inputs=[image_input, ocr_lang], outputs=[image_input, input_output_text, input_audio_out])
            translate_btn.click(fn=None, inputs=[])

        gr.HTML(md.footer.format(github_logo_encoded, linkedin_logo_encoded, website_logo_encoded))


if __name__ == "__main__":
    main_interface.launch()