SafeAndSecureAI.github.io/index.html at main · SafeAndSecureAI/SafeAndSecureAI.github.io · 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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Safe and Secure AI</title>
    <meta
      name="description"
      content="Safe and Secure AI — research at the intersection of artificial intelligence, safety, and cybersecurity."
    />
    <link rel="stylesheet" href="assets/css/site.css" />
    <link rel="icon" href="assets/images/logo.png" type="image/png" />
  </head>
  <body
    class="flex min-h-screen flex-col bg-canvas font-sans text-ink antialiased"
  >
    <header
      class="sticky top-0 z-50 border-b border-white/10 bg-primary text-white shadow-sm"
    >
      <div
        class="mx-auto flex max-w-5xl flex-wrap items-center justify-between gap-4 px-4 py-4 sm:px-6 lg:px-8"
      >
        <a
          href="index.html"
          class="order-1 inline-flex min-w-0 items-center gap-2.5 text-lg font-semibold tracking-tight text-white transition-colors hover:text-accent"
        >
          <img
            src="assets/images/logo.png"
            alt=""
            width="32"
            height="32"
            class="h-8 w-auto shrink-0 object-contain"
            decoding="async"
          />
          <span class="truncate">Safe and Secure AI</span>
        </a>
        <button
          type="button"
          id="site-nav-toggle"
          class="order-2 inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md text-white/90 hover:bg-white/10 md:hidden"
          aria-expanded="false"
          aria-controls="site-nav"
          aria-label="Open menu"
        >
          <span class="site-nav-icon-open" aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </span>
          <span class="site-nav-icon-close hidden" aria-hidden="true">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="h-6 w-6"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
            </svg>
          </span>
        </button>
        <nav
          id="site-nav"
          class="order-3 hidden w-full flex-col gap-1 border-t border-white/10 pt-3 text-sm font-medium md:order-2 md:flex md:w-auto md:flex-row md:items-center md:gap-2 md:border-t-0 md:pt-0"
          aria-label="Main"
        >
          <a
            href="index.html"
            class="block w-full rounded-md bg-white/15 px-3 py-2 text-left text-white md:inline-block md:w-auto"
            aria-current="page"
            >Home</a
          >
          <a
            href="papers.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >Papers</a
          >
          <a
            href="projects.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >Projects</a
          >
          <a
            href="people.html"
            class="block w-full rounded-md px-3 py-2 text-left text-white/85 transition-colors hover:bg-white/10 hover:text-white md:inline-block md:w-auto"
            >People</a
          >
        </nav>
      </div>
    </header>

    <main id="main-content" class="flex-1">
      <section
        class="hero-home relative overflow-hidden border-b border-white/10"
        aria-labelledby="hero-heading"
      >
        <div class="mx-auto max-w-5xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8">
          <div class="text-center sm:text-left">
            <div
              class="flex flex-wrap items-center justify-center gap-4 sm:justify-start sm:gap-5"
            >
              <img
                src="assets/images/logo.png"
                alt=""
                width="96"
                height="96"
                class="h-14 w-auto shrink-0 object-contain sm:h-16"
                decoding="async"
              />
              <h1
                id="hero-heading"
                class="min-w-0 text-4xl font-bold tracking-tight text-white sm:text-5xl"
              >
                Safe and Secure AI
              </h1>
            </div>
            <p class="mx-auto mt-6 max-w-2xl text-lg leading-relaxed text-white/85 sm:mx-0">
              We are a research lab focused on artificial intelligence that is safe to deploy and secure against misuse. Our work spans robustness, alignment, and cybersecurity; developing methods, tools, and empirical understanding so AI systems can be used responsibly in the real world.
            </p>
          </div>
        </div>
      </section>

      <section class="py-14 sm:py-16" aria-labelledby="recent-papers-heading">
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
              <h2
                id="recent-papers-heading"
                class="text-2xl font-bold tracking-tight text-ink"
              >
                Recent publications
              </h2>
              <p class="mt-1 text-sm text-ink/65">Selected papers from the group.</p>
            </div>
            <a
              href="papers.html"
              class="text-sm font-semibold text-secondary hover:text-primary"
              >View all papers</a
            >
          </div>
          <div
            id="home-papers-grid"
            class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
          ></div>
        </div>
      </section>

      <section
        class="border-t border-accent/25 bg-white/60 py-14 sm:py-16"
        aria-labelledby="recent-projects-heading"
      >
        <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
          <div class="flex flex-wrap items-end justify-between gap-4">
            <div>
              <h2
                id="recent-projects-heading"
                class="text-2xl font-bold tracking-tight text-ink"
              >
                Recent projects
              </h2>
              <p class="mt-1 text-sm text-ink/65">Open-source tools, benchmarks, and labeled links.</p>
            </div>
            <a
              href="projects.html"
              class="text-sm font-semibold text-secondary hover:text-primary"
              >View all projects</a
            >
          </div>
          <div
            id="home-projects-grid"
            class="mt-10 grid gap-6 sm:grid-cols-2 lg:grid-cols-3"
          ></div>
        </div>
      </section>
    </main>

    <footer class="border-t border-accent/25 bg-primary text-sm text-white/80">
      <div class="mx-auto flex max-w-5xl flex-col gap-2 px-4 py-8 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
        <p class="font-medium text-white">Safe and Secure AI</p>
        <p>Trustworthy systems and AI security research</p>
      </div>
    </footer>
    <script src="assets/js/site-nav.js" defer></script>
    <script type="module" src="assets/js/home-content.js"></script>
  </body>
</html>