# vite-plugin-dileep-replicate

> Generate Stable Diffusion images with dileep.js via Replicate API

Latest version **0.0.1** (published 2024-02-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-dileep-replicate
pnpm add vite-plugin-dileep-replicate
yarn add vite-plugin-dileep-replicate
bun add vite-plugin-dileep-replicate
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2024-02-13 |
| First published | 2024-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 11 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Dilip |
| Maintainers | dilipgona.dev |
| Keywords | canvas, replicate, ssam, stable-diffusion |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-dileep-replicate
- Repository: https://github.com/cdaein/vite-plugin-ssam-replicate
- Homepage: https://github.com/cdaein/vite-plugin-ssam-replicate#readme
- Issues: https://github.com/cdaein/vite-plugin-ssam-replicate/issues
- npm.io page: https://npm.io/package/vite-plugin-dileep-replicate

## Dependencies (3)

- [replicate](https://npm.io/package/replicate.md) ^0.25.2
- [ansi-regex](https://npm.io/package/ansi-regex.md) ^6.0.1
- [picocolors](https://npm.io/package/picocolors.md) ^1.0.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2024-02-13

## README

# vite-plugin-dileep-replicate

This is a plugin for [dileep.js](https://github.com/cdaein/dileep) 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.

## Notes

- The plugin only works in the development environment.
- 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.

## Installation

Create a new sketch with `npm create dileep@latest` and choose the StableDiffusion template. You only need to provide your API key.

If you are not using dileep, install with the following command:

```sh
npm i -D vite-plugin-dileep-replicate
```

## Setup

1. Create an API key on [Replicate.com](https://replicate.com).
1. Create a `.env.DEV.local` file on the root of the dileep sketch folder.
1. 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.**
1. In `vite.config.ts`, import and add the plugin.

```ts
import { defineConfig, loadEnv } from "vite";
import { dileepReplicate } from "vite-plugin-dileep-replicate";

// Store Replicate API Key in `.env.DEV.local` file. ex. `REPLICATE_API_KEY=abcd1234`
// Then, pass it to the plugin like `apiKey: envVars.REPLICATE_API_KEY`.
// Make sure not to share the key with anyone!
const envVars = loadEnv("DEV", process.cwd(), "REPLICATE_");

export default defineConfig({
  // ... other settings
  plugins: [
    dileepExport(),
    dileepGit(),
    dileepFfmpeg(),
    dileepReplicate({
      /**
      * Replicate API key
      */
      apiKey: string;
      /**
      * Test image filename(s) for dry run.
      * Place it somewhere in the sketch directory. ie. `output/`
      */
      testOutput?: string[];
      /**
      * Save generated output files in `outDir`
      * @default true
      */
      saveOutput?: boolean;
      /**
      * console log in browser
      * @default true
      * */
      log?: boolean;
      /**
      * output directory
      * @default "./output"
      * */
      outDir?: string;
    }),
  ],
});
```

## In your sketch code

For the full example using dileep, see the `examples/`. You can adapt this code to use without dileep package if you want.

```ts
// Make sure you know when and where your sketch requests an image.
// don't put this in animation loop unless you want to be charged for all the unnecessary requests!
// ex. in key event listener
if (!(ev.metaKey || ev.ctrlKey || ev.shiftKey) && ev.key === "g") {
  const payload = {
    // set it to `true` when you want to just test out program flow. it doesn't send an API request.
    // set it to `false` when you are ready to start generating images.
    dryRun: true,
    // find a model version from Replicate.com
    // LCM models are fast.
    version: "479633443fc6588e1e8ae764b79cdb3702d0c196e0cb2de6db39ce577383be77",
    // different models have different inputs. check the website.
    input: {
      prompt: "An astronaut in spacesuit on Mars",
      negative_prompt: "",
      // send the current canvas drawing for img2img
      image: canvas.toDataURL(),
      width,
      height,
      num_outputs: 1,
      num_inference_steps: 6,
      guidance_scale: 2,
      prompt_strength: 0.8,
      seed: (Math.random() * 100000000) | 0,
      // ... find more settings on Replicate.com
    },
  };
  // send the message to the plugin to request an image to the API
  // again, be careful not to put this where it may be called multiple times (ie. animation loop)
  import.meta.hot && import.meta.hot.send("dileep:replicate-predict", payload);
}

// API response contains the remote URL. It's up to you what to do with it.
// the plugin save the image to the file system by default.
// you can also display in your canvas for further manipulation.
if (import.meta.hot) {
  import.meta.hot.on("dileep:replicate-prediction", async (prediction) => {
    output = await Promise.all(
      prediction.output.map(async (url: string) => await loadImage(url))
    );
    render();
  });
}
```

## License

MIT

---
_Source: https://npm.io/package/vite-plugin-dileep-replicate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._