kbigdelysh commited on
Commit
20409f8
·
1 Parent(s): 709352c

Add Google Colab notebook section with professional table

Browse files

- Add official Google Colab badge for notebook access
- Create notebooks table with three columns (Notebook, Description, Link)
- Include rf-colab-tensorboard-tutorial.ipynb with TensorBoard tutorial
- Style table with dark theme, hover effects, and proper spacing
- Add explanatory text encouraging users to try notebook in cloud
- Use official Colab badge SVG from Google's CDN
- Add Google Colaboratory logo SVG to images directory
- Position Colab section between feature list and links
- Table is expandable for future additional notebooks

images/Google_Colaboratory_SVG_Logo.svg ADDED
index.html CHANGED
@@ -89,6 +89,58 @@
89
  margin-left: 0.35rem;
90
  font-size: 0.875rem;
91
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
 
93
  @media (prefers-color-scheme: dark) {
94
  body {
@@ -136,6 +188,34 @@
136
  <li><strong>Apache License v2.0:</strong> No vendor lock in. Develop on your IDE, launch from CLI.</li>
137
  </ul>
138
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
139
  <h3>Links:</h3>
140
  <ul>
141
  <li>
 
89
  margin-left: 0.35rem;
90
  font-size: 0.875rem;
91
  }
92
+ .colab-section {
93
+ margin: 2rem 0;
94
+ }
95
+ .colab-label {
96
+ font-size: 1.2rem;
97
+ font-weight: 600;
98
+ margin-bottom: 0.75rem;
99
+ display: block;
100
+ }
101
+ .colab-button {
102
+ display: inline-block;
103
+ text-decoration: none;
104
+ transition: opacity 0.2s;
105
+ }
106
+ .colab-button:hover {
107
+ opacity: 0.8;
108
+ text-decoration: none;
109
+ }
110
+ .colab-button img {
111
+ height: 40px;
112
+ display: block;
113
+ }
114
+ .notebooks-table {
115
+ width: 100%;
116
+ border-collapse: collapse;
117
+ margin: 2rem 0;
118
+ background-color: rgba(0, 0, 0, 0.2);
119
+ border-radius: 8px;
120
+ overflow: hidden;
121
+ }
122
+ .notebooks-table th {
123
+ background-color: rgba(0, 0, 0, 0.3);
124
+ color: #ffffff;
125
+ padding: 1rem;
126
+ text-align: left;
127
+ font-weight: 600;
128
+ font-size: 1rem;
129
+ border-bottom: 2px solid rgba(255, 255, 255, 0.1);
130
+ }
131
+ .notebooks-table td {
132
+ padding: 1rem;
133
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
134
+ }
135
+ .notebooks-table tr:last-child td {
136
+ border-bottom: none;
137
+ }
138
+ .notebooks-table tr:hover {
139
+ background-color: rgba(255, 255, 255, 0.05);
140
+ }
141
+ .notebooks-table .colab-button img {
142
+ height: 32px;
143
+ }
144
 
145
  @media (prefers-color-scheme: dark) {
146
  body {
 
188
  <li><strong>Apache License v2.0:</strong> No vendor lock in. Develop on your IDE, launch from CLI.</li>
189
  </ul>
190
 
191
+ <div class="colab-section">
192
+ <h3>📓 Try it now:</h3>
193
+ <p style="margin-bottom: 1.5rem; font-size: 1rem;">
194
+ Try RapidFire AI in the Google Colab Notebook with no local installation—get started in under 3 minutes!
195
+ </p>
196
+
197
+ <table class="notebooks-table">
198
+ <thead>
199
+ <tr>
200
+ <th>Notebook</th>
201
+ <th>Description</th>
202
+ <th>Notebook Link</th>
203
+ </tr>
204
+ </thead>
205
+ <tbody>
206
+ <tr>
207
+ <td><strong>rf-colab-tensorboard-tutorial.ipynb</strong></td>
208
+ <td>Interactive tutorial with TensorBoard integration</td>
209
+ <td>
210
+ <a href="http://tinyurl.com/rapidfireai-colab" class="colab-button" target="_blank" rel="noopener noreferrer">
211
+ <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" />
212
+ </a>
213
+ </td>
214
+ </tr>
215
+ </tbody>
216
+ </table>
217
+ </div>
218
+
219
  <h3>Links:</h3>
220
  <ul>
221
  <li>