{"id":372,"date":"2021-06-15T15:45:19","date_gmt":"2021-06-15T23:45:19","guid":{"rendered":"https:\/\/live-cometml.pantheonsite.io\/?p=372"},"modified":"2025-04-24T17:30:21","modified_gmt":"2025-04-24T17:30:21","slug":"new-integration-comet-gradio","status":"publish","type":"post","link":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/","title":{"rendered":"New Integration: Comet + Gradio"},"content":{"rendered":"\n

How Gradio and Comet work beautifully together<\/em><\/h2>\n\n\n\n

 <\/p>\n\n\n\n

\n

Written by Abubakar Abid, Co-founder and CEO of Gradio<\/a><\/em><\/p>\n\n\n\n

Originally published on the Gradio blog (acquired by Hugging Face in Dec. 2021)<\/cite><\/p>\n<\/blockquote>\n\n\n\n

 <\/p>\n\n\n\n

If you\u2019d like to jump right in and start building, follow the example in this Colab Notebook<\/a><\/em>.<\/h3>\n\n\n\n

Comet<\/strong><\/a> allows data scientists to track their machine learning experiments at every stage, from training to production. Any metric can be aggregated over samples and shown in a Panel in a customizable dashboard, like below:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

 <\/p>\n\n\n\n

While aggregate metrics are a good summary of a model\u2019s performance, a complementary approach is to allow users to interactively<\/em><\/strong> explore a model\u2019s prediction on a single sample.<\/p>\n\n\n\n

By dragging-and-dropping an image, writing text, recording audio, etc., interdisciplinary machine learning teams can test models and help discover their biases and failure points <\/em>through demos like this one:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

<\/p>\n\n\n\n

 <\/p>\n\n\n\n

Building these demos often takes quite a lot of time since it involves creating a web-based front end and infrastructure for hosting and sharing the model. This is where Gradio<\/strong><\/a> comes in.<\/p>\n\n\n\n

The open-source Python library (with more than 2,600 stars<\/a>) lets machine learning developers create demos and GUIs from models very easily, with just a few lines of Python. Here\u2019s the code for image classification demo like the one above:<\/p>\n\n\n\n

import gradio as gr\ninputs = gr.inputs.Image(type='pil',label=\"Original Image\")\noutputs = gr.outputs.Textbox(label=\"bird class\")\ngr.Interface(bird_model, inputs, outputs).launch()<\/pre>\n\n\n\n
We\u2019re excited to share that Gradio and Comet now work beautifully together! You can create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code<\/strong>, so colleagues and team members can understand and explore your models, regardless of their technical backgrounds!<\/p>\n\n\n\n
\n\n\n\n
Getting Started with Gradio + Comet<\/h2>\n\n\n\n
Here\u2019s how it works, from start to finish, in 8 steps. (If you\u2019d like, refresh your knowledge of the <\/em>basics of Gradio<\/em><\/a> and the <\/em>basics<\/em><\/a> <\/a><\/em>of Comet<\/em><\/a>, first)<\/em><\/p>\n\n\n\n
1. Create a Comet account<\/h3>\n\n\n\n
Follow instructions at www.comet.com<\/a> to create your free account:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
 <\/p>\n\n\n\n
2. Get Your Comet API Key<\/h3>\n\n\n\n
Once you\u2019re logged in, click on your username and select Settings from the dropdown. In the Settings page, scroll down to \u201cDeveloper Information\u201d and click \u201cGenerate API key\u201d.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
3. Create a Project<\/h3>\n\n\n\n
Go back to the main page of your Comet profile (by clicking on the logo in the top left corner), and click on the \u201c+ New Project\u201d button. Here, you\u2019ll be able to make your project private or public.<\/p>\n\n\n\n
4. Add the \u201cGradio\u201d Panel<\/h3>\n\n\n\n
Click on the \u201c+ Add Panel\u201d button in the center of the screen:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Then, navigate to the \u201cPublic\u201d tab and search for \u201cGradio\u201d. Once you find the panel, click \u201cAdd >\u201d to add it to your experiment.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
5. Install Gradio and Comet<\/h3>\n\n\n\n
Now, we\u2019re ready to write code. Start by installing Gradio and Comet. Since both are open-source Python libraries, open up your Python coding environment and run:<\/p>\n\n\n\n
pip install gradio comet_ml<\/pre>\n\n\n\n
6. Create a Gradio Demo<\/h3>\n\n\n\n
In your Jupyter notebook or Python environment, create a Gradio demo, just as you would normally. Here\u2019s an image classification model in PyTorch, but you can use any type of model.<\/p>\n\n\n\n
import gradio as gr, torch, requests\nfrom torchvision import transforms\nfrom PIL import Image\n\nmodel = torch.hub.load('pytorch\/vision:v0.6.0', 'resnet18', pretrained=True).eval()\n\n# Download human-readable labels for ImageNet.\nresponse = requests.get(\"https:\/\/git.io\/JJkYN\")\nlabels = response.text.split(\"\\n\")\n\ndef predict(inp):\n  inp = Image.fromarray(inp.astype('uint8'), 'RGB')\n  inp = transforms.ToTensor()(inp).unsqueeze(0)\n  with torch.no_grad():\n    prediction = torch.nn.functional.softmax(model(inp)[0], dim=0)\n  return {labels[i]: float(prediction[i]) for i in range(1000)}\n\ninputs = gr.inputs.Image()\noutputs = gr.outputs.Label(num_top_classes=3)\nio = gr.Interface(fn=predict, inputs=inputs, outputs=outputs)\nio.launch()<\/pre>\n\n\n\n
7. Create a Comet Experiment<\/h3>\n\n\n\n
Create a Comet experiment, just as you would normally, by entering your API key, project name (using the name you used in Step 3), and workspace (your username for an individual project).<\/p>\n\n\n\n
from comet_ml import Experiment\n\nexperiment = Experiment(\n    api_key='RdiKpwasdfeR5qYpYX0uvYJw21I',\n    project_name='project_name\u2019, workspace='username\u2019\n)<\/pre>\n\n\n\n
8. Integrate Gradio<\/h3>\n\n\n\n
The last step\u2014integrating your Gradio demo with your Comet dashboard\u2014is just one extra line:<\/p>\n\n\n\n
io.integrate(comet_ml=experiment)<\/pre>\n\n\n\n
If you navigate back to your Comet dashboard, you\u2019ll see the following image classification Panel has appeared! You can drag-and-drop your images and see predictions (like I\u2019ve done with this image of a lion), or share your dashboard with your teammates so that they can do the same!<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
And that\u2019s it! Start building and sharing your new, interactive models today!<\/p>\n","protected":false},"excerpt":{"rendered":"
How Gradio and Comet work beautifully together   Written by Abubakar Abid, Co-founder and CEO of Gradio Originally published on the Gradio blog (acquired by Hugging Face in Dec. 2021)   If you\u2019d like to jump right in and start building, follow the example in this Colab Notebook. Comet allows data scientists to track their machine learning experiments […]<\/p>\n","protected":false},"author":4,"featured_media":373,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"customer_name":"","customer_description":"","customer_industry":"","customer_technologies":"","customer_logo":"","footnotes":""},"categories":[8,5],"tags":[],"coauthors":[128],"class_list":["post-372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-comet-community-hub","category-partners-integrations"],"yoast_head":"\nNew integration Comet Gradio | Comet<\/title>\n<meta name=\"description\" content=\"New integration: Comet and Gradio. Create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code, for easy collaboration.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"New Integration: Comet + Gradio\" \/>\n<meta property=\"og:description\" content=\"New integration: Comet and Gradio. Create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code, for easy collaboration.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/\" \/>\n<meta property=\"og:site_name\" content=\"Comet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cometdotml\" \/>\n<meta property=\"article:published_time\" content=\"2021-06-15T23:45:19+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-04-24T17:30:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg\" \/>\n\t<meta property=\"og:image:width\" content=\"906\" \/>\n\t<meta property=\"og:image:height\" content=\"470\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dhruv Nair\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Cometml\" \/>\n<meta name=\"twitter:site\" content=\"@Cometml\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dhruv Nair\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"New integration Comet Gradio | Comet","description":"New integration: Comet and Gradio. Create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code, for easy collaboration.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/","og_locale":"en_US","og_type":"article","og_title":"New Integration: Comet + Gradio","og_description":"New integration: Comet and Gradio. Create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code, for easy collaboration.","og_url":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/","og_site_name":"Comet","article_publisher":"https:\/\/www.facebook.com\/cometdotml","article_published_time":"2021-06-15T23:45:19+00:00","article_modified_time":"2025-04-24T17:30:21+00:00","og_image":[{"width":906,"height":470,"url":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg","type":"image\/jpeg"}],"author":"Dhruv Nair","twitter_card":"summary_large_image","twitter_creator":"@Cometml","twitter_site":"@Cometml","twitter_misc":{"Written by":"Dhruv Nair","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#article","isPartOf":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/"},"author":{"name":"Matt Peternell","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/85aa446f8be987e848ea929ef524b67b"},"headline":"New Integration: Comet + Gradio","datePublished":"2021-06-15T23:45:19+00:00","dateModified":"2025-04-24T17:30:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/"},"wordCount":634,"commentCount":0,"publisher":{"@id":"https:\/\/www.comet.com\/site\/#organization"},"image":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg","articleSection":["Comet Community Hub","Partners & Integrations"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/","url":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/","name":"New integration Comet Gradio | Comet","isPartOf":{"@id":"https:\/\/www.comet.com\/site\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#primaryimage"},"image":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#primaryimage"},"thumbnailUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg","datePublished":"2021-06-15T23:45:19+00:00","dateModified":"2025-04-24T17:30:21+00:00","description":"New integration: Comet and Gradio. Create a Gradio demo and include it in your Comet dashboard with just 1 extra line of code, for easy collaboration.","breadcrumb":{"@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#primaryimage","url":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg","contentUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2022\/02\/gradio-comet-asset-1.jpeg","width":906,"height":470,"caption":"Gradio Comet | Comet ML"},{"@type":"BreadcrumbList","@id":"https:\/\/www.comet.com\/site\/blog\/new-integration-comet-gradio\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.comet.com\/site\/"},{"@type":"ListItem","position":2,"name":"New Integration: Comet + Gradio"}]},{"@type":"WebSite","@id":"https:\/\/www.comet.com\/site\/#website","url":"https:\/\/www.comet.com\/site\/","name":"Comet","description":"Build Better Models Faster","publisher":{"@id":"https:\/\/www.comet.com\/site\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.comet.com\/site\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.comet.com\/site\/#organization","name":"Comet ML, Inc.","alternateName":"Comet","url":"https:\/\/www.comet.com\/site\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/#\/schema\/logo\/image\/","url":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2025\/01\/logo_comet_square.png","contentUrl":"https:\/\/www.comet.com\/site\/wp-content\/uploads\/2025\/01\/logo_comet_square.png","width":310,"height":310,"caption":"Comet ML, Inc."},"image":{"@id":"https:\/\/www.comet.com\/site\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/cometdotml","https:\/\/x.com\/Cometml","https:\/\/www.youtube.com\/channel\/UCmN63HKvfXSCS-UwVwmK8Hw"]},{"@type":"Person","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/85aa446f8be987e848ea929ef524b67b","name":"Matt Peternell","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.comet.com\/site\/#\/schema\/person\/image\/da003ee51bbeeccfb95147ec69139879","url":"https:\/\/secure.gravatar.com\/avatar\/36058153d701caaf237a96d5d6fb9c2d1678325c3ed0d8e88bf5e487019a2a53?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/36058153d701caaf237a96d5d6fb9c2d1678325c3ed0d8e88bf5e487019a2a53?s=96&d=mm&r=g","caption":"Matt Peternell"},"description":"We re-implemented the architecture of this model to incorporate patient and study information. By comparing our updated model to the original Github repository, we were able to quantify the benefits of classifying by patient as opposed to classifying by individual X-ray. We observed a 0.0254 increase in AUROC when evaluating the DenseNet121 on patients instead of on individual scans.","sameAs":["http:\/\/atre.net"],"url":"https:\/\/www.comet.com\/site\/blog\/author\/mpeternellatre-net\/"}]}},"_links":{"self":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":1,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":15687,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/posts\/372\/revisions\/15687"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/media\/373"}],"wp:attachment":[{"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/tags?post=372"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.comet.com\/site\/wp-json\/wp\/v2\/coauthors?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}