import gradio as gr

css="""
#col-container {max-width: 1400px; margin-left: auto; margin-right: auto;}
"""

# title = """
# <div style="text-align: center;max-width: 1000px;">
#     <h1>Chat with PDF</h1>
#     <p style="text-align: center;">Upload a .PDF from your computer, click the "UPLoad PDF" button,C-V your openai access token, press enter. <br />
#     when everything is ready, you can start asking questions about the pdf ;)</p>
#     <a style="display:inline-block; margin-left: 1em" href="https://huggingface.co/spaces/lei0lei/chat-pdf?duplicate=true"><img src="https://img.shields.io/badge/-Duplicate%20Space%20to%20skip%20the%20queue-blue?labelColor=white&style=flat&logo=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAP5JREFUOE+lk7FqAkEURY+ltunEgFXS2sZGIbXfEPdLlnxJyDdYB62sbbUKpLbVNhyYFzbrrA74YJlh9r079973psed0cvUD4A+4HoCjsA85X0Dfn/RBLBgBDxnQPfAEJgBY+A9gALA4tcbamSzS4xq4FOQAJgCDwV2CPKV8tZAJcAjMMkUe1vX+U+SMhfAJEHasQIWmXNN3abzDwHUrgcRGmYcgKe0bxrblHEB4E/pndMazNpSZGcsZdBlYJcEL9Afo75molJyM2FxmPgmgPqlWNLGfwZGG6UiyEvLzHYDmoPkDDiNm9JR9uboiONcBXrpY1qmgs21x1QwyZcpvxt9NS09PlsPAAAAAElFTkSuQmCC&logoWidth=14" alt="Duplicate Space"></a>
# </div>
# """
title = """
<div style="text-align: center;max-width: 1200px;">
    <h1>Chat with PDF</h1>
</div>
"""


def toggle_sidebar(state):
    '''
    sidebar状态转换
    '''
    state = not state
    return gr.update(visible = state), state


# Gradio application setup
def _create_demo():
    with gr.Blocks(css=css,
        theme = "Soft"  # Change the theme here
        ) as demo:
        
        with gr.Row():
            with gr.Column(elem_id="col-sidebar",scale=0.1,visible=False) as sidebar:
                nothing = gr.Button('This is sidebar')
        # Create a Gradio block
            with gr.Column(elem_id="col-container"):
                gr.HTML(title)
                
                with gr.Column():
                    with gr.Row():
                        with gr.Column(scale=0.8):
                            api_key = gr.Textbox(
                                placeholder='Enter your OpenAI API key',
                                show_label=False,
                                interactive=True,
                            container=False)
                            
                        with gr.Column(scale=0.2):
                            change_api_key = gr.Button('Update API Key',interactive = False)

                    with gr.Row():
                        with gr.Column(scale=1):
                            upload_btn = gr.UploadButton("📁 Upload PDF", file_types=[".pdf"],scale=0.9)
                            sidebar_state = gr.State(False)
                            toggle_sidebar_btn = gr.Button("🫵")
                            toggle_sidebar_btn.click(toggle_sidebar, [sidebar_state], [sidebar, sidebar_state])


                    with gr.Row():
                        with gr.Column(elem_id='pdf-preview-container'):
                            show_img = gr.Image(label='PDF Preview', height=680)

                        with gr.Column(elem_id='chatbot-container'):
                            with gr.Row():
                                chatbot = gr.Chatbot(value=[], elem_id='chatbot', height=625)
                            with gr.Row():
                                
                                text_input = gr.Textbox(
                                        show_label=False,
                                        placeholder="Ask your pdf?",
                                    container=False,scale=0.9)

                                
                                submit_btn = gr.Button('💭',scale=0.1)


                return demo, api_key, change_api_key, chatbot, show_img, text_input, submit_btn, upload_btn

smbtn_css = """
#small_btn {
    margin: 0.6em 0em 0.55em 0;
    max-width: 1em;
    min-width: 1em !important;
    height: 1em;
}
"""
def create_demo():
    '''
    Interface with no api component
    '''
    with gr.Blocks(css=css,
        theme = "Soft"  # Change the theme here
        ) as demo:
        
        with gr.Row():
            with gr.Column(elem_id="col-sidebar",scale=0.1,visible=False) as sidebar:
                nothing = gr.Button('This is sidebar')
        # Create a Gradio block
            with gr.Column(elem_id="col-container"):
                
                gr.HTML(title)
                        
                with gr.Row():  
                            sidebar_state = gr.State(False)
                            toggle_sidebar_btn = gr.Button(">>",size='sm',scale=1)
                            toggle_sidebar_btn.click(toggle_sidebar, [sidebar_state], [sidebar, sidebar_state])
                        
                            upload_btn = gr.UploadButton("📁 Upload PDF", file_types=[".pdf"],scale=9)
                
                             
                with gr.Column():
                    # with gr.Row():
                    #     with gr.Column(scale=0.8):
                    #         api_key = gr.Textbox(
                    #             placeholder='Enter your OpenAI API key',
                    #             show_label=False,
                    #             interactive=True,
                    #         container=False)
                            
                    #     with gr.Column(scale=0.2):
                    #         change_api_key = gr.Button('Update API Key',interactive = False)

                    


                    with gr.Row():
                        with gr.Column(elem_id='pdf-preview-container'):
                            show_img = gr.Image(label='PDF Preview', height=680)

                        with gr.Column(elem_id='chatbot-container'):
                            with gr.Row():
                                chatbot = gr.Chatbot(value=[], elem_id='chatbot', height=625)
                            with gr.Row():
                                
                                text_input = gr.Textbox(
                                        show_label=False,
                                        placeholder="Ask your pdf?",
                                    container=False,scale=8)

                                
                                submit_btn = gr.Button('💭',scale=1)


                return demo, chatbot, show_img, text_input, submit_btn, upload_btn


if __name__ == '__main__':
    demo, api_key, change_api_key, chatbot, show_img, text_input, submit_btn, upload_btn = create_demo()
    demo.queue()
    demo.launch()