import time

import streamlit as st

st.set_page_config(layout='wide')

with st.spinner('Lung Cancer  is in force...'):
    time.sleep(1.8)

col_1, col_2 = st.columns([2.6, 5])

with col_1:
    st.image(f'resources_img/vita.jpg', caption='Hệ thống chẩn đoán bệnh phổi sử dụng trí tuệ nhân tạo')

with col_2:
    st.markdown("<h1 style='text-align: center;'>HƯỚNG DẪN SỬ DỤNG</h1>", unsafe_allow_html=True)
    st.info('**1.Chức năng Scan**')
    st.write("Để sử dụng tính năng Scan, bạn hãy chọn mục **🔬 Scan** trên thanh chức năng bên trái của màn hình.")
    st.image('./resources_img/guide1.jpg', caption='Hình 1: Hướng dẫn sử dụng tiện ích Scan ảnh phổi (1)')
    st.write("Tiếp đến, ở phía dưới bên trái màn hình có phần **Upload your scan**, tại đây, bạn có thể chọn đầu vào tiện ích Scan. "
             "Đầu vào được cho phép gồm: **Ảnh**, được thể hiện trong kí hiệu (1) của hình 2 dưới đây.")
    st.image('./resources_img/guide2.png', caption='Hình 2: Hướng dẫn sử dụng tiện ích Scan ảnh phổi (2)')
    st.write("Đường bao màu (tím) trong hình 2 được sử dụng để tải lên ảnh Scan phổi của bệnh nhân, khi tải lên thành công ảnh sẽ hiển thị ở phần đường bao màu (xanh lá cây)")
    st.write("Nếu còn chưa hiểu cách sử dụng, hãy chọn '**Hướng dẫn**' trong hộp đánh dấu màu (cam) của hình 2. Trong phần này sẽ mô tả các bước có thể làm việc với phần mềm.")

    st.info('**2. Phân loại các loại bệnh phổi**')
    st.write("Để sử dụng chức năng phân loại các loại bệnh phổi, bạn hãy chọn vào mục '**⭐ Thoracic Classification**' trên thanh chức năng phía bên trái màn hình. ")
    st.image('./resources_img/guide3.png', caption='Hình 3: Hướng dẫn sử dụng chức năng phân loại các loại bệnh phổi')
    st.write("Tiếp đến, ở phía dưới bên trái màn hình có phần **Upload your scan**, tại đây, bạn có thể chọn đầu vào tiện ích Scan. "
        "Đầu vào được cho phép gồm: **Ảnh**, được thể hiện trong kí hiệu (1) của hình 2 dưới đây.")
    st.write("Sau khi duyệt và chọn ảnh cần hiển thị. Nó sẽ hiển thị hiển thị cho chúng ta ảnh ở góc trái màn hình.")
    st.image('./resources_img/guide3_1.png', caption='Hình 3.1: Các chức năng phân loại các loại bệnh phổi')

    st.write("**2.1. Dự đoán bệnh phổi**")
    st.write("Trong giao diện chức năng. Sẽ có 5 chức năng để bạn làm việc bao gồm **Predict All Scans** (1), **Cam Visualization(2), **Segmenation Visualization for Lung** (3), **View Report** (4), **Download Report** (5).")
    st.write("_**Lưu ý: Phải chọn Predict All Scan trước khi dùng các chức năng khác**_")
    st.write("Bước tiếp theo, bạn cần chọn Predict All Scans. Sau khi chọn **Predict All Scans**, hệ thống sẽ tự động tính toán và lấy các kết quả đầu ra.")
    st.image('./resources_img/guide4.png', caption='Hình 4: Hướng dẫn sử dụng dự đoán bệnh phổi')
    st.write("Sau khi chương trình chạy thành công, nó sẽ hiện thông báo màu xanh để chúng ta biết" )

    st.write("**2.2. CAM Visualization**")
    st.write("Để xem ảnh CAM( Class Activation Map), bạn chọn chức năng **CAM Visualization**")
    st.write("Sau đó bạn có thể lướt xuống dưới để xem ảnh")
    st.image('./resources_img/guide5.png', caption='Hình 5: Hướng dẫn sử dụng chức năng Sửa thông tin định danh')
    st.write("Bạn có thể phóng to và thu nhỏ ảnh bằng cách di chuột vào ảnh và cuộn chuột")

    st.write("**2.3. Segmentation Visualization for Lung**")
    st.write("Để xem ảnh Segmentation, bạn chọn chức năng **Segmentation Visualization for Lung**")
    st.write("Sau đó bạn có thể lướt xuống dưới để xem ảnh")
    st.image('./resources_img/guide6.png', caption='Hình 6: Hướng dẫn sử dụng chức năng Segmentation Visualization for Lung')
    st.write("Bạn có thể phóng to và thu nhỏ ảnh bằng cách di chuột vào ảnh và cuộn chuột")

    st.write("**2.4. Xem báo cáo**")
    st.write("Để xem ảnh báo cáo về khả năng nhiễm bệnh, bạn chọn chức năng **View Report**")
    st.write("Sau đó bạn có thể lướt xuống dưới để xem bảng thông tin về khả năng nhiễm bệnh.")
    st.image('./resources_img/guide7.png',
             caption='Hình 7: Hướng dẫn sử dụng chức năng xem báo cáo')

    st.write("**2.5. Tải báo cáo**")
    st.write("Để tải báo cáo dưới dạng PDF về khả năng nhiễm bệnh, bạn chọn chức năng **View Report**")
    st.write("Sau đó bạn có thể lướt xuống dưới để điền một số trường thông tin liên quan tới bệnh nhân. Sau đó chọn Submit báo cáo sẽ tự tải về máy dưới dạng PDF")
    st.image('./resources_img/guide8.png',
             caption='Hình 7: Hướng dẫn sử dụng chức năng tải và in báo cáo')

    st.info('**4. Chức năng x3D Lung Viewer**')
    st.write("There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration "
             "in some form, by injected humour, or randomised words which don't look even slightly believable. If you are"
             " going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the"
             " middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, "
             "making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined "
             "with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem "
             "Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.")