""" BOS AI Training Platform A guided, module based course on using AI at BOS Security, delivered as a HuggingFace Gradio Space. Content: modules.py (lessons and takeaways), quizzes.py (knowledge checks), teams.py (tools by team), figures.py (SVG diagrams). Logo: logo.png. Pages: 0 = Overview, 1..N = modules, N+1 = Tools by team. Progress is kept per browser session (gr.State), not stored server side. """ import base64 import html import re from pathlib import Path import gradio as gr from modules import MODULES, IT_HELP from quizzes import QUIZZES from teams import TEAMS, TEAMS_INTRO from figures import FIGURES, TEAM_FIGURE from videos import VIDEOS, LINKS, TEAM_LINKS # Palette sampled from the BOS logo, teal as the single accent BLUE = "#15516B" BLUE_DEEP = "#0E3A4D" TEAL = "#13A89E" TEAL_DEEP = "#0E7F78" INK = "#1B2430" MUTED = "#61707E" PAPER = "#FFFFFF" WASH = "#F3F6F9" RULE = "#E1E8ED" MISS = "#C0563A" LOGO_PATH = Path(__file__).with_name("logo.png") LOGO_SRC = "" if LOGO_PATH.exists(): LOGO_SRC = "data:image/png;base64," + base64.b64encode(LOGO_PATH.read_bytes()).decode() N = len(MODULES) HOME, TEAM_PAGE = 0, N + 1 MAXQ = max(len(q) for q in QUIZZES) TOTAL_Q = sum(len(q) for q in QUIZZES) def _minutes(m): words = sum(len(re.sub(r"<[^>]+>", " ", s["body"]).split()) for s in m["sections"]) return max(3, round(words / 200) + 1) MINUTES = [_minutes(m) for m in MODULES] CSS = f""" :root {{ --blue: {BLUE}; --blue-deep: {BLUE_DEEP}; --teal: {TEAL}; --teal-deep: {TEAL_DEEP}; --ink: {INK}; --muted: {MUTED}; --paper: {PAPER}; --wash: {WASH}; --rule: {RULE}; --miss: {MISS}; --shadow: 0 1px 2px rgba(14,58,77,.05), 0 8px 24px -12px rgba(14,58,77,.18); }} * {{ font-family: Arial, Helvetica, sans-serif !important; }} body, .gradio-container {{ background: var(--wash) !important; color: var(--ink); }} .gradio-container {{ max-width: 1320px !important; margin: 0 auto !important; padding: 18px 22px 64px !important; }} footer {{ display: none !important; }} .gradio-container .block, .gradio-container .form {{ box-shadow: none; }} @keyframes rise {{ from {{ opacity: 0; transform: translateY(8px); }} to {{ opacity: 1; transform: none; }} }} @media (prefers-reduced-motion: reduce) {{ *, *::before, *::after {{ animation: none !important; transition: none !important; }} }} /* Top bar */ .topbar {{ display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; padding: 14px 22px; box-shadow: var(--shadow); }} .topbar .brand {{ display: flex; align-items: center; gap: 18px; }} .topbar img {{ height: 46px; width: auto; display: block; }} .topbar .divider {{ width: 1px; height: 38px; background: var(--rule); }} .topbar h1 {{ margin: 0; font-size: 19px; font-weight: 700; color: var(--blue); letter-spacing: -0.01em; }} .topbar .tag {{ margin: 2px 0 0; font-size: 13px; color: var(--muted); }} .topbar .right {{ display: flex; align-items: center; gap: 12px; }} .topbar .tool {{ font-size: 13px; color: var(--muted); padding: 8px 14px; border: 1px solid var(--rule); border-radius: 999px; background: var(--wash); }} .topbar .tool b {{ color: var(--blue); }} .rail .pct {{ margin: 12px 4px 0; text-align: center; font-size: 13px; font-weight: 700; color: var(--teal-deep); padding: 9px 14px; border-radius: 10px; background: #E7F6F4; }} .track {{ height: 5px; background: var(--rule); border-radius: 999px; overflow: hidden; margin: 12px 6px 6px; }} .track div {{ height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-deep)); border-radius: 999px; transition: width .45s cubic-bezier(.2,.8,.2,1); }} /* Rail */ .rail {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow); padding: 12px 10px 14px !important; position: sticky; top: 16px; align-self: flex-start; gap: 3px !important; }} .rail .rail-head {{ padding: 6px 12px 10px; font-size: 12.5px; color: var(--muted); }} .rail .rail-sub {{ padding: 14px 12px 6px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--rule); margin-top: 8px; }} .rail button {{ width: 100%; justify-content: flex-start !important; text-align: left !important; padding: 11px 12px !important; margin: 0 !important; border-radius: 10px !important; font-size: 14.5px !important; line-height: 1.35 !important; font-weight: 400 !important; white-space: normal !important; transition: background .15s ease, color .15s ease, transform .1s ease; }} .rail button.secondary {{ background: transparent !important; border: 1px solid transparent !important; color: var(--ink) !important; box-shadow: none !important; }} .rail button.secondary:hover {{ background: var(--wash) !important; }} .rail button.primary {{ background: #E7F6F4 !important; border: 1px solid #C6EBE7 !important; color: var(--blue) !important; font-weight: 700 !important; box-shadow: none !important; }} .rail button.stop {{ background: transparent !important; border: 1px solid transparent !important; color: var(--teal-deep) !important; box-shadow: none !important; }} .rail button.stop:hover {{ background: var(--wash) !important; }} .rail button:active {{ transform: scale(.985); }} .rail button:focus-visible {{ outline: 2px solid var(--teal) !important; outline-offset: 2px; }} /* Cards shared */ .card {{ background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); animation: rise .3s ease both; }} /* Overview */ .hero {{ display: grid; grid-template-columns: 1fr 220px; gap: 32px; align-items: center; padding: 44px 52px; background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 55%, #17667f 100%); color: #fff; border-color: transparent; }} .hero .eyebrow {{ font-size: 13px; color: #A9D8D3; font-weight: 700; margin: 0 0 10px; }} .hero h2 {{ font-size: 40px; line-height: 1.08; margin: 0 0 14px; letter-spacing: -0.02em; color: #fff; }} .hero p {{ font-size: 17px; line-height: 1.55; color: #D5E3EA; margin: 0 0 22px; max-width: 58ch; }} .hero .stats {{ display: flex; gap: 26px; flex-wrap: wrap; }} .hero .stat b {{ display: block; font-size: 22px; color: #fff; }} .hero .stat span {{ font-size: 13px; color: #A9C4D0; }} .hero .ring {{ display: flex; flex-direction: column; align-items: center; gap: 10px; }} .hero .ring svg {{ width: 160px; height: 160px; }} .hero .ring .label {{ font-size: 13px; color: #A9D8D3; }} .resume {{ display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 24px; margin-top: 16px; border-left: 5px solid var(--teal); }} .resume .t {{ font-size: 13px; color: var(--muted); margin: 0 0 3px; }} .resume .n {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0; }} .resume button {{ background: var(--teal); color: #fff; border: none; border-radius: 10px; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .15s ease, transform .1s ease; }} .resume button:hover {{ background: var(--teal-deep); }} .resume button:active {{ transform: scale(.98); }} .grid-head {{ display: flex; align-items: baseline; justify-content: space-between; margin: 30px 4px 14px; }} .grid-head h3 {{ font-size: 20px; color: var(--blue); margin: 0; }} .grid-head span {{ font-size: 13.5px; color: var(--muted); }} .mgrid {{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }} .mcard {{ position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px; background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); cursor: pointer; text-align: left; font: inherit; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; animation: rise .3s ease both; }} .mcard:hover {{ transform: translateY(-3px); border-color: #BFE3DF; box-shadow: 0 2px 4px rgba(14,58,77,.05), 0 16px 32px -14px rgba(14,58,77,.25); }} .mcard:focus-visible {{ outline: 2px solid var(--teal); outline-offset: 2px; }} .mcard .row {{ display: flex; align-items: center; justify-content: space-between; }} .mcard .num {{ width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); color: #fff; font-weight: 700; font-size: 15px; }} .mcard.done .num {{ background: var(--teal); }} .mcard .status {{ font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--wash); color: var(--muted); }} .mcard.done .status {{ background: #E7F6F4; color: var(--teal-deep); }} .mcard.required .status.req {{ background: var(--blue); color: #fff; }} .mcard h4 {{ margin: 6px 0 0; font-size: 18px; line-height: 1.25; color: var(--blue); letter-spacing: -0.01em; }} .mcard p {{ margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); flex: 1; }} .mcard .foot {{ display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--rule); }} .mcard .foot b {{ color: var(--teal-deep); font-weight: 700; }} .mcard.ref {{ background: linear-gradient(180deg, #F7FBFB, #EEF7F6); }} /* Reader */ .reader {{ padding: 46px 64px 38px; }} .reader .meta {{ display: flex; align-items: center; gap: 12px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }} .pill {{ display: inline-block; padding: 4px 11px; border-radius: 999px; font-weight: 700; font-size: 12px; background: #E7F6F4; color: var(--teal-deep); }} .pill.required {{ background: var(--blue); color: #fff; }} .pill.done {{ background: var(--teal); color: #fff; }} .reader h2 {{ font-size: 36px; line-height: 1.1; color: var(--blue); margin: 0 0 12px; letter-spacing: -0.02em; }} .reader .summary {{ font-size: 18.5px; color: var(--muted); margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); max-width: 62ch; line-height: 1.45; }} .reader h3 {{ font-size: 21px; color: var(--blue); margin: 38px 0 12px; letter-spacing: -0.01em; }} .reader h3:first-of-type {{ margin-top: 0; }} .reader p {{ font-size: 17px; line-height: 1.68; margin: 0 0 15px; max-width: 68ch; color: var(--ink); }} .reader p b {{ color: var(--blue); }} .fig {{ margin: 24px 0 30px; padding: 24px 26px 16px; background: var(--wash); border: 1px solid var(--rule); border-radius: 14px; max-width: 760px; }} .fig svg {{ width: 100%; height: auto; display: block; }} .fig figcaption {{ margin-top: 12px; font-size: 13.5px; color: var(--muted); line-height: 1.45; }} .takeaways {{ margin-top: 44px; padding: 26px 30px; border-radius: 14px; background: linear-gradient(135deg, #EEF7F6, #F7FBFB); border: 1px solid #CFEAE7; max-width: 760px; }} .takeaways h3 {{ margin: 0 0 14px !important; font-size: 17px !important; color: var(--teal-deep) !important; }} .takeaways ol {{ margin: 0; padding-left: 0; list-style: none; counter-reset: t; }} .takeaways li {{ counter-increment: t; display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; font-size: 16px; line-height: 1.55; margin-bottom: 10px; color: var(--ink); }} .takeaways li::before {{ content: counter(t); width: 26px; height: 26px; border-radius: 8px; background: var(--teal); color: #fff; font-weight: 700; font-size: 13px; display: grid; place-items: center; margin-top: 1px; }} .help {{ margin-top: 22px; padding: 18px 22px; background: var(--wash); border-radius: 12px; border-left: 4px solid var(--blue); max-width: 760px; }} .help p {{ margin: 0; max-width: none; font-size: 15px; }} .help p b {{ color: var(--blue); }} /* Watch panel */ .watch {{ margin: 0 0 36px; padding: 22px 24px 20px; background: linear-gradient(180deg, #F7FBFB, var(--wash)); border: 1px solid var(--rule); border-radius: 14px; max-width: 760px; }} .watch .wh {{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }} .watch .wh h3 {{ margin: 0 !important; font-size: 17px !important; color: var(--teal-deep) !important; }} .watch .wh span {{ font-size: 13px; color: var(--muted); }} .watch .frame {{ position: relative; width: 100%; padding-top: 56.25%; border-radius: 12px; overflow: hidden; background: #0E3A4D; box-shadow: 0 10px 28px -14px rgba(14,58,77,.45); }} .watch .frame iframe {{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }} .watch .wt {{ margin: 14px 0 4px; font-size: 16px; font-weight: 700; color: var(--blue); }} .watch .wb {{ margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink); max-width: none; }} .watch .ws {{ margin: 8px 0 0; font-size: 12.5px; color: var(--muted); max-width: none; }} .watch .ws a {{ color: var(--teal-deep); text-decoration: none; font-weight: 700; }} .watch + .watch {{ margin-top: -18px; }} /* Further learning cards */ .more {{ margin-top: 26px; max-width: 760px; }} .more h3 {{ font-size: 17px !important; color: var(--blue) !important; margin: 0 0 12px !important; }} .more .lgrid {{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }} .more a.lcard {{ display: block; padding: 16px 18px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); text-decoration: none; color: var(--ink); transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }} .more a.lcard:hover {{ border-color: #BFE3DF; transform: translateY(-2px); box-shadow: var(--shadow); }} .more a.lcard .lt {{ font-size: 15px; font-weight: 700; color: var(--blue); margin: 0 0 3px; max-width: none; }} .more a.lcard .lm {{ font-size: 12.5px; color: var(--teal-deep); font-weight: 700; margin: 0 0 8px; max-width: none; }} .more a.lcard .lb {{ font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; max-width: none; }} @media (max-width: 720px) {{ .more .lgrid {{ grid-template-columns: 1fr; }} }} /* Quiz */ .quiz {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow); padding: 30px 40px 28px !important; margin-top: 16px; gap: 4px !important; }} .quiz .qhead {{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }} .quiz .qhead h3 {{ font-size: 21px; color: var(--blue); margin: 0; }} .quiz .qhead span {{ font-size: 13px; color: var(--muted); }} .quiz .qsub {{ color: var(--muted); font-size: 15px; margin: 0 0 8px; max-width: 70ch; }} .quiz, .quiz .block, .quiz .form, .quiz fieldset, .quiz .wrap {{ background: var(--paper) !important; color: var(--ink) !important; }} .quiz .block, .quiz .form {{ border: none !important; box-shadow: none !important; padding: 12px 0 6px !important; margin: 0 !important; }} .quiz fieldset {{ border: none !important; padding: 0 !important; margin: 0 !important; }} .quiz span[data-testid="block-info"], .quiz .block > label > span, .quiz legend {{ font-size: 16.5px !important; font-weight: 700 !important; color: var(--ink) !important; background: transparent !important; margin-bottom: 10px !important; display: block; line-height: 1.4; }} .quiz .wrap {{ display: flex; flex-direction: column; gap: 7px !important; }} .quiz .wrap label {{ display: flex !important; align-items: center; gap: 12px; padding: 12px 15px !important; border: 1px solid var(--rule) !important; border-radius: 10px !important; background: var(--paper) !important; cursor: pointer; font-size: 15px; box-shadow: none !important; transition: border-color .12s ease, background .12s ease, transform .08s ease; }} .quiz .wrap label:hover {{ border-color: var(--teal) !important; background: #FAFDFD !important; }} .quiz .wrap label:active {{ transform: scale(.995); }} .quiz .wrap label.selected {{ border-color: var(--teal) !important; background: #E7F6F4 !important; }} .quiz .wrap label, .quiz .wrap label span, .quiz .wrap label * {{ color: var(--ink) !important; }} .quiz .wrap label.selected span {{ color: var(--blue) !important; font-weight: 700; }} .quiz .wrap label input[type="radio"] {{ appearance: auto !important; -webkit-appearance: radio !important; width: 18px; height: 18px; margin: 0; accent-color: var(--teal); background: #fff !important; border: 1px solid var(--muted) !important; border-radius: 50% !important; box-shadow: none !important; }} .quiz .check {{ background: var(--blue) !important; border: 1px solid var(--blue) !important; color: #fff !important; box-shadow: none !important; border-radius: 10px !important; font-weight: 700 !important; padding: 13px 24px !important; margin-top: 10px; width: auto; transition: background .15s ease, transform .1s ease; }} .quiz .check:hover {{ background: var(--blue-deep) !important; }} .quiz .check:active {{ transform: scale(.98); }} .result {{ margin-top: 14px; animation: rise .25s ease both; }} .result .scorecard {{ display: flex; align-items: center; gap: 18px; padding: 16px 20px; border-radius: 12px; background: var(--wash); margin-bottom: 14px; }} .result .scorecard svg {{ width: 64px; height: 64px; flex: none; }} .result .scorecard .s1 {{ font-size: 18px; font-weight: 700; color: var(--blue); margin: 0 0 2px; }} .result .scorecard .s2 {{ font-size: 14px; color: var(--muted); margin: 0; }} .result .item {{ padding: 14px 16px; border-radius: 10px; margin-bottom: 10px; font-size: 15px; line-height: 1.5; }} .result .item.ok {{ background: #E7F6F4; border-left: 4px solid var(--teal); }} .result .item.miss {{ background: #FBEFEA; border-left: 4px solid var(--miss); }} .result .item p {{ margin: 0 0 6px; }} .result .item p:last-child {{ margin: 0; }} .result .item b {{ color: var(--blue); }} .result .warn {{ color: var(--miss); font-weight: 700; }} /* Tools by team */ .teamwrap .tabs {{ margin-top: 14px; background: var(--paper) !important; border: 1px solid var(--rule) !important; border-radius: 16px !important; box-shadow: var(--shadow); padding: 10px 44px 34px !important; }} .teamwrap .tabs button {{ font-size: 15px !important; font-weight: 700 !important; color: var(--muted) !important; border: none !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; padding: 14px 18px !important; background: transparent !important; box-shadow: none !important; }} .teamwrap .tabs button.selected {{ color: var(--blue) !important; border-bottom-color: var(--teal) !important; }} .teamwrap .tabitem {{ border: none !important; padding: 4px 0 0 !important; background: transparent !important; }} .teamwrap .tabitem h3 {{ font-size: 19px; color: var(--blue); margin: 26px 0 8px; }} .teamwrap .tabitem h3:first-child {{ margin-top: 12px; }} .teamwrap .tabitem p {{ font-size: 16.5px; line-height: 1.65; margin: 0 0 12px; max-width: 72ch; color: var(--ink); }} .teamwrap .tabitem p b {{ color: var(--blue); }} /* Nav */ .navrow {{ margin-top: 14px; align-items: center; }} .navrow button {{ border-radius: 10px !important; font-weight: 700 !important; font-size: 14px !important; padding: 13px 22px !important; transition: background .15s ease, transform .1s ease; }} .navrow button:active {{ transform: scale(.98); }} .navrow .primary {{ background: var(--teal) !important; border: 1px solid var(--teal) !important; color: #fff !important; box-shadow: none !important; }} .navrow .primary:hover {{ background: var(--teal-deep) !important; }} .navrow .secondary {{ background: var(--paper) !important; border: 1px solid var(--rule) !important; color: var(--blue) !important; box-shadow: none !important; }} .navrow .secondary:hover {{ background: var(--wash) !important; }} .progress {{ text-align: center; color: var(--muted); font-size: 14px; }} @media (max-width: 1000px) {{ .mgrid {{ grid-template-columns: repeat(2, 1fr); }} .hero {{ grid-template-columns: 1fr; padding: 32px; }} .hero .ring {{ display: none; }} }} @media (max-width: 720px) {{ .rail {{ position: static; }} .mgrid {{ grid-template-columns: 1fr; }} .reader {{ padding: 28px 22px; }} .quiz {{ padding: 22px 20px !important; }} .teamwrap .tabs {{ padding: 8px 18px 24px !important; }} .reader h2 {{ font-size: 28px; }} .hero h2 {{ font-size: 30px; }} .topbar .divider {{ display: none; }} }} """ FORCE_LIGHT = """ () => { const strip = () => { document.body.classList.remove('dark'); document.documentElement.classList.remove('dark'); document.querySelectorAll('.dark').forEach(el => el.classList.remove('dark')); }; strip(); new MutationObserver(strip).observe(document.body, { attributes: true, attributeFilter: ['class'] }); } """ THEME = gr.themes.Default(primary_hue="teal", neutral_hue="slate").set( body_background_fill=WASH, body_background_fill_dark=WASH, block_background_fill=PAPER, block_background_fill_dark=PAPER, block_label_text_color=INK, block_label_text_color_dark=INK, body_text_color=INK, body_text_color_dark=INK, border_color_primary=RULE, border_color_primary_dark=RULE, checkbox_label_background_fill=PAPER, checkbox_label_background_fill_dark=PAPER, checkbox_label_background_fill_selected="#E7F6F4", checkbox_label_background_fill_selected_dark="#E7F6F4", checkbox_label_text_color=INK, checkbox_label_text_color_dark=INK, checkbox_label_text_color_selected=BLUE, checkbox_label_text_color_selected_dark=BLUE, checkbox_background_color=PAPER, checkbox_background_color_dark=PAPER, checkbox_background_color_selected=TEAL, checkbox_background_color_selected_dark=TEAL, checkbox_border_color=MUTED, checkbox_border_color_dark=MUTED, ) # Rendering helpers def ring(pct: int, size=160, stroke=12, track="rgba(255,255,255,.18)", color=TEAL, text_color="#fff", sub=""): r = (size - stroke) / 2 c = 2 * 3.14159 * r dash = c * pct / 100 sub_el = f'{html.escape(sub)}' if sub else "" return ( f'' f'' f'' f'{pct}%' f"{sub_el}" ) def pct_done(progress: dict) -> int: return round(100 * len(progress) / N) def figure(svg_markup: str, caption: str) -> str: return f'
{svg_markup}
{html.escape(caption)}
' def render_home(progress: dict) -> str: done = len(progress) pct = pct_done(progress) next_idx = next((i for i in range(N) if i not in progress), None) total_min = sum(MINUTES) parts = [f"""

BOS Security company training

Using AI well, and safely, at BOS

Six short modules that build on each other: what AI is, how it works, how to get real results from Claude Enterprise, and where the hard lines on client and company data sit. Each module ends with a knowledge check.

{N}modules
{total_min} mintotal reading
{TOTAL_Q}check questions
{done} of {N}completed
{ring(pct, sub="complete")}Progress this session
"""] if next_idx is not None: m = MODULES[next_idx] label = "Start here" if done == 0 else "Continue where you left off" parts.append(f"""

{label}

Module {next_idx + 1}. {html.escape(m['title'])}

""") else: parts.append("""

All modules completed

You have completed the BOS AI training path. Keep the Tools by team page handy.

""") parts.append(f'

Learning path

Read in order. Each module builds on the one before it.
') for i, m in enumerate(MODULES): is_done = i in progress req = m["depth"].lower() == "required" cls = "mcard" + (" done" if is_done else "") + (" required" if req else "") if is_done: status = f'Scored {progress[i][0]} of {progress[i][1]}' elif req: status = 'Required' else: status = f'{html.escape(m["depth"])}' parts.append(f""" """) parts.append(f"""
""") return "\n".join(parts) def render_module(idx: int, progress: dict) -> str: m = MODULES[idx] req = m["depth"].lower() == "required" pills = f'{html.escape(m["depth"])}' if idx in progress: pills += f'Scored {progress[idx][0]} of {progress[idx][1]}' parts = [ '
', f'
{pills}Module {idx + 1} of {N}{MINUTES[idx]} min read
', f'

{html.escape(m["title"])}

', f'

{html.escape(m["summary"])}

', ] for v in VIDEOS.get(idx, []): parts.append(watch_panel(v)) for s in m["sections"]: parts.append(f'

{html.escape(s["heading"])}

') parts.append(s["body"]) fig = FIGURES.get((idx, s["heading"])) if fig: parts.append(figure(*fig)) parts.append('

Key takeaways

    ' + "".join(f"
  1. {html.escape(t)}
    2. " for t in m["takeaways"]) + "
") parts.append(link_cards(LINKS.get(idx, []))) parts.append(f'

Need help? {html.escape(IT_HELP)}

') parts.append("
") return "\n".join(parts) def watch_panel(v: dict) -> str: src = f"https://www.youtube-nocookie.com/embed/{v['id']}?rel=0&modestbranding=1" return ( '
' f'

Watch

Anthropic, {v["minutes"]} min
' f'
' f'

{html.escape(v["title"])}

{html.escape(v["blurb"])}

' f'

Published by Anthropic. Open the original tutorial page

' "
" ) def link_cards(links: list, heading: str = "Go further with Anthropic's free courses") -> str: if not links: return "" cards = "".join( f'

{html.escape(l["title"])}

' f'

{html.escape(l["meta"])}

{html.escape(l["blurb"])}

' for l in links ) return f'

{html.escape(heading)}

{cards}
' def render_team_header() -> str: return ( '
' '
ReferenceTools by team
' "

Where Claude fits next to Zoho, Apollo, and Microsoft 365

" f"{TEAMS_INTRO}{figure(*TEAM_FIGURE)}{link_cards(TEAM_LINKS, 'Role based tutorials from Anthropic')}
" ) def track(idx: int, progress: dict) -> str: return f'
' def pct_badge(progress: dict) -> str: return f'
{pct_done(progress)}% complete
' def progress_text(page: int) -> str: if page == HOME: return '
Overview
' if page == TEAM_PAGE: return '
Reference
' return f'
Module {page} of {N}
' def rail_labels(progress: dict): labels = ["Overview"] for i, m in enumerate(MODULES): mark = "\u2713 " if i in progress else "" labels.append(f"{mark}{i + 1}. {m['title']}") labels.append("Tools by team") return labels def rail_updates(page: int, progress: dict): labels = rail_labels(progress) out = [] for i, lab in enumerate(labels): if i == page: variant = "primary" elif 1 <= i <= N and (i - 1) in progress: variant = "stop" else: variant = "secondary" out.append(gr.update(value=lab, variant=variant)) return out def quiz_updates(page: int): qs = QUIZZES[page - 1] if 1 <= page <= N else [] out = [] for i in range(MAXQ): if i < len(qs): out.append(gr.update(label=f"{i + 1}. {qs[i]['q']}", choices=qs[i]["options"], value=None, visible=True)) else: out.append(gr.update(visible=False, value=None)) return out def quiz_head(page: int) -> str: n = len(QUIZZES[page - 1]) if 1 <= page <= N else 0 return (f'

Knowledge check

{n} questions
' '

Pick one answer per question, then check. Anything you miss shows the correct answer and why. ' 'Checking your answers marks the module complete for this session; you can retake it any time.

') def show(page: int, progress: dict): page = max(HOME, min(TEAM_PAGE, page)) on_home, on_team = page == HOME, page == TEAM_PAGE on_module = not on_home and not on_team next_label = "Start module 1" if on_home else ("Tools by team" if page == N else "Next module") return [ page, gr.update(visible=on_home), gr.update(visible=on_module), gr.update(visible=on_team), render_home(progress) if on_home else "", render_module(page - 1, progress) if on_module else "", track(page, progress), pct_badge(progress), progress_text(page), gr.update(interactive=page > HOME, value="Overview" if page == 1 else "Previous module"), gr.update(interactive=page < TEAM_PAGE, value=next_label), quiz_head(page), "", *rail_updates(page, progress), *quiz_updates(page), ] def grade(page: int, progress: dict, *answers): idx = page - 1 qs = QUIZZES[idx] unanswered = [i + 1 for i, a in enumerate(answers[: len(qs)]) if a is None] if unanswered: nums = ", ".join(str(n) for n in unanswered) word = "question" if len(unanswered) == 1 else "questions" return [progress, f'

Answer {word} {nums} before checking.

', gr.update(), gr.update(), gr.update(), *[gr.update() for _ in range(N + 2)]] items, correct = [], 0 for i, q in enumerate(qs): chosen, right = answers[i], q["options"][q["answer"]] if chosen == right: correct += 1 items.append(f'

Question {i + 1}. Correct.

{html.escape(right)}

') else: items.append(f'

Question {i + 1}. Not quite. You chose: {html.escape(chosen)}

' f'

Correct answer: {html.escape(right)}

{html.escape(q["why"])}

') pct = round(100 * correct / len(qs)) progress = dict(progress) progress[idx] = (correct, len(qs)) if correct == len(qs): s1, s2 = f"All {len(qs)} correct.", "Module marked complete. Move on when you are ready." else: s1, s2 = f"{correct} of {len(qs)} right.", "Read the explanations below, then move on. You can retake the check any time." card = (f'
{ring(pct, size=64, stroke=7, track="#E1E8ED", color=TEAL if pct == 100 else BLUE, text_color=BLUE)}' f'

{s1}

{s2}

') result = f'
{card}{"".join(items)}
' return [progress, result, track(page, progress), pct_badge(progress), render_module(idx, progress), *rail_updates(page, progress)] with gr.Blocks(css=CSS, js=FORCE_LIGHT, theme=THEME, title="BOS AI Training") as demo: logo_html = f'BOS' if LOGO_SRC else "" with gr.Row(elem_classes=["topbar-row"]): topbar = gr.HTML(f"""
{logo_html}

AI Training Platform

Six modules with knowledge checks, plus a tools by team reference.

Company standard: Claude Enterprise
""") bar = gr.HTML(track(HOME, {})) page_state = gr.State(HOME) progress_state = gr.State({}) with gr.Row(equal_height=False): with gr.Column(scale=3, min_width=250, elem_classes=["rail"]): gr.HTML('
Learning path
') rail_btns = [gr.Button("Overview", variant="primary", elem_id="rail-0")] for i, m in enumerate(MODULES): rail_btns.append(gr.Button(f"{i + 1}. {m['title']}", variant="secondary", elem_id=f"rail-{i + 1}")) gr.HTML('
Reference
') rail_btns.append(gr.Button("Tools by team", variant="secondary", elem_id="rail-team")) pct_html = gr.HTML(pct_badge({})) with gr.Column(scale=8): with gr.Column(visible=True) as home_view: home = gr.HTML(render_home({})) with gr.Column(visible=False) as module_view: content = gr.HTML("") with gr.Column(elem_classes=["quiz"]): qhead = gr.HTML(quiz_head(1)) radios = [gr.Radio(choices=[], label="", visible=False) for _ in range(MAXQ)] check_btn = gr.Button("Check answers", elem_classes=["check"]) result = gr.HTML("") with gr.Column(visible=False, elem_classes=["teamwrap"]) as team_view: gr.HTML(render_team_header()) with gr.Tabs(): for t in TEAMS: with gr.Tab(t["name"]): gr.HTML(t["html"]) with gr.Row(elem_classes=["navrow"]): prev_btn = gr.Button("Previous module", variant="secondary", interactive=False) progress_lbl = gr.HTML(progress_text(HOME)) next_btn = gr.Button("Start module 1", variant="primary") outputs = [page_state, home_view, module_view, team_view, home, content, bar, pct_html, progress_lbl, prev_btn, next_btn, qhead, result, *rail_btns, *radios] for i, b in enumerate(rail_btns): b.click(lambda prog, i=i: show(i, prog), inputs=progress_state, outputs=outputs) prev_btn.click(lambda p, prog: show(p - 1, prog), inputs=[page_state, progress_state], outputs=outputs) next_btn.click(lambda p, prog: show(p + 1, prog), inputs=[page_state, progress_state], outputs=outputs) check_btn.click(grade, inputs=[page_state, progress_state, *radios], outputs=[progress_state, result, bar, pct_html, content, *rail_btns]) demo.load(lambda: show(HOME, {}), outputs=outputs) if __name__ == "__main__": demo.launch()