notebooks/svg_variations_ui_widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "bd811f91206293e6",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:25:34.736288400Z",
     "start_time": "2024-06-25T08:25:34.711931100Z"
    }
   },
   "outputs": [],
   "source": [
    "%load_ext autoreload\n",
    "%autoreload 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "793ea6ad30db8951",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:25:38.815141300Z",
     "start_time": "2024-06-25T08:25:34.735289700Z"
    }
   },
   "outputs": [],
   "source": [
    "from IPython.display import HTML\n",
    "\n",
    "from penai.llm.llm_model import RegisteredLLM\n",
    "from penai.registries.projects import SavedPenpotProject\n",
    "from penai.variations.svg_variations import (\n",
    "    SVGVariationsGenerator,\n",
    "    VariationDescriptionSequence,\n",
    "    VariationInstructionSnippet,\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "507b8a0dc6422eea",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "# Variations of an Input Field"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7f41585019d4f27d",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:25:39.956471100Z",
     "start_time": "2024-06-25T08:25:38.821166400Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "saved_project = SavedPenpotProject.GENERATIVE_VARIATIONS\n",
    "project = saved_project.load(pull=True)\n",
    "main_file = project.get_main_file()\n",
    "page_svg = saved_project.load_page_svg_with_viewboxes(\"examples\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ea8bb1f54f860125",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Generating Variations Depending on UI States (GPT-4o)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "451bf67f87f40e4f",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-18T15:23:35.980586600Z",
     "start_time": "2024-06-18T15:21:49.765466800Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "shape = page_svg.get_shape_by_name(\"Dark / Input / Rest\", require_unique=False)\n",
    "var_gen = SVGVariationsGenerator(shape=shape, semantics=\"input field\", model=RegisteredLLM.GPT4O)\n",
    "\n",
    "variations = var_gen.create_variations_sequentially(\n",
    "    variation_scope=VariationInstructionSnippet.SPECIFIC_COLORS_SHAPES,\n",
    "    variation_description_sequence=VariationDescriptionSequence.UI_ELEMENT_STATES)\n",
    "HTML(variations.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e067c526e558256",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Providing Context on Color Palette"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "2cce49b6fda27790",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-20T12:06:18.281604300Z",
     "start_time": "2024-06-20T12:06:18.209290100Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "main_file.colors.get_colors()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "23e0598fbebf65cc",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-20T12:06:18.209290100Z",
     "start_time": "2024-06-20T12:04:08.127061700Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "variations_col = var_gen.create_variations_sequentially(\n",
    "    variation_scope=VariationInstructionSnippet.SPECIFIC_COLORS_SHAPES,\n",
    "    variation_description_sequence=VariationDescriptionSequence.UI_ELEMENT_STATES,\n",
    "    colors=main_file.colors)\n",
    "HTML(variations_col.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "2f5d3c1a3f30167f",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Applying the Same Variations with a Different Model (Claude 3.5 Sonnet)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "ac8b96ae520d9a22",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T09:21:50.194108100Z",
     "start_time": "2024-06-25T09:21:48.343816700Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "shape = page_svg.get_shape_by_name(\"Dark / Input / Rest\", require_unique=False)\n",
    "var_gen = SVGVariationsGenerator(shape=shape, semantics=\"input field\", model=RegisteredLLM.CLAUDE_3_5_SONNET)\n",
    "\n",
    "variations = var_gen.create_variations_sequentially(\n",
    "    variation_scope=VariationInstructionSnippet.SPECIFIC_COLORS_SHAPES,\n",
    "    variation_description_sequence=VariationDescriptionSequence.UI_ELEMENT_STATES)\n",
    "HTML(variations.to_html())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3a22abc776189d48",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T09:21:53.883154800Z",
     "start_time": "2024-06-25T09:21:53.354415300Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "variations = var_gen.create_variations_sequentially(\n",
    "    variation_scope=VariationInstructionSnippet.SPECIFIC_COLORS_SHAPES,\n",
    "    variation_description_sequence=VariationDescriptionSequence.UI_ELEMENT_STATES,\n",
    "    colors=main_file.colors)\n",
    "HTML(variations.to_html())"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".venv",
   "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.11.9"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}