{"id":20681523,"url":"https://github.com/googlecreativelab/quickdraw-component","last_synced_at":"2025-10-16T03:50:39.207Z","repository":{"id":70992183,"uuid":"157737040","full_name":"googlecreativelab/quickdraw-component","owner":"googlecreativelab","description":"Use any of the of the 50 million Quick, Draw! doodles in your web-based project with one line of markup","archived":false,"fork":false,"pushed_at":"2024-12-11T00:30:47.000Z","size":2153,"stargazers_count":112,"open_issues_count":17,"forks_count":35,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-29T11:10:03.354Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://googlecreativelab.github.io/quickdraw-component","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/googlecreativelab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-11-15T15:59:12.000Z","updated_at":"2025-03-26T19:02:21.000Z","dependencies_parsed_at":"2024-11-16T22:11:19.583Z","dependency_job_id":"3401815d-7f1a-4402-a811-148dd14573d1","html_url":"https://github.com/googlecreativelab/quickdraw-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fquickdraw-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fquickdraw-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fquickdraw-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/googlecreativelab%2Fquickdraw-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/googlecreativelab","download_url":"https://codeload.github.com/googlecreativelab/quickdraw-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332604,"owners_count":20921853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T22:11:10.505Z","updated_at":"2025-10-16T03:50:39.199Z","avatar_url":"https://github.com/googlecreativelab.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      This project is no longer actively maintained by the Google Creative Lab but remains here in a read-only Archive mode so that it can continue to assist developers that may find the examples helpful. We aren’t able to address all pull requests or bug reports but outstanding issues will remain in read-only mode for reference purposes. Also, please note that some of the dependencies may not be up to date and there hasn’t been any QA done in a while so your mileage may vary.\n      \u003cbr\u003e\u003cbr\u003e\n      For more details on how Archiving affects Github repositories see \u003ca href=\"https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/about-archiving-repositories\"\u003ethis documentation \u003c/a\u003e.\n      \u003cbr\u003e\u003cbr\u003e\n      \u003cb\u003eWe welcome users to fork this repository\u003c/b\u003e should there be more useful, community-driven efforts that can help continue what this project began.\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n![logos for Quick, Draw! and the Polymer Project and Google Cloud](https://github.com/googlecreativelab/quickdraw-component/raw/master/images/header.png \"Quick, Draw! + Polymer Project + Google Cloud\")\n## Quick, Draw! Polymer Component \u0026 API\n\nEmbed [Quick, Draw!](https://quickdraw.withgoogle.com/) drawings into your project using a web component, as easily as:\n\n```\u003cquick-draw category=\"apple\" key=\"API_KEY\"\u003e\u003c/quick-draw\u003e```  \n\nThis component is built using [Polymer3](https://www.polymer-project.org/) and is coupled with an API layer for accessing individual drawing data from the [open sourced data set](https://github.com/googlecreativelab/quickdraw-dataset).  The drawings are drawn out to a canvas element, and provides you with options to customize it for your own web project. [Here's a demo of how it can be used in different ways.](https://googlecreativelab.github.io/quickdraw-component/demo/)\n\n### Background\n\nIn October 2016 we released [Quick, Draw!](https://quickdraw.withgoogle.com), a game to test your ability to doodle and have a neural net guess what you're drawing. You can help teach it by adding your drawings to the world’s largest doodling data set, shared publicly to help with machine learning research. \n\nSince the release, we've collected over 1 billion drawings across 345 categories. We've [released the data](https://github.com/googlecreativelab/quickdraw-dataset) in the form of [very large ndjson files](https://github.com/googlecreativelab/quickdraw-dataset/blob/master/examples/nodejs/ndjson.md) of moderated doodles. Now we are releasing a data API, a Polymer web component, and an option to self-host the 50 million files.\n\n## Run example\n\nWith npm installed, in the root of this repo:\n\n```\nnpm install\nnpm start\n```\n\nWhen this works, you'll see this simple demo of the component:\n\n![demo image](https://github.com/googlecreativelab/quickdraw-component/raw/master/images/demo.png)\n\n\n## Usage\n\nInstall as an NPM dependency to your project:\n\n```\nnpm install --save quickdraw-component\n```\n\nImport it:\n\n```\nimport 'quickdraw-component/quickdraw-component.js';\n```\n\n*You need to make sure that your app is using a tool like [Webpack](https://webpack.js.org/concepts/configuration/) or [Rollup](https://rollupjs.org/guide/en) to transpile and bundle the component into your app.*\n\nThe most basic usage of the component's properties is to include a static, random drawing of a category with an API Key:\n\n```\u003cquick-draw category=\"apple\" key=\"AIzaSyC0U3yLy_m6u7aOMi9YJL2w1vWG4oI5mj0\"\u003e\u003c/quick-draw\u003e```\n\nA list of all the available categories is [here](./categories.js).\n\n### Getting a demo API Key\n\nIt is *highly encouraged* for any large project to not use the demo endpoint as a dependency - see [Self-Hosting](#self-hosting) below.  In order to get an API key for the demo endpoint, you need to:\n\n1. [Join the Quick Draw API Google Group](https://groups.google.com/forum/#!forum/quick-draw-data-api).\n\n2. In your project on Google Cloud Platform, go to [APIs \u0026 Services \u003e Library](https://console.developers.google.com/apis/library/quickdrawfiles.appspot.com) and search for \"Quick, Draw! API\"\n\n3. Click into Quick, Draw! Data API and press \"Enable\"\n\n4. If you haven't created an API Key yet for your project, go into [APIs \u0026 Services \u003e Credentials](https://console.developers.google.com/apis/credentials) and create one.  This is what you'll use in the `key` property of: `\u003cquick-draw key=\"YOUR_API_KEY\"\u003e\u003c/quick-draw\u003e`\n\n\n### Options\n\n| Name\t\t     | Description | Type\t\t  | Default | Options / Examples|\n| :----------- | :-----------:| :-----------:| :-----------:|---------:|\n| `category` **required* | One of the [available categories](./categories.js) | String | null | ```\u003cquick-draw category=\"apple\"\u003e\u003c/quick-draw\u003e```\n| `key` **required* | API Key from Google Cloud Platform | String | null | ```\u003cquick-draw key=\"AIzaSyC0U3yLy_m6u7aOMi9YJL2w1vWG4oI5mj0\"\u003e\u003c/quick-draw\u003e```\n| `host` | The host of your API | String | https://quickdrawfiles.appspot.com | ```\u003cquick-draw host=\"https://quickdrawfiles.appspot.com\"\u003e\u003c/quick-draw\u003e```\n| `index` | The drawing id within a category *(random unless specified)* | Number | -1 | ```\u003cquick-draw category=\"apple\" index=\"3927\"\u003e\u003c/quick-draw\u003e```\n| `animate` | Animate the drawing in the same time frame it was originally drawn|  Boolean | *false* |`\u003cquick-draw category=\"apple\" animate\u003e\u003c/quick-draw\u003e`\n| `time` | Sets the total time for the animation, preserving time proportions for each path (in milliseconds)|  Number | null |`\u003cquick-draw category=\"apple\" time=\"1500\" animate\u003e\u003c/quick-draw\u003e`\n| `paused` | When set to true, the component will only load the image data but not draw it. Listen for the data loaded event ```drawingData``` and then call ```drawImage()``` to control it manually|  Number | null |`\u003cquick-draw category=\"apple\" paused animate\u003e\u003c/quick-draw\u003e`\n| `strokeColor` | A hex value for the stroke color |  String | #000000 |`\u003cquick-draw category=\"apple\" strokeColor=\"#4285f4\"\u003e\u003c/quick-draw\u003e`\n| `strokeWidth` | The width/thickness of the stroke |  Number | 4|`\u003cquick-draw category=\"apple\" strokeWidth=\"1\"\u003e\u003c/quick-draw\u003e`\n| `width` | The px width of the drawing. If provided, the drawing will scale proportionally to fit the space. |  String | 'auto'|`\u003cquick-draw category=\"apple\" width=\"125\"\u003e\u003c/quick-draw\u003e`\n| `height` | The px height of the drawing. If provided, the drawing will scale proportionally to fit the space. |  String | 'auto'|`\u003cquick-draw category=\"apple\" height=\"125\"\u003e\u003c/quick-draw\u003e`\n| `debug` | For testing purposes, will log output |  Boolean | false|`\u003cquick-draw category=\"apple\" debug\u003e\u003c/quick-draw\u003e`\n\n\n### Events\n\nYou can listen for the following custom events from the component:\n\n| Name\t\t    | Description\t | Return       |\n| ----------- | :-----------:| :-----------:|\n| `drawingData` | When drawing data is received | `{detail: {index, category, data}}`\n| `drawingComplete` | When drawing is completed | `{detail: {index, category, data}}`\n\nAn example of how to access the element to listen for events:\n\n```\nfunction ready() {\n\tvar el = document.querySelector('quick-draw');\n\tel.addEventListener('drawingData', function(){\n\t  console.log('Drawing data loaded...');\n\t});\n\tel.addEventListener('drawingComplete', function(){\n\t  console.log('Drawing complete!');\n\t});\n}\n\t\ndocument.addEventListener(\"DOMContentLoaded\", ready);\n```\n\n### Methods\n\nYou can manually call the following methods on your element:\n\n#### fetchImageData(category, index)\nThis method will load image data, where \"category\" is one of [these available categories](./categories.js) like \"cat\", or \"apple\", and index is the number of the drawing.  If index isn't passed, then it will load in a random image. To find out exactly how many indices are available for a given category, use the ```/{category}/count``` API call below.  \n\n#### drawImage()\nThis method will simply draw the image out on the canvas with its current properties.  This is especially useful when using the ```paused``` property (when you want to control exactly when it's drawn out).\n\n\n## API / Middleware\n\nThis component has a server-side dependency, which can be reached from this endpoint:\n\n```https://quickdrawfiles.appspot.com/drawing/{category}?id={id}\u0026key={key}\u0026isAnimated={isAnimated}\u0026format={format}```\n\n| Name\t\t     | Description | Type\t\t  | Default |\n| :----------- | :-----------:| :-----------:| -----------:|\n| `category` **required* | One of the [available categories](./categories.js) | String | null\n| `id` **required* | ID (number) or \"random\" | String | null\n| `key` **required* | API Key ([see above for instructions](#getting-a-demo-api-key)) | String | null\n| `isAnimated` | Will return raw time-based data if true, otherwise simplified data | Boolean | false \n| `format` | JSON or canvas drawing | String | \"json\"\n\nYou can also retrieve the total count of drawings within a category using:\n\n```https://quickdrawfiles.appspot.com/drawing/{category}/count?key={key}```\n\n\n## Self-Hosting\n\nIt's highly encouraged that you self-host for larger, more serious projects as the quota limits are subject to change with this one (and it's not guaranteed to be supported / maintained forever).  View the [README.md](./api/README.md) in the API directory to learn more about how to self-host the files and the API.\n\n## Contributing\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -am 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## License\n\nThe component \u0026 API fall under the Apache 2.0 license.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecreativelab%2Fquickdraw-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglecreativelab%2Fquickdraw-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglecreativelab%2Fquickdraw-component/lists"}