Approach-Documentation_generation_from_cleaned_SVG/demo/ui2docs.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# UI2️⃣Docs "
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This notebook is a demo of the proposed approach of generating documentation from a cleaned SVG file using LLM(chatGPT in this case) with pre-processing and setup prompts. Please, followo the setup instructions below to run the demo.\n",
    "\n",
    "## Setup\n",
    "#### 0. Install Python\n",
    "If Python and pip are not already installed on your system, you can install them using Homebrew, a package manager for MacOS. If you don't have Homebrew installed, you can install it by running the following command in your terminal:\n",
    "\n",
    "```bash\n",
    "/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n",
    "```\n",
    "\n",
    "```bash\n",
    "brew install python\n",
    "```\n",
    "\n",
    "#### 1. Install dependencies\n",
    "\n",
    "```bash\n",
    "pip install -r requirements.txt\n",
    "```\n",
    "\n",
    "#### 2. Create OpenAI account and get API key\n",
    "\n",
    "1. Go to the [OpenAI website](https://openai.com/) and create an account.\n",
    "2. Once you have an account, go to the [API keys page](https://beta.openai.com/account/api-keys) and generate a new API key.\n",
    "3. Copy the API key and save it somewhere safe.\n",
    "\n",
    "#### 3. Set up environment configuration\n",
    "\n",
    "1. Create a new file named config.yaml in the root directory of the project. Basically, one folder above this notebook and repo. \n",
    "2. Copy the contents of the `config.yaml.example` file into the new `config.yaml` file.\n",
    "3. Replace the `OPENAI_API_KEY` dummy value with the API key you generated in the previous step.\n",
    "\n",
    "#### Run this notebook\n",
    "\n",
    "\n",
    "\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [],
   "source": [
    "import yaml\n",
    "import sys, os\n",
    "\n",
    "from IPython.display import Image, SVG, Markdown\n",
    "\n",
    "sys.path.append(os.path.abspath(os.path.join(os.getcwd(), os.pardir)))\n",
    "\n",
    "from src.utils import *\n",
    "from src.gpt_wrappers import *\n",
    "\n",
    "# show svg \n",
    "def show_svg(file):\n",
    "    display(SVG(file))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# load yaml config\n",
    "with open(\"../../../config.yaml\", \"r\") as f:\n",
    "    config = yaml.safe_load(f)\n",
    "    \n",
    "openai.api_key = config[\"OPENAI_KEY\"]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# OR , if using Google Colab, uncomment below\n",
    "#openai.api_key = \"replace-with-your-key\"\n",
    "# !pip install openai==0.27.4 reportlab==3.6.12 svglib==1.5.1 PyYAML"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 🤖 System setup\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "system_prompt = \"\"\"\n",
    "You are an expert in design in different fields, you use different vector graphics tools.\n",
    "\n",
    "You deal professionally with SVG files, you know how to create complex designs with them.\n",
    "\n",
    "You deal professionally with UI/UX design, you know how to understand it. \n",
    "\n",
    "Your main jon is to analyse the UI/UX represented in the SVG format and answer relevant questions, create documentation, user stories and describe flow between frames. \n",
    "\n",
    "These initial inputs are SVG files that can consist of multiple layers, groups, paths, interactions, etc.\n",
    "\n",
    "SVG contain several frame, each frame is a different UI screen. \n",
    "\n",
    "Each frame can contain elements as icons, logos, buttons, checkboxes, etc.\n",
    "\n",
    "Frames can contain flows. Flows are the interactions between frames of elements of frames, such as click, scroll, etc. You should pay attention to the flow, interaction and attributes like event-type and action-type to be able to describe interactions inside the app. \n",
    "\"\"\""
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 🖼️ Load the SVG with UI and Flows"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "./data/music-app-flow.svg\n",
      "\n",
      "music-app-flow_optimized.svg:\n",
      "Done in 354 ms!\n",
      "256.78 KiB - \u001b[32m85.4%\u001b[39m = 37.421 KiB\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<svg xmlns:ns0=\"https://penpot.app/xmlns\" fill=\"none\" style=\"width:100%;height:100%;background:#e8e9ea\" viewBox=\"1088 346 1680 997\"><defs><clipPath id=\"a\" class=\"frame-clip-def frame-clip\"><rect width=\"144\" height=\"48\" x=\"2512\" y=\"1295\" rx=\"0\" ry=\"0\"/></clipPath></defs><g clip-path=\"url(#a)\"><g class=\"fills\"><rect width=\"144\" height=\"48\" x=\"2512\" y=\"1295\" class=\"frame-background\" rx=\"0\" ry=\"0\"/></g><g class=\"frame-children\"><rect width=\"144\" height=\"48\" x=\"2512\" y=\"1295\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#8a16ff;fill-opacity:1\"/><g style=\"fill:#000\"><path fill=\"none\" d=\"M2544.5 1307.32h24v24h-24Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2552.5 1312.32v14l11-7Z\" class=\"fills\" style=\"fill:#fff;fill-opacity:1\"/></g><g class=\"text-container\"><text x=\"2577\" y=\"1312\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:uppercase;font-family:Roboto;letter-spacing:.8px;font-style:normal;font-weight:700;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"32.163\">PLAY</text></g></g></g><defs><clipPath id=\"b\" class=\"frame-clip-def frame-clip\"><rect width=\"384\" height=\"854\" x=\"2384\" y=\"346\" rx=\"0\" ry=\"0\"/></clipPath></defs><g clip-path=\"url(#b)\"><g class=\"fills\"><rect width=\"384\" height=\"854\" x=\"2384\" y=\"346\" class=\"frame-background\" rx=\"0\" ry=\"0\"/></g><g class=\"frame-children\"><rect width=\"384\" height=\"854\" x=\"2384\" y=\"346\" class=\"fills\" rx=\"48\" ry=\"48\" style=\"fill:#fff;fill-opacity:1\"/><g clip-path=\"url(#c)\" mask=\"url(#d)\"><defs><clipPath id=\"c\" class=\"mask-clip-path\"><path d=\"M2384 346h384v280h-384\"/></clipPath><filter id=\"e\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"d\" width=\"384\" height=\"280\" x=\"2384\" y=\"346\" class=\"mask-shape\" data-old-height=\"280\" data-old-width=\"384\" data-old-x=\"2384\" data-old-y=\"346\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#e)\"><path d=\"M2432 346h288a48 48 0 0 1 48 48v232h-384V394a48 48 0 0 1 48-48z\" class=\"fills\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs><defs><linearGradient ns0:end-x=\".52\" ns0:end-y=\"0\" ns0:gradient=\"true\" ns0:start-x=\".52\" ns0:start-y=\".57\" ns0:width=\"1\" id=\"f\" x1=\".52\" x2=\".52\" y1=\".57\" y2=\"0\"><stop offset=\"0\" stop-opacity=\".4\"/><stop offset=\"1\" stop-opacity=\"0\"/></linearGradient><pattern id=\"g\" width=\"384\" height=\"152\" x=\"2384\" y=\"474\" data-loading=\"false\" patternUnits=\"userSpaceOnUse\"><path d=\"M0 0h384v152H0z\" style=\"fill:url(#f)\"/></pattern></defs><rect width=\"384\" height=\"152\" x=\"2384\" y=\"474\" fill=\"url(#g)\" class=\"fills\" rx=\"0\" ry=\"0\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"523.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:24px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"193.416\">My dear Mixtape</text></g><g class=\"text-container\"><text x=\"2416\" y=\"557\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:.7\" textLength=\"112.364\">33 tracks · Public</text></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2416 778h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 778h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"716\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"54.72\">Hidden</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 730h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 736.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 730h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2699 732c-1.16 0-2.273.54-3 1.39a4.001 4.001 0 0 0-3-1.39 3.627 3.627 0 0 0-3.667 3.667c0 2.516 2.267 4.573 5.7 7.69l.967.876.967-.876c3.433-3.117 5.7-5.174 5.7-7.69A3.627 3.627 0 0 0 2699 732Zm-2.93 10.37Zh-.14c-3.17-2.877-5.263-4.777-5.263-6.703 0-1.33 1.003-2.334 2.333-2.334 1.027 0 2.027.664 2.377 1.574h1.243c.353-.91 1.353-1.574 2.38-1.574 1.33 0 2.333 1.004 2.333 2.334 0 1.926-2.093 3.826-5.263 6.703Z\" class=\"fills\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"741\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"137.13\">Rival Consoles  ·  7:38</text></g></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2416 858h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 858h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"796\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"116.976\">Holding Horses</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 810h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 816.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 810h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2699 812c-1.16 0-2.273.54-3 1.39a4.001 4.001 0 0 0-3-1.39 3.627 3.627 0 0 0-3.667 3.667c0 2.516 2.267 4.573 5.7 7.69l.967.876.967-.876c3.433-3.117 5.7-5.174 5.7-7.69A3.627 3.627 0 0 0 2699 812Zm-2.93 10.37Zh-.14c-3.17-2.877-5.263-4.777-5.263-6.703 0-1.33 1.003-2.334 2.333-2.334 1.027 0 2.027.664 2.377 1.574h1.243c.353-.91 1.353-1.574 2.38-1.574 1.33 0 2.333 1.004 2.333 2.334 0 1.926-2.093 3.826-5.263 6.703Z\" class=\"fills\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"821\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"88.368\">Colleen  ·  5:11</text></g></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2416 938h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 938h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"876\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"153.664\">Cumbia de la fuente</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 890h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 896.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 890h15.68v15.68H2688Z\" class=\"fills\" style=\"fill:none\"/><path d=\"m2695.84 903.949-.947-.859c-3.365-3.055-5.586-5.07-5.586-7.537a3.554 3.554 0 0 1 3.593-3.593 3.92 3.92 0 0 1 2.94 1.362 3.92 3.92 0 0 1 2.94-1.362 3.554 3.554 0 0 1 3.593 3.593c0 2.467-2.221 4.482-5.586 7.537l-.947.859Z\" class=\"fills\" style=\"fill:#a74fff;fill-opacity:1\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"901\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"158.298\">Meridian Brothers  ·  4:35</text></g></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2416 1018h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 1018h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"956.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"151.424\">Become a Mountain</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 970h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 976.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 970h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2699 972c-1.16 0-2.273.54-3 1.39a4.001 4.001 0 0 0-3-1.39 3.627 3.627 0 0 0-3.667 3.667c0 2.516 2.267 4.573 5.7 7.69l.967.876.967-.876c3.433-3.117 5.7-5.174 5.7-7.69A3.627 3.627 0 0 0 2699 972Zm-2.93 10.37Zh-.14c-3.17-2.877-5.263-4.777-5.263-6.703 0-1.33 1.003-2.334 2.333-2.334 1.027 0 2.027.664 2.377 1.574h1.243c.353-.91 1.353-1.574 2.38-1.574 1.33 0 2.333 1.004 2.333 2.334 0 1.926-2.093 3.826-5.263 6.703Z\" class=\"fills\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"981\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"124.46\">Dan Deacon  ·  4:05</text></g></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2416 1098h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 1098h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"1036\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"175.712\">Miracles (Back in Time)</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 1050h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 1056.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 1050h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2699 1052c-1.16 0-2.273.54-3 1.39a4.001 4.001 0 0 0-3-1.39 3.627 3.627 0 0 0-3.667 3.667c0 2.516 2.267 4.573 5.7 7.69l.967.876.967-.876c3.433-3.117 5.7-5.174 5.7-7.69A3.627 3.627 0 0 0 2699 1052Zm-2.93 10.37Zh-.14c-3.17-2.877-5.263-4.777-5.263-6.703 0-1.33 1.003-2.334 2.333-2.334 1.027 0 2.027.664 2.377 1.574h1.243c.353-.91 1.353-1.574 2.38-1.574 1.33 0 2.333 1.004 2.333 2.334 0 1.926-2.093 3.826-5.263 6.703Z\" class=\"fills\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"1061\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"90.93\">The Dø  ·  4:29</text></g></g><g style=\"opacity:.5;fill:#1d3744;fill-opacity:1\"><path d=\"M2416 1178h320\" class=\"fills\" style=\"opacity:.12\"/><g class=\"strokes\"><path d=\"M2416 1178h320\" class=\"stroke-shape\" style=\"opacity:.12;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"2416\" y=\"1116\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:16px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"84.592\">Singularity</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2720 1130h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2724 1136.667a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm8 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Zm-4 0a1.332 1.332 0 1 0 0 2.666 1.332 1.332 0 1 0 0-2.666Z\" class=\"fills\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2688 1130h16v16h-16Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2699 1132c-1.16 0-2.273.54-3 1.39a4.001 4.001 0 0 0-3-1.39 3.627 3.627 0 0 0-3.667 3.667c0 2.516 2.267 4.573 5.7 7.69l.967.876.967-.876c3.433-3.117 5.7-5.174 5.7-7.69A3.627 3.627 0 0 0 2699 1132Zm-2.93 10.37Zh-.14c-3.17-2.877-5.263-4.777-5.263-6.703 0-1.33 1.003-2.334 2.333-2.334 1.027 0 2.027.664 2.377 1.574h1.243c.353-.91 1.353-1.574 2.38-1.574 1.33 0 2.333 1.004 2.333 2.334 0 1.926-2.093 3.826-5.263 6.703Z\" class=\"fills\"/></g><g class=\"text-container\" style=\"opacity:.6\"><text x=\"2416\" y=\"1141\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:300;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"125.608\">Jon Hopkins  ·  6:29</text></g></g><rect width=\"384\" height=\"88\" x=\"2384\" y=\"594\" class=\"fills\" rx=\"32\" ry=\"32\" style=\"fill:#fff;fill-opacity:1\"/><rect width=\"144\" height=\"48\" x=\"2416\" y=\"618\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#a74fff;fill-opacity:1\"/><g class=\"strokes\"><rect width=\"144\" height=\"48\" x=\"2416\" y=\"618\" class=\"stroke-shape\" rx=\"24\" ry=\"24\" style=\"fill:none;fill-opacity:none;stroke-width:1;stroke:#a74fff;stroke-opacity:1\"/></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2448 630h24v24h-24Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2456 635v14l11-7Z\" class=\"fills\" style=\"fill:#fff;fill-opacity:1\"/></g><g class=\"text-container\"><text x=\"2480\" y=\"635\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:uppercase;font-family:Roboto;letter-spacing:.8px;font-style:normal;font-weight:700;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"32.163\">PLAY</text></g><rect width=\"144\" height=\"48\" x=\"2592\" y=\"618\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#fff;fill-opacity:1\"/><g class=\"strokes\"><g class=\"inner-stroke-shape\"><defs><clipPath id=\"i\"><use href=\"#h\"/></clipPath><rect id=\"h\" width=\"144\" height=\"48\" x=\"2592\" y=\"618\" rx=\"24\" ry=\"24\" style=\"fill:none;fill-opacity:none;stroke-width:2;stroke:#a74fff;stroke-opacity:1\"/></defs><use clip-path=\"url('#i')\" href=\"#h\"/></g></g><g style=\"fill:#1d3744;fill-opacity:1\"><path fill=\"none\" d=\"M2616 630h24v24h-24Z\" class=\"fills\" style=\"fill:none\"/><path d=\"m2626.585 639.17-5.17-5.17-1.415 1.415 5.17 5.17 1.415-1.415Zm3.915-5.17 2.045 2.045-12.545 12.54 1.415 1.415 12.545-12.545 2.04 2.045V634h-5.5Zm.33 9.415-1.415 1.415 3.13 3.13-2.045 2.04h5.5v-5.5l-2.045 2.045-3.125-3.13Z\" class=\"fills\" style=\"fill:#1d3744;fill-opacity:1\"/></g><g class=\"text-container\"><text x=\"2648\" y=\"635\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:uppercase;font-family:Roboto;letter-spacing:.8px;font-style:normal;font-weight:700;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"55.75\">shuffle</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2712 362h40v40h-40Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2732 376.286a2.856 2.856 0 0 0 2.857-2.857 2.856 2.856 0 1 0-5.714 0 2.856 2.856 0 0 0 2.857 2.857Zm0 2.857a2.856 2.856 0 0 0-2.857 2.857 2.856 2.856 0 0 0 2.857 2.857 2.856 2.856 0 0 0 2.857-2.857 2.856 2.856 0 0 0-2.857-2.857Zm0 8.571a2.856 2.856 0 0 0-2.857 2.857 2.856 2.856 0 1 0 5.714 0 2.856 2.856 0 0 0-2.857-2.857Z\" class=\"fills\" style=\"fill:#fff;fill-opacity:1\"/></g></g></g><defs><clipPath id=\"j\" class=\"frame-clip-def frame-clip\"><rect width=\"384\" height=\"854\" x=\"1911\" y=\"346\" rx=\"0\" ry=\"0\"/></clipPath></defs><g clip-path=\"url(#j)\"><g class=\"fills\"><rect width=\"384\" height=\"854\" x=\"1911\" y=\"346\" class=\"frame-background\" rx=\"0\" ry=\"0\"/></g><g class=\"frame-children\"><rect width=\"384\" height=\"854\" x=\"1911\" y=\"346\" class=\"fills\" rx=\"48\" ry=\"48\" style=\"fill:#fff;fill-opacity:1\"/><g filter=\"url(#k)\"><defs><filter id=\"k\" width=\"1.242\" height=\"1.412\" x=\"-.121\" y=\"-.169\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a8685150848e\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a8685150848e\" result=\"shape\"/></filter></defs><g clip-path=\"url(#l)\" mask=\"url(#m)\"><defs><clipPath id=\"l\" class=\"mask-clip-path\"><path d=\"M1935 466h223v160h-223\"/></clipPath><filter id=\"n\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"m\" width=\"223\" height=\"160\" x=\"1935\" y=\"466\" class=\"mask-shape\" data-old-height=\"160\" data-old-width=\"223\" data-old-x=\"1935\" data-old-y=\"466\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#n)\"><rect width=\"223\" height=\"160\" x=\"1935\" y=\"466\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs><defs><linearGradient ns0:end-x=\".52\" ns0:end-y=\"0\" ns0:gradient=\"true\" ns0:start-x=\".52\" ns0:start-y=\".57\" ns0:width=\"1\" id=\"o\" x1=\".52\" x2=\".52\" y1=\".57\" y2=\"0\"><stop offset=\"0\" stop-opacity=\".4\"/><stop offset=\"1\" stop-opacity=\"0\"/></linearGradient><pattern id=\"p\" width=\"223\" height=\"79\" x=\"1935\" y=\"547\" data-loading=\"false\" patternUnits=\"userSpaceOnUse\"><path d=\"M0 0h223v79H0z\" style=\"fill:url(#o)\"/></pattern></defs><rect width=\"223\" height=\"79\" x=\"1935\" y=\"547\" fill=\"url(#p)\" class=\"fills\" rx=\"0\" ry=\"0\"/></g><g class=\"text-container\"><text x=\"1951\" y=\"571.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:15px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"120.885\">My dear Mixtape</text></g><g class=\"text-container\"><text x=\"1951\" y=\"595\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:11px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:.7\" textLength=\"88.286\">33 tracks · Public</text></g></g><g filter=\"url(#q)\"><defs><filter id=\"q\" width=\"1.242\" height=\"1.412\" x=\"-.121\" y=\"-.169\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a8685151b141\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a8685151b141\" result=\"shape\"/></filter></defs><g clip-path=\"url(#r)\" mask=\"url(#s)\"><defs><clipPath id=\"r\" class=\"mask-clip-path\"><path d=\"M2191 466h223v160h-223\"/></clipPath><filter id=\"t\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"s\" width=\"223\" height=\"160\" x=\"2191\" y=\"466\" class=\"mask-shape\" data-old-height=\"160\" data-old-width=\"223\" data-old-x=\"2191\" data-old-y=\"466\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#t)\"><rect width=\"223\" height=\"160\" x=\"2191\" y=\"466\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs><defs><linearGradient ns0:end-x=\".52\" ns0:end-y=\"0\" ns0:gradient=\"true\" ns0:start-x=\".52\" ns0:start-y=\".57\" ns0:width=\"1\" id=\"u\" x1=\".52\" x2=\".52\" y1=\".57\" y2=\"0\"><stop offset=\"0\" stop-opacity=\".4\"/><stop offset=\"1\" stop-opacity=\"0\"/></linearGradient><pattern id=\"v\" width=\"223\" height=\"79\" x=\"2191\" y=\"547\" data-loading=\"false\" patternUnits=\"userSpaceOnUse\"><path d=\"M0 0h223v79H0z\" style=\"fill:url(#u)\"/></pattern></defs><rect width=\"223\" height=\"79\" x=\"2191\" y=\"547\" fill=\"url(#v)\" class=\"fills\" rx=\"0\" ry=\"0\"/></g><g class=\"text-container\"><text x=\"2207\" y=\"571.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:15px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"117.78\">Captain of none</text></g><g class=\"text-container\"><text x=\"2207\" y=\"595\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:11px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:.7\" textLength=\"87.23\">79 tracks · Public</text></g></g><g filter=\"url(#w)\"><defs><filter id=\"w\" width=\"1.482\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a86851526062\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a86851526062\" result=\"shape\"/></filter></defs><g clip-path=\"url(#x)\" mask=\"url(#y)\"><defs><clipPath id=\"x\" class=\"mask-clip-path\"><path d=\"M1935 722h112v112h-112\"/></clipPath><filter id=\"z\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"y\" width=\"112\" height=\"112\" x=\"1935\" y=\"722\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"1935\" data-old-y=\"722\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#z)\"><rect width=\"112\" height=\"112\" x=\"1935\" y=\"722\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g filter=\"url(#A)\"><defs><filter id=\"A\" width=\"1.482\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a86851529668\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a86851529668\" result=\"shape\"/></filter></defs><g clip-path=\"url(#B)\" mask=\"url(#C)\"><defs><clipPath id=\"B\" class=\"mask-clip-path\"><path d=\"M1935 899h112v112h-112\"/></clipPath><filter id=\"D\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"C\" width=\"112\" height=\"112\" x=\"1935\" y=\"899\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"1935\" data-old-y=\"899\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#D)\"><rect width=\"112\" height=\"112\" x=\"1935\" y=\"899\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g filter=\"url(#E)\"><defs><filter id=\"E\" width=\"1.589\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dx=\"4\" dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a86851532f7d\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a86851532f7d\" result=\"shape\"/></filter></defs><g clip-path=\"url(#F)\" mask=\"url(#G)\"><defs><clipPath id=\"F\" class=\"mask-clip-path\"><path d=\"M2079 722h112v112h-112\"/></clipPath><filter id=\"H\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"G\" width=\"112\" height=\"112\" x=\"2079\" y=\"722\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"2079\" data-old-y=\"722\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#H)\"><rect width=\"112\" height=\"112\" x=\"2079\" y=\"722\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g filter=\"url(#I)\"><defs><filter id=\"I\" width=\"1.482\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a8685153419f\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a8685153419f\" result=\"shape\"/></filter></defs><g clip-path=\"url(#J)\" mask=\"url(#K)\"><defs><clipPath id=\"J\" class=\"mask-clip-path\"><path d=\"M2079 899h112v112h-112\"/></clipPath><filter id=\"L\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"K\" width=\"112\" height=\"112\" x=\"2079\" y=\"899\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"2079\" data-old-y=\"899\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#L)\"><rect width=\"112\" height=\"112\" x=\"2079\" y=\"899\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g filter=\"url(#M)\"><defs><filter id=\"M\" width=\"1.482\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a8685153a423\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a8685153a423\" result=\"shape\"/></filter></defs><g clip-path=\"url(#N)\" mask=\"url(#O)\"><defs><clipPath id=\"N\" class=\"mask-clip-path\"><path d=\"M2223 722h112v112h-112\"/></clipPath><filter id=\"P\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"O\" width=\"112\" height=\"112\" x=\"2223\" y=\"722\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"2223\" data-old-y=\"722\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#P)\"><rect width=\"112\" height=\"112\" x=\"2223\" y=\"722\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g filter=\"url(#Q)\"><defs><filter id=\"Q\" width=\"1.482\" height=\"1.589\" x=\"-.241\" y=\"-.241\" color-interpolation-filters=\"sRGB\" filterUnits=\"objectBoundingBox\"><feFlood flood-opacity=\"0\" result=\"BackgroundImageFix\"/><feColorMatrix in=\"SourceAlpha\" values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"/><feOffset dy=\"4\"/><feGaussianBlur stdDeviation=\"2\"/><feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0\"/><feBlend in2=\"BackgroundImageFix\" result=\"filter_a0c71f4a-98f8-8069-8002-a868515436ed\"/><feBlend in=\"SourceGraphic\" in2=\"filter_a0c71f4a-98f8-8069-8002-a868515436ed\" result=\"shape\"/></filter></defs><g clip-path=\"url(#R)\" mask=\"url(#S)\"><defs><clipPath id=\"R\" class=\"mask-clip-path\"><path d=\"M2223 899h112v112h-112\"/></clipPath><filter id=\"T\"><feFlood flood-color=\"#fff\" result=\"FloodResult\"/><feComposite in=\"FloodResult\" in2=\"SourceGraphic\" operator=\"in\" result=\"comp\"/></filter><mask id=\"S\" width=\"112\" height=\"112\" x=\"2223\" y=\"899\" class=\"mask-shape\" data-old-height=\"112\" data-old-width=\"112\" data-old-x=\"2223\" data-old-y=\"899\" maskUnits=\"userSpaceOnUse\"><g filter=\"url(#T)\"><rect width=\"112\" height=\"112\" x=\"2223\" y=\"899\" class=\"fills\" rx=\"24\" ry=\"24\" style=\"fill:#662fa5;fill-opacity:1\"/></g></mask></defs></g></g><g class=\"text-container\" style=\"opacity:.7\"><text x=\"2213.972\" y=\"425\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"49.028\">View all</text></g><g class=\"text-container\" style=\"opacity:.7\"><text x=\"2213.972\" y=\"681\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"49.028\">View all</text></g><g class=\"text-container\"><text x=\"1935\" y=\"845\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"82.362\">Back in Time</text></g><g class=\"text-container\"><text x=\"2079\" y=\"845\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"92.82\">Be a Mountain</text></g><g class=\"text-container\"><text x=\"2223\" y=\"845\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"83.804\">Cumbia de la</text></g><g class=\"text-container\"><text x=\"1935\" y=\"1022\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"46.368\">Hidden</text></g><g class=\"text-container\"><text x=\"1974.2\" y=\"1162.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#a74fff;fill-opacity:1\" textLength=\"33.6\">Home</text></g><g style=\"fill:#a74fff;fill-opacity:1\"><path fill=\"none\" d=\"M1974.754 1122h32v32h-32v-32Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M1987.516 1151.843v-4.886h6.477v4.886h8.095v-17.914l-11.334-9.772-11.333 9.772v17.914h8.095Z\" class=\"fills\"/></g><g style=\"opacity:.5\"><g class=\"text-container\"><text x=\"2081.136\" y=\"1162.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"43.728\">Explore</text></g><g style=\"fill:#1d3744;fill-opacity:1\"><path d=\"M2102.754 1136.533a1.47 1.47 0 0 0-1.466 1.467 1.467 1.467 0 1 0 1.466-1.467Zm0-11.866c-7.366 0-13.333 5.966-13.333 13.333 0 7.36 5.967 13.333 13.333 13.333 7.367 0 13.334-5.973 13.334-13.333 0-7.367-5.967-13.333-13.334-13.333Zm2.92 16.253-10.92 5.08 5.08-10.92 10.92-5.08-5.08 10.92Z\" class=\"fills\"/><path fill=\"none\" d=\"M2086.754 1122h32v32h-32Z\" class=\"fills\" style=\"fill:none\"/></g></g><g style=\"opacity:.5\"><g class=\"text-container\"><text x=\"2194.432\" y=\"1162.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:500;white-space:pre;font-size:12px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"41.136\">Library</text></g><g style=\"fill:#1d3744;fill-opacity:1\"><path fill=\"none\" d=\"M2198.754 1122h32v32h-32Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2225.421 1124.667h-16a2.666 2.666 0 0 0-2.667 2.666v16a2.666 2.666 0 0 0 2.667 2.667h16a2.666 2.666 0 0 0 2.667-2.667v-16a2.666 2.666 0 0 0-2.667-2.666Zm-2.667 6.666h-4v7.334a3.334 3.334 0 1 1-3.333-3.334c.753 0 1.44.26 2 .68v-7.346h5.333v2.666Zm-18.666-1.333h-2.667v18.667a2.665 2.665 0 0 0 2.667 2.666h18.666v-2.666h-18.666V1130Z\" class=\"fills\"/></g></g><path d=\"M1911 1106h384\" class=\"fills\" style=\"opacity:.2\"/><g class=\"strokes\"><path d=\"M1911 1106h384\" class=\"stroke-shape\" style=\"opacity:.2;fill:none;fill-opacity:none;stroke-width:1;stroke:#1d3744;stroke-opacity:1\"/></g><g class=\"text-container\"><text x=\"1943\" y=\"422.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:18px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"76.95\">Playlists</text></g><g class=\"text-container\"><text x=\"2223\" y=\"1022\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"70.406\">Singularity</text></g><g class=\"text-container\"><text x=\"2079\" y=\"1022\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:400;white-space:pre;font-size:14px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"98.896\">Holding Horses</text></g><g class=\"text-container\"><text x=\"1943\" y=\"678.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:18px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"137.844\">Recent activity</text></g><g style=\"fill:#000\"><path fill=\"none\" d=\"M2239 362h40v40h-40Z\" class=\"fills\" style=\"fill:none\"/><path d=\"M2259 376.286a2.856 2.856 0 0 0 2.857-2.857 2.856 2.856 0 1 0-5.714 0 2.856 2.856 0 0 0 2.857 2.857Zm0 2.857a2.856 2.856 0 0 0-2.857 2.857 2.856 2.856 0 0 0 2.857 2.857 2.856 2.856 0 0 0 2.857-2.857 2.856 2.856 0 0 0-2.857-2.857Zm0 8.571a2.856 2.856 0 0 0-2.857 2.857 2.856 2.856 0 1 0 5.714 0 2.856 2.856 0 0 0-2.857-2.857Z\" class=\"fills\" style=\"fill:#1d3744;fill-opacity:1\"/></g><g class=\"text-container\"><text x=\"2066.255\" y=\"371.5\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:17px;text-decoration:none;direction:ltr;fill:#1d3744;fill-opacity:1\" textLength=\"73.491\">MyMusic</text></g></g></g><defs><clipPath id=\"U\" class=\"frame-clip-def frame-clip\"><rect width=\"384\" height=\"854\" x=\"1088\" y=\"346\" rx=\"0\" ry=\"0\"/></clipPath></defs><g clip-path=\"url(#U)\"><g class=\"fills\"><rect width=\"384\" height=\"854\" x=\"1088\" y=\"346\" class=\"frame-background\" rx=\"0\" ry=\"0\"/></g><g class=\"frame-children\"><rect width=\"384\" height=\"854\" x=\"1088\" y=\"346\" class=\"fills\" rx=\"48\" ry=\"48\" style=\"fill:#000;fill-opacity:1\"/><g class=\"text-container\"><text x=\"1136\" y=\"562\" class=\"fills\" dominant-baseline=\"hanging\" dy=\".2em\" lengthAdjust=\"spacingAndGlyphs\" style=\"text-transform:none;font-family:Rubik;letter-spacing:normal;font-style:normal;font-weight:700;white-space:pre;font-size:40px;text-decoration:none;direction:ltr;fill:#fff;fill-opacity:1\" textLength=\"172.92\">MyMusic</text></g><g style=\"fill:#000\"><path d=\"M1172 474c19.869 0 36 16.131 36 36s-16.131 36-36 36-36-16.131-36-36 16.131-36 36-36Zm-3.6 50.4h7.2v-28.8h-7.2v28.8Zm-10.8 0h7.2V510h-7.2v14.4Zm21.6-19.8v19.8h7.2v-19.8h-7.2Z\" class=\"fills\" style=\"fill:#fff;fill-opacity:1\"/></g></g></g></svg>"
      ],
      "text/plain": [
       "<IPython.core.display.SVG object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "FILENAME = \"music-app-flow\"\n",
    "svg_optimized = load_raw_svg_optimize_clean(FILENAME)\n",
    "show_svg(f'./data/{FILENAME}_optimized.svg')"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ❓What we want"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [],
   "source": [
    "question = f\"\"\"\n",
    "Here is UI/UX of a Music app in the SVG format:\n",
    "\n",
    "{svg_optimized}\n",
    "\n",
    "Please, generate the documentation for this app and user stories. Generate top-5 user stories.  You should pay attention to the \"flow\", \"flows\", \"interaction\" and attributes like \"event-type\", \"action-type\" and \"destination\" to be able to describe interactions inside the app. Note that using \"destination\" SVG describes to which element or screens leads the flow. Describe the defined interactions in this app design. Structure your answer with markdown. \n",
    "\"\"\""
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### ✨ Magic"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [],
   "source": [
    "chatgpt = ChatGPTWrapper(system_prompt, model=\"gpt-3.5-turbo-16k\", temperature=0.1)\n",
    "answer = chatgpt.generate(question)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/markdown": [
       "# Music App Documentation\n",
       "\n",
       "## Overview\n",
       "This Music app is designed to provide users with a seamless and enjoyable music listening experience. It allows users to browse and play their favorite songs, create playlists, and discover new music. The app has a clean and intuitive user interface, making it easy for users to navigate and interact with the various features.\n",
       "\n",
       "## User Stories\n",
       "1. As a logged-in user, I want to be able to play a song by clicking on the \"PLAY\" button.\n",
       "2. As a logged-in user, I want to be able to view the details of a playlist, including the title and number of tracks.\n",
       "3. As a logged-in user, I want to be able to navigate to the next song in a playlist by clicking on the \"Next\" button.\n",
       "4. As a logged-in user, I want to be able to add a song to my favorites by clicking on the \"heart\" icon.\n",
       "5. As a logged-in user, I want to be able to access the app's menu by clicking on the \"menu\" button.\n",
       "\n",
       "## Interactions\n",
       "1. Mouse Leave: When the mouse leaves the \"PLAY\" button, the overlay closes.\n",
       "2. Mouse Enter: When the mouse enters the \"shuffle\" button, the overlay opens.\n",
       "3. Click: When the user clicks on a playlist, the app navigates to the playlist details screen.\n",
       "4. Click: When the user clicks on the \"Next\" button, the app navigates to the next song in the playlist.\n",
       "5. Click: When the user clicks on the \"heart\" icon, the song is added to the user's favorites.\n",
       "6. Click: When the user clicks on the \"menu\" button, the app's menu is displayed.\n",
       "\n",
       "These interactions enhance the user experience by providing intuitive ways to navigate and interact with the app's features."
      ],
      "text/plain": [
       "<IPython.core.display.Markdown object>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "Markdown(answer)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 📜 Docs Export"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Export answer to the docs.md file\n",
    "export2md(answer)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "penpot-test",
   "language": "python",
   "name": "penpot-test"
  },
  "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.4"
  },
  "orig_nbformat": 4
 },
 "nbformat": 4,
 "nbformat_minor": 2
}