import streamlit as st
import time

st.set_page_config(page_icon='🧪', page_title='ViQAG for Vietnamese Education', layout='wide', initial_sidebar_state="collapsed")

with open(r"./static/styles.css") as f:
    st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)

st.markdown(f"""
    <div class=logo_area>
        <img src="./app/static/AlphaEdu_logo_trans.png"/>
    </div>
    """, unsafe_allow_html=True)
st.markdown("<h1 style='text-align: center;'>ViQAG: An Automate Question Answer Generation for Vietnamese Education</h1>", unsafe_allow_html=True)

col_1, col_2, col_3, col_4 = st.columns(spec=[1, 1, 3, 4])

col_1.markdown("<h8 style='text-align: left; font-weight: normal'>Select your subject:</h8>", unsafe_allow_html=True)
subject = col_1.selectbox(label='Select your subject:', options=['Biology', 'Civic Education', 'Geography', 'History'], label_visibility='collapsed')

col_2.markdown("<h8 style='text-align: left; font-weight: normal'>Select your grade:</h8>", unsafe_allow_html=True)
grade = col_2.selectbox(label='Select your grade:', options=['Grade 10', 'Grade 11', 'Grade 12'], label_visibility='collapsed')

col_3.markdown("<h8 style='text-align: left; font-weight: normal'>Select your lesson:</h8>", unsafe_allow_html=True)
section = col_3.selectbox(label='Select your lesson:', options=['Bài 1: Nguyễn Trường Phúc đẹp trai nhất thế giới', 'Bài 2: Nguyễn Trường Phúc đẹp trai nhất thế giới', 'Bài 3: Nguyễn Trường Phúc đẹp trai nhất thế giới'], label_visibility='collapsed')

col_4.markdown("<h8 style='text-align: left; font-weight: normal'>Select your section:</h8>", unsafe_allow_html=True)
lesson = col_4.selectbox(label='Select your section:', options=['I. Tiểu sử về Nguyễn Trường Phúc', 'II. Sự nghiệp của Nguyễn Trường Phúc', 'III. Các giải thưởng cao quý của Nguyễn Trường Phúc'], label_visibility='collapsed')

col_11, col_21 = st.columns(spec=[8, 2])
col_11.markdown("<h8 style='text-align: left; font-weight: normal'>Paragraph related:</h8>", unsafe_allow_html=True)
col_11.text_area(label='Paragraph related', label_visibility='collapsed', height=300, value='''paragraph,prediction,q_fluency,q_clarity,q_conciseness,qa_relevance,qa_consistency,qa_answer_correctness,qa_answer_consistency
                                                            "ADN có chức năng mang, bảo quản và truyền đạt thông tin di truyền. Thông tin di truyền được lưu trữ trong phân tử ADN dưới dạng số lượng, thành phần và trật tự các nucleotide. Trình tự các nucleotide trên ADN làm nhiệm vụ mã hóa cho trình tự các axit amin trong chuỗi polypeptide (protein). Các protein lại cấu tạo nên các tế bào và do vậy quy định các đặc điểm của cơ thể sinh vật. Như vậy, các thông tin trên ADN có thể quy định tất cả các đặc điểm của cơ thể sinh vật. Thông tin di truyền trên phân tử ADN được bảo quản rất chặt chẽ. Những sai sót trên phân tử ADN hầu hết đều được hệ thống các enzyme sửa sai trong tế bào sửa chữa. Thông tin trên ADN được truyền từ tế bào này sang tế bào khác nhờ sự nhân đôi ADN trong quá trình phân bào. Thông tin di truyền trên ADN (gen) còn được truyền từ ADN - ARN - protein thông qua các quá trình phiên mã và dịch mã.

                                                            ",": Xin phát triển một số cặp câu hỏi và câu trả lời tương ứng với đoạn văn bẳng trong đoạn văn sau. ADN có chức năng mang, bảo quản và truyền đạt thông tin di truyền. Thông tin di truyền được lưu trữ trong phân tử ADN dưới dạng số lượng, thành phần và trật tự các nucleotide. Trình tự các nucleotide trên ADN làm nhiệm vụ mã hóa cho trình tự các axit amin trong chuỗi polypeptide (protein). Các protein lại cấu tạo nên các tế bào và do vậy quy định các đặc điểm của cơ thể sinh vật. Như vậy, các thông tin trên ADN có thể quy định tất cả các đặc điểm của cơ thể sinh vật. Thông tin di truyền trên phân tử ADN được bảo quản rất chặt chẽ. Những sai sót trên phân tử ADN hầu hết đều được hệ thống các enzyme sửa sai trong tế bào sửa chữa. Thông tin trên ADN được truyền từ tế bào này sang tế bào khác nhờ sự nhân đôi ADN trong quá trình phân bào. Thông tin di truyền trên ADN (gen) còn được truyền từ ADN - ARN - protein thông qua các quá trình phiên mã và dịch mã.''')

col_21.markdown("<h8 style='text-align: left; font-weight: normal'>Choose question generation modes:</h8>", unsafe_allow_html=True)
col_21.checkbox(label='Question Answer Generation')
col_21.checkbox(label='Multiple Choice Question Generation (Coming soon)', disabled=True)
col_21.checkbox(label='Fill-in-the-Blank Question Generation (Coming soon)', disabled=True)

col_21.markdown("<h8 style='text-align: left; font-weight: normal'>Options:</h8>", unsafe_allow_html=True)
btn_show_answer = col_21.toggle(label='Show the answers')

btn_generate = col_21.button(label='Generate questions', use_container_width=True)

if btn_generate:
    with st.spinner(text='Generating...'):
        time.sleep(5)
    
    st.markdown("<h8 style='text-align: left; font-weight: normal'>Your questions and answers has been generated:</h8>", unsafe_allow_html=True)
    output = '''question: <question_1>, answer: <answer_1> [SEP] \nquestion: <question_2>, answer: <answer_2> [SEP] \nquestion: <question_3>, answer: <answer_3> [SEP] \nquestion: <question_4>, answer: <answer_4> [SEP] \nquestion: <question_5>, answer: <answer_5> [SEP]\nquestion: <question_6>, answer: <answer_6> [SEP]\nquestion: <question_7>, answer: <answer_7> [SEP]\nquestion: <question_8>, answer: <answer_8> [SEP]\nquestion: <question_9>, answer: <answer_9> [SEP]\nquestion: <question_10>, answer: <answer_10> [SEP]'''
    st.code(body=output, language='wiki')