framework/policy-guide.html at main · Learning-AI-swoo/framework · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Institutional Policy Guide</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc; /* Slate 50 */
        }
        .title-font {
            font-family: 'Source Serif 4', serif;
        }
        .back-link {
            transition: color 0.2s ease-in-out;
        }
        .back-link:hover {
            color: #4f46e5; /* Indigo 600 */
        }
        .policy-item {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        }
    </style>
</head>
<body class="text-slate-800 flex flex-col min-h-screen">

    <header class="bg-white/80 backdrop-blur-md sticky top-0 z-50 border-b border-slate-200">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <h1 class="text-xl md:text-2xl font-bold text-slate-900">AI in AHM: Resources</h1>
            <a href="index.html" class="back-link text-sm font-semibold text-slate-600 flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
                Back to Framework
            </a>
        </div>
    </header>

    <main class="container mx-auto px-6 py-12 md:py-20 flex-grow">

        <div class="max-w-4xl mx-auto text-center mb-12 md:mb-16">
            <h2 class="title-font text-4xl md:text-5xl font-bold text-slate-900">Institutional Policy Guide</h2>
            <p class="mt-4 text-lg text-slate-600">Recommendations for how AHM professional associations can foster a responsible AI ecosystem.</p>
        </div>

        <div class="max-w-3xl mx-auto space-y-6">

            <div class="policy-item flex items-start">
                <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full mr-4 mt-1">
                    <svg class="w-6 h-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
                </div>
                <p class="self-center">Reference the AI Competency Framework as a foundational standard for responsible AI use in professional guidelines and codes of ethics.</p>
            </div>

            <div class="policy-item flex items-start">
                <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full mr-4 mt-1">
                    <svg class="w-6 h-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                </div>
                <p class="self-center">Develop clear policies ensuring that AI applications used by members meet transparency, fairness, accountability, and risk mitigation expectations.</p>
            </div>

            <div class="policy-item flex items-start">
                <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full mr-4 mt-1">
                    <svg class="w-6 h-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.26 10.147a60.436 60.436 0 00-.491 6.347A48.627 48.627 0 0112 20.904a48.627 48.627 0 018.232-4.41 60.46 60.46 0 00-.491-6.347m-15.482 0a50.57 50.57 0 00-2.658-.813A59.905 59.905 0 0112 3.493a59.902 59.902 0 0110.399 5.84c-.896.248-1.783.52-2.658.814m-15.482 0l-.07.004-.008.004-.004.002-.003.002-.002.001-.001.001A49.945 49.945 0 0112 13.489a49.945 49.945 0 017.732-3.342l-.001-.001-.002-.001-.003-.002-.004-.002-.008-.004-.07-.004c-1.12.094-2.272.19-3.438.295a48.63 48.63 0 00-4.496 0c-1.165-.105-2.318-.201-3.438-.295z" /></svg>
                </div>
                <p class="self-center">Promote member education on AI fundamentals, ethical considerations, and the skills needed for critical evaluation of AI tools.</p>
            </div>

            <div class="policy-item flex items-start">
                <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full mr-4 mt-1">
                    <svg class="w-6 h-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 00-1.883 2.542l.857 6a2.25 2.25 0 002.227 1.932H19.05a2.25 2.25 0 002.227-1.932l.857-6a2.25 2.25 0 00-1.883-2.542m-16.5 0A2.25 2.25 0 016 7.5h12a2.25 2.25 0 012.25 2.25m-16.5 0v-1.5c0-.621.504-1.125 1.125-1.125h13.5c.621 0 1.125.504 1.125 1.125v1.5" /></svg>
                </div>
                <p class="self-center">Establish clear reporting mechanisms for practitioners to share AI-related concerns, adverse events, or positive outcomes to inform the community.</p>
            </div>

            <div class="policy-item flex items-start">
                <div class="flex-shrink-0 p-2 bg-indigo-100 rounded-full mr-4 mt-1">
                    <svg class="w-6 h-6 text-indigo-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M14.25 9.75L16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0020.25 18V6A2.25 2.25 0 0018 3.75H6A2.25 2.25 0 003.75 6v12A2.25 2.25 0 006 20.25z" /></svg>
                </div>
                <p class="self-center">Engage with AI developers and researchers to advocate for the creation of inclusive, explainable, and empirically validated tools that respect AHM principles.</p>
            </div>

        </div>
    </main>

    <footer class="bg-slate-200 border-t border-slate-300 mt-auto">
        <div class="container mx-auto px-6 py-8 text-center">
            <p class="text-sm text-slate-600 max-w-4xl mx-auto">
                This conceptual page was developed by the Education & Training subgroup of the NCCAOM AI Taskforce to illustrate the competency framework.
            </p>
        </div>
    </footer>
</body>
</html>