{"id":17689890,"url":"https://github.com/cdaein/vite-plugin-ssam-replicate","last_synced_at":"2026-02-11T20:04:25.137Z","repository":{"id":220755007,"uuid":"752497120","full_name":"cdaein/vite-plugin-ssam-replicate","owner":"cdaein","description":"HTML5 Canvas + StableDiffusion via Replicate API","archived":false,"fork":false,"pushed_at":"2026-01-26T08:11:29.000Z","size":156,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-26T22:34:24.434Z","etag":null,"topics":["canvas","creative-coding","replicate-api","ssam","stable-diffusion","vite","vite-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cdaein.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2024-02-04T02:22:34.000Z","updated_at":"2026-01-26T08:11:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"baed23e2-fd8b-4f47-8a8d-5b61295c474a","html_url":"https://github.com/cdaein/vite-plugin-ssam-replicate","commit_stats":{"total_commits":15,"total_committers":1,"mean_commits":15.0,"dds":0.0,"last_synced_commit":"b65d8c3e38877ec1403259fdcb3ae36fa70d0f6a"},"previous_names":["cdaein/vite-plugin-ssam-replicate"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/cdaein/vite-plugin-ssam-replicate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-replicate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-replicate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-replicate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-replicate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cdaein","download_url":"https://codeload.github.com/cdaein/vite-plugin-ssam-replicate/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cdaein%2Fvite-plugin-ssam-replicate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29343683,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-11T18:58:20.535Z","status":"ssl_error","status_checked_at":"2026-02-11T18:56:44.814Z","response_time":97,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["canvas","creative-coding","replicate-api","ssam","stable-diffusion","vite","vite-plugin"],"created_at":"2024-10-24T11:49:12.181Z","updated_at":"2026-02-11T20:04:25.119Z","avatar_url":"https://github.com/cdaein.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vite-plugin-ssam-replicate\n\nThis is a plugin for [Ssam.js](https://github.com/cdaein/ssam) creative coding helper. It uses [Replicate](https://replicate.com/) Node.js API to generate Stable Diffusion image from your HTML5 Canvas drawing. With this plugin, you don't have to write boilerplate for the backend and focus on your Canvas drawing code.\n\n## Notes\n\n- The plugin only works in the development environment.\n- A Replicate online account and an API key are required. You get free inference for first tries, but you will eventually have to pay for the API usage.\n\n## Installation\n\nCreate a new sketch with `npm create ssam@latest` and choose the StableDiffusion template. You only need to provide your API key.\n\nIf you are not using Ssam, install with the following command:\n\n```sh\nnpm i -D vite-plugin-ssam-replicate\n```\n\n## Setup\n\n1. Create an API key on [Replicate.com](https://replicate.com).\n1. Create a `.env.DEV.local` file on the root of the Ssam sketch folder.\n1. Add the key as `REPLICATE_API_KEY=abcd1234` as environment variable. **Do not share this key with anyone! You will be charged for images generated with the key.**\n1. In `vite.config.ts`, import and add the plugin.\n\n```ts\nimport { defineConfig, loadEnv } from \"vite\";\nimport { ssamReplicate } from \"vite-plugin-ssam-replicate\";\n\n// Store Replicate API Key in `.env.DEV.local` file. ex. `REPLICATE_API_KEY=abcd1234`\n// Then, pass it to the plugin like `apiKey: envVars.REPLICATE_API_KEY`.\n// Make sure not to share the key with anyone!\nconst envVars = loadEnv(\"DEV\", process.cwd(), \"REPLICATE_\");\n\nexport default defineConfig({\n  // ... other settings\n  plugins: [\n    ssamExport(),\n    ssamGit(),\n    ssamFfmpeg(),\n    ssamReplicate({\n      /**\n      * Replicate API key\n      */\n      apiKey: string;\n      /**\n      * Test image filename(s) for dry run.\n      * Place it somewhere in the sketch directory. ie. `output/`\n      */\n      testOutput?: string[];\n      /**\n      * Save generated output files in `outDir`\n      * @default true\n      */\n      saveOutput?: boolean;\n      /**\n      * console log in browser\n      * @default true\n      * */\n      log?: boolean;\n      /**\n      * output directory\n      * @default \"./output\"\n      * */\n      outDir?: string;\n    }),\n  ],\n});\n```\n\n## In your sketch code\n\nFor the full example using Ssam, see the `examples/`. You can adapt this code to use without Ssam package if you want.\n\n```ts\n// Make sure you know when and where your sketch requests an image.\n// don't put this in animation loop unless you want to be charged for all the unnecessary requests!\n// ex. in key event listener\nif (!(ev.metaKey || ev.ctrlKey || ev.shiftKey) \u0026\u0026 ev.key === \"g\") {\n  const payload = {\n    // set it to `true` when you want to just test out program flow. it doesn't send an API request.\n    // set it to `false` when you are ready to start generating images.\n    dryRun: true,\n    // find a model version from Replicate.com\n    // LCM models are fast.\n    version: \"479633443fc6588e1e8ae764b79cdb3702d0c196e0cb2de6db39ce577383be77\",\n    // different models have different inputs. check the website.\n    input: {\n      prompt: \"An astronaut in spacesuit on Mars\",\n      negative_prompt: \"\",\n      // send the current canvas drawing for img2img\n      image: canvas.toDataURL(),\n      width,\n      height,\n      num_outputs: 1,\n      num_inference_steps: 6,\n      guidance_scale: 2,\n      prompt_strength: 0.8,\n      seed: (Math.random() * 100000000) | 0,\n      // ... find more settings on Replicate.com\n    },\n  };\n  // send the message to the plugin to request an image to the API\n  // again, be careful not to put this where it may be called multiple times (ie. animation loop)\n  import.meta.hot \u0026\u0026 import.meta.hot.send(\"ssam:replicate-predict\", payload);\n}\n\n// API response contains the remote URL. It's up to you what to do with it.\n// the plugin save the image to the file system by default.\n// you can also display in your canvas for further manipulation.\nif (import.meta.hot) {\n  import.meta.hot.on(\"ssam:replicate-prediction\", async (prediction) =\u003e {\n    output = await Promise.all(\n      prediction.output.map(async (url: string) =\u003e await loadImage(url)),\n    );\n    render();\n  });\n}\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-replicate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-replicate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcdaein%2Fvite-plugin-ssam-replicate/lists"}