mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-04 16:48:48 -05:00
8b992061af
Corrects relative paths for images on community pages, ensuring they are displayed correctly. The path adjustment resolves broken image links.
206 lines
8.5 KiB
HTML
206 lines
8.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>About TinyTorch</title>
|
|
<link rel="icon" href="assets/flame.svg" type="image/svg+xml">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
background-color: #f0f4f8;
|
|
/* Graph Paper Grid Logic */
|
|
background-image:
|
|
linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
|
|
linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
|
|
background-size: 20px 20px;
|
|
color: #333;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
margin-top: 100px; /* Space for menu button */
|
|
margin-bottom: 50px;
|
|
width: 90%;
|
|
max-width: 900px;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
border: 1px solid #333;
|
|
box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
|
|
padding: 50px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h1 {
|
|
margin-top: 0;
|
|
border-bottom: 2px dashed #333;
|
|
padding-bottom: 10px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.intro-text {
|
|
font-family: 'Verdana', sans-serif;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
color: #444;
|
|
margin-bottom: 40px;
|
|
border-left: 4px solid #ff6600;
|
|
padding-left: 20px;
|
|
}
|
|
|
|
.step {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.step h3 {
|
|
margin: 0 0 10px 0;
|
|
font-size: 1.2rem;
|
|
color: #222;
|
|
font-family: 'Verdana', sans-serif;
|
|
}
|
|
|
|
.step p {
|
|
font-family: 'Verdana', sans-serif;
|
|
font-size: 0.95rem;
|
|
color: #555;
|
|
margin: 5px 0 15px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.code-block {
|
|
background: #2d2d2d;
|
|
color: #50fa7b;
|
|
padding: 15px;
|
|
border-radius: 6px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: 0.9rem;
|
|
overflow-x: auto;
|
|
white-space: pre-wrap;
|
|
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
small {
|
|
color: #777;
|
|
font-weight: normal;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
@keyframes fire-flicker {
|
|
0% { transform: rotate(-45deg) scale(1); opacity: 1; }
|
|
20% { transform: rotate(-45deg) scale(1.1) skewX(5deg); opacity: 0.9; }
|
|
40% { transform: rotate(-45deg) scale(0.95); opacity: 0.8; }
|
|
60% { transform: rotate(-45deg) scale(1.05) skewY(5deg); opacity: 0.9; }
|
|
80% { transform: rotate(-45deg) scale(0.95); opacity: 0.95; }
|
|
100% { transform: rotate(-45deg) scale(1); opacity: 1; }
|
|
}
|
|
.anim-fire {
|
|
display: inline-block;
|
|
width: 10px;
|
|
height: 10px;
|
|
background: radial-gradient(circle at 30% 70%, #ffeb3b, #ff9800, #f44336);
|
|
border-radius: 50% 50% 50% 0;
|
|
margin-left: 8px;
|
|
animation: fire-flicker 0.2s infinite alternate;
|
|
vertical-align: middle;
|
|
box-shadow: 0 0 4px rgba(255, 87, 34, 0.6);
|
|
position: relative;
|
|
top: -2px;
|
|
}
|
|
|
|
@keyframes globe-glow {
|
|
0% { box-shadow: 0 0 4px #00aaff; background-color: #0077cc; transform: scale(1); }
|
|
50% { box-shadow: 0 0 12px #33bbff, 0 0 20px #88ddff; background-color: #00aaff; transform: scale(1.05); }
|
|
100% { box-shadow: 0 0 4px #00aaff; background-color: #0077cc; transform: scale(1); }
|
|
}
|
|
@keyframes globe-texture-shift {
|
|
0% { background-position: 0% 50%; }
|
|
100% { background-position: 100% 50%; }
|
|
}
|
|
.anim-globe {
|
|
display: inline-block;
|
|
width: 12px; /* Slightly larger */
|
|
height: 12px; /* Slightly larger */
|
|
border-radius: 50%;
|
|
margin-left: 8px;
|
|
animation: globe-glow 2.5s infinite ease-in-out, globe-texture-shift 10s linear infinite; /* Combine animations */
|
|
vertical-align: middle;
|
|
position: relative;
|
|
top: -1px;
|
|
border: 1px solid rgba(255,255,255,0.5); /* Stronger border */
|
|
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%),
|
|
linear-gradient(135deg, #0077cc 0%, #00aaff 50%, #33bbff 100%);
|
|
background-size: 200% 200%; /* Make background shiftable */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>About TinyTorch</h1>
|
|
|
|
<div class="intro-text">
|
|
<strong>TinyTorch</strong> is an educational deep learning framework designed to demystify AI.
|
|
Rather than just using libraries, you build one. Through a series of progressive modules,
|
|
you will construct your own tensor library, implement autograd, and build neural networks from scratch,
|
|
gaining a mastery of the systems that power modern AI.
|
|
<br><br>
|
|
This is a vibrant community-based site for the TinyTorch learning project. Here, you can check your TinyTorch status, submit your module results, and connect with other community members. You can track your progress and challenges, and coming soon, you'll be able to accept new challenges and compete with other learners for performance or accuracy in your AI models. Join us to build, learn, and grow together!
|
|
|
|
<div style="margin-top: 30px; text-align: center;">
|
|
<img src="../_static/images/diagram_tiny-commununity.png" alt="TinyTorch Community Structure" style="width: 100%;">
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-bottom: 40px; text-align: center;">
|
|
<img src="../_static/images/tinytorch-community.png" alt="TinyTorch User Journey" style="width: 100%;">
|
|
</div>
|
|
|
|
<h2>Get Started with TinyTorch CLI</h2>
|
|
|
|
<div class="step">
|
|
<h3>1. Setup Your Environment with `tito setup`</h3>
|
|
<div class="code-block">$ git clone https://github.com/harvard-edge/cs249r_book.git
|
|
$ cd TinyTorch
|
|
$ tito setup</div>
|
|
<p>The <code>tito setup</code> command performs a comprehensive first-time setup. It automatically installs dependencies, creates your user profile, and initializes your workspace. During this process, it will also ask if you'd like to log in to the TinyTorch community. Logging in connects your local environment to the community features.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>2. Start Building</h3>
|
|
<div class="code-block">$ tito module start 01_tensor</div>
|
|
<p>Begin with Module 01 and work through 20 progressive modules.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>3. Complete & Share</h3>
|
|
<div class="code-block">$ tito module complete 01_tensor</div>
|
|
<p>Once you complete a module, use this command. If you've logged in via <code>tito setup</code> or <code>tito community login</code>, completing a module will automatically submit your progress to the community, reflecting your achievements instantly.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>4. Track Your Progress & Explore </h3>
|
|
<p>Once you've started or completed modules, you can visualize your journey and explore the community:</p>
|
|
<ul>
|
|
<li>Go to <a href="${basePath}/dashboard.html">/dashboard<span class="anim-fire"></span></a> to view your current progress and see where other learners are in their journey.</li>
|
|
<li>Visit <a href="${basePath}/community.html">/community<span class="anim-globe"></span></a> to explore the global builder network and search for users by location or skills.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<h3>5. Community Login & Logout</h3>
|
|
<div class="code-block">$ tito community login
|
|
$ tito community logout</div>
|
|
<p>You can log in or log out of the community at any time using these commands. This is useful if you skipped login during setup or need to switch accounts.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|