import gradio as gr
import requests
import json
import base64
from PIL import Image
import io
import os

css = """
footer { 
    visibility: hidden; 
}
"""

app_id = os.getenv("app_id")
app_key = os.getenv("app_key")
app_url = os.getenv("app_url")


def get_latex_from_image_all_formats(image):
    buffered = io.BytesIO()
    image.save(buffered, format="JPEG")
    image_base64 = base64.b64encode(buffered.getvalue()).decode('utf-8')

    headers = {
        "app_id": app_id,
        "app_key": app_key,
        "Content-Type": "application/json"
    }

    # 해당 부분을 ["text"]로 변경하여 formats를 리스트로 설정
    data = {
        "src": f"data:image/jpeg;base64,{image_base64}",
        "formats": ["text"]
    }

    response = requests.post(app_url, headers=headers, json=data)
    response.raise_for_status()

    result = response.json()
    # formats_results 변수는 사용하지 않으므로 제거하여 코드를 단순화
    return result

def build_gradio_app(css=css):
    with gr.Blocks() as demo:
        with gr.Row():
            image_input = gr.Image(type="pil", label="이미지 업로드")
            submit_button = gr.Button("변환하기")
        
        # 단일 출력을 위해 outputs 부분을 단순화
        outputs = gr.Textbox(label="결과")
        latex_iframe = gr.HTML(value='<iframe src="https://www.mathjax.org/#demo" style="width: 100%; height: 700px; border: 2px solid #007bff; border-radius: 8px;"></iframe>', elem_id="latex_iframe")

        # 예제 이미지를 입력으로 하는 Examples 컴포넌트 추가
        examples = gr.Examples(examples=[["ko.png"], ["en.png"]], inputs=image_input, fn=process_and_output, outputs=outputs)
        
        def process_and_output(image):
            latex_result = get_latex_from_image_all_formats(image)
            text_result = latex_result.get("text", "No result")
            return text_result
        
        submit_button.click(fn=process_and_output, inputs=image_input, outputs=outputs)

    return demo

if __name__ == "__main__":
    app = build_gradio_app()
    app.launch()