notebooks/svg_variation_transfer_ui_widget.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "bd811f91206293e6",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:30:28.264084500Z",
     "start_time": "2024-06-25T08:30:28.230985Z"
    }
   },
   "outputs": [],
   "source": [
    "%load_ext autoreload\n",
    "%autoreload 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "793ea6ad30db8951",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:30:31.565223900Z",
     "start_time": "2024-06-25T08:30:28.265083700Z"
    }
   },
   "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 SVGVariations, SVGVariationsGenerator"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "507b8a0dc6422eea",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "# Variations of a UI Element Based on Observed Variations of Another "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "7f41585019d4f27d",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:30:31.908821700Z",
     "start_time": "2024-06-25T08:30:31.565223900Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "page_svg = SavedPenpotProject.GENERATIVE_VARIATIONS.load_page_svg_with_viewboxes(\n",
    "    \"examples\"\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "451bf67f87f40e4f",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:30:32.473380500Z",
     "start_time": "2024-06-25T08:30:32.388844400Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "example_shape_orig = page_svg.get_shape_by_name(\n",
    "    \"Dark / Input / Rest\", require_unique=False\n",
    ")\n",
    "example_variations_dict = {}\n",
    "for name in (\"Focus\", \"Disabled\", \"Error\"):\n",
    "    shape = page_svg.get_shape_by_name(f\"Dark / Input / {name}\", require_unique=False)\n",
    "    example_variations_dict[name] = shape.to_svg().to_string()\n",
    "\n",
    "example_variations = SVGVariations(example_shape_orig.to_svg(), example_variations_dict)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "cc9076deade8e324",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Example Variations Presented to the Model"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "44db9b268dc86946",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-19T09:33:13.459514200Z",
     "start_time": "2024-06-19T09:33:13.378694300Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "HTML(example_variations.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "37944ee379163538",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Generating Variations for Another Shape Based on the Example Variations (GPT-4o)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "6a94e9ee1e65902a",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T08:30:38.608080400Z",
     "start_time": "2024-06-25T08:30:38.539890600Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "shape_orig = page_svg.get_shape_by_name(\"Dark / Text area / Rest\", require_unique=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "23e0598fbebf65cc",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T09:18:10.842944900Z",
     "start_time": "2024-06-25T09:18:09.505813700Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "var_gen = SVGVariationsGenerator(\n",
    "    shape=shape_orig, semantics=\"text area\", model=RegisteredLLM.GPT4O\n",
    ")\n",
    "\n",
    "variations = var_gen.create_variations_from_example_present_at_once(example_variations)\n",
    "HTML(variations.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "b5d4d84132ae869f",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "Alternative prompting approach where we present just one pair of original and variation and ask it to generate a variation for a different shape based on that. We repeat the process for each variation to be generated. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e4066ee5c86f63e9",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T09:20:18.024177900Z",
     "start_time": "2024-06-25T09:19:22.504579Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "variations = var_gen.create_variations_from_example(example_variations)\n",
    "HTML(variations.to_html())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "9ced0aacde8f8a89",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Generating Variations for Another Shape Based on the Example Variations (Claude 3.5 Sonnet)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "db2f6877e3c0e6a0",
   "metadata": {
    "ExecuteTime": {
     "end_time": "2024-06-25T09:20:19.348521700Z",
     "start_time": "2024-06-25T09:20:18.024177900Z"
    },
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "var_gen = SVGVariationsGenerator(\n",
    "    shape=shape_orig, semantics=\"text area\", model=RegisteredLLM.GPT4O\n",
    ")\n",
    "\n",
    "variations = var_gen.create_variations_from_example(example_variations)\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
}