feather_tutorial/ACT.html at main · maeri-project/feather_tutorial · 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
<!DOCTYPE html>
<html lang="en" data-theme="dark">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ACT - RAIC Tutorial</title>
  <meta name="description" content="ACT Ecosystem documentation for the RAIC Tutorial.">

  <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@300;400;500;600;700&family=Outfit:wght@400;500;700;800&display=swap"
    rel="stylesheet">

  <link rel="stylesheet" href="styles.css">
</head>

<body>

  <div class="app-layout">
    <!-- Sidebar Navigation -->
    <aside class="sidebar">
      <div class="sidebar-header">
        <div class="logo">RAIC TUTORIAL</div>
        <button id="mobile-close-btn" class="icon-btn" aria-label="Close Menu">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 6L6 18M6 6l12 12" />
          </svg>
        </button>
      </div>

      <nav class="sidebar-nav">
        <div class="nav-section">
          <h3 class="nav-title">tutorial</h3>
          <ul class="nav-links">
            <li><a href="index.html">ASPLOS'26@Pittsburgh</a></li>
          </ul>
        </div>

        <div class="nav-section">
          <h3 class="nav-title">docs</h3>
          <ul class="nav-links">
            <li><a href="FEATHER.html">FEATHER</a></li>
          </ul>
        </div>
      </nav>
    </aside>

    <!-- Main Content Area -->
    <main class="main-content">
      <header class="top-bar">
        <button id="mobile-menu-btn" class="icon-btn" aria-label="Open Menu">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M3 12h18M3 6h18M3 18h18" />
          </svg>
        </button>

        <div class="header-title">ASPLOS'26 Tutorial: RAIC</div>

        <div class="top-actions">
          <button id="theme-toggle" class="icon-btn" aria-label="Toggle Theme">
            <svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <circle cx="12" cy="12" r="5" />
              <path
                d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
            </svg>
            <svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor"
              stroke-width="2">
              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
            </svg>
          </button>
        </div>
      </header>

      <div class="content-wrapper">
        <article class="doc-content">
          <section id="intro" class="hero-section">
            <h1>ACT Ecosystem</h1>
            <p class="subtitle">Automatically Generating Software Support for Accelerators</p>
            <div class="text-block">
              <p>ACT is an ecosystem that automatically generates software tools like compilers for the ALLO-generated FEATHER accelerator. The generated compiler explores the large space of dataflow and layout mappings to identify the most latency-efficient configurations for workloads.</p>
            </div>
          </section>

          <section id="taidl">
            <h2>TAIDL</h2>
            <div class="text-block">
              <p>Introduction to TAIDL, ACT's ISA specification language...</p>
            </div>
          </section>

          <section id="isa-spec">
            <h2>Writing FEATHER ISA in TAIDL</h2>
            <div class="text-block">
              <p>How to write FEATHER ISA in TAIDL and generate its compiler...</p>
            </div>
          </section>

          <section id="compilation">
            <h2>Compilation</h2>
            <div class="text-block">
              <p>Using the generated FEATHER compiler for compilation...</p>
            </div>
          </section>
        </article>

        <aside class="on-this-page">
          <h4>On this page</h4>
          <ul>
            <li><a href="#intro">Introduction</a></li>
            <li><a href="#taidl">TAIDL</a></li>
            <li><a href="#isa-spec">FEATHER ISA in TAIDL</a></li>
            <li><a href="#compilation">Compilation</a></li>
          </ul>
        </aside>
      </div>

      <section id="sponsors" class="sponsors-section">
        <div class="sponsors-container">
          <img src="fig/GT.svg" alt="Georgia Tech" class="sponsor-logo">
          <img src="fig/uiuc.png" alt="UIUC" class="sponsor-logo">
          <img src="fig/cornell.png" alt="Cornell University" class="sponsor-logo">
        </div>
      </section>

      <footer class="site-footer">
        <p>&copy; 2026 FEATHER Tutorial.</p>
      </footer>
    </main>
  </div>

  <script src="script.js"></script>
</body>

</html>