Buckets:
| <meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Object detection","local":"object-detection","sections":[{"title":"Load the mobile-ui-design dataset","local":"load-the-mobile-ui-design-dataset","sections":[],"depth":2},{"title":"Preprocess the data","local":"preprocess-the-data","sections":[{"title":"Data augmentation","local":"data-augmentation","sections":[],"depth":3}],"depth":2},{"title":"Preparing function to compute mAP","local":"preparing-function-to-compute-map","sections":[],"depth":2},{"title":"Training the detection model","local":"training-the-detection-model","sections":[],"depth":2},{"title":"Evaluate","local":"evaluate","sections":[],"depth":2},{"title":"Inference","local":"inference","sections":[],"depth":2}],"depth":1}"> | |
| <link href="/docs/transformers/pr_41992/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/entry/start.6ac19d43.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/scheduler.0dad8db1.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/singletons.9505f7e3.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/index.595571e0.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/paths.a2014728.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/entry/app.42da82bd.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/preload-helper.43417560.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/index.855abf52.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/nodes/0.dc15b4bc.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/each.e59479a4.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/nodes/695.a57a0b93.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/Tip.b8e93d4a.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/CopyLLMTxtMenu.9e1f0f49.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.bf05d4d8.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/IconCopy.ffdeebb6.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/CodeBlock.b28b91fa.js"> | |
| <link rel="modulepreload" href="/docs/transformers/pr_41992/en/_app/immutable/chunks/DocNotebookDropdown.ec6eafcf.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Object detection","local":"object-detection","sections":[{"title":"Load the mobile-ui-design dataset","local":"load-the-mobile-ui-design-dataset","sections":[],"depth":2},{"title":"Preprocess the data","local":"preprocess-the-data","sections":[{"title":"Data augmentation","local":"data-augmentation","sections":[],"depth":3}],"depth":2},{"title":"Preparing function to compute mAP","local":"preparing-function-to-compute-map","sections":[],"depth":2},{"title":"Training the detection model","local":"training-the-detection-model","sections":[],"depth":2},{"title":"Evaluate","local":"evaluate","sections":[],"depth":2},{"title":"Inference","local":"inference","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <div class="flex space-x-1 " style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"> </button> </div> <div class="relative colab-dropdown "> <button class=" " type="button"> <img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"> </button> </div></div> <h1 class="relative group"><a id="object-detection" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#object-detection"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Object detection</span></h1> <p data-svelte-h="svelte-18pt6j0">Object detection is the computer vision task of detecting instances (such as humans, buildings, or cars) in an image. Object detection models receive an image as input and output | |
| coordinates of the bounding boxes and associated labels of the detected objects. An image can contain multiple objects, | |
| each with its own bounding box and a label (e.g. it can have a car and a building), and each object can | |
| be present in different parts of an image (e.g. the image can have several cars). | |
| This task is commonly used in autonomous driving for detecting things like pedestrians, road signs, and traffic lights. | |
| Other applications include counting objects in images, image search, and more.</p> <p data-svelte-h="svelte-1xy9go1">In this guide, you will learn how to:</p> <ol data-svelte-h="svelte-dwq39c"><li>Finetune <a href="https://huggingface.co/Roboflow/rf-detr-medium" rel="nofollow">RF-DETR</a> on the <a href="https://huggingface.co/datasets/merve/mobile-ui-design" rel="nofollow">mobile-ui-design</a> | |
| dataset to detect UI elements in mobile app screenshots.</li> <li>Use your finetuned model for inference.</li></ol> <blockquote class="tip"><p data-svelte-h="svelte-5wyiet">To see all architectures and checkpoints compatible with this task, we recommend checking the <a href="https://huggingface.co/tasks/object-detection" rel="nofollow">task-page</a></p></blockquote> <p data-svelte-h="svelte-1c9nexd">Before you begin, make sure you have all the necessary libraries installed:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-bash "><!-- HTML_TAG_START -->pip install -q datasets transformers accelerate timm trackio torchmetrics pycocotools<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1z03s4i">You’ll use 🤗 Datasets to load a dataset from the Hugging Face Hub and 🤗 Transformers to train your model.</p> <p data-svelte-h="svelte-1oee7b1">We encourage you to share your model with the community. Log in to your Hugging Face account to upload it to the Hub. | |
| When prompted, enter your token to log in:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> huggingface_hub <span class="hljs-keyword">import</span> notebook_login | |
| <span class="hljs-meta">>>> </span>notebook_login()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-420xy5">Define global constants, namely the model name and image size. This tutorial uses RF-DETR, but you can select any object detection model in Transformers.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span>MODEL_NAME = <span class="hljs-string">"Roboflow/rf-detr-medium"</span><!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="load-the-mobile-ui-design-dataset" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#load-the-mobile-ui-design-dataset"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Load the mobile-ui-design dataset</span></h2> <p data-svelte-h="svelte-1k2ej7r">The <a href="https://huggingface.co/datasets/merve/mobile-ui-design" rel="nofollow">mobile-ui-design dataset</a> contains mobile app screenshots with | |
| annotations for detecting UI elements such as text, images, rectangles, and groups.</p> <p data-svelte-h="svelte-j53057">Start by loading the dataset and extracting category labels. The dataset is already has splits.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> datasets <span class="hljs-keyword">import</span> load_dataset | |
| <span class="hljs-meta">>>> </span>ds = load_dataset(<span class="hljs-string">"merve/mobile-ui-design"</span>) | |
| <span class="hljs-meta">>>> </span>CATEGORIES = <span class="hljs-built_in">sorted</span>(<span class="hljs-built_in">set</span>( | |
| <span class="hljs-meta">... </span> cat <span class="hljs-keyword">for</span> split <span class="hljs-keyword">in</span> ds.values() <span class="hljs-keyword">for</span> example <span class="hljs-keyword">in</span> split <span class="hljs-keyword">for</span> cat <span class="hljs-keyword">in</span> example[<span class="hljs-string">"objects"</span>][<span class="hljs-string">"category"</span>] | |
| <span class="hljs-meta">... </span>)) | |
| <span class="hljs-meta">>>> </span>label2id = {label: i <span class="hljs-keyword">for</span> i, label <span class="hljs-keyword">in</span> <span class="hljs-built_in">enumerate</span>(CATEGORIES)} | |
| <span class="hljs-meta">>>> </span>id2label = {i: label <span class="hljs-keyword">for</span> label, i <span class="hljs-keyword">in</span> label2id.items()} | |
| <span class="hljs-meta">>>> </span><span class="hljs-built_in">print</span>(<span class="hljs-string">f"Categories (<span class="hljs-subst">{<span class="hljs-built_in">len</span>(CATEGORIES)}</span>): <span class="hljs-subst">{CATEGORIES}</span>"</span>) | |
| Categories (<span class="hljs-number">4</span>): [<span class="hljs-string">'group'</span>, <span class="hljs-string">'image'</span>, <span class="hljs-string">'rectangle'</span>, <span class="hljs-string">'text'</span>]<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-yirur3">The dataset uses string category names and bounding boxes in COCO format <code>(x, y, w, h)</code>. Convert the | |
| categories to integer ids, compute areas, and filter out degenerate bounding boxes before training:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">prepare_example</span>(<span class="hljs-params">example, idx</span>): | |
| <span class="hljs-meta">... </span> objects = example[<span class="hljs-string">"objects"</span>] | |
| <span class="hljs-meta">... </span> bboxes = objects[<span class="hljs-string">"bbox"</span>] | |
| <span class="hljs-meta">... </span> categories = objects[<span class="hljs-string">"category"</span>] | |
| <span class="hljs-meta">... </span> img_w, img_h = example[<span class="hljs-string">"width"</span>], example[<span class="hljs-string">"height"</span>] | |
| <span class="hljs-meta">... </span> bboxes, cats, areas, ids = [], [], [], [] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> i, (bbox, cat) <span class="hljs-keyword">in</span> <span class="hljs-built_in">enumerate</span>(<span class="hljs-built_in">zip</span>(bboxes, categories)): | |
| <span class="hljs-meta">... </span> x, y, w, h = bbox | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">if</span> w <= <span class="hljs-number">0</span> <span class="hljs-keyword">or</span> h <= <span class="hljs-number">0</span>: | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">continue</span> | |
| <span class="hljs-meta">... </span> x = <span class="hljs-built_in">max</span>(<span class="hljs-number">0.0</span>, <span class="hljs-built_in">min</span>(x, img_w)) | |
| <span class="hljs-meta">... </span> y = <span class="hljs-built_in">max</span>(<span class="hljs-number">0.0</span>, <span class="hljs-built_in">min</span>(y, img_h)) | |
| <span class="hljs-meta">... </span> w = <span class="hljs-built_in">min</span>(w, img_w - x) | |
| <span class="hljs-meta">... </span> h = <span class="hljs-built_in">min</span>(h, img_h - y) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">if</span> w <= <span class="hljs-number">0</span> <span class="hljs-keyword">or</span> h <= <span class="hljs-number">0</span>: | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">continue</span> | |
| <span class="hljs-meta">... </span> bboxes.append([x, y, w, h]) | |
| <span class="hljs-meta">... </span> cats.append(label2id[cat]) | |
| <span class="hljs-meta">... </span> areas.append(w * h) | |
| <span class="hljs-meta">... </span> ids.append(i) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> { | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"image_id"</span>: idx, <span class="hljs-string">"image"</span>: example[<span class="hljs-string">"image"</span>], | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"width"</span>: example[<span class="hljs-string">"width"</span>], <span class="hljs-string">"height"</span>: example[<span class="hljs-string">"height"</span>], | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"objects"</span>: {<span class="hljs-string">"id"</span>: ids, <span class="hljs-string">"bbox"</span>: bboxes, <span class="hljs-string">"category"</span>: cats, <span class="hljs-string">"area"</span>: areas}, | |
| <span class="hljs-meta">... </span> } | |
| <span class="hljs-meta">>>> </span>ds_prepared = ds[<span class="hljs-string">"train"</span>].<span class="hljs-built_in">map</span>(prepare_example, with_indices=<span class="hljs-literal">True</span>, remove_columns=ds[<span class="hljs-string">"train"</span>].column_names) | |
| <span class="hljs-meta">>>> </span>ds_prepared = ds_prepared.<span class="hljs-built_in">filter</span>(<span class="hljs-keyword">lambda</span> x: <span class="hljs-built_in">len</span>(x[<span class="hljs-string">"objects"</span>][<span class="hljs-string">"bbox"</span>]) > <span class="hljs-number">0</span>) | |
| <span class="hljs-meta">>>> </span>split = ds_prepared.train_test_split(test_size=<span class="hljs-number">0.15</span>, seed=<span class="hljs-number">1337</span>) | |
| <span class="hljs-meta">>>> </span>train_ds = split[<span class="hljs-string">"train"</span>] | |
| <span class="hljs-meta">>>> </span>val_ds = split[<span class="hljs-string">"test"</span>] | |
| <span class="hljs-meta">>>> </span><span class="hljs-built_in">print</span>(<span class="hljs-string">f"Train: <span class="hljs-subst">{<span class="hljs-built_in">len</span>(train_ds)}</span>, Validation: <span class="hljs-subst">{<span class="hljs-built_in">len</span>(val_ds)}</span>"</span>) | |
| Train: <span class="hljs-number">6669</span>, Validation: <span class="hljs-number">1177</span><!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="preprocess-the-data" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#preprocess-the-data"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Preprocess the data</span></h2> <p data-svelte-h="svelte-elknid"><a href="/docs/transformers/pr_41992/en/model_doc/auto#transformers.AutoImageProcessor">AutoImageProcessor</a> takes care of processing image data to create <code>pixel_values</code>, <code>pixel_mask</code>, and | |
| <code>labels</code> that the model can train with. The image processor handles resizing, padding, and normalization. On top of that, you can optionally add random data augmentations (see <a href="#data-augmentation">below</a>) to improve generalization.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">import</span> numpy <span class="hljs-keyword">as</span> np | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> functools <span class="hljs-keyword">import</span> partial | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> AutoImageProcessor | |
| <span class="hljs-meta">>>> </span>image_processor = AutoImageProcessor.from_pretrained(MODEL_NAME)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-15zjpbg">The <code>image_processor</code> expects annotations in the COCO format: <code>{'image_id': int, 'annotations': list[Dict]}</code>. Format each example’s annotations and let the processor handle the rest:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">format_image_annotations_as_coco</span>(<span class="hljs-params">image_id, categories, areas, bboxes</span>): | |
| <span class="hljs-meta">... </span> annotations = [] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> category, area, bbox <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(categories, areas, bboxes): | |
| <span class="hljs-meta">... </span> annotations.append({ | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"image_id"</span>: image_id, | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"category_id"</span>: category, | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"iscrowd"</span>: <span class="hljs-number">0</span>, | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"area"</span>: area, | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"bbox"</span>: <span class="hljs-built_in">list</span>(bbox), | |
| <span class="hljs-meta">... </span> }) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> {<span class="hljs-string">"image_id"</span>: image_id, <span class="hljs-string">"annotations"</span>: annotations} | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">transform_batch</span>(<span class="hljs-params">examples, image_processor</span>): | |
| <span class="hljs-meta">... </span> images = [] | |
| <span class="hljs-meta">... </span> annotations = [] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> image_id, image, objects <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(examples[<span class="hljs-string">"image_id"</span>], examples[<span class="hljs-string">"image"</span>], examples[<span class="hljs-string">"objects"</span>]): | |
| <span class="hljs-meta">... </span> images.append(np.array(image.convert(<span class="hljs-string">"RGB"</span>))) | |
| <span class="hljs-meta">... </span> formatted = format_image_annotations_as_coco( | |
| <span class="hljs-meta">... </span> image_id, objects[<span class="hljs-string">"category"</span>], objects[<span class="hljs-string">"area"</span>], objects[<span class="hljs-string">"bbox"</span>] | |
| <span class="hljs-meta">... </span> ) | |
| <span class="hljs-meta">... </span> annotations.append(formatted) | |
| <span class="hljs-meta">... </span> result = image_processor(images=images, annotations=annotations, return_tensors=<span class="hljs-string">"pt"</span>) | |
| <span class="hljs-meta">... </span> result.pop(<span class="hljs-string">"pixel_mask"</span>, <span class="hljs-literal">None</span>) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> result | |
| <span class="hljs-meta">>>> </span>transform_fn = partial(transform_batch, image_processor=image_processor) | |
| <span class="hljs-meta">>>> </span>train_ds = train_ds.with_transform(transform_fn) | |
| <span class="hljs-meta">>>> </span>val_ds = val_ds.with_transform(transform_fn)<!-- HTML_TAG_END --></pre></div> <h3 class="relative group"><a id="data-augmentation" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#data-augmentation"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Data augmentation</span></h3> <p data-svelte-h="svelte-7gwhqa">The transform above only resizes and normalizes images. Random augmentations applied to the <strong>training</strong> split usually improve generalization, while the validation split should stay augmentation-free so that evaluation stays deterministic. A common choice is <a href="https://albumentations.ai/" rel="nofollow">Albumentations</a>, which augments the image and its bounding boxes together. Define a pipeline with <code>bbox_params</code> so boxes are transformed consistently with the image, then recompute areas from the augmented boxes:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">import</span> albumentations <span class="hljs-keyword">as</span> A | |
| <span class="hljs-meta">>>> </span>train_augment = A.Compose( | |
| <span class="hljs-meta">... </span> [ | |
| <span class="hljs-meta">... </span> A.Perspective(p=<span class="hljs-number">0.1</span>), | |
| <span class="hljs-meta">... </span> A.HorizontalFlip(p=<span class="hljs-number">0.5</span>), | |
| <span class="hljs-meta">... </span> A.RandomBrightnessContrast(p=<span class="hljs-number">0.5</span>), | |
| <span class="hljs-meta">... </span> A.HueSaturationValue(p=<span class="hljs-number">0.1</span>), | |
| <span class="hljs-meta">... </span> ], | |
| <span class="hljs-meta">... </span> bbox_params=A.BboxParams(<span class="hljs-built_in">format</span>=<span class="hljs-string">"coco"</span>, label_fields=[<span class="hljs-string">"category"</span>], clip=<span class="hljs-literal">True</span>, min_area=<span class="hljs-number">25</span>), | |
| <span class="hljs-meta">... </span>) | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">augment_and_transform_batch</span>(<span class="hljs-params">examples, image_processor, transform</span>): | |
| <span class="hljs-meta">... </span> images = [] | |
| <span class="hljs-meta">... </span> annotations = [] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> image_id, image, objects <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(examples[<span class="hljs-string">"image_id"</span>], examples[<span class="hljs-string">"image"</span>], examples[<span class="hljs-string">"objects"</span>]): | |
| <span class="hljs-meta">... </span> image = np.array(image.convert(<span class="hljs-string">"RGB"</span>)) | |
| <span class="hljs-meta">... </span> output = transform(image=image, bboxes=objects[<span class="hljs-string">"bbox"</span>], category=objects[<span class="hljs-string">"category"</span>]) | |
| <span class="hljs-meta">... </span> images.append(output[<span class="hljs-string">"image"</span>]) | |
| <span class="hljs-meta">... </span> areas = [w * h <span class="hljs-keyword">for</span> (_, _, w, h) <span class="hljs-keyword">in</span> output[<span class="hljs-string">"bboxes"</span>]] | |
| <span class="hljs-meta">... </span> formatted = format_image_annotations_as_coco( | |
| <span class="hljs-meta">... </span> image_id, output[<span class="hljs-string">"category"</span>], areas, output[<span class="hljs-string">"bboxes"</span>] | |
| <span class="hljs-meta">... </span> ) | |
| <span class="hljs-meta">... </span> annotations.append(formatted) | |
| <span class="hljs-meta">... </span> result = image_processor(images=images, annotations=annotations, return_tensors=<span class="hljs-string">"pt"</span>) | |
| <span class="hljs-meta">... </span> result.pop(<span class="hljs-string">"pixel_mask"</span>, <span class="hljs-literal">None</span>) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> result<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-15yv31l">Apply the augmenting transform to the training split only, and keep the plain <code>transform_fn</code> for validation:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span>train_augment_fn = partial(augment_and_transform_batch, image_processor=image_processor, transform=train_augment) | |
| <span class="hljs-meta">>>> </span>train_ds = train_ds.with_transform(train_augment_fn) | |
| <span class="hljs-meta">>>> </span>val_ds = val_ds.with_transform(transform_fn)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-qhmwlv">Create a custom <code>collate_fn</code> to batch images together:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">import</span> torch | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">collate_fn</span>(<span class="hljs-params">batch</span>): | |
| <span class="hljs-meta">... </span> data = {} | |
| <span class="hljs-meta">... </span> data[<span class="hljs-string">"pixel_values"</span>] = torch.stack([x[<span class="hljs-string">"pixel_values"</span>] <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> batch]) | |
| <span class="hljs-meta">... </span> data[<span class="hljs-string">"labels"</span>] = [x[<span class="hljs-string">"labels"</span>] <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> batch] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">if</span> <span class="hljs-string">"pixel_mask"</span> <span class="hljs-keyword">in</span> batch[<span class="hljs-number">0</span>]: | |
| <span class="hljs-meta">... </span> data[<span class="hljs-string">"pixel_mask"</span>] = torch.stack([x[<span class="hljs-string">"pixel_mask"</span>] <span class="hljs-keyword">for</span> x <span class="hljs-keyword">in</span> batch]) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> data | |
| <!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="preparing-function-to-compute-map" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#preparing-function-to-compute-map"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Preparing function to compute mAP</span></h2> <p data-svelte-h="svelte-p66tp6">Object detection models are commonly evaluated with a set of <a href="https://cocodataset.org/#detection-eval">COCO-style metrics</a>. We are going to use <code>torchmetrics</code> to compute <code>mAP</code> (mean average precision) and <code>mAR</code> (mean average recall) metrics and will wrap it to <code>compute_metrics</code> function in order to use in <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.Trainer">Trainer</a> for evaluation.</p> <p data-svelte-h="svelte-ceh07m">Intermediate format of boxes used for training is <code>YOLO</code> (normalized) but we will compute metrics for boxes in <code>Pascal VOC</code> (absolute) format in order to correctly handle box areas. Let’s define a function that converts bounding boxes to <code>Pascal VOC</code> format:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers.image_transforms <span class="hljs-keyword">import</span> center_to_corners_format | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">convert_bbox_yolo_to_pascal</span>(<span class="hljs-params">boxes, image_size</span>): | |
| <span class="hljs-meta">... </span> <span class="hljs-string">""" | |
| <span class="hljs-meta">... </span> Convert bounding boxes from YOLO format (x_center, y_center, width, height) in range [0, 1] | |
| <span class="hljs-meta">... </span> to Pascal VOC format (x_min, y_min, x_max, y_max) in absolute coordinates. | |
| <span class="hljs-meta">... </span> Args: | |
| <span class="hljs-meta">... </span> boxes (torch.Tensor): Bounding boxes in YOLO format | |
| <span class="hljs-meta">... </span> image_size (tuple[int, int]): Image size in format (height, width) | |
| <span class="hljs-meta">... </span> Returns: | |
| <span class="hljs-meta">... </span> torch.Tensor: Bounding boxes in Pascal VOC format (x_min, y_min, x_max, y_max) | |
| <span class="hljs-meta">... </span> """</span> | |
| <span class="hljs-meta">... </span> <span class="hljs-comment"># convert center to corners format</span> | |
| <span class="hljs-meta">... </span> boxes = center_to_corners_format(boxes) | |
| <span class="hljs-meta">... </span> <span class="hljs-comment"># convert to absolute coordinates</span> | |
| <span class="hljs-meta">... </span> height, width = image_size | |
| <span class="hljs-meta">... </span> boxes = boxes * torch.tensor([[width, height, width, height]]) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> boxes<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-izy56o">Then, in <code>compute_metrics</code> function we collect <code>predicted</code> and <code>target</code> bounding boxes, scores and labels from evaluation loop results and pass it to the scoring function.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">import</span> numpy <span class="hljs-keyword">as</span> np | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> dataclasses <span class="hljs-keyword">import</span> dataclass | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> torchmetrics.detection.mean_ap <span class="hljs-keyword">import</span> MeanAveragePrecision | |
| <span class="hljs-meta">>>> </span>@dataclass | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">class</span> <span class="hljs-title class_">ModelOutput</span>: | |
| <span class="hljs-meta">... </span> logits: torch.Tensor | |
| <span class="hljs-meta">... </span> pred_boxes: torch.Tensor | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">_get_orig_size</span>(<span class="hljs-params">image_target</span>): | |
| <span class="hljs-meta">... </span> <span class="hljs-string">"""Robust orig_size extraction - Trainer serialization can truncate to 1 element."""</span> | |
| <span class="hljs-meta">... </span> orig = np.atleast_1d(np.asarray(image_target[<span class="hljs-string">"orig_size"</span>])).flatten() | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">if</span> <span class="hljs-built_in">len</span>(orig) >= <span class="hljs-number">2</span>: | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> (<span class="hljs-built_in">int</span>(orig[<span class="hljs-number">0</span>]), <span class="hljs-built_in">int</span>(orig[<span class="hljs-number">1</span>])) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> (<span class="hljs-built_in">int</span>(orig[<span class="hljs-number">0</span>]), <span class="hljs-built_in">int</span>(orig[<span class="hljs-number">0</span>])) | |
| <span class="hljs-meta">>>> </span>@torch.no_grad() | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">def</span> <span class="hljs-title function_">compute_metrics</span>(<span class="hljs-params">evaluation_results, image_processor, threshold=<span class="hljs-number">0.0</span>, id2label=<span class="hljs-literal">None</span></span>): | |
| <span class="hljs-meta">... </span> predictions, targets = evaluation_results.predictions, evaluation_results.label_ids | |
| <span class="hljs-meta">... </span> image_sizes = [] | |
| <span class="hljs-meta">... </span> post_processed_targets = [] | |
| <span class="hljs-meta">... </span> post_processed_predictions = [] | |
| ... | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> batch <span class="hljs-keyword">in</span> targets: | |
| <span class="hljs-meta">... </span> batch_sizes = [] | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> image_target <span class="hljs-keyword">in</span> batch: | |
| <span class="hljs-meta">... </span> h, w = _get_orig_size(image_target) | |
| <span class="hljs-meta">... </span> batch_sizes.append([h, w]) | |
| <span class="hljs-meta">... </span> boxes = torch.tensor(image_target[<span class="hljs-string">"boxes"</span>]) | |
| <span class="hljs-meta">... </span> boxes = convert_bbox_yolo_to_pascal(boxes, (h, w)) | |
| <span class="hljs-meta">... </span> labels = torch.tensor(image_target[<span class="hljs-string">"class_labels"</span>]) | |
| <span class="hljs-meta">... </span> post_processed_targets.append({<span class="hljs-string">"boxes"</span>: boxes, <span class="hljs-string">"labels"</span>: labels}) | |
| <span class="hljs-meta">... </span> image_sizes.append(torch.tensor(batch_sizes)) | |
| ... | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> batch, target_sizes <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(predictions, image_sizes): | |
| <span class="hljs-meta">... </span> batch_logits, batch_boxes = batch[<span class="hljs-number">1</span>], batch[<span class="hljs-number">2</span>] | |
| <span class="hljs-meta">... </span> output = ModelOutput(logits=torch.tensor(batch_logits), pred_boxes=torch.tensor(batch_boxes)) | |
| <span class="hljs-meta">... </span> post_processed_output = image_processor.post_process_object_detection( | |
| <span class="hljs-meta">... </span> output, threshold=threshold, target_sizes=target_sizes | |
| <span class="hljs-meta">... </span> ) | |
| <span class="hljs-meta">... </span> post_processed_predictions.extend(post_processed_output) | |
| ... | |
| <span class="hljs-meta">... </span> metric = MeanAveragePrecision(box_format=<span class="hljs-string">"xyxy"</span>, class_metrics=<span class="hljs-literal">True</span>) | |
| <span class="hljs-meta">... </span> metric.update(post_processed_predictions, post_processed_targets) | |
| <span class="hljs-meta">... </span> metrics = metric.compute() | |
| ... | |
| <span class="hljs-meta">... </span> classes = metrics.pop(<span class="hljs-string">"classes"</span>) | |
| <span class="hljs-meta">... </span> map_per_class = metrics.pop(<span class="hljs-string">"map_per_class"</span>) | |
| <span class="hljs-meta">... </span> mar_100_per_class = metrics.pop(<span class="hljs-string">"mar_100_per_class"</span>) | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">for</span> class_id, class_map, class_mar <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(classes, map_per_class, mar_100_per_class): | |
| <span class="hljs-meta">... </span> class_name = id2label[class_id.item()] <span class="hljs-keyword">if</span> id2label <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span> <span class="hljs-keyword">else</span> class_id.item() | |
| <span class="hljs-meta">... </span> metrics[<span class="hljs-string">f"map_<span class="hljs-subst">{class_name}</span>"</span>] = class_map | |
| <span class="hljs-meta">... </span> metrics[<span class="hljs-string">f"mar_100_<span class="hljs-subst">{class_name}</span>"</span>] = class_mar | |
| ... | |
| <span class="hljs-meta">... </span> metrics = {k: <span class="hljs-built_in">round</span>(v.item(), <span class="hljs-number">4</span>) <span class="hljs-keyword">for</span> k, v <span class="hljs-keyword">in</span> metrics.items()} | |
| <span class="hljs-meta">... </span> <span class="hljs-keyword">return</span> metrics | |
| <span class="hljs-meta">>>> </span>eval_compute_metrics_fn = partial( | |
| <span class="hljs-meta">... </span> compute_metrics, image_processor=image_processor, id2label=id2label, threshold=<span class="hljs-number">0.0</span> | |
| <span class="hljs-meta">... </span>)<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="training-the-detection-model" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#training-the-detection-model"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Training the detection model</span></h2> <p data-svelte-h="svelte-1970dhn">You have done most of the heavy lifting in the previous sections, so now you are ready to train your model! | |
| The images in this dataset are still quite large, even after resizing. This means that finetuning this model will | |
| require at least one GPU.</p> <p data-svelte-h="svelte-qp7n2l">Training involves the following steps:</p> <ol data-svelte-h="svelte-p3dq9b"><li>Load the model with <a href="/docs/transformers/pr_41992/en/model_doc/auto#transformers.AutoModelForObjectDetection">AutoModelForObjectDetection</a> using the same checkpoint as in the preprocessing.</li> <li>Define your training hyperparameters in <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.TrainingArguments">TrainingArguments</a>.</li> <li>Pass the training arguments to <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.Trainer">Trainer</a> along with the model, dataset, image processor, and data collator.</li> <li>Call <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.Trainer.train">train()</a> to finetune your model.</li></ol> <p data-svelte-h="svelte-3tgt16">When loading the model from the same checkpoint that you used for the preprocessing, remember to pass the <code>label2id</code> | |
| and <code>id2label</code> maps that you created earlier from the dataset’s metadata. Additionally, we specify <code>ignore_mismatched_sizes=True</code> to replace the existing classification head with a new one.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> AutoModelForObjectDetection | |
| <span class="hljs-meta">>>> </span>model = AutoModelForObjectDetection.from_pretrained( | |
| <span class="hljs-meta">... </span> MODEL_NAME, | |
| <span class="hljs-meta">... </span> id2label=id2label, | |
| <span class="hljs-meta">... </span> label2id=label2id, | |
| <span class="hljs-meta">... </span> ignore_mismatched_sizes=<span class="hljs-literal">True</span>, | |
| <span class="hljs-meta">... </span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-4hrle">In the <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.TrainingArguments">TrainingArguments</a> use <code>output_dir</code> to specify where to save your model, then configure hyperparameters as you see fit. For <code>num_train_epochs=5</code> training will take about 35 minutes on an A100 GPU, increase the number of epochs to get better results.</p> <p data-svelte-h="svelte-1z0bxll">Important notes:</p> <ul data-svelte-h="svelte-18syxls"><li>Do not remove unused columns because this will drop the image column. Without the image column, you | |
| can’t create <code>pixel_values</code>. For this reason, set <code>remove_unused_columns</code> to <code>False</code>.</li> <li>Set <code>eval_do_concat_batches=False</code> to get proper evaluation results. Images have different number of target boxes, if batches are concatenated we will not be able to determine which boxes belongs to particular image.</li></ul> <p data-svelte-h="svelte-m8o45s">If you wish to share your model by pushing to the Hub, set <code>push_to_hub</code> to <code>True</code> (you must be signed in to Hugging | |
| Face to upload your model).</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> TrainingArguments | |
| <span class="hljs-meta">>>> </span>training_args = TrainingArguments( | |
| <span class="hljs-meta">... </span> output_dir=<span class="hljs-string">"rf_detr_finetuned_mobile_ui"</span>, | |
| <span class="hljs-meta">... </span> num_train_epochs=<span class="hljs-number">5</span>, | |
| <span class="hljs-meta">... </span> bf16=<span class="hljs-literal">True</span>, | |
| <span class="hljs-meta">... </span> per_device_train_batch_size=<span class="hljs-number">8</span>, | |
| <span class="hljs-meta">... </span> dataloader_num_workers=<span class="hljs-number">4</span>, | |
| <span class="hljs-meta">... </span> learning_rate=<span class="hljs-number">5e-5</span>, | |
| <span class="hljs-meta">... </span> lr_scheduler_type=<span class="hljs-string">"cosine"</span>, | |
| <span class="hljs-meta">... </span> weight_decay=<span class="hljs-number">1e-4</span>, | |
| <span class="hljs-meta">... </span> max_grad_norm=<span class="hljs-number">0.01</span>, | |
| <span class="hljs-meta">... </span> metric_for_best_model=<span class="hljs-string">"eval_map"</span>, | |
| <span class="hljs-meta">... </span> greater_is_better=<span class="hljs-literal">True</span>, | |
| <span class="hljs-meta">... </span> load_best_model_at_end=<span class="hljs-literal">True</span>, | |
| <span class="hljs-meta">... </span> eval_strategy=<span class="hljs-string">"epoch"</span>, | |
| <span class="hljs-meta">... </span> save_strategy=<span class="hljs-string">"epoch"</span>, | |
| <span class="hljs-meta">... </span> save_total_limit=<span class="hljs-number">2</span>, | |
| <span class="hljs-meta">... </span> remove_unused_columns=<span class="hljs-literal">False</span>, | |
| <span class="hljs-meta">... </span> report_to=<span class="hljs-string">"trackio"</span>, | |
| <span class="hljs-meta">... </span> run_name=<span class="hljs-string">"mobile-ui-detection"</span>, | |
| <span class="hljs-meta">... </span> eval_do_concat_batches=<span class="hljs-literal">False</span>, | |
| <span class="hljs-meta">... </span> push_to_hub=<span class="hljs-literal">True</span>, | |
| <span class="hljs-meta">... </span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-17s6nom">Finally, bring everything together, and call <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.Trainer.train">train()</a>:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> Trainer | |
| <span class="hljs-meta">>>> </span>trainer = Trainer( | |
| <span class="hljs-meta">... </span> model=model, | |
| <span class="hljs-meta">... </span> args=training_args, | |
| <span class="hljs-meta">... </span> train_dataset=train_ds, | |
| <span class="hljs-meta">... </span> eval_dataset=val_ds, | |
| <span class="hljs-meta">... </span> processing_class=image_processor, | |
| <span class="hljs-meta">... </span> data_collator=collate_fn, | |
| <span class="hljs-meta">... </span> compute_metrics=eval_compute_metrics_fn, | |
| <span class="hljs-meta">... </span>) | |
| <span class="hljs-meta">>>> </span>trainer.train()<!-- HTML_TAG_END --></pre></div> <div data-svelte-h="svelte-l4ov26"><progress value="2085" max="2085" style="width:300px; height:20px; vertical-align: middle;"></progress> | |
| [2085/2085 38:39, Epoch 5/5]</div> <table border="1" class="dataframe" data-svelte-h="svelte-134v1fe"><thead><tr style="text-align: left;"><th>Epoch</th> <th>Training Loss</th> <th>Validation Loss</th> <th>Map</th> <th>Map 50</th> <th>Map 75</th> <th>Map Small</th> <th>Map Medium</th> <th>Map Large</th> <th>Mar 1</th> <th>Mar 10</th> <th>Mar 100</th> <th>Mar Small</th> <th>Mar Medium</th> <th>Mar Large</th> <th>Map Group</th> <th>Mar 100 Group</th> <th>Map Image</th> <th>Mar 100 Image</th> <th>Map Rectangle</th> <th>Mar 100 Rectangle</th> <th>Map Text</th> <th>Mar 100 Text</th></tr></thead> <tbody><tr><td>1</td> <td>No log</td> <td>9.9234</td> <td>0.1303</td> <td>0.2236</td> <td>0.1478</td> <td>0.0909</td> <td>0.2030</td> <td>0.2524</td> <td>0.0421</td> <td>0.2520</td> <td>0.4683</td> <td>0.3113</td> <td>0.5607</td> <td>0.6782</td> <td>0.1244</td> <td>0.5122</td> <td>0.0958</td> <td>0.5035</td> <td>0.1285</td> <td>0.4328</td> <td>0.1725</td> <td>0.4413</td></tr> <tr><td>2</td> <td>No log</td> <td>9.8472</td> <td>0.1893</td> <td>0.3017</td> <td>0.2124</td> <td>0.1347</td> <td>0.2789</td> <td>0.3038</td> <td>0.0549</td> <td>0.2961</td> <td>0.5140</td> <td>0.3433</td> <td>0.5941</td> <td>0.7406</td> <td>0.1305</td> <td>0.5423</td> <td>0.1979</td> <td>0.5578</td> <td>0.1964</td> <td>0.4648</td> <td>0.2324</td> <td>0.4437</td></tr> <tr><td>3</td> <td>No log</td> <td>9.6401</td> <td>0.2275</td> <td>0.3547</td> <td>0.2657</td> <td>0.1698</td> <td>0.3336</td> <td>0.3892</td> <td>0.0611</td> <td>0.3204</td> <td>0.5270</td> <td>0.3625</td> <td>0.6143</td> <td>0.7496</td> <td>0.1602</td> <td>0.5684</td> <td>0.2617</td> <td>0.5763</td> <td>0.2249</td> <td>0.4684</td> <td>0.2631</td> <td>0.4692</td></tr> <tr><td>4</td> <td>No log</td> <td>9.5770</td> <td>0.2733</td> <td>0.4068</td> <td>0.3133</td> <td>0.2100</td> <td>0.3867</td> <td>0.4343</td> <td>0.0668</td> <td>0.3456</td> <td>0.5593</td> <td>0.3875</td> <td>0.6393</td> <td>0.7725</td> <td>0.2013</td> <td>0.5941</td> <td>0.3158</td> <td>0.6065</td> <td>0.2733</td> <td>0.4998</td> <td>0.3028</td> <td>0.4756</td></tr> <tr><td>5</td> <td>10.3700</td> <td>11.0500</td> <td>0.2827</td> <td>0.4193</td> <td>0.2913</td> <td>0.2021</td> <td>0.2814</td> <td>0.3763</td> <td>0.0609</td> <td>0.3403</td> <td>0.5668</td> <td>0.4138</td> <td>0.5669</td> <td>0.7317</td> <td>0.2092</td> <td>0.5979</td> <td>0.3334</td> <td>0.6295</td> <td>0.2793</td> <td>0.5245</td> <td>0.3089</td> <td>0.5151</td></tr></tbody> </table><p data-svelte-h="svelte-b5f4e5"></p><p data-svelte-h="svelte-1mv3qjv">If you have set <code>push_to_hub</code> to <code>True</code> in the <code>training_args</code>, the training checkpoints are pushed to the | |
| Hugging Face Hub. Upon training completion, push the final model to the Hub as well by calling the <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.Trainer.push_to_hub">push_to_hub()</a> method.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span>trainer.push_to_hub()<!-- HTML_TAG_END --></pre></div> <h2 class="relative group"><a id="evaluate" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#evaluate"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Evaluate</span></h2> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> pprint <span class="hljs-keyword">import</span> pprint | |
| <span class="hljs-meta">>>> </span>metrics = trainer.evaluate(eval_dataset=val_ds, metric_key_prefix=<span class="hljs-string">"test"</span>) | |
| <span class="hljs-meta">>>> </span>pprint(metrics) | |
| {<span class="hljs-string">'test_loss'</span>: <span class="hljs-number">11.05</span>, | |
| <span class="hljs-string">'test_map'</span>: <span class="hljs-number">0.2827</span>, | |
| <span class="hljs-string">'test_map_50'</span>: <span class="hljs-number">0.4193</span>, | |
| <span class="hljs-string">'test_map_75'</span>: <span class="hljs-number">0.2913</span>, | |
| <span class="hljs-string">'test_map_group'</span>: <span class="hljs-number">0.2092</span>, | |
| <span class="hljs-string">'test_map_image'</span>: <span class="hljs-number">0.3334</span>, | |
| <span class="hljs-string">'test_map_large'</span>: <span class="hljs-number">0.3763</span>, | |
| <span class="hljs-string">'test_map_medium'</span>: <span class="hljs-number">0.2814</span>, | |
| <span class="hljs-string">'test_map_rectangle'</span>: <span class="hljs-number">0.2793</span>, | |
| <span class="hljs-string">'test_map_small'</span>: <span class="hljs-number">0.2021</span>, | |
| <span class="hljs-string">'test_map_text'</span>: <span class="hljs-number">0.3089</span>, | |
| <span class="hljs-string">'test_mar_1'</span>: <span class="hljs-number">0.0609</span>, | |
| <span class="hljs-string">'test_mar_10'</span>: <span class="hljs-number">0.3403</span>, | |
| <span class="hljs-string">'test_mar_100'</span>: <span class="hljs-number">0.5668</span>, | |
| <span class="hljs-string">'test_mar_100_group'</span>: <span class="hljs-number">0.5979</span>, | |
| <span class="hljs-string">'test_mar_100_image'</span>: <span class="hljs-number">0.6295</span>, | |
| <span class="hljs-string">'test_mar_100_rectangle'</span>: <span class="hljs-number">0.5245</span>, | |
| <span class="hljs-string">'test_mar_100_text'</span>: <span class="hljs-number">0.5151</span>, | |
| <span class="hljs-string">'test_mar_large'</span>: <span class="hljs-number">0.7317</span>, | |
| <span class="hljs-string">'test_mar_medium'</span>: <span class="hljs-number">0.5669</span>, | |
| <span class="hljs-string">'test_mar_small'</span>: <span class="hljs-number">0.4138</span>}<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1obpl2z">These results can be further improved by increasing the number of epochs or adjusting other hyperparameters in <a href="/docs/transformers/pr_41992/en/main_classes/trainer#transformers.TrainingArguments">TrainingArguments</a>. Give it a go!</p> <h2 class="relative group"><a id="inference" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#inference"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Inference</span></h2> <p data-svelte-h="svelte-1awi77u">Now that you have finetuned a model, evaluated it, and uploaded it to the Hugging Face Hub, you can use it for inference.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">import</span> torch | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> PIL <span class="hljs-keyword">import</span> Image, ImageDraw | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> AutoImageProcessor, AutoModelForObjectDetection | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">from</span> datasets <span class="hljs-keyword">import</span> load_dataset | |
| <span class="hljs-meta">>>> </span>ds = load_dataset(<span class="hljs-string">"merve/mobile-ui-design"</span>, split=<span class="hljs-string">"train"</span>) | |
| <span class="hljs-meta">>>> </span>image = ds[<span class="hljs-number">5</span>][<span class="hljs-string">"image"</span>].convert(<span class="hljs-string">"RGB"</span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-f44t9b">Load model and image processor from the Hugging Face Hub (skip to use already trained in this session):</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span>model_repo = <span class="hljs-string">"merve/rf_detr_finetuned_mobile_ui"</span> | |
| <span class="hljs-meta">>>> </span>image_processor = AutoImageProcessor.from_pretrained(model_repo) | |
| <span class="hljs-meta">>>> </span>model = AutoModelForObjectDetection.from_pretrained(model_repo) | |
| <span class="hljs-meta">>>> </span>model.<span class="hljs-built_in">eval</span>()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-m3ccz3">And detect bounding boxes:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span><span class="hljs-keyword">with</span> torch.no_grad(): | |
| <span class="hljs-meta">... </span> inputs = image_processor(images=[image], return_tensors=<span class="hljs-string">"pt"</span>) | |
| <span class="hljs-meta">... </span> outputs = model(**inputs) | |
| <span class="hljs-meta">... </span> target_sizes = torch.tensor([[image.size[<span class="hljs-number">1</span>], image.size[<span class="hljs-number">0</span>]]]) | |
| <span class="hljs-meta">... </span> results = image_processor.post_process_object_detection(outputs, threshold=<span class="hljs-number">0.5</span>, target_sizes=target_sizes)[<span class="hljs-number">0</span>] | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">for</span> score, label, box <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(results[<span class="hljs-string">"scores"</span>], results[<span class="hljs-string">"labels"</span>], results[<span class="hljs-string">"boxes"</span>]): | |
| <span class="hljs-meta">... </span> box = [<span class="hljs-built_in">round</span>(i, <span class="hljs-number">2</span>) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> box.tolist()] | |
| <span class="hljs-meta">... </span> <span class="hljs-built_in">print</span>( | |
| <span class="hljs-meta">... </span> <span class="hljs-string">f"Detected <span class="hljs-subst">{model.config.id2label[label.item()]}</span> with confidence "</span> | |
| <span class="hljs-meta">... </span> <span class="hljs-string">f"<span class="hljs-subst">{<span class="hljs-built_in">round</span>(score.item(), <span class="hljs-number">3</span>)}</span> at location <span class="hljs-subst">{box}</span>"</span> | |
| <span class="hljs-meta">... </span> ) | |
| Detected text <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.727</span> at location [<span class="hljs-number">324.02</span>, <span class="hljs-number">340.55</span>, <span class="hljs-number">339.52</span>, <span class="hljs-number">359.12</span>] | |
| Detected rectangle <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.717</span> at location [<span class="hljs-number">39.97</span>, <span class="hljs-number">705.14</span>, <span class="hljs-number">335.93</span>, <span class="hljs-number">753.54</span>] | |
| Detected text <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.702</span> at location [<span class="hljs-number">199.94</span>, <span class="hljs-number">473.66</span>, <span class="hljs-number">213.41</span>, <span class="hljs-number">490.6</span>] | |
| Detected text <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.678</span> at location [<span class="hljs-number">153.14</span>, <span class="hljs-number">474.81</span>, <span class="hljs-number">165.33</span>, <span class="hljs-number">491.0</span>] | |
| Detected text <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.675</span> at location [<span class="hljs-number">262.67</span>, <span class="hljs-number">718.28</span>, <span class="hljs-number">281.44</span>, <span class="hljs-number">740.81</span>] | |
| Detected rectangle <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.655</span> at location [<span class="hljs-number">143.57</span>, <span class="hljs-number">242.51</span>, <span class="hljs-number">214.32</span>, <span class="hljs-number">274.26</span>] | |
| Detected text <span class="hljs-keyword">with</span> confidence <span class="hljs-number">0.653</span> at location [<span class="hljs-number">298.68</span>, <span class="hljs-number">637.77</span>, <span class="hljs-number">345.68</span>, <span class="hljs-number">656.26</span>]<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-7zeucu">Let’s plot the result:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class="language-py "><!-- HTML_TAG_START --><span class="hljs-meta">>>> </span>draw = ImageDraw.Draw(image) | |
| <span class="hljs-meta">>>> </span>colors = {<span class="hljs-string">"group"</span>: <span class="hljs-string">"blue"</span>, <span class="hljs-string">"image"</span>: <span class="hljs-string">"green"</span>, <span class="hljs-string">"rectangle"</span>: <span class="hljs-string">"red"</span>, <span class="hljs-string">"text"</span>: <span class="hljs-string">"orange"</span>} | |
| <span class="hljs-meta">>>> </span><span class="hljs-keyword">for</span> score, label, box <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(results[<span class="hljs-string">"scores"</span>], results[<span class="hljs-string">"labels"</span>], results[<span class="hljs-string">"boxes"</span>]): | |
| <span class="hljs-meta">... </span> box = [<span class="hljs-built_in">round</span>(i, <span class="hljs-number">2</span>) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> box.tolist()] | |
| <span class="hljs-meta">... </span> x, y, x2, y2 = <span class="hljs-built_in">tuple</span>(box) | |
| <span class="hljs-meta">... </span> label_name = model.config.id2label[label.item()] | |
| <span class="hljs-meta">... </span> color = colors.get(label_name, <span class="hljs-string">"red"</span>) | |
| <span class="hljs-meta">... </span> draw.rectangle((x, y, x2, y2), outline=color, width=<span class="hljs-number">2</span>) | |
| <span class="hljs-meta">... </span> draw.text((x, y), <span class="hljs-string">f"<span class="hljs-subst">{label_name}</span> <span class="hljs-subst">{score:<span class="hljs-number">.2</span>f}</span>"</span>, fill=color) | |
| <span class="hljs-meta">>>> </span>image<!-- HTML_TAG_END --></pre></div> <div class="flex justify-center" data-svelte-h="svelte-3372v8"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/transformers/mobile_ui_result_5.png" alt="Object detection result on a cart screen"></div> <div class="flex justify-center" data-svelte-h="svelte-1odau5f"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/transformers/mobile_ui_result_50.png" alt="Object detection result on a followers screen"></div> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/transformers/blob/main/docs/source/en/tasks/object_detection.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p> | |
| <script> | |
| { | |
| __sveltekit_1cvdjju = { | |
| assets: "/docs/transformers/pr_41992/en", | |
| base: "/docs/transformers/pr_41992/en", | |
| env: {} | |
| }; | |
| const element = document.currentScript.parentElement; | |
| const data = [null,null]; | |
| Promise.all([ | |
| import("/docs/transformers/pr_41992/en/_app/immutable/entry/start.6ac19d43.js"), | |
| import("/docs/transformers/pr_41992/en/_app/immutable/entry/app.42da82bd.js") | |
| ]).then(([kit, app]) => { | |
| kit.start(app, element, { | |
| node_ids: [0, 695], | |
| data, | |
| form: null, | |
| error: null | |
| }); | |
| }); | |
| } | |
| </script> | |
Xet Storage Details
- Size:
- 93.5 kB
- Xet hash:
- 84258dd77512f3d9b6dc024bfc82e4c703e570eb98cbd3431d42f3e0456ab7b4
·
Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.