notebook en.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The imports"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "import google.generativeai as genai\n",
    "from IPython.display import display, HTML\n",
    "import re\n",
    "import base64"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Setting up gemini"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "def setup_gemini(api_key: str):\n",
    "    \"\"\"Initialize Gemini with API key\"\"\"\n",
    "    genai.configure(api_key=api_key)\n",
    "    model = genai.GenerativeModel('models/gemini-2.0-flash-exp')\n",
    "    return model\n",
    "\n",
    "\n",
    "# Example usage in notebook:\n",
    "\n",
    "# Setup\n",
    "api_key = \"YOUR_API_KEY\"\n",
    "model = setup_gemini(api_key)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Prompt function"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "def create_drawing_prompt(user_input: str) -> str:\n",
    "    \"\"\"Creates a structured prompt for Gemini to generate HTML/CSS art\"\"\"\n",
    "    prompt = f\"\"\"\n",
    "    Create a drawing of: \"{user_input}\"\n",
    "    \n",
    "    Generate the complete HTML and CSS code that creates this drawing using only HTML and CSS (no JavaScript).\n",
    "    Requirements:\n",
    "    1. Use only HTML elements and CSS styles (divs, spans, pseudo-elements, etc.)\n",
    "    2. All dimensions should be in pixels (px) or percentages (%)\n",
    "    3. Use CSS gradients, shadows, and transforms where appropriate\n",
    "    4. Include all necessary CSS in a <style> tag\n",
    "    5. Make the drawing responsive and centered\n",
    "    6. All CSS should be inside the HTML file\n",
    "    7. The drawing should be contained within a main container of 400x400 pixels\n",
    "    \n",
    "    Provide ONLY the complete HTML code with embedded CSS, no explanations.\n",
    "    The code should start with <html> and end with </html>.\n",
    "    \"\"\"\n",
    "    return prompt"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# For treating the response"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "def extract_html(response: str) -> str:\n",
    "    \"\"\"Extract HTML code from Gemini's response\"\"\"\n",
    "    match = re.search(r'<html>.*?</html>', response, re.DOTALL)\n",
    "    if match:\n",
    "        return match.group(0)\n",
    "    match = re.search(r'<!DOCTYPE html>.*?</html>', response, re.DOTALL)\n",
    "    if match:\n",
    "        return match.group(0)\n",
    "    return response\n",
    "\n",
    "def create_viewer_html(html_code: str, prompt: str) -> str:\n",
    "    \"\"\"Create a beautiful viewer for the drawing and its code\"\"\"\n",
    "    # Encode the HTML code for safe display\n",
    "    encoded_html = base64.b64encode(html_code.encode()).decode()\n",
    "    \n",
    "    return f\"\"\"\n",
    "    <!DOCTYPE html>\n",
    "    <html>\n",
    "    <head>\n",
    "        <style>\n",
    "            .container {{\n",
    "                font-family: 'Arial', sans-serif;\n",
    "                max-width: 1200px;\n",
    "                margin: 20px auto;\n",
    "                background: white;\n",
    "                border-radius: 10px;\n",
    "                box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n",
    "                overflow: hidden;\n",
    "            }}\n",
    "            \n",
    "            .header {{\n",
    "                background: #f8f9fa;\n",
    "                padding: 20px;\n",
    "                border-bottom: 1px solid #eee;\n",
    "            }}\n",
    "            \n",
    "            .prompt {{\n",
    "                color: #666;\n",
    "                font-style: italic;\n",
    "                margin: 0;\n",
    "            }}\n",
    "            \n",
    "            .tabs {{\n",
    "                display: flex;\n",
    "                background: #fff;\n",
    "                border-bottom: 1px solid #eee;\n",
    "            }}\n",
    "            \n",
    "            .tab {{\n",
    "                padding: 15px 30px;\n",
    "                cursor: pointer;\n",
    "                border: none;\n",
    "                background: none;\n",
    "                font-size: 16px;\n",
    "                color: #666;\n",
    "                border-bottom: 2px solid transparent;\n",
    "            }}\n",
    "            \n",
    "            .tab.active {{\n",
    "                color: #007bff;\n",
    "                border-bottom: 2px solid #007bff;\n",
    "            }}\n",
    "            \n",
    "            .content {{\n",
    "                padding: 20px;\n",
    "            }}\n",
    "            \n",
    "            .panel {{\n",
    "                display: none;\n",
    "            }}\n",
    "            \n",
    "            .panel.active {{\n",
    "                display: block;\n",
    "            }}\n",
    "            \n",
    "            .drawing-container {{\n",
    "                width: 400px;\n",
    "                height: 400px;\n",
    "                margin: 0 auto;\n",
    "                border: 1px solid #eee;\n",
    "                border-radius: 5px;\n",
    "                overflow: hidden;\n",
    "            }}\n",
    "            \n",
    "            .code-container {{\n",
    "                background: #f8f9fa;\n",
    "                padding: 20px;\n",
    "                border-radius: 5px;\n",
    "                overflow-x: auto;\n",
    "            }}\n",
    "            \n",
    "            pre {{\n",
    "                margin: 0;\n",
    "                white-space: pre-wrap;\n",
    "                font-family: 'Courier New', monospace;\n",
    "                font-size: 14px;\n",
    "                line-height: 1.5;\n",
    "            }}\n",
    "            \n",
    "            .copy-button {{\n",
    "                float: right;\n",
    "                padding: 8px 15px;\n",
    "                background: #007bff;\n",
    "                color: white;\n",
    "                border: none;\n",
    "                border-radius: 4px;\n",
    "                cursor: pointer;\n",
    "                margin-bottom: 10px;\n",
    "            }}\n",
    "            \n",
    "            .copy-button:hover {{\n",
    "                background: #0056b3;\n",
    "            }}\n",
    "        </style>\n",
    "    </head>\n",
    "    <body>\n",
    "        <div class=\"container\">\n",
    "            <div class=\"header\">\n",
    "                <p class=\"prompt\">Drawing prompt: \"{prompt}\"</p>\n",
    "            </div>\n",
    "            \n",
    "            <div class=\"tabs\">\n",
    "                <button class=\"tab active\" onclick=\"showPanel('drawing')\">Drawing</button>\n",
    "                <button class=\"tab\" onclick=\"showPanel('code')\">Source Code</button>\n",
    "            </div>\n",
    "            \n",
    "            <div class=\"content\">\n",
    "                <div class=\"panel active\" id=\"drawing-panel\">\n",
    "                    <div class=\"drawing-container\">\n",
    "                        <iframe id=\"drawing-frame\" style=\"width: 100%; height: 100%; border: none;\"\n",
    "                                srcdoc=\"{html_code.replace('\"', '&quot;')}\"></iframe>\n",
    "                    </div>\n",
    "                </div>\n",
    "                \n",
    "                <div class=\"panel\" id=\"code-panel\">\n",
    "                    <button class=\"copy-button\" onclick=\"copyCode()\">Copy Code</button>\n",
    "                    <div class=\"code-container\">\n",
    "                        <pre><code>{html_code.replace('<', '&lt;').replace('>', '&gt;')}</code></pre>\n",
    "                    </div>\n",
    "                </div>\n",
    "            </div>\n",
    "        </div>\n",
    "        \n",
    "        <script>\n",
    "            function showPanel(panelName) {{\n",
    "                // Update tabs\n",
    "                document.querySelectorAll('.tab').forEach(tab => {{\n",
    "                    tab.classList.remove('active');\n",
    "                }});\n",
    "                document.querySelector(`[onclick=\"showPanel('${{panelName}}')\"]`).classList.add('active');\n",
    "                \n",
    "                // Update panels\n",
    "                document.querySelectorAll('.panel').forEach(panel => {{\n",
    "                    panel.classList.remove('active');\n",
    "                }});\n",
    "                document.getElementById(`${{panelName}}-panel`).classList.add('active');\n",
    "            }}\n",
    "            \n",
    "            function copyCode() {{\n",
    "                const code = atob('{encoded_html}');\n",
    "                navigator.clipboard.writeText(code).then(() => {{\n",
    "                    const button = document.querySelector('.copy-button');\n",
    "                    button.textContent = 'Copied!';\n",
    "                    setTimeout(() => {{\n",
    "                        button.textContent = 'Copy Code';\n",
    "                    }}, 2000);\n",
    "                }});\n",
    "            }}\n",
    "        </script>\n",
    "    </body>\n",
    "    </html>\n",
    "    \"\"\"\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Test"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <!DOCTYPE html>\n",
       "    <html>\n",
       "    <head>\n",
       "        <style>\n",
       "            .container {\n",
       "                font-family: 'Arial', sans-serif;\n",
       "                max-width: 1200px;\n",
       "                margin: 20px auto;\n",
       "                background: white;\n",
       "                border-radius: 10px;\n",
       "                box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n",
       "                overflow: hidden;\n",
       "            }\n",
       "            \n",
       "            .header {\n",
       "                background: #f8f9fa;\n",
       "                padding: 20px;\n",
       "                border-bottom: 1px solid #eee;\n",
       "            }\n",
       "            \n",
       "            .prompt {\n",
       "                color: #666;\n",
       "                font-style: italic;\n",
       "                margin: 0;\n",
       "            }\n",
       "            \n",
       "            .tabs {\n",
       "                display: flex;\n",
       "                background: #fff;\n",
       "                border-bottom: 1px solid #eee;\n",
       "            }\n",
       "            \n",
       "            .tab {\n",
       "                padding: 15px 30px;\n",
       "                cursor: pointer;\n",
       "                border: none;\n",
       "                background: none;\n",
       "                font-size: 16px;\n",
       "                color: #666;\n",
       "                border-bottom: 2px solid transparent;\n",
       "            }\n",
       "            \n",
       "            .tab.active {\n",
       "                color: #007bff;\n",
       "                border-bottom: 2px solid #007bff;\n",
       "            }\n",
       "            \n",
       "            .content {\n",
       "                padding: 20px;\n",
       "            }\n",
       "            \n",
       "            .panel {\n",
       "                display: none;\n",
       "            }\n",
       "            \n",
       "            .panel.active {\n",
       "                display: block;\n",
       "            }\n",
       "            \n",
       "            .drawing-container {\n",
       "                width: 400px;\n",
       "                height: 400px;\n",
       "                margin: 0 auto;\n",
       "                border: 1px solid #eee;\n",
       "                border-radius: 5px;\n",
       "                overflow: hidden;\n",
       "            }\n",
       "            \n",
       "            .code-container {\n",
       "                background: #f8f9fa;\n",
       "                padding: 20px;\n",
       "                border-radius: 5px;\n",
       "                overflow-x: auto;\n",
       "            }\n",
       "            \n",
       "            pre {\n",
       "                margin: 0;\n",
       "                white-space: pre-wrap;\n",
       "                font-family: 'Courier New', monospace;\n",
       "                font-size: 14px;\n",
       "                line-height: 1.5;\n",
       "            }\n",
       "            \n",
       "            .copy-button {\n",
       "                float: right;\n",
       "                padding: 8px 15px;\n",
       "                background: #007bff;\n",
       "                color: white;\n",
       "                border: none;\n",
       "                border-radius: 4px;\n",
       "                cursor: pointer;\n",
       "                margin-bottom: 10px;\n",
       "            }\n",
       "            \n",
       "            .copy-button:hover {\n",
       "                background: #0056b3;\n",
       "            }\n",
       "        </style>\n",
       "    </head>\n",
       "    <body>\n",
       "        <div class=\"container\">\n",
       "            <div class=\"header\">\n",
       "                <p class=\"prompt\">Drawing prompt: \"a cute cartoon cat playing with a ball of yarn\"</p>\n",
       "            </div>\n",
       "            \n",
       "            <div class=\"tabs\">\n",
       "                <button class=\"tab active\" onclick=\"showPanel('drawing')\">Drawing</button>\n",
       "                <button class=\"tab\" onclick=\"showPanel('code')\">Source Code</button>\n",
       "            </div>\n",
       "            \n",
       "            <div class=\"content\">\n",
       "                <div class=\"panel active\" id=\"drawing-panel\">\n",
       "                    <div class=\"drawing-container\">\n",
       "                        <iframe id=\"drawing-frame\" style=\"width: 100%; height: 100%; border: none;\"\n",
       "                                srcdoc=\"<!DOCTYPE html>\n",
       "<html lang=&quot;en&quot;>\n",
       "<head>\n",
       "    <meta charset=&quot;UTF-8&quot;>\n",
       "    <meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;>\n",
       "    <title>Cute Cat with Yarn</title>\n",
       "    <style>\n",
       "        body {\n",
       "            display: flex;\n",
       "            justify-content: center;\n",
       "            align-items: center;\n",
       "            min-height: 100vh;\n",
       "            margin: 0;\n",
       "            background-color: #f0f0f0;\n",
       "        }\n",
       "        .container {\n",
       "            width: 400px;\n",
       "            height: 400px;\n",
       "            position: relative;\n",
       "            background-color: #ffffff;\n",
       "            border-radius: 10px;\n",
       "            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n",
       "        }\n",
       "        .cat-body {\n",
       "            position: absolute;\n",
       "            width: 150px;\n",
       "            height: 100px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;\n",
       "            bottom: 70px;\n",
       "            left: 125px;\n",
       "            transform: rotate(-10deg);\n",
       "        }\n",
       "        .cat-head {\n",
       "            position: absolute;\n",
       "            width: 80px;\n",
       "            height: 80px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50%;\n",
       "            top: 70px;\n",
       "            left: 160px;\n",
       "            z-index: 1;\n",
       "        }\n",
       "        .cat-ear-left {\n",
       "            position: absolute;\n",
       "            width: 40px;\n",
       "            height: 40px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 0 0 0;\n",
       "            top: 50px;\n",
       "            left: 140px;\n",
       "            transform: rotate(-30deg);\n",
       "        }\n",
       "        .cat-ear-right {\n",
       "            position: absolute;\n",
       "            width: 40px;\n",
       "            height: 40px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 0 50% 0 0;\n",
       "            top: 50px;\n",
       "            right: 140px;\n",
       "            transform: rotate(30deg);\n",
       "        }\n",
       "        .cat-eye-left {\n",
       "            position: absolute;\n",
       "            width: 15px;\n",
       "            height: 15px;\n",
       "            background-color: #000;\n",
       "            border-radius: 50%;\n",
       "            top: 105px;\n",
       "            left: 175px;\n",
       "            \n",
       "        }\n",
       "         .cat-eye-right {\n",
       "            position: absolute;\n",
       "            width: 15px;\n",
       "            height: 15px;\n",
       "            background-color: #000;\n",
       "            border-radius: 50%;\n",
       "            top: 105px;\n",
       "            right: 175px;\n",
       "\n",
       "        }\n",
       "\n",
       "        .cat-nose {\n",
       "            position: absolute;\n",
       "            width: 10px;\n",
       "            height: 8px;\n",
       "            background-color: #e75480;\n",
       "            border-radius: 50% 50% 80% 80%/ 50% 50% 70% 70%;\n",
       "            top: 125px;\n",
       "            left: 195px;\n",
       "        }\n",
       "        .cat-mouth {\n",
       "            position: absolute;\n",
       "            width: 20px;\n",
       "            height: 10px;\n",
       "            border-bottom: 2px solid #000;\n",
       "            top: 135px;\n",
       "            left: 190px;\n",
       "            border-radius: 0 0 100% 100%/ 0 0 50% 50%;\n",
       "        }\n",
       "\n",
       "         .cat-whisker-left-top {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 125px;\n",
       "            left: 150px;\n",
       "            transform: rotate(15deg);\n",
       "           \n",
       "        }\n",
       "        .cat-whisker-left-bottom {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 135px;\n",
       "            left: 150px;\n",
       "            transform: rotate(-15deg);\n",
       "        }\n",
       "        .cat-whisker-right-top {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 125px;\n",
       "            right: 150px;\n",
       "             transform: rotate(-15deg);\n",
       "            \n",
       "        }\n",
       "        .cat-whisker-right-bottom {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 135px;\n",
       "            right: 150px;\n",
       "            transform: rotate(15deg);\n",
       "        }\n",
       "        .yarn-ball {\n",
       "            position: absolute;\n",
       "            width: 50px;\n",
       "            height: 50px;\n",
       "            background-color: #f08080;\n",
       "            border-radius: 50%;\n",
       "            bottom: 100px;\n",
       "            left: 80px;\n",
       "            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);\n",
       "        }\n",
       "        .yarn-string {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 30px;\n",
       "            border: 2px dashed #fff;\n",
       "            border-radius: 50%;\n",
       "            bottom: 105px;\n",
       "            left: 120px;\n",
       "        }\n",
       "        \n",
       "        .paw-left{\n",
       "          position: absolute;\n",
       "            width: 30px;\n",
       "            height: 20px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 0 0;\n",
       "            bottom: 60px;\n",
       "            left: 120px;\n",
       "             transform: rotate(-10deg);\n",
       "        }\n",
       "         .paw-right{\n",
       "          position: absolute;\n",
       "            width: 30px;\n",
       "            height: 20px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 0 0;\n",
       "            bottom: 60px;\n",
       "            right: 120px;\n",
       "             transform: rotate(10deg);\n",
       "        }\n",
       "    </style>\n",
       "</head>\n",
       "<body>\n",
       "    <div class=&quot;container&quot;>\n",
       "        <div class=&quot;cat-body&quot;></div>\n",
       "        <div class=&quot;cat-head&quot;></div>\n",
       "        <div class=&quot;cat-ear-left&quot;></div>\n",
       "        <div class=&quot;cat-ear-right&quot;></div>\n",
       "        <div class=&quot;cat-eye-left&quot;></div>\n",
       "        <div class=&quot;cat-eye-right&quot;></div>\n",
       "        <div class=&quot;cat-nose&quot;></div>\n",
       "         <div class=&quot;cat-mouth&quot;></div>\n",
       "         <div class=&quot;cat-whisker-left-top&quot;></div>\n",
       "        <div class=&quot;cat-whisker-left-bottom&quot;></div>\n",
       "        <div class=&quot;cat-whisker-right-top&quot;></div>\n",
       "        <div class=&quot;cat-whisker-right-bottom&quot;></div>\n",
       "        <div class=&quot;yarn-ball&quot;></div>\n",
       "        <div class=&quot;yarn-string&quot;></div>\n",
       "        <div class=&quot;paw-left&quot;></div>\n",
       "         <div class=&quot;paw-right&quot;></div>\n",
       "    </div>\n",
       "</body>\n",
       "</html>\"></iframe>\n",
       "                    </div>\n",
       "                </div>\n",
       "                \n",
       "                <div class=\"panel\" id=\"code-panel\">\n",
       "                    <button class=\"copy-button\" onclick=\"copyCode()\">Copy Code</button>\n",
       "                    <div class=\"code-container\">\n",
       "                        <pre><code>&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=\"en\"&gt;\n",
       "&lt;head&gt;\n",
       "    &lt;meta charset=\"UTF-8\"&gt;\n",
       "    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n",
       "    &lt;title&gt;Cute Cat with Yarn&lt;/title&gt;\n",
       "    &lt;style&gt;\n",
       "        body {\n",
       "            display: flex;\n",
       "            justify-content: center;\n",
       "            align-items: center;\n",
       "            min-height: 100vh;\n",
       "            margin: 0;\n",
       "            background-color: #f0f0f0;\n",
       "        }\n",
       "        .container {\n",
       "            width: 400px;\n",
       "            height: 400px;\n",
       "            position: relative;\n",
       "            background-color: #ffffff;\n",
       "            border-radius: 10px;\n",
       "            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n",
       "        }\n",
       "        .cat-body {\n",
       "            position: absolute;\n",
       "            width: 150px;\n",
       "            height: 100px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 50% 50%/ 60% 60% 40% 40%;\n",
       "            bottom: 70px;\n",
       "            left: 125px;\n",
       "            transform: rotate(-10deg);\n",
       "        }\n",
       "        .cat-head {\n",
       "            position: absolute;\n",
       "            width: 80px;\n",
       "            height: 80px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50%;\n",
       "            top: 70px;\n",
       "            left: 160px;\n",
       "            z-index: 1;\n",
       "        }\n",
       "        .cat-ear-left {\n",
       "            position: absolute;\n",
       "            width: 40px;\n",
       "            height: 40px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 0 0 0;\n",
       "            top: 50px;\n",
       "            left: 140px;\n",
       "            transform: rotate(-30deg);\n",
       "        }\n",
       "        .cat-ear-right {\n",
       "            position: absolute;\n",
       "            width: 40px;\n",
       "            height: 40px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 0 50% 0 0;\n",
       "            top: 50px;\n",
       "            right: 140px;\n",
       "            transform: rotate(30deg);\n",
       "        }\n",
       "        .cat-eye-left {\n",
       "            position: absolute;\n",
       "            width: 15px;\n",
       "            height: 15px;\n",
       "            background-color: #000;\n",
       "            border-radius: 50%;\n",
       "            top: 105px;\n",
       "            left: 175px;\n",
       "            \n",
       "        }\n",
       "         .cat-eye-right {\n",
       "            position: absolute;\n",
       "            width: 15px;\n",
       "            height: 15px;\n",
       "            background-color: #000;\n",
       "            border-radius: 50%;\n",
       "            top: 105px;\n",
       "            right: 175px;\n",
       "\n",
       "        }\n",
       "\n",
       "        .cat-nose {\n",
       "            position: absolute;\n",
       "            width: 10px;\n",
       "            height: 8px;\n",
       "            background-color: #e75480;\n",
       "            border-radius: 50% 50% 80% 80%/ 50% 50% 70% 70%;\n",
       "            top: 125px;\n",
       "            left: 195px;\n",
       "        }\n",
       "        .cat-mouth {\n",
       "            position: absolute;\n",
       "            width: 20px;\n",
       "            height: 10px;\n",
       "            border-bottom: 2px solid #000;\n",
       "            top: 135px;\n",
       "            left: 190px;\n",
       "            border-radius: 0 0 100% 100%/ 0 0 50% 50%;\n",
       "        }\n",
       "\n",
       "         .cat-whisker-left-top {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 125px;\n",
       "            left: 150px;\n",
       "            transform: rotate(15deg);\n",
       "           \n",
       "        }\n",
       "        .cat-whisker-left-bottom {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 135px;\n",
       "            left: 150px;\n",
       "            transform: rotate(-15deg);\n",
       "        }\n",
       "        .cat-whisker-right-top {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 125px;\n",
       "            right: 150px;\n",
       "             transform: rotate(-15deg);\n",
       "            \n",
       "        }\n",
       "        .cat-whisker-right-bottom {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 1px;\n",
       "            background-color: #000;\n",
       "            top: 135px;\n",
       "            right: 150px;\n",
       "            transform: rotate(15deg);\n",
       "        }\n",
       "        .yarn-ball {\n",
       "            position: absolute;\n",
       "            width: 50px;\n",
       "            height: 50px;\n",
       "            background-color: #f08080;\n",
       "            border-radius: 50%;\n",
       "            bottom: 100px;\n",
       "            left: 80px;\n",
       "            box-shadow: 2px 2px 5px rgba(0,0,0,0.3);\n",
       "        }\n",
       "        .yarn-string {\n",
       "            position: absolute;\n",
       "            width: 30px;\n",
       "            height: 30px;\n",
       "            border: 2px dashed #fff;\n",
       "            border-radius: 50%;\n",
       "            bottom: 105px;\n",
       "            left: 120px;\n",
       "        }\n",
       "        \n",
       "        .paw-left{\n",
       "          position: absolute;\n",
       "            width: 30px;\n",
       "            height: 20px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 0 0;\n",
       "            bottom: 60px;\n",
       "            left: 120px;\n",
       "             transform: rotate(-10deg);\n",
       "        }\n",
       "         .paw-right{\n",
       "          position: absolute;\n",
       "            width: 30px;\n",
       "            height: 20px;\n",
       "            background-color: #ffcc80;\n",
       "            border-radius: 50% 50% 0 0;\n",
       "            bottom: 60px;\n",
       "            right: 120px;\n",
       "             transform: rotate(10deg);\n",
       "        }\n",
       "    &lt;/style&gt;\n",
       "&lt;/head&gt;\n",
       "&lt;body&gt;\n",
       "    &lt;div class=\"container\"&gt;\n",
       "        &lt;div class=\"cat-body\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-head\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-ear-left\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-ear-right\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-eye-left\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-eye-right\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-nose\"&gt;&lt;/div&gt;\n",
       "         &lt;div class=\"cat-mouth\"&gt;&lt;/div&gt;\n",
       "         &lt;div class=\"cat-whisker-left-top\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-whisker-left-bottom\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-whisker-right-top\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"cat-whisker-right-bottom\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"yarn-ball\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"yarn-string\"&gt;&lt;/div&gt;\n",
       "        &lt;div class=\"paw-left\"&gt;&lt;/div&gt;\n",
       "         &lt;div class=\"paw-right\"&gt;&lt;/div&gt;\n",
       "    &lt;/div&gt;\n",
       "&lt;/body&gt;\n",
       "&lt;/html&gt;</code></pre>\n",
       "                    </div>\n",
       "                </div>\n",
       "            </div>\n",
       "        </div>\n",
       "        \n",
       "        <script>\n",
       "            function showPanel(panelName) {\n",
       "                // Update tabs\n",
       "                document.querySelectorAll('.tab').forEach(tab => {\n",
       "                    tab.classList.remove('active');\n",
       "                });\n",
       "                document.querySelector(`[onclick=\"showPanel('${panelName}')\"]`).classList.add('active');\n",
       "                \n",
       "                // Update panels\n",
       "                document.querySelectorAll('.panel').forEach(panel => {\n",
       "                    panel.classList.remove('active');\n",
       "                });\n",
       "                document.getElementById(`${panelName}-panel`).classList.add('active');\n",
       "            }\n",
       "            \n",
       "            function copyCode() {\n",
       "                const code = atob('PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KPGhlYWQ+CiAgICA8bWV0YSBjaGFyc2V0PSJVVEYtOCI+CiAgICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgICA8dGl0bGU+Q3V0ZSBDYXQgd2l0aCBZYXJuPC90aXRsZT4KICAgIDxzdHlsZT4KICAgICAgICBib2R5IHsKICAgICAgICAgICAgZGlzcGxheTogZmxleDsKICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7CiAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgICAgICAgICAgIG1pbi1oZWlnaHQ6IDEwMHZoOwogICAgICAgICAgICBtYXJnaW46IDA7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICNmMGYwZjA7CiAgICAgICAgfQogICAgICAgIC5jb250YWluZXIgewogICAgICAgICAgICB3aWR0aDogNDAwcHg7CiAgICAgICAgICAgIGhlaWdodDogNDAwcHg7CiAgICAgICAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZmZmZjsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMTBweDsKICAgICAgICAgICAgYm94LXNoYWRvdzogMCAwIDEwcHggcmdiYSgwLCAwLCAwLCAwLjIpOwogICAgICAgIH0KICAgICAgICAuY2F0LWJvZHkgewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIHdpZHRoOiAxNTBweDsKICAgICAgICAgICAgaGVpZ2h0OiAxMDBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmY2M4MDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIDUwJSA1MCUgNTAlLyA2MCUgNjAlIDQwJSA0MCU7CiAgICAgICAgICAgIGJvdHRvbTogNzBweDsKICAgICAgICAgICAgbGVmdDogMTI1cHg7CiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0xMGRlZyk7CiAgICAgICAgfQogICAgICAgIC5jYXQtaGVhZCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDgwcHg7CiAgICAgICAgICAgIGhlaWdodDogODBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmY2M4MDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgICAgICAgICB0b3A6IDcwcHg7CiAgICAgICAgICAgIGxlZnQ6IDE2MHB4OwogICAgICAgICAgICB6LWluZGV4OiAxOwogICAgICAgIH0KICAgICAgICAuY2F0LWVhci1sZWZ0IHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICB3aWR0aDogNDBweDsKICAgICAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZjYzgwOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgMCAwIDA7CiAgICAgICAgICAgIHRvcDogNTBweDsKICAgICAgICAgICAgbGVmdDogMTQwcHg7CiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKC0zMGRlZyk7CiAgICAgICAgfQogICAgICAgIC5jYXQtZWFyLXJpZ2h0IHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICB3aWR0aDogNDBweDsKICAgICAgICAgICAgaGVpZ2h0OiA0MHB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZmZjYzgwOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiAwIDUwJSAwIDA7CiAgICAgICAgICAgIHRvcDogNTBweDsKICAgICAgICAgICAgcmlnaHQ6IDE0MHB4OwogICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzMGRlZyk7CiAgICAgICAgfQogICAgICAgIC5jYXQtZXllLWxlZnQgewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIHdpZHRoOiAxNXB4OwogICAgICAgICAgICBoZWlnaHQ6IDE1cHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDA7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICAgICAgdG9wOiAxMDVweDsKICAgICAgICAgICAgbGVmdDogMTc1cHg7CiAgICAgICAgICAgIAogICAgICAgIH0KICAgICAgICAgLmNhdC1leWUtcmlnaHQgewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIHdpZHRoOiAxNXB4OwogICAgICAgICAgICBoZWlnaHQ6IDE1cHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDA7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICAgICAgdG9wOiAxMDVweDsKICAgICAgICAgICAgcmlnaHQ6IDE3NXB4OwoKICAgICAgICB9CgogICAgICAgIC5jYXQtbm9zZSB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDEwcHg7CiAgICAgICAgICAgIGhlaWdodDogOHB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjZTc1NDgwOwogICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1MCUgNTAlIDgwJSA4MCUvIDUwJSA1MCUgNzAlIDcwJTsKICAgICAgICAgICAgdG9wOiAxMjVweDsKICAgICAgICAgICAgbGVmdDogMTk1cHg7CiAgICAgICAgfQogICAgICAgIC5jYXQtbW91dGggewogICAgICAgICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgICAgICAgIHdpZHRoOiAyMHB4OwogICAgICAgICAgICBoZWlnaHQ6IDEwcHg7CiAgICAgICAgICAgIGJvcmRlci1ib3R0b206IDJweCBzb2xpZCAjMDAwOwogICAgICAgICAgICB0b3A6IDEzNXB4OwogICAgICAgICAgICBsZWZ0OiAxOTBweDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwIDEwMCUgMTAwJS8gMCAwIDUwJSA1MCU7CiAgICAgICAgfQoKICAgICAgICAgLmNhdC13aGlza2VyLWxlZnQtdG9wIHsKICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICAgICAgICB3aWR0aDogMzBweDsKICAgICAgICAgICAgaGVpZ2h0OiAxcHg7CiAgICAgICAgICAgIGJhY2tncm91bmQtY29sb3I6ICMwMDA7CiAgICAgICAgICAgIHRvcDogMTI1cHg7CiAgICAgICAgICAgIGxlZnQ6IDE1MHB4OwogICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxNWRlZyk7CiAgICAgICAgICAgCiAgICAgICAgfQogICAgICAgIC5jYXQtd2hpc2tlci1sZWZ0LWJvdHRvbSB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMXB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwOwogICAgICAgICAgICB0b3A6IDEzNXB4OwogICAgICAgICAgICBsZWZ0OiAxNTBweDsKICAgICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoLTE1ZGVnKTsKICAgICAgICB9CiAgICAgICAgLmNhdC13aGlza2VyLXJpZ2h0LXRvcCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMXB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwOwogICAgICAgICAgICB0b3A6IDEyNXB4OwogICAgICAgICAgICByaWdodDogMTUwcHg7CiAgICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgtMTVkZWcpOwogICAgICAgICAgICAKICAgICAgICB9CiAgICAgICAgLmNhdC13aGlza2VyLXJpZ2h0LWJvdHRvbSB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMXB4OwogICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDAwOwogICAgICAgICAgICB0b3A6IDEzNXB4OwogICAgICAgICAgICByaWdodDogMTUwcHg7CiAgICAgICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE1ZGVnKTsKICAgICAgICB9CiAgICAgICAgLnlhcm4tYmFsbCB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDUwcHg7CiAgICAgICAgICAgIGhlaWdodDogNTBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2YwODA4MDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlOwogICAgICAgICAgICBib3R0b206IDEwMHB4OwogICAgICAgICAgICBsZWZ0OiA4MHB4OwogICAgICAgICAgICBib3gtc2hhZG93OiAycHggMnB4IDVweCByZ2JhKDAsMCwwLDAuMyk7CiAgICAgICAgfQogICAgICAgIC55YXJuLXN0cmluZyB7CiAgICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMzBweDsKICAgICAgICAgICAgYm9yZGVyOiAycHggZGFzaGVkICNmZmY7CiAgICAgICAgICAgIGJvcmRlci1yYWRpdXM6IDUwJTsKICAgICAgICAgICAgYm90dG9tOiAxMDVweDsKICAgICAgICAgICAgbGVmdDogMTIwcHg7CiAgICAgICAgfQogICAgICAgIAogICAgICAgIC5wYXctbGVmdHsKICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMjBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmY2M4MDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIDUwJSAwIDA7CiAgICAgICAgICAgIGJvdHRvbTogNjBweDsKICAgICAgICAgICAgbGVmdDogMTIwcHg7CiAgICAgICAgICAgICB0cmFuc2Zvcm06IHJvdGF0ZSgtMTBkZWcpOwogICAgICAgIH0KICAgICAgICAgLnBhdy1yaWdodHsKICAgICAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgICAgICAgd2lkdGg6IDMwcHg7CiAgICAgICAgICAgIGhlaWdodDogMjBweDsKICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogI2ZmY2M4MDsKICAgICAgICAgICAgYm9yZGVyLXJhZGl1czogNTAlIDUwJSAwIDA7CiAgICAgICAgICAgIGJvdHRvbTogNjBweDsKICAgICAgICAgICAgcmlnaHQ6IDEyMHB4OwogICAgICAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMTBkZWcpOwogICAgICAgIH0KICAgIDwvc3R5bGU+CjwvaGVhZD4KPGJvZHk+CiAgICA8ZGl2IGNsYXNzPSJjb250YWluZXIiPgogICAgICAgIDxkaXYgY2xhc3M9ImNhdC1ib2R5Ij48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJjYXQtaGVhZCI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0iY2F0LWVhci1sZWZ0Ij48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJjYXQtZWFyLXJpZ2h0Ij48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJjYXQtZXllLWxlZnQiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImNhdC1leWUtcmlnaHQiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImNhdC1ub3NlIj48L2Rpdj4KICAgICAgICAgPGRpdiBjbGFzcz0iY2F0LW1vdXRoIj48L2Rpdj4KICAgICAgICAgPGRpdiBjbGFzcz0iY2F0LXdoaXNrZXItbGVmdC10b3AiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImNhdC13aGlza2VyLWxlZnQtYm90dG9tIj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJjYXQtd2hpc2tlci1yaWdodC10b3AiPjwvZGl2PgogICAgICAgIDxkaXYgY2xhc3M9ImNhdC13aGlza2VyLXJpZ2h0LWJvdHRvbSI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0ieWFybi1iYWxsIj48L2Rpdj4KICAgICAgICA8ZGl2IGNsYXNzPSJ5YXJuLXN0cmluZyI+PC9kaXY+CiAgICAgICAgPGRpdiBjbGFzcz0icGF3LWxlZnQiPjwvZGl2PgogICAgICAgICA8ZGl2IGNsYXNzPSJwYXctcmlnaHQiPjwvZGl2PgogICAgPC9kaXY+CjwvYm9keT4KPC9odG1sPg==');\n",
       "                navigator.clipboard.writeText(code).then(() => {\n",
       "                    const button = document.querySelector('.copy-button');\n",
       "                    button.textContent = 'Copied!';\n",
       "                    setTimeout(() => {\n",
       "                        button.textContent = 'Copy Code';\n",
       "                    }, 2000);\n",
       "                });\n",
       "            }\n",
       "        </script>\n",
       "    </body>\n",
       "    </html>\n",
       "    "
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "def generate_drawing(model, user_input: str) -> str:\n",
    "    \"\"\"Main function to generate and display the drawing\"\"\"\n",
    "    # Create prompt\n",
    "    prompt = create_drawing_prompt(user_input)\n",
    "    \n",
    "    # Get response from Gemini\n",
    "    response = model.generate_content(prompt)\n",
    "    \n",
    "    # Extract HTML\n",
    "    html_code = extract_html(response.text)\n",
    "    \n",
    "    # Create and display viewer\n",
    "    viewer_html = create_viewer_html(html_code, user_input)\n",
    "    display(HTML(viewer_html))\n",
    "    \n",
    "    return html_code\n",
    "\n",
    "# Example usage :\n",
    "\n",
    "\n",
    "# Generate a drawing\n",
    "user_input = \"a cute cartoon cat playing with a ball of yarn\"\n",
    "html_code = generate_drawing(model, user_input)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}