import base64
from dash import html

help_intro = html.Div([
    'KNS 레벨업 잉글리시는 원래 2022년 말부터 spaCy를 비롯한 여러 인공지능 라이브러리와 구글 클라우드 플랫폼의 기능들을 이용하여 만들어졌습니다.',
    html.Br(),
    html.Br(),
    '2023년 초에 GPT-3를 도입했고 2023년 말부터는 더 많은 기능을 점진적으로 GPT API로 대체해 왔습니다.',
    html.Br(),
    "현재는 중요한 기능들에 GPT-4 및 교육적으로 미세조정된 GPT-3.5가 도입되어 있으며, 미세조정은 ",
    html.A("트레인크래프터", href="https://train.knsedu.app", target="_blank", rel="noopener noreferrer"),
    "를 통해 합니다.",
    html.Br(),
    html.Br(),
    "- 단계별 제품들이 있으며, 누구나 영어 공부 목적으로 무료로 사용할 수 있는 베이식 버전도 있습니다."
], className='serif')

help_play = '''먼저, (US SPEAK) 또는 (GB SPEAK) 버튼을 누르세요.

딥마인드가 개발한 웨이브넷에서 학습되어 제공되는 미국인과 영국인 발음으로 내용을 들으실 수 있습니다.

특정 위치로 가서 반복해서 들을 수 있고 볼륨과 빠르기를 조정할 수 있습니다.

현재 듣고 있는 소리 파일을 mp3 형태로 다운로드해서 보관할 수 있습니다.'''

help_comprehension = '''(GOOGLE E한) 버튼을 누르면 구글 영한번역이 제공됩니다.

(GPT E한) 버튼을 누르면 OpenAI GPT 4의 영한번역이 제공됩니다.

스스로 학습할 텍스트를 입력해도 되고 편집할 수도 있습니다.
        
주어진 텍스트에 기반한 QUIZ와 학습자료를 만들어 드립니다.

단어와 문법, 독해와 추론에 해당하는 문제들을 풀어 보세요.

텍스트에서 무엇을 공부할 것인지 생각하고 스스로 영어로 답해 보세요. 독해 실력이 늘어납니다.

'''

def manual():
    card_header = html.Div('HELP', className='card-header')
    card_subtitle0 = html.Div(
        className='serif',
        style={'white-space': 'pre-wrap'},
        children=help_intro
    )

    card_title = html.H5(className='card-subtitle text-muted mt-3', children='Listening')
    card_subtitle = html.Div(
        className='serif',
        style={'white-space': 'pre-wrap'},
        children=help_play
    )
    card_title2 = html.H5(className='card-subtitle text-muted mt-3', children='Reading Comprehension')
    card_subtitle2 = html.Div(
        className='serif',
        style={'white-space': 'pre-wrap'},
        children=help_comprehension
    )
    
    card_body = html.Div([
        card_subtitle0,
        card_title,
        html.Br(),
        card_subtitle,
        html.P(),
        card_title2,
        html.Br(),
        card_subtitle2
    ], className='card-body')

    with open('app/assets/study.svg', 'r') as f:
        svg_file = f.read()

    b64_svg = base64.b64encode(svg_file.encode()).decode()
    svg_element = html.Div(
        html.Img(
            src=f'data:image/svg+xml;base64,{b64_svg}',
            style={'width': '60%', 'display': 'block', 'margin': '0 auto'},
        ), className='mb-3',
    )

    card_footer = html.Div(
        className='card-footer text-muted',
        children=html.Div(
            '''Reading aloud while studying is the best way to learn a language.'''
        )
    )

    card = html.Div(className='card mb-0 py-0', children=[
        card_header, card_body, svg_element, card_footer
    ])
    return html.Div([
        html.Br(),
        html.Br(),
        card,
        html.Br(),
        html.Br()], className='py-1',)