Add gemma.css to site notebooks. (#509)

* Add gemma.css to site notebooks. This is fragile, but it's only a temp measure until the CSS is included in the site bundle. * Fix buttons on distributed tuning guide too

Author: markmcd

site/en/gemma/docs/agile_classifiers.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/codegemma/code_assist_keras.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/codegemma/codegemma_flax_inference.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/codegemma/keras_quickstart.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/distributed_tuning.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {
@@ -42,7 +52,7 @@
  " <a target=\"_blank\" href=\"https://ai.google.dev/gemma/docs/distributed_tuning\"><img src=\"https://ai.google.dev/static/site-assets/images/docs/notebook-site-button.png\" height=\"32\" width=\"32\" />View on ai.google.dev</a>\n",
  " </td>\n",
  " <td>\n",
- " <a target=\"_blank\" href=\"https://colab.research.google.com/github/googlecolab/colabtools/blob/main/notebooks/Gemma_Distributed_Fine_tuning_on_TPU.ipynb\"><img src=\"https://www.tensorflow.org/images/colab_logo_32px.png\" />Run in Google Colab</a>\n",
+ " <a target=\"_blank\" href=\"https://colab.research.google.com/github/google/generative-ai-docs/blob/main/site/en/gemma/docs/distributed_tuning.ipynb\"><img src=\"https://www.tensorflow.org/images/colab_logo_32px.png\" />Run in Google Colab</a>\n",
  " </td>\n",
  " <td>\n",
  " <a target=\"_blank\" href=\"https://www.kaggle.com/code/nilaychauhan/keras-gemma-distributed-finetuning-and-inference\"><img src=\"https://www.kaggle.com/static/images/logos/kaggle-logo-transparent-300.png\" height=\"32\" width=\"70\"/>Run in Kaggle</a>\n",

site/en/gemma/docs/gemma_chat.ipynb

@@ -3,15 +3,11 @@
  {
  "cell_type": "markdown",
  "metadata": {
- "id": "JLOS92ZAhfFj"
+ "id": "G3MMAcssHTML"
  },
  "source": [
- "Project: /gemma/_project.yaml\n",
- "Book: /gemma/_book.yaml\n",
- "\n",
- "<link rel=\"stylesheet\" href=\"/site-assets/css/style.css\">\n",
- "\n",
- "<!-- DO NOT EDIT! Automatically generated file. -->"
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
  ]
  },
  {
@@ -569,7 +565,13 @@
  "outputs": [
  {
  "data": {
- "text/markdown": "<font size='+1' color='brown'>🙋‍♂️<blockquote>Tell me, in a few words, how to compute all prime numbers up to 1000?</blockquote></font><font size='+1' color='teal'>🤖\n\n> **Sieve of Eratosthenes.** \n> <end_of_turn>\n</font>",
+ "text/markdown": [
+ "<font size='+1' color='brown'>🙋‍♂️<blockquote>Tell me, in a few words, how to compute all prime numbers up to 1000?</blockquote></font><font size='+1' color='teal'>🤖\n",
+ "\n",
+ "> **Sieve of Eratosthenes.** \n",
+ "> <end_of_turn>\n",
+ "</font>"
+ ],
  "text/plain": [
  "<IPython.core.display.Markdown object>"
  ]
@@ -603,7 +605,43 @@
  "outputs": [
  {
  "data": {
- "text/markdown": "<font size='+1' color='brown'>🙋‍♂️<blockquote>Now in Python! No numpy, please!</blockquote></font><font size='+1' color='teal'>🤖\n\n> ```python\n> def sieve_of_eratosthenes(n):\n> \"\"\"Returns a list of prime numbers up to n.\"\"\"\n> primes = [True] * (n + 1)\n> primes[0] = primes[1] = False\n> for i in range(2, int(n**0.5) + 1):\n> if primes[i]:\n> for j in range(i * i, n + 1, i):\n> primes[j] = False\n> return [i for i, is_prime in enumerate(primes) if is_prime]\n> \n> primes = sieve_of_eratosthenes(1000)\n> print(primes)\n> ```\n> \n> **Explanation:**\n> \n> 1. **Initialization:**\n> - `primes = [True] * (n + 1)`: Creates a list `primes` of boolean values, initially assuming all numbers are prime.\n> - `primes[0] = primes[1] = False`: Sets 0 and 1 as non-prime.\n> \n> 2. **Iteration:**\n> - `for i in range(2, int(n**0.5) + 1):`: Iterates from 2 to the square root of `n`. We only need to check up to the square root because any composite number must have a prime factor less than or equal to its square root.\n> - `if primes[i]:`: If `i` is marked as prime:\n> - `for j in range(i * i, n + 1, i):`: Marks all multiples of `i` as non-prime.\n> \n> 3. **Result:**\n> - `return [i for i, is_prime in enumerate(primes) if is_prime]`: Creates a list of indices where `primes[i]` is True, representing the prime numbers.\n> \n> \n> Let me know if you'd like a more detailed explanation of any part! \n> <end_of_turn>\n</font>",
+ "text/markdown": [
+ "<font size='+1' color='brown'>🙋‍♂️<blockquote>Now in Python! No numpy, please!</blockquote></font><font size='+1' color='teal'>🤖\n",
+ "\n",
+ "> ```python\n",
+ "> def sieve_of_eratosthenes(n):\n",
+ "> \"\"\"Returns a list of prime numbers up to n.\"\"\"\n",
+ "> primes = [True] * (n + 1)\n",
+ "> primes[0] = primes[1] = False\n",
+ "> for i in range(2, int(n**0.5) + 1):\n",
+ "> if primes[i]:\n",
+ "> for j in range(i * i, n + 1, i):\n",
+ "> primes[j] = False\n",
+ "> return [i for i, is_prime in enumerate(primes) if is_prime]\n",
+ "> \n",
+ "> primes = sieve_of_eratosthenes(1000)\n",
+ "> print(primes)\n",
+ "> ```\n",
+ "> \n",
+ "> **Explanation:**\n",
+ "> \n",
+ "> 1. **Initialization:**\n",
+ "> - `primes = [True] * (n + 1)`: Creates a list `primes` of boolean values, initially assuming all numbers are prime.\n",
+ "> - `primes[0] = primes[1] = False`: Sets 0 and 1 as non-prime.\n",
+ "> \n",
+ "> 2. **Iteration:**\n",
+ "> - `for i in range(2, int(n**0.5) + 1):`: Iterates from 2 to the square root of `n`. We only need to check up to the square root because any composite number must have a prime factor less than or equal to its square root.\n",
+ "> - `if primes[i]:`: If `i` is marked as prime:\n",
+ "> - `for j in range(i * i, n + 1, i):`: Marks all multiples of `i` as non-prime.\n",
+ "> \n",
+ "> 3. **Result:**\n",
+ "> - `return [i for i, is_prime in enumerate(primes) if is_prime]`: Creates a list of indices where `primes[i]` is True, representing the prime numbers.\n",
+ "> \n",
+ "> \n",
+ "> Let me know if you'd like a more detailed explanation of any part! \n",
+ "> <end_of_turn>\n",
+ "</font>"
+ ],
  "text/plain": [
  "<IPython.core.display.Markdown object>"
  ]
@@ -627,7 +665,45 @@
  "outputs": [
  {
  "data": {
- "text/markdown": "<font size='+1' color='brown'>🙋‍♂️<blockquote>Thank you, it works! Can you explain the code in French?</blockquote></font><font size='+1' color='teal'>🤖\n\n> Bien sûr ! Voici une explication du code en français :\n> \n> ```python\n> def sieve_of_eratosthenes(n):\n> \"\"\"Retourne une liste de nombres premiers jusqu'à n.\"\"\"\n> primes = [True] * (n + 1)\n> primes[0] = primes[1] = False\n> for i in range(2, int(n**0.5) + 1):\n> if primes[i]:\n> for j in range(i * i, n + 1, i):\n> primes[j] = False\n> return [i for i, is_prime in enumerate(primes) if is_prime]\n> \n> primes = sieve_of_eratosthenes(1000)\n> print(primes)\n> ```\n> \n> **Explication:**\n> \n> 1. **Initialisation:**\n> - `primes = [True] * (n + 1)`: Crée une liste `primes` de valeurs booléennes, initialement supposant que tous les nombres sont premiers.\n> - `primes[0] = primes[1] = False`: Définit 0 et 1 comme non-premiers.\n> \n> 2. **Itération:**\n> - `for i in range(2, int(n**0.5) + 1):`: Itère de 2 jusqu'à la racine carrée de `n`. Nous ne devons vérifier que jusqu'à la racine carrée car tout nombre composite doit avoir un facteur premier inférieur ou égal à sa racine carrée.\n> - `if primes[i]:`: Si `i` est considéré comme premier:\n> - `for j in range(i * i, n + 1, i):`: Marquer tous les multiples de `i` comme non-premiers.\n> \n> 3. **Resultat:**\n> - `return [i for i, is_prime in enumerate(primes) if is_prime]`: Crée une liste des indices où `primes[i]` est vrai, représentant les nombres premiers.\n> \n> \n> N'hésitez pas à me demander si vous avez besoin d'une explication plus détaillée de quelque chose! \n> <end_of_turn>\n</font>",
+ "text/markdown": [
+ "<font size='+1' color='brown'>🙋‍♂️<blockquote>Thank you, it works! Can you explain the code in French?</blockquote></font><font size='+1' color='teal'>🤖\n",
+ "\n",
+ "> Bien sûr ! Voici une explication du code en français :\n",
+ "> \n",
+ "> ```python\n",
+ "> def sieve_of_eratosthenes(n):\n",
+ "> \"\"\"Retourne une liste de nombres premiers jusqu'à n.\"\"\"\n",
+ "> primes = [True] * (n + 1)\n",
+ "> primes[0] = primes[1] = False\n",
+ "> for i in range(2, int(n**0.5) + 1):\n",
+ "> if primes[i]:\n",
+ "> for j in range(i * i, n + 1, i):\n",
+ "> primes[j] = False\n",
+ "> return [i for i, is_prime in enumerate(primes) if is_prime]\n",
+ "> \n",
+ "> primes = sieve_of_eratosthenes(1000)\n",
+ "> print(primes)\n",
+ "> ```\n",
+ "> \n",
+ "> **Explication:**\n",
+ "> \n",
+ "> 1. **Initialisation:**\n",
+ "> - `primes = [True] * (n + 1)`: Crée une liste `primes` de valeurs booléennes, initialement supposant que tous les nombres sont premiers.\n",
+ "> - `primes[0] = primes[1] = False`: Définit 0 et 1 comme non-premiers.\n",
+ "> \n",
+ "> 2. **Itération:**\n",
+ "> - `for i in range(2, int(n**0.5) + 1):`: Itère de 2 jusqu'à la racine carrée de `n`. Nous ne devons vérifier que jusqu'à la racine carrée car tout nombre composite doit avoir un facteur premier inférieur ou égal à sa racine carrée.\n",
+ "> - `if primes[i]:`: Si `i` est considéré comme premier:\n",
+ "> - `for j in range(i * i, n + 1, i):`: Marquer tous les multiples de `i` comme non-premiers.\n",
+ "> \n",
+ "> 3. **Resultat:**\n",
+ "> - `return [i for i, is_prime in enumerate(primes) if is_prime]`: Crée une liste des indices où `primes[i]` est vrai, représentant les nombres premiers.\n",
+ "> \n",
+ "> \n",
+ "> N'hésitez pas à me demander si vous avez besoin d'une explication plus détaillée de quelque chose! \n",
+ "> <end_of_turn>\n",
+ "</font>"
+ ],
  "text/plain": [
  "<IPython.core.display.Markdown object>"
  ]
@@ -651,7 +727,48 @@
  "outputs": [
  {
  "data": {
- "text/markdown": "<font size='+1' color='brown'>🙋‍♂️<blockquote>Great! Now add those explanations as comments in the code.</blockquote></font><font size='+1' color='teal'>🤖\n\n> ```python\n> def sieve_of_eratosthenes(n):\n> \"\"\"Retourne une liste de nombres premiers jusqu'à n.\"\"\"\n> # Initialise une liste de boolean avec True pour tous les nombres de 0 à n\n> primes = [True] * (n + 1)\n> # Définit 0 et 1 comme non-premiers\n> primes[0] = primes[1] = False\n> # Itère de 2 à la racine carrée de n\n> for i in range(2, int(n**0.5) + 1):\n> # Si i est considéré comme premier\n> if primes[i]:\n> # Itère sur tous les multiples de i\n> for j in range(i * i, n + 1, i):\n> # Définit les multiples de i comme non-premiers\n> primes[j] = False\n> # Retourne la liste des indices des nombres premiers\n> return [i for i, is_prime in enumerate(primes) if is_prime]\n> \n> primes = sieve_of_eratosthenes(1000)\n> print(primes)\n> ```\n> \n> **Explication:**\n> \n> * **Initialisation:**\n> * `primes = [True] * (n + 1)`: Crée une liste `primes` de valeurs booléennes, initialement supposant que tous les nombres sont premiers.\n> * `primes[0] = primes[1] = False`: Définit 0 et 1 comme non-premiers.\n> * **Itération:**\n> * `for i in range(2, int(n**0.5) + 1):`: Itère de 2 jusqu'à la racine carrée de `n`. Nous ne devons vérifier que jusqu'à la racine carrée car tout nombre composite doit avoir un facteur premier inférieur ou égal à sa racine carrée.\n> * `if primes[i]:`: Si `i` est considéré comme premier:\n> * `for j in range(i * i, n + 1, i):`: Marquer tous les multiples de `i` comme non-premiers.\n> * **Resultat:**\n> * `return [i for i, is_prime in enumerate(primes) if is_prime]`: Crée une liste des indices où `primes[i]` est vrai, représentant les nombres premiers. \n> \n> \n> \n> <end_of_turn>\n</font>",
+ "text/markdown": [
+ "<font size='+1' color='brown'>🙋‍♂️<blockquote>Great! Now add those explanations as comments in the code.</blockquote></font><font size='+1' color='teal'>🤖\n",
+ "\n",
+ "> ```python\n",
+ "> def sieve_of_eratosthenes(n):\n",
+ "> \"\"\"Retourne une liste de nombres premiers jusqu'à n.\"\"\"\n",
+ "> # Initialise une liste de boolean avec True pour tous les nombres de 0 à n\n",
+ "> primes = [True] * (n + 1)\n",
+ "> # Définit 0 et 1 comme non-premiers\n",
+ "> primes[0] = primes[1] = False\n",
+ "> # Itère de 2 à la racine carrée de n\n",
+ "> for i in range(2, int(n**0.5) + 1):\n",
+ "> # Si i est considéré comme premier\n",
+ "> if primes[i]:\n",
+ "> # Itère sur tous les multiples de i\n",
+ "> for j in range(i * i, n + 1, i):\n",
+ "> # Définit les multiples de i comme non-premiers\n",
+ "> primes[j] = False\n",
+ "> # Retourne la liste des indices des nombres premiers\n",
+ "> return [i for i, is_prime in enumerate(primes) if is_prime]\n",
+ "> \n",
+ "> primes = sieve_of_eratosthenes(1000)\n",
+ "> print(primes)\n",
+ "> ```\n",
+ "> \n",
+ "> **Explication:**\n",
+ "> \n",
+ "> * **Initialisation:**\n",
+ "> * `primes = [True] * (n + 1)`: Crée une liste `primes` de valeurs booléennes, initialement supposant que tous les nombres sont premiers.\n",
+ "> * `primes[0] = primes[1] = False`: Définit 0 et 1 comme non-premiers.\n",
+ "> * **Itération:**\n",
+ "> * `for i in range(2, int(n**0.5) + 1):`: Itère de 2 jusqu'à la racine carrée de `n`. Nous ne devons vérifier que jusqu'à la racine carrée car tout nombre composite doit avoir un facteur premier inférieur ou égal à sa racine carrée.\n",
+ "> * `if primes[i]:`: Si `i` est considéré comme premier:\n",
+ "> * `for j in range(i * i, n + 1, i):`: Marquer tous les multiples de `i` comme non-premiers.\n",
+ "> * **Resultat:**\n",
+ "> * `return [i for i, is_prime in enumerate(primes) if is_prime]`: Crée une liste des indices où `primes[i]` est vrai, représentant les nombres premiers. \n",
+ "> \n",
+ "> \n",
+ "> \n",
+ "> <end_of_turn>\n",
+ "</font>"
+ ],
  "text/plain": [
  "<IPython.core.display.Markdown object>"
  ]

site/en/gemma/docs/integrations/langchain.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/jax_finetune.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {

site/en/gemma/docs/jax_inference.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {
@@ -387,7 +397,8 @@
  "name": "stderr",
  "output_type": "stream",
  "text": [
- "\r100%|██████████| 22.5k/22.5k [00:00<00:00, 24.7MB/s]\n",
+ "\r",
+ "100%|██████████| 22.5k/22.5k [00:00<00:00, 24.7MB/s]\n",
  "\n",
  "\n",
  " 1%| | 17.0M/1.70G [00:00<00:36, 49.5MB/s]\u001b[A\u001b[A\n",

site/en/gemma/docs/keras_inference.ipynb

@@ -1,5 +1,15 @@
 {
  "cells": [
+ {
+ "cell_type": "markdown",
+ "metadata": {
+ "id": "G3MMAcssHTML"
+ },
+ "source": [
+ "<link rel=\"stylesheet\" href=\"/site-assets/css/gemma.css\">\n",
+ "<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/css2?family=Google+Symbols:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200\" />"
+ ]
+ },
  {
  "cell_type": "markdown",
  "metadata": {