examples/Opossum_search.ipynb

{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Tce3stUlHN0L"
      },
      "source": [
        "##### Copyright 2024 Google LLC."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "cellView": "form",
        "id": "tuOe1ymfHZPu"
      },
      "outputs": [],
      "source": [
        "# @title Licensed under the Apache License, Version 2.0 (the \"License\");\n",
        "# you may not use this file except in compliance with the License.\n",
        "# You may obtain a copy of the License at\n",
        "#\n",
        "# https://www.apache.org/licenses/LICENSE-2.0\n",
        "#\n",
        "# Unless required by applicable law or agreed to in writing, software\n",
        "# distributed under the License is distributed on an \"AS IS\" BASIS,\n",
        "# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n",
        "# See the License for the specific language governing permissions and\n",
        "# limitations under the License."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "7EtZRebrTCzD"
      },
      "source": [
        "# Opossum search\n",
        "\n",
        "<table align=\"left\">\n",
        "  <td>\n",
        "    <a target=\"_blank\" href=\"https://colab.research.google.com/github/google-gemini/cookbook/blob/main/examples/Opossum_search.ipynb\"><img src=\"https://www.tensorflow.org/images/colab_logo_32px.png\" />Run in Google Colab</a>\n",
        "  </td>\n",
        "</table>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mZsD3pqETKMV"
      },
      "source": [
        "This notebook contains a simple example of generating code with the Gemini API and Gemini 1.5 Pro. Just for fun, you'll prompt the model to create a web app called \"Opossum Search\" that searches Google with \"opossum\" appended to the query."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "5kHESAVZcZQD"
      },
      "source": [
        "<img src=\"https://storage.googleapis.com/generativeai-downloads/images/opossum_search.jpg\" alt=\"An image of the opossum search web app running in a browser\" width=\"500\"/>\n",
        "\n",
        "> The opossum image above is from [Wikimedia Commons](https://commons.wikimedia.org/wiki/File:Opossum_2.jpg), and shared under a CC BY-SA 2.5 license."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "UyZKDjRs-FN5"
      },
      "outputs": [],
      "source": [
        "!pip install -q -U google-generativeai"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "F0DZNupF-Lfj"
      },
      "outputs": [],
      "source": [
        "import google.generativeai as genai"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Dm7FFjBscek6"
      },
      "source": [
        "## Set up your API key\n",
        "\n",
        "To run the following cell, your API key must be stored it in a Colab Secret named `GOOGLE_API_KEY`. If you don't already have an API key, or you're not sure how to create a Colab Secret, see the [Authentication](https://github.com/google-gemini/gemini-api-cookbook/blob/main/quickstarts/Authentication.ipynb) quickstart for an example."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "IciW45ex-Lo9"
      },
      "outputs": [],
      "source": [
        "from google.colab import userdata\n",
        "GOOGLE_API_KEY=userdata.get('GOOGLE_API_KEY')\n",
        "genai.configure(api_key=GOOGLE_API_KEY)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "4V68II0ZeCjz"
      },
      "source": [
        "Prompt the model to generate the web app."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 2,
      "metadata": {
        "id": "mxYn5lUAfsUC"
      },
      "outputs": [],
      "source": [
        "instruction = \"\"\"You are a coding expert that specializes in creating web pages based on a user request.\n",
        "You create correct and simple code that is easy to understand.\n",
        "You implement all the functionality requested by the user.\n",
        "You ensure your code works properly, and you follow best practices for HTML programming.\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 3,
      "metadata": {
        "id": "igrg_SxPfwQ6"
      },
      "outputs": [],
      "source": [
        "prompt = \"\"\"Create a web app called Opossum Search:\n",
        "1. Every time you make a search query, it should redirect you to a Google search\n",
        "with the same query, but with the word opossum before it.\n",
        "2. It should be visually similar to Google search.\n",
        "3. Instead of the google logo, it should have a picture of this opossum: https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg.\n",
        "4. It should be a single HTML file, with no separate JS or CSS files.\n",
        "5. It should say Powered by opossum search in the footer.\n",
        "6. Do not use any unicode characters.\n",
        "Thank you!\"\"\""
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 4,
      "metadata": {
        "id": "-qpqkgTurqYI"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "```html\n",
            "<!DOCTYPE html>\n",
            "<html>\n",
            "<head>\n",
            "  <title>Opossum Search</title>\n",
            "  <style>\n",
            "    body {\n",
            "      font-family: sans-serif;\n",
            "    }\n",
            "    .container {\n",
            "      display: flex;\n",
            "      flex-direction: column;\n",
            "      align-items: center;\n",
            "      justify-content: center;\n",
            "      height: 100vh;\n",
            "    }\n",
            "    .logo {\n",
            "      width: 292px;\n",
            "      height: auto;\n",
            "      margin-bottom: 20px;\n",
            "    }\n",
            "    .search-bar {\n",
            "      display: flex;\n",
            "      width: 600px;\n",
            "      height: 40px;\n",
            "      border: 1px solid #ccc;\n",
            "      border-radius: 20px;\n",
            "      padding: 5px;\n",
            "    }\n",
            "    .search-bar input {\n",
            "      flex: 1;\n",
            "      border: none;\n",
            "      outline: none;\n",
            "      padding: 5px;\n",
            "      font-size: 16px;\n",
            "    }\n",
            "    .search-bar button {\n",
            "      background-color: #4285f4;\n",
            "      color: white;\n",
            "      border: none;\n",
            "      border-radius: 20px;\n",
            "      padding: 10px 15px;\n",
            "      cursor: pointer;\n",
            "    }\n",
            "    .footer {\n",
            "      margin-top: 20px;\n",
            "      text-align: center;\n",
            "      font-size: 12px;\n",
            "    }\n",
            "  </style>\n",
            "</head>\n",
            "<body>\n",
            "  <div class=\"container\">\n",
            "    <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg\" alt=\"Opossum\" class=\"logo\">\n",
            "    <form action=\"https://www.google.com/search\" method=\"get\">\n",
            "      <div class=\"search-bar\">\n",
            "        <input type=\"text\" name=\"q\" placeholder=\"Search the web\" required>\n",
            "        <button type=\"submit\">Search</button>\n",
            "      </div>\n",
            "      <input type=\"hidden\" name=\"q\" value=\"opossum \">\n",
            "    </form>\n",
            "  </div>\n",
            "  <div class=\"footer\">Powered by opossum search</div>\n",
            "</body>\n",
            "</html>\n",
            "```\n",
            "\n",
            "This HTML code creates a simple search page with the following features:\n",
            "\n",
            "*   **Opossum Logo:** Uses the provided image URL as the logo.\n",
            "*   **Search Bar:** Allows users to enter their search query.\n",
            "*   **Search Button:** Submits the form to Google with the \"opossum\" prefix.\n",
            "*   **Footer:**  Includes the \"Powered by opossum search\" text.\n",
            "\n",
            "**Explanation:**\n",
            "\n",
            "*   The code uses basic HTML tags for structuring the page.\n",
            "*   The `style` tag in the `<head>` contains inline CSS for basic styling.\n",
            "*   The form is set to target Google Search (`https://www.google.com/search`).\n",
            "*   The `<input type=\"hidden\">` field automatically adds \"opossum\" before the user's search query.\n",
            "*   The footer is styled to be centered and small.\n",
            "\n",
            "This code will provide a basic web app that functions as an \"Opossum Search\" with the required features.\n",
            "\n"
          ]
        }
      ],
      "source": [
        "model = genai.GenerativeModel(\"gemini-1.5-flash\", system_instruction=instruction)\n",
        "response = model.generate_content(prompt)\n",
        "print(response.text)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "Im4fvOK5S3-A"
      },
      "source": [
        "## Run the output locally\n",
        "\n",
        "You can start a web server as follows.\n",
        "\n",
        "* Save the HTML output to a file called `search.html`\n",
        "* In your terminal run `python3 -m http.server 8000`\n",
        "* Open your web browser, and point it to `http://localhost:8000/search.html`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "_wcKnJKIuBQg"
      },
      "source": [
        "## Display the output in IPython\n",
        "\n",
        "Like all LLMs, the output may not always be correct. You can experiment by rerunning the prompt, or by writing an improved one (and/or better system instructions). Have fun!"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": 5,
      "metadata": {
        "id": "M6FS75_bi5kP"
      },
      "outputs": [
        {
          "data": {
            "text/html": [
              "\n",
              "<!DOCTYPE html>\n",
              "<html>\n",
              "<head>\n",
              "  <title>Opossum Search</title>\n",
              "  <style>\n",
              "    body {\n",
              "      font-family: sans-serif;\n",
              "    }\n",
              "    .container {\n",
              "      display: flex;\n",
              "      flex-direction: column;\n",
              "      align-items: center;\n",
              "      justify-content: center;\n",
              "      height: 100vh;\n",
              "    }\n",
              "    .logo {\n",
              "      width: 292px;\n",
              "      height: auto;\n",
              "      margin-bottom: 20px;\n",
              "    }\n",
              "    .search-bar {\n",
              "      display: flex;\n",
              "      width: 600px;\n",
              "      height: 40px;\n",
              "      border: 1px solid #ccc;\n",
              "      border-radius: 20px;\n",
              "      padding: 5px;\n",
              "    }\n",
              "    .search-bar input {\n",
              "      flex: 1;\n",
              "      border: none;\n",
              "      outline: none;\n",
              "      padding: 5px;\n",
              "      font-size: 16px;\n",
              "    }\n",
              "    .search-bar button {\n",
              "      background-color: #4285f4;\n",
              "      color: white;\n",
              "      border: none;\n",
              "      border-radius: 20px;\n",
              "      padding: 10px 15px;\n",
              "      cursor: pointer;\n",
              "    }\n",
              "    .footer {\n",
              "      margin-top: 20px;\n",
              "      text-align: center;\n",
              "      font-size: 12px;\n",
              "    }\n",
              "  </style>\n",
              "</head>\n",
              "<body>\n",
              "  <div class=\"container\">\n",
              "    <img src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Opossum_2.jpg/292px-Opossum_2.jpg\" alt=\"Opossum\" class=\"logo\">\n",
              "    <form action=\"https://www.google.com/search\" method=\"get\">\n",
              "      <div class=\"search-bar\">\n",
              "        <input type=\"text\" name=\"q\" placeholder=\"Search the web\" required>\n",
              "        <button type=\"submit\">Search</button>\n",
              "      </div>\n",
              "      <input type=\"hidden\" name=\"q\" value=\"opossum \">\n",
              "    </form>\n",
              "  </div>\n",
              "  <div class=\"footer\">Powered by opossum search</div>\n",
              "</body>\n",
              "</html>\n"
            ],
            "text/plain": [
              "<IPython.core.display.HTML object>"
            ]
          },
          "execution_count": 5,
          "metadata": {},
          "output_type": "execute_result"
        }
      ],
      "source": [
        "import IPython\n",
        "code = response.text.split('```')[1][len('html'):]\n",
        "IPython.display.HTML(code)"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "name": "Opossum_search.ipynb",
      "toc_visible": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}