pages/User manual.py

import streamlit as st
import pandas as pd

st.set_page_config(layout='wide')
st.markdown("<h1 style='text-align: center;'>User manual</h1>", unsafe_allow_html=True)

st.write()

st.markdown("<h6 style='text-align: justify;'>We built a demo system for the problem of classifying Vietnamese women's bras. To use our demo system, you need to determine how many measurements you can feed to our prediction model. We provide 3 options for you to provide measurements for the decision-making model, including: 6 measurements, 8 measurements and 21 measurements.</h6>", unsafe_allow_html=True)
col_11, col_21, col_31 = st.columns([1, 1, 1])

with col_11:
    st.markdown("<h6 style='text-align: justify;'>1. Upper bust circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>4. Size difference</h6>", unsafe_allow_html=True)
with col_21:
    st.markdown("<h6 style='text-align: justify;'>2. Bust circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>5. Volume of right breast</h6>", unsafe_allow_html=True)
with col_31:
    st.markdown("<h6 style='text-align: justify;'>3. Chest circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>6. Volume of left breast</h6>", unsafe_allow_html=True)

st.markdown("<h6 style='text-align: justify;'>With 8 input measurements, you need to provide us with the following measurements:</h6>", unsafe_allow_html=True)
col_12, col_22, col_32 = st.columns([1, 1, 1])

with col_12:
    st.markdown("<h6 style='text-align: justify;'>1. Volume of right breast</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>4. Bust circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>7. Inner right breast curve</h6>", unsafe_allow_html=True)
with col_22:
    st.markdown("<h6 style='text-align: justify;'>2. Size difference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>5. Upper bust circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>8. Chest circumference</h6>", unsafe_allow_html=True)
with col_32:
    st.markdown("<h6 style='text-align: justify;'>3. Outer right breast curve</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: justify;'>6. Outer left breast curve</h6>", unsafe_allow_html=True)

st.markdown("<h6 style='text-align: justify;'>With 21 input measurements, you need to provide us with the following measurements:</h6>", unsafe_allow_html=True)
col_13, col_23, col_33 = st.columns([1, 1, 1])

with col_13:
    st.markdown("<h6 style='text-align: left;'>1. Height</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>4. Upper bust circumference</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>7. Distance between nipple points</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>10. Inner right breast curve</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>13. Left breast curve </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>16. Lower left breast projection</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>19. Size difference</h6>", unsafe_allow_html=True)
with col_23:
    st.markdown("<h6 style='text-align: left;'>2. Weight</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>5. Bust circumference </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>8. Outer right breast curve </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>11. Inner left breast curve</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>14. Upper breast projection</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>17. Distance from sternum to right nipple point</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>20. Volume of right breast</h6>", unsafe_allow_html=True)
with col_33:
    st.markdown("<h6 style='text-align: left;'>3. BMI</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>6. Chest circumference </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>9. Outer left breast curve </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>12. Right breast curve </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>15. Lower right breast projection</h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>18. Distance from sternum to left nipple point </h6>", unsafe_allow_html=True)
    st.markdown("<h6 style='text-align: left;'>21. Volume of left breast</h6>", unsafe_allow_html=True)

st.markdown("<h6 style='text-align: justify;'> After you finish entering the input measurements, click on the 'Predict' button, our model will return the results corresponding to the input data. Additionally, you can use our available measurements samples in the 'Measurement sample options' section.</h6>", unsafe_allow_html=True)
st.markdown("<h6 style='text-align: justify;'> Detailed information about the parameters included in the demo system is explained in more detail in the section below.</h6>", unsafe_allow_html=True)

st.markdown("<h1 style='text-align: center;'>Detail of measurements</h1>", unsafe_allow_html=True)

df = pd.read_csv('measurement_details.csv', sep=';', index_col=False)
st.dataframe(data=df, use_container_width=True, height=773)

st.markdown("<h3 style='text-align: center;'>Figure references</h3>", unsafe_allow_html=True)

col_1, col_2, col_3, col_4, col_5 = st.columns([1, 1, 1, 1, 1])
with col_1:
    st.image(image='./images/1.png', caption='Figure 1', use_column_width=True)
    st.image(image='./images/6.png', caption='Figure 6', use_column_width=True)

with col_2:
    st.image(image='./images/2.png', caption='Figure 2', use_column_width=True)
    st.image(image='./images/7.png', caption='Figure 7', use_column_width=True)

with col_3:
    st.image(image='./images/3.png', caption='Figure 3', use_column_width=True)
    st.image(image='./images/8.png', caption='Figure 8', use_column_width=True)
    st.image(image='./images/11.png', caption='Figure 11', use_column_width=True)
with col_4:
    st.image(image='./images/4.png', caption='Figure 4', use_column_width=True)
    st.image(image='./images/9.png', caption='Figure 9', use_column_width=True)

with col_5:
    st.image(image='./images/5.png', caption='Figure 5', use_column_width=True)
    st.image(image='./images/10.png', caption='Figure 10', use_column_width=True)